asasvirtuais 0.1.0

package/packages/crud/react.tsx

@@ -0,0 +1,365 @@
+'use client'
+import { z } from 'zod'
+import {
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  createContext,
+  useContext,
+} from "react"
+import { createContextFromHook } from "@/packages/react/context"
+import { useIndex, useAction } from "@/packages/react/hooks"
+import { FieldsProvider, useFields } from "@/packages/fields"
+import { FormProvider, useForm } from "@/packages/form"
+import { TableInterface, ListProps, DatabaseInterface } from "./core"
+
+export function database<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
+
+  function useTableProvider<Table extends TableKey>({
+    table,
+    asAbove,
+  }: {
+    table: Table
+    asAbove?: Record<string, z.infer<Database[Table]["readable"]>>
+  }) {
+    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: useAction(((props) => methods.find({ ...props, table }).then(res => {
+        index.set(res)
+        return res
+      })) as typeof find),
+      create: useAction(((props) => create({...props, table}).then(res => {
+        index.set(res)
+        return res
+      })) as typeof create),
+      update: useAction(((props) => update({...props, table}).then(res => {
+        index.set(res)
+        return res
+      })) as typeof update),
+      remove: useAction(((props) => remove({...props, table}).then(res => {
+        index.remove(res)
+        return res
+      })) as typeof remove),
+      list: useAction(((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>>
+    }
+  }
+
+  const [DatabaseProvider, useDatabase] =
+    createContextFromHook(useDatabaseProvider)
+
+  function useTable<T extends TableKey>(name: T): ReturnType<typeof useTableProvider<T>> {
+    return useDatabase()[name] 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)
+    }, [])
+    return {
+      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
+  }) {
+    const value = useSingleProvider(props)
+    if (!value.single) return null
+    return (
+      <SingleContext.Provider value={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: ((props: {
+      loading: boolean
+      error: Error | null
+      result: z.infer<Database[T]["readable"]> | null
+      fields: Partial<z.infer<Database[T]["writable"]>>
+      setField: (key: keyof z.infer<Database[T]["writable"]>, value: any) => void
+      callback: (fields: Partial<z.infer<Database[T]["writable"]>>) => Promise<z.infer<Database[T]["readable"]>>
+      submit: (e?: React.FormEvent) => Promise<boolean>
+    }) => 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)}>
+        {fieldsProps => (
+          <FormProvider<Writable, Readable> data={fieldsProps.fields} callback={callback}>
+            {formProps => children({...fieldsProps, ...formProps, callback})}
+          </FormProvider>
+        )}
+        </FieldsProvider>
+    )
+  }
+
+  // Helper component for UpdateForm render prop pattern
+  function UpdateFormRenderProp<T extends TableKey>({ 
+    children 
+  }: { 
+    children: (props: {
+      fields: Partial<z.infer<Database[T]["writable"]>>
+      setField: (key: keyof z.infer<Database[T]["writable"]>, value: any) => void
+      submit: (e?: React.FormEvent) => Promise<boolean>
+      loading: boolean
+      error?: Error | null
+    }) => React.ReactNode
+  }) {
+  }
+
+  function UpdateForm<T extends TableKey>({
+    id,
+    table,
+    defaults,
+    onSuccess,
+    children,
+  }: {
+    table: T
+    id: string
+    defaults?: Partial<z.infer<Database[T]["writable"]>>
+    onSuccess?: (result: z.infer<Database[T]["readable"]>) => void
+    children: ((props: {
+      loading: boolean
+      error: Error | null
+      result: z.infer<Database[T]["readable"]> | null
+      fields: Partial<z.infer<Database[T]["writable"]>>
+      setField: (key: keyof z.infer<Database[T]["writable"]>, value: any) => void
+      callback: (fields: Partial<z.infer<Database[T]["writable"]>>) => z.infer<Database[T]["readable"]>
+      submit: (e?: React.FormEvent) => Promise<boolean>
+    }) => React.ReactNode)
+  }) {
+    type Readable = z.infer<Database[T]["readable"]>
+    type Writable = z.infer<Database[T]["writable"]>
+
+    const { update } = useTable(table)
+
+    /** receive the props values and process the result */
+    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<Partial<Writable>>
+        defaults={defaults || ({} as Partial<Writable>)}
+      >
+        {fieldsProps => (
+          <FormProvider<Partial<Writable>, Readable>
+            data={fieldsProps.fields}
+            callback={callback}
+          >
+            {formProps => children({...fieldsProps, ...formProps, callback})}
+          </FormProvider>
+        )}
+        </FieldsProvider>
+    )
+  }
+
+  // Helper component for FilterForm render prop pattern
+  function FilterFormRenderProp<T extends TableKey>({ 
+    children 
+  }: { 
+    children: (props: {
+      fields: Partial<ListProps<z.infer<Database[T]["readable"]>>>
+      setField: (key: keyof ListProps<z.infer<Database[T]["readable"]>>, value: any) => void
+      submit: (e?: React.FormEvent) => Promise<boolean>
+      loading: boolean
+      error?: Error | null
+    }) => React.ReactNode
+  }) {
+    const { fields, setField } = useFields<ListProps<z.infer<Database[T]["readable"]>>>()
+    const { submit, loading, error } = useForm<ListProps<z.infer<Database[T]["readable"]>>, z.infer<Database[T]["readable"]>[]>()
+    
+    return <>{children({ fields, setField, submit, loading, error })}</>
+  }
+
+  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: ((props: {
+      loading: boolean
+      error: Error | null
+      result: z.infer<Database[T]["readable"]>[] | null
+      fields: Partial<ListProps<z.infer<Database[T]["readable"]>>>
+      setField: (key: keyof ListProps<z.infer<Database[T]["readable"]>>, value: any) => void
+      callback: (fields: Partial<ListProps<z.infer<Database[T]["readable"]>>>) => Promise<z.infer<Database[T]["readable"]>[]>
+      submit: (e?: React.FormEvent) => Promise<boolean>
+    }) => React.ReactNode)
+  }) {
+    type Readable = z.infer<Database[T]["readable"]>
+
+    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 || {}) as ListProps<Readable>}
+      >
+        {fieldsProps => (
+          <FormProvider<ListProps<Readable>, Readable[]>
+            data={{ ...fieldsProps.fields, table }}
+            callback={callback}
+          >
+            {formProps => children({...fieldsProps, ...formProps, callback})}
+          </FormProvider>
+        )}
+      </FieldsProvider>
+    )
+  }
+
+  const useCreateForm = <T extends TableKey>(table: T) => {
+    return {
+      ...useFields<z.infer<Database[T]["writable"]>>(),
+      ...useForm<
+        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"]>>>(),
+      ...useForm<
+        Partial<z.infer<Database[T]["writable"]>>,
+        z.infer<Database[T]["readable"]>
+      >(),
+    }
+  }
+  const useFiltersForm = <T extends TableKey>(table: T) => {
+    return {
+      ...useFields<ListProps<z.infer<Database[T]["readable"]>>>(),
+      ...useForm<
+        ListProps<z.infer<Database[T]["readable"]>>,
+        z.infer<Database[T]["readable"]>[]
+      >(),
+    }
+  }
+
+  return {
+    DatabaseProvider,
+    useDatabase,
+    useTable,
+    useTableProvider,
+    SingleProvider,
+    useSingle,
+    CreateForm,
+    UpdateForm,
+    FilterForm,
+    useCreateForm,
+    useUpdateForm,
+    useFiltersForm,
+  }
+}

