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

package/src/create-field.tsx

@@ -1,171 +0,0 @@
-import React, {
-  type ForwardRefRenderFunction,
-  type PropsWithoutRef,
-  forwardRef,
-} from 'react'
-
-import { callAll, mergeRefs, splitProps } from '@saas-ui/core/utils'
-import { Controller, type RegisterOptions } from 'react-hook-form'
-
-import { BaseField } from './base-field'
-import { useFieldsContext } from './fields-context'
-import { useFormContext } from './form-context'
-import { BaseFieldProps, GetBaseField } from './types'
-
-interface CreateFieldProps<ExtraFieldProps extends object = object> {
-  displayName: string
-  hideLabel?: boolean
-  getBaseField: GetBaseField<ExtraFieldProps>
-}
-
-const _createField = (
-  InputComponent: React.FC<any>,
-  { displayName, hideLabel, getBaseField: getBaseFieldProp }: CreateFieldProps,
-) => {
-  const Field = forwardRef<HTMLDivElement, any>((props, ref) => {
-    const { id, name, label, isRequired, rules } = props
-
-    const inputRules = {
-      required: isRequired,
-      ...rules,
-    }
-
-    const fieldContext = useFieldsContext()
-
-    const getBaseField = fieldContext?.getBaseField ?? getBaseFieldProp
-
-    const { extraProps, BaseField } = React.useMemo(
-      () => getBaseField(),
-      [getBaseField],
-    )
-
-    const [, inputProps] = splitProps(
-      props,
-      [
-        'children',
-        'name',
-        'label',
-        'required',
-        'disabled',
-        'invalid',
-        'readOnly',
-        'help',
-        'hideLabel',
-      ].concat(extraProps),
-    )
-
-    return (
-      <BaseField name={name} hideLabel={hideLabel} {...props}>
-        <InputComponent
-          ref={ref}
-          id={id}
-          name={name}
-          label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
-          {...inputProps}
-          rules={inputRules}
-        />
-      </BaseField>
-    )
-  })
-
-  Field.displayName = displayName
-
-  return Field
-}
-
-const withControlledInput = (InputComponent: React.FC<any>) => {
-  return forwardRef<typeof InputComponent, ControlProps>((props, ref) => {
-    const { name, rules, ...inputProps } = props
-    const { control } = useFormContext()
-
-    const onChange = inputProps.onChange as (...event: any[]) => void
-
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={rules}
-        render={({ field: { ref: _ref, ...field } }) => (
-          <InputComponent
-            {...field}
-            {...inputProps}
-            onChange={callAll(onChange, field.onChange)}
-            onBlur={callAll(inputProps.onBlur, field.onBlur)}
-            ref={mergeRefs(ref, _ref)}
-          />
-        )}
-      />
-    )
-  })
-}
-
-const withUncontrolledInput = (InputComponent: React.FC<any>) => {
-  return forwardRef<typeof InputComponent, ControlProps>(
-    ({ name, rules, ...inputProps }, ref) => {
-      const { register } = useFormContext()
-
-      const { ref: _ref, ...field } = register(name, rules)
-
-      const onChange = inputProps.onChange as (...event: any[]) => void
-
-      return (
-        <InputComponent
-          {...field}
-          {...inputProps}
-          onChange={callAll(onChange, field.onChange)}
-          onBlur={callAll(inputProps.onBlur, field.onBlur)}
-          ref={mergeRefs(ref, _ref)}
-        />
-      )
-    },
-  )
-}
-
-export interface CreateFieldOptions {
-  isControlled?: boolean
-  hideLabel?: boolean
-  BaseField?: React.FC<any>
-}
-
-interface ControlProps {
-  name: string
-  onChange: (...event: any[]) => void
-  onBlur: (...event: any[]) => void
-  value: unknown
-  disabled?: boolean
-  rules?: RegisterOptions
-}
-
-/**
- * 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 the checkbox field.
- */
-export const createField = <TType = unknown, TProps extends object = object>(
-  component: ForwardRefRenderFunction<
-    TType,
-    PropsWithoutRef<TProps & ControlProps>
-  >,
-  options?: CreateFieldOptions,
-) => {
-  let InputComponent
-  if (options?.isControlled) {
-    InputComponent = withControlledInput(forwardRef(component))
-  } else {
-    InputComponent = withUncontrolledInput(forwardRef(component))
-  }
-
-  const Field = _createField(InputComponent, {
-    displayName: `${component.displayName ?? 'Custom'}Field`,
-    hideLabel: options?.hideLabel,
-    getBaseField: () => ({
-      extraProps: [],
-      BaseField,
-    }),
-  }) as React.FC<Omit<BaseFieldProps, keyof TProps> & TProps>
-
-  return Field
-}

