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

package/src/create-form.tsx

@@ -0,0 +1,54 @@
+import React, { ForwardedRef } from 'react'
+import { FieldsProvider } from './fields-context'
+import { Form, FieldValues, FormProps, GetResolver } from './form'
+import { 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 function createForm<FieldDefs, Schema = any>({
+  resolver,
+  fieldResolver = objectFieldResolver,
+  fields,
+}: CreateFormProps<FieldDefs> = {}) {
+  const CreateForm = forwardRef(
+    <
+      TFieldValues extends FieldValues,
+      TContext extends object = object,
+      TSchema extends Schema = Schema
+    >(
+      props: WithFields<FormProps<TFieldValues, TContext, TSchema>, 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 (<
+    TFieldValues extends FieldValues,
+    TContext extends object = object,
+    TSchema extends Schema = Schema
+  >(
+    props: WithFields<FormProps<TFieldValues, TContext, TSchema>, FieldDefs> & {
+      ref?: React.ForwardedRef<HTMLFormElement>
+    }
+  ) => React.ReactElement) & {
+    displayName?: string
+  }
+
+  return CreateForm
+}

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 []