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

package/src/create-field.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react'
+import { Controller } from 'react-hook-form'
+
+import { forwardRef, useMergeRefs } from '@chakra-ui/react'
+import { callAllHandlers } from '@chakra-ui/utils'
+import { BaseFieldProps, FieldProps } from './types'
+import { BaseField } from './base-field'
+import { useFormContext } from './form-context'
+
+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
+}
+
+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)}
+            />
+          )}
+        />
+      )
+    }
+  )
+}
+
+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 CreateFieldOptions {
+  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 createField = <TProps extends object>(
+  component: React.FC<TProps>,
+  options?: CreateFieldOptions
+) => {
+  let InputComponent
+  if (options?.isControlled) {
+    InputComponent = withControlledInput(component)
+  } else {
+    InputComponent = withUncontrolledInput(component)
+  }
+
+  const Field = _createField(InputComponent, {
+    displayName: `${component.displayName ?? 'Custom'}Field`,
+    hideLabel: options?.hideLabel,
+    BaseField: options?.BaseField || BaseField,
+  }) as React.FC<TProps & BaseFieldProps>
+
+  return Field
+}

package/src/create-form.tsx

@@ -0,0 +1,68 @@
+import React, { ForwardedRef } from 'react'
+import { FieldsProvider } from './fields-context'
+import { Form, FieldValues, FormProps, GetResolver } from './form'
+import { DefaultFieldOverrides, WithFields } from './types'
+import { objectFieldResolver } from './field-resolver'
+import { GetFieldResolver } from './field-resolver'
+import { forwardRef } from '@chakra-ui/react'
+
+export interface CreateFormProps<FieldDefs> {
+  resolver?: GetResolver
+  fieldResolver?: GetFieldResolver
+  fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
+}
+
+export type FormType<
+  FieldDefs,
+  ExtraProps = object,
+  ExtraOverrides = object
+> = (<
+  TSchema = unknown,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object
+>(
+  props: WithFields<
+    FormProps<TSchema, TFieldValues, TContext>,
+    FieldDefs,
+    ExtraOverrides
+  > & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  } & ExtraProps
+) => React.ReactElement) & {
+  displayName?: string
+  id?: string
+}
+
+export function createForm<FieldDefs>({
+  resolver,
+  fieldResolver = objectFieldResolver,
+  fields,
+}: CreateFormProps<FieldDefs> = {}) {
+  const DefaultForm = forwardRef(
+    <
+      TSchema = any,
+      TFieldValues extends FieldValues = FieldValues,
+      TContext extends object = object
+    >(
+      props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs>,
+      ref: ForwardedRef<HTMLFormElement>
+    ) => {
+      const { schema, ...rest } = props
+      return (
+        <FieldsProvider value={fields || {}}>
+          <Form
+            ref={ref}
+            resolver={resolver?.(props.schema)}
+            fieldResolver={fieldResolver?.(schema)}
+            {...rest}
+          />
+        </FieldsProvider>
+      )
+    }
+  ) as FormType<FieldDefs>
+
+  DefaultForm.displayName = 'Form'
+  DefaultForm.id = 'Form'
+
+  return DefaultForm
+}

package/src/create-step-form.tsx

