@saas-ui/forms 0.5.3 → 0.6.0-next.0

package/src/fields.tsx

@@ -1,51 +1,66 @@
 import * as React from 'react'
-import { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'
 
 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
+  fieldResolver?: FieldResolver
 }
 
-const getNestedFields = (schema: any, name: string) => {
-  return getFieldsFromSchema(getNestedSchema(schema, name)).map(
-    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (
-      <Field key={name} name={name} type={type} {...nestedFieldProps} />
+const mapNestedFields = (resolver: FieldResolver, name: string) => {
+  return resolver
+    .getNestedFields(name)
+    ?.map(
+      ({ name, type, ...nestedFieldProps }: FieldProps, i): React.ReactNode => (
+        <Field key={name || i} name={name} type={type} {...nestedFieldProps} />
+      )
     )
-  )
 }
 
-export const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {
+export const Fields: React.FC<FieldsProps> = ({
+  schema,
+  fieldResolver,
+  ...props
+}) => {
+  const resolver = React.useMemo(
+    () => fieldResolver || defaultFieldResolver(schema),
+    [schema, fieldResolver]
+  )
+
   return (
     <FormLayout {...props}>
-      {getFieldsFromSchema(schema).map(
-        ({
-          name,
-          type,
-          defaultValue,
-          ...fieldProps
-        }: FieldProps): React.ReactNode => {
-          if (type === 'array') {
-            return (
-              <ArrayField name={name} {...fieldProps}>
-                {getNestedFields(schema, name)}
-              </ArrayField>
-            )
-          } else if (type === 'object') {
-            return (
-              <ObjectField name={name} {...fieldProps}>
-                {getNestedFields(schema, name)}
-              </ObjectField>
-            )
-          }
+      {resolver
+        .getFields()
+        .map(
+          ({
+            name,
+            type,
+            defaultValue,
+            ...fieldProps
+          }: FieldProps): React.ReactNode => {
+            if (type === 'array') {
+              return (
+                <ArrayField key={name} name={name} {...fieldProps}>
+                  {mapNestedFields(resolver, name)}
+                </ArrayField>
+              )
+            } else if (type === 'object') {
+              return (
+                <ObjectField key={name} name={name} {...fieldProps}>
+                  {mapNestedFields(resolver, name)}
+                </ObjectField>
+              )
+            }
 
-          return <Field key={name} name={name} type={type} {...fieldProps} />
-        }
-      )}
+            return <Field key={name} name={name} type={type} {...fieldProps} />
+          }
+        )}
     </FormLayout>
   )
 }

package/src/form.tsx

@@ -12,9 +12,7 @@ import {
   SubmitErrorHandler,
 } from 'react-hook-form'
 
-import { yupResolver } from './resolvers/yup'
-
-export type { UseFormReturn, FieldValues }
+export type { UseFormReturn, FieldValues, SubmitHandler }
 
 interface FormOptions<TFieldValues extends FieldValues = FieldValues> {
   /**
@@ -35,15 +33,15 @@ interface FormOptions<TFieldValues extends FieldValues = FieldValues> {
   formRef?: React.MutableRefObject<HTMLFormElement>
 }
 
+/**
+ * @todo Figure out how to pass down FieldValues to all Field components,
+ * if at all possible.
+ */
 export interface FormProps<TFieldValues extends FieldValues = FieldValues>
   extends UseFormProps<TFieldValues>,
     Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,
     FormOptions<TFieldValues> {}
 
-/**
- * @todo Figure out how to pass down FieldValues to all Field components,
- * if at all possible.
- */
 export const Form = forwardRef(
   <TFieldValues extends FieldValues = FieldValues>(
     props: FormProps<TFieldValues>,
@@ -79,11 +77,6 @@ export const Form = forwardRef(
       delayError,
     }
 
-    // @todo remove yup dependency and just use resolver prop?
-    if (schema) {
-      form.resolver = yupResolver(schema)
-    }
-
     const methods = useForm<TFieldValues>(form)
     const { handleSubmit } = methods
 

package/src/index.ts

@@ -11,7 +11,7 @@ export * from './object-field'
 export * from './display-if'
 export * from './step-form'
 export * from './use-step-form'
-
+export * from './field-resolver'
 export * from '@saas-ui/input-right-button'
 
 export type { FieldErrors } from 'react-hook-form'

package/src/step-form.tsx

@@ -72,6 +72,10 @@ export interface FormStepOptions {
    * Schema
    */
   schema?: any
+  /**
+   * Hook Form Resolver
+   */
+  resolver?: any
 }
 
 export const FormStepper: React.FC<StepperStepsProps> = (props) => {
@@ -109,8 +113,8 @@ export interface FormStepProps
     HTMLChakraProps<'div'> {}
 
 export const FormStep: React.FC<FormStepProps> = (props) => {
-  const { name, schema, children, className, ...rest } = props
-  const step = useFormStep({ name, schema })
+  const { name, schema, resolver, children, className, ...rest } = props
+  const step = useFormStep({ name, schema, resolver })
 
   const { isActive } = step
 

package/src/use-step-form.tsx

@@ -11,6 +11,7 @@ import {
 export interface StepState {
   name: string
   schema?: any
+  resolver?: any
   isActive?: boolean
   isCompleted?: boolean
 }
@@ -69,6 +70,7 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
       return {
         onSubmit: onSubmitStep,
         schema: step?.schema,
+        resolver: step?.resolver,
       }
     },
     [steps, onSubmitStep, activeStep]
@@ -99,16 +101,17 @@ export type UseStepFormReturn = ReturnType<typeof useStepForm>
 export interface UseFormStepProps {
   name: string
   schema?: any
+  resolver?: any
 }
 
 export function useFormStep(props: UseFormStepProps): StepState {
-  const { name, schema } = props
+  const { name, schema, resolver } = props
   const step = useStep({ name })
 
   const { steps, updateStep } = useStepFormContext()
 
   React.useEffect(() => {
-    updateStep({ name, schema })
+    updateStep({ name, schema, resolver })
   }, [name, schema])
 
   return {

package/yup/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "yup",
+  "description": "Saas UI Forms field resolver: yup",
+  "version": "1.0.0",
+  "private": true,
+  "source": "src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.modern.js",
+  "types": "./dist/index.d.ts",
+  "author": "Eelco Wiersma <eelco@appulse.nl>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@hookform/resolvers": "^2.8.3",
+    "react-hook-form": "^7.22.0",
+    "yup": "^0.32.11"
+  }
+}

package/dist/resolvers/yup.d.ts

@@ -1,12 +0,0 @@
-import { SchemaOf, AnySchema } from 'yup';
-export { yupResolver } from '@hookform/resolvers/yup';
-import { FieldProps } from '../field';
-/**
- * A helper function to render forms automatically based on a Yup schema
- *
- * @param schema The Yup schema
- * @returns {FieldProps[]}
- */
-export declare const getFieldsFromSchema: (schema: SchemaOf<AnySchema>) => FieldProps[];
-export declare const getNestedSchema: (schema: SchemaOf<AnySchema>, path: string) => any;
-//# sourceMappingURL=yup.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"yup.d.ts","sourceRoot":"","sources":["../../src/resolvers/yup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAS,MAAM,KAAK,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAmCrC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,WACtB,SAAS,SAAS,CAAC,KAC1B,UAAU,EA4BZ,CAAA;AAED,eAAO,MAAM,eAAe,WAAY,SAAS,SAAS,CAAC,QAAQ,MAAM,QAExE,CAAA"}

package/src/resolvers/yup.ts

@@ -1,79 +0,0 @@
-import { SchemaOf, AnySchema, reach } from 'yup'
-export { yupResolver } from '@hookform/resolvers/yup'
-
-import { FieldProps } from '../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: SchemaOf<AnySchema>
-): 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: SchemaOf<AnySchema>, path: string) => {
-  return reach(schema, path)
-}