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

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 { StepperProvider } from '@saas-ui/core'
-import { runIfFn } from '@saas-ui/core/utils'
-
-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'

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