{"_id":"@aadarshg214/file-upload-ui","name":"@aadarshg214/file-upload-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aadarshg214/file-upload-ui","version":"1.0.0","description":"A config-driven, accessible file upload component library","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./styles":"./dist/styles.css"},"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"tsc && vite build --config vite.lib.config.ts","lint":"eslint .","preview":"vite preview","pack":"npm run build:lib && npm pack"},"keywords":["file-upload","react","typescript","component-library","accessible","config-driven","shadcn","radix-ui"],"author":{"name":"Your Name"},"license":"MIT","peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@radix-ui/react-slot":"^1.2.3","clsx":"^2.1.1","tailwind-merge":"^3.3.1"},"devDependencies":{"@eslint/js":"^9.30.1","@tailwindcss/vite":"^4.1.11","@tailwindcss/postcss":"^4.1.11","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitejs/plugin-react":"^4.6.0","autoprefixer":"^10.4.21","eslint":"^9.30.1","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^16.3.0","postcss":"^8.5.6","react":"^19.1.0","react-dom":"^19.1.0","tailwindcss":"^4.1.11","typescript":"~5.8.3","typescript-eslint":"^8.35.1","vite":"^7.0.4"},"_id":"@aadarshg214/file-upload-ui@1.0.0","gitHead":"765fc4c2812b5f5305390bca4de5ba7fb2b66ffe","_nodeVersion":"22.17.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-uJzcZAr5Y1BJFhibBJy+ACyoyo3K1bfsYQffOaTiiKxAWtqkH1YAjQ3lWOxai4/L9GeOcHYP82diOA7hdhPHMA==","shasum":"372888f61fe354570a5039931c02566314ee7b74","tarball":"https://registry.npmjs.org/@aadarshg214/file-upload-ui/-/file-upload-ui-1.0.0.tgz","fileCount":6,"unpackedSize":342796,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID7NN6FlftYiaY2OAx4dV75M6qB5cHXKxgNsa4C/yiBeAiEA7iYEsR6SyC6G/vacMYvUADwsXBxb95jeyOcL3//nE4E="}]},"_npmUser":{"name":"aadarshg214","email":"aadarshgupta7828@gmail.com"},"directories":{},"maintainers":[{"name":"aadarshg214","email":"aadarshgupta7828@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/file-upload-ui_1.0.0_1754045141728_0.22515062924587093"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-01T10:45:41.609Z","1.0.0":"2025-08-01T10:45:41.926Z","modified":"2025-08-01T10:45:42.313Z"},"maintainers":[{"name":"aadarshg214","email":"aadarshgupta7828@gmail.com"}],"description":"A config-driven, accessible file upload component library","keywords":["file-upload","react","typescript","component-library","accessible","config-driven","shadcn","radix-ui"],"author":{"name":"Your Name"},"license":"MIT","readme":"# @file-upload/ui\n\nA config-driven, accessible file upload component library built with React, TypeScript, and Tailwind CSS. Features multiple variants, themes, and real-time configuration editing.\n\n## ✨ Features\n\n- 🎨 **Config-Driven**: Fully customizable via JSON configuration\n- ♿ **Accessible**: Keyboard navigation, screen reader support, ARIA labels\n- 📦 **NPM Ready**: Proper package structure with TypeScript support\n- 🎯 **Multiple Variants**: Button, dropzone, preview, and compact layouts\n- 🌈 **Theme Support**: Default, minimal, modern, and classic themes\n- 📱 **Responsive**: Works perfectly on all devices\n- 🔧 **TypeScript**: Full type safety throughout\n- ⚡ **Fast**: Built with Vite for lightning-fast development\n- 💾 **LocalStorage**: Files persist across page refreshes\n- 🖼️ **Image Previews**: Beautiful image previews with status overlays\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @file-upload/ui\n```\n\n### Basic Usage\n\n```tsx\nimport { FileUpload } from '@file-upload/ui'\n\nfunction App() {\n  const handleFilesSelected = (files: File[]) => {\n    console.log('Files selected:', files)\n  }\n\n  return (\n    <FileUpload\n      onFilesSelected={handleFilesSelected}\n      config={{\n        variant: 'dropzone',\n        theme: 'modern',\n        maxSize: 10 * 1024 * 1024, // 10MB\n        acceptedTypes: ['image/*', '.pdf']\n      }}\n    />\n  )\n}\n```\n\n## 📋 Component Variants\n\n### 1. Button Variant\nSimple button-style upload with icon placement options.\n\n```tsx\n<FileUpload\n  config={{\n    variant: 'button',\n    size: 'md',\n    theme: 'default',\n    iconPlacement: 'left'\n  }}\n/>\n```\n\n### 2. Dropzone Variant\nDrag-and-drop interface with visual feedback.\n\n```tsx\n<FileUpload\n  config={{\n    variant: 'dropzone',\n    size: 'lg',\n    theme: 'modern',\n    borderStyle: 'dashed'\n  }}\n/>\n```\n\n### 3. Preview Variant\nUpload with file previews and progress tracking.\n\n```tsx\n<FileUpload\n  config={{\n    variant: 'preview',\n    showPreview: true,\n    showProgress: true,\n    acceptedTypes: ['image/*']\n  }}\n  onFileUpload={async (file) => {\n    // Handle file upload\n    await uploadToServer(file)\n  }}\n/>\n```\n\n### 4. Compact Variant\nMinimal design for space-constrained layouts.\n\n```tsx\n<FileUpload\n  config={{\n    variant: 'compact',\n    size: 'sm',\n    theme: 'minimal'\n  }}\n/>\n```\n\n## 🎨 Configuration System\n\nThe component is fully configurable via a JSON schema that's LLM-friendly with a simple, declarative structure:\n\n```tsx\ninterface FileUploadConfig {\n  // Variant configuration\n  variant: 'button' | 'dropzone' | 'preview' | 'compact'\n  size: 'sm' | 'md' | 'lg'\n  theme: 'default' | 'minimal' | 'modern' | 'classic'\n  \n  // File restrictions\n  maxSize: number // in bytes\n  acceptedTypes: string[]\n  multiple: boolean\n  maxFiles?: number\n  \n  // Styling\n  radius: 'none' | 'sm' | 'md' | 'lg' | 'full'\n  borderStyle: 'solid' | 'dashed' | 'dotted' | 'none'\n  iconPlacement: 'left' | 'right' | 'top' | 'bottom' | 'center'\n  \n  // Labels and text\n  labels: {\n    title: string\n    subtitle: string\n    buttonText: string\n    dragText: string\n    dropText: string\n    errorText: string\n    successText: string\n  }\n  \n  // Behavior\n  autoUpload: boolean\n  showProgress: boolean\n  showPreview: boolean\n  allowRemove: boolean\n  \n  // Accessibility\n  ariaLabel: string\n  ariaDescribedBy?: string\n}\n```\n\n## 📝 JSON Configuration Examples\n\n### Basic Dropzone\n```json\n{\n  \"variant\": \"dropzone\",\n  \"size\": \"md\",\n  \"theme\": \"default\",\n  \"maxSize\": 10485760,\n  \"acceptedTypes\": [\"image/*\", \".pdf\", \".doc\"],\n  \"multiple\": true,\n  \"labels\": {\n    \"title\": \"Upload Files\",\n    \"subtitle\": \"Drag and drop files here or click to browse\",\n    \"buttonText\": \"Choose Files\",\n    \"dragText\": \"Drag files here\",\n    \"dropText\": \"Drop files here\",\n    \"errorText\": \"Error uploading file\",\n    \"successText\": \"File uploaded successfully\"\n  }\n}\n```\n\n### Image-Only Preview\n```json\n{\n  \"variant\": \"preview\",\n  \"size\": \"lg\",\n  \"theme\": \"modern\",\n  \"maxSize\": 5242880,\n  \"acceptedTypes\": [\"image/*\"],\n  \"multiple\": true,\n  \"showPreview\": true,\n  \"showProgress\": true,\n  \"autoUpload\": true,\n  \"labels\": {\n    \"title\": \"Upload Images\",\n    \"subtitle\": \"Drag and drop images here or click to browse\",\n    \"buttonText\": \"Select Images\",\n    \"dragText\": \"Drag images here\",\n    \"dropText\": \"Drop images here\",\n    \"errorText\": \"Error uploading image\",\n    \"successText\": \"Image uploaded successfully\"\n  }\n}\n```\n\n### Compact Button\n```json\n{\n  \"variant\": \"compact\",\n  \"size\": \"sm\",\n  \"theme\": \"minimal\",\n  \"maxSize\": 2097152,\n  \"acceptedTypes\": [\".pdf\", \".doc\", \".txt\"],\n  \"multiple\": false,\n  \"labels\": {\n    \"title\": \"Quick Upload\",\n    \"subtitle\": \"Select a document to upload\",\n    \"buttonText\": \"Choose File\",\n    \"dragText\": \"Drag file here\",\n    \"dropText\": \"Drop file here\",\n    \"errorText\": \"Error uploading file\",\n    \"successText\": \"File uploaded successfully\"\n  }\n}\n```\n\n## 🛠️ API Reference\n\n### FileUpload Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `config` | `Partial<FileUploadConfig>` | `defaultConfig` | Configuration object |\n| `onFilesSelected` | `(files: File[]) => void` | - | Callback when files are selected |\n| `onFileUpload` | `(file: FileWithPreview) => Promise<void>` | - | Callback for file upload |\n| `onFileRemove` | `(fileId: string) => void` | - | Callback when file is removed |\n| `className` | `string` | - | Additional CSS classes |\n| `disabled` | `boolean` | `false` | Disable the component |\n| `storageKey` | `string` | `'fileUpload'` | localStorage key for persistence |\n\n### Utility Functions\n\n```tsx\nimport { \n  createFileUploadConfig,\n  getConfigFromJSON,\n  exportConfigToJSON,\n  validateConfig,\n  saveFilesToStorage,\n  loadFilesFromStorage,\n  clearFilesFromStorage\n} from '@file-upload/ui'\n\n// Create config with overrides\nconst config = createFileUploadConfig({\n  variant: 'button',\n  theme: 'modern'\n})\n\n// Parse JSON string to config\nconst config = getConfigFromJSON(jsonString)\n\n// Export config to JSON\nconst jsonString = exportConfigToJSON(config)\n\n// Validate config\nconst { isValid, errors } = validateConfig(config)\n\n// Storage utilities\nsaveFilesToStorage(files, 'myUploadKey')\nconst files = loadFilesFromStorage('myUploadKey')\nclearFilesFromStorage('myUploadKey')\n```\n\n### Preset Configurations\n\n```tsx\nimport { configPresets } from '@file-upload/ui'\n\n// Use preset configurations\n<FileUpload config={configPresets.imageOnly} />\n<FileUpload config={configPresets.documentOnly} />\n<FileUpload config={configPresets.compact} />\n<FileUpload config={configPresets.modern} />\n```\n\n## 🎯 Accessibility Features\n\n- **Keyboard Navigation**: Full keyboard support with Enter/Space activation\n- **Screen Reader Support**: Proper ARIA labels and descriptions\n- **Focus Management**: Clear focus indicators and logical tab order\n- **Error Handling**: Accessible error messages and validation feedback\n- **Drag & Drop**: Keyboard fallback for drag-and-drop functionality\n\n## 🎨 Theming\n\nThe component supports four built-in themes:\n\n### Default Theme\nClean, professional design with neutral colors.\n\n### Minimal Theme\nSubtle borders and transparent backgrounds.\n\n### Modern Theme\nGradient buttons and blue accent colors.\n\n### Classic Theme\nTraditional gray color scheme.\n\n## 🧪 Demo\n\nRun the development server to see the interactive demo:\n\n```bash\nnpm run dev\n```\n\nVisit `http://localhost:5173` to see:\n- **Live Demo**: Interactive file upload with real-time configuration\n- **All Variants**: Showcase of all component variants and themes\n- **Config Editor**: Live JSON configuration editor with real-time preview\n- **Preset Configurations**: Pre-built configurations for common use cases\n\n### Demo Features\n\n1. **Live Demo Tab**\n   - Real-time component preview\n   - Current configuration display\n   - Upload summary with statistics\n\n2. **All Variants Tab**\n   - Button variants (Default, Modern, Minimal)\n   - Dropzone variants (Modern, Classic)\n   - Preview variants (Image, Document)\n   - Compact variants (Small, Medium, Large)\n\n3. **Config Editor Tab**\n   - Live JSON editor with syntax highlighting\n   - Real-time component preview\n   - Preset configuration buttons\n   - Copy/Reset functionality\n\n## 📦 Building for Production\n\n### Build the Library\n```bash\nnpm run build:lib\n```\n\n### Create NPM Package\n```bash\nnpm run pack\n```\n\n### Development\n```bash\nnpm run dev\n```\n\n## 🔧 Development\n\n### Project Structure\n```\nsrc/\n├── components/\n│   ├── file-upload.tsx          # Main component\n│   ├── file-upload-button.tsx   # Button variant\n│   ├── file-upload-dropzone.tsx # Dropzone variant\n│   └── file-upload-preview.tsx  # Preview variant\n├── types/\n│   ├── config.ts                # Configuration types\n│   └── variants.ts              # Variant types\n├── config/\n│   └── default-config.ts        # Default configuration\n├── utils/\n│   ├── config.ts                # Configuration utilities\n│   └── storage.ts               # Storage utilities\n├── lib/\n│   └── utils.ts                 # General utilities\n└── demo/\n    └── App.tsx                  # Demo application\n```\n\n### Adding New Variants\n\n1. Add variant type to `types/variants.ts`\n2. Add styles to `variantStyles` and `themeStyles`\n3. Implement variant logic in `file-upload.tsx`\n4. Create variant-specific component (optional)\n5. Update documentation\n\n## 🛠 Tech Stack\n\n- **React 19** - Latest React with concurrent features\n- **TypeScript** - Type safety and better developer experience\n- **Tailwind CSS** - Utility-first CSS framework\n- **Vite** - Fast build tool and dev server\n- **Radix UI** - Accessible UI primitives\n- **clsx & tailwind-merge** - Conditional styling utilities\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch: `git checkout -b feature-name`\n3. Commit your changes: `git commit -am 'Add feature'`\n4. Push to the branch: `git push origin feature-name`\n5. Submit a pull request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- [shadcn/ui](https://ui.shadcn.com/) for the component design patterns\n- [Radix UI](https://www.radix-ui.com/) for accessible primitives\n- [Tailwind CSS](https://tailwindcss.com/) for the utility-first styling\n- [Vite](https://vitejs.dev/) for the fast build tool\n","readmeFilename":"README.md","_rev":"1-be169eded34a77fb1b24442af6de0470"}