@omnikit-js/ui 0.6.1 → 0.9.2

package/README.md

@@ -1,31 +1,68 @@
 # @omnikit-js/ui
 
-React component library for OmniKit serverless platform. Provides both server and client components for building data-driven applications.
+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.
 
 ## Installation
 
 ```bash
-npm install @omnikit-js/ui
-# or
-pnpm add @omnikit-js/ui
-# or
-yarn add @omnikit-js/ui
+npm install @omnikit-js/ui @marcoschwartz/lite-ui
 ```
 
-## Components
+## Setup
 
-### DataList
+Import lite-ui styles in your app's layout or entry point:
+
+```tsx
+import '@marcoschwartz/lite-ui/styles.css'
+```
+
+---
+
+## Server Components
+
+### Billing
+
+Full billing dashboard with subscription management, invoices, payment methods, and plan selection.
+
+```tsx
+import '@marcoschwartz/lite-ui/styles.css'
+import { Billing } from '@omnikit-js/ui'
 
-A server-side component that fetches and displays data from OmniKit API with zero client JavaScript.
+export default async function BillingPage() {
+  return (
+    <Billing
+      baseUrl={process.env.OMNIKIT_BASE_URL!}
+      apiKey={process.env.OMNIKIT_API_KEY}
+      projectId={1}
+      userId="123"
+    />
+  )
+}
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `baseUrl` | `string` | Yes | OmniKit API base URL |
+| `projectId` | `number` | Yes | Project ID |
+| `userId` | `string` | Yes | User ID (email fetched automatically) |
+| `apiKey` | `string` | No | API Key for authentication |
+| `accessToken` | `string` | No | JWT token (alternative to apiKey) |
+| `userEmail` | `string` | No | User email (auto-fetched if not provided) |
+| `userName` | `string` | No | User name (auto-fetched if not provided) |
+| `testMode` | `boolean` | No | Enable Stripe test mode |
 
 **Features:**
-- Server-side rendering (SSR)
-- Automatic data fetching from OmniKit `/data/{table}` endpoints
-- Support for filtering, sorting, pagination
-- Tailwind CSS styling (customizable)
-- TypeScript support
+- Subscription management with plan switching
+- Invoice history with PDF downloads
+- Payment method management (add/remove/set default)
+- Usage tracking with progress bars
+- Plan comparison grid
 
-**Usage:**
+---
+
+### DataList
+
+Server-side component that fetches and displays data with zero client JavaScript.
 
 ```tsx
 import { DataList } from '@omnikit-js/ui'
