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

package/src/form.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react'
 
 import { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'
-import { cx, runIfFn, __DEV__ } from '@chakra-ui/utils'
+import { FocusableElement, cx, runIfFn } from '@chakra-ui/utils'
 
 import {
   useForm,
-  FormProvider,
   UseFormProps,
   UseFormReturn,
   FieldValues,
@@ -15,27 +14,44 @@ import {
   ResolverResult,
   WatchObserver,
 } from 'react-hook-form'
-import { objectFieldResolver, FieldResolver } from './field-resolver'
+import { FormProvider } from './form-context'
+import { FieldResolver } from './field-resolver'
 import { MaybeRenderProp } from '@chakra-ui/react-utils'
 
 export type { UseFormReturn, FieldValues, SubmitHandler }
 
-import { Field as DefaultField, FieldProps } from './field'
+import { FieldProps, DefaultFieldOverrides } from './types'
 
-interface FormRenderContext<
+import { Field as DefaultField } from './field'
+import { FormLayout } from './layout'
+import { AutoFields } from './fields'
+import { SubmitButton } from './submit-button'
+import { DisplayIf, DisplayIfProps } from './display-if'
+import { ArrayField, ArrayFieldProps } from './array-field'
+import { ObjectField, ObjectFieldProps } from './object-field'
+import { UseArrayFieldReturn } from './use-array-field'
+
+export interface FormRenderContext<
   TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
 > extends UseFormReturn<TFieldValues, TContext> {
-  Field: React.FC<FieldProps<TFieldValues>>
+  Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
+  DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
+  ArrayField: React.FC<
+    ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
+  >
+  ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
 }
 
 interface FormOptions<
+  TSchema = unknown,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any
+  TFieldTypes = FieldProps<TFieldValues>
 > {
   /**
-   * The form schema, supports Yup, Zod, and AJV.
+   * The form schema.
    */
   schema?: TSchema
   /**
@@ -57,32 +73,51 @@ interface FormOptions<
   /**
    * The form children, can be a render prop or a ReactNode.
    */
-  children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext>>
+  children?: MaybeRenderProp<
+    FormRenderContext<TFieldValues, TContext, TFieldTypes>
+  >
+  /**
+   * The field resolver, used to resolve the fields from schemas.
+   */
+  fieldResolver?: FieldResolver
+  /**
+   * Field overrides
+   */
+  fields?: DefaultFieldOverrides
 }
 
 export interface FormProps<
+  TSchema = unknown,
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any
+  TFieldTypes = FieldProps<TFieldValues>
 > extends UseFormProps<TFieldValues, TContext>,
     Omit<
       HTMLChakraProps<'form'>,
       'children' | 'onChange' | 'onSubmit' | 'onError'
     >,
-    FormOptions<TFieldValues, TContext, TSchema> {}
+    FormOptions<TSchema, TFieldValues, TContext, TFieldTypes> {}
 
+/**
+ * The wrapper component provides context, state, and focus management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 export const Form = forwardRef(
   <
+    TSchema = any,
     TFieldValues extends FieldValues = FieldValues,
     TContext extends object = object,
-    TSchema = any
+    TFieldTypes = FieldProps<TFieldValues>
   >(
-    props: FormProps<TFieldValues, TContext, TSchema>,
+    props: FormProps<TSchema, TFieldValues, TContext, TFieldTypes>,
     ref: React.ForwardedRef<HTMLFormElement>
   ) => {
     const {
       mode = 'all',
       resolver,
+      fieldResolver,
+      fields,
       reValidateMode,
       shouldFocusError,
       shouldUnregister,
@@ -117,10 +152,6 @@ export const Form = forwardRef(
       resetOptions,
     }
 
-    if (schema && !resolver) {
-      form.resolver = Form.getResolver?.(schema)
-    }
-
     const methods = useForm<TFieldValues, TContext>(form)
     const { handleSubmit } = methods
 
@@ -135,73 +166,64 @@ export const Form = forwardRef(
       return () => subscription?.unsubscribe()
     }, [methods, onChange])
 
-    const Field: React.FC<FieldProps<TFieldValues>> = React.useMemo(
-      () => (props) => <DefaultField<TFieldValues> {...props} />,
-      []
-    )
+    let _children = children
+    if (!_children && fieldResolver) {
+      _children = (
+        <FormLayout>
+          <AutoFields />
+          <SubmitButton {...fields?.submit} />
+        </FormLayout>
+      )
+    }
 
     return (
-      <FormProvider {...methods}>
+      <FormProvider
+        {...methods}
+        schema={schema}
+        fieldResolver={fieldResolver}
+        fields={fields}
+      >
         <chakra.form
           ref={ref}
           onSubmit={handleSubmit(onSubmit, onError)}
           {...rest}
           className={cx('sui-form', props.className)}
         >
-          {runIfFn(children, {
-            Field,
+          {runIfFn(_children, {
+            Field: DefaultField as any,
+            DisplayIf: DisplayIf as any,
+            ArrayField: ArrayField as any,
+            ObjectField: ObjectField as any,
             ...methods,
           })}
         </chakra.form>
       </FormProvider>
     )
   }
-) as (<
-  TFieldValues extends FieldValues,
+) as FormComponent
+
+export type FormComponent = (<
+  TSchema = unknown,
+  TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any
+  TFieldTypes = FieldProps<TFieldValues>
 >(
-  props: FormProps<TFieldValues, TContext, TSchema> & {
+  props: FormProps<TSchema, TFieldValues, TContext, TFieldTypes> & {
     ref?: React.ForwardedRef<HTMLFormElement>
   }
 ) => React.ReactElement) & {
   displayName?: string
-  getResolver?: GetResolver
-  getFieldResolver: GetFieldResolver
 }
 
-Form.getFieldResolver = objectFieldResolver
-
 Form.displayName = 'Form'
 
 export type GetResolver = <
   TFieldValues extends FieldValues,
   TContext extends object
 >(
-  schema: any
+  schema: unknown
 ) => (
   values: TFieldValues,
   context: TContext | undefined,
   options: ResolverOptions<TFieldValues>
 ) => Promise<ResolverResult<TFieldValues>>
-
-export type GetFieldResolver = (schema: any) => FieldResolver
-
-export interface CreateFormProps {
-  resolver?: GetResolver
-}
-
-export function createForm<Schema = any>({ resolver }: CreateFormProps) {
-  const CreateForm = <
-    TFieldValues extends FieldValues,
-    TContext extends object = object,
-    TSchema extends Schema = Schema
-  >(
-    props: FormProps<TFieldValues, TContext, TSchema>
-  ) => {
-    const { schema, ...rest } = props
-    return <Form resolver={resolver?.(props.schema)} {...rest} />
-  }
-
-  return CreateForm
-}

package/src/index.ts

@@ -1,8 +1,8 @@
 export * from './display-field'
 export * from './field'
 export * from './fields'
-export * from './form'
-export * from './auto-form'
+export * from './fields-context'
+// export * from './auto-form'
 export * from './layout'
 export * from './submit-button'
 export * from './array-field'
@@ -16,6 +16,62 @@ export * from './watch-field'
 export * from './input-right-button'
 export * from './select'
 export * from './password-input'
+export * from './radio'
+
+export * from './base-field'
+
+export {
+  CheckboxField,
+  InputField,
+  NativeSelectField,
+  NumberInputField,
+  PasswordInputField,
+  PinField,
+  RadioField,
+  SelectField,
+  SwitchField,
+  TextareaField,
+  defaultFieldTypes,
+  type DefaultFields,
+  type InputFieldProps,
+  type NumberInputFieldProps,
+  type PinFieldProps,
+} from './default-fields'
+
+export type {
+  FieldProps,
+  WithFields,
+  BaseFieldProps,
+  FieldOptions,
+  DefaultFieldOverrides,
+} from './types'
+
+export { createForm, type CreateFormProps, type FormType } from './create-form'
+export { createField, type CreateFieldOptions } from './create-field'
+
+export { Form as BaseForm } from './form'
+export type { FormProps, FormRenderContext, FormComponent } from './form'
+
+export { FormProvider, useFormContext } from './form-context'
+
+import { createForm } from './create-form'
+import { createStepForm } from './create-step-form'
+
+/**
+ * Form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
+export const Form = createForm()
+
+export { createStepForm } from './create-step-form'
+
+/**
+ * Multi-step form component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
+export const StepForm = createStepForm()
 
 export type {
   BatchFieldArrayUpdate,
@@ -120,9 +176,7 @@ export {
   useController,
   useFieldArray,
   useForm,
-  useFormContext,
   useFormState,
   useWatch,
   Controller,
-  FormProvider,
 } from 'react-hook-form'

package/src/input-right-button/input-right-button.stories.tsx

@@ -37,7 +37,7 @@ const Template: ComponentStory<typeof InputRightButton> = (args) => (
 
 export const Basic = Template.bind({})
 Basic.args = {
-  label: 'Save',
+  children: 'Save',
 }
 
 export const WithIcon = Template.bind({})

package/src/input-right-button/input-right-button.tsx

@@ -7,8 +7,6 @@ import {
   InputRightElement,
 } from '@chakra-ui/react'
 
-import { __DEV__ } from '@chakra-ui/utils'
-
 export type InputRightButtonProps = ButtonProps
 
 export const InputRightButton = forwardRef<InputRightButtonProps, 'div'>(

package/src/layout.tsx

@@ -1,9 +1,15 @@
 import * as React from 'react'
 
-import { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'
-import { cx, __DEV__ } from '@chakra-ui/utils'
+import {
+  chakra,
+  ResponsiveValue,
+  SimpleGrid,
+  SimpleGridProps,
+  useTheme,
+} from '@chakra-ui/react'
+import { cx } from '@chakra-ui/utils'
 
-export type FormLayoutProps = SimpleGridProps
+export interface FormLayoutProps extends SimpleGridProps {}
 
 interface FormLayoutItemProps {
   children: React.ReactNode
@@ -13,20 +19,21 @@ const FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {
   return <chakra.div>{children}</chakra.div>
 }
 
-if (__DEV__) {
-  FormLayoutItem.displayName = 'FormLayoutItem'
-}
+FormLayoutItem.displayName = 'FormLayoutItem'
 
 /**
- * FormLayout
+ * Create consistent field spacing and positioning.
+ *
  *
  * Renders form items in a `SimpleGrid`
  * @see https://chakra-ui.com/docs/layout/simple-grid
+ *
+ * @see https://saas-ui.dev/docs/components/forms/form
  */
 export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
   const theme = useTheme()
 
-  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {
+  const defaultProps = theme.components?.SuiFormLayout?.defaultProps ?? {
     spacing: 4,
   }
 
@@ -50,6 +57,4 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
   )
 }
 
-if (__DEV__) {
-  FormLayout.displayName = 'FormLayout'
-}
+FormLayout.displayName = 'FormLayout'

package/src/number-input/number-input.tsx

@@ -9,7 +9,8 @@ import {
   NumberDecrementStepper,
   NumberInputProps as ChakraNumberInputProps,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
+
+import { ChevronDownIcon, ChevronUpIcon } from '@saas-ui/core'
 
 interface NumberInputOptions {
   /**
@@ -31,7 +32,12 @@ export interface NumberInputProps
     NumberInputOptions {}
 
 export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
-  const { hideStepper, incrementIcon, decrementIcon, ...rest } = props
+  const {
+    hideStepper,
+    incrementIcon = <ChevronUpIcon />,
+    decrementIcon = <ChevronDownIcon />,
+    ...rest
+  } = props
 
   return (
     <ChakraNumberInput {...rest} ref={ref}>
@@ -51,6 +57,4 @@ NumberInput.defaultProps = {
   hideStepper: false,
 }
 
-if (__DEV__) {
-  NumberInput.displayName = 'NumberInput'
-}
+NumberInput.displayName = 'NumberInput'

package/src/object-field.tsx

@@ -6,15 +6,19 @@ import {
   ResponsiveValue,
   useStyleConfig,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
 
 import { FormLayout } from './layout'
-import { FieldProps } from './field'
+import { BaseFieldProps } from './types'
 
 import { mapNestedFields } from './utils'
+import { FieldPath, FieldValues } from 'react-hook-form'
+import { useFieldProps } from './form-context'
 
-export interface ObjectFieldProps extends FieldProps {
-  name: string
+export interface ObjectFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> extends BaseFieldProps {
+  name: TName
   children: React.ReactNode
   columns?: ResponsiveValue<number>
   spacing?: ResponsiveValue<string | number>
@@ -24,21 +28,39 @@ export const FormLegend = (props: FormLabelProps) => {
   const styles = useStyleConfig('SuiFormLegend')
   return <FormLabel as="legend" sx={styles} {...props} />
 }
-
+/**
+ * The object field component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/object-field
+ */
 export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
-  const { name, label, hideLabel, children, columns, spacing, ...fieldProps } =
-    props
+  const {
+    name,
+    label,
+    hideLabel: hideLabelProp,
+    children,
+    columns: columnsProp,
+    spacing: spacingProp,
+    ...fieldProps
+  } = props
+
+  const { hideLabel, columns, spacing, ...overrides } = useFieldProps(
+    name
+  ) as Omit<ObjectFieldProps, 'name'>
 
   return (
-    <FormControl name={name} as="fieldset" {...fieldProps}>
-      <FormLegend display={hideLabel ? 'none' : 'block'}>{label}</FormLegend>
-      <FormLayout columns={columns} gridGap={spacing}>
+    <FormControl name={name} as="fieldset" {...fieldProps} {...overrides}>
+      <FormLegend display={hideLabelProp || hideLabel ? 'none' : 'block'}>
+        {label}
+      </FormLegend>
+      <FormLayout
+        columns={columnsProp || columns}
+        gridGap={spacingProp || spacing}
+      >
         {mapNestedFields(name, children)}
       </FormLayout>
     </FormControl>
   )
 }
 
-if (__DEV__) {
-  ObjectField.displayName = 'ObjectField'
-}
+ObjectField.displayName = 'ObjectField'

package/src/password-input/password-input.stories.tsx

@@ -1,8 +1,15 @@
-import { Container, FormControl, FormLabel, Icon } from '@chakra-ui/react'
+import {
+  Container,
+  FormControl,
+  FormLabel,
+  Icon,
+  InputLeftAddon,
+  InputLeftElement,
+} from '@chakra-ui/react'
 import { Story } from '@storybook/react'
 import * as React from 'react'
 
-import { FiEye, FiEyeOff } from 'react-icons/fi'
+import { FiEye, FiEyeOff, FiLock } from 'react-icons/fi'
 
 import { PasswordInput } from './password-input'
 
@@ -48,3 +55,17 @@ export const CustomWidth: Story = () => (
     <PasswordInput name="password" width="200px" />
   </FormControl>
 )
+
+export const LeftAddon: Story = () => (
+  <FormControl>
+    <FormLabel>Password</FormLabel>
+    <PasswordInput
+      name="password"
+      leftAddon={
+        <InputLeftElement>
+          <FiLock />
+        </InputLeftElement>
+      }
+    />
+  </FormControl>
+)

package/src/password-input/password-input.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react'
 
 import { forwardRef, InputGroup, Input, InputProps } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
-import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
+
+import { ViewIcon, ViewOffIcon } from '@saas-ui/core/icons'
 
 import { InputRightButton } from '../input-right-button'
 
 interface PasswordOptions {
   viewIcon?: React.ReactNode
   viewOffIcon?: React.ReactNode
+  leftAddon?: React.ReactNode
 }
 
 export interface PasswordInputProps extends InputProps, PasswordOptions {}
@@ -23,6 +24,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
       width,
       size,
       variant,
+      leftAddon,
       ...inputProps
     } = props
     const [show, setShow] = useState(false)
@@ -45,13 +47,13 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
 
     return (
       <InputGroup {...groupProps}>
+        {leftAddon}
         <Input
           {...inputProps}
           ref={ref}
           type={show ? 'text' : 'password'}
           autoComplete={show ? 'off' : autoComplete}
         />
-
         <InputRightButton
           onClick={handleClick}
           aria-label={label}
@@ -64,6 +66,4 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
   }
 )
 
