@omnikit-js/ui 0.5.5 → 0.6.1

package/README.md

@@ -1,300 +1,145 @@
 # @omnikit-js/ui
 
-A comprehensive SaaS billing component for Next.js applications with Stripe integration. Built with React Server Components support and Tailwind CSS v4.
-
-## Features
-
-- 🚀 **Server Components Support** - Optimized for Next.js App Router
-- 💳 **Stripe Integration** - Complete payment processing and subscription management
-- 🎨 **Beautiful UI** - Built with Tailwind CSS v4 and Radix UI
-- 📊 **Usage Tracking** - Monitor and display resource usage
-- 🔄 **Subscription Management** - Handle upgrades, downgrades, and cancellations
-- 💰 **Payment Methods** - Add, remove, and manage multiple payment methods
-- 📜 **Billing History** - View and download past invoices
-- 🔐 **Secure** - Server-side API key handling
-- 🎯 **No Style Conflicts** - Prefixed CSS option to avoid conflicts with your app
+React component library for OmniKit serverless platform. Provides both server and client components for building data-driven applications.
 
 ## Installation
 
 ```bash
 npm install @omnikit-js/ui
+# or
+pnpm add @omnikit-js/ui
+# or
+yarn add @omnikit-js/ui
 ```
 
-## Usage
-
-### Option 1: Standard CSS (For Apps Without Tailwind)
-
-If your app doesn't use Tailwind CSS or you want to use the component's default styles:
-
-```javascript
-// Import the CSS in your app's entry point (e.g., _app.tsx or layout.tsx)
-import '@omnikit-js/ui/dist/styles.css'
+## Components
 
-// Use the component
-import { Billing } from '@omnikit-js/ui'
-
-export default function BillingPage() {
-  return (
-    <Billing 
-      userId="user_123"
-      apiUrl="https://your-api.com"
-      apiKey="your-api-key"
-    />
-  )
-}
-```
+### DataList
 
-### Option 2: Isolated CSS (Recommended for Apps With Style Conflicts)
+A server-side component that fetches and displays data from OmniKit API with zero client JavaScript.
 
-To completely isolate the component styles and avoid any conflicts:
+**Features:**
+- Server-side rendering (SSR)
+- Automatic data fetching from OmniKit `/data/{table}` endpoints
+- Support for filtering, sorting, pagination
+- Tailwind CSS styling (customizable)
+- TypeScript support
 
-```javascript
-// Import the isolated CSS version
-import '@omnikit-js/ui/dist/styles.isolated.css'
+**Usage:**
 
-// Use the component
-import { Billing } from '@omnikit-js/ui'
+```tsx
+import { DataList } from '@omnikit-js/ui'
 
-export default function BillingPage() {
+export default async function UsersPage() {
   return (
-    <Billing 
-      userId="user_123"
-      apiUrl="https://your-api.com"
-      apiKey="your-api-key"
+    <DataList
+      table="users"
+      baseUrl={process.env.OMNIKIT_BASE_URL!}
+      apiKey={process.env.OMNIKIT_API_KEY!}
+      columns={['name', 'email', 'created_at']}
+      filter={{ active: true }}
+      limit={20}
     />
   )
 }
 ```
 
-**Note:** The isolated version wraps all styles in `.omnikit-billing-component` and uses `!important` for critical styles like progress bars to prevent conflicts.
-
-### Next.js App Router Example
-
-```javascript
-// app/billing/page.tsx
-import '@omnikit-js/ui/dist/styles.isolated.css'
-import { Billing } from '@omnikit-js/ui'
-
-export default function BillingPage() {
-  return (
-    <main className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-6">Billing & Subscription</h1>
-      <Billing 
-        userId="user_123"
-        apiUrl={process.env.NEXT_PUBLIC_API_URL}
-        apiKey={process.env.API_KEY}
-      />
-    </main>
-  )
-}
-```
-
-### Next.js Pages Router Example
-
-```javascript
-// pages/_app.tsx
-import '@omnikit-js/ui/dist/styles.isolated.css'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
-
-// pages/billing.tsx
-import { Billing } from '@omnikit-js/ui'
-
-export default function BillingPage() {
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-6">Billing & Subscription</h1>
-      <Billing 
-        userId="user_123"
-        apiUrl={process.env.NEXT_PUBLIC_API_URL}
-        apiKey={process.env.API_KEY}
-      />
-    </div>
-  )
-}
-```
-
-### Using Client Component Directly
-
-If you need to use the client component directly (e.g., in a client-side only context):
-
-```jsx
-'use client';
-
-import { BillingClient } from '@omnikit-js/ui';
-
-export default function ClientBillingPage({ customerData, pricingData, paymentMethods }) {
-  return (
-    <BillingClient 
-      customerData={customerData}
-      pricingData={pricingData}
-      paymentMethods={paymentMethods}
-      apiUrl="https://api.yourdomain.com"
-      apiKey="your-api-key"
-    />
-  );
-}
+**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`) |
+| `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:**
+
+```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',
+    },
+  ]}
+/>
 ```
 
-## Resolving Style Conflicts
-
-If you experience style conflicts, especially with progress bars or grid layouts:
+## API Client
 
-### Progress Bar Color Conflicts
+Use the OmniKit client for custom data fetching:
 
-Override the progress bar styles in your global CSS:
+```tsx
+import { createOmniKitClient } from '@omnikit-js/ui'
 
-```css
-/* Force specific progress bar colors */
-.omnikit-progress-fill {
-  background-color: #3b82f6 !important;
-}
+const client = createOmniKitClient({
+  baseUrl: 'http://localhost:3000/omnikit',
+  apiKey: 'your-api-key',
+})
 
