@saas-ui/forms 0.1.0

package/src/field.tsx

@@ -0,0 +1,295 @@
+import * as React from 'react'
+import { useFormContext, FormState, Controller, get } from 'react-hook-form'
+
+import {
+  forwardRef,
+  Box,
+  FormControl,
+  FormControlProps,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage,
+  Input,
+  Textarea,
+  Checkbox,
+  Switch,
+  useMergeRefs,
+} from '@chakra-ui/react'
+
+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'
+
+export interface FieldProps extends Omit<FormControlProps, 'label'> {
+  /**
+   * The field name
+   */
+  name: string
+  /**
+   * The field label
+   */
+  label?: string
+  /**
+   * Hide the field label
+   */
+  hideLabel?: boolean
+  /**
+   * Field help text
+   */
+  help?: string
+  /**
+   * React hook form rules
+   */
+  rules?: any
+  /**
+   * Options used for selects and radio fields
+   */
+  options?: any
+  /**
+   * The field type
+   * Build-in types:
+   * - text
+   * - number
+   * - password
+   * - textarea
+   * - select
+   * - nativeselect
+   * - checkbox
+   * - radio
+   * - switch
+   * - pin
+   *
+   * Will default to a text field if there is no matching type.
+   * @default 'text'
+   */
+  type?: string
+  /**
+   * The input placeholder
+   */
+  placeholder?: string
+}
+
+const inputTypes: Record<string, any> = {}
+
+const defaultInputType = 'text'
+
+const getInput = (type: string) => {
+  return inputTypes[type] || inputTypes[defaultInputType]
+}
+
+const getError = (name: string, formState: FormState<{ [x: string]: any }>) => {
+  return get(formState.errors, name)
+}
+
+const isTouched = (
+  name: string,
+  formState: FormState<{ [x: string]: any }>
+) => {
+  return get(formState.touchedFields, name)
+}
+
+export const BaseField: React.FC<FieldProps> = (props) => {
+  const { name, label, help, variant, hideLabel, children, ...controlProps } =
+    props
+
+  const { formState } = useFormContext()
+
+  const error = getError(name, formState)
+
+  return (
+    <FormControl isInvalid={!!error} variant={variant} {...controlProps}>
+      {label && !hideLabel ? (
+        <FormLabel variant={variant}>{label}</FormLabel>
+      ) : null}
+      <Box>
+        {children}
+        {help && !error?.message ? (
+          <FormHelperText>{help}</FormHelperText>
+        ) : null}
+        {error?.message && (
+          <FormErrorMessage>{error?.message}</FormErrorMessage>
+        )}
+      </Box>
+    </FormControl>
+  )
+}
+
+export const Field = forwardRef<FieldProps, typeof FormControl>(
+  (props, ref) => {
+    const { type = defaultInputType } = props
+    const InputComponent = getInput(type)
+
+    return <InputComponent ref={ref} {...props} />
+  }
+)
+
+interface CreateFieldProps {
+  displayName: string
+  hideLabel?: boolean
+  BaseField: React.FC<any>
+}
+
+const createField = (
+  InputComponent: React.FC<any>,
+  { displayName, hideLabel, BaseField }: CreateFieldProps
+) => {
+  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {
+    const {
+      label,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isOptional,
+      variant,
+      ...inputProps
+    } = props
+
+    return (
+      <BaseField
+        label={label}
+        hideLabel={hideLabel}
+        isDiabled={isDisabled}
+        isInvalid={isInvalid}
+        isReadOnly={isReadOnly}
+        isRequired={isRequired}
+        isOptional={isOptional}
+        variant={variant}
+      >
+        <InputComponent ref={ref} label={label} {...inputProps} />
+      </BaseField>
+    )
+  })
+  Field.displayName = displayName
+
+  return Field
+}
+
+export const withControlledInput = (InputComponent: any) => {
+  return forwardRef(({ name, rules, ...inputProps }, ref) => {
+    const { control } = useFormContext()
+
+    return (
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field: { ref: _ref, ...field } }) => (
+          <InputComponent
+            {...field}
+            {...inputProps}
+            ref={useMergeRefs(ref, _ref)}
+          />
+        )}
+      />
+    )
+  })
+}
+
+export const withUncontrolledInput = (InputComponent: any) => {
+  return forwardRef(({ name, rules, ...inputProps }, ref) => {
+    const { register } = useFormContext()
+
+    const { ref: _ref, ...field } = register(name, rules)
+
+    return (
+      <InputComponent
+        {...field}
+        {...inputProps}
+        ref={useMergeRefs(ref, _ref)}
+      />
+    )
+  })
+}
+
+export interface RegisterFieldTypeOptions {
+  isControlled?: boolean
+  hideLabel?: boolean
+  BaseField?: React.FC<any>
+}
+
+/**
+ * Register a new field type
+ * @param type The name for this field in kebab-case, eg `email` or `array-field`
+ * @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.
+ */
+export const registerFieldType = (
+  type: string,
+  component: any,
+  options?: RegisterFieldTypeOptions
+) => {
+  let InputComponent
+  if (options?.isControlled) {
+    InputComponent = withControlledInput(component)
+  } else {
+    InputComponent = withUncontrolledInput(component)
+  }
+
+  const Field = createField(InputComponent, {
+    displayName: `${type
+      .split('-')
+      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+      .join('')}Field`,
+    hideLabel: options?.hideLabel,
+    BaseField: options?.BaseField || BaseField,
+  })
+
+  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(
+  'switch',
+  forwardRef(({ label, ...props }: { label?: string }, ref) => {
+    return (
+      <Switch ref={ref} {...props}>
+        {label}
+      </Switch>
+    )
+  }),
+  {
+    isControlled: true,
+    hideLabel: true,
+  }
+)
+export const SelectField = registerFieldType('select', Select, {
+  isControlled: true,
+})
+export const CheckboxField = registerFieldType(
+  'checkbox',
+  forwardRef(({ label, ...props }: { label?: string }, 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(
+  'native-select',
+  NativeSelect,
+  { isControlled: true }
+)

package/src/fields.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'
+
+import { FormLayout } from './layout'
+import { Field, FieldProps } from './field'
+
+import { ArrayField } from './array-field'
+import { ObjectField } from './object-field'
+
+export interface FieldsProps {
+  schema: any
+}
+
+const getNestedFields = (schema: any, name: string) => {
+  return getFieldsFromSchema(getNestedSchema(schema, name)).map(
+    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (
+      <Field key={name} name={name} type={type} {...nestedFieldProps} />
+    )
+  )
+}
+
+export const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {
+  return (
+    <FormLayout {...props}>
+      {getFieldsFromSchema(schema).map(
+        ({
+          name,
+          type,
+          defaultValue,
+          ...fieldProps
+        }: FieldProps): React.ReactNode => {
+          if (type === 'array') {
+            return (
+              <ArrayField name={name} {...fieldProps}>
+                {getNestedFields(schema, name)}
+              </ArrayField>
+            )
+          } else if (type === 'object') {
+            return (
+              <ObjectField name={name} {...fieldProps}>
+                {getNestedFields(schema, name)}
+              </ObjectField>
+            )
+          }
+
+          return <Field key={name} name={name} type={type} {...fieldProps} />
+        }
+      )}
+    </FormLayout>
+  )
+}

package/src/form.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+
+import { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'
+
+import {
+  useForm,
+  FormProvider,
+  UseFormProps,
+  FieldErrors,
+} from 'react-hook-form'
+
+import { resolver } from './resolvers/yup'
+
+interface FormOptions {
+  schema?: any
+  submitLabel?: false | string
+}
+
+export interface FormProps extends HTMLChakraProps<'form'>, FormOptions {
+  defaultValues: Record<string, any>
+  onSubmit: (arg: any) => Promise<any> | void
+  onError?: (errors: FieldErrors) => void
+  children?: React.ReactNode
+}
+
+export const Form = forwardRef<FormProps, 'form'>(
+  ({ schema, defaultValues, onSubmit, onError, children, ...props }, ref) => {
+    const form: UseFormProps = { mode: 'all', defaultValues }
+
+    if (schema) {
+      form.resolver = resolver(schema)
+    }
+
+    const methods = useForm(form)
+    const { handleSubmit } = methods
+
+    return (
+      <FormProvider {...methods}>
+        <chakra.form
+          ref={ref}
+          onSubmit={handleSubmit(onSubmit, onError)}
+          {...props}
+        >
+          {children}
+        </chakra.form>
+      </FormProvider>
+    )
+  }
+)

package/src/index.ts

@@ -0,0 +1,14 @@
+export * from './display-field'
+export * from './field'
+export * from './fields'
+export * from './form'
+export * from './auto-form'
+export * from './layout'
+export * from './submit-button'
+export * from './array-field'
+export * from './use-array-field'
+export * from './object-field'
+
+export * from '@saas-ui/input-right-button'
+
+export type { FieldErrors } from 'react-hook-form'

package/src/layout.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+
+import { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'
+
+export type FormLayoutProps = SimpleGridProps
+
+interface FormLayoutItemProps {
+  children: React.ReactNode
+}
+
+const FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {
+  return <chakra.div>{children}</chakra.div>
+}
+
+export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
+  const theme = useTheme()
+
+  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {
+    spacing: 4,
+  }
+
+  const gridProps = {
+    ...defaultProps,
+    ...props,
+  }
+
+  return (
+    <SimpleGrid {...gridProps}>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return <FormLayoutItem>{child}</FormLayoutItem>
+        }
+        return child
+      })}
+    </SimpleGrid>
+  )
+}

package/src/object-field.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { ResponsiveValue } from '@chakra-ui/system'
+
+import { FormLayout } from './layout'
+import { BaseField, FieldProps } from './field'
+
+import { mapNestedFields } from './utils'
+
+export interface ObjectFieldProps extends FieldProps {
+  name: string
+  children: React.ReactNode
+  columns?: ResponsiveValue<number>
+  spacing?: ResponsiveValue<string | number>
+}
+
+export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
+  const { name, children, columns, spacing, ...fieldProps } = props
+  return (
+    <BaseField name={name} {...fieldProps}>
+      <FormLayout columns={columns} gridGap={spacing}>
+        {mapNestedFields(name, children)}
+      </FormLayout>
+    </BaseField>
+  )
+}

