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

package/src/field.tsx

@@ -1,45 +1,9 @@
 import * as React from 'react'
-import {
-  useFormContext,
-  FormState,
-  Controller,
-  get,
-  RegisterOptions,
-  FieldValues,
-  FieldPath,
-} from 'react-hook-form'
-
-import {
-  forwardRef,
-  Box,
-  FormControl,
-  FormControlProps,
-  FormLabel,
-  FormHelperText,
-  FormErrorMessage,
-  Input,
-  Textarea,
-  Checkbox,
-  Switch,
-  useMergeRefs,
-  InputGroup,
-  InputProps,
-  TextareaProps,
-  SwitchProps,
-  CheckboxProps,
-  PinInputField,
-  HStack,
-  PinInput,
-  UsePinInputProps,
-  SystemProps,
-} from '@chakra-ui/react'
-import { __DEV__, FocusableElement, callAllHandlers } from '@chakra-ui/utils'
-
-import { NumberInput, NumberInputProps } from './number-input'
-import { PasswordInput, PasswordInputProps } from './password-input'
-import { RadioInput, RadioInputProps } from './radio'
+import { RegisterOptions, FieldValues } from 'react-hook-form'
 
-import { Select, SelectProps, NativeSelect, NativeSelectProps } from './select'
+import { FocusableElement } from '@chakra-ui/utils'
+import { useField } from './fields-context'
+import { FieldProps } from './types'
 
 export interface Option {
   value: string
@@ -52,425 +16,31 @@ export type FieldRules = Pick<
   'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'
 >
 
-export interface FieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> extends Omit<FormControlProps, 'label' | 'type'> {
-  /**
-   * The field name
-   */
-  name: TName
-  /**
-   * The field label
-   */
-  label?: string
-  /**
-   * Hide the field label
-   */
-  hideLabel?: boolean
-  /**
-   * Field help text
-   */
-  help?: string
-  /**
-   * React hook form rules
-   */
-  rules?: Omit<
-    RegisterOptions<TFieldValues, TName>,
-    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
-  >
-  /**
-   * Build-in types:
-   * - text
-   * - number
-   * - password
-   * - textarea
-   * - select
-   * - native-select
-   * - checkbox
-   * - radio
-   * - switch
-   * - pin
-   *
-   * Will default to a text field if there is no matching type.
-   */
-  type?: string
-  /**
-   * The input placeholder
-   */
-  placeholder?: string
-}
-
-const inputTypes: Record<string, React.FC<any>> = {}
-
 const defaultInputType = 'text'
 
-const getInput = (type: string) => {
-  return inputTypes[type] || inputTypes[defaultInputType]
-}
-
-const getError = (name: string, formState: FormState<{ [x: string]: any }>) => {
-  return get(formState.errors, name)
-}
-
-const isTouched = (
-  name: string,
-  formState: FormState<{ [x: string]: any }>
-) => {
-  return get(formState.touchedFields, name)
-}
-
-export const BaseField: React.FC<FieldProps> = (props) => {
-  const { name, label, help, hideLabel, children, ...controlProps } = props
-
-  const { formState } = useFormContext()
-
-  const error = getError(name, formState)
-
-  return (
-    <FormControl {...controlProps} isInvalid={!!error}>
-      {label && !hideLabel ? <FormLabel>{label}</FormLabel> : null}
-      <Box>
-        {children}
-        {help && !error?.message ? (
-          <FormHelperText>{help}</FormHelperText>
-        ) : null}
-        {error?.message && (
-          <FormErrorMessage>{error?.message}</FormErrorMessage>
-        )}
-      </Box>
-    </FormControl>
-  )
-}
-
-if (__DEV__) {
-  BaseField.displayName = 'BaseField'
-}
-
-export type As<Props = any> = React.ElementType<Props>
-
-export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
-  type?: FieldTypes
-}
-
 /**
+ * Form field component.
+ * 
  * Build-in types:
- * - text
- * - number
- * - password
- * - textarea
- * - select
- * - native-select
- * - checkbox
- * - radio
- * - switch
- * - pin
+ * text, number, password, textarea, select, native-select, checkbox, radio, switch, pin
  *
  * Will default to a text field if there is no matching type.
+
+ * @see Docs https://saas-ui.dev/docs/components/forms/field
  */
 export const Field = React.forwardRef(
   <TFieldValues extends FieldValues = FieldValues>(
-    props: FieldProps<TFieldValues> | FieldTypeProps,
+    props: FieldProps<TFieldValues>,
     ref: React.ForwardedRef<FocusableElement>
   ) => {
     const { type = defaultInputType } = props
-    const InputComponent = getInput(type)
-
+    const InputComponent = useField(type)
     return <InputComponent ref={ref} {...props} />
   }
 ) as (<TFieldValues extends FieldValues>(
-  props: FieldProps<TFieldValues> &
-    FieldTypeProps & {
-      ref?: React.ForwardedRef<FocusableElement>
-    }
+  props: FieldProps<TFieldValues> & {
+    ref?: React.ForwardedRef<FocusableElement>
+  }
 ) => React.ReactElement) & {
   displayName?: string
 }
