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

package/src/index.ts

@@ -1,310 +0,0 @@
-// Import and export Form and StepForm
-import { createForm } from './create-form'
-
-// import { createStepForm } from './create-step-form'
-
-// Exporting from './display-field'
-export { DisplayField } from './display-field'
-export type { DisplayFieldProps } from './display-field'
-export { FormValue } from './display-field'
-
-// Exporting from './field'
-export { Field } from './field'
-export type { FieldRules } from './field'
-
-// Exporting from './fields'
-export { AutoFields } from './fields'
-export type { FieldsProps } from './fields'
-
-// Exporting from './fields-context'
-export { FieldsProvider, useField } from './fields-context'
-
-// Exporting from './layout'
-export { FormLayout } from './form-layout'
-export type { FormLayoutProps } from './form-layout'
-
-// Exporting from './submit-button'
-export { SubmitButton } from './submit-button'
-export type { SubmitButtonProps } from './submit-button'
-
-// Exporting from './array-field'
-export {
-  ArrayField,
-  ArrayFieldAddButton,
-  ArrayFieldContainer,
-  ArrayFieldRemoveButton,
-  ArrayFieldRow,
-  ArrayFieldRowContainer,
-  ArrayFieldRowFields,
-  ArrayFieldRows,
-} from './array-field'
-
-export type {
-  ArrayFieldButtonProps,
-  ArrayFieldContainerProps,
-  ArrayFieldProps,
-  ArrayFieldRowFieldsProps,
-  ArrayFieldRowsProps,
-} from './array-field'
-
-// Exporting from './use-array-field'
-export {
-  ArrayFieldProvider,
-  ArrayFieldRowProvider,
-  useArrayField,
-  useArrayFieldAddButton,
-  useArrayFieldContext,
-  useArrayFieldRemoveButton,
-  useArrayFieldRow,
-  useArrayFieldRowContext,
-} from './use-array-field'
-
-export type {
-  ArrayFieldOptions,
-  UseArrayFieldReturn,
-  UseArrayFieldRowProps,
-  UseArrayFieldRowReturn,
-} from './use-array-field'
-
-// Exporting from './object-field'
-export { FormLegend, ObjectField } from './object-field'
-export type { ObjectFieldProps } from './object-field'
-
-// Exporting from './display-if'
-export { DisplayIf } from './display-if'
-export type { DisplayIfProps } from './display-if'
-
-// Exporting from './step-form'
-// export { FormStep, FormStepper, NextButton, PrevButton } from './step-form'
-
-// export type {
-//   FormStepOptions,
-//   FormStepProps,
-//   FormStepperProps,
-//   NextButtonProps,
-//   StepFormProps,
-//   StepsOptions,
-// } from './step-form'
-
-// Exporting from './use-step-form'
-// export {
-//   StepFormProvider,
-//   useFormStep,
-//   useStepForm,
-//   useStepFormContext,
-// } from './use-step-form'
-
-// export type {
-//   FormStepSubmitHandler,
-//   StepFormContext,
-//   StepFormRenderContext,
-//   StepState,
-//   UseFormStepProps,
-//   UseStepFormProps,
-//   UseStepFormReturn,
-// } from './use-step-form'
-
-// Exporting from './field-resolver'
-export { objectFieldResolver } from './field-resolver'
-export type {
-  FieldResolver,
-  GetFieldResolver,
-  ObjectSchema,
-} from './field-resolver'
-
-// Exporting from './watch-field'
-export { WatchField } from './watch-field'
-export type { WatchFieldProps } from './watch-field'
-
-// Exporting BaseField from './base-field'
-export { BaseField, useBaseField } from './base-field'
-
-// Exporting from './default-fields'
-export {
-  // CheckboxField,
-  InputField,
-  // NativeSelectField,
-  // NumberInputField,
-  // PasswordInputField,
-  // PinField,
-  // RadioField,
-  // SelectField,
-  // SwitchField,
-  TextareaField,
-  defaultFieldTypes,
-} from './default-fields'
-
-export type {
-  DefaultFields,
-  InputFieldProps,
-  // NumberInputFieldProps,
-  // PinFieldProps,
-  // SelectFieldProps,
-  // SwitchFieldProps,
-  TextareaFieldProps,
-  // CheckboxFieldProps,
-  // NativeSelectFieldProps,
-  // RadioFieldProps,
-} from './default-fields'
-
-// Exporting types from './types'
-export type {
-  FieldProps,
-  WithFields,
-  BaseFieldProps,
-  FieldOptions,
-  DefaultFieldOverrides,
-  // WithStepFields,
-  GetBaseField,
-} from './types'
-
-// Exporting from './create-form'
-export { createForm } from './create-form'
-export type { CreateFormProps, FormType } from './create-form'
-
-// Exporting from './create-field'
-export { createField } from './create-field'
-export type { CreateFieldOptions } from './create-field'
-
-// Exporting from './form'
-export { Form as BaseForm } from './form'
-export type { FormProps, FormRenderContext, FormComponent } from './form'
-
-// Exporting from './form-context'
-export { FormProvider, useFormContext } from './form-context'
-
-// export { createStepForm } from './create-step-form'
-// export type { CreateStepFormProps } from './create-step-form'
-
-/**
- * Form component.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- */
-export const Form = createForm()
-
-/**
- * Multi-step form component.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-// export const StepForm = createStepForm()
-
-export type {
-  BatchFieldArrayUpdate,
-  ChangeHandler,
-  Control,
-  ControllerFieldState,
-  ControllerProps,
-  ControllerRenderProps,
-  CriteriaMode,
-  CustomElement,
-  DeepMap,
-  DeepPartial,
-  DeepPartialSkipArrayKey,
-  DefaultValues,
-  DelayCallback,
-  EmptyObject,
-  ErrorOption,
-  EventType,
-  Field as FieldDef,
-  FieldArray,
-  FieldArrayMethodProps,
-  FieldArrayWithId,
-  FieldElement,
-  FieldError,
-  FieldErrors,
-  FieldName,
-  FieldNamesMarkedBoolean,
-  FieldRefs,
-  FieldValue,
-  FieldValues,
-  FormProviderProps,
-  FormState,
-  FormStateProxy,
-  FormStateSubjectRef,
-  GetIsDirty,
-  InternalFieldErrors,
-  InternalFieldName,
-  InternalNameSet,
-  IsAny,
-  IsFlatObject,
-  KeepStateOptions,
-  LiteralUnion,
-  Message,
-  Mode,
-  MultipleFieldErrors,
-  Names,
-  NativeFieldValue,
-  NestedValue,
-  NonUndefined,
-  Noop,
-  Primitive,
-  ReadFormState,
-  Ref,
-  RefCallBack,
-  RegisterOptions,
-  Resolver,
-  ResolverError,
-  ResolverOptions,
-  ResolverResult,
-  ResolverSuccess,
-  SetFieldValue,
-  SetValueConfig,
-  Subjects,
-  SubmitErrorHandler,
-  SubmitHandler,
-  TriggerConfig,
-  UnpackNestedValue,
-  UseControllerProps,
-  UseControllerReturn,
-  UseFieldArrayProps,
-  UseFieldArrayReturn,
-  UseFormClearErrors,
-  UseFormGetValues,
-  UseFormHandleSubmit,
-  UseFormProps,
-  UseFormRegister,
-  UseFormRegisterReturn,
-  UseFormReset,
-  UseFormResetField,
-  UseFormReturn,
-  UseFormSetError,
-  UseFormSetFocus,
-  UseFormSetValue,
-  UseFormStateProps,
-  UseFormStateReturn,
-  UseFormTrigger,
-  UseFormUnregister,
-  UseFormWatch,
-  UseWatchProps,
-  Validate,
-  ValidateResult,
-  ValidationMode,
-  ValidationRule,
-  ValidationValue,
-  ValidationValueMessage,
-  WatchInternal,
-  WatchObserver,
-  ArrayPath,
-  BrowserNativeObject,
-  DeepRequired,
-  ExtractObjects,
-  FieldArrayPath,
-  FieldArrayPathValue,
-  FieldErrorsImpl,
-  FieldPath,
-  FieldPathByValue,
-  FieldPathValue,
-  FieldPathValues,
-} from 'react-hook-form'
-
-export {
-  appendErrors,
-  useController,
-  useFieldArray,
-  useForm,
-  useFormState,
-  useWatch,
-  Controller,
-} from 'react-hook-form'

package/src/object-field.tsx

@@ -1,58 +0,0 @@
-import * as React from 'react'
-
-import { Field as FieldPrimivite } from '@chakra-ui/react'
-import { dataAttr } from '@saas-ui/core/utils'
-import { FieldPath, FieldValues } from 'react-hook-form'
-
-import { useFieldProps } from './form-context'
-import { FormLayout, type FormLayoutOptions } from './form-layout'
-import { BaseFieldProps } from './types'
-import { mapNestedFields } from './utils'
-
-export interface ObjectFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> extends Omit<BaseFieldProps, keyof FormLayoutOptions>,
-    FormLayoutOptions {
-  name: TName
-  children: React.ReactNode
-}
-
-export const FormLegend = (props: FieldPrimivite.LabelProps) => {
-  return <FieldPrimivite.Label as="legend" {...props} />
-}
-
-/**
- * The object field component.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/object-field
- */
-export const ObjectField: React.FC<ObjectFieldProps> = (props) => {
-  const {
-    name,
-    label,
-    hideLabel: hideLabelProp,
-    children,
-    columns: columnsProp,
-    gap: gapProp,
-    ...fieldProps
-  } = props
-
-  const { hideLabel, columns, gap, ...overrides } = useFieldProps(name) as Omit<
-    ObjectFieldProps,
-    'name'
-  >
-
-  const hidden = hideLabelProp || hideLabel
-
-  return (
-    <FieldPrimivite.Root as="fieldset" {...fieldProps} {...overrides}>
-      <FormLegend data-hidden={dataAttr(hidden)}>{label}</FormLegend>
-      <FormLayout columns={columnsProp || columns} gridGap={gapProp || gap}>
-        {mapNestedFields(name, children)}
-      </FormLayout>
-    </FieldPrimivite.Root>
-  )
-}
-
-ObjectField.displayName = 'ObjectField'

