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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "0.5.2",
+  "version": "0.6.0-next.1",
   "description": "Theme and components agnostic SaasProvider",
   "source": "src/index.ts",
   "exports": {
@@ -8,10 +8,6 @@
       "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"
     }
@@ -21,14 +17,17 @@
   "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"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -66,20 +65,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,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,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/index.ts

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

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/yup/src/index.ts

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

package/{src/resolvers → yup/src}/yup.ts

@@ -1,7 +1,7 @@
-import { SchemaOf, AnySchema, reach } from 'yup'
-export { yupResolver } from '@hookform/resolvers/yup'
+import { reach, AnyObjectSchema } from 'yup'
+import { yupResolver } from '@hookform/resolvers/yup'
 
-import { FieldProps } from '../field'
+import { FieldProps } from '../../src/field'
 
 // @TODO get proper typings for the schema fields
 
@@ -42,9 +42,7 @@ const getArrayOption = (field: any, name: string) => {
  * @param schema The Yup schema
  * @returns {FieldProps[]}
  */
-export const getFieldsFromSchema = (
-  schema: SchemaOf<AnySchema>
-): FieldProps[] => {
+export const getFieldsFromSchema = (schema: AnyObjectSchema): FieldProps[] => {
   const fields = []
 
   let schemaFields: Record<string, any> = {}
@@ -74,6 +72,29 @@ export const getFieldsFromSchema = (
   return fields
 }
 
-export const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {
+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

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

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