package/packages/env.ts

@@ -0,0 +1,8 @@
+function env(name: string) {
+    const value = process.env[name]
+    if ( ! value )
+        throw new Error(`Missing environment variable: ${name}`)
+    return value as string
+}
+
+export default env

package/packages/fields.tsx

@@ -0,0 +1,157 @@
+'use client'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Input, Text, Button, Image, HStack, Spinner } from '@chakra-ui/react'
+import { createContext } from 'react'
+import z from 'zod'
+
+type FieldsProps<T> = { defaults: T }
+
+function useFieldsProvider<T>(props: FieldsProps<T>) {
+
+    const [fields, setFields] = useState(props.defaults)
+
+    useEffect(() => {
+        setFields(props.defaults)
+    }, [])
+
+    const setField = useCallback(
+        <K extends keyof T>(name: K, value: T[K]) => {
+            setFields(prev => ({ ...prev, [name]: value }))
+        },
+        [setFields, fields]
+    )
+
+    return {
+        fields,
+        setField,
+        setFields,
+    }
+}
+
+export const Context = createContext<ReturnType<typeof useFieldsProvider<any>> | undefined>(undefined)
+
+export function FieldsProvider<T>({children, ...props}: FieldsProps<T> & {
+    children: React.ReactNode | ((value: ReturnType<typeof useFieldsProvider<T>>) => React.ReactNode)
+}) {
+
+    const value = useFieldsProvider<T>(props)
+
+    return (
+        <Context.Provider value={value}>
+            {typeof children === 'function' ? children(value) : children}
+        </Context.Provider>
+    )
+}
+
+export const useFields = <T,>() => {
+    const context = React.useContext(Context)
+    if (context === undefined) {
+        throw new Error('useFields must be used within a FieldsProvider')
+    }
+    return context as ReturnType<typeof useFieldsProvider<T>>
+}
+
+export const useField = <T,>(fieldName: keyof T) => {
+    const { fields, setField } = useFields<T>()
+    
+    return {
+        value: fields[fieldName],
+        setValue: setField
+    }
+}
+
+interface Field<T> {
+    type: string
+    View: (props: { type: z.ZodTypeAny, value: T }) => React.ReactElement
+    Edit: (props: { type: z.ZodTypeAny, value: T, setValue: (value: T) => void }) => React.ReactElement
+}
+
+const string: Field<string> = {
+    type: 'string',
+    View({ type, value }) {
+        return <Text>{value}</Text>
+    },
+    Edit({ type, value, setValue }) {
+        return <Input value={value} onChange={e => setValue(e.target.value)} />
+    }
+}
+
+const link: Field<string> = {
+    type: 'file',
+    View({ type, value }) {
+        return <Text>{value}</Text>
+    },
+    Edit({ type, value, setValue }) {
+        return (
+            <select value={value} onChange={e => setValue(e.target.value)}/>
+        )
+    }
+}
+
+const file: Field<string> = {
+    type: 'file',
+    View({ type, value }) {
+        if (!value) return <Text>-</Text>
+        return <Image src={value} alt='file' boxSize='64px' objectFit='cover' />
+    },
+    Edit({ type, value, setValue }) {
+        const inputRef = useRef<HTMLInputElement | null>(null)
+        const [loading, setLoading] = useState(false)
+
+        async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
+            const file = e.target.files?.[0]
+            if (!file) return
+            setLoading(true)
+            try {
+                const fd = new FormData()
+                fd.append('file', file)
+                const res = await fetch('/api/upload', {
+                    method: 'POST',
+                    body: fd,
+                })
+                const json = await res.json()
+                if (json.url) setValue(json.url)
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        return (
+            <HStack>
+                <input ref={inputRef} type='file' hidden onChange={handleFile} />
+                <Button onClick={() => inputRef.current?.click()}>{loading ? <Spinner size='xs'/> : 'Upload'}</Button>
+                {value ? <Image src={value} alt='preview' boxSize='64px' objectFit='cover' /> : null}
+            </HStack>
+        )
+    }
+}
+
+export function EditField<T, FieldName extends keyof T = keyof T, FieldType extends keyof typeof fields = keyof typeof fields>({attribute, field, type}: {attribute: FieldName, field: FieldType, type: z.ZodTypeAny}) {
+
+    const { value, setValue } = useField<T>(attribute)
+
+    const Edit = fields[field]['Edit']
+
+    return (
+        // @ts-expect-error
+        <Edit value={value} setValue={setValue} type={type} />
+    )
+}
+
+export function ViewField<T, FieldName extends keyof T, FieldType extends keyof typeof fields>({attribute, field, type}: {attribute: FieldName, field: FieldType, type: z.ZodTypeAny}) {
+
+    const { value } = useField<T>(attribute)
+
+    const View = fields[field]['View']
+
+    return (
+        // @ts-expect-error
+        <View value={value} type={type} />
+    )
+}
+
+export const fields = {
+    string,
+    link,
+    file: file,
+}

package/packages/firebase.ts

@@ -0,0 +1,13 @@
+import { initializeApp, cert, getApps } from 'firebase-admin/app'
+import { getFirestore, } from 'firebase-admin/firestore'
+
+const account = JSON.parse(process.env.SERVICE_ACCOUNT_JSON as string)
+
+const app = getApps()[0] ?? initializeApp({
+    credential: cert(account),
+    projectId: 'asasvirtuais',
+})
+
+const firestore = getFirestore(app, 'asasvirtuais')
+
+export { firestore }

package/packages/firestore.ts

@@ -0,0 +1,51 @@
+import { DatabaseInterface, TableInterface } from './crud'
+import z from 'zod'
+import { firestore } from './firebase'
+
+export function firestoreInterface<Schema extends DatabaseInterface, T extends keyof Schema & string>(defaultTable?: T): TableInterface<z.infer<Schema[T]['readable']>, z.infer<Schema[T]['writable']>> {
+  type Readable = z.infer<Schema[T]['readable']>
+  type Writable = z.infer<Schema[T]['writable']>
+  return {
+    async find({ table = defaultTable, id }) {
+      const docRef = firestore.collection(table as string).doc(id)
+      const docSnap = await docRef.get()
+      if (docSnap.exists) {
+        return { id: docSnap.id, ...docSnap.data() } as Readable
+      }
+      throw new Error(`Record not found in ${table} with id ${id}`)
+    },
+    async list({ table = defaultTable, query: q }) {
+      let queryRef: FirebaseFirestore.Query = firestore.collection(table as string)
+
+      if (q) {
+        for (const [key, value] of Object.entries(q)) {
+            queryRef = queryRef.where(key, '==', value)
+        }
+      }
+
+      const querySnapshot = await queryRef.get()
+      return querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() } as unknown as Readable))
+    },
+    async create({ table = defaultTable, data }) {
+      const docRef = await firestore.collection(table as string).add(data)
+      return { id: docRef.id, ...data } as Readable
+    },
+    async update({ table = defaultTable, id, data }) {
+      const docRef = firestore.collection(table as string).doc(id)
+      await docRef.update(data)
+      const updatedDoc = await docRef.get()
+      return { id: updatedDoc.id, ...updatedDoc.data() } as Readable
+    },
+    async remove({ table = defaultTable, id }) {
+      const docRef = firestore.collection(table as string).doc(id)
+      const docSnap = await docRef.get()
+      if (!docSnap.exists) {
+        throw new Error(`Record not found in ${table} with id ${id}`)
+      }
+      const data = { id: docSnap.id, ...docSnap.data() } as Readable
+      await docRef.delete()
+      console.log(`[FIRESTORE] Record removed from ${table} with id ${id}`);
+      return data
+    },
+  }
+}

