@saas-ui/forms 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/types.ts

@@ -1,242 +0,0 @@
-import type { MaybeRenderProp } from '@saas-ui/core/utils'
-import type { FieldPath, FieldValues, RegisterOptions } from 'react-hook-form'
-
-import type { ArrayFieldProps } from './array-field'
-import type { DefaultFields } from './default-fields'
-import type { FormProps, FormRenderContext } from './form'
-import type { ObjectFieldProps } from './object-field'
-import type { StepsOptions } from './step-form'
-import type { SubmitButtonProps } from './submit-button'
-import type { StepFormRenderContext, UseStepFormProps } from './use-step-form'
-
-export interface FocusableElement {
-  focus(options?: FocusOptions): void
-}
-
-export type FieldOption = { label?: string; value: string }
-export type FieldOptions<TOption extends FieldOption = FieldOption> =
-  Array<TOption>
-
-export type ValueOf<T> = T[keyof T]
-export type ShallowMerge<A, B> = Omit<A, keyof B> & B
-
-type Split<S extends string, D extends string> = string extends S
-  ? string[]
-  : S extends ''
-    ? []
-    : S extends `${infer T}${D}${infer U}`
-      ? [T, ...Split<U, D>]
-      : [S]
-
-type MapPath<T extends string[]> = T extends [infer U, ...infer R]
-  ? U extends string
-    ? `${U extends `${number}` ? '$' : U}${R[0] extends string
-        ? '.'
-        : ''}${R extends string[] ? MapPath<R> : ''}`
-    : ''
-  : ''
-
-type TransformPath<T extends string> = MapPath<Split<T, '.'>>
-
-export type ArrayFieldPath<Name extends string> = Name extends string
-  ? TransformPath<Name>
-  : never
-
-export interface BaseFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
-  /**
-   * The field name
-   */
-  name: TName | ArrayFieldPath<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
-  /**
-   * React children
-   */
-  children?: React.ReactNode
-}
-
-export type GetBaseField<TProps extends object = object> = () => {
-  extraProps: string[]
-  BaseField: React.FC<
-    Omit<BaseFieldProps, 'name'> & {
-      name: string
-      children: React.ReactNode
-    } & TProps
-  >
-}
-
-type FieldPathWithArray<
-  TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = TName | ArrayFieldPath<TName>
-
-export type MergeFieldProps<
-  FieldDefs,
-  TFieldValues extends FieldValues = FieldValues,
-  TExtraFieldProps extends object = object,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = ValueOf<{
-  [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props>
-    ? { type?: K } & ShallowMerge<
-        Props,
-        BaseFieldProps<TFieldValues, TName>
-      > & { [key in keyof TExtraFieldProps]: TExtraFieldProps[key] }
-    : never
-}>
-
-export type FieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TExtraFieldProps extends object = object,
-> = MergeFieldProps<DefaultFields, TFieldValues, TExtraFieldProps>
-
-export type FormChildren<
-  FieldDefs,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TExtraFieldProps extends object = object,
-> = MaybeRenderProp<
-  FormRenderContext<
-    TFieldValues,
-    TContext,
-    MergeFieldProps<
-      FieldDefs extends never
-        ? DefaultFields
-        : ShallowMerge<DefaultFields, FieldDefs>,
-      TFieldValues,
-      TExtraFieldProps
-    >
-  >
->
-
-export type DefaultFieldOverrides = {
-  submit?: SubmitButtonProps
-  [key: string]: any
-}
-
-type MergeOverrideFieldProps<
-  FieldDefs,
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = ValueOf<{
-  [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props>
-    ? { type?: K } & Omit<
-        ShallowMerge<Props, BaseFieldProps<TFieldValues, TName>>,
-        'name'
-      >
-    : never
-}>
-
-export type FieldOverrides<
-  FieldDefs,
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  [K in FieldPathWithArray<TFieldValues, TName>]?:
-    | MergeOverrideFieldProps<
-        FieldDefs extends never
-          ? DefaultFields
-          : ShallowMerge<DefaultFields, FieldDefs>,
-        TFieldValues
-      >
-    | ({ type?: 'object' } & Omit<
-        ObjectFieldProps<TFieldValues>,
-        'name' | 'children'
-      >)
-    | ({ type?: 'array' } & Omit<
-        ArrayFieldProps<TFieldValues>,
-        'name' | 'children'
-      >)
-}
-
-export type WithFields<
-  TFormProps extends FormProps<any, any, any, any, any>,
-  FieldDefs,
-  ExtraOverrides = object,
-> =
-  TFormProps extends FormProps<
-    infer _TSchema,
-    infer TFieldValues,
-    infer TContext,
-    infer TExtraFieldProps
-  >
-    ? Omit<TFormProps, 'children' | 'fields'> & {
-        children?: FormChildren<
-          FieldDefs,
-          TFieldValues,
-          TContext,
-          TExtraFieldProps
-        >
-        fields?: FieldOverrides<FieldDefs, TFieldValues> & {
-          submit?: SubmitButtonProps
-        } & ExtraOverrides
-      }
-    : never
-
-// StepForm types
-export type StepFormChildren<
-  FieldDefs,
-  TSteps extends StepsOptions<any> = StepsOptions<any>,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-> = MaybeRenderProp<
-  StepFormRenderContext<
-    TSteps,
-    TFieldValues,
-    TContext,
-    MergeFieldProps<
-      FieldDefs extends never
-        ? DefaultFields
-        : ShallowMerge<DefaultFields, FieldDefs>,
-      TFieldValues
-    >
-  >
->
-
-export type WithStepFields<
-  TStepFormProps extends UseStepFormProps<any, any, any>,
-  FieldDefs,
-  ExtraOverrides = object,
-> =
-  TStepFormProps extends UseStepFormProps<
-    infer TSteps,
-    infer TFieldValues,
-    infer TContext
-  >
-    ? Omit<TStepFormProps, 'children' | 'fields'> & {
-        children?: StepFormChildren<FieldDefs, TSteps, TFieldValues, TContext>
-        fields?: FieldOverrides<FieldDefs, TFieldValues> & {
-          submit?: SubmitButtonProps
-        } & ExtraOverrides
-      }
-    : never

package/src/use-array-field.tsx

@@ -1,158 +0,0 @@
-import * as React from 'react'
-
-import { createContext } from '@saas-ui/core/utils'
-import {
-  FieldPath,
-  FieldValues,
-  UseFieldArrayReturn,
-  useFieldArray,
-} from 'react-hook-form'
-
-import { useFormContext } from './form-context'
-
-export interface UseArrayFieldReturn extends UseFieldArrayReturn {
-  /**
-   * The array field name
-   */
-  name: string
-  /**
-   * The default value for new items
-   */
-  defaultValue: Record<string, any>
-  /**
-   * Min amount of items
-   */
-  min?: number
-  /**
-   * Max amount of items
-   */
-  max?: number
-}
-
-export const [ArrayFieldProvider, useArrayFieldContext] =
-  createContext<UseArrayFieldReturn>({
-    name: 'ArrayFieldContext',
-  })
-
-export interface UseArrayFieldRowReturn {
-  /**
-   * Name of the array field including the index, eg 'field.0'
-   */
-  name: string
-  /**
-   * The field index
-   */
-  index: number
-  /**
-   * Remove this array item
-   */
-  remove: () => void
-  /**
-   * True if this is the first item
-   */
-  isFirst: boolean
-  /**
-   * True if this is the last item
-   */
-  isLast: boolean
-}
-
-export const [ArrayFieldRowProvider, useArrayFieldRowContext] =
-  createContext<UseArrayFieldRowReturn>({
-    name: 'ArrayFieldRowContext',
-  })
-
-export interface ArrayFieldOptions<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
-  /**
-   * The field name
-   */
-  name: TName
-  /**
-   * Default value for new values in the array
-   */
-  defaultValue?: Record<string, any>
-  /**
-   * Default key name for rows, change this if your data uses a different 'id' field
-   * @default "id"
-   */
-  keyName?: string
-  min?: number
-  max?: number
-}
-
-export const useArrayField = ({
-  name,
-  defaultValue = {},
-  keyName,
-  min,
-  max,
-}: ArrayFieldOptions) => {
-  const { control } = useFormContext()
-
-  const context = useFieldArray({
-    control,
-    name,
-    keyName,
-  })
-  return {
-    ...context,
-    name,
-    defaultValue,
-    min,
-    max,
-  }
-}
-
-export interface UseArrayFieldRowProps {
-  index: number
-}
-
-export const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {
-  const { clearErrors } = useFormContext()
-  const { name, remove, fields } = useArrayFieldContext()
-
-  React.useEffect(() => {
-    // reset errors, to make sure min/max errors reset correctly
-    clearErrors(name)
-  }, [])
-
-  return {
-    index,
-    isFirst: index === 0,
-    isLast: index === fields.length - 1,
-    name: `${name}.${index}`,
-    remove: React.useCallback(() => {
-      clearErrors(name)
-      remove(index)
-    }, [index]),
-  }
-}
-
-export const useArrayFieldRemoveButton = () => {
-  const { isFirst, remove } = useArrayFieldRowContext()
-  const { min, fields } = useArrayFieldContext()
-
-  const isDisabled = isFirst && !!(min && fields.length <= min)
-
-  return {
-    onClick: () => remove(),
-    isDisabled,
-  }
-}
-
-export const useArrayFieldAddButton = () => {
-  const { append, defaultValue, max, fields } = useArrayFieldContext()
-
-  const isDisabled = !!(max && fields.length >= max)
-
-  return {
-    onClick: () =>
-      append(defaultValue, {
-        shouldFocus: false,
-      }),
-    isDisabled,
-  }
-}

