@saas-ui/forms 3.0.0-alpha.0 → 3.0.0-alpha.10

package/src/display-if.tsx

@@ -1,69 +0,0 @@
-import * as React from 'react'
-import {
-  useWatch,
-  FieldValues,
-  UseFormReturn,
-  FieldPath,
-} from 'react-hook-form'
-
-import { useFormContext } from './form-context'
-
-export interface DisplayIfProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> {
-  children: React.ReactElement
-  name: TName
-  defaultValue?: unknown
-  isDisabled?: boolean
-  isExact?: boolean
-  condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean
-  onToggle?: (
-    conditionMatched: boolean,
-    context: UseFormReturn<TFieldValues>
-  ) => void
-}
-/**
- * Conditionally render parts of a form.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- */
-export const DisplayIf = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  children,
-  name,
-  defaultValue,
-  isDisabled,
-  isExact,
-  condition = (value) => !!value,
-  onToggle,
-}: DisplayIfProps<TFieldValues, TName>) => {
-  const initializedRef = React.useRef(false)
-  const matchesRef = React.useRef(false)
-
-  const value = useWatch<TFieldValues>({
-    name,
-    defaultValue: defaultValue as any,
-    disabled: isDisabled,
-    exact: isExact,
-  })
-  const context = useFormContext() as any
-
-  const matches = condition(value, context)
-
-  React.useEffect(() => {
-    if (!initializedRef.current) {
-      initializedRef.current = true
-      return
-    }
-    if (matchesRef.current === matches) return
-    matchesRef.current = matches
-    onToggle?.(matches, context)
-  }, [value])
-
-  return matches ? children : null
-}
-
-DisplayIf.displayName = 'DisplayIf'

package/src/field-resolver.ts

@@ -1,66 +0,0 @@
-import { get } from '@saas-ui/core/utils'
-
-import { ArrayFieldProps } from './array-field'
-import { DefaultFields } from './default-fields'
-import { ObjectFieldProps } from './object-field'
-import { BaseFieldProps, ValueOf } from './types'
-
-export type FieldResolver = {
-  getFields(): BaseFieldProps[]
-  getNestedFields(name: string): BaseFieldProps[]
-}
-
-export type GetFieldResolver<TSchema = any> = (schema: TSchema) => FieldResolver
-
-type FieldTypes<FieldDefs = DefaultFields> = ValueOf<{
-  [K in keyof FieldDefs]: FieldDefs[K] extends React.FC<infer Props>
-    ? { type?: K } & Omit<Props, 'name'>
-    : never
-}>
-
-type SchemaField<FieldDefs = DefaultFields> =
-  | FieldTypes<FieldDefs>
-  | (Omit<ObjectFieldProps, 'name' | 'children'> & {
-      type: 'object'
-      properties?: Record<string, SchemaField<FieldDefs>>
-    })
-  | (Omit<ArrayFieldProps, 'name' | 'children'> & {
-      type: 'array'
-      items?: SchemaField<FieldDefs>
-    })
-
-export type ObjectSchema<FieldDefs = DefaultFields> = Record<
-  string,
-  SchemaField<FieldDefs>
->
-
-const mapFields = (schema: ObjectSchema): BaseFieldProps[] =>
-  schema &&
-  Object.entries(schema).map(([name, props]) => {
-    const { items, label, title, ...field } = props as any
-    return {
-      ...field,
-      name,
-      label: label || title || name, // json schema compatibility
-    }
-  })
-
-export const objectFieldResolver: GetFieldResolver<ObjectSchema> = (schema) => {
-  const getFields = (): BaseFieldProps[] => {
-    return mapFields(schema)
-  }
-  const getNestedFields = (name: string): BaseFieldProps[] => {
-    const field = get(schema, name)
-
-    if (!field) return []
-
-    if (field.items?.type === 'object') {
-      return mapFields(field.items.properties)
-    } else if (field.type === 'object') {
-      return mapFields(field.properties)
-    }
-    return [field.items]
-  }
-
-  return { getFields, getNestedFields }
-}

package/src/field.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react'
-
-import { FieldValues, RegisterOptions } from 'react-hook-form'
-
-import { InputField } from './default-fields'
-import { useField } from './fields-context'
-import { useFieldProps } from './form-context'
-import { FieldProps, type FocusableElement } from './types'
-
-export type FieldRules = Pick<
-  RegisterOptions,
-  'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'
->
-
-const defaultInputType = 'text'
-
-/**
- * Form field component.
- * 
- * 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.
-
- * @see Docs https://saas-ui.dev/docs/components/forms/field
- */
-export const Field = React.forwardRef(
-  <TFieldValues extends FieldValues = FieldValues>(
-    props: FieldProps<TFieldValues>,
-    ref: React.ForwardedRef<FocusableElement>,
-  ) => {
-    const { type = defaultInputType, name } = props
-    const overrides = useFieldProps(name)
-    const InputComponent = useField(overrides?.type || type, InputField)
-
-    return <InputComponent ref={ref} {...props} {...overrides} />
-  },
-) as (<TFieldValues extends FieldValues>(
-  props: FieldProps<TFieldValues> & {
-    ref?: React.ForwardedRef<FocusableElement>
-  },
-) => React.ReactElement) & {
-  displayName?: string
-}