-
-interface CreateFieldProps {
-  displayName: string
-  hideLabel?: boolean
-  BaseField: React.FC<any>
-}
-
-const createField = (
-  InputComponent: React.FC<any>,
-  { displayName, hideLabel, BaseField }: CreateFieldProps
-) => {
-  const Field = forwardRef((props, ref) => {
-    const {
-      id,
-      name,
-      label,
-      help,
-      isDisabled,
-      isInvalid,
-      isReadOnly,
-      isRequired,
-      rules,
-      ...inputProps
-    } = props
-
-    const inputRules = {
-      required: isRequired,
-      ...rules,
-    }
-
-    return (
-      <BaseField
-        id={id}
-        name={name}
-        label={label}
-        help={help}
-        hideLabel={hideLabel}
-        isDisabled={isDisabled}
-        isInvalid={isInvalid}
-        isReadOnly={isReadOnly}
-        isRequired={isRequired}
-      >
-        <InputComponent
-          ref={ref}
-          id={id}
-          name={name}
-          label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
-          rules={inputRules}
-          {...inputProps}
-        />
-      </BaseField>
-    )
-  })
-  Field.displayName = displayName
-
-  return Field
-}
-
-export const withControlledInput = (InputComponent: React.FC<any>) => {
-  return forwardRef<FieldProps, typeof InputComponent>(
-    ({ name, rules, ...inputProps }, ref) => {
-      const { control } = useFormContext()
-
-      return (
-        <Controller
-          name={name}
-          control={control}
-          rules={rules}
-          render={({ field: { ref: _ref, ...field } }) => (
-            <InputComponent
-              {...field}
-              {...inputProps}
-              onChange={callAllHandlers(inputProps.onChange, field.onChange)}
-              onBlur={callAllHandlers(inputProps.onBlur, field.onBlur)}
-              ref={useMergeRefs(ref, _ref)}
-            />
-          )}
-        />
-      )
-    }
-  )
-}
-
-export const withUncontrolledInput = (InputComponent: React.FC<any>) => {
-  return forwardRef<FieldProps, typeof InputComponent>(
-    ({ name, rules, ...inputProps }, ref) => {
-      const { register } = useFormContext()
-
-      const { ref: _ref, ...field } = register(name, rules)
-
-      return (
-        <InputComponent
-          {...field}
-          {...inputProps}
-          onChange={callAllHandlers(inputProps.onChange, field.onChange)}
-          onBlur={callAllHandlers(inputProps.onBlur, field.onBlur)}
-          ref={useMergeRefs(ref, _ref)}
-        />
-      )
-    }
-  )
-}
-
-export interface RegisterFieldTypeOptions {
-  isControlled?: boolean
-  hideLabel?: boolean
-  BaseField?: React.FC<any>
-}
-
-/**
- * Register a new field type
- * @param type The name for this field in kebab-case, eg `email` or `array-field`
- * @param component The React component
- * @param options
- * @param options.isControlled Set this to true if this is a controlled field.
- * @param options.hideLabel Hide the field label, for example for the checkbox field.
- */
-export const registerFieldType = <T extends object>(
-  type: string,
-  component: React.FC<T>,
-  options?: RegisterFieldTypeOptions
-) => {
-  let InputComponent
-  if (options?.isControlled) {
-    InputComponent = withControlledInput(component)
-  } else {
-    InputComponent = withUncontrolledInput(component)
-  }
-
-  const Field = createField(InputComponent, {
-    displayName: `${type
-      .split('-')
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join('')}Field`,
-    hideLabel: options?.hideLabel,
-    BaseField: options?.BaseField || BaseField,
-  }) as React.FC<T & FieldProps>
-
-  inputTypes[type] = Field
-
-  return Field
-}
-
-export interface InputFieldProps extends InputProps {
-  type?: string
-  leftAddon?: React.ReactNode
-  rightAddon?: React.ReactNode
-}
-
-export const InputField = registerFieldType<InputFieldProps>(
-  'text',
-  forwardRef(({ type = 'text', leftAddon, rightAddon, size, ...rest }, ref) => {
-    const input = <Input type={type} size={size} {...rest} ref={ref} />
-    if (leftAddon || rightAddon) {
-      return (
-        <InputGroup size={size}>
-          {leftAddon}
-          {input}
-          {rightAddon}
-        </InputGroup>
-      )
-    }
-    return input
-  })
-)
-
-export interface NumberInputFieldProps extends NumberInputProps {
-  type: 'number'
-}
-
-export const NumberInputField = registerFieldType<NumberInputFieldProps>(
-  'number',
-  NumberInput,
-  {
-    isControlled: true,
-  }
-)
-
-export const PasswordInputField = registerFieldType<PasswordInputProps>(
-  'password',
-  forwardRef((props, ref) => <PasswordInput ref={ref} {...props} />)
-)
-
-export const TextareaField = registerFieldType<TextareaProps>(
-  'textarea',
-  Textarea
-)
-
-export const SwitchField = registerFieldType<SwitchProps>(
-  'switch',
-  forwardRef(({ type, value, ...rest }, ref) => {
-    return <Switch isChecked={!!value} {...rest} ref={ref} />
-  }),
-  {
-    isControlled: true,
-  }
-)
-
-export const SelectField = registerFieldType<SelectProps>('select', Select, {
-  isControlled: true,
-})
-
-export const CheckboxField = registerFieldType<CheckboxProps>(
-  'checkbox',
-  forwardRef(({ label, type, ...props }, ref) => {
-    return (
-      <Checkbox ref={ref} {...props}>
-        {label}
-      </Checkbox>
-    )
-  }),
-  {
-    hideLabel: true,
-  }
-)
-
-export const RadioField = registerFieldType<RadioInputProps>(
-  'radio',
-  RadioInput,
-  {
-    isControlled: true,
-  }
-)
-
-export const NativeSelectField = registerFieldType<NativeSelectProps>(
-  'native-select',
-  NativeSelect,
-  { isControlled: true }
-)
-
-export interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
-  pinLength?: number
-  pinType?: 'alphanumeric' | 'number'
-  spacing?: SystemProps['margin']
-}
-
-export const PinField = registerFieldType<PinFieldProps>(
-  'pin',
-  forwardRef((props, ref) => {
-    const { pinLength = 4, pinType, spacing, ...inputProps } = props
-
-    const inputs: React.ReactNode[] = []
-    for (let i = 0; i < pinLength; i++) {
-      inputs.push(<PinInputField key={i} ref={ref} />)
-    }
-
-    return (
-      <HStack spacing={spacing}>
-        <PinInput {...inputProps} type={pinType}>
-          {inputs}
-        </PinInput>
-      </HStack>
-    )
-  }),
-  {
-    isControlled: true,
-  }
-)
-
-const fieldTypes = {
-  text: InputField,
-  email: InputField,
-  url: InputField,
-  phone: InputField,
-  number: NumberInputField,
-  password: PasswordInputField,
-  textarea: TextareaField,
-  switch: SwitchField,
-  checkbox: CheckboxField,
-  radio: RadioField,
-  pin: PinField,
-  select: SelectField,
-  'native-select': NativeSelectField,
-}
-
-type FieldTypes = typeof fieldTypes
-
-type FieldType<Props = any> = React.ElementType<Props>
-
-type TypeProps<P extends FieldType, T> = React.ComponentPropsWithoutRef<P> & {
-  type: T
-}
-
-type FieldTypeProps =
-  | {
-      [Property in keyof FieldTypes]: TypeProps<FieldTypes[Property], Property>
-    }[keyof FieldTypes]
-  | { type?: string }

