@saas-ui/forms 0.6.0-next.1 → 0.6.1

package/src/field-resolver.ts

@@ -7,18 +7,23 @@ export type FieldResolver = {
   getNestedFields(name: string): FieldProps[]
 }
 
-// @todo finalize this
-export type FormSchema = Record<string, any>
+interface SchemaField extends FieldProps {
+  items?: SchemaField[]
+  properties?: Record<string, SchemaField>
+}
+
+export type ObjectSchema = Record<string, SchemaField>
 
-const mapFields = (schema: FormSchema) =>
+const mapFields = (schema: ObjectSchema) =>
+  schema &&
   Object.entries(schema).map(([name, field]) => {
     return {
-      name,
       ...field,
+      name,
     }
   })
 
-export const defaultFieldResolver = (schema: FormSchema): FieldResolver => {
+export const objectFieldResolver = (schema: ObjectSchema): FieldResolver => {
   const getFields = () => {
     return mapFields(schema)
   }

package/src/fields.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 
+import { Form } from './form'
 import { FormLayout } from './layout'
 import { Field, FieldProps } from './field'
 
 import { ArrayField } from './array-field'
 import { ObjectField } from './object-field'
 import { FieldResolver } from './field-resolver'
-import { defaultFieldResolver } from './field-resolver'
 
 export interface FieldsProps {
   schema: any
@@ -29,7 +29,7 @@ export const Fields: React.FC<FieldsProps> = ({
   ...props
 }) => {
   const resolver = React.useMemo(
-    () => fieldResolver || defaultFieldResolver(schema),
+    () => fieldResolver || Form.getFieldResolver(schema),
     [schema, fieldResolver]
   )
 

package/src/form.tsx

@@ -10,7 +10,11 @@ import {
   FieldValues,
   SubmitHandler,
   SubmitErrorHandler,
+  UnpackNestedValue,
+  ResolverOptions,
+  ResolverResult,
 } from 'react-hook-form'
+import { objectFieldResolver, FieldResolver } from './field-resolver'
 
 export type { UseFormReturn, FieldValues, SubmitHandler }
 
@@ -77,6 +81,10 @@ export const Form = forwardRef(
       delayError,
     }
 
+    if (schema && !resolver) {
+      form.resolver = Form.getResolver?.(schema)
+    }
+
     const methods = useForm<TFieldValues>(form)
     const { handleSubmit } = methods
 
@@ -95,8 +103,23 @@ export const Form = forwardRef(
       </FormProvider>
     )
   }
-) as <TFieldValues extends FieldValues>(
+) as (<TFieldValues extends FieldValues>(
   props: FormProps<TFieldValues> & {
     ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
   }
-) => React.ReactElement
+) => React.ReactElement) & {
+  getResolver?: GetResolver
+  getFieldResolver: GetFieldResolver
+}
+
+Form.getFieldResolver = objectFieldResolver
+
+export type GetResolver = (
+  schema: any
+) => <TFieldValues extends FieldValues, TContext>(
+  values: UnpackNestedValue<TFieldValues>,
+  context: TContext | undefined,
+  options: ResolverOptions<TFieldValues>
+) => Promise<ResolverResult<TFieldValues>>
+
+export type GetFieldResolver = (schema: any) => FieldResolver

package/dist/yup/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../yup/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAA"}

package/dist/yup/src/yup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"yup.d.ts","sourceRoot":"","sources":["../../../yup/src/yup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,eAAe,EAAE,MAAM,KAAK,CAAA;AAG5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAmC5C;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,+BAA8B,UAAU,EA4BvE,CAAA;AAED,eAAO,MAAM,eAAe,kCAAmC,MAAM,QAEpE,CAAA;AAED,eAAO,MAAM,aAAa;;0BAKA,MAAM;CAI/B,CAAA;AAED,eAAO,MAAM,OAAO;;;;;8BANM,MAAM;;CAgB/B,CAAA"}

package/yup/index.ts

@@ -1 +0,0 @@
-export * from './src'

package/yup/src/index.ts

@@ -1 +0,0 @@
-export * from './yup'

package/yup/src/yup.ts

@@ -1,100 +0,0 @@
-import { reach, AnyObjectSchema } from 'yup'
-import { yupResolver } from '@hookform/resolvers/yup'
-
-import { FieldProps } from '../../src/field'
-
-// @TODO get proper typings for the schema fields
-
-const getType = (field: any) => {
-  if (field.spec.meta?.type) {
-    return field.spec.meta.type
-  }
-
-  switch (field.type) {
-    case 'array':
-      return 'array'
-    case 'object':
-      return 'object'
-    case 'number':
-      return 'number'
-    case 'date':
-      return 'date'
-    case 'string':
-    default:
-      return 'text'
-  }
-}
-
-type Options = {
-  min?: number
-  max?: number
-}
-
-const getArrayOption = (field: any, name: string) => {
-  for (const test of field.tests) {
-    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]
-  }
-}
-
-/**
- * A helper function to render forms automatically based on a Yup schema
- *
- * @param schema The Yup schema
- * @returns {FieldProps[]}
- */
-export const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {
-  const fields = []
-
-  let schemaFields: Record<string, any> = {}
-  if (schema.type === 'array') {
-    /* @ts-ignore this is actually valid */
-    schemaFields = schema.innerType.fields
-  } else {
-    schemaFields = schema.fields
-  }
-
-  for (const name in schemaFields) {
-    const field = schemaFields[name]
-
-    const options: Options = {}
-    if (field.type === 'array') {
-      options.min = getArrayOption(field, 'min')
-      options.max = getArrayOption(field, 'max')
-    }
-
-    fields.push({
-      name,
-      label: field.spec.label || name,
-      type: getType(field),
-      ...options,
-    })
-  }
-  return fields
-}
-
-export const getNestedSchema = (schema: AnyObjectSchema, path: string) => {
-  return reach(schema, path)
-}
-
-export const fieldResolver = (schema: AnyObjectSchema) => {
-  return {
-    getFields() {
-      return getFieldsFromSchema(schema)
-    },
-    getNestedFields(name: string) {
-      return getFieldsFromSchema(getNestedSchema(schema, name))
-    },
-  }
-}
-
-export const yupForm = (
-  schema: AnyObjectSchema,
-  schemaOptions = {},
-  resolverOptions = {}
-) => {
-  return {
-    schema,
-    resolver: yupResolver(schema, schemaOptions, resolverOptions),
-    fieldResolver: fieldResolver(schema),
-  }
-}

package/yup/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../../tsconfig.base.json",
-  "include": ["src/*"],
-  "compilerOptions": {
-    "outDir": "../dist",
-    "declarationDir": "../dist"
-  }
-}