package/src/use-form.tsx

@@ -1,24 +0,0 @@
-import {
-  type FieldValues,
-  UseFormProps as UseHookFormProps,
-  useForm as useHookForm,
-} from 'react-hook-form'
-
-import { Field } from './field.tsx'
-
-export interface UseFormProps<
-  TFieldValues extends FieldValues,
-  TContext extends object,
-> extends UseHookFormProps<TFieldValues, TContext> {}
-
-export function useForm<
-  TFieldValues extends FieldValues,
-  TContext extends object,
->(props: UseFormProps<TFieldValues, TContext> = {}) {
-  const form = useHookForm<TFieldValues, TContext>(props)
-
-  return {
-    ...form,
-    Field,
-  }
-}

package/src/use-step-form.tsx

@@ -1,201 +0,0 @@
-import * as React from 'react'
-
-import { createContext } from '@chakra-ui/react'
-import {
-  type UseStepperProps,
-  type UseStepperReturn,
-  useStep,
-  useStepper,
-} from '@saas-ui/core'
-import { FieldValues, SubmitHandler } from 'react-hook-form'
-
-import { ArrayFieldProps } from './array-field'
-import { DisplayIfProps } from './display-if'
-import { FormProps } from './form'
-import { ObjectFieldProps } from './object-field'
-import { FormStepProps, StepsOptions } from './step-form'
-import { FieldProps, type FocusableElement, StepFormChildren } from './types'
-import { UseArrayFieldReturn } from './use-array-field'
-
-export interface StepState {
-  name: string
-  schema?: any
-  resolver?: any
-  isActive?: boolean
-  isCompleted?: boolean
-  onSubmit?: FormStepSubmitHandler
-}
-
-export type FormStepSubmitHandler<
-  TFieldValues extends FieldValues = FieldValues,
-> = (data: TFieldValues, stepper: UseStepperReturn) => Promise<void>
-
-export interface StepFormContext extends UseStepperReturn {
-  updateStep(state: StepState): void
-  steps: Record<string, StepState>
-}
-
-export const [StepFormProvider, useStepFormContext] =
-  createContext<StepFormContext>({
-    name: 'StepFormContext',
-    errorMessage:
-      'useStepFormContext: `context` is undefined. Seems you forgot to wrap step form components in `<StepForm />`',
-  })
-
-type StepName<T extends { [k: number]: { readonly name: string } }> =
-  T[number]['name']
-
-export interface StepFormRenderContext<
-  TSteps extends StepsOptions<any> = StepsOptions<any>,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TFieldTypes = FieldProps<TFieldValues>,
-> extends UseStepFormReturn<TFieldValues> {
-  Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
-  FormStep: React.FC<FormStepProps<StepName<TSteps>>>
-  DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
-  ArrayField: React.FC<
-    ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
-  >
-  ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
-}
-
-export interface UseStepFormProps<
-  TSteps extends StepsOptions<any> = StepsOptions<any>,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-> extends Omit<UseStepperProps, 'onChange'>,
-    Omit<FormProps<any, TFieldValues, TContext>, 'children'> {
-  steps?: TSteps
-  children: StepFormChildren<any, TSteps, TFieldValues, TContext>
-}
-
-export interface UseStepFormReturn<
-  TFieldValues extends FieldValues = FieldValues,
-> extends UseStepperReturn {
-  getFormProps(): {
-    onSubmit: SubmitHandler<TFieldValues>
-    schema?: any
-    resolver?: any
-  }
-  updateStep(step: any): void
-  steps: Record<string, any>
-}
-
-export function useStepForm<
-  TSteps extends StepsOptions<any> = StepsOptions<any>,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
->(
-  props: UseStepFormProps<TSteps, TFieldValues, TContext>,
-): UseStepFormReturn<TFieldValues> {
-  const {
-    onChange,
-    steps: stepsOptions,
-    resolver,
-    fieldResolver,
-    ...rest
-  } = props
-  const stepper = useStepper(rest)
-
-  const [options] = React.useState<TSteps | undefined>(stepsOptions)
-
-  const { activeStep, isLastStep, nextStep } = stepper
-
-  const [steps, updateSteps] = React.useState<Record<string, StepState>>({})
-
-  const mergedData = React.useRef<TFieldValues>({} as any)
-
-  const onSubmitStep: SubmitHandler<TFieldValues> = React.useCallback(
-    async (data) => {
-      try {
-        const step = steps[activeStep]
-
-        mergedData.current = {
-          ...mergedData.current,
-          ...data,
-        }
-
-        if (isLastStep) {
-          await props.onSubmit?.(mergedData.current)
-
-          updateStep({
-            ...step,
-            isCompleted: true,
-          })
-
-          nextStep() // show completed step
-          return
-        }
-
-        await step.onSubmit?.(data, stepper)
-
-        nextStep()
-      } catch (e) {
-        // Step submission failed.
-      }
-    },
-    [steps, activeStep, isLastStep, mergedData],
-  )
-
-  const getFormProps = React.useCallback(() => {
-    const step = steps[activeStep]
-
-    return {
-      onSubmit: onSubmitStep,
-      schema: step?.schema,
-      resolver: step?.schema
-        ? /* @todo fix resolver type */ (resolver as any)?.(step.schema)
-        : undefined,
-      fieldResolver: step?.schema
-        ? (fieldResolver as any)?.(step.schema)
-        : undefined,
-    }
-  }, [steps, onSubmitStep, activeStep, resolver, fieldResolver])
-
-  const updateStep = React.useCallback(
-    (step: StepState) => {
-      const stepOptions = options?.find((s) => s.name === step.name)
-      updateSteps((steps) => {
-        return {
-          ...steps,
-          [step.name]: {
-            ...step,
-            schema: stepOptions?.schema,
-          },
-        }
-      })
-    },
-    [steps, options],
-  )
-
-  return {
-    getFormProps,
-    updateStep,
-    steps,
-    ...stepper,
-  }
-}
-
-export interface UseFormStepProps {
-  name: string
-  schema?: any
-  resolver?: any
-  onSubmit?: FormStepSubmitHandler
-}
-
-export function useFormStep(props: UseFormStepProps): StepState {
-  const { name, schema, resolver, onSubmit } = props
-  const step = useStep({ name })
-
-  const { steps, updateStep } = useStepFormContext()
-
-  React.useEffect(() => {
-    updateStep({ name, schema, resolver, onSubmit })
-  }, [name, schema])
-
-  return {
-    ...step,
-    ...(steps[name] || { name, schema }),
-  }
-}