@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react'
+import { forwardRef } from '@chakra-ui/react'
+import {
+  ArrayField,
+  DisplayIf,
+  FieldProps,
+  FieldValues,
+  FieldsProvider,
+  Form,
+  GetFieldResolver,
+  ObjectField,
+} from './'
+import { Field } from './field'
+import { FormStep, StepsOptions } from './step-form'
+import {
+  StepFormProvider,
+  UseStepFormProps,
+  useStepForm,
+} from './use-step-form'
+import { StepperProvider } from '@saas-ui/core'
+import { runIfFn } from '@chakra-ui/utils'
+import { GetResolver } from './form'
+
+type StepFormType<FieldDefs, ExtraProps = object, ExtraOverrides = object> = (<
+  TSteps extends StepsOptions<any> = StepsOptions<any>,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object,
+  TFieldTypes = FieldProps<TFieldValues>
+>(
+  props: UseStepFormProps<TSteps, TFieldValues, TContext, TFieldTypes> & {
+    ref?: React.ForwardedRef<HTMLFormElement>
+  }
+) => React.ReactElement) & {
+  displayName?: string
+  id?: string
+}
+
+export type DefaultFormType<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraOverrides = object
+> = (<
+  TFieldValues extends Record<string, any> = any,
+  TContext extends object = object,
+  TSchema = unknown
+>(
+  props: any
+) => React.ReactElement) & {
+  displayName?: string
+  id?: string
+}
+
+export interface CreateFormProps<FieldDefs> {
+  resolver?: GetResolver
+  fieldResolver?: GetFieldResolver
+  fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
+}
+
+export function createStepForm<
+  FieldDefs = any,
+  ExtraProps = object,
+  ExtraOverrides = object
+>({ fields, resolver, fieldResolver }: CreateFormProps<FieldDefs> = {}) {
+  const StepForm = forwardRef<any, 'div'>((props, ref) => {
+    const { children, steps, ...rest } = props
+
+    const stepper = useStepForm({
+      resolver,
+      fieldResolver,
+      ...props,
+    })
+
+    const { getFormProps, ...ctx } = stepper
+
+    const context = useMemo(() => ctx, [ctx])
+
+    return (
+      <StepperProvider value={context}>
+        <StepFormProvider value={context}>
+          <FieldsProvider value={fields || {}}>
+            <Form ref={ref} {...rest} {...getFormProps()}>
+              {runIfFn(children, {
+                ...stepper,
+                Field: Field as any,
+                FormStep: FormStep as any,
+                DisplayIf: DisplayIf as any,
+                ArrayField: ArrayField as any,
+                ObjectField: ObjectField as any,
+              })}
+            </Form>
+          </FieldsProvider>
+        </StepFormProvider>
+      </StepperProvider>
+    )
+  }) as StepFormType<FieldDefs, ExtraProps, ExtraOverrides>
+
+  StepForm.displayName = `Step${Form.displayName || Form.name}`
+
+  return StepForm
+}

package/src/default-fields.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+
+import {
+  forwardRef,
+  Input,
+  Textarea,
+  Checkbox,
+  Switch,
+  InputGroup,
+  InputProps,
+  TextareaProps,
+  SwitchProps,
+  CheckboxProps,
+  PinInputField,
+  HStack,
+  PinInput,
+  UsePinInputProps,
+  SystemProps,
+} from '@chakra-ui/react'
+
+import { NumberInput, NumberInputProps } from './number-input'
+import { PasswordInput, PasswordInputProps } from './password-input'
+import { RadioInput, RadioInputProps } from './radio'
+
+import {
+  Select,
+  SelectButton,
+  SelectList,
+  SelectProps,
+  NativeSelect,
+  NativeSelectProps,
+} from './select'
+
+import { createField } from './create-field'
+
+export interface InputFieldProps extends InputProps {
+  type?: string
+  leftAddon?: React.ReactNode
+  rightAddon?: React.ReactNode
+}
+
+export const InputField = createField<InputFieldProps>(
+  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 = createField<NumberInputFieldProps>(
+  NumberInput,
+  {
+    isControlled: true,
+  }
+)
+
+export const PasswordInputField = createField<PasswordInputProps>(
+  forwardRef((props, ref) => <PasswordInput ref={ref} {...props} />)
+)
+
+export const TextareaField = createField<TextareaProps>(Textarea)
+
+export const SwitchField = createField<SwitchProps>(
+  forwardRef(({ type, value, ...rest }, ref) => {
+    return <Switch isChecked={!!value} {...rest} ref={ref} />
+  }),
+  {
+    isControlled: true,
+  }
+)
+
+export const SelectField = createField<SelectProps>(
+  forwardRef((props, ref) => {
+    return (
+      <Select ref={ref} {...props}>
+        <SelectButton />
+        <SelectList />
+      </Select>
+    )
+  }),
+  {
+    isControlled: true,
+  }
+)
+
+export const CheckboxField = createField<CheckboxProps>(
+  forwardRef(({ label, type, ...props }, ref) => {
+    return (
+      <Checkbox ref={ref} {...props}>
+        {label}
+      </Checkbox>
+    )
+  }),
+  {
+    hideLabel: true,
+  }
+)
+
+export const RadioField = createField<RadioInputProps>(RadioInput, {
+  isControlled: true,
+})
+
+export const NativeSelectField = createField<NativeSelectProps>(NativeSelect, {
+  isControlled: true,
+})
+
+export interface PinFieldProps extends Omit<UsePinInputProps, 'type'> {
+  pinLength?: number
+  pinType?: 'alphanumeric' | 'number'
+  spacing?: SystemProps['margin']
+}
+
+export const PinField = createField<PinFieldProps>(
+  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,
+  }
+)
+
+export const defaultFieldTypes = {
+  text: InputField,
+  email: InputField,
+  url: InputField,
+  phone: InputField,
+  number: NumberInputField,
+  password: PasswordInputField,
+  textarea: TextareaField,
+  switch: SwitchField,
+  select: SelectField,
+  checkbox: CheckboxField,
+  radio: RadioField,
+  pin: PinField,
+  'native-select': NativeSelectField,
+}
+
+export type DefaultFields = typeof defaultFieldTypes