package/src/fields-context.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { defaultFieldTypes, InputField } from './default-fields'
+
+const FieldsContext = React.createContext<Record<string, React.FC<any>> | null>(
+  null
+)
+
+export const FieldsProvider: React.FC<{
+  value: Record<string, React.FC<any>>
+  children: React.ReactNode
+}> = (props) => {
+  const fields = { ...defaultFieldTypes, ...props.value }
+  return (
+    <FieldsContext.Provider value={fields}>
+      {props.children}
+    </FieldsContext.Provider>
+  )
+}
+
+export const useField = (type: string): React.FC<any> => {
+  const context = React.useContext(FieldsContext)
+  return context?.[type] || InputField
+}

package/src/fields.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { __DEV__ } from '@chakra-ui/utils'
 
 import { Form } from './form'
 import { FormLayout } from './layout'
-import { Field, FieldProps } from './field'
+import { BaseFieldProps } from './types'
+import { Field } from './field'
 
 import { ArrayField } from './array-field'
 import { ObjectField } from './object-field'
@@ -20,13 +20,21 @@ const mapNestedFields = (resolver: FieldResolver, name: string) => {
   return resolver
     .getNestedFields(name)
     ?.map(
-      ({ name, type, ...nestedFieldProps }: FieldProps, i): React.ReactNode => (
-        <Field key={name || i} name={name} type={type} {...nestedFieldProps} />
+      (
+        { name, type, ...nestedFieldProps }: BaseFieldProps,
+        i
+      ): React.ReactNode => (
+        <Field
+          key={name || i}
+          name={name}
+          type={type as any}
+          {...nestedFieldProps}
+        />
       )
     )
 }
 
-export const Fields: React.FC<FieldsProps> = ({
+export const AutoFields: React.FC<FieldsProps> = ({
   schema,
   fieldResolver,
   focusFirstField,
@@ -55,7 +63,7 @@ export const Fields: React.FC<FieldsProps> = ({
           type,
           defaultValue,
           ...fieldProps
-        }: FieldProps): React.ReactNode => {
+        }: BaseFieldProps): React.ReactNode => {
           if (type === 'array') {
             return (
               <ArrayField key={name} name={name} {...fieldProps}>
@@ -70,11 +78,13 @@ export const Fields: React.FC<FieldsProps> = ({
             )
           }
 
-          return <Field key={name} name={name} type={type} {...fieldProps} />
+          return (
+            <Field key={name} name={name} type={type as any} {...fieldProps} />
+          )
         }
       )}
     </FormLayout>
   )
 }
 
-Fields.displayName = 'Fields'
+AutoFields.displayName = 'Fields'

package/src/form.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'
-import { cx, runIfFn, __DEV__ } from '@chakra-ui/utils'
+import { cx, runIfFn } from '@chakra-ui/utils'
 
 import {
   useForm,
@@ -20,19 +20,23 @@ import { MaybeRenderProp } from '@chakra-ui/react-utils'
 
 export type { UseFormReturn, FieldValues, SubmitHandler }
 
-import { Field as DefaultField, FieldProps } from './field'
+import { FieldProps } from './types'
 
-interface FormRenderContext<
+import { Field as DefaultField } from './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>
 }
 
 interface FormOptions<
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any
+  TSchema = any,
+  TFieldTypes = FieldProps<TFieldValues>
 > {
   /**
    * The form schema, supports Yup, Zod, and AJV.
@@ -57,25 +61,34 @@ interface FormOptions<
   /**
    * The form children, can be a render prop or a ReactNode.
    */
-  children?: MaybeRenderProp<FormRenderContext<TFieldValues, TContext>>
+  children?: MaybeRenderProp<
+    FormRenderContext<TFieldValues, TContext, TFieldTypes>
+  >
 }
 
 export interface FormProps<
   TFieldValues extends FieldValues = FieldValues,
   TContext extends object = object,
-  TSchema = any
+  TSchema = any,
+  TFieldTypes = FieldProps<TFieldValues>
 > extends UseFormProps<TFieldValues, TContext>,
     Omit<
       HTMLChakraProps<'form'>,
       'children' | 'onChange' | 'onSubmit' | 'onError'
     >,
-    FormOptions<TFieldValues, TContext, TSchema> {}
+    FormOptions<TFieldValues, TContext, TSchema, TFieldTypes> {}
 
+/**
+ * The wrapper component provides context, state, and focus management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 export const Form = forwardRef(
   <
     TFieldValues extends FieldValues = FieldValues,
     TContext extends object = object,
-    TSchema = any
+    TSchema = any,
+    TFieldTypes = FieldProps<TFieldValues>
   >(
     props: FormProps<TFieldValues, TContext, TSchema>,
     ref: React.ForwardedRef<HTMLFormElement>
@@ -135,11 +148,6 @@ export const Form = forwardRef(
       return () => subscription?.unsubscribe()
     }, [methods, onChange])
 
-    const Field: React.FC<FieldProps<TFieldValues>> = React.useMemo(
-      () => (props) => <DefaultField<TFieldValues> {...props} />,
-      []
-    )
-
     return (
       <FormProvider {...methods}>
         <chakra.form
@@ -149,7 +157,7 @@ export const Form = forwardRef(
           className={cx('sui-form', props.className)}
         >
           {runIfFn(children, {
-            Field,
+            Field: DefaultField as any,
             ...methods,
           })}
         </chakra.form>
@@ -159,9 +167,10 @@ export const Form = forwardRef(
 ) as (<
   TFieldValues extends FieldValues,
   TContext extends object = object,
-  TSchema = any
+  TSchema = any,
+  TFieldTypes = FieldProps<TFieldValues>
 >(
-  props: FormProps<TFieldValues, TContext, TSchema> & {
+  props: FormProps<TFieldValues, TContext, TSchema, TFieldTypes> & {
     ref?: React.ForwardedRef<HTMLFormElement>
   }
 ) => React.ReactElement) & {
@@ -186,22 +195,3 @@ export type GetResolver = <
 ) => 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
-}