@saas-ui/forms 2.0.0-next.2 → 2.0.0-next.20

package/src/types.ts

@@ -0,0 +1,149 @@
+import { FormControlProps } from '@chakra-ui/react'
+import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { FieldPath, FieldValues, RegisterOptions } from 'react-hook-form'
+import { DefaultFields } from './default-fields'
+import { FormProps, FormRenderContext } from './form'
+import { SubmitButtonProps } from './submit-button'
+
+export type FieldOption = { label?: string; value: string }
+export type FieldOptions<TOption extends FieldOption = FieldOption> =
+  | Array<string>
+  | Array<TOption>
+
+export type ValueOf<T> = T[keyof T]
+export type ShallowMerge<A, B> = Omit<A, keyof B> & B
+
+type Split<S extends string, D extends string> = string extends S
+  ? string[]
+  : S extends ''
+  ? []
+  : S extends `${infer T}${D}${infer U}`
+  ? [T, ...Split<U, D>]
+  : [S]
+
+type MapPath<T extends string[]> = T extends [infer U, ...infer R]
+  ? U extends string
+    ? `${U extends `${number}` ? '$' : U}${R[0] extends string
+        ? '.'
+        : ''}${R extends string[] ? MapPath<R> : ''}`
+    : ''
+  : ''
+
+type TransformPath<T extends string> = MapPath<Split<T, '.'>>
+
+export type ArrayFieldPath<Name extends string> = Name extends string
+  ? TransformPath<Name>
+  : never
+
+export interface BaseFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> extends Omit<FormControlProps, 'label' | 'type'> {
+  /**
+   * The field name
+   */
+  name: TName | ArrayFieldPath<TName>
+  /**
+   * The field label
+   */
+  label?: string
+  /**
+   * Hide the field label
+   */
+  hideLabel?: boolean
+  /**
+   * Field help text
+   */
+  help?: string
+  /**
+   * React hook form rules
+   */
+  rules?: Omit<
+    RegisterOptions<TFieldValues, TName>,
+    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
+  >
+  /**
+   * Build-in types:
+   * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
+   *
+   * Will default to a text field if there is no matching type.
+   */
+  type?: string
+  /**
+   * The input placeholder
+   */
+  placeholder?: string
+}
+
+type FieldPathWithArray<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = TName | ArrayFieldPath<TName>
+
+type MergeFieldProps<
+  FieldDefs,
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = ValueOf<{
+  [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props>
+    ? { type?: K } & ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>>
+    : never
+}>
+
+export type FieldProps<TFieldValues extends FieldValues = FieldValues> =
+  MergeFieldProps<DefaultFields, TFieldValues>
+
+export type FormChildren<
+  FieldDefs,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object
+> = MaybeRenderProp<
+  FormRenderContext<
+    TFieldValues,
+    TContext,
+    MergeFieldProps<
+      FieldDefs extends never
+        ? DefaultFields
+        : ShallowMerge<DefaultFields, FieldDefs>,
+      TFieldValues
+    >
+  >
+>
+
+export type DefaultFieldOverrides = {
+  submit?: SubmitButtonProps
+  [key: string]: any
+}
+
+export type FieldOverrides<
+  FieldDefs,
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  [K in FieldPathWithArray<TFieldValues, TName>]?: Omit<
+    MergeFieldProps<
+      FieldDefs extends never
+        ? DefaultFields
+        : ShallowMerge<DefaultFields, FieldDefs>,
+      TFieldValues
+    >,
+    'name'
+  >
+}
+
+export type WithFields<
+  TFormProps extends FormProps<any, any, any, any>,
+  FieldDefs,
+  ExtraOverrides = object
+> = TFormProps extends FormProps<
+  infer TSchema,
+  infer TFieldValues,
+  infer TContext
+>
+  ? Omit<TFormProps, 'children' | 'fields'> & {
+      children?: FormChildren<FieldDefs, TFieldValues, TContext>
+      fields?: FieldOverrides<FieldDefs, TFieldValues> & {
+        submit?: SubmitButtonProps
+      } & ExtraOverrides
+    }
+  : never

package/src/use-array-field.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react'
 import {
   useFieldArray,
-  useFormContext,
   UseFieldArrayReturn,
+  FieldValues,
+  FieldPath,
 } from 'react-hook-form'
 
+import { useFormContext } from './form-context'
+
 import { createContext } from '@chakra-ui/react-utils'
 
 export interface UseArrayFieldReturn extends UseFieldArrayReturn {
@@ -59,11 +62,14 @@ export const [ArrayFieldRowProvider, useArrayFieldRowContext] =
     name: 'ArrayFieldRowContext',
   })
 
