asasvirtuais 1.0.2 → 1.1.0

package/README.md

@@ -0,0 +1,600 @@
+# asasvirtuais
+
+React form and action management utilities for building complex forms with async validation and multi-step workflows.
+
+## Installation
+
+### From npm
+```bash
+npm install asasvirtuais
+```
+
+### From esm.sh
+```typescript
+import { Form } from 'https://esm.sh/asasvirtuais@latest/form'
+import { useFields } from 'https://esm.sh/asasvirtuais@latest/fields'
+import { useAction } from 'https://esm.sh/asasvirtuais@latest/action'
+```
+
+## Basic Usage
+
+### Simple Form
+
+```tsx
+import { Form } from 'asasvirtuais/form'
+
+type LoginFields = {
+  email: string
+  password: string
+}
+
+type LoginResult = {
+  token: string
+  user: { id: string; name: string }
+}
+
+async function loginAction(fields: LoginFields): Promise<LoginResult> {
+  const response = await fetch('/api/login', {
+    method: 'POST',
+    body: JSON.stringify(fields)
+  })
+  return response.json()
+}
+
+function LoginForm() {
+  return (
+    <Form<LoginFields, LoginResult>
+      defaults={{ email: '', password: '' }}
+      action={loginAction}
+      onResult={(result) => console.log('Logged in:', result.user.name)}
+    >
+      {({ fields, setField, submit, loading, error }) => (
+        <form onSubmit={submit}>
+          <input
+            type="email"
+            value={fields.email}
+            onChange={(e) => setField('email', e.target.value)}
+          />
+          <input
+            type="password"
+            value={fields.password}
+            onChange={(e) => setField('password', e.target.value)}
+          />
+          <button type="submit" disabled={loading}>
+            {loading ? 'Logging in...' : 'Login'}
+          </button>
+          {error && <p>Error: {error.message}</p>}
+        </form>
+      )}
+    </Form>
+  )
+}
+```
+
+### Using Fields Only
+
+```tsx
+import { FieldsProvider, useFields } from 'asasvirtuais/fields'
+
+type ProfileFields = {
+  name: string
+  bio: string
+}
+
+function ProfileEditor() {
+  return (
+    <FieldsProvider<ProfileFields> defaults={{ name: '', bio: '' }}>
+      {({ fields, setField }) => (
+        <div>
+          <input
+            value={fields.name}
+            onChange={(e) => setField('name', e.target.value)}
+          />
+          <textarea
+            value={fields.bio}
+            onChange={(e) => setField('bio', e.target.value)}
+          />
+        </div>
+      )}
+    </FieldsProvider>
+  )
+}
+```
+
+### Using Actions Only
+
+```tsx
+import { ActionProvider, useAction } from 'asasvirtuais/action'
+
+async function deleteAccount(params: { userId: string }) {
+  await fetch(`/api/users/${params.userId}`, { method: 'DELETE' })
+}
+
+function DeleteButton({ userId }: { userId: string }) {
+  return (
+    <ActionProvider
+      params={{ userId }}
+      action={deleteAccount}
+      onResult={() => alert('Account deleted')}
+    >
+      {({ submit, loading }) => (
+        <button onClick={submit} disabled={loading}>
+          {loading ? 'Deleting...' : 'Delete Account'}
+        </button>
+      )}
+    </ActionProvider>
+  )
+}
+```
+
+## `react-interface` for Data-Driven Applications
+
+The `react-interface` package provides a powerful, high-level abstraction for building data-driven React applications. It's designed to work with a standardized `TableInterface` to provide a consistent, type-safe, and efficient way to interact with your data backend. It gives you React hooks and components that are automatically wired up to your API, handling data fetching, caching, and state management for you.
+
+### Todo App Example
+
+Let's walk through building a simple Todo app to demonstrate how to use `react-interface`.
+
+#### 1. Define Your Schema
+
+First, define the schema for your `todos` table using `zod`. This is the single source of truth for your data shapes.
+
+```typescript
+// app/database.ts
+import { z } from 'zod';
+
+export const schema = {
+  todos: {
+    readable: z.object({
+      id: z.string(),
+      text: z.string(),
+      completed: z.boolean(),
+      createdAt: z.date(),
+    }),
+    writable: z.object({
+      text: z.string(),
+      completed: z.boolean().optional(),
+    }),
+  },
+};
+```
+
+#### 2. Initialize the React Interface
+
+Create an `interface.ts` file in your `app` directory to initialize the `reactInterface` and export the hooks and components.
+
+```typescript
+// app/interface.ts
+import { reactInterface } from '@asasvirtuais/interface';
+import { schema } from './database';
+
+// This would typically be a fetch or other data source implementation
+const yourDataInterface = {
+  find: async (props) => { /* ... */ },
+  create: async (props) => { /* ... */ },
+  update: async (props) => { /* ... */ },
+  remove: async (props) => { /* ... */ },
+  list: async (props) => { /* ... */ },
+};
+
+export const {
+  DatabaseProvider,
+  useTable,
+  CreateForm,
+  UpdateForm,
+  FilterForm, // Or ListForm
+  SingleProvider,
+  useSingle,
+} = reactInterface<typeof schema>(schema, yourDataInterface);
+```
+
+#### 3. Provide the Data Context
+
+Wrap your application (or the relevant part of it) with the `DatabaseProvider` to make the data available to all child components.
+
+```tsx
+// app/layout.tsx
+import { DatabaseProvider } from '@/app/interface';
+import { fetchTodos } from '@/app/api'; // Example API call
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  const initialTodos = await fetchTodos(); // Fetch initial data on the server
+  return (
+    <html lang="en">
+      <body>
+        <DatabaseProvider todos={initialTodos}>
+          {children}
+        </DatabaseProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+#### 4. Listing Todos and Using `useTable`
+
+The `useTable` hook is the primary way to interact with your table's data. It gives you access to the data index (a key-value store of your items) and the CRUD methods.
+
+```tsx
+// app/todos/page.tsx
+'use client';
+
+import { useTable } from '@/app/interface';
+
+function TodoList() {
+  const { array: todos, remove, update } = useTable('todos');
+
+  return (
+    <ul>
+      {todos.map(todo => (
+        <li key={todo.id}>
+          <span
+            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
+            onClick={() => update.trigger({ id: todo.id, data: { completed: !todo.completed } })}
+          >
+            {todo.text}
+          </span>
+          <button onClick={() => remove.trigger({ id: todo.id })}>Delete</button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+#### 5. Creating Todos with `CreateForm`
+
+The `CreateForm` component provides a ready-to-use form for creating new items. It handles form state, submission, and updates the local data index on success.
+
+```tsx
+// app/todos/page.tsx (continued)
+import { CreateForm, useTable } from '@/app/interface';
+import { z } from 'zod';
+import { schema } from '@/app/database';
+
+function AddTodoForm() {
+  return (
+    <CreateForm<typeof schema, 'todos'>
+      table="todos"
+      defaults={{ text: '' }}
+      onSuccess={(newTodo) => {
+        console.log('Successfully created:', newTodo.text);
+      }}
+    >
+      {({ fields, setField, submit, loading }) => (
+        <form onSubmit={submit}>
+          <input
+            value={fields.text}
+            onChange={(e) => setField('text', e.target.value)}
+            placeholder="What needs to be done?"
+          />
+          <button type="submit" disabled={loading}>
+            {loading ? 'Adding...' : 'Add Todo'}
+          </button>
+        </form>
+      )}
+    </CreateForm>
+  );
+}
+```
+
+#### 6. Updating Todos with `UpdateForm`
+
+Similarly, `UpdateForm` is used for editing existing items. It's often used in combination with `SingleProvider` and `useSingle` to work with a specific item.
+
+```tsx
+// app/todos/[id]/edit/page.tsx
+'use client';
+
+import { UpdateForm, useSingle } from '@/app/interface';
+import { z } from 'zod';
+import { schema } from '@/app/database';
+
+function EditTodoForm() {
+  const { single: todo } = useSingle('todos');
+
+  if (!todo) return <div>Loading...</div>;
+
+  return (
+    <UpdateForm<typeof schema, 'todos'>
+      table="todos"
+      id={todo.id}
+      defaults={{ text: todo.text }}
+      onSuccess={() => {
+        // Redirect or show a success message
+      }}
+    >
+      {({ fields, setField, submit, loading }) => (
+        <form onSubmit={submit}>
+          <input
+            value={fields.text}
+            onChange={(e) => setField('text', e.target.value)}
+          />
+          <button type="submit" disabled={loading}>
+            {loading ? 'Saving...' : 'Save Changes'}
+          </button>
+        </form>
+      )}
+    </UpdateForm>
+  );
+}
+```
+
+#### 7. Filtering Todos with `FilterForm` (ListForm)
+
+`FilterForm` allows you to build UIs for filtering and searching your data. It works just like other forms, but its action triggers the `list` method of your `TableInterface`.
+
+```tsx
+// app/todos/page.tsx (continued)
+import { FilterForm, useTable } from '@/app/interface';
+import { z } from 'zod';
+import { schema } from '@/app/database';
+
+function TodoFilter() {
+  const { list } = useTable('todos');
+
+  return (
+    <FilterForm<typeof schema, 'todos'>
+      table="todos"
+      defaults={{ query: { completed: false } }}
+      onSuccess={(results) => {
+        console.log(`Found ${results.length} matching todos.`);
+      }}
+    >
+      {({ fields, setField, submit }) => (
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={fields.query.completed}
+              onChange={(e) => setField('query.completed', e.target.checked)}
+            />
+            Show completed
+          </label>
+          <button onClick={submit}>Apply Filter</button>
+        </div>
+      )}
+    </FilterForm>
+  );
+}
+```
+
+## Advanced Usage
+
+### Nested Forms: Multi-Step Async Validation
+
+Use nested forms to validate intermediate steps and populate parent form fields based on child form results.
+
+```tsx
+import { Form } from 'asasvirtuais/form'
+
+type EmailFields = { email: string }
+type EmailResult = { userId: string; exists: boolean }
+
+type PasswordFields = { userId: string; password: string }
+type PasswordResult = { token: string }
+
+async function checkEmail(fields: EmailFields): Promise<EmailResult> {
+  const response = await fetch('/api/check-email', {
+    method: 'POST',
+    body: JSON.stringify(fields)
+  })
+  return response.json()
+}
+
+async function verifyPassword(fields: PasswordFields): Promise<PasswordResult> {
+  const response = await fetch('/api/verify-password', {
+    method: 'POST',
+    body: JSON.stringify(fields)
+  })
+  return response.json()
+}
+
+function MultiStepLogin() {
+  return (
+    <Form<EmailFields, EmailResult>
+      defaults={{ email: '' }}
+      action={checkEmail}
+    >
+      {(emailForm) => (
+        <div>
+          <h2>Step 1: Enter Email</h2>
+          <input
+            type="email"
+            value={emailForm.fields.email}
+            onChange={(e) => emailForm.setField('email', e.target.value)}
+          />
+          <button onClick={emailForm.submit} disabled={emailForm.loading}>
+            {emailForm.loading ? 'Checking...' : 'Next'}
+          </button>
+          {emailForm.error && <p>Error: {emailForm.error.message}</p>}
+
+          {emailForm.result && emailForm.result.exists && (
+            <Form<PasswordFields, PasswordResult>
+              defaults={{
+                userId: emailForm.result.userId,
+                password: ''
+              }}
+              action={verifyPassword}
+              onResult={(result) => {
+                localStorage.setItem('token', result.token)
+                window.location.href = '/dashboard'
+              }}
+            >
+              {(passwordForm) => (
+                <div>
+                  <h2>Step 2: Enter Password</h2>
+                  <input
+                    type="password"
+                    value={passwordForm.fields.password}
+                    onChange={(e) => passwordForm.setField('password', e.target.value)}
+                  />
+                  <button onClick={passwordForm.submit} disabled={passwordForm.loading}>
+                    {passwordForm.loading ? 'Verifying...' : 'Login'}
+                  </button>
+                  {passwordForm.error && <p>Error: {passwordForm.error.message}</p>}
+                </div>
+              )}
+            </Form>
+          )}
+        </div>
+      )}
+    </Form>
+  )
+}
+```
+
+### Complex Multi-Step: Address Validation
+
+```tsx
+type AddressLookupFields = { zipCode: string }
+type AddressLookupResult = {
+  city: string
+  state: string
+  country: string
+}
+
+type FullAddressFields = {
+  zipCode: string
+  city: string
+  state: string
+  country: string
+  street: string
+  number: string
+}
+
+type OrderResult = { orderId: string }
+
+async function lookupAddress(fields: AddressLookupFields): Promise<AddressLookupResult> {
+  const response = await fetch(`/api/address/lookup?zip=${fields.zipCode}`)
+  return response.json()
+}
+
+async function createOrder(fields: FullAddressFields): Promise<OrderResult> {
+  const response = await fetch('/api/orders', {
+    method: 'POST',
+    body: JSON.stringify(fields)
+  })
+  return response.json()
+}
+
+function CheckoutForm() {
+  return (
+    <Form<AddressLookupFields, AddressLookupResult>
+      defaults={{ zipCode: '' }}
+      action={lookupAddress}
+    >
+      {(zipForm) => (
+        <div>
+          <h3>Enter ZIP Code</h3>
+          <input
+            type="text"
+            value={zipForm.fields.zipCode}
+            onChange={(e) => zipForm.setField('zipCode', e.target.value)}
+            placeholder="ZIP Code"
+          />
+          <button onClick={zipForm.submit} disabled={zipForm.loading}>
+            {zipForm.loading ? 'Looking up...' : 'Lookup Address'}
+          </button>
+
+          {zipForm.result && (
+            <Form<FullAddressFields, OrderResult>
+              defaults={{
+                zipCode: zipForm.fields.zipCode,
+                city: zipForm.result.city,
+                state: zipForm.result.state,
+                country: zipForm.result.country,
+                street: '',
+                number: ''
+              }}
+              action={createOrder}
+              onResult={(result) => alert(`Order created: ${result.orderId}`)}
+            >
+              {(addressForm) => (
+                <div>
+                  <h3>Complete Address</h3>
+                  <p>City: {addressForm.fields.city}</p>
+                  <p>State: {addressForm.fields.state}</p>
+                  <input
+                    value={addressForm.fields.street}
+                    onChange={(e) => addressForm.setField('street', e.target.value)}
+                    placeholder="Street"
+                  />
+                  <input
+                    value={addressForm.fields.number}
+                    onChange={(e) => addressForm.setField('number', e.target.value)}
+                    placeholder="Number"
+                  />
+                  <button onClick={addressForm.submit} disabled={addressForm.loading}>
+                    {addressForm.loading ? 'Creating Order...' : 'Place Order'}
+                  </button>
+                  {addressForm.error && <p>Error: {addressForm.error.message}</p>}
+                </div>
+              )}
+            </Form>
+          )}
+        </div>
+      )}
+    </Form>
+  )
+}
+```
+
+## API Reference
+
+### `Form<Fields, Result>`
+
+Combined fields and action management.
+
+**Props:**
+- `defaults?: Partial<Fields>` - Initial field values
+- `action: (fields: Fields) => Promise<Result>` - Async action to perform
+- `onResult?: (result: Result) => void` - Success callback
+- `onError?: (error: Error) => void` - Error callback
+- `autoTrigger?: boolean` - Auto-trigger action on mount
+- `children: ReactNode | (props) => ReactNode` - Render prop or children
+
+**Render Props:**
+- `fields: Fields` - Current field values
+- `setField: (name, value) => void` - Update single field
+- `setFields: (fields) => void` - Update multiple fields
+- `submit: (e?) => Promise<void>` - Trigger action
+- `loading: boolean` - Action loading state
+- `result: Result | null` - Action result
+- `error: Error | null` - Action error
+
+### `FieldsProvider<T>`
+
+Field state management only.
+
+**Props:**
+- `defaults?: Partial<T>` - Initial field values
+- `children: ReactNode | (props) => ReactNode` - Render prop or children
+
+**Hook: `useFields<T>()`**
+- `fields: T` - Current field values
+- `setField: (name, value) => void` - Update single field
+- `setFields: (fields) => void` - Update multiple fields
+
+### `ActionProvider<Params, Result>`
+
+Action management only.
+
+**Props:**
+- `params: Partial<Params>` - Action parameters
+- `action: (params) => Promise<Result>` - Async action
+- `onResult?: (result: Result) => void` - Success callback
+- `onError?: (error: Error) => void` - Error callback
+- `autoTrigger?: boolean` - Auto-trigger on mount
+- `children: ReactNode | (props) => ReactNode` - Render prop or children
+
+**Hook: `useAction<Params, Result>()`**
+- `params: Partial<Params>` - Current parameters
+- `submit: (e?) => Promise<void>` - Trigger action
+- `loading: boolean` - Loading state
+- `result: Result | null` - Action result
+- `error: Error | null` - Action error
+
+## License
+
+MIT

package/package.json

@@ -1,33 +1,54 @@
-{
-  "name": "asasvirtuais",
-  "type": "module",
-  "version": "1.0.2",
-  "directories": {
-    "packages": "./packages"
-  },
-  "files": [
-    "packages",
-    "tsconfig.json"
-  ],
-  "exports": {
-    "./package.json": "./package.json",
-    "./action": {
-      "types": "./packages/action.tsx",
-      "default": "./packages/action.tsx"
-    },
-    "./fields": {
-      "types": "./packages/fields.tsx",
-      "default": "./packages/fields.tsx"
-    },
-    "./form": {
-      "types": "./packages/form.tsx",
-      "default": "./packages/form.tsx"
-    }
-  },
-  "peerDependencies": {
-    "react": ">=18.0.0"
-  },
-  "dependencies": {
-    "react": "^19.2.0"
-  }
-}
+{
+  "name": "asasvirtuais",
+  "type": "module",
+  "version": "1.1.0",
+  "description": "React form and action management utilities",
+  "directories": {
+    "packages": "./packages"
+  },
+  "files": [
+    "packages",
+    "tsconfig.json"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./action": {
+      "types": "./packages/action.tsx",
+      "default": "./packages/action.tsx"
+    },
+    "./fields": {
+      "types": "./packages/fields.tsx",
+      "default": "./packages/fields.tsx"
+    },
+    "./form": {
+      "types": "./packages/form.tsx",
+      "default": "./packages/form.tsx"
+    },
+    "./hooks": {
+      "types": "./packages/hooks.tsx",
+      "default": "./packages/hooks.tsx"
+    },
+    "./interface": {
+      "types": "./packages/interface/interface.ts",
+      "default": "./packages/interface/interface.ts"
+    },
+    "./react-interface": {
+      "types": "./packages/react-interface.tsx",
+      "default": "./packages/react-interface.tsx"
+    },
+    "./next-interface": {
+      "types": "./packages/next-interface.tsx",
+      "default": "./packages/next-interface.tsx"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.2.3"
+  },
+  "dependencies": {
+    "next": "^16.1.1",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7"
+  }
+}

package/packages/action.tsx

@@ -1,4 +1,3 @@
-'use client'
 import React, { createContext, useEffect, useMemo } from 'react'
 import { useCallback, useState } from 'react'
 

package/packages/fields.tsx

@@ -1,4 +1,3 @@
-'use client'
 import React, { createContext, useCallback, useState } from 'react'
 
 export type FieldsProps<T> = { defaults?: Partial<T> }

package/packages/hooks.tsx

@@ -0,0 +1,120 @@
+import React from 'react'
+import { useState, useCallback, useEffect, useMemo } from 'react'
+
+type StoreProps<T> = {
+    [table: string]: (T & { id: string} )[]
+}
+function useStoreProvider<T>(props: StoreProps<T>) {
+    return Object.fromEntries(
+        Object.entries(props).map(
+            ([table, initial]) => [table, useIndex<T>({ initial: initial as T & { id: string} [] })]
+        )
+    ) as {
+        [table: string]: ReturnType<typeof useIndex<T>>
+    }
+}
+
+export const [StoreProvider, useStore] = createContextFromHook((useStoreProvider<any>))
+
+export function useAction<Props, Result, Defaults = Partial<Props>>(action: (props: Props) => Promise<Result>, {
+    onSuccess, autoTrigger, ...props
+}: {
+    defaults?: Defaults
+    onSuccess?: (result: Result, props?: Props) => void
+    autoTrigger?: boolean
+} = {}) {
+    const [loading, setLoading] = useState<boolean>(false)
+    const [error, setError] = useState()
+    const [result, setResult] = useState<Result>()
+    const [defaults, setDefaults] = useState<Defaults>(props.defaults ?? {} as Defaults)
+
+    const trigger = useCallback(async (props: Omit<Props, keyof Defaults>): Promise<Result> => {
+        try {
+            setLoading(true)
+            const result = await action({
+                ...props,
+                ...defaults,
+            } as Props)
+
+            setResult(result)
+            if (onSuccess)
+                onSuccess(result)
+            return result
+
+        } catch (error) {
+            // @ts-expect-error
+            setError(error)
+            throw error
+        } finally {
+            setLoading(false)
+        }
+    }, [defaults, onSuccess, loading, setLoading])
+
+    useEffect(() => {
+        if (autoTrigger)
+            trigger(props as Omit<Props, keyof Defaults>)
+    }, [])
+
+    return {
+        trigger,
+        loading,
+        error,
+        result,
+        defaults,
+        setDefaults,
+    }
+}
+
+export function useIndex<T>(value: Record<string, any>) {
+
+    type readable = T
+
+    const [index, setIndex] = useState<Record<string, T>>(() => value)
+
+    const array = useMemo(() => Object.values(index) as readable[], [index])
+
+    const set = useCallback((...params: readable[]) => {
+        setIndex(prev => ({
+            ...prev,
+            ...Object.fromEntries(params.map(data => ([(data as readable & { id: string} ).id, data])))
+        }))
+    }, [])
+
+    const remove = useCallback((...params: readable[]) => {
+        setIndex(prev => {
+            const newState = { ...prev }
+            for (const data of params) {
+                const id = (data as readable & { id: string} ).id
+                if (newState[id])
+                    delete newState[id]
+            }
+            return newState
+        })
+    }, [])
+
+    return {
+        index,
+        array,
+        set,
+        setIndex,
+        remove,
+    }
+}
+
+export function createContextFromHook<Props, Result>(useHook: (props: Props) => Result) {
+
+    const Context = React.createContext<Result | undefined>(undefined)
+
+    function Provider({ children, ...props }: React.PropsWithChildren<Props>) {
+
+        const value = useHook(props as Props) as Result
+
+        return <Context.Provider value={value}>{children}</Context.Provider>
+    }
+
+    function useContext() {
+        return React.useContext(Context) as Result
+    }
+
+    return [Provider, useContext] as const
+}

package/packages/interface.ts

@@ -0,0 +1,50 @@
+import { z } from 'zod'
+
+export interface TableInterface<Readable, Writable = Readable> {
+  find   (props: FindProps)             : Promise<Readable>
+  create (props: CreateProps<Writable>) : Promise<Readable>
+  update (props: UpdateProps<Writable>) : Promise<Readable>
+  remove (props: RemoveProps)           : Promise<Readable>
+  list   (props: ListProps<Readable>)   : Promise<Readable[]>
+}
+
+export function tableInterface<Schema extends DatabaseInterface, Table extends keyof Schema & string>(schema: Schema, table?: Table | null, tableInterface?: TableInterface<z.infer<Schema[Table]['readable']>, z.infer<Schema[Table]['writable']>>) {
+  return tableInterface
+}
+
+export interface DatabaseInterface {
+  [T: string]: { readable: z.ZodObject<z.ZodRawShape>, writable: z.ZodObject<z.ZodRawShape> }
+}
+
+export type BasicOperators<T, K extends keyof T> = {
+  '$ne'  ?: T[K]
+  '$lt'  ?: T[K]
+  '$lte' ?: T[K]
+  '$gt'  ?: T[K]
+  '$gte' ?: T[K]
+  '$in'  ?: T[K][]
+  '$nin' ?: T[K][]
+}
+
+export type Filters<T> = {
+  '$limit'  ?: number
+  '$skip'   ?: number
+  '$select' ?: Array<keyof T>
+  '$sort'   ?: { [K in keyof T]?: 1 | -1 }
+}
+
+export type Query<T = any> = { [K in keyof T]?: T[K] | BasicOperators<T, K> } & Filters<T> & {
+  '$or'  ?: Array<Query<T>>
+  '$and' ?: Array<Query<T>>
+}
+
+export type Operators<T, K extends keyof T> = BasicOperators<T, K> & {
+  '$or'  ?: Array<Query<T>>
+  '$and' ?: Array<Query<T>>
+}
+
+export interface FindProps { table?: string, id: string }
+export interface RemoveProps { table?: string, id: string }
+export interface CreateProps<T = any> { table?: string, data: T }
+export interface UpdateProps<T = any> { table?: string, id: string, data: Partial<T> }
+export interface ListProps<T = any> { table?: string, query?: Query<T> }

package/packages/next-interface.ts

@@ -0,0 +1,120 @@
+import { NextRequest } from 'next/server'
+import { TableInterface } from './interface'
+
+export function routes(implementation: TableInterface<any, any>) {
+  return {
+    // GET /api/v1/[table]/[id]
+    find: (
+      request: NextRequest,
+      { params }: { params: Promise<{ table: string; id: string} >} 
+    ) => handleRoute(request, params, ({ table, id }) => implementation.find({ table, id })
+    ),
+
+    // GET /api/v1/[table]
+    list: (
+      request: NextRequest,
+      { params }: { params: Promise<{ table: string} >} 
+    ) => handleRoute(request, params, ({ table }) => {
+      const url = new URL(request.url)
+      const query = Object.fromEntries(url.searchParams)
+      return implementation.list({ table, query })
+    }),
+
+    // POST /api/v1/[table]
+    create: (
+      request: NextRequest,
+      { params }: { params: Promise<{ table: string} >} 
+    ) => handleRoute(request, params, async ({ table }) => {
+      const data = await request.json()
+      return implementation.create({ table, data })
+    }),
+
+    // PATCH /api/v1/[table]/[id]
+    update: (
+      request: NextRequest,
+      { params }: { params: Promise<{ table: string; id: string} >} 
+    ) => handleRoute(request, params, async ({ table, id }) => {
+      const data = await request.json()
+      return implementation.update({ table, id, data })
+    }),
+
+    // DELETE /api/v1/[table]/[id]
+    remove: (
+      request: NextRequest,
+      { params }: { params: Promise<{ table: string; id: string} >} 
+    ) => handleRoute(request, params, ({ table, id }) => implementation.remove({ table, id })
+    ),
+  }
+}
+
+export async function handleRoute<P, R>(
+  request: NextRequest,
+  params: Promise<P>,
+  handler: (resolvedParams: any) => Promise<R>
+) {
+  try {
+    const resolvedParams = await params
+    const result = await handler(resolvedParams)
+    return Response.json(result)
+  } catch (error) {
+    console.error("Route error:", error)
+    return Response.json(
+      { error: error instanceof Error ? error.message : "Unknown error" },
+      { status: 500 }
+    )
+  }
+}
+// Utility for creating a single dynamic route handler
+export function createDynamicRoute(implementation: TableInterface<any, any>) {
+  const routeHandlers = routes(implementation)
+
+  return async function dynamicRoute(
+    request: NextRequest,
+    { params: promise }: { params: Promise<{ params: string[]} >} 
+  ) {
+    const { params } = await promise
+    const [table, id] = params
+
+    const method = request.method
+
+    try {
+      switch (method) {
+        case "GET":
+          if (id) {
+            return routeHandlers.find(request, {
+              params: Promise.resolve({ table, id }),
+            })
+          } else {
+            return routeHandlers.list(request, {
+              params: Promise.resolve({
+                table,
+                ...Object.fromEntries(request.nextUrl.searchParams.entries()),
+              }),
+            })
+          }
+        case "POST":
+          return routeHandlers.create(request, {
+            params: Promise.resolve({ table }),
+          })
+        case "PATCH":
+          if (!id) throw new Error("ID required for PATCH")
+          return routeHandlers.update(request, {
+            params: Promise.resolve({ table, id }),
+          })
+        case "DELETE":
+          if (!id) throw new Error("ID required for DELETE")
+          return routeHandlers.remove(request, {
+            params: Promise.resolve({ table, id }),
+          })
+        default:
+          return Response.json({ error: "Method not allowed" }, { status: 405 })
+      }
+    } catch (error) {
+      console.error(error)
+      return Response.json(
+        { error: error instanceof Error ? error.message : "Unknown error" },
+        { status: 500 }
+      )
+    }
+  }
+}

package/packages/react-interface.tsx

@@ -0,0 +1,394 @@
+import { z } from 'zod'
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  createContext,
+  useContext,
+} from 'react'
+import { useAction as useAsyncAction, useIndex } from './hooks'
+import { ActionProvider, useAction, useActionProvider } from './action'
+import { TableInterface, ListProps, DatabaseInterface } from './interface'
+import { FieldsProvider, useFields } from './fields'
+
+export function reactInterface<
+  Database extends DatabaseInterface>(
+  database: Database,
+  {
+    find,
+    create,
+    update,
+    remove,
+    list,
+  }: TableInterface<
+    z.infer<Database[keyof Database]['readable']>,
+    z.infer<Database[keyof Database]['writable']>
+  >
+) {
+  type TableKey = keyof Database & string
+
+  type TableProviderProps<Table extends TableKey> = {
+    table: Table
+    asAbove?: Record<string, z.infer<Database[Table]["readable"]>>
+  }
+
+  function useTableProvider<Table extends TableKey>({
+    table,
+    asAbove,
+  }: TableProviderProps<Table>) {
+    type Readable = z.infer<Database[Table]['readable']>
+    type Writable = z.infer<Database[Table]['writable']>
+
+    const index = useIndex<Readable>({ ...(asAbove ?? {}) })
+
+    const array = useMemo(
+      () => Object.values(index.index) as Readable[],
+      [index.index]
+    )
+
+    useEffect(function soBelow() {
+      index.setIndex((prev) => ({ ...prev, ...asAbove }))
+    }, [])
+
+    const methods = { find, create, update, remove, list } as TableInterface<
+      Readable,
+      Writable
+    >
+
+    return {
+      ...index,
+      array,
+      find: useAsyncAction(((props) => methods.find({ ...props, table }).then(res => {
+        index.set(res)
+        return res
+      })) as typeof find),
+      create: useAsyncAction(((props) => create({ ...props, table }).then(res => {
+        index.set(res)
+        return res
+      })) as typeof create),
+      update: useAsyncAction(((props) => update({ ...props, table }).then(res => {
+        index.set(res)
+        return res
+      })) as typeof update),
+      remove: useAsyncAction(((props) => remove({ ...props, table }).then(res => {
+        index.remove(res)
+        return res
+      })) as typeof remove),
+      list: useAsyncAction(((props) => list({ ...props, table }).then(arr => {
+        index.set(...arr)
+        return arr
+      })) as typeof list),
+    }
+  }
+
+  function useDatabaseProvider(tables: { [T in TableKey]: Record<string, z.infer<Database[T]['readable']>> }): {
+    [T in TableKey]: ReturnType<typeof useTableProvider<T>>
+  } {
+    return Object.fromEntries(
+      Object.entries(tables).map(([table, value]) => [
+        table, useTableProvider({ table: table as TableKey, asAbove: value })
+      ])
+    ) as {
+        [T in TableKey]: ReturnType<typeof useTableProvider<T>>
+      }
+  }
+  // Create a separate context for each table dynamically
+  const tableContexts = new Map<TableKey, React.Context<ReturnType<typeof useTableProvider<any>> | undefined>>();
+
+  function getTableContext<T extends TableKey>(table: T) {
+    if (!tableContexts.has(table)) {
+      tableContexts.set(table, createContext<ReturnType<typeof useTableProvider<T>> | undefined>(undefined));
+    }
+    return tableContexts.get(table)!;
+  }
+
+  function TableProvider<Table extends TableKey>({ children, ...props }: TableProviderProps<Table> & {
+    children: React.ReactNode | ((props: ReturnType<typeof useTableProvider<Table>>) => React.ReactNode)
+  }) {
+    const context = useTableProvider(props);
+    const TableContext = getTableContext(props.table);
+
+    return (
+      <TableContext.Provider value={context}>
+        {typeof children === 'function' ? children(context) : children}
+      </TableContext.Provider>
+    )
+  }
+
+  function DatabaseProvider({
+    children,
+    ...tables
+  }: React.PropsWithChildren<{
+    [T in TableKey]?: Record<string, z.infer<Database[T]['readable']>>
+  }>) {
+    return Object.entries(tables).reduce(
+      (prev, [table, asAbove]) => {
+        return (
+          <TableProvider table={table as TableKey} asAbove={asAbove}>
+            {prev}
+          </TableProvider>
+        );
+      },
+      children as React.ReactNode
+    )
+  }
+
+  function useTable<T extends TableKey>(name: T) {
+    const TableContext = getTableContext(name);
+    const context = useContext(TableContext);
+
+    if (!context) {
+      throw new Error(`useTable("${String(name)}") must be used within a TableProvider or DatabaseProvider with table="${String(name)}"`);
+    }
+
+    return context as ReturnType<typeof useTableProvider<T>>;
+  }
+
+  function useSingleProvider<Table extends TableKey>({
+    id,
+    table,
+  }: {
+    id: string
+    table: Table
+  }) {
+    const { index, find } = useTable(table)
+    const [single, setSingle] = useState<z.infer<Database[Table]['readable']>>(
+      () => index[id]
+    )
+    useEffect(() => {
+      if (!single) find.trigger({ id }).then(setSingle)
+    }, [])
+    useEffect(() => {
+      setSingle(index[id])
+    }, [index[id]])
+    return {
+      id,
+      single,
+      setSingle,
+      loading: find.loading,
+    }
+  }
+
+  const SingleContext = createContext<
+    ReturnType<typeof useSingleProvider<any>> | undefined
+  >(undefined)
+
+  function SingleProvider<Table extends TableKey>({
+    children,
+    ...props
+  }: {
+    id: string
+    table: Table
+    children: React.ReactNode | ((props: ReturnType<typeof useSingleProvider<Table>>) => React.ReactNode)
+  }) {
+    const value = useSingleProvider(props)
+    if (!value.single) return null
+    return (
+      <SingleContext.Provider value={value}>
+        {typeof children === 'function' ? (
+          children(value)
+        ) : (
+          children
+        )}
+      </SingleContext.Provider>
+    )
+  }
+
+  const useSingle = <Table extends TableKey>(table: Table) =>
+    useContext(SingleContext) as ReturnType<typeof useSingleProvider<Table>>
+
+  function CreateForm<
+    T extends TableKey
+  >({
+    table,
+    defaults,
+    onSuccess,
+    children,
+  }: {
+    table: T
+    defaults?: Partial<z.infer<Database[T]['writable']>>
+    onSuccess?: (result: z.infer<Database[T]['readable']>) => void
+    children: React.ReactNode | (
+      ( props: ReturnType<typeof useActionProvider<z.infer<Database[T]['writable']>, z.infer<Database[T]['readable']>>>
+        & ReturnType<typeof useFields<z.infer<Database[T]['writable']>>>
+      ) => React.ReactNode
+    )
+  }) {
+    type Readable = z.infer<Database[T]['readable']>
+    type Writable = z.infer<Database[T]['writable']>
+
+    const { create } = useTable(table)
+
+    const callback = useCallback(
+      async (fields: Writable) => {
+        const result = await create.trigger({ data: fields })
+        if (onSuccess) onSuccess(result as Readable)
+        return result
+      },
+      [create, onSuccess]
+    )
+
+    return (
+      <FieldsProvider<Writable> defaults={defaults || ({} as Writable)}>
+        {fields => (
+          <ActionProvider<Writable, Readable> action={callback} params={fields.fields}>
+            {typeof children === 'function' ? (
+              form => children({ ...form, ...fields })
+            ) : (
+              children
+            )}
+          </ActionProvider>
+        )}
+      </FieldsProvider>
+    )
+  }
+
+  function UpdateForm<T extends TableKey>({
+    table,
+    id,
+    defaults,
+    onSuccess,
+    children,
+  }: {
+    table: T
+    id: string
+    defaults?: Partial<z.infer<Database[T]['writable']>>
+    onSuccess?: (result: z.infer<Database[T]['readable']>) => void
+    children: React.ReactNode | (
+      (props: ReturnType<typeof useActionProvider<Partial<z.infer<Database[T]['writable']>>, z.infer<Database[T]['readable']>>>
+        & ReturnType<typeof useFields<z.infer<Database[T]['writable']>>>
+      ) => React.ReactNode
+    )
+  }) {
+    type Readable = z.infer<Database[T]['readable']>
+    type Writable = z.infer<Database[T]['writable']>
+
+    const { update } = useTable(table)
+
+    const callback = useCallback(
+      async (fields: Partial<Writable>) => {
+        const result = await update.trigger({ id, data: fields })
+        if (onSuccess) onSuccess(result as Readable)
+        return result
+      },
+      [update, id, onSuccess]
+    )
+
+    return (
+      <FieldsProvider<Writable>
+        defaults={defaults || ({} as Partial<Writable>)}
+      >
+        {fields => (
+          <ActionProvider<Partial<Writable>, Readable> action={callback} params={fields.fields}>
+            {typeof children === 'function' ? (
+              form => children({ ...form, ...fields })
+            ) : (
+              children
+            )}
+          </ActionProvider>
+        )}
+      </FieldsProvider>
+    )
+  }
+
+  function FilterForm<T extends TableKey>({
+    table,
+    defaults,
+    onSuccess,
+    children,
+  }: {
+    table: T
+    defaults?: Partial<ListProps<z.infer<Database[T]['readable']>>>
+    onSuccess?: (result: z.infer<Database[T]['readable']>[]) => void
+    children: React.ReactNode | (
+      ( props: ReturnType<typeof useActionProvider<ListProps<z.infer<Database[T]['readable']>>, z.infer<Database[T]['readable']>[]>>
+        & ReturnType<typeof useFields<ListProps<z.infer<Database[T]['readable']>>>>
+      ) => React.ReactNode
+    )
+  }) {
+    type Readable = z.infer<Database[T]['readable']>
+    type Writable = z.infer<Database[T]['writable']>
+
+    const { list } = useTable(table)
+
+    const callback = useCallback(
+      async (fields: Omit<ListProps<Readable>, 'table'>) => {
+        const result = await list.trigger(fields)
+        if (onSuccess) onSuccess(result)
+        return result
+      },
+      [list, onSuccess]
+    )
+
+    return (
+      <FieldsProvider<ListProps<Readable>>
+        defaults={(defaults || { query: {} }) as ListProps<Readable>}
+      >
+        {fields => (
+          <ActionProvider<ListProps<Readable>, Readable[]> action={callback} params={fields.fields}>
+            {typeof children === 'function' ? (
+              form => children({ ...form, ...fields })
+            ) : (
+              children
+            )}
+          </ActionProvider>
+        )}
+      </FieldsProvider>
+    )
+  }
+
+  const useCreateForm = <T extends TableKey>(table: T) => {
+    return {
+      ...useFields<z.infer<Database[T]['writable']>>(),
+      ...useAction<
+        z.infer<Database[T]['writable']>,
+        z.infer<Database[T]['readable']>
+      >(),
+    }
+  }
+  const useUpdateForm = <T extends TableKey>(table: T) => {
+    return {
+      ...useFields<Partial<z.infer<Database[T]['writable']>>>(),
+      ...useAction<
+        Partial<z.infer<Database[T]['writable']>>,
+        z.infer<Database[T]['readable']>
+      >(),
+    }
+  }
+  const useFiltersForm = <T extends TableKey>(table: T) => {
+    return {
+      ...useFields<z.infer<Database[T]['readable']>>(),
+      ...useAction<z.infer<Database[T]['readable']>,
+        z.infer<Database[T]['readable']>[]
+      >(),
+    }
+  }
+
+  return {
+    DatabaseProvider,
+    useTable,
+    useTableProvider,
+    TableProvider,
+    SingleProvider,
+    useSingle,
+    CreateForm,
+    UpdateForm,
+    FilterForm,
+    useCreateForm,
+    useUpdateForm,
+    useFiltersForm,
+  }
+}
+
+export class ReactInterface<Database extends DatabaseInterface> {
+  constructor(
+    database: Database,
+    tableInterface: TableInterface<
+        z.infer<Database[keyof Database]['readable']>,
+        z.infer<Database[keyof Database]['writable']>
+    >
+  ) {
+    return reactInterface(database, tableInterface)
+  }
+}