-/* Or for dark mode */
-@media (prefers-color-scheme: dark) {
-  .omnikit-progress-fill {
-    background-color: #60a5fa !important;
-  }
-}
-```
+// Query data
+const users = await client.query('users', {
+  filter: { active: true },
+  sort: 'name:asc',
+  limit: 10,
+})
 
-### Grid Layout Conflicts
+// Find by ID
+const user = await client.findById('users', '123')
 
-Wrap the component in a scoped container to isolate styles:
-
-```css
-/* Create an isolation container */
-.billing-wrapper {
-  /* Reset conflicting styles */
-  all: initial;
-  font-family: inherit;
-  color: inherit;
-}
-
-.billing-wrapper * {
-  box-sizing: border-box;
-}
+// Insert
+await client.insert('users', { name: 'John', email: 'john@example.com' })
 
-/* Fix specific grid issues */
-.billing-wrapper .omnikit-pricing-grid {
-  display: grid !important;
-  gap: 1rem !important;
-}
-```
+// Update
+await client.update('users', '123', { name: 'Jane' })
 
-```javascript
-<div className="billing-wrapper">
-  <Billing userId="user_123" />
-</div>
+// Delete
+await client.delete('users', '123')
 ```
 
-## Component Props
-
-### Billing (Server Component)
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| userId | string | required | The user ID to fetch billing data for |
-| apiUrl | string | `process.env.NEXT_PUBLIC_API_URL` | The API base URL |
-| apiKey | string | `process.env.API_KEY` | The API key for authentication |
-| projectId | string | `process.env.NEXT_PUBLIC_API_PROJECT` | The project ID for multi-tenant support |
-
-### BillingClient (Client Component)
+## Development
 
-| Prop | Type | Description |
-|------|------|-------------|
-| customerData | object | Customer data including subscriptions and usage |
-| pricingData | object | Available pricing plans and products |
-| paymentMethods | object | User's payment methods |
-| apiUrl | string | The API base URL |
-| apiKey | string | The API key for authentication |
+### Quick Start
 
-## Environment Variables
+Run library watch build + demo app:
 
-Create a `.env.local` file in your Next.js project:
-
-```env
-# API Configuration
-NEXT_PUBLIC_API_URL=http://localhost:3000
-API_KEY=your-secret-api-key
-
-# Stripe Configuration
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_your_publishable_key
-
-# Project Configuration (optional)
-NEXT_PUBLIC_API_PROJECT=1
+```bash
+cd /Users/marcoschwartz/Documents/code/frontends/omnikit/omnikit-ui
+./dev.sh
 ```
 
-## API Endpoints
+Visit: **http://localhost:3060**
 
-The component expects the following API endpoints:
+See [QUICKSTART.md](QUICKSTART.md) for detailed instructions.
 
-- `GET /billing/customers/:userId` - Fetch customer data
-- `GET /billing/prices?project_id=:projectId` - Fetch pricing plans
-- `GET /billing/payment-methods?user_id=:userId` - Fetch payment methods
-- `POST /billing/setup-intent` - Create Stripe setup intent
-- `POST /billing/subscriptions` - Create subscription
-- `DELETE /billing/subscriptions/:id` - Cancel subscription
-- `POST /billing/payment-methods/:id/default` - Set default payment method
-- `DELETE /billing/payment-methods/:id` - Delete payment method
+### Tech Stack
 
-## Troubleshooting
-
-### Common Issues and Solutions
-
-1. **Progress bar showing wrong color**
-   - Use the prefixed CSS version
-   - Override `.omnikit-progress-fill` with `!important`
-
-2. **Grid layout breaking on pricing page**
-   - Check for global grid styles in your app
-   - Use the isolation container approach shown above
-   - Ensure no conflicting CSS Grid properties
-
-3. **Modal z-index conflicts**
-   - Component modals use `z-50` (z-index: 50)
-   - Adjust your app's z-index scale if needed
-
-4. **Font inconsistencies**
-   - The component inherits font-family
-   - Set font on a parent element
-
-5. **Styles not loading**
-   - Ensure you're importing the CSS file
-   - Check the correct path: `@omnikit-js/ui/dist/styles.css` or `@omnikit-js/ui/dist/styles.isolated.css`
-   - For apps with style conflicts, use the isolated version
-
-## Version History
-
-- **0.5.3** - Added isolated CSS option for better style conflict resolution
-- **0.5.2** - Fixed CSS exports in package.json
-- **0.5.1** - Tailwind CSS v4 support with prefix option
-- **0.3.5** - Previous version with Tailwind CSS v3
-
-## Browser Support
-
-Requires modern browsers:
-- Safari 16.4+
-- Chrome 111+
-- Firefox 128+
-
-For older browser support, use version 0.3.5.
-
-## TypeScript
-
-The package includes TypeScript definitions. No additional setup required.
+- **React 18/19** - Peer dependency
+- **TypeScript** - Full type safety
+- **Tailwind CSS v4** - Styling (requires Tailwind in your project)
+- **tsup** - Build tooling
 
 ## License
 
 MIT
-
-## Contributing
-
-Contributions are welcome! Please feel free to submit a Pull Request.
-
-## Support
-
-For issues and feature requests, please use the [GitHub issue tracker](https://github.com/omnikit-ui/billing/issues).