asasvirtuais 2.1.5 → 2.2.0

package/README.md

@@ -228,37 +228,42 @@ export const userSchema = {
 }
 ```
 
-#### 2. Create Your Table Interface
+#### 2. Provide the Interface Context
 
-```typescript
-// app/interface.ts
-import { fetchInterface } from '@asasvirtuais/fetch-interface'
+```tsx
+// app/layout.tsx
+import { InterfaceProvider } from 'asasvirtuais/fetch-interface'
+import { DatabaseProvider, TableProvider } from 'asasvirtuais/react-interface'
 import { todoSchema } from './database'
 
-// Create interface for your API
-export const todosInterface = fetchInterface({
-  schema: todoSchema,
-  defaultTable: 'todos',
-  baseUrl: '/api/v1'
-})
+export default function RootLayout({ children }) {
+  return (
+    <DatabaseProvider>
+      <InterfaceProvider schema={todoSchema} baseUrl='/api/v1'>
+        <TodosProvider>
+          {children}
+        </TodosProvider>
+      </InterfaceProvider>
+    </DatabaseProvider>
+  )
+}
 ```
 
-#### 3. Provide Table Context
+#### 3. Create Your Table Provider
 
 ```tsx
-// app/todos/layout.tsx
-import { TableProvider } from '@asasvirtuais/react-interface'
-import { todoSchema, todosInterface } from '@/app/interface'
+// app/todos/provider.tsx
+'use client'
+import { TableProvider } from 'asasvirtuais/react-interface'
+import { useInterface } from 'asasvirtuais/fetch-interface'
+import { todoSchema } from './database'
 
-export default async function TodosLayout({ children }) {
-  const initialTodos = await fetchTodos()
-  
+export function TodosProvider({ children }) {
   return (
     <TableProvider
-      table="todos"
+      table='todos'
       schema={todoSchema}
-      interface={todosInterface}
-      asAbove={initialTodos}
+      interface={useInterface()}
     >
       {children}
     </TableProvider>
@@ -802,28 +807,24 @@ export function Filter[Models]() {
 
 ## 4. Provider and Hooks (`table.tsx`)
 
-Set up the data provider and custom hooks:
+Set up the data provider and custom hooks using `InterfaceProvider` and `useInterface`:
 
 ```typescript
 'use client'
 import { TableProvider, useTableInterface } from 'asasvirtuais/react-interface'
