@omnikit-js/ui 0.9.1 → 0.9.2

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.
Files changed (2) hide show
  1. package/README.md +217 -70
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,31 +1,68 @@
1
1
  # @omnikit-js/ui
2
2
 
3
- React component library for OmniKit serverless platform. Provides both server and client components for building data-driven applications.
3
+ React component library for OmniKit serverless platform. Provides server and client components for building full-stack applications with authentication, billing, data display, and file uploads.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install @omnikit-js/ui
9
- # or
10
- pnpm add @omnikit-js/ui
11
- # or
12
- yarn add @omnikit-js/ui
8
+ npm install @omnikit-js/ui @marcoschwartz/lite-ui
13
9
  ```
14
10
 
15
- ## Components
11
+ ## Setup
16
12
 
17
- ### DataList
13
+ Import lite-ui styles in your app's layout or entry point:
14
+
15
+ ```tsx
16
+ import '@marcoschwartz/lite-ui/styles.css'
17
+ ```
18
+
19
+ ---
20
+
21
+ ## Server Components
22
+
23
+ ### Billing
24
+
25
+ Full billing dashboard with subscription management, invoices, payment methods, and plan selection.
26
+
27
+ ```tsx
28
+ import '@marcoschwartz/lite-ui/styles.css'
29
+ import { Billing } from '@omnikit-js/ui'
18
30
 
19
- A server-side component that fetches and displays data from OmniKit API with zero client JavaScript.
31
+ export default async function BillingPage() {
32
+ return (
33
+ <Billing
34
+ baseUrl={process.env.OMNIKIT_BASE_URL!}
35
+ apiKey={process.env.OMNIKIT_API_KEY}
36
+ projectId={1}
37
+ userId="123"
38
+ />
39
+ )
40
+ }
41
+ ```
42
+
43
+ | Prop | Type | Required | Description |
44
+ |------|------|----------|-------------|
45
+ | `baseUrl` | `string` | Yes | OmniKit API base URL |
46
+ | `projectId` | `number` | Yes | Project ID |
47
+ | `userId` | `string` | Yes | User ID (email fetched automatically) |
48
+ | `apiKey` | `string` | No | API Key for authentication |
49
+ | `accessToken` | `string` | No | JWT token (alternative to apiKey) |
50
+ | `userEmail` | `string` | No | User email (auto-fetched if not provided) |
51
+ | `userName` | `string` | No | User name (auto-fetched if not provided) |
52
+ | `testMode` | `boolean` | No | Enable Stripe test mode |
20
53
 
21
54
  **Features:**
22
- - Server-side rendering (SSR)
23
- - Automatic data fetching from OmniKit `/data/{table}` endpoints
24
- - Support for filtering, sorting, pagination
25
- - Tailwind CSS styling (customizable)
26
- - TypeScript support
55
+ - Subscription management with plan switching
56
+ - Invoice history with PDF downloads
57
+ - Payment method management (add/remove/set default)
58
+ - Usage tracking with progress bars
59
+ - Plan comparison grid
27
60
 
28
- **Usage:**
61
+ ---
62
+
63
+ ### DataList
64
+
65
+ Server-side component that fetches and displays data with zero client JavaScript.
29
66
 
30
67
  ```tsx
31
68
  import { DataList } from '@omnikit-js/ui'