package/packages/form.tsx

@@ -0,0 +1,66 @@
+'use client'
+import React, { createContext, useMemo } from 'react'
+import { useCallback, useState } from 'react'
+
+type Props<Fields, Result> = {
+  data: FormData | Fields
+  callback?: (fields: Fields) => Promise<Result>
+}
+
+export function useFormProvider<Fields, Result>(props: React.PropsWithChildren<Props<Fields, Result>>) {
+  const [result, setResult] = useState<Result | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  const values = useMemo(() => {
+    if (props.data instanceof FormData)
+      return Object.fromEntries(props.data.entries()) as Fields
+    else
+      return props.data
+  }, [props.data])
+
+  /** receives an event (optional) and processes the form submission using the fields state as props, stores the result or error in the respective states */
+  const submit = useCallback(
+    async (e?: any) => {
+      e?.preventDefault?.()
+      setLoading(true)
+      setError(null)
+      try {
+        if (props.callback && values)
+          await props.callback(values)
+          setResult(result)
+      } catch (err) {
+        console.error(err)
+        setError(err as Error)
+        throw err
+      } finally {
+        setLoading(false)
+      }
+      return false
+    },
+    [values, props.callback]
+  )
+
+  return {
+    loading,
+    result,
+    error,
+    submit,
+    values,
+  }
+}
+
+export const FormContext = createContext<ReturnType<typeof useFormProvider<any, any>> | undefined>(undefined)
+
+export function FormProvider<Fields, Result>({children, ...props}: Props<Fields, Result> & {
+  children: (props: ReturnType<typeof useFormProvider<Fields, Result>>) => React.ReactNode
+}) {
+  const context = useFormProvider<Fields, Result>(props)
+  return (
+    <FormContext.Provider value={context}>{children(context)}</FormContext.Provider>
+  )
+}
+
+export function useForm<Fields, Result>() {
+  return React.useContext(FormContext) as ReturnType<typeof useFormProvider<Fields, Result>>
+}