-if (__DEV__) {
-  PasswordInput.displayName = 'PasswordInput'
-}
+PasswordInput.displayName = 'PasswordInput'

package/src/pin-input/pin-input.tsx

@@ -8,8 +8,6 @@ import {
   SystemProps,
 } from '@chakra-ui/react'
 
-import { __DEV__ } from '@chakra-ui/utils'
-
 interface PinInputOptions {
   /**
    * The pin length.
@@ -45,6 +43,4 @@ PinInput.defaultProps = {
   pinLength: 4,
 }
 
-if (__DEV__) {
-  PinInput.displayName = 'PinInput'
-}
+PinInput.displayName = 'PinInput'

package/src/radio/radio-input.stories.tsx

@@ -6,7 +6,7 @@ import { ComponentStory } from '@storybook/react'
 import { RadioInput } from './'
 
 export default {
-  title: 'Components/Forms/Radio',
+  title: 'Components/Forms/RadioInput',
   decorators: [
     (Story: any) => (
       <Container mt="40px">

package/src/radio/radio-input.tsx

@@ -10,15 +10,17 @@ import {
   SystemProps,
   StackDirection,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
+import { FieldOptions, FieldOption } from '../types'
+import { mapOptions } from '../utils'
 
-interface Option extends RadioProps {
-  value: string
-  label?: string
-}
+export interface RadioOption
+  extends Omit<RadioProps, 'value' | 'label'>,
+    FieldOption {}
+
+export type RadioOptions = FieldOptions<RadioOption>
 
 interface RadioInputOptions {
-  options: Option[]
+  options: RadioOptions
   spacing?: SystemProps['margin']
   direction?: StackDirection
 }
@@ -28,9 +30,11 @@ export interface RadioInputProps
     RadioInputOptions {}
 
 export const RadioInput = forwardRef<RadioInputProps, 'div'>(
-  ({ options, spacing, direction, ...props }, ref) => {
+  ({ options: optionsProp, spacing, direction, ...props }, ref) => {
     const { onBlur, onChange, ...groupProps } = props
 
+    const options = mapOptions(optionsProp)
+
     return (
       <RadioGroup onChange={onChange} {...groupProps}>
         <Stack spacing={spacing} direction={direction}>
@@ -53,6 +57,4 @@ export const RadioInput = forwardRef<RadioInputProps, 'div'>(
   }
 )
 
-if (__DEV__) {
-  RadioInput.displayName = 'RadioInput'
-}
+RadioInput.displayName = 'RadioInput'

package/src/select/native-select.tsx

@@ -5,7 +5,6 @@ import {
   Select as ChakraSelect,
   SelectProps as ChakraSelectProps,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
 
 interface Option {
   value: string
@@ -37,6 +36,4 @@ export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
   }
 )
 
-if (__DEV__) {
-  NativeSelect.displayName = 'NativeSelect'
-}
+NativeSelect.displayName = 'NativeSelect'