package/src/create-form.tsx

@@ -1,100 +0,0 @@
-import React, { ForwardedRef, forwardRef, useMemo } from 'react'
-
-import { defaultFieldTypes } from './default-fields'
-import { objectFieldResolver } from './field-resolver'
-import { GetFieldResolver } from './field-resolver'
-import { FieldsProvider } from './fields-context'
-import { FieldValues, Form, FormProps, GetResolver } from './form'
-import { GetBaseField, WithFields } from './types'
-
-export interface CreateFormProps<
-  FieldDefs,
-  TGetBaseField extends GetBaseField = GetBaseField,
-> {
-  resolver?: GetResolver
-  fieldResolver?: GetFieldResolver
-  fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
-  getBaseField?: TGetBaseField
-}
-
-export type FormType<
-  FieldDefs,
-  ExtraProps = object,
-  ExtraFieldProps extends object = object,
-  ExtraOverrides = object,
-> = (<
-  TSchema = unknown,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
->(
-  props: WithFields<
-    FormProps<TSchema, TFieldValues, TContext, ExtraFieldProps>,
-    FieldDefs,
-    ExtraOverrides
-  > & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  } & ExtraProps,
-) => React.ReactElement) & {
-  displayName?: string
-  id?: string
-}
-
-export function createForm<
-  FieldDefs,
-  TGetBaseField extends GetBaseField<any> = GetBaseField<any>,
->({
-  resolver,
-  fieldResolver = objectFieldResolver,
-  fields,
-  getBaseField,
-}: CreateFormProps<FieldDefs, TGetBaseField> = {}) {
-  type ExtraFieldProps =
-    TGetBaseField extends GetBaseField<infer ExtraFieldProps>
-      ? ExtraFieldProps
-      : object
-
-  const DefaultForm = forwardRef(
-    <
-      TSchema = any,
-      TFieldValues extends FieldValues = FieldValues,
-      TContext extends object = object,
-    >(
-      props: WithFields<
-        FormProps<TSchema, TFieldValues, TContext, ExtraFieldProps>,
-        FieldDefs
-      >,
-      ref: ForwardedRef<HTMLFormElement>,
-    ) => {
-      const {
-        schema,
-        resolver: resolverProp,
-        fieldResolver: fieldResolverProp,
-        ...rest
-      } = props
-
-      const fieldsContext = useMemo(
-        () => ({
-          fields: { ...defaultFieldTypes, ...fields },
-          getBaseField,
-        }),
-        [fields, getBaseField],
-      )
-
-      return (
-        <FieldsProvider value={fieldsContext}>
-          <Form
-            ref={ref}
-            resolver={resolverProp ?? resolver?.(props.schema)}
-            fieldResolver={fieldResolverProp ?? fieldResolver?.(schema)}
-            {...rest}
-          />
-        </FieldsProvider>
-      )
-    },
-  ) as FormType<FieldDefs, object, ExtraFieldProps>
-
-  DefaultForm.displayName = 'Form'
-  DefaultForm.id = 'Form'
-
-  return DefaultForm
-}

package/src/create-step-form.tsx

