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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "0.5.3",
+  "version": "0.6.0-next.2",
   "description": "Theme and components agnostic SaasProvider",
   "source": "src/index.ts",
   "exports": {
@@ -8,12 +8,12 @@
       "require": "./dist/index.js",
       "default": "./dist/index.modern.js"
     },
-    "./resolvers/yup": {
-      "require": "./dist/resolvers/yup.js",
-      "default": "./dist/resolvers/yup.modern.js"
-    },
     "./src": {
       "default": "./src/index.ts"
+    },
+    "./yup": {
+      "require": "./dist/yup/index.js",
+      "default": "./dist/yup/index.modern.js"
     }
   },
   "main": "./dist/index.js",
@@ -21,14 +21,18 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf --no-glob ./dist",
-    "build": "yarn clean && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,modern --compress",
+    "build": "yarn build:package && yarn build:yup",
+    "build:package": "yarn clean && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,modern --compress",
+    "build:yup": "cross-env NODE_ENV=production microbundle --cwd yup --tsconfig ./yup/tsconfig.json -f cjs,modern --compress",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit"
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "yup/package.json",
+    "yup/src"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -66,20 +70,19 @@
     "@chakra-ui/react-utils": "^1.2.1",
     "@chakra-ui/utils": "^1.10.4",
     "@hookform/resolvers": "^2.8.3",
-    "@saas-ui/button": "0.3.0",
-    "@saas-ui/input-right-button": "0.3.0",
+    "@saas-ui/button": "0.4.0-next.0",
+    "@saas-ui/input-right-button": "0.3.1-next.0",
     "@saas-ui/number-input": "0.3.0",
-    "@saas-ui/password-input": "0.3.0",
+    "@saas-ui/password-input": "0.3.1-next.0",
     "@saas-ui/pin-input": "0.3.0",
     "@saas-ui/radio": "0.3.0",
     "@saas-ui/react-utils": "0.1.0",
-    "@saas-ui/select": "0.3.0",
+    "@saas-ui/select": "0.4.0-next.0",
     "react-hook-form": "^7.22.0"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=1.8.0",
     "@chakra-ui/system": ">=1.0.0",
-    "react": ">=16.8.6",
-    "yup": "^0.32.11"
+    "react": ">=16.8.6"
   }
 }

package/src/auto-form.tsx

@@ -3,14 +3,15 @@ import { FieldValues, UseFormReturn } from 'react-hook-form'
 import { forwardRef } from '@chakra-ui/react'
 
 import { Form, FormProps } from './form'
-
 import { FormLayout } from './layout'
 import { Fields } from './fields'
 import { SubmitButton } from './submit-button'
+import { FieldResolver } from '.'
 
 interface AutoFormOptions {
-  schema: any
   submitLabel?: false | string
+  schema: any
+  fieldResolver?: any
 }
 
 export interface AutoFormProps<TFieldValues extends FieldValues>
@@ -22,18 +23,19 @@ export const AutoForm = forwardRef(
     props: AutoFormProps<TFieldValues>,
     ref: React.ForwardedRef<UseFormReturn<TFieldValues>>
   ) => {
-    const { schema, submitLabel = 'Submit', ...rest } = props
+    const { schema, submitLabel = 'Submit', fieldResolver, ...rest } = props
+
     return (
       <Form {...rest} schema={schema} ref={ref}>
         <FormLayout>
-          {<Fields schema={schema} />}
+          {<Fields schema={schema} fieldResolver={fieldResolver} />}
           {submitLabel && <SubmitButton label={submitLabel} />}
         </FormLayout>
       </Form>
     )
   }
-) as <TFieldValues extends FieldValues>(
+) as (<TFieldValues extends FieldValues>(
   props: AutoFormProps<TFieldValues> & {
     ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
   }
-) => React.ReactElement
+) => React.ReactElement) & { getFieldResolver?: (schema: any) => FieldResolver }

package/src/field-resolver.ts

@@ -0,0 +1,39 @@
+import { FieldProps } from './field'
+
+import { get } from '@chakra-ui/utils'
+
+export type FieldResolver = {
+  getFields(): FieldProps[]
+  getNestedFields(name: string): FieldProps[]
+}
+
+// @todo finalize this
+export type FormSchema = Record<string, any>
+
+const mapFields = (schema: FormSchema) =>
+  Object.entries(schema).map(([name, field]) => {
+    return {
+      name,
+      ...field,
+    }
+  })
+
+export const defaultFieldResolver = (schema: FormSchema): FieldResolver => {
+  const getFields = () => {
+    return mapFields(schema)
+  }
+  const getNestedFields = (name: string) => {
+    const field = get(schema, name)
+
+    if (!field) return []
+
+    if (field.items?.type === 'object') {
+      return mapFields(field.items.properties)
+    } else if (field.type === 'object') {
+      return mapFields(field.properties)
+    }
+    return [field.items]
+  }
+
+  return { getFields, getNestedFields }
+}

package/src/fields.tsx

@@ -1,51 +1,66 @@
 import * as React from 'react'
-import { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'
 
+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'
 
 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 || Form.getFieldResolver(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

@@ -10,11 +10,13 @@ import {
   FieldValues,
   SubmitHandler,
   SubmitErrorHandler,
+  UnpackNestedValue,
+  ResolverOptions,
+  ResolverResult,
 } from 'react-hook-form'
+import { defaultFieldResolver, FieldResolver } from './field-resolver'
 
-import { yupResolver } from './resolvers/yup'
-
-export type { UseFormReturn, FieldValues }
+export type { UseFormReturn, FieldValues, SubmitHandler }
 
 interface FormOptions<TFieldValues extends FieldValues = FieldValues> {
   /**
@@ -35,15 +37,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,9 +81,8 @@ export const Form = forwardRef(
       delayError,
     }
 
-    // @todo remove yup dependency and just use resolver prop?
-    if (schema) {
-      form.resolver = yupResolver(schema)
+    if (schema && !resolver) {
+      form.resolver = Form.getResolver?.(schema)
     }
 
     const methods = useForm<TFieldValues>(form)
@@ -102,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 = defaultFieldResolver
+
+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/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,24 @@
+{
+  "name": "yup",
+  "description": "Saas UI Forms field resolver: yup",
+  "version": "1.0.0",
+  "private": true,
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "require": "./../dist/yup/index.js",
+      "types": "./../dist/yup/src/index.d.ts",
+      "default": "./../dist/yup/index.modern.js"
+    }
+  },
+  "main": "../dist/yup/index.js",
+  "module": "../dist/yup/index.modern.js",
+  "types": "../dist/yup/src/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)
-}