package/src/resolvers/yup.ts

@@ -0,0 +1,81 @@
+import { SchemaOf, AnySchema, reach } from 'yup'
+import { yupResolver } from '@hookform/resolvers/yup'
+
+import { FieldProps } from '../Field'
+
+export const resolver = yupResolver
+
+// @TODO get proper typings for the schema fields
+
+const getType = (field: any) => {
+  if (field.spec.meta?.type) {
+    return field.spec.meta.type
+  }
+
+  switch (field.type) {
+    case 'array':
+      return 'array'
+    case 'object':
+      return 'object'
+    case 'number':
+      return 'number'
+    case 'date':
+      return 'date'
+    case 'string':
+    default:
+      return 'text'
+  }
+}
+
+type Options = {
+  min?: number
+  max?: number
+}
+
+const getArrayOption = (field: any, name: string) => {
+  for (const test of field.tests) {
+    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]
+  }
+}
+
+/**
+ * A helper function to render forms automatically based on a Yup schema
+ *
+ * @param schema The Yup schema
+ * @returns {FieldProps[]}
+ */
+export const getFieldsFromSchema = (
+  schema: SchemaOf<AnySchema>
+): FieldProps[] => {
+  const fields = []
+
+  let schemaFields: Record<string, any> = {}
+  if (schema.type === 'array') {
+    /* @ts-ignore this is actually valid */
+    schemaFields = schema.innerType.fields
+  } else {
+    schemaFields = schema.fields
+  }
+
+  for (const name in schemaFields) {
+    const field = schemaFields[name]
+
+    const options: Options = {}
+    if (field.type === 'array') {
+      options.min = getArrayOption(field, 'min')
+      options.max = getArrayOption(field, 'max')
+    }
+
+    fields.push({
+      name,
+      label: field.spec.label || name,
+      type: getType(field),
+      ...options,
+    })
+  }
+  return fields
+}
+
+export const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {
+  return reach(schema, path)
+}

package/src/submit-button.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+import { useFormContext } from 'react-hook-form'
+
+import { Button, ButtonProps } from '@saas-ui/button'
+
+import { forwardRef } from '@chakra-ui/system'
+
+export const SubmitButton = forwardRef<ButtonProps, 'button'>(
+  ({ children, ...props }, ref) => {
+    const data = useFormContext()
+
+    return (
+      <Button
+        type="submit"
+        isLoading={data.formState.isSubmitting}
+        isPrimary
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </Button>
+    )
+  }
+)