-export interface ArrayFieldOptions {
+export interface ArrayFieldOptions<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> {
   /**
    * The field name
    */
-  name: string
+  name: TName
   /**
    * Default value for new values in the array
    */

package/src/use-step-form.tsx

@@ -34,12 +34,43 @@ export const [StepFormProvider, useStepFormContext] =
   })
 
 import { FormProps } from './form'
+import { FormStepProps, StepsOptions } from './step-form'
+import { FieldProps } from './types'
+import { FocusableElement } from '@chakra-ui/utils'
+import { DisplayIfProps } from './display-if'
+import { ArrayFieldProps } from './array-field'
+import { UseArrayFieldReturn } from './use-array-field'
+import { ObjectFieldProps } from './object-field'
+
+type StepName<T extends { [k: number]: { readonly name: string } }> =
+  T[number]['name']
+
+interface StepFormRenderContext<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+> extends UseStepFormReturn<TFieldValues> {
+  Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
+  FormStep: React.FC<FormStepProps<StepName<TSteps>>>
+  DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
+  ArrayField: React.FC<
+    ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
+  >
+  ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
+}
 
 export interface UseStepFormProps<
-  TFieldValues extends FieldValues = FieldValues
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
 > extends Omit<UseStepperProps, 'onChange'>,
-    Omit<FormProps<TFieldValues>, 'children'> {
-  children: MaybeRenderProp<UseStepFormReturn<TFieldValues>>
+    Omit<FormProps<any, TFieldValues, TContext, TFieldTypes>, 'children'> {
+  steps?: TSteps
+  children: MaybeRenderProp<
+    StepFormRenderContext<TSteps, TFieldValues, TContext, TFieldTypes>
+  >
 }
 
 export interface UseStepFormReturn<
@@ -54,12 +85,19 @@ export interface UseStepFormReturn<
   steps: Record<string, any>
 }
 
-export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
-  props: UseStepFormProps<TFieldValues>
+export function useStepForm<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+>(
+  props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes>
 ): UseStepFormReturn<TFieldValues> {
-  const { onChange, ...rest } = props
+  const { onChange, steps: stepsOptions, resolver, ...rest } = props
   const stepper = useStepper(rest)
 
+  const [options, setOptions] = React.useState<TSteps | undefined>(stepsOptions)
+
   const { activeStep, isLastStep, nextStep } = stepper
 
   const [steps, updateSteps] = React.useState<Record<string, StepState>>({})
@@ -93,23 +131,30 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
 
   const getFormProps = React.useCallback(() => {
     const step = steps[activeStep]
+
     return {
       onSubmit: onSubmitStep,
       schema: step?.schema,
-      resolver: step?.resolver,
+      resolver: step?.schema
+        ? /* @todo fix resolver type */ (resolver as any)?.(step.schema)
+        : undefined,
     }
   }, [steps, onSubmitStep, activeStep])
 
   const updateStep = React.useCallback(
     (step: StepState) => {
+      const stepOptions = options?.find((s) => s.name === step.name)
       updateSteps((steps) => {
         return {
           ...steps,
-          [step.name]: step,
+          [step.name]: {
+            ...step,
+            schema: stepOptions?.schema,
+          },
         }
       })
     },
-    [steps]
+    [steps, options]
   )
 
   return {

package/src/utils.ts

@@ -1,13 +1,35 @@
 import * as React from 'react'
+import { FieldOption, FieldOptions } from './types'
 
 export const mapNestedFields = (name: string, children: React.ReactNode) => {
   return React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child.props.name) {
+      let childName = child.props.name
+      if (childName.includes('.')) {
+        childName = childName.replace(/^.*\.(.*)/, '$1')
+      } else if (childName.includes('.$')) {
+        childName = childName.replace(/^.*\.\$(.*)/, '$1')
+      }
+
       return React.cloneElement(child, {
         ...child.props,
-        name: `${name}.${child.props.name}`,
+        name: `${name}.${childName}`,
       })
     }
     return child
   })
 }
+
+export const mapOptions = <TOption extends FieldOption = FieldOption>(
+  options: FieldOptions<TOption>
+) => {
+  return options.map((option) => {
+    if (typeof option === 'string') {
+      return {
+        label: option,
+        value: option,
+      }
+    }
+    return option
+  })
+}

package/src/watch-field.tsx

@@ -1,9 +1,5 @@
-import {
-  FieldValues,
-  useFormContext,
-  UseFormReturn,
-  useWatch,
-} from 'react-hook-form'
+import { FieldValues, useWatch } from 'react-hook-form'
+import { useFormContext, UseFormReturn } from './form-context'
 
 export interface WatchFieldProps<
   Value = unknown,