@saas-ui/forms 2.0.0-next.3 → 2.0.0-next.6

package/src/field.tsx

@@ -1,45 +1,10 @@
 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'
+import { useFieldProps } from './form-context'
 
 export interface Option {
   value: string
@@ -52,425 +17,33 @@ 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 { type = defaultInputType, name } = props
+    const overrides = useFieldProps(name)
+    const InputComponent = useField(overrides?.type || type)
 
-    return <InputComponent ref={ref} {...props} />
+    return <InputComponent ref={ref} {...props} {...overrides} />
   }
 ) 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,17 +1,16 @@
 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'
 import { FieldResolver } from './field-resolver'
-import { useFormContext } from 'react-hook-form'
+import { useFormContext } from './form-context'
 
-export interface FieldsProps {
-  schema: any
+export interface FieldsProps<TSchema = any> {
+  schema?: TSchema
   fieldResolver?: FieldResolver
   focusFirstField?: boolean
 }
@@ -20,42 +19,54 @@ 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> = ({
-  schema,
-  fieldResolver,
+export const AutoFields: React.FC<FieldsProps> = ({
+  schema: schemaProp,
+  fieldResolver: fieldResolverProp,
   focusFirstField,
   ...props
 }) => {
-  const resolver = React.useMemo(
-    () => fieldResolver || Form.getFieldResolver(schema),
-    [schema, fieldResolver]
-  )
+  const context = useFormContext()
+  const schema = schemaProp || context.schema
+  const fieldResolver = fieldResolverProp || context.fieldResolver
+  const resolver = React.useMemo(() => fieldResolver, [schema, fieldResolver])
 
-  const fields = React.useMemo(() => resolver.getFields(), [resolver])
+  const fields = React.useMemo(() => resolver?.getFields(), [resolver])
 
   const form = useFormContext()
 
   React.useEffect(() => {
-    if (focusFirstField && fields[0]?.name) {
+    if (focusFirstField && fields?.[0]?.name) {
       form.setFocus(fields[0].name)
     }
   }, [schema, fieldResolver, focusFirstField])
 
+  if (!resolver) {
+    return null
+  }
+
   return (
     <FormLayout {...props}>
-      {fields.map(
+      {fields?.map(
         ({
           name,
           type,
           defaultValue,
           ...fieldProps
-        }: FieldProps): React.ReactNode => {
+        }: BaseFieldProps): React.ReactNode => {
           if (type === 'array') {
             return (
               <ArrayField key={name} name={name} {...fieldProps}>
@@ -70,11 +81,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-context.tsx

@@ -0,0 +1,84 @@
+import { createContext, useContext } from 'react'
+import {
+  FormProvider as HookFormProvider,
+  FormProviderProps as HookFormProviderProps,
+  useFormContext as useHookFormContext,
+  FieldValues,
+} from 'react-hook-form'
+import { FieldResolver } from './field-resolver'
+import { BaseFieldProps, FieldProps } from './types'
+
+export type FormContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+> = {
+  fieldResolver?: FieldResolver
+  schema?: TSchema
+  fields?: {
+    [key: string]: unknown
+  }
+}
+
+export type FormProviderProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+> = HookFormProviderProps<TFieldValues, TContext> & {
+  fieldResolver?: FieldResolver
+  schema?: TSchema
+  fields?: {
+    [key: string]: unknown
+  }
+}
+
+const FormContext = createContext<FormContextValue | null>(null)
+
+export const useFormContext = <
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+>() => {
+  const context = useContext(FormContext)
+  const hookContext = useHookFormContext()
+
+  if (!context) {
+    throw new Error('FormProvider must be used within a Form component')
+  }
+
+  return {
+    ...hookContext,
+    ...context,
+  }
+}
+
+export const useFieldProps = <TFieldValues extends FieldValues = FieldValues>(
+  name: string
+): BaseFieldProps<TFieldValues> | undefined => {
+  const parsedName = name?.replace(/\.[0-9]/g, '.$')
+  const context = useFormContext()
+  return context?.fields?.[parsedName] as any
+}
+
+export type UseFormReturn<
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+> = ReturnType<typeof useFormContext>
+
+export const FormProvider = <
+  TFieldValues extends FieldValues = FieldValues,
+  TContext = any,
+  TSchema = any
+>(
+  props: FormProviderProps<TFieldValues, TContext, TSchema>
+) => {
+  const { children, fieldResolver, schema, fields, ...rest } = props
+  return (
+    <HookFormProvider {...rest}>
+      <FormContext.Provider value={{ fieldResolver, schema, fields }}>
+        {children}
+      </FormContext.Provider>
+    </HookFormProvider>
+  )
+}