asasvirtuais 2.1.3 → 2.1.5

package/README.md

@@ -573,7 +573,7 @@ const messagesInterface = tableInterface(messageSchema, 'messages', {
   find: firestoreInterface.find,
   list: firestoreInterface.list,
 })
-
+```
 
 ### Key Principles
 
@@ -673,6 +673,196 @@ Give AI the asasvirtuais documentation and watch it generate multi-step forms wi
 Try it with [Google AI Studio](https://ai.studio/apps/drive/1-MwQzpbgMZhRqSbpqQYX1IRpvj61F_l8).
 
 
+# Model Package Instructions
+
+A model package is a self-contained module that defines a data model and provides React components for interacting with that data. Based on the chat example, here's how to structure a model package:
+
+## File Structure
+
+```
+app/[model-name]/
+├── index.ts          # Schema definitions and types
+├── fields.tsx        # Individual form field components
+├── forms.tsx         # Complete form components
+└── table.tsx         # Provider and hooks for data access
+```
+
+## 1. Schema Definition (`index.ts`)
+
+Define your data model using Zod schemas:
+
+```typescript
+import z from 'zod'
+
+// Define the complete object structure (what comes from the database)
+export const readable = z.object({
+    id: z.string(),
+    // ... other fields that can be read
+})
+
+// Define which fields can be written/modified
+export const writable = readable.pick({
+    // ... fields that can be created/updated
+})
+
+// Export the schema object
+export const schema = { readable, writable }
+
+// Export TypeScript types
+export type Readable = z.infer<typeof readable>
+export type Writable = z.infer<typeof writable>
+```
+
+**Key Points:**
+- `readable`: Full object schema including `id` and all readable fields
+- `writable`: Subset of fields that users can create/modify (typically excludes `id`)
+- Use `.pick()` to select fields from readable for writable
+- Export both the schema object and TypeScript types
+
+## 2. Field Components (`fields.tsx`)
+
+Create reusable field components for individual form inputs:
+
+```typescript
+import { Input, InputProps } from '@chakra-ui/react'
+import { useFields } from 'asasvirtuais/fields'
+
+export function [FieldName]Field(props: InputProps) {
+    const { fields, setField } = useFields<{fieldName: type}>()
+    
+    return (
+        <Input 
+            name='fieldName' 
+            value={fields.fieldName} 
+            onChange={e => setField('fieldName', e.target.value)} 
+            {...props} 
+        />
+    )
+}
+```
+
+**Key Points:**
+- Use `useFields` hook with type annotation matching your field
+- Pass through additional props using spread operator
+- Set appropriate `name` attribute
+- Handle `onChange` with `setField`
+
+## 3. Form Components (`forms.tsx`)
+
+Create complete forms for creating and filtering data:
+
+```typescript
+import { CreateForm, FilterForm, useTableInterface } from 'asasvirtuais/react-interface'
+import { schema } from '.'
+import { [Field]Field } from './fields'
+import { Stack, Button } from '@chakra-ui/react'
+
+// Create form
+export function Create[Model]() {
+    return (
+        <CreateForm table='tableName' schema={schema}>
+            {form => (
+                <Stack as='form' onSubmit={form.submit}>
+                    <[Field]Field />
+                    <Button type='submit'>Create [Model]</Button>
+                </Stack>
+            )}
+        </CreateForm>
+    )
+}
+
+// Filter/List form
+export function Filter[Models]() {
+    const { remove } = useTableInterface('tableName', schema)
+    
+    return (
+        <FilterForm table='tableName' schema={schema}>
+            {form => (
+                <Stack>
+                    {form.result?.map(item => (
+                        <div key={item.id}>
+                            {/* Display item data */}
+                            <Button onClick={() => remove.trigger({id: item.id})}>
+                                Delete
+                            </Button>
+                        </div>
+                    ))}
+                </Stack>
+            )}
+        </FilterForm>
+    )
+}
+```
+
+**Key Points:**
+- `CreateForm` handles creation logic, provides `form.submit`
+- `FilterForm` provides `form.result` with filtered data
+- Use `useTableInterface` for operations like `remove`
+- Always provide `table` name and `schema` to forms
+
+## 4. Provider and Hooks (`table.tsx`)
+
+Set up the data provider and custom hooks:
+
+```typescript
+'use client'
+import { TableProvider, useTableInterface } from 'asasvirtuais/react-interface'
+import { fetchInterface } from 'asasvirtuais/fetch-interface'
+import { schema } from '.'
+
+export function use[Models]() {
+    return useTableInterface<typeof schema>('tableName')
+}
+
+export function [Models]Provider({ children }: { children: React.ReactNode }) {
+    return (
+        <TableProvider 
+            table='tableName' 
+            schema={schema} 
+            interface={fetchInterface({
+                schema, 
+                baseUrl: '/api/v1', 
+                defaultTable: 'tableName'
+            })}
+        >
+            {children}
+        </TableProvider>
+    )
+}
+```
+
+**Key Points:**
+- Mark as `'use client'` for Next.js
+- 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
+
+- **Model name**: Singular (e.g., `chat`, `user`, `product`)
+- **Table name**: Plural (e.g., `chats`, `users`, `products`)
+- **Field components**: `[Field]Field` (e.g., `TitleField`, `EmailField`)
+- **Form components**: `Create[Model]`, `Filter[Models]` (e.g., `CreateChat`, `FilterChats`)
+- **Provider**: `[Models]Provider` (e.g., `ChatsProvider`)
+- **Hook**: `use[Models]` (e.g., `useChats`)
+
+## Usage Example
+
+```typescript
+import { ChatsProvider } from './chat/table'
+import { CreateChat, FilterChats } from './chat/forms'
+
+function App() {
+    return (
+        <ChatsProvider>
+            <CreateChat />
+            <FilterChats />
+        </ChatsProvider>
+    )
+}
+```
+
+
 ## Contributing
 
 This is the result of years of meditation on overengineering. If you see ways to make it simpler (not more feature-rich, simpler), I'm interested.
@@ -683,4 +873,4 @@ MIT
 
 ---
 
-*Built by someone who spent 7 years learning that the hard way is usually the wrong way.*
+*Built by someone who spent 7 years learning that the hard way is usually the wrong way.*

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "asasvirtuais",
   "type": "module",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "description": "React form and action management utilities",
   "directories": {
     "packages": "./packages"
   },
+  "scripts": {
+    "dev": "next dev"
+  },
   "files": [
     "packages",
     "tsconfig.json"
@@ -29,8 +32,8 @@
       "default": "./packages/hooks.tsx"
     },
     "./interface": {
-      "types": "./packages/interface/interface.ts",
-      "default": "./packages/interface/interface.ts"
+      "types": "./packages/interface.ts",
+      "default": "./packages/interface.ts"
     },
     "./react-interface": {
       "types": "./packages/react-interface.tsx",
@@ -49,10 +52,16 @@
     "react": "^19.2.3"
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.30.0",
     "next": "^16.1.1",
+    "next-themes": "^0.4.6",
+    "react-icons": "^5.5.0",
     "zod": "^4.3.5"
   },
   "devDependencies": {
-    "@types/react": "^19.2.8"
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^5.9.3"
   }
 }

package/packages/react-interface.tsx

@@ -1,26 +1,89 @@
+'use client'
 import z from 'zod'
-import { DatabaseSchema, ListProps, TableInterface, TableSchema } from './interface'
+import { ListProps, TableInterface, TableSchema } from './interface'
 import { createContextFromHook, useAction as useAsyncAction, useIndex } from './hooks'
-import { createContext, PropsWithChildren, useCallback, useContext, useEffect, useState } from 'react'
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ActionProvider, useAction, useActionProvider } from './action'
 import { FieldsProvider, useFields } from './fields'
 
 export function useDatabaseProvider() {
 
-    const [database, setDatabase] = useState<Record<string, ReturnType<typeof useInterface<any>>>>({})
+    const [interfaces, setInterfaces] = useState<Record<string, ReturnType<typeof useInterface<any>>>>({})
+    const [indexes, setIndexes] = useState<Record<string, {
+        [table: string]: { [id: string]: any }
+    }>>({})
+
+    const set = useCallback((table: string, ...params: any[]) => {
+        setIndexes(prev => ({
+            [table]: {
+                ...prev[table],
+                ...Object.fromEntries(params.map(data => ([(data as any & { id: string} ).id, data])))
+            }
+        }))
+    }, [])
+    const unset = useCallback((table: string, ...params: any[]) => {
+        setIndexes(prev => ({
+            [table]: {
+                ...prev[table],
+                ...Object.fromEntries(params.map(data => ([(data as any & { id: string} ).id, data])))
+            }
+        }))
+    }, [])
+
+    return {
+        interfaces,
+        setInterfaces,
+        indexes,
+        set,
+        unset,
+        setIndexes,
+    }
+}
 
+export function useTableIndex<TSchema extends TableSchema>(table: string, schema: TSchema) {
+    const { indexes, setIndexes } = useDatabase()
+    const index = useMemo(() => indexes[table], [indexes, table])
+    const array = useMemo(() => Object.values(index || {}) as z.infer<TSchema['readable']>[], [index])
+    function set(...params: z.infer<TSchema['readable'] >[]) {
+        setIndexes(prev => ({
+            [table]: {
+                ...prev[table],
+                ...Object.fromEntries(params.map(data => ([(data as z.infer<TSchema['readable']> & { id: string} ).id, data])))
+            },
+            ...prev,
+        }))
+    }
+    function unset(...params: z.infer<TSchema['readable']>[]) {
+        setIndexes(prev => {
+            const tableIndex = prev[table] || {}
+            const newIndex = { ...tableIndex }
+            for (const data of params) {
+                const id = (data as z.infer<TSchema['readable']> & { id: string} ).id
+                if (newIndex[id])
+                    delete newIndex[id]
+            }
+            return {
+                [table]: {
+                    ...newIndex,
+                },
+                ...prev,
+            }
+        })
+    }
     return {
-        database,
-        setDatabase,
+        index,
+        array,
+        set,
+        unset,
     }
 }
 
 export const [DatabaseProvider, useDatabase] = createContextFromHook(useDatabaseProvider)
 
-export function useDatabaseTable<TSchema extends TableSchema>(table: string) {
-    const { database } = useDatabase()
+export function useTableInterface<TSchema extends TableSchema>(table: string, schema: TSchema) {
+    const { interfaces } = useDatabase()
 
-    const tableMethods = database[table] as ReturnType<typeof useInterface<TSchema>> | undefined
+    const tableMethods = interfaces[table] as ReturnType<typeof useInterface<TSchema>> | undefined
 
     if (!tableMethods)
         throw new Error(`Table "${table}" is not defined in the database schema.`)
@@ -35,11 +98,10 @@ export type TableProviderProps<TSchema extends TableSchema> = {
     asAbove?: Record<string, z.infer<TSchema['readable']>>
 }
 
-export function useInterface<TSchema extends TableSchema>(table: string, {
+export function useInterface<TSchema extends TableSchema>(table: string, schema: TSchema,  {
     find, create, update, remove, list
 }: TableInterface<z.infer<TSchema['readable']>, z.infer<TSchema['writable']>>, index: ReturnType<typeof useIndex<z.infer<TSchema['readable']>>>) {
     return {
-        index,
         find: useAsyncAction(((props) => find({ ...props, table }).then(res => {
             index.set(res)
             return res
@@ -70,7 +132,7 @@ export function useTableProvider<TSchema extends TableSchema>({
     asAbove,
 }: TableProviderProps<TSchema>) {
 
-    type Readable = z.infer<TableSchema['readable']>
+    type Readable = z.infer<TSchema['readable']>
 
     const index = useIndex<Readable>({ ...(asAbove ?? {}) })
 
@@ -78,20 +140,46 @@ export function useTableProvider<TSchema extends TableSchema>({
         index.setIndex((prev) => ({ ...prev, ...asAbove }))
     }, [])
 
-    return useInterface<TSchema>(table, tableInterface, index)
+    const methods = useInterface<TSchema>(table, schema, tableInterface, index)
+
+    const { interfaces, setInterfaces, indexes, setIndexes } = useDatabase()
+
+    useEffect(() => {
+        setInterfaces(prev => ({
+            [table]: methods,
+            ...prev,
+        }))
+    }, [])
+
+    return {
+        ...methods,
+        ...index
+    }
 }
 
-export const [TableContextProvider, useTableContext] = createContextFromHook(useTableProvider<any>)
+const TableContext = createContext<ReturnType<typeof useTableProvider<any>> | undefined>(undefined)
+
+export function TableProvider<TSchema extends TableSchema>({children, ...props}: React.PropsWithChildren<TableProviderProps<TSchema>>) {
+
+    const context = useTableProvider(props)
 
-export function TableProvider<TSchema extends TableSchema>({ children, ...props }: PropsWithChildren<TableProviderProps<TSchema>>) {
-    return <TableContextProvider {...props}>{children}</TableContextProvider>
+    const { interfaces, setInterfaces, indexes, setIndexes } = useDatabase()
+
+    if (! interfaces[props.table])
+        return null
+
+    return (
+        <TableContext.Provider value={context}>
+            {children}
+        </TableContext.Provider>
+    )
 }
 
 export function useTable<TSchema extends TableSchema>() {
-    return useTableContext() as ReturnType<typeof useTableProvider<TSchema>>
+    return useContext(TableContext) as ReturnType<typeof useTableProvider<TSchema>>
 }
 
-export function CreateForm<TSchema extends TableSchema>({ table, defaults, onSuccess, children }: {
+export function CreateForm<TSchema extends TableSchema>({ table, schema, defaults, onSuccess, children }: {
     table: string
     schema: TSchema
     defaults?: Partial<z.infer<TSchema['writable']>>
@@ -105,7 +193,7 @@ export function CreateForm<TSchema extends TableSchema>({ table, defaults, onSuc
     type Readable = z.infer<TSchema['readable']>
     type Writable = z.infer<TSchema['writable']>
 
-    const { create } = useDatabaseTable(table)
+    const { create } = useTableInterface<TSchema>(table, schema)
 
     const callback = useCallback(
         async (fields: Writable) => {
@@ -153,7 +241,7 @@ export function UpdateForm<TSchema extends TableSchema>({
     type Readable = z.infer<TSchema['readable']>
     type Writable = z.infer<TSchema['writable']>
 
-    const { update } = useDatabaseTable(table)
+    const { update } = useTableInterface<TSchema>(table, schema)
 
     const callback = useCallback(
         async (fields: Partial<Writable>) => {
@@ -200,7 +288,7 @@ export function FilterForm<TSchema extends TableSchema>({
 }) {
     type Readable = z.infer<TSchema['readable']>
 
-    const { list } = useDatabaseTable(table)
+    const { list } = useTableInterface<TSchema>(table, schema)
 
     const callback = useCallback(
         async (fields: Omit<ListProps<Readable>, 'table'>) => {
@@ -257,26 +345,26 @@ export function useFiltersForm <TSchema extends TableSchema>(schema: TSchema) {
     }
 }
 
-export function useSingleProvider<T>({
+export function useSingleProvider<TSchema extends TableSchema>({
     id,
     table,
+    schema,
 }: {
     id: string
     table: string
+    schema: TSchema
 }) {
-    const { index, find } = useDatabaseTable(table)
-    const [single, setSingle] = useState<T>(
-        // @ts-expect-error
-        () => index[id as keyof typeof index]
+    const { find } = useTableInterface(table, schema)
+    const { index } = useTableIndex<TSchema>(table, schema)
+    const [single, setSingle] = useState<z.infer<TSchema['readable']>>(
+        () => index[table][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]])
+        setSingle(index[table][id as keyof typeof index])
+    }, [index[table][id as keyof typeof index]])
     return {
         id,
         single,
@@ -289,17 +377,19 @@ export const SingleContext = createContext<
     ReturnType<typeof useSingleProvider> | undefined
 >(undefined)
 
-export function SingleProvider<T>({
+export function SingleProvider<TSchema extends TableSchema>({
     children,
     ...props
 }: {
     id: string
     table: string
-    children: React.ReactNode | ((props: ReturnType<typeof useSingleProvider>) => React.ReactNode)
+    schema: TSchema
+    children: React.ReactNode | ((props: ReturnType<typeof useSingleProvider<TSchema>>) => React.ReactNode)
 }) {
-    const value = useSingleProvider(props)
+    const value = useSingleProvider<TSchema>(props)
     if (!value.single) return null
     return (
+        // @ts-expect-error
         <SingleContext.Provider value={value}>
             {typeof children === 'function' ? (
                 children(value)
@@ -310,6 +400,7 @@ export function SingleProvider<T>({
     )
 }
 
-export function useSingle<T>() {
-    return useContext(SingleContext) as ReturnType<typeof useSingleProvider<T>>
+export function useSingle<TSchema extends TableSchema>() {
+    // @ts-expect-error
+    return useContext(SingleContext) as ReturnType<typeof useSingleProvider<TSchema>>
 }

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "skipLibCheck": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}