package/src/fields-context.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import type { GetBaseField } from './types'
-
-export interface FieldsContextValue {
-  fields: Record<string, React.FC<any>>
-  getBaseField?: GetBaseField<any>
-}
-
-const FieldsContext = React.createContext<FieldsContextValue | null>(null)
-
-export const FieldsProvider: React.FC<{
-  value: FieldsContextValue
-  children: React.ReactNode
-}> = (props) => {
-  return (
-    <FieldsContext.Provider value={props.value}>
-      {props.children}
-    </FieldsContext.Provider>
-  )
-}
-
-export const useFieldsContext = () => {
-  return React.useContext(FieldsContext)
-}
-
-export const useField = (
-  type: string,
-  fallback: React.FC<any>,
-): React.FC<any> => {
-  const context = React.useContext(FieldsContext)
-  return context?.fields?.[type] || fallback
-}

package/src/fields.tsx

@@ -1,93 +0,0 @@
-import * as React from 'react'
-
-import { ArrayField } from './array-field'
-import { Field } from './field'
-import { FieldResolver } from './field-resolver'
-import { useFormContext } from './form-context'
-import { FormLayout } from './form-layout'
-import { ObjectField } from './object-field'
-import { BaseFieldProps } from './types'
-
-export interface FieldsProps<TSchema = any> {
-  schema?: TSchema
-  fieldResolver?: FieldResolver
-  focusFirstField?: boolean
-}
-
-const mapNestedFields = (resolver: FieldResolver, name: string) => {
-  return resolver
-    .getNestedFields(name)
-    ?.map(
-      (
-        { name, type, ...nestedFieldProps }: BaseFieldProps,
-        i,
-      ): React.ReactNode => (
-        <Field
-          key={name || i}
-          name={name}
-          type={type as any}
-          {...nestedFieldProps}
-        />
-      ),
-    )
-}
-
-export const AutoFields: React.FC<FieldsProps> = ({
-  schema: schemaProp,
-  fieldResolver: fieldResolverProp,
-  focusFirstField,
-  ...props
-}) => {
-  const context = useFormContext()
-  const schema = schemaProp || context.schema
-  const fieldResolver = fieldResolverProp || context.fieldResolver
-  const resolver = React.useMemo(() => fieldResolver, [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])
-
-  if (!resolver) {
-    return null
-  }
-
-  return (
-    <FormLayout {...props}>
-      {fields?.map(
-        ({ name, type, ...fieldProps }: BaseFieldProps): 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 as any}
-              // defaultValue={defaultValue}
-              {...fieldProps}
-            />
-          )
-        },
-      )}
-    </FormLayout>
-  )
-}
-
-AutoFields.displayName = 'Fields'

package/src/form-context.tsx

@@ -1,80 +0,0 @@
-import * as React from 'react'
-import {
-  FormProvider as HookFormProvider,
-  FormProviderProps as HookFormProviderProps,
-  useFormContext as useHookFormContext,
-  FieldValues,
-} from 'react-hook-form'
-import { FieldResolver } from './field-resolver'
-import type { BaseFieldProps } from './types'
-
-export type FormContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TContext = any,
-  TSchema = any,
-> = {
-  fieldResolver?: FieldResolver
-  schema?: TSchema
-  fields?: {
-    [key: string]: unknown
-  }
-}
-
-export type FormProviderProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TContext = any,
-  TSchema = any,
-> = HookFormProviderProps<TFieldValues, TContext> & {
-  fieldResolver?: FieldResolver
-  schema?: TSchema
-  fields?: {
-    [key: string]: unknown
-  }
-}
-
-const FormContext = React.createContext<FormContextValue | null>(null)
-
-export const useFormContext = <
-  TFieldValues extends FieldValues = FieldValues,
-  TContext = any,
-  TSchema = any,
->() => {
-  const context = React.useContext(FormContext)
-  const hookContext = useHookFormContext<TFieldValues, TContext>()
-
-  return {
-    ...hookContext,
-    ...context,
-  }
-}
-
-export const useFieldProps = <TFieldValues extends FieldValues = FieldValues>(
-  name: string
-): BaseFieldProps<TFieldValues> | undefined => {
-  const parsedName = name?.replace(/\.[0-9]/g, '.$')
-  const context = useFormContext()
-  return (context?.fields?.[parsedName] as any) || {}
-}
-
-export type UseFormReturn<
-  TFieldValues extends FieldValues = FieldValues,
-  TContext = any,
-  TSchema = any,
-> = ReturnType<typeof useFormContext<TFieldValues, TContext, TSchema>>
-
-export const FormProvider = <
-  TFieldValues extends FieldValues = FieldValues,
-  TContext = any,
-  TSchema = any,
->(
-  props: FormProviderProps<TFieldValues, TContext, TSchema>
-) => {
-  const { children, fieldResolver, schema, fields, ...rest } = props
-  return (
-    <HookFormProvider {...rest}>
-      <FormContext.Provider value={{ fieldResolver, schema, fields }}>
-        {children}
-      </FormContext.Provider>
-    </HookFormProvider>
-  )
-}

