@better-s3/ui 3.1049.0 → 3.1050.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 +5 -58
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,77 +1,24 @@
|
|
|
1
1
|
# @better-s3/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Optional prebuilt UI components for `better-s3`, powered by `@better-s3/react`.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
> Requires your app to use shadcn/ui with CSS variables (`--background`, `--foreground`, `--primary`, `--border`, etc).
|
|
5
|
+
Full documentation: [better-s3-docs.vercel.app](https://better-s3-docs.vercel.app/docs/ui)
|
|
8
6
|
|
|
9
7
|
## Install
|
|
10
8
|
|
|
11
9
|
```bash
|
|
12
|
-
pnpm add @better-s3/ui @better-s3/
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Peer dependencies:
|
|
16
|
-
|
|
17
|
-
- `react`
|
|
18
|
-
- `@base-ui/react`
|
|
19
|
-
- `class-variance-authority`
|
|
20
|
-
- `clsx`
|
|
21
|
-
- `lucide-react`
|
|
22
|
-
- `sonner`
|
|
23
|
-
- `tailwind-merge`
|
|
24
|
-
|
|
25
|
-
## Setup
|
|
26
|
-
|
|
27
|
-
Add the package stylesheet to your global CSS file and make sure your app already includes shadcn theme variables.
|
|
28
|
-
|
|
29
|
-
```css
|
|
30
|
-
@import "shadcn/tailwind.css";
|
|
31
|
-
@import "@better-s3/ui/styles.css";
|
|
10
|
+
pnpm add @better-s3/ui @better-s3/react @better-s3/core
|
|
32
11
|
```
|
|
33
12
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
If you prefer source-owned UI instead of consuming the package, keep the better-s3 server and hook layers and compose your own components with `@better-s3/react` plus the [shadcn CLI](https://ui.shadcn.com/docs/cli).
|
|
37
|
-
|
|
38
|
-
## Components
|
|
13
|
+
## Quick start
|
|
39
14
|
|
|
40
15
|
```tsx
|
|
41
16
|
import { createS3Api } from "@better-s3/core";
|
|
42
|
-
import { Upload
|
|
17
|
+
import { Upload } from "@better-s3/ui";
|
|
43
18
|
|
|
44
19
|
const api = createS3Api();
|
|
45
|
-
|
|
46
|
-
// Single upload (button or dropzone)
|
|
47
|
-
<Upload
|
|
48
|
-
api={api}
|
|
49
|
-
objectKey={(file) => `uploads/${file.name}`}
|
|
50
|
-
variant="dropzone"
|
|
51
|
-
accept={["image/*"]}
|
|
52
|
-
maxFileSize={10 * 1024 * 1024}
|
|
53
|
-
/>
|
|
54
|
-
|
|
55
|
-
// Batch upload
|
|
56
|
-
<MultiUpload
|
|
57
|
-
api={api}
|
|
58
|
-
objectKey={(file) => `uploads/${file.name}`}
|
|
59
|
-
maxFiles={10}
|
|
60
|
-
/>
|
|
61
|
-
|
|
62
|
-
// Download
|
|
63
|
-
<DownloadButton api={api} objectKey="report.pdf" fileName="report.pdf" />
|
|
64
|
-
|
|
65
|
-
// Delete with confirmation dialog
|
|
66
|
-
<DeleteButton api={api} objectKey="report.pdf" />
|
|
67
20
|
```
|
|
68
21
|
|
|
69
|
-
## When to use this package
|
|
70
|
-
|
|
71
|
-
- Use `@better-s3/ui` when you want fast setup with polished defaults.
|
|
72
|
-
- Use `@better-s3/react` when you want to build your own UI with your own components.
|
|
73
|
-
- Mix both when you want ready-made upload flows now and custom components later.
|
|
74
|
-
|
|
75
22
|
## License
|
|
76
23
|
|
|
77
24
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@better-s3/ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1050.0",
|
|
4
4
|
"description": "Pre-built React UI components for S3 file upload, download, and delete",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"s3",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"styles.css"
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@better-s3/core": "3.
|
|
40
|
-
"@better-s3/react": "3.
|
|
39
|
+
"@better-s3/core": "3.1050.0",
|
|
40
|
+
"@better-s3/react": "3.1050.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@base-ui/react": ">=1.0.0",
|