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

package/src/base-field.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import {
+  useFormContext,
+  FormState,
+  get,
+  RegisterOptions,
+  FieldValues,
+} from 'react-hook-form'
+
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage,
+} from '@chakra-ui/react'
+import { FocusableElement } from '@chakra-ui/utils'
+import { useField } from './fields-context'
+import { BaseFieldProps, FieldProps } from './types'
+
+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)
+}
+
+/**
+ * The default BaseField component
+ * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
+ */
+export const BaseField: React.FC<BaseFieldProps> = (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>
+  )
+}
+
+BaseField.displayName = 'BaseField'

package/src/create-field.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react'
+import { useFormContext, 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'
+
+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,31 @@
+import React from 'react'
+import { FieldsProvider } from './fields-context'
+import { Form, FieldValues, FormProps, GetResolver } from './form'
+import { WithFields } from './types'
+
+export interface CreateFormProps<FieldDefs> {
+  resolver?: GetResolver
+  fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
+}
+
+export function createForm<FieldDefs, Schema = any>({
+  resolver,
+  fields,
+}: CreateFormProps<FieldDefs> = {}) {
+  const CreateForm = <
+    TFieldValues extends FieldValues,
+    TContext extends object = object,
+    TSchema extends Schema = Schema
+  >(
+    props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs>
+  ) => {
+    const { schema, ...rest } = props
+    return (
+      <FieldsProvider value={fields || {}}>
+        <Form resolver={resolver?.(props.schema)} {...rest} />
+      </FieldsProvider>
+    )
+  }
+
+  return CreateForm
+}

package/src/default-fields.tsx

@@ -0,0 +1,146 @@
+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, 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>(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,5 +1,4 @@
 import * as React from 'react'
-import { __DEV__ } from '@chakra-ui/utils'
 import { useFormContext } from 'react-hook-form'
 
 import {
@@ -9,12 +8,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 +34,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,5 +1,4 @@
 import * as React from 'react'
-import { __DEV__ } from '@chakra-ui/utils'
 import {
   useFormContext,
   useWatch,
@@ -17,7 +16,11 @@ export interface DisplayIfProps<
   isExact?: boolean
   condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean
 }
-
+/**
+ * Conditionally render parts of a form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 export const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({
   children,
   name,
@@ -36,6 +39,4 @@ export const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({
   return condition(value, context) ? children : null
 }
 
-if (__DEV__) {
-  DisplayIf.displayName = 'DisplayIf'
-}
+DisplayIf.displayName = 'DisplayIf'

package/src/field-resolver.ts

@@ -1,4 +1,4 @@
-import { FieldProps } from './field'
+import { BaseFieldProps as FieldProps } from './types'
 
 import { get } from '@chakra-ui/utils'