@apple-pie/slice 0.0.7 → 0.0.8
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 +34 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,10 +10,10 @@ Slice is a TypeScript-first React UI kit with theme tokens, utility hooks, optio
|
|
|
10
10
|
|
|
11
11
|
## What is included
|
|
12
12
|
|
|
13
|
-
- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons)
|
|
13
|
+
- 30+ reusable UI components (inputs, buttons, navigation, overlays, feedback, layout, icons, upload UI)
|
|
14
14
|
- Theme system with light/dark presets and typed theme tokens
|
|
15
15
|
- React hooks for theme, window sizing, keyboard shortcuts, local storage, resize, and more
|
|
16
|
-
- Optional Zustand-powered stores (`toast`, `tip`)
|
|
16
|
+
- Optional Zustand-powered stores (`toast`, `tip`, `uploads`, `window`)
|
|
17
17
|
- Rollup + TypeScript build pipeline for CJS, ESM, and declaration output
|
|
18
18
|
- Component performance benchmarks powered by Vitest
|
|
19
19
|
|
|
@@ -77,6 +77,7 @@ Subpath imports are also published:
|
|
|
77
77
|
- `@apple-pie/slice/providers/*`
|
|
78
78
|
- `@apple-pie/slice/stores`
|
|
79
79
|
- `@apple-pie/slice/stores/*`
|
|
80
|
+
- `@apple-pie/slice/workers/*`
|
|
80
81
|
- `@apple-pie/slice/theme`
|
|
81
82
|
- `@apple-pie/slice/theme/colors`
|
|
82
83
|
- `@apple-pie/slice/theme/corners`
|
|
@@ -87,11 +88,11 @@ Subpath imports are also published:
|
|
|
87
88
|
## Components
|
|
88
89
|
|
|
89
90
|
- `Avatar`, `AvatarGroup`, `Badge`, `CheckBox`, `DivInput`, `Dot`, `DropDown`
|
|
90
|
-
- `ErrorSummary`, `FlexDiv`, `Grouper`, `Icon`, `IconButton`
|
|
91
|
+
- `ErrorSummary`, `FileIcon`, `FileList`, `FlexDiv`, `Grouper`, `Icon`, `IconButton`
|
|
91
92
|
- `Logos`, `PromptInput`, `Overlay`, `Pager`, `ProgressIndicator`, `DoneCheck`
|
|
92
93
|
- `RadioButton`, `RadioButtonList`, `Slider`, `Spacer`, `Switch`, `TabBar`
|
|
93
94
|
- `TextField`, `TextArea`, `Tip`, `Toast`, `Button`, `ButtonBar`
|
|
94
|
-
- `Card`, `Chip`, `Label`, `DocIcons`, `DraggablePanel`
|
|
95
|
+
- `Card`, `Chip`, `Label`, `DocIcons`, `DraggablePanel`, `UploadArea`
|
|
95
96
|
|
|
96
97
|
## Hooks
|
|
97
98
|
|
|
@@ -108,6 +109,8 @@ Subpath imports are also published:
|
|
|
108
109
|
|
|
109
110
|
- `toast` store: `useToast`, `useToastActions`, `toastActions`, `getToast`
|
|
110
111
|
- `tip` store: `useTip`, `useTipActions`, `tipActions`, `getTip`
|
|
112
|
+
- `window` store: `useWindowStore`, atomic viewport/runtime hooks, imperative viewport helpers
|
|
113
|
+
- `uploads` store: `useUploadsStore`, `useUploads`, `useUploadsActions`, `createUploadsWorker`, `uploadsActions`
|
|
111
114
|
|
|
112
115
|
Example:
|
|
113
116
|
|
|
@@ -115,6 +118,33 @@ Example:
|
|
|
115
118
|
import { useToast, useToastActions } from '@apple-pie/slice/stores/toast';
|
|
116
119
|
```
|
|
117
120
|
|
|
121
|
+
Uploads store example:
|
|
122
|
+
|
|
123
|
+
```ts
|
|
124
|
+
import {
|
|
125
|
+
createUploadsWorker,
|
|
126
|
+
uploadsActions,
|
|
127
|
+
useUploads,
|
|
128
|
+
useUploadsActions,
|
|
129
|
+
} from '@apple-pie/slice/stores/uploads';
|
|
130
|
+
|
|
131
|
+
const worker = createUploadsWorker();
|
|
132
|
+
|
|
133
|
+
uploadsActions.initialize({ uploadURL: '/api/uploads' }, worker);
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
For consuming browser apps using a built worker asset, pass an explicit worker URL from your bundler:
|
|
137
|
+
|
|
138
|
+
```ts
|
|
139
|
+
import { createUploadsWorker, uploadsActions } from '@apple-pie/slice/stores/uploads';
|
|
140
|
+
import uploadsWorkerUrl from '@apple-pie/slice/workers/uploads/uploads?url';
|
|
141
|
+
|
|
142
|
+
const worker = createUploadsWorker(uploadsWorkerUrl);
|
|
143
|
+
uploadsActions.initialize({ uploadURL: '/api/uploads' }, worker);
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
This worker URL pattern assumes modern frontend tooling such as Vite or similar browser-focused bundlers.
|
|
147
|
+
|
|
118
148
|
## Theme exports
|
|
119
149
|
|
|
120
150
|
- Presets: `lightTheme`, `darkTheme`
|