@@ -36,7 +73,15 @@ export default async function UsersPage() {
       table="users"
       baseUrl={process.env.OMNIKIT_BASE_URL!}
       apiKey={process.env.OMNIKIT_API_KEY!}
-      columns={['name', 'email', 'created_at']}
+      columns={[
+        'name',
+        'email',
+        {
+          key: 'created_at',
+          label: 'Joined',
+          render: (value) => new Date(value).toLocaleDateString(),
+        },
+      ]}
       filter={{ active: true }}
       limit={20}
     />
@@ -44,51 +89,160 @@ export default async function UsersPage() {
 }
 ```
 
-**Props:**
-
 | Prop | Type | Required | Description |
 |------|------|----------|-------------|
 | `table` | `string` | Yes | Table name to query |
-| `baseUrl` | `string` | Yes | OmniKit API base URL (e.g., `http://localhost:3000/omnikit`) |
+| `baseUrl` | `string` | Yes | OmniKit API base URL |
 | `apiKey` | `string` | No | API Key for authentication |
 | `jwt` | `string` | No | JWT token (alternative to apiKey) |
 | `columns` | `Column[]` | Yes | Columns to display |
-| `keyField` | `string` | No | Row key field (default: `'id'`) |
 | `filter` | `object` | No | Query filter |
 | `sort` | `string` | No | Sort order (e.g., `'name:asc'`) |
 | `limit` | `number` | No | Max records to fetch |
 | `offset` | `number` | No | Pagination offset |
-| `className` | `string` | No | Custom container class |
-| `emptyMessage` | `string` | No | Message when no data |
-| `errorMessage` | `string` | No | Error message |
 
-**Custom Columns:**
+---
+
+## Client Components
+
+Import client components from `@omnikit-js/ui/client`:
+
+```tsx
+import { LoginForm, RegisterForm, FileUploader } from '@omnikit-js/ui/client'
+```
+
+### LoginForm
+
+```tsx
+import { LoginForm } from '@omnikit-js/ui/client'
+
+<LoginForm
+  apiUrl={process.env.NEXT_PUBLIC_API_URL!}
+  projectId={1}
+  onSuccess={(data) => {
+    // data.access_token, data.user
+    router.push('/dashboard')
+  }}
+  onError={(error) => console.error(error)}
+  registerLink="/register"
+  forgotPasswordLink="/forgot-password"
+/>
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiUrl` | `string` | Yes | OmniKit API base URL |
+| `projectId` | `number` | Yes | Project ID |
+| `onSuccess` | `function` | No | Callback with login data |
+| `onError` | `function` | No | Error callback |
+| `showRememberMe` | `boolean` | No | Show remember me checkbox |
+| `allowUsername` | `boolean` | No | Allow username instead of email |
+| `registerLink` | `string` | No | Link to registration page |
+| `forgotPasswordLink` | `string` | No | Link to forgot password page |
+
+---
+
+### RegisterForm
 
 ```tsx
-<DataList
-  table="users"
-  baseUrl={baseUrl}
-  apiKey={apiKey}
-  columns={[
-    'name',
-    'email',
-    {
-      key: 'created_at',
-      label: 'Joined',
-      render: (value) => new Date(value).toLocaleDateString(),
-    },
-    {
-      key: 'active',
-      label: 'Status',
-      render: (value) => value ? '✓ Active' : '✗ Inactive',
-    },
-  ]}
+import { RegisterForm } from '@omnikit-js/ui/client'
+
+<RegisterForm
+  apiUrl={process.env.NEXT_PUBLIC_API_URL!}
+  projectId={1}
+  onSuccess={(data) => router.push('/login')}
+  loginLink="/login"
+/>
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiUrl` | `string` | Yes | OmniKit API base URL |
+| `projectId` | `number` | Yes | Project ID |
+| `onSuccess` | `function` | No | Callback with registration data |
+| `onError` | `function` | No | Error callback |
+| `requireName` | `boolean` | No | Require name field |
+| `loginLink` | `string` | No | Link to login page |
+
+---
+
+### ForgotPasswordForm
+
+```tsx
+import { ForgotPasswordForm } from '@omnikit-js/ui/client'
+
+<ForgotPasswordForm
+  apiUrl={process.env.NEXT_PUBLIC_API_URL!}
+  projectId={1}
+  onSuccess={() => alert('Check your email!')}
+  loginLink="/login"
+/>
+```
+
+---
+
+### ResetPasswordForm
+
+```tsx
+import { ResetPasswordForm } from '@omnikit-js/ui/client'
+
+<ResetPasswordForm
+  apiUrl={process.env.NEXT_PUBLIC_API_URL!}
+  projectId={1}
+  token={searchParams.token}
+  onSuccess={() => router.push('/login')}
 />
 ```
 
+---
+
+### FileUploader
+
+Multi-file uploader with drag-and-drop, progress tracking, and multipart upload support.
+
+```tsx
+import { FileUploader } from '@omnikit-js/ui/client'
+
+<FileUploader
+  apiUrl={process.env.NEXT_PUBLIC_API_URL!}
+  projectId={1}
+  bucketId={1}
+  apiKey={process.env.NEXT_PUBLIC_API_KEY}
+  accept="image/*,application/pdf"
+  maxFileSize={50 * 1024 * 1024}
+  maxFiles={5}
+  onUploadComplete={(file) => console.log('Uploaded:', file)}
+  onAllUploadsComplete={(files) => console.log('All done:', files)}
+/>
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `apiUrl` | `string` | Yes | OmniKit API base URL |
+| `projectId` | `number` | Yes | Project ID |
+| `bucketId` | `number` | Yes | Storage bucket ID |
+| `apiKey` | `string` | No | API Key for authentication |
+| `accessToken` | `string` | No | JWT token (alternative) |
+| `accept` | `string` | No | Accepted file types |
+| `maxFileSize` | `number` | No | Max file size in bytes |
+| `maxFiles` | `number` | No | Max number of files (default: 10) |
+| `autoUpload` | `boolean` | No | Start upload automatically (default: true) |
+| `onUploadComplete` | `function` | No | Called when a file completes |
+| `onAllUploadsComplete` | `function` | No | Called when all files complete |
+| `onProgress` | `function` | No | Progress callback |
+
+**Features:**
+- Drag and drop support
+- Multi-file selection
+- Progress bars with speed/ETA
+- Automatic multipart upload for large files
+- Concurrent uploads with queue management
+
+---
+
 ## API Client
 
-Use the OmniKit client for custom data fetching:
+For custom data fetching:
 
 ```tsx
 import { createOmniKitClient } from '@omnikit-js/ui'
@@ -98,47 +252,40 @@ const client = createOmniKitClient({
   apiKey: 'your-api-key',
 })
 
-// Query data
-const users = await client.query('users', {
-  filter: { active: true },
-  sort: 'name:asc',
-  limit: 10,
-})
+// Query
+const users = await client.query('users', { filter: { active: true }, limit: 10 })
 
-// Find by ID
+// CRUD
 const user = await client.findById('users', '123')
-
-// Insert
 await client.insert('users', { name: 'John', email: 'john@example.com' })
-
-// Update
 await client.update('users', '123', { name: 'Jane' })
-
-// Delete
 await client.delete('users', '123')
 ```
 
-## Development
+---
 
-### Quick Start
+## TypeScript
 
-Run library watch build + demo app:
+All components are fully typed. Import types as needed:
 
-```bash
-cd /Users/marcoschwartz/Documents/code/frontends/omnikit/omnikit-ui
-./dev.sh
+```tsx
+import type {
+  BillingProps,
+  DataListProps,
+  LoginFormProps,
+  FileUploaderProps,
+  UploadedFile
+} from '@omnikit-js/ui'
 ```
 
-Visit: **http://localhost:3060**
-
-See [QUICKSTART.md](QUICKSTART.md) for detailed instructions.
+---
 
-### Tech Stack
+## Requirements
 
-- **React 18/19** - Peer dependency
-- **TypeScript** - Full type safety
-- **Tailwind CSS v4** - Styling (requires Tailwind in your project)
-- **tsup** - Build tooling
+- React 18 or 19
+- Next.js 13+ (App Router recommended)
+- Tailwind CSS v4
+- `@marcoschwartz/lite-ui` (peer dependency)
 
 ## License