package/src/display-field.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react'
-import { __DEV__ } from '@chakra-ui/utils'
-import { useFormContext } from 'react-hook-form'
-
+import { useFormContext } from './form-context'
 import {
   Text,
   FormControl,
@@ -9,12 +7,16 @@ import {
   FormLabel,
 } from '@chakra-ui/react'
 
-import { FieldProps } from './field'
+import { FieldProps } from './types'
 
 export interface DisplayFieldProps
   extends FormControlProps,
     Omit<FieldProps, 'type' | 'label'> {}
-
+/**
+ *
+ *
+ * @see Docs https://saas-ui.dev/
+ */
 export const DisplayField: React.FC<DisplayFieldProps> = ({
   name,
   label,
@@ -31,15 +33,11 @@ export const DisplayField: React.FC<DisplayFieldProps> = ({
   )
 }
 
-if (__DEV__) {
-  DisplayField.displayName = 'DisplayField'
-}
+DisplayField.displayName = 'DisplayField'
 
 export const FormValue: React.FC<{ name: string }> = ({ name }) => {
   const { getValues } = useFormContext()
   return getValues(name) || null
 }
 
-if (__DEV__) {
-  FormValue.displayName = 'FormValue'
-}
+FormValue.displayName = 'FormValue'

package/src/display-if.tsx

@@ -1,41 +1,48 @@
 import * as React from 'react'
-import { __DEV__ } from '@chakra-ui/utils'
 import {
-  useFormContext,
   useWatch,
   FieldValues,
   UseFormReturn,
+  FieldPath,
 } from 'react-hook-form'
 
+import { useFormContext } from './form-context'
+
 export interface DisplayIfProps<
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > {
   children: React.ReactElement
-  name: string
+  name: TName
   defaultValue?: unknown
   isDisabled?: boolean
   isExact?: boolean
   condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean
 }
-
-export const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({
+/**
+ * Conditionally render parts of a form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
+export const DisplayIf = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
   children,
   name,
   defaultValue,
   isDisabled,
   isExact,
   condition = (value) => !!value,
-}: DisplayIfProps<TFieldValues>) => {
-  const value = useWatch({
+}: DisplayIfProps<TFieldValues, TName>) => {
+  const value = useWatch<TFieldValues>({
     name,
-    defaultValue,
+    defaultValue: defaultValue as any,
     disabled: isDisabled,
     exact: isExact,
   })
-  const context = useFormContext<TFieldValues>()
+  const context = useFormContext() as any
   return condition(value, context) ? children : null
 }
 
-if (__DEV__) {
-  DisplayIf.displayName = 'DisplayIf'
-}
+DisplayIf.displayName = 'DisplayIf'

package/src/field-resolver.ts

@@ -1,20 +1,22 @@
-import { FieldProps } from './field'
+import { BaseFieldProps } from './types'
 
 import { get } from '@chakra-ui/utils'
 
 export type FieldResolver = {
-  getFields(): FieldProps[]
-  getNestedFields(name: string): FieldProps[]
+  getFields(): BaseFieldProps[]
+  getNestedFields(name: string): BaseFieldProps[]
 }
 
-interface SchemaField extends FieldProps {
+export type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver
+
+interface SchemaField extends BaseFieldProps {
   items?: SchemaField[]
   properties?: Record<string, SchemaField>
 }
 
 export type ObjectSchema = Record<string, SchemaField>
 
-const mapFields = (schema: ObjectSchema): FieldProps[] =>
+const mapFields = (schema: ObjectSchema): BaseFieldProps[] =>
   schema &&
   Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
     return {
@@ -24,11 +26,11 @@ const mapFields = (schema: ObjectSchema): FieldProps[] =>
     }
   })
 
-export const objectFieldResolver = (schema: ObjectSchema): FieldResolver => {
-  const getFields = () => {
+export const objectFieldResolver: GetFieldResolver<ObjectSchema> = (schema) => {
+  const getFields = (): BaseFieldProps[] => {
     return mapFields(schema)
   }
-  const getNestedFields = (name: string) => {
+  const getNestedFields = (name: string): BaseFieldProps[] => {
     const field = get(schema, name)
 
     if (!field) return []