work

atelier-saulx · Nov 7, 2024 · 65c639e · 65c639e
1 parent 33b8a71
commit 65c639e
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 29 deletions.
diff --git a/src/components/Form/BasedForm.stories.tsx b/src/components/Form/BasedForm.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { BasedForm } from './BasedForm'
 import { Form } from './Form'
+import { Button } from '../Button'
 
 export default {
   title: 'BasedForm (WIP)',
@@ -12,8 +13,13 @@ export default {
 
 export const Component = () => {
   return (
-    <BasedForm id="fi010b7d5c" onSubmit={console.log}>
-      <Form.Fields />
+    <BasedForm type="user" onSubmit={console.log}>
+      {({ submitForm }) => (
+        <>
+          <Form.Fields />
+          <Button onClick={submitForm}>Submit</Button>
+        </>
+      )}
     </BasedForm>
   )
 }
diff --git a/src/components/Form/BasedForm.tsx b/src/components/Form/BasedForm.tsx
@@ -10,11 +10,119 @@ import { useMemo } from 'react'
 import { Form, FormProps, type FormFields } from './Form.js'
 import { BasedQuery } from '@based/client'
 
-// TODO very much WIP
+const EXAMPLE_SCHEMA: BasedSchema = {
+  prefixToTypeMapping: {
+    us: 'user',
+    fi: 'file',
+  },
+  $defs: {},
+  language: 'en',
+  root: {
+    fields: {},
+    prefix: 'ro',
+  },
+  types: {
+    user: {
+      fields: {
+        ancestors: {
+          type: 'references',
+        },
+        id: {
+          type: 'string',
+          format: 'basedId',
+          index: 4,
+        },
+        descendants: {
+          type: 'references',
+        },
+        // type: {
+        //   type: 'type',
+        // },
+        email: {
+          type: 'string',
+          format: 'email',
+          title: 'Email',
+          index: 2,
+        },
+        password: {
+          type: 'string',
+          format: 'strongPassword',
+          title: 'Password',
+          index: 5,
+        },
+        createdAt: {
+          type: 'timestamp',
+        },
+        name: {
+          type: 'string',
+          title: 'Name',
+          index: 1,
+        },
+        parents: {
+          type: 'references',
+        },
+        status: {
+          type: 'string',
+          title: 'Status',
+          index: 3,
+        },
+        updatedAt: {
+          type: 'timestamp',
+        },
+        children: {
+          type: 'references',
+        },
+        aliases: {
+          type: 'set',
+          items: {
+            type: 'string',
+          },
+        },
+        foo: {
+          type: 'object',
+          properties: {
+            bar1: { type: 'string' },
+            bar2: { type: 'number' },
+            bar3: {
+              type: 'object',
+              properties: {
+                bar31: { type: 'string' },
+                bar32: { type: 'number' },
+                bar33: {
+                  type: 'object',
+                  properties: {
+                    bar331: { type: 'string' },
+                    bar332: { type: 'number' },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      prefix: 'us',
+    },
+  },
+}
 
+const COMMON_FIELDS = [
+  'id',
+  'parents',
+  'descendants',
+  'aliases',
+  'ancestors',
+  'children',
+  'type',
+  'updatedAt',
+  'createdAt',
+]
+
+// TODO special handling for root!
 function getFormFieldsFromType(type: string, schema: BasedSchema) {
   const fields: FormFields = {}
+
   for (const [key, field] of Object.entries(schema.types[type].fields)) {
+    if (COMMON_FIELDS.includes(key)) continue
     const label = key.charAt(0).toUpperCase() + key.slice(1)
     let type
 
@@ -46,26 +154,28 @@ function getFormFieldsFromType(type: string, schema: BasedSchema) {
 }
 
 type BasedFormProps = {
-  id: string
+  id?: string
+  type?: string
 } & Omit<FormProps, 'fields' | 'initialValues' | 'groups'>
 
-function BasedForm({ id, ...formProps }: BasedFormProps) {
+function BasedForm({ id, type, ...formProps }: BasedFormProps) {
+  if (!id && !type) throw new Error('BasedForm: must define id or type')
   const { data: schemaData } = useQuery('db:schema')
-  const schema = useMemo(() => {
-    if (!schemaData) return
-
-    return convertOldToNew(schemaData)
-  }, [schemaData])
-  const { data } = useQuery(schema ? 'db' : null, { $id: id, $all: true })
+  const schema = useMemo(() => schemaData && EXAMPLE_SCHEMA, [schemaData])
+  const { data } = useQuery(id ? 'db' : null, { $id: id, $all: true })
 
   if (!schema) return null
 
-  const type =
-    id === 'root' ? id : schema.prefixToTypeMapping[id.substring(0, 2)]
-
+  type ??= schema.prefixToTypeMapping[id.substring(0, 2)]
   const fields = getFormFieldsFromType(type, schema)
 
-  return <Form fields={fields} initialValues={data} {...formProps} />
+  return (
+    <Form
+      fields={fields}
+      initialValues={id ? data : undefined}
+      {...formProps}
+    />
+  )
 }
 
 export type { BasedFormProps }

diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -59,8 +59,8 @@ export const Component = () => {
         },
         switch: { type: 'switch', label: 'Switch' },
         checkbox: { type: 'checkbox', label: 'Checkbox' },
-        date: { type: 'datetime', label: 'Date', variant: 'date' },
-        datetime: { type: 'datetime', label: 'DateTime', variant: 'date-time' },
+        date: { type: 'datetime', label: 'Date' },
+        datetime: { type: 'datetime', label: 'DateTime' },
       }}
       validate={(values) => {
         const errors: FormErrors = {}

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -25,19 +25,20 @@ type SelectFormField = {
   type: 'select'
 } & Pick<SelectInputProps, 'options' | 'filterable'>
 type RichTextFormField = { type: 'richtext' }
+type FormField = (
+  | TextFormField
+  | TextAreaFormField
+  | NumberFormField
+  | SwitchFormField
+  | CheckboxFormField
+  | DateFormField
+  | DateTimeFormField
+  | SelectFormField
+  | RichTextFormField
+) &
+  Pick<FormFieldProps, 'label' | 'description' | 'note'>
 type FormFields = {
-  [key: string]: (
-    | TextFormField
-    | TextAreaFormField
-    | NumberFormField
-    | SwitchFormField
-    | CheckboxFormField
-    | DateFormField
-    | DateTimeFormField
-    | SelectFormField
-    | RichTextFormField
-  ) &
-    Pick<FormFieldProps, 'label' | 'description' | 'note'>
+  [key: string]: FormField
 }
 
 type FormProps = {