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

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