package/src/step-form.tsx

@@ -1,191 +0,0 @@
-import * as React from 'react'
-
-import {
-  Button,
-  ButtonProps,
-  HTMLChakraProps,
-  type StepsChangeDetails,
-  chakra,
-} from '@chakra-ui/react'
-import { callAllHandlers, cx } from '@chakra-ui/utils'
-import { useStepperContext } from '@saas-ui/core'
-import { Steps } from '@saas-ui/react/steps'
-import { FieldValues } from 'react-hook-form'
-
-import { SubmitButton } from './submit-button'
-import {
-  FormStepSubmitHandler,
-  UseStepFormProps,
-  useFormStep,
-} from './use-step-form'
-
-export type StepsOptions<TSchema, TName extends string = string> = {
-  /**
-   * The step name
-   */
-  name: TName
-  /**
-   * Schema
-   */
-  schema?: TSchema
-}[]
-
-export interface StepFormProps<
-  TSteps extends StepsOptions<any> = StepsOptions<any>,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-> extends UseStepFormProps<TSteps, TFieldValues, TContext> {}
-
-export interface FormStepOptions<TName extends string = string> {
-  /**
-   * The step name
-   */
-  name: TName
-  /**
-   * Schema
-   */
-  schema?: any
-  /**
-   * Hook Form Resolver
-   */
-  resolver?: any
-}
-
-export interface FormStepperProps extends Steps.RootProps {
-  // render?: Steps.['render']
-}
-
-/**
- * Renders a stepper that displays progress above the form.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-export const FormStepper = React.forwardRef<HTMLDivElement, FormStepperProps>(
-  (props, ref) => {
-    const { activeIndex, setIndex } = useStepperContext()
-
-    const {
-      children,
-      orientation,
-      variant,
-      colorScheme,
-      size,
-      onStepChange: onStepChangeProp,
-      ...rest
-    } = props
-
-    const elements = React.Children.map(children, (child, index) => {
-      if (
-        React.isValidElement<FormStepProps>(child) &&
-        child?.type === FormStep
-      ) {
-        const { isCompleted } = useFormStep(child.props) // Register this step
-        return (
-          <Steps.Item
-            index={index}
-            title={child.props.title}
-            data-completed={isCompleted}
-            {...rest}
-          >
-            {child.props.children}
-          </Steps.Item>
-        )
-      }
-      return child
-    })
-
-    const onChange = React.useCallback((details: StepsChangeDetails) => {
-      setIndex(details.step)
-      onStepChangeProp?.(details)
-    }, [])
-
-    return (
-      <Steps.Root
-        ref={ref}
-        orientation={orientation}
-        step={activeIndex}
-        variant={variant}
-        colorScheme={colorScheme}
-        size={size}
-        onStepChange={onChange}
-      >
-        {elements}
-      </Steps.Root>
-    )
-  },
-)
-
-export interface FormStepProps<TName extends string = string>
-  extends FormStepOptions<TName>,
-    Omit<HTMLChakraProps<'div'>, 'onSubmit'> {
-  onSubmit?: FormStepSubmitHandler
-}
-/**
- * The form step containing fields for a specific step.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-export const FormStep = <TName extends string = string>(
-  props: FormStepProps<TName>,
-) => {
-  const { name, children, className, onSubmit, ...rest } = props
-  const step = useFormStep({ name, onSubmit })
-
-  const { isActive } = step
-
-  return isActive ? (
-    <chakra.div {...rest} className={cx('sui-form__step', className)}>
-      {children}
-    </chakra.div>
-  ) : null
-}
-
-FormStep.displayName = 'FormStep'
-
-/**
- * A button that this opens the previous step when clicked. Disabled on the first step.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-export const PrevButton: React.FC<ButtonProps> = (props) => {
-  const { isFirstStep, isCompleted, prevStep } = useStepperContext()
-
-  return (
-    <Button
-      disabled={isFirstStep || isCompleted}
-      children="Back"
-      {...props}
-      className={cx('sui-form__prev-button', props.className)}
-      onClick={callAllHandlers(props.onClick, prevStep)}
-    />
-  )
-}
-
-PrevButton.displayName = 'PrevButton'
-
-export interface NextButtonProps extends Omit<ButtonProps, 'children'> {
-  submitLabel?: string
-  label?: string
-}
-
-/**
- * A button that submits the active step.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/step-form
- */
-export const NextButton: React.FC<NextButtonProps> = (props) => {
-  const { label = 'Next', submitLabel = 'Complete', ...rest } = props
-  const { isLastStep, isCompleted } = useStepperContext()
-
-  return (
-    <SubmitButton
-      {...rest}
-      disabled={isCompleted}
-      className={cx('sui-form__next-button', props.className)}
-    >
-      {isLastStep || isCompleted ? submitLabel : label}
-    </SubmitButton>
-  )
-}
-
-NextButton.displayName = 'NextButton'

