asasvirtuais 1.1.1 → 2.0.1

package/README.md

@@ -191,7 +191,7 @@ function DeleteButton({ userId }: { userId: string }) {
 
 ## React Interface: Data-Driven Applications
 
-The `react-interface` package provides a complete abstraction for building data-driven React apps. Define your schema once, and get type-safe hooks and components automatically wired to your API.
+The `react-interface` package provides components and hooks for building data-driven React apps. Define your schema once, and use the components directly—no initialization needed.
 
 ### Complete Todo App Example
 
@@ -201,53 +201,68 @@ The `react-interface` package provides a complete abstraction for building data-
 // 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(),
-    }),
-  },
-};
+export const todoSchema = {
+  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(),
+  }),
+}
+
+// You can export multiple schemas
+export const userSchema = {
+  readable: z.object({
+    id: z.string(),
+    name: z.string(),
+    email: z.string(),
+  }),
+  writable: z.object({
+    name: z.string(),
+    email: z.string(),
+  }),
+}
 ```
 
-#### 2. Initialize the Interface
+#### 2. Create Your Table Interface
 
 ```typescript
 // app/interface.ts
-import { reactInterface } from '@asasvirtuais/interface';
-import { schema } from './database';
-
-export const {
-  DatabaseProvider,
-  useTable,
-  CreateForm,
-  UpdateForm,
-  FilterForm,
-  SingleProvider,
-  useSingle,
-} = reactInterface<typeof schema>(schema, yourDataInterface);
+import { fetchInterface } from '@asasvirtuais/fetch-interface'
+import { todoSchema } from './database'
+
+// Create interface for your API
+export const todosInterface = fetchInterface({
+  schema: todoSchema,
+  defaultTable: 'todos',
+  baseUrl: '/api/v1'
+})
 ```
 
-#### 3. Provide Data Context
+#### 3. Provide Table Context
 
 ```tsx
-// app/layout.tsx
-import { DatabaseProvider } from '@/app/interface';
+// app/todos/layout.tsx
+import { TableProvider } from '@asasvirtuais/react-interface'
+import { todoSchema, todosInterface } from '@/app/interface'
 
-export default async function RootLayout({ children }) {
-  const initialTodos = await fetchTodos();
+export default async function TodosLayout({ children }) {
+  const initialTodos = await fetchTodos()
+  
   return (
-    <DatabaseProvider todos={initialTodos}>
+    <TableProvider
+      table="todos"
+      schema={todoSchema}
+      interface={todosInterface}
+      asAbove={initialTodos}
+    >
       {children}
-    </DatabaseProvider>
-  );
+    </TableProvider>
+  )
 }
 ```
 
@@ -255,16 +270,19 @@ export default async function RootLayout({ children }) {
 
 ```tsx
 // app/todos/page.tsx
-'use client';
-import { useTable, CreateForm } from '@/app/interface';
+'use client'
+import { useDatabaseTable, CreateForm } from '@asasvirtuais/react-interface'
+import { todoSchema } from '@/app/database'
 
 function TodoList() {
-  const { array: todos, remove, update } = useTable('todos');
+  const { index, remove, update } = useDatabaseTable('todos')
+  const todos = Object.values(index.index)
 
   return (
     <>
-      <CreateForm<typeof schema, 'todos'>
+      <CreateForm
         table="todos"
+        schema={todoSchema}
         defaults={{ text: '' }}
       >
         {({ fields, setField, submit, loading }) => (
@@ -300,7 +318,42 @@ function TodoList() {
         ))}
       </ul>
     </>
-  );
+  )
+}
+```
+
+#### 5. Multiple Tables with DatabaseProvider
+
+For apps with multiple tables, wrap them all in a DatabaseProvider:
+
+```tsx
+// app/layout.tsx
+import { DatabaseProvider, TableProvider } from '@asasvirtuais/react-interface'
+import { todoSchema, userSchema } from './database'
+import { todosInterface, usersInterface } from './interface'
+
+export default async function RootLayout({ children }) {
+  const [initialTodos, initialUsers] = await Promise.all([
+    fetchTodos(),
+    fetchUsers()
+  ])
+  
+  return (
+    <DatabaseProvider>
+      <TableProvider table="todos" schema={todoSchema} interface={todosInterface} asAbove={initialTodos}>
+        <TableProvider table="users" schema={userSchema} interface={usersInterface} asAbove={initialUsers}>
+          {children}
+        </TableProvider>
+      </TableProvider>
+    </DatabaseProvider>
+  )
+}
+
+// Now any component can access tables:
+function MyComponent() {
+  const todos = useDatabaseTable('todos')
+  const users = useDatabaseTable('users')
+  // ...
 }
 ```
 
@@ -374,8 +427,12 @@ In React, you control exactly when effects happen by writing code around form ac
 Run code before submission:
 
 ```tsx
