{"_id":"@astracollab/nextjs","name":"@astracollab/nextjs","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@astracollab/nextjs","description":"AstraCollab SDK for Next.js","version":"0.0.1","author":{"name":"AstraCollab"},"private":false,"license":"MIT","keywords":["astracollab","storage","api","sdk","nextjs","react","file-upload"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"git+https://github.com/astracollab/astracollab.git","directory":"packages/nextjs"},"scripts":{"dev":"tsup --watch","build":"tsup","lint":"biome check --write --unsafe .","lint:ci":"biome check --unsafe .","test":"vitest","test:ci":"vitest run --coverage","type-check":"tsc --noEmit","storybook":"storybook dev -p 6006","storybook:build":"storybook build"},"types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.js","import":"./dist/index.mjs","types":"./dist/index.d.ts"},"./upload-service":{"require":"./dist/upload-service.js","import":"./dist/upload-service.mjs","types":"./dist/upload-service.d.ts"},"./hooks":{"require":"./dist/hooks.js","import":"./dist/hooks.mjs","types":"./dist/hooks.d.ts"},"./components":{"require":"./dist/components.js","import":"./dist/components.mjs","types":"./dist/components.d.ts"},"./package.json":"./package.json"},"engines":{"node":">=18.0.0"},"dependencies":{"axios":"^1.6.0","uuid":"^9.0.0","@tanstack/react-query":"^5.0.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","next":">=14.0.0"},"devDependencies":{"@biomejs/biome":"1.9.4","@storybook/addon-essentials":"8.6.8","@storybook/addon-interactions":"8.6.8","@storybook/addon-links":"8.6.8","@storybook/addon-webpack5-compiler-swc":"3.0.0","@storybook/blocks":"8.6.8","@storybook/react":"8.6.8","@storybook/react-webpack5":"8.6.8","@storybook/test":"8.6.8","@testing-library/jest-dom":"6.6.3","@testing-library/react":"16.2.0","@types/node":"22.13.11","@types/react":"18.3.13","@types/react-dom":"18.3.1","@types/uuid":"^9.0.0","@vitest/coverage-v8":"3.0.9","concurrently":"9.1.2","jsdom":"26.0.0","prop-types":"15.8.1","react":"18.3.1","react-dom":"18.3.1","storybook":"8.6.8","tsup":"8.4.0","typescript":"5.8.2","vitest":"3.0.9"},"pnpm":{"overrides":{"micromatch@<4.0.8":">=4.0.8"},"onlyBuiltDependencies":["@biomejs/biome","@swc/core","esbuild"]},"_id":"@astracollab/nextjs@0.0.1","gitHead":"df563603fa1da1e464c64ef195a3221e27c6b873","bugs":{"url":"https://github.com/astracollab/astracollab/issues"},"homepage":"https://github.com/astracollab/astracollab#readme","_nodeVersion":"20.16.0","_npmVersion":"10.8.1","dist":{"integrity":"sha512-8Bve2+RjTrW2Y5t0d8GoN21YHRw4KFhrFI8VFxwoNce0glYiCYaVzSAD4ETRoVdxs9jpaCB9wSS6/mxMugOfnw==","shasum":"0323f0648b44be9e93b4e02acecc95bafa5e3619","tarball":"https://registry.npmjs.org/@astracollab/nextjs/-/nextjs-0.0.1.tgz","fileCount":9,"unpackedSize":214540,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDotDgV5AXvHYU1VisKDGg9QxolyL1oUIpsSlEV2B4UAwIgXbAVhuG+d2nP18AHrdl23NHYaKO4t4HRjrbk/v81Xiw="}]},"_npmUser":{"name":"dailyhelix","email":"e.wambugu192@gmail.com"},"directories":{},"maintainers":[{"name":"dailyhelix","email":"e.wambugu192@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nextjs_0.0.1_1756744974251_0.5564288156916648"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-01T16:42:54.157Z","0.0.1":"2025-09-01T16:42:54.452Z","modified":"2025-09-01T16:42:54.735Z"},"maintainers":[{"name":"dailyhelix","email":"e.wambugu192@gmail.com"}],"description":"AstraCollab SDK for Next.js","homepage":"https://github.com/astracollab/astracollab#readme","keywords":["astracollab","storage","api","sdk","nextjs","react","file-upload"],"repository":{"type":"git","url":"git+https://github.com/astracollab/astracollab.git","directory":"packages/nextjs"},"author":{"name":"AstraCollab"},"bugs":{"url":"https://github.com/astracollab/astracollab/issues"},"license":"MIT","readme":"# @astracollab/nextjs\n\nAstraCollab Next.js SDK with React hooks and components for file uploads.\n\n## Features\n\n- 🚀 **Decoupled Architecture**: Use the upload service without UI, or with our pre-built components\n- 📁 **File Upload Management**: Handle single and multiple file uploads with progress tracking\n- 🔄 **Real-time Progress**: Track upload progress with Web Workers for smooth UI updates\n- 🎨 **Flexible UI**: Use our pre-built components or create your own UI\n- 🔧 **TypeScript Support**: Full TypeScript support with comprehensive type definitions\n- ⚡ **Next.js Optimized**: Built specifically for Next.js applications\n- 📦 **Zero Configuration**: Includes all necessary dependencies (React Query, Axios, etc.)\n\n## Installation\n\n```bash\nnpm install @astracollab/nextjs\n# or\nyarn add @astracollab/nextjs\n# or\npnpm add @astracollab/nextjs\n```\n\n**Note**: This package automatically installs `@tanstack/react-query` and `axios` as dependencies, so you don't need to install them separately.\n\n## Quick Start\n\n### 1. Basic Usage with Pre-built UI\n\n```tsx\nimport { FileUploaderWithUI } from '@astracollab/nextjs';\n\nfunction MyComponent() {\n  const config = {\n    baseURL: 'https://api.astracollab.app',\n    apiKey: 'your-api-key'\n  };\n\n  return (\n    <FileUploaderWithUI\n      config={config}\n      folderId=\"optional-folder-id\"\n      orgId=\"optional-org-id\"\n      maxFiles={5}\n      onUploadComplete={(results) => {\n        console.log('Upload completed:', results);\n      }}\n      onUploadError={(error, fileId) => {\n        console.error('Upload failed:', error);\n      }}\n    />\n  );\n}\n```\n\n### 2. Custom UI with Upload Service\n\n```tsx\nimport { useUploadService, useUpload } from '@astracollab/nextjs';\n\nfunction CustomUploader() {\n  const config = {\n    baseURL: 'https://api.astracollab.app',\n    apiKey: 'your-api-key'\n  };\n\n  const uploadService = useUploadService(config);\n  const { uploadFiles, uploadProgress, isUploading } = useUpload(uploadService);\n\n  const handleFileSelect = (event) => {\n    const files = Array.from(event.target.files);\n    uploadFiles(files);\n  };\n\n  return (\n    <div>\n      <input type=\"file\" multiple onChange={handleFileSelect} />\n      {isUploading && <p>Uploading files...</p>}\n      \n      {/* Display progress for each file */}\n      {Array.from(uploadProgress.entries()).map(([fileId, progress]) => (\n        <div key={fileId}>\n          <p>{progress.fileName}: {progress.progressPercentage}%</p>\n        </div>\n      ))}\n    </div>\n  );\n}\n```\n\n### 3. Using the Upload Service Directly\n\n```tsx\nimport { UploadService } from '@astracollab/nextjs';\n\nconst uploadService = new UploadService('https://api.astracollab.app', 'your-api-key');\n\n// Upload a single file\nconst fileId = await uploadService.uploadSingleFile({\n  file: fileObject,\n  fileName: 'example.jpg',\n  folderId: 'optional-folder-id',\n  orgId: 'optional-org-id'\n});\n\n// Upload multiple files\nawait uploadService.uploadMultipleFiles({\n  files: [\n    { id: '1', file: file1, name: 'file1.jpg', size: 1024 },\n    { id: '2', file: file2, name: 'file2.jpg', size: 2048 }\n  ],\n  folderId: 'optional-folder-id',\n  orgId: 'optional-org-id',\n  onProgress: (progressMap) => {\n    console.log('Upload progress:', progressMap);\n  },\n  onError: (errorMsg, fileId) => {\n    console.error('Upload error:', errorMsg);\n  },\n  onSuccess: (results) => {\n    console.log('Upload success:', results);\n  }\n});\n```\n\n## API Reference\n\n### Components\n\n#### FileUploaderWithUI\n\nA complete file upload component with drag-and-drop interface and progress tracking.\n\n```tsx\n<FileUploaderWithUI\n  config={UploadServiceConfig}\n  folderId?: string\n  orgId?: string\n  maxFiles?: number\n  onUploadComplete?: (results: { fileId: string; fileName: string; }[]) => void\n  onUploadError?: (error: string, fileId: string) => void\n  onUploadProgress?: (progressMap: Map<string, FileUploadProgress>) => void\n  className?: string\n  dropzoneClassName?: string\n  listClassName?: string\n  itemClassName?: string\n  buttonClassName?: string\n  progressBarClassName?: string\n  statusClassName?: string\n/>\n```\n\n#### FileUploader\n\nA minimal file upload component without UI styling.\n\n```tsx\n<FileUploader\n  config={UploadServiceConfig}\n  folderId?: string\n  orgId?: string\n  maxFiles?: number\n  onUploadComplete?: (results: { fileId: string; fileName: string; }[]) => void\n  onUploadError?: (error: string, fileId: string) => void\n  onUploadProgress?: (progressMap: Map<string, FileUploadProgress>) => void\n  className?: string\n  children?: React.ReactNode\n/>\n```\n\n### Hooks\n\n#### useUploadService\n\nCreates and manages an upload service instance.\n\n```tsx\nconst uploadService = useUploadService({\n  baseURL: string\n  apiKey?: string\n  timeout?: number\n});\n```\n\n#### useUpload\n\nProvides upload functionality with progress tracking.\n\n```tsx\nconst {\n  uploadFiles,\n  uploadProgress,\n  isUploading,\n  cancelUpload,\n  clearProgress\n} = useUpload(uploadService);\n```\n\n#### useFiles\n\nFetches files from the API.\n\n```tsx\nconst {\n  files,\n  isLoading,\n  error,\n  refetch\n} = useFiles(baseURL, apiKey, folderId, orgId);\n```\n\n### UploadService\n\nThe core upload service class.\n\n```tsx\nconst uploadService = new UploadService(baseURL, apiKey);\n\n// Methods\nuploadService.uploadSingleFile(options: SingleFileUploadOptions): Promise<string>\nuploadService.uploadMultipleFiles(config: UploadBatchConfig): Promise<void>\nuploadService.cancelUpload(fileId: string): void\nuploadService.getProgress(fileId: string): FileUploadProgress | undefined\nuploadService.getAllProgress(): Map<string, FileUploadProgress>\nuploadService.clearProgress(fileId: string): void\nuploadService.clearAllProgress(): void\nuploadService.addProgressListener(listener: (progressMap: Map<string, FileUploadProgress>) => void): void\nuploadService.removeProgressListener(listener: (progressMap: Map<string, FileUploadProgress>) => void): void\n```\n\n## Types\n\n### FileUploadProgress\n\n```tsx\ninterface FileUploadProgress {\n  fileId: string;\n  fileName: string;\n  totalBytes: number;\n  uploadedBytes: number;\n  progressPercentage: number;\n  status: 'pending' | 'uploading' | 'completed' | 'failed' | 'canceled';\n  error?: string;\n}\n```\n\n### UploadServiceConfig\n\n```tsx\ninterface UploadServiceConfig {\n  baseURL: string;\n  apiKey?: string;\n  timeout?: number;\n}\n```\n\n### SingleFileUploadOptions\n\n```tsx\ninterface SingleFileUploadOptions {\n  file: File;\n  fileName?: string;\n  folderId?: string;\n  orgId?: string;\n  onProgress?: (progress: number) => void;\n}\n```\n\n## Examples\n\n### Custom Styling\n\n```tsx\n<FileUploaderWithUI\n  config={config}\n  className=\"my-uploader\"\n  dropzoneClassName=\"custom-dropzone\"\n  buttonClassName=\"custom-button\"\n  progressBarClassName=\"custom-progress\"\n/>\n```\n\n### Custom File Input\n\n```tsx\n<FileUploader config={config}>\n  <button className=\"my-custom-button\">\n    Choose Files\n  </button>\n</FileUploader>\n```\n\n### Progress Tracking\n\n```tsx\nfunction UploadWithProgress() {\n  const [progress, setProgress] = useState(new Map());\n  \n  return (\n    <FileUploaderWithUI\n      config={config}\n      onUploadProgress={setProgress}\n    />\n  );\n}\n```\n\n## Dependencies\n\nThis package includes the following dependencies:\n\n- `@tanstack/react-query` - For data fetching and caching\n- `axios` - For HTTP requests\n- `uuid` - For generating unique identifiers\n\nYou don't need to install these separately - they're automatically included when you install `@astracollab/nextjs`.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-de8c262852745927a5604b2062c14979"}