-import { fetchInterface } from 'asasvirtuais/fetch-interface'
+import { useInterface } from 'asasvirtuais/fetch-interface'
 import { schema } from '.'
 
 export function use[Models]() {
-    return useTableInterface<typeof schema>('tableName')
+    return useTableInterface('tableName', schema)
 }
 
 export function [Models]Provider({ children }: { children: React.ReactNode }) {
     return (
-        <TableProvider 
-            table='tableName' 
-            schema={schema} 
-            interface={fetchInterface({
-                schema, 
-                baseUrl: '/api/v1', 
-                defaultTable: 'tableName'
-            })}
+        <TableProvider
+            table='tableName'
+            schema={schema}
+            interface={useInterface()}
         >
             {children}
         </TableProvider>
@@ -831,11 +832,28 @@ export function [Models]Provider({ children }: { children: React.ReactNode }) {
 }
 ```
 
+Then in your layout, wrap with `InterfaceProvider` to set up the context:
+
+```tsx
+import { InterfaceProvider } from 'asasvirtuais/fetch-interface'
+import { DatabaseProvider } from 'asasvirtuais/react-interface'
+import { [Models]Provider } from './table'
+import { schema } from '.'
+
+<DatabaseProvider>
+  <InterfaceProvider schema={schema} baseUrl='/api/v1'>
+    <[Models]Provider>
+      {children}
+    </[Models]Provider>
+  </InterfaceProvider>
+</DatabaseProvider>
+```
+
 **Key Points:**
-- Mark as `'use client'` for Next.js
+- Mark table.tsx as `'use client'` for Next.js
+- `InterfaceProvider` creates the fetch interface and provides it via context
+- `useInterface()` retrieves the interface from context inside `TableProvider`
 - Create a custom hook for easy access to table interface
-- Provide `fetchInterface` configuration with baseUrl and table name
-- Wrap your app/components with the Provider to enable data access
 
 ## Naming Conventions
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "asasvirtuais",
   "type": "module",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "description": "React form and action management utilities",
   "directories": {
     "packages": "./packages"
@@ -46,6 +46,18 @@
     "./fetch-interface": {
       "types": "./packages/fetch-interface.tsx",
       "default": "./packages/fetch-interface.tsx"
+    },
+    "./interface-provider": {
+      "types": "./packages/interface-provider.tsx",
+      "default": "./packages/interface-provider.tsx"
+    },
+    "./mem-interface": {
+      "types": "./packages/mem-interface.tsx",
+      "default": "./packages/mem-interface.tsx"
+    },
+    "./indexed-interface": {
+      "types": "./packages/indexed-interface.tsx",
+      "default": "./packages/indexed-interface.tsx"
     }
   },
   "peerDependencies": {
@@ -53,6 +65,7 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^3.30.0",
+    "dexie": "^4.3.0",
     "next": "^16.1.1",
     "next-themes": "^0.4.6",
     "react-icons": "^5.5.0",
@@ -64,4 +77,4 @@
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3"
   }
-}
+}

package/packages/fetch-interface.tsx

@@ -1,11 +1,21 @@
+'use client'
 import { z } from 'zod'
+import { useMemo } from 'react'
+import { createContextFromHook } from './hooks'
 import type { TableInterface, TableSchema } from './interface'
 
-export interface FetchInterfaceConfig {
+export function useFetchInterfaceProvider<TSchema extends TableSchema>({
+  schema, baseUrl = '/api/v1', headers = {},
+}: {
+  schema: TSchema
   baseUrl?: string
   headers?: Record<string, string>
+}) {
+  return useMemo(() => fetchInterface({ schema, baseUrl, headers }), [schema, baseUrl])
 }
 
+export const [FetchInterfaceProvider, useFetchInterface] = createContextFromHook(useFetchInterfaceProvider<any>)
+
 export function fetchInterface<Schema extends TableSchema, Table extends string>({
   schema, defaultTable, baseUrl = '/api/v1', headers = {}
 }: {

package/packages/indexed-interface.tsx

@@ -0,0 +1,139 @@
+'use client'
+import Dexie from 'dexie'
+import { z } from 'zod'
+import { useMemo } from 'react'
+import { createContextFromHook } from './hooks'
+import type { DatabaseSchema, TableInterface } from './interface'
+
+export function useIndexedInterfaceProvider<Schema extends DatabaseSchema>({
+    dbName, schema,
+}: {
+    dbName: string
+    schema: Schema
+}) {
+    return useMemo(() => indexedInterface(dbName, schema), [dbName, schema])
+}
+
+export const [IndexedInterfaceProvider, useIndexedInterface] = createContextFromHook(useIndexedInterfaceProvider<any>)
+
+/**
+ * Creates a TableInterface adapter for IndexedDB using Dexie.js.
+ * This allows the framework to be used in a client-side only context.
+ *
+ * @param dbName The name of the IndexedDB database.
+ * @param schema The Zod schema definition for the database tables.
+ * @returns A TableInterface implementation for Dexie.
+ */
+export function indexedInterface<Schema extends DatabaseSchema>(
+    dbName: string,
+    schema: Schema
+): TableInterface<z.infer<Schema[keyof Schema]['readable']>, z.infer<Schema[keyof Schema]['writable']>> {
+
+    const db = new Dexie(dbName)
+
+    // Dynamically define the database schema for Dexie from the Zod schema.
+    // It marks 'id' as the primary key and indexes all other top-level readable fields.
+    const dexieSchema = Object.fromEntries(
+        Object.keys(schema).map(tableName => {
+            const fields = Object.keys(schema[tableName].readable.shape)
+            // 'id' is the primary key, the rest are indexed fields.
+            const indexedFields = fields.filter(f => f !== 'id').join(', ')
+            return [tableName, `id, ${indexedFields}`]
+        })
+    )
+
+    db.version(1).stores(dexieSchema)
+
+    type GenericReadable = z.infer<Schema[keyof Schema]['readable']>
+    type GenericWritable = z.infer<Schema[keyof Schema]['writable']>
+
+    return {
+        async find({ table, id }) {
+            if (!table) throw new Error('Table name must be provided.')
+            const result = await db.table(table).get(id)
+            if (!result) throw new Error(`Record with id ${id} not found in ${table}`)
+            return result
+        },
+
+        async list({ table, query }) {
+            if (!table) throw new Error('Table name must be provided.')
+            let collection = db.table(table).toCollection()
+
+            const { $limit, $skip, $sort, ...filters } = query ?? {}
+
+            // Handle filtering
+            if (Object.keys(filters).length > 0) {
+                collection = collection.filter(item => {
+                    return Object.entries(filters).every(([key, value]) => {
+                        const itemValue = item[key as keyof typeof item]
+                        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+                            return Object.entries(value).every(([op, opValue]) => {
+                                switch (op) {
+                                    case '$ne': return itemValue !== opValue
+                                    case '$in': return Array.isArray(opValue) && opValue.includes(itemValue)
+                                    case '$nin': return Array.isArray(opValue) && !opValue.includes(itemValue)
+                                    case '$lt': return itemValue < (opValue as number)
+                                    case '$lte': return itemValue <= (opValue as number)
+                                    case '$gt': return itemValue > (opValue as number)
+                                    case '$gte': return itemValue >= (opValue as number)
+                                    default: return true // Ignore unknown operators
+                                }
+                            })
+                        } else {
+                            return itemValue === value
+                        }
+                    })
+                })
+            }
+
+            // Handle sorting
+            if ($sort) {
+                const sortKey = Object.keys($sort)[0] as keyof GenericReadable
+                const direction = $sort[sortKey] === -1 ? 'desc' : 'asc'
+                if (direction === 'desc')
+                    collection = collection.reverse()
+                // @ts-expect-error
+                collection = await collection.sortBy(sortKey)
+            }
+
+            // Handle pagination
+            if ($skip) {
+                collection = collection.offset($skip)
+            }
+            if ($limit) {
+                collection = collection.limit($limit)
+            }
+
+            return collection.toArray()
+        },
+
+        async create({ table, data }) {
+            if (!table) throw new Error('Table name must be provided.')
+            // Use existing id or generate a new UUID
+            const id = (data as any).id || crypto.randomUUID()
+            const record = { ...data, id }
+            await db.table(table).add(record)
+            return record as GenericReadable
+        },
+
+        async update({ table, id, data }) {
+            if (!table) throw new Error('Table name must be provided.')
+            const updatedCount = await db.table(table).update(id, data)
+            if (updatedCount === 0) {
+                throw new Error(`Record with id ${id} not found in ${table}, cannot update.`)
+            }
+            const result = await this.find({ table, id })
+            return result as GenericReadable
+        },
+
+        async remove({ table, id }) {
+            if (!table) throw new Error('Table name must be provided.')
+            const record = await this.find({ table, id })
+            if (!record) {
+                throw new Error(`Record with id ${id} not found in ${table}, cannot remove.`)
+            }
+            await db.table(table).delete(id)
+            return record as GenericReadable
+        },
+    } as TableInterface<GenericReadable, GenericWritable>
+}

package/packages/interface-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+import { createContextFromHook } from './hooks'
+import type { TableInterface } from './interface'
+
+function useInterfaceProvider({ interface: tableInterface }: {
+    interface: TableInterface<any, any>
+}) {
+    return tableInterface
+}
+
+export const [InterfaceProvider, useInterface] = createContextFromHook(useInterfaceProvider)

package/packages/mem-interface.tsx

@@ -0,0 +1,104 @@
+'use client'
+import { useMemo } from 'react'
+import { createContextFromHook } from './hooks'
+import type { TableInterface, TableSchema } from './interface'
+
+export function useMemInterfaceProvider<TSchema extends TableSchema>({
+    schema,
+}: {
+    schema: TSchema
+}) {
+    return useMemo(() => memInterface<TSchema>(), [schema])
+}
+
+export const [MemInterfaceProvider, useMemInterface] = createContextFromHook(useMemInterfaceProvider<any>)
+
+export function memInterface<TSchema extends TableSchema>(): TableInterface<any, any> {
+
+    const store: Record<string, Record<string, any>> = {}
+
+    function getTable(table?: string) {
+        if (!table) throw new Error('Table name must be provided.')
+        if (!store[table]) store[table] = {}
+        return store[table]
+    }
+
+    return {
+        async find({ table, id }) {
+            const t = getTable(table)
+            const record = t[id]
+            if (!record) throw new Error(`Record with id ${id} not found in ${table}`)
+            return record
+        },
+
+        async create({ table, data }) {
+            const t = getTable(table)
+            const id = (data as any).id || crypto.randomUUID()
+            const record = { ...data, id }
+            t[id] = record
+            return record
+        },
+
+        async update({ table, id, data }) {
+            const t = getTable(table)
+            if (!t[id]) throw new Error(`Record with id ${id} not found in ${table}, cannot update.`)
+            t[id] = { ...t[id], ...data }
+            return t[id]
+        },
+
+        async remove({ table, id }) {
+            const t = getTable(table)
+            const record = t[id]
+            if (!record) throw new Error(`Record with id ${id} not found in ${table}, cannot remove.`)
+            delete t[id]
+            return record
+        },
+
+        async list({ table, query }) {
+            const t = getTable(table)
+            let results = Object.values(t)
+
+            if (query) {
+                const { $limit, $skip, $sort, ...filters } = query
+
+                if (Object.keys(filters).length > 0) {
+                    results = results.filter(item =>
+                        Object.entries(filters).every(([key, value]) => {
+                            const itemValue = item[key]
+                            if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+                                return Object.entries(value).every(([op, opValue]) => {
+                                    switch (op) {
+                                        case '$ne': return itemValue !== opValue
+                                        case '$in': return Array.isArray(opValue) && opValue.includes(itemValue)
+                                        case '$nin': return Array.isArray(opValue) && !opValue.includes(itemValue)
+                                        case '$lt': return itemValue < (opValue as number)
+                                        case '$lte': return itemValue <= (opValue as number)
+                                        case '$gt': return itemValue > (opValue as number)
+                                        case '$gte': return itemValue >= (opValue as number)
+                                        default: return true
+                                    }
+                                })
+                            }
+                            return itemValue === value
+                        })
+                    )
+                }
+
+                if ($sort) {
+                    const sortKey = Object.keys($sort)[0]
+                    const direction = ($sort as any)[sortKey]
+                    results.sort((a, b) => {
+                        if (a[sortKey] < b[sortKey]) return direction === -1 ? 1 : -1
+                        if (a[sortKey] > b[sortKey]) return direction === -1 ? -1 : 1
+                        return 0
+                    })
+                }
+
+                if ($skip) results = results.slice($skip)
+                if ($limit) results = results.slice(0, $limit)
+            }
+
+            return results
+        }
+    }
+}

package/packages/react-interface.tsx

@@ -175,8 +175,13 @@ export function TableProvider<TSchema extends TableSchema>({children, ...props}:
     )
 }
 
-export function useTable<TSchema extends TableSchema>() {
-    return useContext(TableContext) as ReturnType<typeof useTableProvider<TSchema>>
+export function useTable<TSchema extends TableSchema>(table: string, schema: TSchema) {
+    const methods = useTableInterface(table, schema)
+    const index = useTableIndex(table, schema)
+    return {
+        ...methods,
+        ...index,
+    }
 }
 
 export function CreateForm<TSchema extends TableSchema>({ table, schema, defaults, onSuccess, children }: {