package/src/form-layout.tsx

@@ -1,59 +0,0 @@
-import { forwardRef } from 'react'
-
-import {
-  type HTMLChakraProps,
-  type RecipeProps,
-  SimpleGrid,
-  SimpleGridProps,
-  useRecipe,
-} from '@chakra-ui/react'
-import { cx } from '@saas-ui/core/utils'
-
-export interface FormLayoutOptions {
-  columns?: SimpleGridProps['columns']
-  gap?: SimpleGridProps['gap']
-}
-
-export interface FormLayoutProps
-  extends RecipeProps<'formLayout'>,
-    FormLayoutOptions,
-    Omit<HTMLChakraProps<'div'>, 'columns'> {}
-
-/**
- * Create consistent field spacing and positioning.
- *
- * Renders form items in a `SimpleGrid`
- * @see https://chakra-ui.com/docs/layout/simple-grid
- *
- * @see https://saas-ui.dev/docs/components/forms/form
- */
-export const FormLayout = forwardRef<HTMLDivElement, FormLayoutProps>(
-  ({ children, rowGap = 4, ...props }, ref) => {
-    const recipe = useRecipe({
-      key: 'formLayout',
-    })
-
-    const [variantProps, gridProps] = recipe.splitVariantProps(props)
-
-    const styles = recipe(variantProps)
-
-    return (
-      <SimpleGrid
-        ref={ref}
-        {...gridProps}
-        className={cx('sui-form-layout', props.className)}
-        css={[
-          {
-            rowGap,
-          },
-          styles,
-          props.css,
-        ]}
-      >
-        {children}
-      </SimpleGrid>
-    )
-  },
-)
-
-FormLayout.displayName = 'FormLayout'

package/src/form.tsx

