@saas-ui/forms 2.0.0-next.9 → 2.0.0-rc.23

package/src/step-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { FieldValues, UseFormReturn } from 'react-hook-form'
+import { FieldValues } from 'react-hook-form'
 
 import {
   chakra,
@@ -10,76 +10,48 @@ import {
   ThemingProps,
 } from '@chakra-ui/react'
 
-import { callAllHandlers, runIfFn, cx } from '@chakra-ui/utils'
+import { callAllHandlers, cx } from '@chakra-ui/utils'
 
 import {
-  StepperProvider,
-  StepperSteps,
-  StepperStepsProps,
-  StepperStep,
+  Steps,
+  StepsItem,
+  StepsItemProps,
+  StepsProps,
   useStepperContext,
-  StepperContainer,
-  StepperProps,
 } from '@saas-ui/core'
 
-import { Form } from './form'
 import { SubmitButton } from './submit-button'
 
 import {
-  useStepForm,
   useFormStep,
-  StepFormProvider,
   UseStepFormProps,
   FormStepSubmitHandler,
 } from './use-step-form'
+import { FieldProps } from './types'
+
+export type StepsOptions<TSchema, TName extends string = string> = {
+  /**
+   * The step name
+   */
+  name: TName
+  /**
+   * Schema
+   */
+  schema?: TSchema
+}[]
 
 export interface StepFormProps<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
-> extends UseStepFormProps<TFieldValues> {}
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+> extends UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> {}
 
-/**
- * The wrapper component provides context, state, and focus management.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-export const StepForm = React.forwardRef(
-  <
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object
-  >(
-    props: StepFormProps<TFieldValues, TContext>,
-    ref: React.ForwardedRef<HTMLFormElement>
-  ) => {
-    const { children, ...rest } = props
-
-    const stepper = useStepForm<TFieldValues>(props)
-
-    const { getFormProps, ...ctx } = stepper
-
-    const context = React.useMemo(() => ctx, [ctx])
-
-    return (
-      <StepperProvider value={context}>
-        <StepFormProvider value={context}>
-          <Form ref={ref} {...rest} {...getFormProps()}>
-            {runIfFn(children, stepper)}
-          </Form>
-        </StepFormProvider>
-      </StepperProvider>
-    )
-  }
-) as <TFieldValues extends FieldValues>(
-  props: StepFormProps<TFieldValues> & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  }
-) => React.ReactElement
-
-export interface FormStepOptions {
+export interface FormStepOptions<TName extends string = string> {
   /**
    * The step name
    */
-  name: string
+  name: TName
   /**
    * Schema
    */
@@ -90,9 +62,9 @@ export interface FormStepOptions {
   resolver?: any
 }
 
-export interface FormStepperProps
-  extends StepperStepsProps,
-    ThemingProps<'Stepper'> {}
+export interface FormStepperProps extends StepsProps, ThemingProps<'Stepper'> {
+  render?: StepsItemProps['render']
+}
 
 /**
  * Renders a stepper that displays progress above the form.
@@ -102,7 +74,16 @@ export interface FormStepperProps
 export const FormStepper: React.FC<FormStepperProps> = (props) => {
   const { activeIndex, setIndex } = useStepperContext()
 
-  const { children, orientation, variant, colorScheme, size, ...rest } = props
+  const {
+    children,
+    orientation,
+    variant,
+    colorScheme,
+    size,
+    onChange: onChangeProp,
+    render,
+    ...rest
+  } = props
 
   const elements = React.Children.map(children, (child) => {
     if (
@@ -111,14 +92,15 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
     ) {
       const { isCompleted } = useFormStep(child.props) // Register this step
       return (
-        <StepperStep
+        <StepsItem
+          render={render}
           name={child.props.name}
           title={child.props.title}
           isCompleted={isCompleted}
           {...rest}
         >
           {child.props.children}
-        </StepperStep>
+        </StepsItem>
       )
     }
     return child
@@ -126,10 +108,11 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
 
   const onChange = React.useCallback((i: number) => {
     setIndex(i)
+    onChangeProp?.(i)
   }, [])
 
   return (
-    <StepperContainer
+    <Steps
       orientation={orientation}
       step={activeIndex}
       variant={variant}
@@ -137,15 +120,13 @@ export const FormStepper: React.FC<FormStepperProps> = (props) => {
       size={size}
       onChange={onChange}
     >
-      <StepperSteps mb="4" {...props}>
-        {elements}
-      </StepperSteps>
-    </StepperContainer>
+      {elements}
+    </Steps>
   )
 }
 
-export interface FormStepProps
-  extends FormStepOptions,
+export interface FormStepProps<TName extends string = string>
+  extends FormStepOptions<TName>,
     Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
   onSubmit?: FormStepSubmitHandler
 }
@@ -154,10 +135,11 @@ export interface FormStepProps
  *
  * @see Docs https://saas-ui.dev/docs/components/forms/step-form
  */
-export const FormStep: React.FC<FormStepProps> = (props) => {
-  const { name, schema, resolver, children, className, onSubmit, ...rest } =
-    props
-  const step = useFormStep({ name, schema, resolver, onSubmit })
+export const FormStep = <TName extends string = string>(
+  props: FormStepProps<TName>
+) => {
+  const { name, children, className, onSubmit, ...rest } = props
+  const step = useFormStep({ name, onSubmit })
 
   const { isActive } = step
 
@@ -181,7 +163,7 @@ export const PrevButton: React.FC<ButtonProps> = (props) => {
   return (
     <Button
       isDisabled={isFirstStep || isCompleted}
-      label="Back"
+      children="Back"
       {...props}
       className={cx('sui-form__prev-button', props.className)}
       onClick={callAllHandlers(props.onClick, prevStep)}

package/src/types.ts

@@ -133,12 +133,17 @@ export type FieldOverrides<
 
 export type WithFields<
   TFormProps extends FormProps<any, any, any, any>,
-  FieldDefs
-> = TFormProps extends FormProps<infer TFieldValues, infer TContext>
+  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-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 {