@sqlrooms/dropzone 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md ADDED
@@ -0,0 +1,107 @@
1
+ This package is part of the SQLRooms framework.
2
+
3
+ A flexible file upload component for SQLRooms applications that provides drag-and-drop functionality for files. This package makes it easy to handle file uploads with a modern, user-friendly interface.
4
+
5
+ ## Features
6
+
7
+ - 📁 **Drag and Drop**: Intuitive drag-and-drop file upload interface
8
+ - 📋 **File Selection**: Traditional file selection dialog support
9
+ - 🔍 **File Validation**: Validate file types and sizes
10
+ - 📊 **Upload Progress**: Track and display upload progress
11
+ - 🎨 **Customizable**: Flexible styling and configuration options
12
+ - 🧩 **React Integration**: Seamless integration with React applications
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install @sqlrooms/dropzone
18
+ # or
19
+ yarn add @sqlrooms/dropzone
20
+ ```
21
+
22
+ ## Basic Usage
23
+
24
+ ### Simple File Dropzone
25
+
26
+ ```tsx
27
+ import {FileDropzone} from '@sqlrooms/dropzone';
28
+
29
+ function MyFileUploader() {
30
+ const handleFileDrop = (files) => {
31
+ console.log('Files dropped:', files);
32
+ // Process the files...
33
+ };
34
+
35
+ return (
36
+ <FileDropzone
37
+ onFileDrop={handleFileDrop}
38
+ accept=".csv,.json,.xlsx"
39
+ maxSize={10 * 1024 * 1024} // 10MB
40
+ />
41
+ );
42
+ }
43
+ ```
44
+
45
+ ### With Custom Styling
46
+
47
+ ```tsx
48
+ import {FileDropzone} from '@sqlrooms/dropzone';
49
+
50
+ function CustomStyledDropzone() {
51
+ return (
52
+ <FileDropzone
53
+ onFileDrop={handleFiles}
54
+ className="border-2 border-dashed border-blue-400 rounded-lg p-8 hover:border-blue-600 transition-colors"
55
+ activeClassName="border-green-500 bg-green-50"
56
+ rejectClassName="border-red-500 bg-red-50"
57
+ dragMessage="Drop your files here"
58
+ idleMessage="Drag files or click to upload"
59
+ rejectMessage="File type not supported"
60
+ />
61
+ );
62
+ }
63
+ ```
64
+
65
+ ### With File Type Validation
66
+
67
+ ```tsx
68
+ import {FileDropzone} from '@sqlrooms/dropzone';
69
+
70
+ function DataFileUploader() {
71
+ const handleFileDrop = (files) => {
72
+ // Process data files...
73
+ };
74
+
75
+ return (
76
+ <div className="p-4 border rounded-lg">
77
+ <h2 className="text-xl font-bold mb-2">Upload Data Files</h2>
78
+ <p className="mb-4 text-gray-600">
79
+ Supported formats: CSV, JSON, Excel, Parquet
80
+ </p>
81
+ <FileDropzone
82
+ onFileDrop={handleFileDrop}
83
+ accept={{
84
+ 'text/csv': ['.csv'],
85
+ 'application/json': ['.json'],
86
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
87
+ '.xlsx',
88
+ ],
89
+ 'application/octet-stream': ['.parquet'],
90
+ }}
91
+ maxFiles={5}
92
+ maxSize={50 * 1024 * 1024} // 50MB
93
+ />
94
+ </div>
95
+ );
96
+ }
97
+ ```
98
+
99
+ ## Advanced Features
100
+
101
+ - **Multiple File Upload**: Support for uploading multiple files at once
102
+ - **File Preview**: Preview files before uploading
103
+ - **Custom Validation**: Define custom validation rules for files
104
+ - **Upload Cancellation**: Cancel ongoing uploads
105
+ - **Accessibility**: Fully accessible interface with keyboard support
106
+
107
+ For more information, visit the SQLRooms documentation.
package/dist/index.d.ts CHANGED
@@ -1,2 +1,6 @@
1
+ /**
2
+ * {@include ../README.md}
3
+ * @packageDocumentation
4
+ */
1
5
  export * from './file-dropzone';
2
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,iBAAiB,CAAC"}
package/dist/index.js CHANGED
@@ -1,2 +1,6 @@
1
+ /**
2
+ * {@include ../README.md}
3
+ * @packageDocumentation
4
+ */
1
5
  export * from './file-dropzone';
2
6
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC","sourcesContent":["export * from './file-dropzone';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,cAAc,iBAAiB,CAAC","sourcesContent":["/**\n * {@include ../README.md}\n * @packageDocumentation\n */\n\nexport * from './file-dropzone';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sqlrooms/dropzone",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "author": "Ilya Boyandin <ilya@boyandin.me>",
@@ -32,9 +32,9 @@
32
32
  "typedoc": "typedoc"
33
33
  },
34
34
  "dependencies": {
35
- "@sqlrooms/ui": "0.6.0",
35
+ "@sqlrooms/ui": "0.7.0",
36
36
  "lucide-react": "^0.474.0",
37
37
  "react-dropzone": "^14.3.5"
38
38
  },
39
- "gitHead": "f46dfe6b5d135e1a039b49b3ba71cda7150eab0f"
39
+ "gitHead": "8be65f051c588d3a963f721322429657913b6c63"
40
40
  }