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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.2",
   "description": "Fully functional forms for Chakra UI.",
   "source": "src/index.ts",
   "exports": {
@@ -93,16 +93,16 @@
     "@chakra-ui/react-utils": "^2.0.1",
     "@chakra-ui/utils": "^2.0.2",
     "@hookform/resolvers": "^2.9.0",
-    "@saas-ui/button": "1.0.0-rc.4",
-    "@saas-ui/input-right-button": "1.0.0-rc.4",
-    "@saas-ui/number-input": "1.0.0-rc.3",
-    "@saas-ui/password-input": "1.0.0-rc.4",
-    "@saas-ui/pin-input": "1.0.0-rc.4",
-    "@saas-ui/radio": "1.0.0-rc.3",
-    "@saas-ui/react-utils": "1.0.0-rc.3",
-    "@saas-ui/select": "1.0.0-rc.3",
-    "@saas-ui/stepper": "1.0.0-rc.4",
-    "react-hook-form": "^7.31.3"
+    "@saas-ui/button": "1.0.0",
+    "@saas-ui/input-right-button": "1.0.1",
+    "@saas-ui/number-input": "1.0.0",
+    "@saas-ui/password-input": "1.0.1",
+    "@saas-ui/pin-input": "1.0.0",
+    "@saas-ui/radio": "1.0.0",
+    "@saas-ui/react-utils": "1.0.0",
+    "@saas-ui/select": "1.0.0",
+    "@saas-ui/stepper": "1.0.0",
+    "react-hook-form": "^7.33.1"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=2.1.0",

package/src/auto-form.tsx

@@ -6,7 +6,7 @@ import { __DEV__ } from '@chakra-ui/utils'
 import { Form, FormProps } from './form'
 import { FormLayout } from './layout'
 import { Fields } from './fields'
-import { SubmitButton, SubmitButtonProps } from './submit-button'
+import { SubmitButton } from './submit-button'
 import { FieldResolver } from '.'
 
 interface AutoFormOptions {
@@ -48,7 +48,7 @@ export const AutoForm = forwardRef(
       <Form {...rest} schema={schema} ref={ref}>
         <FormLayout>
           {<Fields schema={schema} fieldResolver={fieldResolver} />}
-          {submitLabel && <SubmitButton label={submitLabel} />}
+          {submitLabel && <SubmitButton>{submitLabel}</SubmitButton>}
           {children}
         </FormLayout>
       </Form>

package/src/field-resolver.ts

@@ -16,10 +16,11 @@ export type ObjectSchema = Record<string, SchemaField>
 
 const mapFields = (schema: ObjectSchema): FieldProps[] =>
   schema &&
-  Object.entries(schema).map(([name, { items, ...field }]) => {
+  Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
     return {
       ...field,
       name,
+      label: label || title, // json schema compatibility
     }
   })
 

package/src/field.tsx

@@ -27,14 +27,13 @@ import {
   TextareaProps,
   SwitchProps,
   CheckboxProps,
-  PinInputProps,
   PinInputField,
   HStack,
   PinInput,
   UsePinInputProps,
   SystemProps,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
+import { __DEV__, FocusableElement } from '@chakra-ui/utils'
 
 import { NumberInput, NumberInputProps } from '@saas-ui/number-input'
 import { PasswordInput, PasswordInputProps } from '@saas-ui/password-input'
@@ -46,7 +45,6 @@ import {
   NativeSelect,
   NativeSelectProps,
 } from '@saas-ui/select'
-import { FocusableElement } from '@chakra-ui/utils'
 
 export interface Option {
   value: string
@@ -217,7 +215,6 @@ const createField = (
       isInvalid,
       isReadOnly,
       isRequired,
-      isOptional,
       rules,
       variant,
       ...inputProps
@@ -239,7 +236,6 @@ const createField = (
         isInvalid={isInvalid}
         isReadOnly={isReadOnly}
         isRequired={isRequired}
-        isOptional={isOptional}
         variant={variant}
       >
         <InputComponent

package/src/fields.tsx

@@ -8,10 +8,12 @@ import { Field, FieldProps } from './field'
 import { ArrayField } from './array-field'
 import { ObjectField } from './object-field'
 import { FieldResolver } from './field-resolver'
+import { useFormContext } from 'react-hook-form'
 
 export interface FieldsProps {
   schema: any
   fieldResolver?: FieldResolver
+  focusFirstField?: boolean
 }
 
 const mapNestedFields = (resolver: FieldResolver, name: string) => {
@@ -27,6 +29,7 @@ const mapNestedFields = (resolver: FieldResolver, name: string) => {
 export const Fields: React.FC<FieldsProps> = ({
   schema,
   fieldResolver,
+  focusFirstField,
   ...props
 }) => {
   const resolver = React.useMemo(
@@ -34,34 +37,42 @@ export const Fields: React.FC<FieldsProps> = ({
     [schema, fieldResolver]
   )
 
+  const fields = React.useMemo(() => resolver.getFields(), [resolver])
+
+  const form = useFormContext()
+
+  React.useEffect(() => {
+    if (focusFirstField && fields[0]?.name) {
+      form.setFocus(fields[0].name)
+    }
+  }, [schema, fieldResolver, focusFirstField])
+
   return (
     <FormLayout {...props}>
-      {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} />
+      {fields.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} />
+        }
+      )}
     </FormLayout>
   )
 }

package/src/form.tsx

@@ -11,7 +11,6 @@ import {
   FieldValues,
   SubmitHandler,
   SubmitErrorHandler,
-  UnpackNestedValue,
   ResolverOptions,
   ResolverResult,
 } from 'react-hook-form'
@@ -35,7 +34,7 @@ interface FormOptions<TFieldValues extends FieldValues = FieldValues> {
   /**
    * Ref on the HTMLFormElement.
    */
-  formRef?: React.MutableRefObject<HTMLFormElement>
+  formRef?: React.RefObject<HTMLFormElement>
 }
 
 /**
@@ -124,7 +123,7 @@ if (__DEV__) {
 export type GetResolver = (
   schema: any
 ) => <TFieldValues extends FieldValues, TContext>(
-  values: UnpackNestedValue<TFieldValues>,
+  values: TFieldValues,
   context: TContext | undefined,
   options: ResolverOptions<TFieldValues>
 ) => Promise<ResolverResult<TFieldValues>>

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

@@ -14,8 +14,13 @@ export interface StepState {
   resolver?: any
   isActive?: boolean
   isCompleted?: boolean
+  onSubmit?: FormStepSubmitHandler
 }
 
+export type FormStepSubmitHandler<
+  TFieldValues extends FieldValues = FieldValues
+> = (data: TFieldValues, stepper: UseStepperReturn) => Promise<void>
+
 export interface StepFormContext extends UseStepperReturn {
   updateStep(state: StepState): void
   steps: Record<string, StepState>
@@ -61,11 +66,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 +80,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 +124,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.9.0",
-    "react-hook-form": "^7.31.3",
+    "@hookform/resolvers": "^2.9.3",
+    "react-hook-form": "^7.33.1",
     "yup": "^0.32.11"
   }
 }

package/zod/package.json

@@ -11,8 +11,8 @@
   "license": "MIT",
   "peerDependencies": {
     "@chakra-ui/utils": "^2.0.2",
-    "@hookform/resolvers": "^2.9.0",
-    "react-hook-form": "^7.31.3",
+    "@hookform/resolvers": "^2.9.3",
+    "react-hook-form": "^7.33.1",
     "zod": "^3.17.3"
   }
 }