@saas-ui/forms 1.0.0-rc.1 → 1.0.0-rc.10

package/src/use-step-form.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { FieldValues, SubmitHandler } from 'react-hook-form'
-import { createContext } from '@chakra-ui/react-utils'
+import { FieldValues, SubmitHandler, UnpackNestedValue } from 'react-hook-form'
+import { createContext, MaybeRenderProp } from '@chakra-ui/react-utils'
 import {
   useStepper,
   useStep,
@@ -14,8 +14,16 @@ export interface StepState {
   resolver?: any
   isActive?: boolean
   isCompleted?: boolean
+  onSubmit?: FormStepSubmitHandler
 }
 
+export type FormStepSubmitHandler<
+  TFieldValues extends FieldValues = FieldValues
+> = (
+  data: UnpackNestedValue<TFieldValues>,
+  stepper: UseStepperReturn
+) => Promise<void>
+
 export interface StepFormContext extends UseStepperReturn {
   updateStep(state: StepState): void
   steps: Record<string, StepState>
@@ -32,11 +40,9 @@ import { FormProps } from './form'
 
 export interface UseStepFormProps<
   TFieldValues extends FieldValues = FieldValues
-> extends UseStepperProps,
+> extends Omit<UseStepperProps, 'onChange'>,
     Omit<FormProps<TFieldValues>, 'children'> {
-  children:
-    | React.ReactNode
-    | ((stepper: UseStepFormReturn<TFieldValues>) => React.ReactElement)
+  children: MaybeRenderProp<UseStepFormReturn<TFieldValues>>
 }
 
 export interface UseStepFormReturn<
@@ -54,7 +60,8 @@ export interface UseStepFormReturn<
 export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
   props: UseStepFormProps<TFieldValues>
 ): UseStepFormReturn<TFieldValues> {
-  const stepper = useStepper(props)
+  const { onChange, ...rest } = props
+  const stepper = useStepper(rest)
 
   const { activeStep, isLastStep, nextStep } = stepper
 
@@ -62,11 +69,12 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
 
   const onSubmitStep: SubmitHandler<TFieldValues> = React.useCallback(
     async (data) => {
+      const step = steps[activeStep]
+
       if (isLastStep) {
         return props
           .onSubmit?.(data)
           .then(() => {
-            const step = steps[activeStep]
             updateStep({
               ...step,
               isCompleted: true,
@@ -75,9 +83,15 @@ export function useStepForm<TFieldValues extends FieldValues = FieldValues>(
           .then(nextStep) // Show completed step
       }
 
-      nextStep()
+      try {
+        await step.onSubmit?.(data, stepper)
+
+        nextStep()
+      } catch (e) {
+        // Step submission failed.
+      }
     },
-    [activeStep, isLastStep]
+    [steps, activeStep, isLastStep]
   )
 
   const getFormProps = React.useCallback(() => {
@@ -113,16 +127,17 @@ export interface UseFormStepProps {
   name: string
   schema?: any
   resolver?: any
+  onSubmit?: FormStepSubmitHandler
 }
 
 export function useFormStep(props: UseFormStepProps): StepState {
-  const { name, schema, resolver } = props
+  const { name, schema, resolver, onSubmit } = props
   const step = useStep({ name })
 
   const { steps, updateStep } = useStepFormContext()
 
   React.useEffect(() => {
-    updateStep({ name, schema, resolver })
+    updateStep({ name, schema, resolver, onSubmit })
   }, [name, schema])
 
   return {

package/yup/package.json

@@ -10,8 +10,8 @@
   "author": "Eelco Wiersma <eelco@appulse.nl>",
   "license": "MIT",
   "peerDependencies": {
-    "@hookform/resolvers": "^2.8.3",
-    "react-hook-form": "^7.22.0",
+    "@hookform/resolvers": "^2.9.0",
+    "react-hook-form": "^7.31.3",
     "yup": "^0.32.11"
   }
 }

package/zod/package.json

@@ -10,9 +10,9 @@
   "author": "Eelco Wiersma <eelco@appulse.nl>",
   "license": "MIT",
   "peerDependencies": {
-    "@chakra-ui/utils": "^2.0.0",
-    "@hookform/resolvers": "^2.8.3",
-    "react-hook-form": "^7.22.0",
-    "zod": "^3.14.4"
+    "@chakra-ui/utils": "^2.0.2",
+    "@hookform/resolvers": "^2.9.0",
+    "react-hook-form": "^7.31.3",
+    "zod": "^3.17.3"
   }
 }