@@ -36,7 +73,15 @@ export default async function UsersPage() {
36
73
  table="users"
37
74
  baseUrl={process.env.OMNIKIT_BASE_URL!}
38
75
  apiKey={process.env.OMNIKIT_API_KEY!}
39
- columns={['name', 'email', 'created_at']}
76
+ columns={[
77
+ 'name',
78
+ 'email',
79
+ {
80
+ key: 'created_at',
81
+ label: 'Joined',
82
+ render: (value) => new Date(value).toLocaleDateString(),
83
+ },
84
+ ]}
40
85
  filter={{ active: true }}
41
86
  limit={20}
42
87
  />
@@ -44,51 +89,160 @@ export default async function UsersPage() {
44
89
  }
45
90
  ```
46
91
 
47
- **Props:**
48
-
49
92
  | Prop | Type | Required | Description |
50
93
  |------|------|----------|-------------|
51
94
  | `table` | `string` | Yes | Table name to query |
52
- | `baseUrl` | `string` | Yes | OmniKit API base URL (e.g., `http://localhost:3000/omnikit`) |
95
+ | `baseUrl` | `string` | Yes | OmniKit API base URL |
53
96
  | `apiKey` | `string` | No | API Key for authentication |
54
97
  | `jwt` | `string` | No | JWT token (alternative to apiKey) |
55
98
  | `columns` | `Column[]` | Yes | Columns to display |
56
- | `keyField` | `string` | No | Row key field (default: `'id'`) |
57
99
  | `filter` | `object` | No | Query filter |
58
100
  | `sort` | `string` | No | Sort order (e.g., `'name:asc'`) |
59
101
  | `limit` | `number` | No | Max records to fetch |
60
102
  | `offset` | `number` | No | Pagination offset |
61
- | `className` | `string` | No | Custom container class |
62
- | `emptyMessage` | `string` | No | Message when no data |
63
- | `errorMessage` | `string` | No | Error message |
64
103
 
65
- **Custom Columns:**
104
+ ---
105
+
106
+ ## Client Components
107
+
108
+ Import client components from `@omnikit-js/ui/client`:
109
+
110
+ ```tsx
111
+ import { LoginForm, RegisterForm, FileUploader } from '@omnikit-js/ui/client'
112
+ ```
113
+
114
+ ### LoginForm
115
+
116
+ ```tsx
117
+ import { LoginForm } from '@omnikit-js/ui/client'
118
+
119
+ <LoginForm
120
+ apiUrl={process.env.NEXT_PUBLIC_API_URL!}
121
+ projectId={1}
122
+ onSuccess={(data) => {
123
+ // data.access_token, data.user
124
+ router.push('/dashboard')
125
+ }}
126
+ onError={(error) => console.error(error)}
127
+ registerLink="/register"
128
+ forgotPasswordLink="/forgot-password"
129
+ />
130
+ ```
131
+
132
+ | Prop | Type | Required | Description |
133
+ |------|------|----------|-------------|
134
+ | `apiUrl` | `string` | Yes | OmniKit API base URL |
135
+ | `projectId` | `number` | Yes | Project ID |
136
+ | `onSuccess` | `function` | No | Callback with login data |
137
+ | `onError` | `function` | No | Error callback |
138
+ | `showRememberMe` | `boolean` | No | Show remember me checkbox |
139
+ | `allowUsername` | `boolean` | No | Allow username instead of email |
140
+ | `registerLink` | `string` | No | Link to registration page |
141
+ | `forgotPasswordLink` | `string` | No | Link to forgot password page |
142
+
143
+ ---
144
+
145
+ ### RegisterForm
66
146
 
67
147
  ```tsx
68
- <DataList
69
- table="users"
70
- baseUrl={baseUrl}
71
- apiKey={apiKey}
72
- columns={[
73
- 'name',
74
- 'email',
75
- {
76
- key: 'created_at',
77
- label: 'Joined',
78
- render: (value) => new Date(value).toLocaleDateString(),
79
- },
80
- {
81
- key: 'active',
82
- label: 'Status',
83
- render: (value) => value ? '✓ Active' : '✗ Inactive',
84
- },
85
- ]}
148
+ import { RegisterForm } from '@omnikit-js/ui/client'
149
+
150
+ <RegisterForm
151
+ apiUrl={process.env.NEXT_PUBLIC_API_URL!}
152
+ projectId={1}
153
+ onSuccess={(data) => router.push('/login')}
154
+ loginLink="/login"
155
+ />
156
+ ```
157
+
158
+ | Prop | Type | Required | Description |
159
+ |------|------|----------|-------------|
160
+ | `apiUrl` | `string` | Yes | OmniKit API base URL |
161
+ | `projectId` | `number` | Yes | Project ID |
162
+ | `onSuccess` | `function` | No | Callback with registration data |
163
+ | `onError` | `function` | No | Error callback |
164
+ | `requireName` | `boolean` | No | Require name field |
165
+ | `loginLink` | `string` | No | Link to login page |
166
+
167
+ ---
168
+
169
+ ### ForgotPasswordForm
170
+
171
+ ```tsx
172
+ import { ForgotPasswordForm } from '@omnikit-js/ui/client'
173
+
174
+ <ForgotPasswordForm
175
+ apiUrl={process.env.NEXT_PUBLIC_API_URL!}
176
+ projectId={1}
177
+ onSuccess={() => alert('Check your email!')}
178
+ loginLink="/login"
179
+ />
180
+ ```
181
+
182
+ ---
183
+
184
+ ### ResetPasswordForm
185
+
186
+ ```tsx
187
+ import { ResetPasswordForm } from '@omnikit-js/ui/client'
188
+
189
+ <ResetPasswordForm
190
+ apiUrl={process.env.NEXT_PUBLIC_API_URL!}
191
+ projectId={1}
192
+ token={searchParams.token}
193
+ onSuccess={() => router.push('/login')}
86
194
  />
87
195
  ```
88
196
 
197
+ ---
198
+
199
+ ### FileUploader
200
+
201
+ Multi-file uploader with drag-and-drop, progress tracking, and multipart upload support.
202
+
203
+ ```tsx
204
+ import { FileUploader } from '@omnikit-js/ui/client'
205
+
206
+ <FileUploader
207
+ apiUrl={process.env.NEXT_PUBLIC_API_URL!}
208
+ projectId={1}
209
+ bucketId={1}
210
+ apiKey={process.env.NEXT_PUBLIC_API_KEY}
211
+ accept="image/*,application/pdf"
212
+ maxFileSize={50 * 1024 * 1024}
213
+ maxFiles={5}
214
+ onUploadComplete={(file) => console.log('Uploaded:', file)}
215
+ onAllUploadsComplete={(files) => console.log('All done:', files)}
216
+ />
217
+ ```
218
+
219
+ | Prop | Type | Required | Description |
220
+ |------|------|----------|-------------|
221
+ | `apiUrl` | `string` | Yes | OmniKit API base URL |
222
+ | `projectId` | `number` | Yes | Project ID |
223
+ | `bucketId` | `number` | Yes | Storage bucket ID |
224
+ | `apiKey` | `string` | No | API Key for authentication |
225
+ | `accessToken` | `string` | No | JWT token (alternative) |
226
+ | `accept` | `string` | No | Accepted file types |
227
+ | `maxFileSize` | `number` | No | Max file size in bytes |
228
+ | `maxFiles` | `number` | No | Max number of files (default: 10) |
229
+ | `autoUpload` | `boolean` | No | Start upload automatically (default: true) |
230
+ | `onUploadComplete` | `function` | No | Called when a file completes |
231
+ | `onAllUploadsComplete` | `function` | No | Called when all files complete |
232
+ | `onProgress` | `function` | No | Progress callback |
233
+
234
+ **Features:**
235
+ - Drag and drop support
236
+ - Multi-file selection
237
+ - Progress bars with speed/ETA
238
+ - Automatic multipart upload for large files
239
+ - Concurrent uploads with queue management
240
+
241
+ ---
242
+
89
243
  ## API Client
90
244
 
91
- Use the OmniKit client for custom data fetching:
245
+ For custom data fetching:
92
246
 
93
247
  ```tsx
94
248
  import { createOmniKitClient } from '@omnikit-js/ui'
@@ -98,47 +252,40 @@ const client = createOmniKitClient({
98
252
  apiKey: 'your-api-key',
99
253
  })
100
254
 
101
- // Query data
102
- const users = await client.query('users', {
103
- filter: { active: true },
104
- sort: 'name:asc',
105
- limit: 10,
106
- })
255
+ // Query
256
+ const users = await client.query('users', { filter: { active: true }, limit: 10 })
107
257
 
108
- // Find by ID
258
+ // CRUD
109
259
  const user = await client.findById('users', '123')
110
-
111
- // Insert
112
260
  await client.insert('users', { name: 'John', email: 'john@example.com' })
113
-
114
- // Update
115
261
  await client.update('users', '123', { name: 'Jane' })
116
-
117
- // Delete
118
262
  await client.delete('users', '123')
119
263
  ```
120
264
 
121
- ## Development
265
+ ---
122
266
 
123
- ### Quick Start
267
+ ## TypeScript
124
268
 
125
- Run library watch build + demo app:
269
+ All components are fully typed. Import types as needed:
126
270
 
127
- ```bash
128
- cd /Users/marcoschwartz/Documents/code/frontends/omnikit/omnikit-ui
129
- ./dev.sh
271
+ ```tsx
272
+ import type {
273
+ BillingProps,
274
+ DataListProps,
275
+ LoginFormProps,
276
+ FileUploaderProps,
277
+ UploadedFile
278
+ } from '@omnikit-js/ui'
130
279
  ```
131
280
 
132
- Visit: **http://localhost:3060**
133
-
134
- See [QUICKSTART.md](QUICKSTART.md) for detailed instructions.
281
+ ---
135
282
 
136
- ### Tech Stack
283
+ ## Requirements
137
284
 
138
- - **React 18/19** - Peer dependency
139
- - **TypeScript** - Full type safety
140
- - **Tailwind CSS v4** - Styling (requires Tailwind in your project)
141
- - **tsup** - Build tooling
285
+ - React 18 or 19
286
+ - Next.js 13+ (App Router recommended)
287
+ - Tailwind CSS v4
288
+ - `@marcoschwartz/lite-ui` (peer dependency)
142
289
 
143
290
  ## License
144
291
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@omnikit-js/ui",
3
- "version": "0.9.1",
3
+ "version": "0.9.2",
4
4
  "type": "module",
5
5
  "description": "React component library for OmniKit serverless platform",
6
6
  "main": "./dist/index.js",