package/src/submit-button.tsx

@@ -1,71 +0,0 @@
-import { forwardRef } from 'react'
-
-import { Button, ButtonProps } from '@saas-ui/react/button'
-import { useFormContext } from 'react-hook-form'
-
-import { useFieldProps } from './form-context.tsx'
-
-export interface SubmitButtonProps extends ButtonProps {
-  /**
-   * Disable the submit button if the form is untouched.
-   */
-  disableIfUntouched?: boolean
-  /**
-   * Disable the submit button if the form is invalid.
-   */
-  disableIfInvalid?: boolean
-}
-
-/**
- * A button with type submit and default color scheme primary and isLoading state when the form is submitting.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- */
-export const SubmitButton = forwardRef<HTMLButtonElement, SubmitButtonProps>(
-  (props, ref) => {
-    const {
-      variant = 'glass',
-      colorPalette = 'accent',
-      children = 'Submit',
-      disableIfUntouched: disableIfUntouchedProp = false,
-      disableIfInvalid: disableIfInvalidProp = false,
-      disabled: disabledProp,
-      loading,
-      ...rest
-    } = props
-    const { formState } = useFormContext()
-
-    const field = useFieldProps('submit') as SubmitButtonProps
-
-    const {
-      disableIfUntouched: disableIfUntouchedOverride,
-      disableIfInvalid: disableIfInvalidOverride,
-      ...fieldProps
-    } = field
-
-    const disableIfUntouched =
-      disableIfUntouchedOverride ?? disableIfUntouchedProp
-    const disableIfInvalid = disableIfInvalidOverride ?? disableIfInvalidProp
-
-    const isDisabled =
-      (disableIfUntouched && !formState.isDirty) ||
-      (disableIfInvalid && !formState.isValid) ||
-      disabledProp
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant as any}
-        colorPalette={colorPalette}
-        type="submit"
-        loading={formState.isSubmitting || loading}
-        disabled={isDisabled}
-        children={children}
-        {...rest}
-        {...fieldProps}
-      />
-    )
-  },
-)
-
-SubmitButton.displayName = 'SubmitButton'