@@ -1,252 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import { HTMLChakraProps, chakra } from '@chakra-ui/react'
-import { type MaybeRenderProp, cx, runIfFn } from '@saas-ui/core/utils'
-import {
-  FieldValues,
-  ResolverOptions,
-  ResolverResult,
-  SubmitErrorHandler,
-  SubmitHandler,
-  UseFormProps,
-  UseFormReturn,
-  WatchObserver,
-  useForm,
-} from 'react-hook-form'
-
-import { ArrayField, ArrayFieldProps } from './array-field.tsx'
-import { DisplayIf, DisplayIfProps } from './display-if.tsx'
-import { FieldResolver } from './field-resolver.tsx'
-import { Field as DefaultField } from './field.tsx'
-import { AutoFields } from './fields.tsx'
-import { FormProvider } from './form-context.tsx'
-import { FormLayout } from './form-layout.tsx'
-import { ObjectField, ObjectFieldProps } from './object-field.tsx'
-import { SubmitButton } from './submit-button.tsx'
-import {
-  DefaultFieldOverrides,
-  FieldProps,
-  type FocusableElement,
-} from './types.ts'
-import { UseArrayFieldReturn } from './use-array-field.tsx'
-
-export type { UseFormReturn, FieldValues, SubmitHandler }
-
-export interface FormRenderContext<
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TFieldTypes = FieldProps<TFieldValues>,
-> extends UseFormReturn<TFieldValues, TContext> {
-  Field: React.FC<TFieldTypes & React.RefAttributes<FocusableElement>>
-  DisplayIf: React.FC<DisplayIfProps<TFieldValues>>
-  ArrayField: React.FC<
-    ArrayFieldProps<TFieldValues> & React.RefAttributes<UseArrayFieldReturn>
-  >
-  ObjectField: React.FC<ObjectFieldProps<TFieldValues>>
-}
-
-interface FormOptions<
-  TSchema = unknown,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TExtraFieldProps extends object = object,
-  TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>,
-> {
-  /**
-   * The form schema.
-   */
-  schema?: TSchema
-  /**
-   * Triggers when any of the field change.
-   */
-  onChange?: WatchObserver<TFieldValues>
-  /**
-   * The submit handler.
-   */
-  onSubmit: SubmitHandler<TFieldValues>
-  /**
-   * Triggers when there are validation errors.
-   */
-  onError?: SubmitErrorHandler<TFieldValues>
-  /**
-   * The Hook Form state ref.
-   */
-  formRef?: React.Ref<UseFormReturn<TFieldValues, TContext>>
-  /**
-   * The form children, can be a render prop or a ReactNode.
-   */
-  children?: MaybeRenderProp<
-    FormRenderContext<TFieldValues, TContext, TFieldTypes>
-  >
-  /**
-   * The field resolver, used to resolve the fields from schemas.
-   */
-  fieldResolver?: FieldResolver
-  /**
-   * Field overrides
-   */
-  fields?: DefaultFieldOverrides
-}
-
-export interface FormProps<
-  TSchema = unknown,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TExtraFieldProps extends object = object,
-  TFieldTypes = FieldProps<TFieldValues, TExtraFieldProps>,
-> extends UseFormProps<TFieldValues, TContext>,
-    Omit<
-      HTMLChakraProps<'form'>,
-      'children' | 'onChange' | 'onSubmit' | 'onError'
-    >,
-    FormOptions<
-      TSchema,
-      TFieldValues,
-      TContext,
-      TExtraFieldProps,
-      TFieldTypes
-    > {}
-
-/**
- * The wrapper component provides context, state, and focus management.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- */
-export const Form = forwardRef(
-  <
-    TSchema = any,
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object,
-    TExtraFieldProps extends object = object,
-    TFieldTypes = FieldProps<TFieldValues>,
-  >(
-    props: FormProps<
-      TSchema,
-      TFieldValues,
-      TContext,
-      TExtraFieldProps,
-      TFieldTypes
-    >,
-    ref: React.ForwardedRef<HTMLFormElement>,
-  ) => {
-    const {
-      mode = 'all',
-      resolver,
-      fieldResolver,
-      fields,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      schema,
-      defaultValues,
-      values,
-      context,
-      resetOptions,
-      onChange,
-      onSubmit,
-      onError,
-      formRef,
-      children,
-      ...rest
-    } = props
-
-    const form = {
-      mode,
-      resolver,
-      defaultValues,
-      values,
-      reValidateMode,
-      shouldFocusError,
-      shouldUnregister,
-      shouldUseNativeValidation,
-      criteriaMode,
-      delayError,
-      context,
-      resetOptions,
-    }
-
-    const methods = useForm<TFieldValues, TContext>(form)
-    const { handleSubmit } = methods
-
-    // This exposes the useForm api through the forwarded ref
-    React.useImperativeHandle(formRef, () => methods, [formRef, methods])
-
-    React.useEffect(() => {
-      let subscription: any
-      if (onChange) {
-        subscription = methods.watch(onChange)
-      }
-      return () => subscription?.unsubscribe()
-    }, [methods, onChange])
-
-    let _children = children
-    if (!_children && fieldResolver) {
-      _children = (
-        <FormLayout>
-          <AutoFields />
-          <SubmitButton {...fields?.submit} />
-        </FormLayout>
-      )
-    }
-
-    return (
-      <FormProvider
-        {...methods}
-        schema={schema}
-        fieldResolver={fieldResolver}
-        fields={fields}
-      >
-        <chakra.form
-          ref={ref}
-          onSubmit={handleSubmit(onSubmit, onError)}
-          {...rest}
-          className={cx('sui-form', props.className)}
-        >
-          {runIfFn(_children, {
-            Field: DefaultField as any,
-            DisplayIf: DisplayIf as any,
-            ArrayField: ArrayField as any,
-            ObjectField: ObjectField as any,
-            ...methods,
-          })}
-        </chakra.form>
-      </FormProvider>
-    )
-  },
-) as FormComponent
-
-export type FormComponent = (<
-  TSchema = unknown,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TExtraFieldProps extends object = object,
-  TFieldTypes = FieldProps<TFieldValues>,
->(
-  props: FormProps<
-    TSchema,
-    TFieldValues,
-    TContext,
-    TExtraFieldProps,
-    TFieldTypes
-  > & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  },
-) => React.ReactElement) & {
-  displayName?: string
-}
-
-Form.displayName = 'Form'
-
-export type GetResolver = <
-  TFieldValues extends FieldValues,
-  TContext extends object,
->(
-  schema: unknown,
-) => (
-  values: TFieldValues,
-  context: TContext | undefined,
-  options: ResolverOptions<TFieldValues>,
-) => Promise<ResolverResult<TFieldValues>>