@@ -1,118 +0,0 @@
-import React, { forwardRef, useMemo } from 'react'
-
-import { runIfFn } from '@chakra-ui/utils'
-import { StepperProvider } from '@saas-ui/core'
-
-import {
-  ArrayField,
-  DisplayIf,
-  FieldProps,
-  FieldValues,
-  FieldsProvider,
-  GetFieldResolver,
-  ObjectField,
-  defaultFieldTypes,
-} from './'
-import { Field } from './field'
-import { Form } from './form'
-import { GetResolver } from './form'
-import { FormStep, StepsOptions } from './step-form'
-import { GetBaseField, WithStepFields } from './types'
-import {
-  StepFormProvider,
-  UseStepFormProps,
-  useStepForm,
-} from './use-step-form'
-
-export type StepFormType<
-  FieldDefs,
-  ExtraProps = object,
-  ExtraFieldProps extends object = object,
-  ExtraOverrides = object,
-> = (<
-  TSteps extends StepsOptions<any> = StepsOptions<any>,
-  TFieldValues extends FieldValues = FieldValues,
-  TContext extends object = object,
-  TFieldTypes = FieldProps<TFieldValues, ExtraFieldProps>,
->(
-  props: WithStepFields<
-    UseStepFormProps<TSteps, TFieldValues, TContext>,
-    FieldDefs,
-    ExtraOverrides
-  > & {
-    ref?: React.ForwardedRef<HTMLFormElement>
-  } & ExtraProps,
-) => React.ReactElement) & {
-  displayName?: string
-  id?: string
-}
-
-export interface CreateStepFormProps<
-  FieldDefs,
-  TGetBaseField extends GetBaseField = GetBaseField,
-> {
-  resolver?: GetResolver
-  fieldResolver?: GetFieldResolver
-  fields?: FieldDefs extends Record<string, React.FC<any>> ? FieldDefs : never
-  getBaseField?: TGetBaseField
-}
-
-export function createStepForm<
-  FieldDefs,
-  TGetBaseField extends GetBaseField<any> = GetBaseField<any>,
->({
-  fields,
-  resolver,
-  fieldResolver,
-  getBaseField,
-}: CreateStepFormProps<FieldDefs, TGetBaseField> = {}) {
-  type ExtraFieldProps =
-    TGetBaseField extends GetBaseField<infer ExtraFieldProps>
-      ? ExtraFieldProps
-      : object
-
-  const StepForm = forwardRef<HTMLFormElement, any>((props, ref) => {
-    const { children, steps, ...rest } = props
-
-    const stepper = useStepForm({
-      // resolver: resolver(props),
-      // fieldResolver: fieldResolver(,
-      ...props,
-    })
-
-    const { getFormProps, ...ctx } = stepper
-
-    const context = useMemo(() => ctx, [ctx])
-
-    const fieldsContext = {
-      fields: {
-        ...defaultFieldTypes,
-        ...fields,
-      },
-      getBaseField,
-    }
-
-    return (
-      <StepperProvider value={context}>
-        <StepFormProvider value={context}>
-          <FieldsProvider value={fieldsContext}>
-            <Form ref={ref} {...rest} {...getFormProps()}>
-              {runIfFn(children, {
-                ...stepper,
-                Field: Field as any,
-                FormStep: FormStep as any,
-                DisplayIf: DisplayIf as any,
-                ArrayField: ArrayField as any,
-                ObjectField: ObjectField as any,
-              })}
-            </Form>
-          </FieldsProvider>
-        </StepFormProvider>
-      </StepperProvider>
-    )
-  }) as StepFormType<FieldDefs, object, ExtraFieldProps>
-
-  StepForm.displayName = `Step${Form.displayName || Form.name}`
-
-  return StepForm
-}

package/src/default-fields.tsx

