@saas-ui/forms 1.0.0-rc.7 → 1.0.0

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,7 +6,7 @@ import { __DEV__ } from '@chakra-ui/utils'
 import { Form, FormProps } from './form'
 import { FormLayout } from './layout'
 import { Fields } from './fields'
-import { SubmitButton, SubmitButtonProps } from './submit-button'
+import { SubmitButton } from './submit-button'
 import { FieldResolver } from '.'
 
 interface AutoFormOptions {
@@ -48,7 +48,7 @@ export const AutoForm = forwardRef(
       <Form {...rest} schema={schema} ref={ref}>
         <FormLayout>
           {<Fields schema={schema} fieldResolver={fieldResolver} />}
-          {submitLabel && <SubmitButton label={submitLabel} />}
+          {submitLabel && <SubmitButton>{submitLabel}</SubmitButton>}
           {children}
         </FormLayout>
       </Form>

package/src/field.tsx

@@ -22,15 +22,29 @@ import {
   Checkbox,
   Switch,
   useMergeRefs,
+  InputGroup,
+  InputProps,
+  TextareaProps,
+  SwitchProps,
+  CheckboxProps,
+  PinInputField,
+  HStack,
+  PinInput,
+  UsePinInputProps,
+  SystemProps,
 } from '@chakra-ui/react'
-import { __DEV__ } from '@chakra-ui/utils'
+import { __DEV__, FocusableElement } 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 { FocusableElement } from '@chakra-ui/utils'
+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'
 
 export interface Option {
   value: string
@@ -43,19 +57,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 +85,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 +98,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 +155,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 +186,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 +205,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,
@@ -239,7 +254,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 +277,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()
@@ -294,9 +309,9 @@ export interface RegisterFieldTypeOptions {
  * @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 registerFieldType = (
+export const registerFieldType = <T extends object>(
   type: string,
-  component: React.FC<any>,
+  component: React.FC<T>,
   options?: RegisterFieldTypeOptions
 ) => {
   let InputComponent
@@ -313,25 +328,59 @@ export const registerFieldType = (
       .join('')}Field`,
     hideLabel: options?.hideLabel,
     BaseField: options?.BaseField || BaseField,
-  })
+  }) as React.FC<T & FieldProps>
 
   inputTypes[type] = Field
 
   return Field
 }
 
-export const InputField = registerFieldType(
+export interface InputFieldProps extends InputProps {
+  type?: string
+  leftAddon?: React.ReactNode
+  rightAddon?: React.ReactNode
+}
+
+export const InputField = registerFieldType<InputFieldProps>(
   'text',
-  forwardRef(({ type = 'text', ...rest }, ref) => {
-    return <Input type={type} {...rest} ref={ref} />
+  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 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 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(({ type, ...rest }, ref) => {
     return <Switch {...rest} ref={ref} />
@@ -340,32 +389,94 @@ export const SwitchField = registerFieldType(
     isControlled: 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, type, ...props }: { label?: string; type: string }, ref) => {
-      return (
-        <Checkbox ref={ref} {...props}>
-          {label}
-        </Checkbox>
-      )
-    }
-  ),
+  forwardRef(({ label, type, ...props }, ref) => {
+    return (
+      <Checkbox ref={ref} {...props}>
+        {label}
+      </Checkbox>
+    )
+  }),
   {
     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/step-form.tsx

@@ -16,7 +16,7 @@ import {
 } 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 {
@@ -24,6 +24,7 @@ import {
   useFormStep,
   StepFormProvider,
   UseStepFormProps,
+  FormStepSubmitHandler,
 } from './use-step-form'
 
 export interface StepFormProps<TFieldValues extends FieldValues = FieldValues>
@@ -53,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
@@ -113,11 +114,14 @@ export const FormStepper: React.FC<StepperStepsProps> = (props) => {
 
 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
 
@@ -160,11 +164,12 @@ export const NextButton: React.FC<NextButtonProps> = (props) => {
 
   return (
     <SubmitButton
-      isDisabled={isCompleted}
-      label={isLastStep || isCompleted ? submitLabel : label}
       {...rest}
+      isDisabled={isCompleted}
       className={cx('saas-form__next-button', props.className)}
-    />
+    >
+      {isLastStep || isCompleted ? submitLabel : label}
+    </SubmitButton>
   )
 }
 

package/src/submit-button.tsx

@@ -4,7 +4,6 @@ import { useFormContext } from 'react-hook-form'
 
 import { Button, ButtonProps } from '@saas-ui/button'
 
-import { forwardRef } from '@chakra-ui/system'
 import { __DEV__ } from '@chakra-ui/utils'
 
 export interface SubmitButtonProps extends ButtonProps {
@@ -24,29 +23,38 @@ export interface SubmitButtonProps extends ButtonProps {
   disableIfInvalid?: boolean
 }
 
-export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
-  (props, ref) => {
-    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props
-    const { formState } = useFormContext()
-
-    const isDisabled =
-      (disableIfUntouched && !formState.isDirty) ||
-      (disableIfInvalid && !formState.isValid)
-
-    return (
-      <Button
-        type="submit"
-        isLoading={formState.isSubmitting}
-        isPrimary
-        ref={ref}
-        isDisabled={isDisabled}
-        {...rest}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
+export const SubmitButton = React.forwardRef<
+  HTMLButtonElement,
+  SubmitButtonProps
+>((props, ref) => {
+  const {
+    children,
+    disableIfUntouched,
+    disableIfInvalid,
+    isDisabled: isDisabledProp,
+    isLoading,
+    ...rest
+  } = props
+  const { formState } = useFormContext()
+
+  const isDisabled =
+    (disableIfUntouched && !formState.isDirty) ||
+    (disableIfInvalid && !formState.isValid) ||
+    isDisabledProp
+
+  return (
+    <Button
+      {...rest}
+      ref={ref}
+      variant="primary"
+      type="submit"
+      isLoading={formState.isSubmitting || isLoading}
+      isDisabled={isDisabled}
+    >
+      {children}
+    </Button>
+  )
+})
 
 SubmitButton.defaultProps = {
   label: 'Submit',