@saas-ui/forms 1.0.0-rc.9 → 1.0.0

package/src/step-form.tsx

@@ -16,7 +16,7 @@ import {
 } from '@saas-ui/stepper'
 import { Button, ButtonProps } from '@saas-ui/button'
 
-import { Form, FormProps } from './form'
+import { Form } from './form'
 import { SubmitButton } from './submit-button'
 
 import {
@@ -24,6 +24,7 @@ import {
   useFormStep,
   StepFormProvider,
   UseStepFormProps,
+  FormStepSubmitHandler,
 } from './use-step-form'
 
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
@@ -113,11 +114,14 @@ export const FormStepper: React.FC<StepperStepsProps> = (props) => {
 
 export interface FormStepProps
   extends FormStepOptions,
-    HTMLChakraProps<'div'> {}
+    Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
+  onSubmit?: FormStepSubmitHandler
+}
 
 export const FormStep: React.FC<FormStepProps> = (props) => {
-  const { name, schema, resolver, children, className, ...rest } = props
-  const step = useFormStep({ name, schema, resolver })
+  const { name, schema, resolver, children, className, onSubmit, ...rest } =
+    props
+  const step = useFormStep({ name, schema, resolver, onSubmit })
 
   const { isActive } = step
 
@@ -160,11 +164,12 @@ export const NextButton: React.FC<NextButtonProps> = (props) => {
 
   return (
     <SubmitButton
-      isDisabled={isCompleted}
-      label={isLastStep || isCompleted ? submitLabel : label}
       {...rest}
+      isDisabled={isCompleted}
       className={cx('saas-form__next-button', props.className)}
-    />
+    >
+      {isLastStep || isCompleted ? submitLabel : label}
+    </SubmitButton>
   )
 }
 

package/src/submit-button.tsx

@@ -4,7 +4,6 @@ import { useFormContext } from 'react-hook-form'
 
 import { Button, ButtonProps } from '@saas-ui/button'
 
-import { forwardRef } from '@chakra-ui/system'
 import { __DEV__ } from '@chakra-ui/utils'
 
 export interface SubmitButtonProps extends ButtonProps {
@@ -24,29 +23,38 @@ export interface SubmitButtonProps extends ButtonProps {
   disableIfInvalid?: boolean
 }
 
-export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
-  (props, ref) => {
-    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props
-    const { formState } = useFormContext()
-
-    const isDisabled =
-      (disableIfUntouched && !formState.isDirty) ||
-      (disableIfInvalid && !formState.isValid)
-
-    return (
-      <Button
-        type="submit"
-        isLoading={formState.isSubmitting}
-        colorScheme="primary"
-        ref={ref}
-        isDisabled={isDisabled}
-        {...rest}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
+export const SubmitButton = React.forwardRef<
+  HTMLButtonElement,
+  SubmitButtonProps
+>((props, ref) => {
+  const {
+    children,
+    disableIfUntouched,
+    disableIfInvalid,
+    isDisabled: isDisabledProp,
+    isLoading,
+    ...rest
+  } = props
+  const { formState } = useFormContext()
+
+  const isDisabled =
+    (disableIfUntouched && !formState.isDirty) ||
+    (disableIfInvalid && !formState.isValid) ||
+    isDisabledProp
+
+  return (
+    <Button
+      {...rest}
+      ref={ref}
+      variant="primary"
+      type="submit"
+      isLoading={formState.isSubmitting || isLoading}
+      isDisabled={isDisabled}
+    >
+      {children}
+    </Button>
+  )
+})
 
 SubmitButton.defaultProps = {
   label: 'Submit',

package/src/use-step-form.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FieldValues, SubmitHandler } from 'react-hook-form'
+import { FieldValues, SubmitHandler, UnpackNestedValue } from 'react-hook-form'
 import { createContext, MaybeRenderProp } from '@chakra-ui/react-utils'
 import {
   useStepper,
@@ -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>
@@ -61,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,
@@ -74,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(() => {
@@ -112,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 {