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

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './display-field'
 export * from './field'
 export * from './fields'
+export * from './fields-context'
 export * from './form'
 export * from './auto-form'
 export * from './layout'
@@ -16,6 +17,43 @@ export * from './watch-field'
 export * from './input-right-button'
 export * from './select'
 export * from './password-input'
+export * from './radio'
+
+export * from './base-field'
+
+export {
+  CheckboxField,
+  InputField,
+  NativeSelectField,
+  NumberInputField,
+  PasswordInputField,
+  PinField,
+  RadioField,
+  SelectField,
+  SwitchField,
+  TextareaField,
+  defaultFieldTypes,
+} from './default-fields'
+
+export type {
+  DefaultFields,
+  InputFieldProps,
+  NumberInputFieldProps,
+  PinFieldProps,
+} from './default-fields'
+
+export type {
+  FieldProps,
+  WithFields,
+  BaseFieldProps,
+  FieldOptions,
+} from './types'
+
+export { createForm } from './create-form'
+export type { CreateFormProps } from './create-form'
+
+export { createField } from './create-field'
+export type { CreateFieldOptions } from './create-field'
 
 export type {
   BatchFieldArrayUpdate,

package/src/input-right-button/input-right-button.stories.tsx

@@ -37,7 +37,7 @@ const Template: ComponentStory<typeof InputRightButton> = (args) => (
 
 export const Basic = Template.bind({})
 Basic.args = {
-  label: 'Save',
+  children: 'Save',
 }
 
 export const WithIcon = Template.bind({})

package/src/input-right-button/input-right-button.tsx

@@ -7,8 +7,6 @@ import {
   InputRightElement,
 } from '@chakra-ui/react'
 
-import { __DEV__ } from '@chakra-ui/utils'
-
 export type InputRightButtonProps = ButtonProps
 
 export const InputRightButton = forwardRef<InputRightButtonProps, 'div'>(

package/src/layout.tsx

@@ -1,9 +1,15 @@
 import * as React from 'react'
 
-import { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'
-import { cx, __DEV__ } from '@chakra-ui/utils'
+import {
+  chakra,
+  ResponsiveValue,
+  SimpleGrid,
+  SimpleGridProps,
+  useTheme,
+} from '@chakra-ui/react'
+import { cx } from '@chakra-ui/utils'
 
-export type FormLayoutProps = SimpleGridProps
+export interface FormLayoutProps extends SimpleGridProps {}
 
 interface FormLayoutItemProps {
   children: React.ReactNode
@@ -13,20 +19,21 @@ const FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {
   return <chakra.div>{children}</chakra.div>
 }
 
-if (__DEV__) {
-  FormLayoutItem.displayName = 'FormLayoutItem'
-}
+FormLayoutItem.displayName = 'FormLayoutItem'
 
 /**
- * FormLayout
+ * Create consistent field spacing and positioning.
+ *
  *
  * Renders form items in a `SimpleGrid`
  * @see https://chakra-ui.com/docs/layout/simple-grid
+ *
+ * @see https://saas-ui.dev/docs/components/forms/form
  */
 export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
   const theme = useTheme()
 
-  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {
+  const defaultProps = theme.components?.SuiFormLayout?.defaultProps ?? {
     spacing: 4,
   }
 
@@ -50,6 +57,4 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
   )
 }
 
-if (__DEV__) {
-  FormLayout.displayName = 'FormLayout'
-}
+FormLayout.displayName = 'FormLayout'

package/src/number-input/number-input.tsx

@@ -9,7 +9,8 @@ import {
   NumberDecrementStepper,
   NumberInputProps as ChakraNumberInputProps,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
+
+import { ChevronDownIcon, ChevronUpIcon } from '@saas-ui/core'
 
 interface NumberInputOptions {
   /**
@@ -31,7 +32,12 @@ export interface NumberInputProps
     NumberInputOptions {}
 
 export const NumberInput = forwardRef<NumberInputProps, 'div'>((props, ref) => {
-  const { hideStepper, incrementIcon, decrementIcon, ...rest } = props
+  const {
+    hideStepper,
+    incrementIcon = <ChevronUpIcon />,
+    decrementIcon = <ChevronDownIcon />,
+    ...rest
+  } = props
 
   return (
     <ChakraNumberInput {...rest} ref={ref}>
@@ -51,6 +57,4 @@ NumberInput.defaultProps = {
   hideStepper: false,
 }
 
-if (__DEV__) {
-  NumberInput.displayName = 'NumberInput'
-}
+NumberInput.displayName = 'NumberInput'

package/src/object-field.tsx

@@ -6,14 +6,13 @@ import {
   ResponsiveValue,
   useStyleConfig,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
 
 import { FormLayout } from './layout'
-import { FieldProps } from './field'
+import { BaseFieldProps } from './types'
 
 import { mapNestedFields } from './utils'
 
-export interface ObjectFieldProps extends FieldProps {
+export interface ObjectFieldProps extends BaseFieldProps {
   name: string
   children: React.ReactNode
   columns?: ResponsiveValue<number>
@@ -24,7 +23,11 @@ export const FormLegend = (props: FormLabelProps) => {
   const styles = useStyleConfig('SuiFormLegend')
   return <FormLabel as="legend" sx={styles} {...props} />
 }
-
+/**
+ * The object field component.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/object-field
+ */
 export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
   const { name, label, hideLabel, children, columns, spacing, ...fieldProps } =
     props
@@ -39,6 +42,4 @@ export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
   )
 }
 
-if (__DEV__) {
-  ObjectField.displayName = 'ObjectField'
-}
+ObjectField.displayName = 'ObjectField'

package/src/password-input/password-input.stories.tsx

@@ -1,8 +1,15 @@
-import { Container, FormControl, FormLabel, Icon } from '@chakra-ui/react'
+import {
+  Container,
+  FormControl,
+  FormLabel,
+  Icon,
+  InputLeftAddon,
+  InputLeftElement,
+} from '@chakra-ui/react'
 import { Story } from '@storybook/react'
 import * as React from 'react'
 
-import { FiEye, FiEyeOff } from 'react-icons/fi'
+import { FiEye, FiEyeOff, FiLock } from 'react-icons/fi'
 
 import { PasswordInput } from './password-input'
 
@@ -48,3 +55,17 @@ export const CustomWidth: Story = () => (
     <PasswordInput name="password" width="200px" />
   </FormControl>
 )
+
+export const LeftAddon: Story = () => (
+  <FormControl>
+    <FormLabel>Password</FormLabel>
+    <PasswordInput
+      name="password"
+      leftAddon={
+        <InputLeftElement>
+          <FiLock />
+        </InputLeftElement>
+      }
+    />
+  </FormControl>
+)

package/src/password-input/password-input.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 import { forwardRef, InputGroup, Input, InputProps } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
+
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
 
 import { InputRightButton } from '../input-right-button'
@@ -9,6 +9,7 @@ import { InputRightButton } from '../input-right-button'
 interface PasswordOptions {
   viewIcon?: React.ReactNode
   viewOffIcon?: React.ReactNode
+  leftAddon?: React.ReactNode
 }
 
 export interface PasswordInputProps extends InputProps, PasswordOptions {}
@@ -23,6 +24,7 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
       width,
       size,
       variant,
+      leftAddon,
       ...inputProps
     } = props
     const [show, setShow] = useState(false)
@@ -45,13 +47,13 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
 
     return (
       <InputGroup {...groupProps}>
+        {leftAddon}
         <Input
           {...inputProps}
           ref={ref}
           type={show ? 'text' : 'password'}
           autoComplete={show ? 'off' : autoComplete}
         />
-
         <InputRightButton
           onClick={handleClick}
           aria-label={label}
@@ -64,6 +66,4 @@ export const PasswordInput = forwardRef<PasswordInputProps, 'div'>(
   }
 )
 
-if (__DEV__) {
-  PasswordInput.displayName = 'PasswordInput'
-}
+PasswordInput.displayName = 'PasswordInput'

package/src/pin-input/pin-input.tsx

@@ -8,8 +8,6 @@ import {
   SystemProps,
 } from '@chakra-ui/react'
 
-import { __DEV__ } from '@chakra-ui/utils'
-
 interface PinInputOptions {
   /**
    * The pin length.
@@ -45,6 +43,4 @@ PinInput.defaultProps = {
   pinLength: 4,
 }
 
-if (__DEV__) {
-  PinInput.displayName = 'PinInput'
-}
+PinInput.displayName = 'PinInput'

package/src/radio/radio-input.stories.tsx

@@ -6,7 +6,7 @@ import { ComponentStory } from '@storybook/react'
 import { RadioInput } from './'
 
 export default {
-  title: 'Components/Forms/Radio',
+  title: 'Components/Forms/RadioInput',
   decorators: [
     (Story: any) => (
       <Container mt="40px">

package/src/radio/radio-input.tsx

@@ -10,15 +10,17 @@ import {
   SystemProps,
   StackDirection,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
+import { FieldOptions, FieldOption } from '../types'
+import { mapOptions } from '../utils'
 
-interface Option extends RadioProps {
-  value: string
-  label?: string
-}
+export interface RadioOption
+  extends Omit<RadioProps, 'value' | 'label'>,
+    FieldOption {}
+
+export type RadioOptions = FieldOptions<RadioOption>
 
 interface RadioInputOptions {
-  options: Option[]
+  options: RadioOptions
   spacing?: SystemProps['margin']
   direction?: StackDirection
 }
@@ -28,9 +30,11 @@ export interface RadioInputProps
     RadioInputOptions {}
 
 export const RadioInput = forwardRef<RadioInputProps, 'div'>(
-  ({ options, spacing, direction, ...props }, ref) => {
+  ({ options: optionsProp, spacing, direction, ...props }, ref) => {
     const { onBlur, onChange, ...groupProps } = props
 
+    const options = mapOptions(optionsProp)
+
     return (
       <RadioGroup onChange={onChange} {...groupProps}>
         <Stack spacing={spacing} direction={direction}>
@@ -53,6 +57,4 @@ export const RadioInput = forwardRef<RadioInputProps, 'div'>(
   }
 )
 
-if (__DEV__) {
-  RadioInput.displayName = 'RadioInput'
-}
+RadioInput.displayName = 'RadioInput'

package/src/select/native-select.tsx

@@ -5,7 +5,6 @@ import {
   Select as ChakraSelect,
   SelectProps as ChakraSelectProps,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
 
 interface Option {
   value: string
@@ -37,6 +36,4 @@ export const NativeSelect = forwardRef<NativeSelectProps, 'select'>(
   }
 )
 
-if (__DEV__) {
-  NativeSelect.displayName = 'NativeSelect'
-}
+NativeSelect.displayName = 'NativeSelect'

package/src/select/select.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { render, testStories } from '@saas-ui/test-utils'
-import * as stories from '../stories/select.stories'
+import * as stories from './select.stories'
 
 const { MaxHeight, ...rest } = stories
 

package/src/select/select.tsx

@@ -18,21 +18,24 @@ import {
   SystemStyleObject,
   useFormControl,
   HTMLChakraProps,
+  MenuItemOptionProps,
 } from '@chakra-ui/react'
-import { ChevronDownIcon } from '@chakra-ui/icons'
-import { cx, __DEV__ } from '@chakra-ui/utils'
+import { cx } from '@chakra-ui/utils'
+import { ChevronDownIcon } from '@saas-ui/core'
 
-interface Option {
-  value: string
-  label?: string
-}
+import { FieldOptions, FieldOption } from '../types'
+import { mapOptions } from '../utils'
+
+export interface SelectOption
+  extends Omit<MenuItemOptionProps, 'value'>,
+    FieldOption {}
 
 interface SelectOptions {
   /**
    * An array of options
    * If you leave this empty the children prop will be rendered.
    */
-  options?: Option[]
+  options?: FieldOptions<SelectOption>
   /**
    * Props passed to the MenuList.
    */
@@ -80,14 +83,12 @@ const SelectButton = forwardRef((props, ref) => {
   return <MenuButton as={Button} {...props} ref={ref} sx={buttonStyles} />
 })
 
-if (__DEV__) {
-  SelectButton.displayName = 'SelectButton'
-}
+SelectButton.displayName = 'SelectButton'
 
 export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
   const {
     name,
-    options,
+    options: optionsProp,
     children,
     onChange,
     defaultValue,
@@ -109,6 +110,11 @@ export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
 
   const controlProps = useFormControl({ name } as HTMLChakraProps<'input'>)
 
+  const options = React.useMemo(
+    () => optionsProp && mapOptions(optionsProp),
+    [optionsProp]
+  )
+
   const handleChange = (value: string | string[]) => {
     setCurrentValue(value)
     onChange?.(value)
@@ -180,6 +186,4 @@ export const Select = forwardRef<SelectProps, 'select'>((props, ref) => {
   )
 })
 
-if (__DEV__) {
-  Select.displayName = 'Select'
-}
+Select.displayName = 'Select'

package/src/step-form.tsx

@@ -10,7 +10,7 @@ import {
   ThemingProps,
 } from '@chakra-ui/react'
 
-import { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'
+import { callAllHandlers, runIfFn, cx } from '@chakra-ui/utils'
 
 import {
   StepperProvider,
@@ -38,6 +38,11 @@ export interface StepFormProps<
   TContext extends object = object
 > extends UseStepFormProps<TFieldValues> {}
 
+/**
+ * The wrapper component provides context, state, and focus management.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const StepForm = React.forwardRef(
   <
     TFieldValues extends FieldValues = FieldValues,
@@ -89,6 +94,11 @@ export interface FormStepperProps
   extends StepperStepsProps,
     ThemingProps<'Stepper'> {}
 
+/**
+ * Renders a stepper that displays progress above the form.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const FormStepper: React.FC<FormStepperProps> = (props) => {
   const { activeIndex, setIndex } = useStepperContext()
 
@@ -139,7 +149,11 @@ export interface FormStepProps
     Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
   onSubmit?: FormStepSubmitHandler
 }
-
+/**
+ * The form step containing fields for a specific step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const FormStep: React.FC<FormStepProps> = (props) => {
   const { name, schema, resolver, children, className, onSubmit, ...rest } =
     props
@@ -154,10 +168,13 @@ export const FormStep: React.FC<FormStepProps> = (props) => {
   ) : null
 }
 
-if (__DEV__) {
-  FormStep.displayName = 'FormStep'
-}
+FormStep.displayName = 'FormStep'
 
+/**
+ * A button that this opens the previous step when clicked. Disabled on the first step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const PrevButton: React.FC<ButtonProps> = (props) => {
   const { isFirstStep, isCompleted, prevStep } = useStepperContext()
 
@@ -172,15 +189,18 @@ export const PrevButton: React.FC<ButtonProps> = (props) => {
   )
 }
 
-if (__DEV__) {
-  PrevButton.displayName = 'PrevButton'
-}
+PrevButton.displayName = 'PrevButton'
 
 export interface NextButtonProps extends Omit<ButtonProps, 'children'> {
   submitLabel?: string
   label?: string
 }
 
+/**
+ * A button that submits the active step.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/step-form
+ */
 export const NextButton: React.FC<NextButtonProps> = (props) => {
   const { label = 'Next', submitLabel = 'Complete', ...rest } = props
   const { isLastStep, isCompleted } = useStepperContext()
@@ -196,6 +216,4 @@ export const NextButton: React.FC<NextButtonProps> = (props) => {
   )
 }
 
-if (__DEV__) {
-  NextButton.displayName = 'NextButton'
-}
+NextButton.displayName = 'NextButton'

package/src/submit-button.tsx

@@ -20,7 +20,11 @@ export interface SubmitButtonProps extends ButtonProps {
    */
   disableIfInvalid?: boolean
 }
-
+/**
+ * A button with type submit and default color scheme primary and isLoading state when the form is submitting.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/forms/form
+ */
 export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
   (props, ref) => {
     const {

package/src/types.ts

@@ -0,0 +1,91 @@
+import { FormControlProps } from '@chakra-ui/react'
+import { MaybeRenderProp } from '@chakra-ui/react-utils'
+import { FieldPath, FieldValues, RegisterOptions } from 'react-hook-form'
+import { DefaultFields } from './default-fields'
+import { FormProps, FormRenderContext } from './form'
+
+export type FieldOption = { label: string; value: string }
+export type FieldOptions<TOption extends FieldOption = FieldOption> =
+  | Array<string>
+  | Array<TOption>
+
+export type ValueOf<T> = T[keyof T]
+export type ShallowMerge<A, B> = Omit<A, keyof B> & B
+
+export interface BaseFieldProps<
+  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
+}
+
+type MergeFieldProps<
+  FieldDefs,
+  TFieldValues extends FieldValues = FieldValues
+> = ValueOf<{
+  [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props>
+    ? { type?: K } & ShallowMerge<Props, BaseFieldProps<TFieldValues>>
+    : never
+}>
+
+export type FieldProps<TFieldValues extends FieldValues = FieldValues> =
+  MergeFieldProps<DefaultFields, TFieldValues>
+
+export type FormChildren<
+  FieldDefs,
+  TFieldValues extends FieldValues = FieldValues,
+  TContext extends object = object
+> = MaybeRenderProp<
+  FormRenderContext<
+    TFieldValues,
+    TContext,
+    MergeFieldProps<
+      FieldDefs extends never
+        ? DefaultFields
+        : ShallowMerge<DefaultFields, FieldDefs>,
+      TFieldValues
+    >
+  >
+>
+
+export type WithFields<
+  TFormProps extends FormProps<any, any, any, any>,
+  FieldDefs
+> = TFormProps extends FormProps<infer TFieldValues, infer TContext>
+  ? Omit<TFormProps, 'children'> & {
+      children: FormChildren<FieldDefs, TFieldValues, TContext>
+    }
+  : never

package/src/utils.ts

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { FieldOption, FieldOptions } from './types'
 
 export const mapNestedFields = (name: string, children: React.ReactNode) => {
   return React.Children.map(children, (child) => {
@@ -11,3 +12,17 @@ export const mapNestedFields = (name: string, children: React.ReactNode) => {
     return child
   })
 }
+
+export const mapOptions = <TOption extends FieldOption = FieldOption>(
+  options: FieldOptions<TOption>
+) => {
+  return options.map((option) => {
+    if (typeof option === 'string') {
+      return {
+        label: option,
+        value: option,
+      }
+    }
+    return option
+  })
+}