@saas-ui/forms 1.0.0-rc.1 → 1.0.0-rc.10

package/src/array-field.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 
-import { chakra, ResponsiveValue } from '@chakra-ui/system'
+import { chakra, ResponsiveValue, forwardRef } from '@chakra-ui/system'
 import { __DEV__ } from '@chakra-ui/utils'
 import { AddIcon, MinusIcon } from '@chakra-ui/icons'
 import { IconButton, ButtonProps } from '@saas-ui/button'
 
-import { FormLayout } from './layout'
+import { FormLayout, FormLayoutProps } from './layout'
 import { BaseField, FieldProps } from './field'
 
 import { mapNestedFields } from './utils'
@@ -28,7 +28,7 @@ interface ArrayField {
   [key: string]: unknown
 }
 
-interface ArrayFieldRowProps {
+interface ArrayFieldRowProps extends FormLayoutProps {
   /**
    * Amount of field columns
    */
@@ -41,21 +41,20 @@ interface ArrayFieldRowProps {
    * The array index
    */
   index: number
-
+  /**
+   * The fields
+   */
   children: React.ReactNode
 }
 
 export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
   children,
-  columns,
-  spacing,
   index,
+  ...rowFieldsProps
 }) => {
   return (
     <ArrayFieldRowContainer index={index}>
-      <ArrayFieldRowFields columns={columns} spacing={spacing}>
-        {children}
-      </ArrayFieldRowFields>
+      <ArrayFieldRowFields {...rowFieldsProps}>{children}</ArrayFieldRowFields>
       <ArrayFieldRemoveButton />
     </ArrayFieldRowContainer>
   )
@@ -65,7 +64,7 @@ if (__DEV__) {
   ArrayFieldRow.displayName = 'ArrayFieldRow'
 }
 
-export interface ArrayFieldRowFieldsProps {
+export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
   /**
    * Amount of field columns
    */
@@ -74,25 +73,19 @@ export interface ArrayFieldRowFieldsProps {
    * Spacing between fields
    */
   spacing?: ResponsiveValue<string | number>
-
+  /**
+   * The fields
+   */
   children: React.ReactNode
 }
 
 export const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({
   children,
-  columns,
-  spacing,
   ...layoutProps
 }) => {
   const { name } = useArrayFieldRowContext()
   return (
-    <FormLayout
-      flex="1"
-      columns={columns}
-      gridGap={spacing}
-      mr="2"
-      {...layoutProps}
-    >
+    <FormLayout flex="1" mr="2" {...layoutProps}>
       {mapNestedFields(name, children)}
     </FormLayout>
   )
@@ -162,7 +155,7 @@ export interface ArrayFieldProps
   extends ArrayFieldOptions,
     Omit<FieldProps, 'defaultValue'> {}
 
-export const ArrayField = React.forwardRef(
+export const ArrayField = forwardRef(
   (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {
     const { children, ...containerProps } = props
 
@@ -183,7 +176,13 @@ export const ArrayField = React.forwardRef(
       </ArrayFieldContainer>
     )
   }
-)
+) as ((
+  props: ArrayFieldProps & {
+    ref?: React.ForwardedRef<UseArrayFieldReturn>
+  }
+) => React.ReactElement) & {
+  displayName: string
+}
 
 if (__DEV__) {
   ArrayField.displayName = 'ArrayField'

package/src/auto-form.tsx

@@ -6,12 +6,24 @@ import { __DEV__ } from '@chakra-ui/utils'
 import { Form, FormProps } from './form'
 import { FormLayout } from './layout'
 import { Fields } from './fields'
-import { SubmitButton } from './submit-button'
+import { SubmitButton, SubmitButtonProps } from './submit-button'
 import { FieldResolver } from '.'
 
 interface AutoFormOptions {
-  submitLabel?: false | string
+  /**
+   * The submit button label.
+   * Pass `null` to render no submit button.
+   */
+  submitLabel?: React.ReactNode
+  /**
+   * The schema.
+   * Supports object schema, Yup or Zod.
+   * @see https://www.saas-ui.dev/docs/forms/auto-form
+   */
   schema: any
+  /**
+   * The field resolver.
+   */
   fieldResolver?: any
 }
 
@@ -24,13 +36,20 @@ export const AutoForm = forwardRef(
     props: AutoFormProps<TFieldValues>,
     ref: React.ForwardedRef<UseFormReturn<TFieldValues>>
   ) => {
-    const { schema, submitLabel = 'Submit', fieldResolver, ...rest } = props
+    const {
+      schema,
+      submitLabel = 'Submit',
+      fieldResolver,
+      children,
+      ...rest
+    } = props
 
     return (
       <Form {...rest} schema={schema} ref={ref}>
         <FormLayout>
           {<Fields schema={schema} fieldResolver={fieldResolver} />}
           {submitLabel && <SubmitButton label={submitLabel} />}
+          {children}
         </FormLayout>
       </Form>
     )

package/src/field-resolver.ts

@@ -14,9 +14,9 @@ interface SchemaField extends FieldProps {
 
 export type ObjectSchema = Record<string, SchemaField>
 
-const mapFields = (schema: ObjectSchema) =>
+const mapFields = (schema: ObjectSchema): FieldProps[] =>
   schema &&
-  Object.entries(schema).map(([name, field]) => {
+  Object.entries(schema).map(([name, { items, ...field }]) => {
     return {
       ...field,
       name,

package/src/field.tsx

@@ -22,14 +22,30 @@ import {
   Checkbox,
   Switch,
   useMergeRefs,
+  InputGroup,
+  InputProps,
+  TextareaProps,
+  SwitchProps,
+  CheckboxProps,
+  PinInputProps,
+  PinInputField,
+  HStack,
+  PinInput,
+  UsePinInputProps,
+  SystemProps,
 } from '@chakra-ui/react'
 import { __DEV__ } from '@chakra-ui/utils'
 
-import { NumberInput } from '@saas-ui/number-input'
-import { PasswordInput } from '@saas-ui/password-input'
-import { RadioInput } from '@saas-ui/radio'
-import { PinInput } from '@saas-ui/pin-input'
-import { Select, NativeSelect } from '@saas-ui/select'
+import { NumberInput, NumberInputProps } from '@saas-ui/number-input'
+import { PasswordInput, PasswordInputProps } from '@saas-ui/password-input'
+import { RadioInput, RadioInputProps } from '@saas-ui/radio'
+
+import {
+  Select,
+  SelectProps,
+  NativeSelect,
+  NativeSelectProps,
+} from '@saas-ui/select'
 import { FocusableElement } from '@chakra-ui/utils'
 
 export interface Option {
@@ -43,19 +59,6 @@ export type FieldRules = Pick<
   'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'
 >
 
-export type FieldTypes =
-  | 'text'
-  | 'number'
-  | 'password'
-  | 'textarea'
-  | 'select'
-  | 'native-select'
-  | 'checkbox'
-  | 'radio'
-  | 'switch'
-  | 'pin'
-  | string
-
 export interface FieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
@@ -84,11 +87,6 @@ export interface FieldProps<
     'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
   >
   /**
-   * Options used for selects and radio fields
-   */
-  options?: Option[]
-  /**
-   * The field type
    * Build-in types:
    * - text
    * - number
@@ -102,16 +100,15 @@ export interface FieldProps<
    * - pin
    *
    * Will default to a text field if there is no matching type.
-   * @default 'text'
    */
-  type?: FieldTypes
+  type?: string
   /**
    * The input placeholder
    */
   placeholder?: string
 }
 
-const inputTypes: Record<FieldTypes, any> = {}
+const inputTypes: Record<string, React.FC<any>> = {}
 
 const defaultInputType = 'text'
 
@@ -160,11 +157,30 @@ if (__DEV__) {
   BaseField.displayName = 'BaseField'
 }
 
-export const Field = forwardRef(
+export type As<Props = any> = React.ElementType<Props>
+
+export type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
+  type?: FieldTypes
+}
+
+/**
+ * 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.
+ */
+export const Field = React.forwardRef(
   <TFieldValues extends FieldValues = FieldValues>(
-    props: FieldProps<TFieldValues> & {
-      [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.
-    },
+    props: FieldProps<TFieldValues> | FieldTypeProps,
     ref: React.ForwardedRef<FocusableElement>
   ) => {
     const { type = defaultInputType } = props
@@ -172,13 +188,14 @@ export const Field = forwardRef(
 
     return <InputComponent ref={ref} {...props} />
   }
-) as <TFieldValues extends FieldValues>(
-  props: FieldProps<TFieldValues> & {
-    [key: string]: unknown
-  } & {
-    ref?: React.ForwardedRef<FocusableElement>
-  }
-) => React.ReactElement
+) as (<TFieldValues extends FieldValues>(
+  props: FieldProps<TFieldValues> &
+    FieldTypeProps & {
+      ref?: React.ForwardedRef<FocusableElement>
+    }
+) => React.ReactElement) & {
+  displayName?: string
+}
 
 interface CreateFieldProps {
   displayName: string
@@ -190,7 +207,7 @@ const createField = (
   InputComponent: React.FC<any>,
   { displayName, hideLabel, BaseField }: CreateFieldProps
 ) => {
-  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {
+  const Field = forwardRef((props, ref) => {
     const {
       id,
       name,
@@ -200,6 +217,7 @@ const createField = (
       isInvalid,
       isReadOnly,
       isRequired,
+      isOptional,
       rules,
       variant,
       ...inputProps
@@ -221,13 +239,14 @@ const createField = (
         isInvalid={isInvalid}
         isReadOnly={isReadOnly}
         isRequired={isRequired}
+        isOptional={isOptional}
         variant={variant}
       >
         <InputComponent
           ref={ref}
           id={id}
           name={name}
-          label={label}
+          label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
           rules={inputRules}
           {...inputProps}
         />
@@ -239,7 +258,7 @@ const createField = (
   return Field
 }
 
-export const withControlledInput = (InputComponent: any) => {
+export const withControlledInput = (InputComponent: React.FC<any>) => {
   return forwardRef<FieldProps, typeof InputComponent>(
     ({ name, rules, ...inputProps }, ref) => {
       const { control } = useFormContext()
@@ -262,7 +281,7 @@ export const withControlledInput = (InputComponent: any) => {
   )
 }
 
-export const withUncontrolledInput = (InputComponent: any) => {
+export const withUncontrolledInput = (InputComponent: React.FC<any>) => {
   return forwardRef<FieldProps, typeof InputComponent>(
     ({ name, rules, ...inputProps }, ref) => {
       const { register } = useFormContext()
@@ -292,11 +311,11 @@ export interface RegisterFieldTypeOptions {
  * @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 checkbox or switch field.
+ * @param options.hideLabel Hide the field label, for example for the checkbox field.
  */
-export const registerFieldType = (
+export const registerFieldType = <T extends object>(
   type: string,
-  component: React.FC<any>,
+  component: React.FC<T>,
   options?: RegisterFieldTypeOptions
 ) => {
   let InputComponent
@@ -313,41 +332,75 @@ export const registerFieldType = (
       .join('')}Field`,
     hideLabel: options?.hideLabel,
     BaseField: options?.BaseField || BaseField,
-  })
+  }) as React.FC<T & FieldProps>
 
   inputTypes[type] = Field
 
   return Field
 }
 
-// @todo Consider not registering all fields by default to lower the package size and computations.
-// Not all types may be required in a project.
-export const InputField = registerFieldType('text', Input)
-export const NumberInputField = registerFieldType('number', NumberInput, {
-  isControlled: true,
-})
-export const PasswordInputFIeld = registerFieldType('password', PasswordInput)
-export const TextareaField = registerFieldType('textarea', Textarea)
-export const SwitchField = registerFieldType(
+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(({ label, ...props }: { label?: string }, ref) => {
-    return (
-      <Switch ref={ref} {...props}>
-        {label}
-      </Switch>
-    )
+  forwardRef(({ type, ...rest }, ref) => {
+    return <Switch {...rest} ref={ref} />
   }),
   {
     isControlled: true,
-    hideLabel: true,
   }
 )
-export const SelectField = registerFieldType('select', Select, {
+
+export const SelectField = registerFieldType<SelectProps>('select', Select, {
   isControlled: true,
 })
-export const CheckboxField = registerFieldType(
+
+export const CheckboxField = registerFieldType<CheckboxProps>(
   'checkbox',
-  forwardRef(({ label, ...props }: { label?: string }, ref) => {
+  forwardRef(({ label, type, ...props }, ref) => {
     return (
       <Checkbox ref={ref} {...props}>
         {label}
@@ -358,14 +411,76 @@ export const CheckboxField = registerFieldType(
     hideLabel: true,
   }
 )
-export const RadioField = registerFieldType('radio', RadioInput, {
-  isControlled: true,
-})
-export const PinField = registerFieldType('pin', PinInput, {
-  isControlled: true,
-})
-export const NativeSelectField = registerFieldType(
+
+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/form.tsx

@@ -16,7 +16,6 @@ import {
   ResolverResult,
 } from 'react-hook-form'
 import { objectFieldResolver, FieldResolver } from './field-resolver'
-import { css } from '@emotion/react'
 
 export type { UseFormReturn, FieldValues, SubmitHandler }
 

package/src/object-field.tsx

@@ -4,7 +4,7 @@ import {
   FormLabel,
   FormLabelProps,
   ResponsiveValue,
-  useStyles,
+  useStyleConfig,
 } from '@chakra-ui/react'
 import { __DEV__ } from '@chakra-ui/utils'
 
@@ -21,8 +21,8 @@ export interface ObjectFieldProps extends FieldProps {
 }
 
 export const FormLegend = (props: FormLabelProps) => {
-  const styles = useStyles()
-  return <FormLabel as="legend" sx={styles.legend} {...props} />
+  const styles = useStyleConfig('FormLegend')
+  return <FormLabel as="legend" sx={styles} {...props} />
 }
 
 export const ObjectField: React.FC<ObjectFieldProps> = (props) => {

package/src/step-form.tsx

@@ -2,13 +2,7 @@ import * as React from 'react'
 
 import { FieldValues, UseFormReturn } from 'react-hook-form'
 
-import {
-  chakra,
-  HTMLChakraProps,
-  useMultiStyleConfig,
-  StylesProvider,
-  SystemStyleObject,
-} from '@chakra-ui/system'
+import { chakra, HTMLChakraProps } from '@chakra-ui/system'
 
 import { callAllHandlers, runIfFn, cx, __DEV__ } from '@chakra-ui/utils'
 
@@ -18,10 +12,11 @@ import {
   StepperStepsProps,
   StepperStep,
   useStepperContext,
+  StepperContainer,
 } from '@saas-ui/stepper'
 import { Button, ButtonProps } from '@saas-ui/button'
 
-import { Form, FormProps } from './form'
+import { Form } from './form'
 import { SubmitButton } from './submit-button'
 
 import {
@@ -29,7 +24,7 @@ import {
   useFormStep,
   StepFormProvider,
   UseStepFormProps,
-  UseStepFormReturn,
+  FormStepSubmitHandler,
 } from './use-step-form'
 
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
@@ -59,7 +54,7 @@ export const StepForm = React.forwardRef(
     )
   }
 ) as <TFieldValues extends FieldValues>(
-  props: FormProps<TFieldValues> & {
+  props: StepFormProps<TFieldValues> & {
     ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
   }
 ) => React.ReactElement
@@ -80,9 +75,9 @@ export interface FormStepOptions {
 }
 
 export const FormStepper: React.FC<StepperStepsProps> = (props) => {
-  const styles = useMultiStyleConfig('Stepper', props)
+  const { activeIndex, setIndex } = useStepperContext()
 
-  const { children } = props
+  const { children, orientation } = props
 
   const elements = React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child?.type === FormStep) {
@@ -100,22 +95,33 @@ export const FormStepper: React.FC<StepperStepsProps> = (props) => {
     return child
   })
 
+  const onChange = React.useCallback((i: number) => {
+    setIndex(i)
+  }, [])
+
   return (
-    <StylesProvider value={styles}>
+    <StepperContainer
+      orientation={orientation}
+      step={activeIndex}
+      onChange={onChange}
+    >
       <StepperSteps mb="4" {...props}>
         {elements}
       </StepperSteps>
-    </StylesProvider>
+    </StepperContainer>
   )
 }
 
 export interface FormStepProps
   extends FormStepOptions,
-    HTMLChakraProps<'div'> {}
+    Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
+  onSubmit?: FormStepSubmitHandler
+}
 
 export const FormStep: React.FC<FormStepProps> = (props) => {
-  const { name, schema, resolver, children, className, ...rest } = props
-  const step = useFormStep({ name, schema, resolver })
+  const { name, schema, resolver, children, className, onSubmit, ...rest } =
+    props
+  const step = useFormStep({ name, schema, resolver, onSubmit })
 
   const { isActive } = step
 

package/src/submit-button.tsx

@@ -37,7 +37,7 @@ export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
       <Button
         type="submit"
         isLoading={formState.isSubmitting}
-        isPrimary
+        colorScheme="primary"
         ref={ref}
         isDisabled={isDisabled}
         {...rest}