@@ -1,233 +0,0 @@
-import React from 'react'
-
-import {
-  Input,
-  InputProps,
-  Stack,
-  type SystemStyleObject,
-  Textarea,
-  TextareaProps,
-  createListCollection,
-} from '@chakra-ui/react'
-import { Checkbox, type CheckboxProps } from '@saas-ui/react/checkbox'
-import { InputGroup } from '@saas-ui/react/input-group'
-import { NumberInput, type NumberInputProps } from '@saas-ui/react/number-input'
-import {
-  PasswordInput,
-  type PasswordInputProps,
-} from '@saas-ui/react/password-input'
-import { PinInput, type PinInputProps } from '@saas-ui/react/pin-input'
-import { Radio, RadioGroup, type RadioGroupProps } from '@saas-ui/react/radio'
-import { Select } from '@saas-ui/react/select'
-import { Switch, type SwitchProps } from '@saas-ui/react/switch'
-
-import { createField } from './create-field.tsx'
-import type { FieldOption, FieldOptions } from './types.ts'
-
-export interface InputFieldProps extends InputProps {
-  type?: string
-  startElement?: React.ReactNode
-  endElement?: React.ReactNode
-}
-
-export const InputField = createField<HTMLInputElement, InputFieldProps>(
-  ({ type = 'text', startElement, endElement, size, ...rest }, ref) => {
-    return (
-      <InputGroup startElement={startElement} endElement={endElement}>
-        <Input type={type} size={size} {...rest} ref={ref} />
-      </InputGroup>
-    )
-  },
-)
-
-export interface NumberInputFieldProps extends NumberInputProps {
-  type: 'number'
-}
-
-export const NumberInputField = createField<
-  HTMLInputElement,
-  NumberInputFieldProps
->((props, ref) => <NumberInput {...props} ref={ref} />, {
-  isControlled: true,
-})
-
-export const PasswordInputField = createField<
-  HTMLInputElement,
-  PasswordInputProps
->(({ type = 'password', ...props }, ref) => (
-  <PasswordInput ref={ref} {...props} />
-))
-
-export interface TextareaFieldProps extends TextareaProps {}
-
-export const TextareaField = createField<
-  HTMLTextAreaElement,
-  TextareaFieldProps
->((props, ref) => <Textarea {...props} ref={ref} />)
-
-export interface SwitchFieldProps extends SwitchProps {
-  type: 'switch'
-}
-
-export const SwitchField = createField<HTMLInputElement, SwitchFieldProps>(
-  ({ type, value, ...rest }, ref) => {
-    return <Switch checked={!!value} {...rest} ref={ref} />
-  },
-  {
-    isControlled: true,
-  },
-)
-
-export interface SelectFieldProps
-  extends Omit<Select.RootProps<FieldOption>, 'collection'> {
-  options: FieldOptions
-  placeholder?: string
-  triggerProps?: Select.TriggerProps
-  contentProps?: Select.ContentProps
-}
-
-export const SelectField = createField<HTMLDivElement, SelectFieldProps>(
-  (props, ref) => {
-    const {
-      triggerProps,
-      contentProps,
-      options,
-      placeholder,
-      onChange,
-      onValueChange,
-      onBlur,
-      ...rest
-    } = props
-
-    const collection = createListCollection({
-      items: options,
-    })
-
-    return (
-      <Select.Root
-        ref={ref}
-        collection={collection}
-        onValueChange={(details) => {
-          onChange(details.value)
-        }}
-        onInteractOutside={() => onBlur()}
-        {...rest}
-      >
-        <Select.Trigger {...triggerProps}>
-          <Select.ValueText placeholder={placeholder} />
-        </Select.Trigger>
-        <Select.Content {...contentProps}>
-          {collection.items.map((option) => (
-            <Select.Item key={option.value} item={option}>
-              {option.label || option.value}
-            </Select.Item>
-          ))}
-        </Select.Content>
-      </Select.Root>
-    )
-  },
-  {
-    isControlled: true,
-  },
-)
-
-export interface CheckboxFieldProps extends CheckboxProps {
-  type: 'checkbox'
-  label?: string
-}
-
-export const CheckboxField = createField<HTMLInputElement, CheckboxFieldProps>(
-  ({ label, type, ...props }, ref) => {
-    return (
-      <Checkbox ref={ref} {...props}>
-        {label}
-      </Checkbox>
-    )
-  },
-  {
-    hideLabel: true,
-  },
-)
-
-export interface RadioFieldProps extends RadioGroupProps {
-  type: 'radio'
-  options: FieldOptions
-  flexDirection?: SystemStyleObject['flexDirection']
-  gap?: SystemStyleObject['gap']
-}
-
-export const RadioField = createField<HTMLInputElement, RadioFieldProps>(
-  (props, ref) => {
-    const { options, onChange, flexDirection = 'column', gap, ...rest } = props
-    return (
-      <RadioGroup
-        ref={ref}
-        onValueChange={({ value }) => {
-          onChange?.(value)
-        }}
-        {...rest}
-      >
-        <Stack flexDirection={flexDirection} gap={gap}>
-          {options.map((option) => (
-            <Radio key={option.value} value={option.value}>
-              {option.label || option.value}
-            </Radio>
-          ))}
-        </Stack>
-      </RadioGroup>
-    )
-  },
-  {
-    isControlled: true,
-  },
-)
-
-export interface PinFieldProps
-  extends Omit<PinInputProps, 'type' | 'value' | 'onChange'> {
-  type: 'pin'
-  pinLength?: number
-  pinType?: PinInputProps['type']
-  value?: string
-  onChange?: (value: string) => void
-}
-
-export const PinField = createField<HTMLInputElement, PinFieldProps>(
-  (props, ref) => {
-    const { pinType, value: valueProp, onChange, ...inputProps } = props
-
-    const value = valueProp?.split('') || []
-
-    return (
-      <PinInput
-        ref={ref}
-        {...inputProps}
-        value={value}
-        onValueChange={(details) => {
-          onChange(details.valueAsString)
-        }}
-        type={pinType}
-      />
-    )
-  },
-  {
-    isControlled: true,
-  },
-)
-
-export const defaultFieldTypes = {
-  text: InputField,
-  email: InputField,
-  url: InputField,
-  phone: InputField,
-  time: InputField,
-  number: NumberInputField,
-  pin: PinField,
-  checkbox: CheckboxField,
-  radio: RadioField,
-  password: PasswordInputField,
-  select: SelectField,
-  switch: SwitchField,
-  textarea: TextareaField,
-}
-
-export type DefaultFields = typeof defaultFieldTypes

