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

package/dist/step-form.d.ts

@@ -3,7 +3,7 @@ import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { HTMLChakraProps } from '@chakra-ui/system';
 import { StepperStepsProps } from '@saas-ui/stepper';
 import { ButtonProps } from '@saas-ui/button';
-import { FormProps } from '.';
+import { FormProps } from './form';
 import { UseStepFormProps } from './use-step-form';
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues> extends UseStepFormProps<TFieldValues>, FormProps<TFieldValues> {
 }
@@ -19,6 +19,10 @@ export interface FormStepOptions {
      * Schema
      */
     schema?: any;
+    /**
+     * Hook Form Resolver
+     */
+    resolver?: any;
 }
 export declare const FormStepper: React.FC<StepperStepsProps>;
 export interface FormStepProps extends FormStepOptions, HTMLChakraProps<'div'> {

package/dist/step-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step-form.d.ts","sourceRoot":"","sources":["../src/step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAEL,eAAe,EAGhB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAGL,iBAAiB,EAGlB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EAAQ,SAAS,EAAgB,MAAM,GAAG,CAAA;AAEjD,OAAO,EAIL,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,gBAAgB,CAAC,YAAY,CAAC,EACpC,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,eAAO,MAAM,QAAQ;;MA2BhB,MAAM,YAAY,CAAA;AAEvB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BnD,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,eAAe,CAAC,KAAK,CAAC;CAAG;AAE7B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAW5C,CAAA;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAY5C,CAAA;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAA"}
+{"version":3,"file":"step-form.d.ts","sourceRoot":"","sources":["../src/step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAEL,eAAe,EAGhB,MAAM,mBAAmB,CAAA;AAI1B,OAAO,EAGL,iBAAiB,EAGlB,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAErD,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGxC,OAAO,EAIL,gBAAgB,EACjB,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CAC3E,SAAQ,gBAAgB,CAAC,YAAY,CAAC,EACpC,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,eAAO,MAAM,QAAQ;;MA2BhB,MAAM,YAAY,CAAA;AAEvB,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAA;CACf;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4BnD,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,eAAe,CAAC,KAAK,CAAC;CAAG;AAE7B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAW5C,CAAA;AAMD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAY5C,CAAA;AAMD,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAYhD,CAAA"}

package/dist/use-array-field.d.ts

@@ -52,7 +52,7 @@ export interface ArrayFieldOptions {
      */
     defaultValue?: Record<string, any>;
     /**
-     * Default key name for rows, change this if your data uses 'id'
+     * Default key name for rows, change this if your data uses a different 'id' field
      * @default "id"
      */
     keyName?: string;

package/dist/use-step-form.d.ts

@@ -4,6 +4,7 @@ import { UseStepperProps, UseStepperReturn } from '@saas-ui/stepper';
 export interface StepState {
     name: string;
     schema?: any;
+    resolver?: any;
     isActive?: boolean;
     isCompleted?: boolean;
 }
@@ -31,6 +32,7 @@ export declare function useStepForm<TFieldValues extends FieldValues = FieldValu
     getFormProps: (props: any) => {
         onSubmit: SubmitHandler<TFieldValues>;
         schema: any;
+        resolver: any;
     };
     updateStep: (step: any) => void;
     steps: {};
@@ -39,6 +41,7 @@ export declare type UseStepFormReturn = ReturnType<typeof useStepForm>;
 export interface UseFormStepProps {
     name: string;
     schema?: any;
+    resolver?: any;
 }
 export declare function useFormStep(props: UseFormStepProps): StepState;
 //# sourceMappingURL=use-step-form.d.ts.map

package/dist/use-step-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-step-form.d.ts","sourceRoot":"","sources":["../src/use-step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAGL,eAAe,EACf,gBAAgB,EACjB,MAAM,kBAAkB,CAAA;AAEzB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;CACjC;AAED,eAAO,MAAO,gBAAgB,mCAAE,kBAAkB,uBAK9C,CAAA;AAEJ,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,WAAW,gBAAgB,CAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,eAAe,EACrB,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,wBAAgB,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EACxE,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;EAyDtC;AAED,oBAAY,iBAAiB,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAA;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;CACb;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAc9D"}
+{"version":3,"file":"use-step-form.d.ts","sourceRoot":"","sources":["../src/use-step-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE5D,OAAO,EAGL,eAAe,EACf,gBAAgB,EACjB,MAAM,kBAAkB,CAAA;AAEzB,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD,UAAU,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IAClC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;CACjC;AAED,eAAO,MAAO,gBAAgB,mCAAE,kBAAkB,uBAK9C,CAAA;AAEJ,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,WAAW,gBAAgB,CAC/B,YAAY,SAAS,WAAW,GAAG,WAAW,CAC9C,SAAQ,eAAe,EACrB,SAAS,CAAC,YAAY,CAAC;CAAG;AAE9B,wBAAgB,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,EACxE,KAAK,EAAE,gBAAgB,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;EA0DtC;AAED,oBAAY,iBAAiB,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAA;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAA;CACf;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAc9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "0.5.0",
+  "version": "0.6.0-next.0",
   "description": "Theme and components agnostic SaasProvider",
   "source": "src/index.ts",
   "exports": {
@@ -8,12 +8,15 @@
       "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": "./yup/dist/index.js",
+      "default": "./yup/dist/index.modern.js"
+    },
+    "./yup/src": {
+      "default": "./yup/src/index.ts"
     }
   },
   "main": "./dist/index.js",
@@ -21,14 +24,19 @@
   "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",
+    "yup/dist"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -64,21 +72,21 @@
   "dependencies": {
     "@chakra-ui/icons": "^1.1.1",
     "@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/array-field.tsx

@@ -20,6 +20,7 @@ import {
   useArrayFieldRowContext,
   useArrayFieldRemoveButton,
   useArrayFieldAddButton,
+  UseArrayFieldReturn,
 } from './use-array-field'
 
 interface ArrayField {
@@ -137,26 +138,28 @@ export interface ArrayFieldProps
   extends ArrayFieldOptions,
     Omit<FieldProps, 'defaultValue'> {}
 
-export const ArrayField: React.FC<ArrayFieldProps> = (props) => {
-  const { children, ...containerProps } = props
-
-  return (
-    <ArrayFieldContainer {...containerProps}>
-      <ArrayFieldRows>
-        {(fields: ArrayField[]) => (
-          <>
-            {fields.map(({ id }, index: number) => (
-              <ArrayFieldRow key={id} index={index}>
-                {children}
-              </ArrayFieldRow>
-            ))}
-          </>
-        )}
-      </ArrayFieldRows>
-      <ArrayFieldAddButton />
-    </ArrayFieldContainer>
-  )
-}
+export const ArrayField = React.forwardRef(
+  (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {
+    const { children, ...containerProps } = props
+
+    return (
+      <ArrayFieldContainer ref={ref} {...containerProps}>
+        <ArrayFieldRows>
+          {(fields: ArrayField[]) => (
+            <>
+              {fields.map(({ id }, index: number) => (
+                <ArrayFieldRow key={id} index={index}>
+                  {children}
+                </ArrayFieldRow>
+              ))}
+            </>
+          )}
+        </ArrayFieldRows>
+        <ArrayFieldAddButton />
+      </ArrayFieldContainer>
+    )
+  }
+)
 
 export interface ArrayFieldRowsProps {
   children: (fields: ArrayField[]) => React.ReactElement | null
@@ -169,28 +172,36 @@ export const ArrayFieldRows = ({
   return children(fields)
 }
 
-export const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({
-  name,
-  defaultValue,
-  keyName,
-  min,
-  max,
-  children,
-  ...fieldProps
-}) => {
-  const context = useArrayField({
-    name,
-    defaultValue,
-    keyName,
-    min,
-    max,
-  })
-
-  return (
-    <ArrayFieldProvider value={context}>
-      <BaseField name={name} {...fieldProps}>
-        {children}
-      </BaseField>
-    </ArrayFieldProvider>
-  )
-}
+export const ArrayFieldContainer = React.forwardRef(
+  (
+    {
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max,
+      children,
+      ...fieldProps
+    }: ArrayFieldProps,
+    ref: React.ForwardedRef<UseArrayFieldReturn>
+  ) => {
+    const context = useArrayField({
+      name,
+      defaultValue,
+      keyName,
+      min,
+      max,
+    })
+
+    // This exposes the useArrayField api through the forwarded ref
+    React.useImperativeHandle(ref, () => context, [ref, context])
+
+    return (
+      <ArrayFieldProvider value={context}>
+        <BaseField name={name} {...fieldProps}>
+          {children}
+        </BaseField>
+      </ArrayFieldProvider>
+    )
+  }
+)

package/src/auto-form.tsx

@@ -3,14 +3,14 @@ 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'
 
 interface AutoFormOptions {
-  schema: any
   submitLabel?: false | string
+  schema: any
+  fieldResolver?: any
 }
 
 export interface AutoFormProps<TFieldValues extends FieldValues>
@@ -22,11 +22,12 @@ 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}>
+      <Form {...rest} ref={ref}>
         <FormLayout>
-          {<Fields schema={schema} />}
+          {<Fields schema={schema} fieldResolver={fieldResolver} />}
           {submitLabel && <SubmitButton label={submitLabel} />}
         </FormLayout>
       </Form>

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/field.tsx

@@ -29,6 +29,7 @@ import { PasswordInput } from '@saas-ui/password-input'
 import { RadioInput } from '@saas-ui/radio'
 import { PinInput } from '@saas-ui/pin-input'
 import { Select, NativeSelect } from '@saas-ui/select'
+import { FocusableElement } from '@chakra-ui/utils'
 
 export interface Option {
   value: string
@@ -158,7 +159,7 @@ export const Field = forwardRef(
     props: FieldProps<TFieldValues> & {
       [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.
     },
-    ref: React.ForwardedRef<typeof FormControl>
+    ref: React.ForwardedRef<FocusableElement>
   ) => {
     const { type = defaultInputType } = props
     const InputComponent = getInput(type)
@@ -169,7 +170,7 @@ export const Field = forwardRef(
   props: FieldProps<TFieldValues> & {
     [key: string]: unknown
   } & {
-    ref?: React.ForwardedRef<typeof FormControl>
+    ref?: React.ForwardedRef<FocusableElement>
   }
 ) => React.ReactElement
 

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 }
+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,15 +77,10 @@ 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
 
-    // This exposes the useForm api through the forwareded ref
+    // This exposes the useForm api through the forwarded ref
     React.useImperativeHandle(ref, () => methods, [ref, methods])
 
     return (

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

@@ -20,7 +20,8 @@ import {
 } from '@saas-ui/stepper'
 import { Button, ButtonProps } from '@saas-ui/button'
 
-import { Form, FormProps, SubmitButton } from '.'
+import { Form, FormProps } from './form'
+import { SubmitButton } from './submit-button'
 
 import {
   useStepForm,
@@ -71,6 +72,10 @@ export interface FormStepOptions {
    * Schema
    */
   schema?: any
+  /**
+   * Hook Form Resolver
+   */
+  resolver?: any
 }
 
 export const FormStepper: React.FC<StepperStepsProps> = (props) => {
@@ -108,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-array-field.tsx

@@ -69,7 +69,7 @@ export interface ArrayFieldOptions {
    */
   defaultValue?: Record<string, any>
   /**
-   * Default key name for rows, change this if your data uses 'id'
+   * Default key name for rows, change this if your data uses a different 'id' field
    * @default "id"
    */
   keyName?: string

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,20 +101,21 @@ 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 {
     ...step,
-    ...(steps[name] || {}),
+    ...(steps[name] || { name, schema }),
   }
 }

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"}