-<CreateForm<typeof schema, 'messages'>
+import { CreateForm } from '@asasvirtuais/react-interface'
+import { messageSchema } from '@/app/database'
+
+<CreateForm
   table="messages"
+  schema={messageSchema}
   defaults={{ content: '' }}
 >
   {({ fields, setField, submit, loading }) => (
@@ -405,8 +462,9 @@ Run code before submission:
 Run code after successful submission:
 
 ```tsx
-<CreateForm<typeof schema, 'messages'>
+<CreateForm
   table="messages"
+  schema={messageSchema}
   defaults={{ content: '' }}
   onSuccess={(message) => {
     // Post-flight effects - run after success
@@ -423,6 +481,39 @@ Run code after successful submission:
 </CreateForm>
 ```
 
+#### Using Field Values Without Submitting
+
+Sometimes you want to use the form's field values without calling the server action:
+
+```tsx
+<CreateForm
+  table="messages"
+  schema={messageSchema}
+  defaults={{ content: '' }}
+>
+  {(form) => (
+    <div>
+      <textarea
+        value={form.fields.content}
+        onChange={(e) => form.setField('content', e.target.value)}
+      />
+      
+      {/* This button calls the server action */}
+      <button onClick={form.submit}>Send to Server</button>
+      
+      {/* This button uses field values without calling the action */}
+      <button onClick={() => {
+        // Just use the field values directly for local operations
+        saveToLocalStorage(form.fields)
+        showPreview(form.fields)
+      }}>
+        Save Draft Locally
+      </button>
+    </div>
+  )}
+</CreateForm>
+```
+
 ### Backend Effects (API Routes)
 
 On the backend, effects are just functions wrapping other functions. No framework magic.
@@ -433,10 +524,10 @@ On the backend, effects are just functions wrapping other functions. No framewor
 // app/api/v1/[...params]/route.ts
 import { tableInterface } from '@asasvirtuais/interface'
 import { firestoreInterface } from '@/lib/firestore'
-import { schema } from '@/app/database'
+import { messageSchema } from '@/app/database'
 
 // Wrap your base interface with business logic
-const messagesInterface = tableInterface(schema, 'messages', {
+const messagesInterface = tableInterface(messageSchema, 'messages', {
   async create(props) {
     // Pre-flight validation
     await checkUserQuota(props.data.userId)
@@ -482,7 +573,7 @@ const messagesInterface = tableInterface(schema, 'messages', {
   find: firestoreInterface.find,
   list: firestoreInterface.list,
 })
-```
+
 
 ### Key Principles
 

package/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "asasvirtuais",
-  "type": "module",
-  "version": "1.1.1",
-  "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"
-  }
-}
+{
+  "name": "asasvirtuais",
+  "type": "module",
+  "version": "2.0.1",
+  "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": "^4.3.5"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.8"
+  }
+}

package/packages/hooks.tsx

@@ -80,7 +80,7 @@ export function useIndex<T>(value: Record<string, any>) {
         }))
     }, [])
 
-    const remove = useCallback((...params: readable[]) => {
+    const unset = useCallback((...params: readable[]) => {
         setIndex(prev => {
             const newState = { ...prev }
             for (const data of params) {
@@ -97,7 +97,7 @@ export function useIndex<T>(value: Record<string, any>) {
         array,
         set,
         setIndex,
-        remove,
+        unset,
     }
 }
 

package/packages/interface.ts

@@ -8,12 +8,14 @@ export interface TableInterface<Readable, Writable = 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']>>) {
+export function tableInterface<Schema extends DatabaseSchema, 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 interface TableSchema { readable: z.ZodObject<z.ZodRawShape>, writable: z.ZodObject<z.ZodRawShape> }
+
+export interface DatabaseSchema {
+  [T: string]: TableSchema
 }
 
 export type BasicOperators<T, K extends keyof T> = {

package/packages/react-interface.tsx

@@ -1,394 +1,315 @@
-import { z } from 'zod'
-import {
-  useState,
-  useCallback,
-  useEffect,
-  useMemo,
-  createContext,
-  useContext,
-} from 'react'
-import { useAction as useAsyncAction, useIndex } from './hooks'
+import z from 'zod'
+import { DatabaseSchema, ListProps, TableInterface, TableSchema } from './interface'
+import { createContextFromHook, useAction as useAsyncAction, useIndex } from './hooks'
+import { createContext, PropsWithChildren, useCallback, useContext, useEffect, useState } from 'react'
 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 ?? {}) })
+export function useDatabaseProvider() {
 
-    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
-    >
+    const [database, setDatabase] = useState<Record<string, ReturnType<typeof useInterface<any>>>>({})
 
     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),
+        database,
+        setDatabase,
     }
-  }
-
-  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);
+export const [DatabaseProvider, useDatabase] = createContextFromHook(useDatabaseProvider)
 
-    return (
-      <TableContext.Provider value={context}>
-        {typeof children === 'function' ? children(context) : children}
-      </TableContext.Provider>
-    )
-  }
+export function useDatabaseTable<TSchema extends TableSchema>(table: string) {
+    const { database } = useDatabase()
 
-  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
-    )
-  }
+    const tableMethods = database[table] as ReturnType<typeof useInterface<TSchema>> | undefined
 
-  function useTable<T extends TableKey>(name: T) {
-    const TableContext = getTableContext(name);
-    const context = useContext(TableContext);
+    if (!tableMethods)
+        throw new Error(`Table "${table}" is not defined in the database schema.`)
 
-    if (!context) {
-      throw new Error(`useTable("${String(name)}") must be used within a TableProvider or DatabaseProvider with table="${String(name)}"`);
-    }
+    return tableMethods
+}
 
-    return context as ReturnType<typeof useTableProvider<T>>;
-  }
+export type TableProviderProps<TSchema extends TableSchema> = {
+    table: string
+    schema: TSchema
+    interface: TableInterface<z.infer<TSchema['readable']>, z.infer<TSchema['writable']>>
+    asAbove?: Record<string, z.infer<TSchema['readable']>>
+}
 
-  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]])
+export function useInterface<TSchema extends TableSchema>(table: string, {
+    find, create, update, remove, list
+}: TableInterface<z.infer<TSchema['readable']>, z.infer<TSchema['writable']>>, index: ReturnType<typeof useIndex<z.infer<TSchema['readable']>>>) {
     return {
-      id,
-      single,
-      setSingle,
-      loading: find.loading,
+        index,
+        find: useAsyncAction(((props) => 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.unset(res)
+            return res
+        })) as typeof remove),
+        list: useAsyncAction(((props) => list({ ...props, table }).then(arr => {
+            index.set(...arr)
+            return arr
+        })) as typeof list),
     }
-  }
+}
 
-  const SingleContext = createContext<
-    ReturnType<typeof useSingleProvider<any>> | undefined
-  >(undefined)
+export function useTableProvider<TSchema extends TableSchema>({
+    table,
+    schema,
+    interface: tableInterface,
+    asAbove,
+}: TableProviderProps<TSchema>) {
 
-  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>
-    )
-  }
+    type Readable = z.infer<TableSchema['readable']>
 
-  const useSingle = <Table extends TableKey>(table: Table) =>
-    useContext(SingleContext) as ReturnType<typeof useSingleProvider<Table>>
+    const index = useIndex<Readable>({ ...(asAbove ?? {}) })
 
-  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
+    useEffect(function soBelow() {
+        index.setIndex((prev) => ({ ...prev, ...asAbove }))
+    }, [])
+
+    return useInterface<TSchema>(table, tableInterface, index)
+}
+
+export const [TableContextProvider, useTableContext] = createContextFromHook(useTableProvider<any>)
+
+export function TableProvider<TSchema extends TableSchema>({ children, ...props }: PropsWithChildren<TableProviderProps<TSchema>>) {
+    return <TableContextProvider {...props}>{children}</TableContextProvider>
+}
+
+export function useTable<TSchema extends TableSchema>() {
+    return useTableContext() as ReturnType<typeof useTableProvider<TSchema>>
+}
+
+export function CreateForm<TSchema extends TableSchema>({ table, defaults, onSuccess, children }: {
+    table: string
+    schema: TSchema
+    defaults?: Partial<z.infer<TSchema['writable']>>
+    onSuccess?: (result: z.infer<TSchema['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
+        (props: ReturnType<typeof useActionProvider<z.infer<TSchema['writable']>, z.infer<TSchema['readable']>>>
+            & ReturnType<typeof useFields<z.infer<TSchema['writable']>>>
+        ) => React.ReactNode
     )
-  }) {
-    type Readable = z.infer<Database[T]['readable']>
-    type Writable = z.infer<Database[T]['writable']>
+}) {
+    type Readable = z.infer<TSchema['readable']>
+    type Writable = z.infer<TSchema['writable']>
 
-    const { create } = useTable(table)
+    const { create } = useDatabaseTable(table)
 
     const callback = useCallback(
-      async (fields: Writable) => {
-        const result = await create.trigger({ data: fields })
-        if (onSuccess) onSuccess(result as Readable)
-        return result
-      },
-      [create, onSuccess]
+        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
+        <FieldsProvider<Writable> defaults={defaults || ({} as Writable)}>
+            {fields => (
+                <ActionProvider<Writable, Readable> action={callback} params={fields.fields}>
+                    {typeof children === 'function' ? (
+                        form => children({ ...form, ...fields })
+                    ) : (
+                        children
+                    )}
+                </ActionProvider>
             )}
-          </ActionProvider>
-        )}
-      </FieldsProvider>
+        </FieldsProvider>
     )
-  }
+}
 
-  function UpdateForm<T extends TableKey>({
+export function UpdateForm<TSchema extends TableSchema>({
+    schema,
     table,
     id,
     defaults,
     onSuccess,
     children,
-  }: {
-    table: T
+}: {
+    schema: TSchema
+    table: string
     id: string
-    defaults?: Partial<z.infer<Database[T]['writable']>>
-    onSuccess?: (result: z.infer<Database[T]['readable']>) => void
+    defaults?: Partial<z.infer<TSchema['writable']>>
+    onSuccess?: (result: z.infer<TSchema['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
+        (props: ReturnType<typeof useActionProvider<Partial<z.infer<TSchema['writable']>>, z.infer<TSchema['readable']>>>
+            & ReturnType<typeof useFields<z.infer<TSchema['writable']>>>
+        ) => React.ReactNode
     )
-  }) {
-    type Readable = z.infer<Database[T]['readable']>
-    type Writable = z.infer<Database[T]['writable']>
+}) {
+    type Readable = z.infer<TSchema['readable']>
+    type Writable = z.infer<TSchema['writable']>
 
-    const { update } = useTable(table)
+    const { update } = useDatabaseTable(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]
+        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
+        <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>
             )}
-          </ActionProvider>
-        )}
-      </FieldsProvider>
+        </FieldsProvider>
     )
-  }
+}
 
-  function FilterForm<T extends TableKey>({
+export function FilterForm<TSchema extends TableSchema>({
+    schema,
     table,
     defaults,
     onSuccess,
     children,
-  }: {
-    table: T
-    defaults?: Partial<ListProps<z.infer<Database[T]['readable']>>>
-    onSuccess?: (result: z.infer<Database[T]['readable']>[]) => void
+}: {
+    schema: TSchema
+    table: string
+    defaults?: Partial<ListProps<z.infer<TSchema['readable']>>>
+    onSuccess?: (result: z.infer<TSchema['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
+        (props: ReturnType<typeof useActionProvider<ListProps<z.infer<TSchema['readable']>>, z.infer<TSchema['readable']>[]>>
+            & ReturnType<typeof useFields<ListProps<z.infer<TSchema['readable']>>>>
+        ) => React.ReactNode
     )
-  }) {
-    type Readable = z.infer<Database[T]['readable']>
-    type Writable = z.infer<Database[T]['writable']>
+}) {
+    type Readable = z.infer<TSchema['readable']>
 
-    const { list } = useTable(table)
+    const { list } = useDatabaseTable(table)
 
     const callback = useCallback(
-      async (fields: Omit<ListProps<Readable>, 'table'>) => {
-        const result = await list.trigger(fields)
-        if (onSuccess) onSuccess(result)
-        return result
-      },
-      [list, onSuccess]
+        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
+        <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>
             )}
-          </ActionProvider>
-        )}
-      </FieldsProvider>
+        </FieldsProvider>
     )
-  }
+}
 
-  const useCreateForm = <T extends TableKey>(table: T) => {
+export function useCreateForm<TSchema extends TableSchema>(schema: TSchema) {
     return {
-      ...useFields<z.infer<Database[T]['writable']>>(),
-      ...useAction<
-        z.infer<Database[T]['writable']>,
-        z.infer<Database[T]['readable']>
-      >(),
+        ...useFields<z.infer<TSchema['writable']>>(),
+        ...useAction<
+            z.infer<TSchema['writable']>,
+            z.infer<TSchema['readable']>
+        >()
     }
-  }
-  const useUpdateForm = <T extends TableKey>(table: T) => {
+}
+
+export function useUpdateForm<TSchema extends TableSchema>(schema: TSchema) {
     return {
-      ...useFields<Partial<z.infer<Database[T]['writable']>>>(),
-      ...useAction<
-        Partial<z.infer<Database[T]['writable']>>,
-        z.infer<Database[T]['readable']>
-      >(),
+        ...useFields<Partial<z.infer<TSchema['writable']>>>(),
+        ...useAction<
+            Partial<z.infer<TSchema['writable']>>,
+            z.infer<TSchema['readable']>
+        >()
     }
-  }
-  const useFiltersForm = <T extends TableKey>(table: T) => {
+}
+
+export function useFiltersForm <TSchema extends TableSchema>(schema: TSchema) {
     return {
-      ...useFields<z.infer<Database[T]['readable']>>(),
-      ...useAction<z.infer<Database[T]['readable']>,
-        z.infer<Database[T]['readable']>[]
-      >(),
+        ...useFields<z.infer<TSchema['readable']>>(),
+        ...useAction<z.infer<TSchema['readable']>,
+            z.infer<TSchema['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)
-  }
+export function useSingleProvider<T>({
+    id,
+    table,
+}: {
+    id: string
+    table: string
+}) {
+    const { index, find } = useDatabaseTable(table)
+    const [single, setSingle] = useState<T>(
+        // @ts-expect-error
+        () => index[id as keyof typeof index]
+    )
+    useEffect(() => {
+        // @ts-expect-error
+        if (!single) find.trigger({ id }).then(setSingle)
+    }, [])
+    useEffect(() => {
+        // @ts-expect-error
+        setSingle(index[id as keyof typeof index])
+    }, [index[id as keyof typeof index]])
+    return {
+        id,
+        single,
+        setSingle,
+        loading: find.loading,
+    }
+}
+
+export const SingleContext = createContext<
+    ReturnType<typeof useSingleProvider> | undefined
+>(undefined)
+
+export function SingleProvider<T>({
+    children,
+    ...props
+}: {
+    id: string
+    table: string
+    children: React.ReactNode | ((props: ReturnType<typeof useSingleProvider>) => React.ReactNode)
+}) {
+    const value = useSingleProvider(props)
+    if (!value.single) return null
+    return (
+        <SingleContext.Provider value={value}>
+            {typeof children === 'function' ? (
+                children(value)
+            ) : (
+                children
+            )}
+        </SingleContext.Provider>
+    )
+}
+
+export function useSingle<T>() {
+    return useContext(SingleContext) as ReturnType<typeof useSingleProvider<T>>
 }