@pol-studios/storage 1.0.0 → 1.0.1
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 +233 -0
- package/package.json +35 -17
package/README.md
ADDED
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
# @pol-studios/storage
|
|
2
|
+
|
|
3
|
+
> Storage utilities for POL applications
|
|
4
|
+
|
|
5
|
+
Supabase storage integration with hooks for file uploads, URL management, and dropzone functionality. Uses tus-js-client for resumable uploads.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @pol-studios/storage
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Peer Dependencies
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add react @tanstack/react-query @supabase/supabase-js react-dropzone @pol-studios/db @pol-studios/utils
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick Start
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { useUpload, useUrl, useDropzoneUpload, BUCKETS } from "@pol-studios/storage";
|
|
23
|
+
|
|
24
|
+
function FileUploader() {
|
|
25
|
+
const { upload, isUploading, progress } = useUpload({
|
|
26
|
+
bucket: BUCKETS.documents,
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
const handleUpload = async (file: File) => {
|
|
30
|
+
const result = await upload(file, "documents/my-file.pdf");
|
|
31
|
+
console.log("Uploaded:", result);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<div>
|
|
36
|
+
<input type="file" onChange={(e) => handleUpload(e.target.files[0])} />
|
|
37
|
+
{isUploading && <progress value={progress} max={100} />}
|
|
38
|
+
</div>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Subpath Exports
|
|
44
|
+
|
|
45
|
+
| Path | Description |
|
|
46
|
+
|------|-------------|
|
|
47
|
+
| `@pol-studios/storage` | All exports (hooks, types, config) |
|
|
48
|
+
| `@pol-studios/storage/hooks` | Upload hooks (useUpload, useUrl, usePath, useDropzoneUpload) |
|
|
49
|
+
| `@pol-studios/storage/types` | TypeScript type definitions |
|
|
50
|
+
| `@pol-studios/storage/config` | Bucket configuration (BUCKETS) |
|
|
51
|
+
|
|
52
|
+
## API Reference
|
|
53
|
+
|
|
54
|
+
### Hooks
|
|
55
|
+
|
|
56
|
+
#### useUpload
|
|
57
|
+
Upload files to Supabase storage.
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { useUpload, useUploadWithEntity } from "@pol-studios/storage/hooks";
|
|
61
|
+
|
|
62
|
+
const { upload, isUploading, progress, error } = useUpload({
|
|
63
|
+
bucket: "documents",
|
|
64
|
+
onSuccess: (result) => console.log("Uploaded:", result),
|
|
65
|
+
onError: (error) => console.error("Failed:", error),
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// Upload a file
|
|
69
|
+
await upload(file, "path/to/file.pdf");
|
|
70
|
+
|
|
71
|
+
// Upload with entity association
|
|
72
|
+
const { upload: uploadWithEntity } = useUploadWithEntity({
|
|
73
|
+
bucket: "attachments",
|
|
74
|
+
entityType: "project",
|
|
75
|
+
entityId: projectId,
|
|
76
|
+
});
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### useUrl
|
|
80
|
+
Get signed URLs for storage objects.
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { useUrl } from "@pol-studios/storage/hooks";
|
|
84
|
+
|
|
85
|
+
const { getUrl, url, isLoading } = useUrl({
|
|
86
|
+
bucket: "documents",
|
|
87
|
+
path: "files/document.pdf",
|
|
88
|
+
expiresIn: 3600, // 1 hour
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
// Or manually fetch URL
|
|
92
|
+
const signedUrl = await getUrl("another/path.pdf");
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
#### usePath
|
|
96
|
+
Manage storage paths.
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
import { usePath } from "@pol-studios/storage/hooks";
|
|
100
|
+
|
|
101
|
+
const { path, setPath, fullPath } = usePath({
|
|
102
|
+
bucket: "uploads",
|
|
103
|
+
basePath: "users/123",
|
|
104
|
+
});
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
#### useDropzoneUpload
|
|
108
|
+
Integrate with react-dropzone for drag-and-drop uploads.
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
import { useDropzoneUpload } from "@pol-studios/storage/hooks";
|
|
112
|
+
|
|
113
|
+
function DropzoneUploader() {
|
|
114
|
+
const {
|
|
115
|
+
getRootProps,
|
|
116
|
+
getInputProps,
|
|
117
|
+
isDragActive,
|
|
118
|
+
files,
|
|
119
|
+
upload,
|
|
120
|
+
isUploading,
|
|
121
|
+
progress,
|
|
122
|
+
} = useDropzoneUpload({
|
|
123
|
+
bucket: "uploads",
|
|
124
|
+
accept: { "image/*": [".png", ".jpg", ".jpeg"] },
|
|
125
|
+
maxFiles: 5,
|
|
126
|
+
maxSize: 10 * 1024 * 1024, // 10MB
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
return (
|
|
130
|
+
<div {...getRootProps()}>
|
|
131
|
+
<input {...getInputProps()} />
|
|
132
|
+
{isDragActive ? (
|
|
133
|
+
<p>Drop files here...</p>
|
|
134
|
+
) : (
|
|
135
|
+
<p>Drag files here or click to select</p>
|
|
136
|
+
)}
|
|
137
|
+
{isUploading && <progress value={progress} max={100} />}
|
|
138
|
+
</div>
|
|
139
|
+
);
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Configuration
|
|
144
|
+
|
|
145
|
+
#### BUCKETS
|
|
146
|
+
Pre-defined bucket names.
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
import { BUCKETS } from "@pol-studios/storage/config";
|
|
150
|
+
|
|
151
|
+
// Available buckets
|
|
152
|
+
BUCKETS.documents;
|
|
153
|
+
BUCKETS.images;
|
|
154
|
+
BUCKETS.attachments;
|
|
155
|
+
// ... etc
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## TypeScript Types
|
|
159
|
+
|
|
160
|
+
```tsx
|
|
161
|
+
import type {
|
|
162
|
+
// Upload types
|
|
163
|
+
StorageUploadMetadata,
|
|
164
|
+
StorageObjectMetadata,
|
|
165
|
+
UploadInput,
|
|
166
|
+
UploadResult,
|
|
167
|
+
UseUploadOptions,
|
|
168
|
+
|
|
169
|
+
// Attachment types
|
|
170
|
+
Attachment,
|
|
171
|
+
CachedUrl,
|
|
172
|
+
|
|
173
|
+
// Path types
|
|
174
|
+
UsePathOptions,
|
|
175
|
+
UsePathResult,
|
|
176
|
+
|
|
177
|
+
// Hook return types
|
|
178
|
+
UseSupabaseUploadOptions,
|
|
179
|
+
UseSupabaseUploadReturn,
|
|
180
|
+
|
|
181
|
+
// Config types
|
|
182
|
+
BucketName,
|
|
183
|
+
} from "@pol-studios/storage";
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
## Features
|
|
187
|
+
|
|
188
|
+
### Resumable Uploads
|
|
189
|
+
Uses tus-js-client for resumable uploads, allowing large file uploads to continue after network interruptions.
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
const { upload } = useUpload({
|
|
193
|
+
bucket: "large-files",
|
|
194
|
+
resumable: true, // Enable resumable uploads
|
|
195
|
+
chunkSize: 6 * 1024 * 1024, // 6MB chunks
|
|
196
|
+
});
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Progress Tracking
|
|
200
|
+
Track upload progress in real-time.
|
|
201
|
+
|
|
202
|
+
```tsx
|
|
203
|
+
const { progress, bytesUploaded, totalBytes } = useUpload({
|
|
204
|
+
bucket: "uploads",
|
|
205
|
+
onProgress: ({ percentage, bytesUploaded, totalBytes }) => {
|
|
206
|
+
console.log(`${percentage}% uploaded`);
|
|
207
|
+
},
|
|
208
|
+
});
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### Entity Association
|
|
212
|
+
Associate uploads with database entities.
|
|
213
|
+
|
|
214
|
+
```tsx
|
|
215
|
+
const { upload } = useUploadWithEntity({
|
|
216
|
+
bucket: "attachments",
|
|
217
|
+
entityType: "project",
|
|
218
|
+
entityId: "project-123",
|
|
219
|
+
onSuccess: (result) => {
|
|
220
|
+
// result includes entity association metadata
|
|
221
|
+
},
|
|
222
|
+
});
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
## Related Packages
|
|
226
|
+
|
|
227
|
+
- [@pol-studios/db](../db) - Database utilities and Supabase client
|
|
228
|
+
- [@pol-studios/utils](../utils) - Utility functions
|
|
229
|
+
- [@pol-studios/ui](../ui) - UI components including file dropzone
|
|
230
|
+
|
|
231
|
+
## License
|
|
232
|
+
|
|
233
|
+
UNLICENSED
|
package/package.json
CHANGED
|
@@ -1,24 +1,37 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pol-studios/storage",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Storage utilities for POL applications",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "./dist/index.js",
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
|
-
"files": [
|
|
10
|
-
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"keywords": [
|
|
13
|
+
"storage",
|
|
14
|
+
"supabase",
|
|
15
|
+
"upload",
|
|
16
|
+
"files"
|
|
17
|
+
],
|
|
11
18
|
"exports": {
|
|
12
|
-
".": {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
19
|
+
".": {
|
|
20
|
+
"import": "./dist/index.js",
|
|
21
|
+
"types": "./dist/index.d.ts"
|
|
22
|
+
},
|
|
23
|
+
"./hooks": {
|
|
24
|
+
"import": "./dist/hooks/index.js",
|
|
25
|
+
"types": "./dist/hooks/index.d.ts"
|
|
26
|
+
},
|
|
27
|
+
"./types": {
|
|
28
|
+
"import": "./dist/types/index.js",
|
|
29
|
+
"types": "./dist/types/index.d.ts"
|
|
30
|
+
},
|
|
31
|
+
"./config": {
|
|
32
|
+
"import": "./dist/config/index.js",
|
|
33
|
+
"types": "./dist/config/index.d.ts"
|
|
34
|
+
}
|
|
22
35
|
},
|
|
23
36
|
"publishConfig": {
|
|
24
37
|
"access": "public"
|
|
@@ -36,9 +49,14 @@
|
|
|
36
49
|
"moment": "^2.29.4"
|
|
37
50
|
},
|
|
38
51
|
"devDependencies": {
|
|
39
|
-
"@pol-studios/db": "workspace:*",
|
|
40
|
-
"@pol-studios/utils": "workspace:*",
|
|
41
52
|
"tsup": "^8.0.0",
|
|
42
|
-
"typescript": "^5.0.0"
|
|
53
|
+
"typescript": "^5.0.0",
|
|
54
|
+
"@pol-studios/db": "1.0.1",
|
|
55
|
+
"@pol-studios/utils": "1.0.1"
|
|
56
|
+
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"build": "tsup",
|
|
59
|
+
"dev": "tsup --watch",
|
|
60
|
+
"typecheck": "tsc --noEmit"
|
|
43
61
|
}
|
|
44
|
-
}
|
|
62
|
+
}
|