package/src/utils.ts

@@ -1,35 +0,0 @@
-import * as React from 'react'
-import { FieldOption, FieldOptions } from './types'
-
-export const mapNestedFields = (name: string, children: React.ReactNode) => {
-  return React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.props.name) {
-      let childName = child.props.name
-      if (childName.includes('.')) {
-        childName = childName.replace(/^.*\.(.*)/, '$1')
-      } else if (childName.includes('.$')) {
-        childName = childName.replace(/^.*\.\$(.*)/, '$1')
-      }
-
-      return React.cloneElement(child, {
-        ...child.props,
-        name: `${name}.${childName}`,
-      })
-    }
-    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
-  })
-}

package/src/watch-field.tsx

@@ -1,37 +0,0 @@
-import { FieldValues, useWatch } from 'react-hook-form'
-import { useFormContext, UseFormReturn } from './form-context'
-
-export interface WatchFieldProps<
-  Value = unknown,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-> {
-  name: string
-  defaultValue?: Value
-  isDisabled?: boolean
-  isExact?: boolean
-  children: (
-    value: Value,
-    form: UseFormReturn<TFieldValues, TContext>
-  ) => React.ReactElement | void
-}
-
-export const WatchField = <
-  Value = unknown,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
->(
-  props: WatchFieldProps<Value, TFieldValues, TContext>
-) => {
-  const { name, defaultValue, isDisabled, isExact } = props
-  const form = useFormContext<TFieldValues, TContext>()
-
-  const field = useWatch({
-    name,
-    defaultValue,
-    disabled: isDisabled,
-    exact: isExact,
-  })
-
-  return props.children(field, form) || null
-}