package/src/display-field.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react'
-
-import { Field as FieldPrimivite, Text } from '@chakra-ui/react'
-import type { FieldPath, FieldValues } from 'react-hook-form'
-
-import { useFormContext } from './form-context.tsx'
-import type { ArrayFieldPath } from './types.ts'
-
-export interface DisplayFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> extends Omit<FieldPrimivite.RootProps, 'type' | 'onChange' | 'defaultValue'> {
-  name: TName | ArrayFieldPath<TName>
-  label?: string
-}
-
-/**
- * Display a field value.
- *
- * @see Docs https://saas-ui.dev/
- */
-export const DisplayField: React.FC<DisplayFieldProps> = ({
-  name,
-  label,
-  ...props
-}) => {
-  return (
-    <FieldPrimivite.Root {...props}>
-      {label ? (
-        <FieldPrimivite.Label htmlFor={name}>{label}</FieldPrimivite.Label>
-      ) : null}
-      <Text fontSize="md">
-        <FormValue name={name} />
-      </Text>
-    </FieldPrimivite.Root>
-  )
-}
-
-DisplayField.displayName = 'DisplayField'
-
-export const FormValue: React.FC<{ name: string }> = ({ name }) => {
-  const { getValues } = useFormContext()
-  return getValues(name) || null
-}
-
-FormValue.displayName = 'FormValue'