@saas-ui/forms 1.0.0-rc.8 → 1.0.1

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-resolver.ts

@@ -16,10 +16,11 @@ export type ObjectSchema = Record<string, SchemaField>
 
 const mapFields = (schema: ObjectSchema): FieldProps[] =>
   schema &&
-  Object.entries(schema).map(([name, { items, ...field }]) => {
+  Object.entries(schema).map(([name, { items, label, title, ...field }]) => {
     return {
       ...field,
       name,
+      label: label || title, // json schema compatibility
     }
   })
 

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/fields.tsx

@@ -8,10 +8,12 @@ import { Field, FieldProps } from './field'
 import { ArrayField } from './array-field'
 import { ObjectField } from './object-field'
 import { FieldResolver } from './field-resolver'
+import { useFormContext } from 'react-hook-form'
 
 export interface FieldsProps {
   schema: any
   fieldResolver?: FieldResolver
+  focusFirstField?: boolean
 }
 
 const mapNestedFields = (resolver: FieldResolver, name: string) => {
@@ -27,6 +29,7 @@ const mapNestedFields = (resolver: FieldResolver, name: string) => {
 export const Fields: React.FC<FieldsProps> = ({
   schema,
   fieldResolver,
+  focusFirstField,
   ...props
 }) => {
   const resolver = React.useMemo(
@@ -34,34 +37,42 @@ export const Fields: React.FC<FieldsProps> = ({
     [schema, fieldResolver]
   )
 
+  const fields = React.useMemo(() => resolver.getFields(), [resolver])
+
+  const form = useFormContext()
+
+  React.useEffect(() => {
+    if (focusFirstField && fields[0]?.name) {
+      form.setFocus(fields[0].name)
+    }
+  }, [schema, fieldResolver, focusFirstField])
+
   return (
     <FormLayout {...props}>
-      {resolver
-        .getFields()
-        .map(
-          ({
-            name,
-            type,
-            defaultValue,
-            ...fieldProps
-          }: FieldProps): React.ReactNode => {
-            if (type === 'array') {
-              return (
-                <ArrayField key={name} name={name} {...fieldProps}>
-                  {mapNestedFields(resolver, name)}
-                </ArrayField>
-              )
-            } else if (type === 'object') {
-              return (
-                <ObjectField key={name} name={name} {...fieldProps}>
-                  {mapNestedFields(resolver, name)}
-                </ObjectField>
-              )
-            }
-
-            return <Field key={name} name={name} type={type} {...fieldProps} />
+      {fields.map(
+        ({
+          name,
+          type,
+          defaultValue,
+          ...fieldProps
+        }: FieldProps): React.ReactNode => {
+          if (type === 'array') {
+            return (
+              <ArrayField key={name} name={name} {...fieldProps}>
+                {mapNestedFields(resolver, name)}
+              </ArrayField>
+            )
+          } else if (type === 'object') {
+            return (
+              <ObjectField key={name} name={name} {...fieldProps}>
+                {mapNestedFields(resolver, name)}
+              </ObjectField>
+            )
           }
-        )}
+
+          return <Field key={name} name={name} type={type} {...fieldProps} />
+        }
+      )}
     </FormLayout>
   )
 }

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 }
 
@@ -36,7 +35,7 @@ interface FormOptions<TFieldValues extends FieldValues = FieldValues> {
   /**
    * Ref on the HTMLFormElement.
    */
-  formRef?: React.MutableRefObject<HTMLFormElement>
+  formRef?: React.RefObject<HTMLFormElement>
 }
 
 /**

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>
   )
 }