Schema requires too much boilerplate, here's my wrapper for createFormHook

[Sam-Kruglov]

I don't have time to submit a PR right now but I made a generic wrapper over createFormHook that integrates Effect/Schema and it works great for me. I made sure to satisfy all linting (and I configured it to the max with opinionated tsconfig flags, tseslint.strictTypeChecked|stylisticTypeChecked). It does need some unit tests though which I don't have. At some point I'm hoping you'll take it or I'll finally submit a PR myself (I very doubt I'd ever get to it).

Usage

import { useState } from 'react'
import { ItemType } from '@/data/graphql/generated/graphql'
import { isBStuffItem } from '@/utils/item-utils'
import Button from '@/components/ui/button'
import { useMutation } from '@apollo/client'
import { FailedApolloError } from '@/src/routes/-fallback/message'
import Dialog, { DialogContent, DialogTrigger } from '@/components/ui/dialog.tsx'
import { CREATE_ITEM } from './graphql'
import { useAppForm, withFieldGroup } from '@/components/ui/form.tsx'
import { useStore } from '@tanstack/react-form'
import Accordion, { AccordionContent, AccordionTrigger } from '@/components/ui/accordion.tsx'
import { cx } from '@/utils/class-utils.ts'
import { noCase } from 'text-case'
import { type ItemCreateInput, ItemType } from '@/data/graphql/generated/graphql'
import { isBStuffItem } from '@/utils/item-utils'
import {
  anyRequired,
  NumberFormFieldOptional,
  NumberFormFieldOptionalNonNegative,
  schemaFor,
  StringFormFieldNonEmpty,
  StringFormFieldOptionalNonEmpty
} from '@/components/ui/form-schema.ts'
import { Schema as S } from 'effect'
import { noCase } from 'text-case'

// TODO: length is not showing up together with other errors, only alone https://github.com/Effect-TS/effect/issues/5371
const CreateItemSchema = schemaFor<ItemCreateInput>()({
  name: StringFormFieldNonEmpty,
  type: S.Literal(...Object.values(ItemType)),
  length: NumberFormFieldOptionalNonNegative,
  bStuff: S.optionalWith(
    S.Struct({
      maxPercent: NumberFormFieldOptionalNonNegative,
      growthLimit: NumberFormFieldOptional.filter(S.greaterThanOrEqualTo(100)),
      lastUpdatedDate: StringFormFieldOptionalNonEmpty,
      minValue: NumberFormFieldOptionalNonNegative
    }).pipe(anyRequired()),
    { exact: true }
  )
}).pipe(
  S.filter(
    a =>
      !isBStuffItem(a.type) ||
      a.bStuff != null || {
        path: ['bStuff'],
        message: `bStuff is required for a ${noCase(a.type)} item`
      }
  ),
  S.filter(
    a =>
      isBStuffItem(a.type) ||
      a.bStuff == null || {
        path: ['bStuff'],
        message: `bStuff is prohibited for ${noCase(a.type)} type of item`
      }
  )
)

export default function CreateItem() {
  const [createItem, { error }] = useMutation(CREATE_ITEM)
  const [open, setOpen] = useState(false)
  const form = useAppForm(CreateItemSchema)({
    defaultValuesOverrides: { // < --- ✨ MAGIC (generated defaults from schema)
      type: ItemType.B
    },
    onSubmitWithTransition: async ({ decoded }) => {
      const { errors } = await createItem({
        variables: {
          input: decoded
        }
      })
      if (!errors) setOpen(false)
    }
  })
  const type = useStore(form.store, state => state.values.type)
  const formErrorMap = useStore(form.store, state => state.errorMap)
  const invalidFields = formErrorMap.onDynamic
    ? [
        ...new Set(
          Object.keys(formErrorMap.onDynamic)
            .filter(k => k !== '')
            .map(k => noCase(k.split('.')[0]))
        )
      ]
    : []
  const subTitle = invalidFields.length == 0 ? undefined : `Invalid: ${invalidFields.join(', ')}`
  return (
    <Dialog open={open} onOpenChange={isOpen => setOpen(isOpen)}>
      <DialogTrigger asChild>
        <Button>Create Item</Button>
      </DialogTrigger>
      <DialogContent
        title="Create Item"
        subTitle={subTitle}
        subTitleClassName="transition-colors bg-red-200/40 hover:bg-red-200 px-1 rounded-xs"
      >
        {error && <FailedApolloError apolloError={error} prefix={"Couldn't create item"} />}
        {formErrorMap.onDynamic?.[''] && <form.Errors errors={formErrorMap.onDynamic['']} />}
        <form
          onSubmit={e => {
            e.preventDefault()
            void form.handleSubmit() // <---- I hate the fact I have to even declare <form> here, it should be automatic from the <form.AppForm> below
            // but I'm tired writing all this crap, so I let it be :)
          }}
        >
          <form.AppForm>
            <div className="flex max-h-64 flex-col items-start gap-2 overflow-y-scroll [&_*:required]:bg-red-200 [&_label_span]:mr-1">
              <form.AppField name="name" children={field => <field.Input />} />
              <form.AppField name="length" children={field => <field.Input step={100} />} />
              <form.AppField
                name="type"
                children={field => (
                  <field.SelectInput
                    options={Object.values(ItemType)}
                    onChange={e => {
                      if (!isAItem(e.target.value as ItemType)) {
                        form.deleteField('bStuff')
                      } else {
                        form.resetField('bStuff')
                      }
                      // TODO: open a bug in tanstack form. Somehow works with requestAnimationFrame
                      //   delete,reset, delete -- get error inside tanstack form
                      /* inside validateSync
                      if (
                            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                            currentErrorMap?.[errorMapKey] !== newErrorValue
                          ) {
                            this.setFieldMeta(field, (prev) => ({
                              ...prev,
                              errorMap: {
                                ...prev.errorMap, ----> prev is undefined
                                [errorMapKey]: newErrorValue
                              },
                       */
                      requestAnimationFrame(() => form.validateSync('change'))
                    }}
                  />
                )}
              />
              {isBStuffItem(type) && <BStuffFieldGroup form={form} fields="bStuff" className="self-stretch" />}
            </div>
            <form.SubmitButton className="mt-2" />
          </form.AppForm>
        </form>
      </DialogContent>
    </Dialog>
  )
}

const BStuffFieldGroup = withFieldGroup(
  CreateItemSchema,
  'bStuff'
)({
  props: {
    className: undefined
  } as { className?: string },
  render: function Render({ group, className, errors }) {
    const [open, setOpen] = useState(true)
    return (
      <Accordion open={open} onOpenChange={isOpen => setOpen(isOpen)} className={className}>
        <fieldset name="bStuff" className={cx('transition-[padding]', !open && errors.length === 0 && 'border-transparent p-0')}>
          <legend>
            <AccordionTrigger>BStuff</AccordionTrigger>
          </legend>
          <AccordionContent className="flex flex-col items-start gap-2" forceMount>
            <group.AppField name="lastUpdatedDate" children={field => <field.Input grouped date />} />
            <group.AppField name="maxPercent" children={field => <field.Input grouped label="Maximum Percent" step={0.01} />} />
            <group.AppField name="minValue" children={field => <field.Input grouped label="Minimum Value" step={0.01} />} />
            <group.AppField name="growthLimit" children={field => <field.Input grouped step={100} />} />
          </AccordionContent>
          <group.Errors errors={errors} />
        </fieldset>
      </Accordion>
    )
  }
})

Improvements Made

• String/Number schema types that represent html form elements. The form elements only ever accept strings or numbers but their empty state is always an empty string. I made these types so that empty string decodes into a "missing" value.
  • I couldn't actually do that for Number, so I went with NaN for those and manually convert it in the <input value={typeof field.state.value === 'number' && Number.isNaN(field.state.value) ? '' : field.state.value} itself. Otherwise the Encoded will show up the field as string which is not true, so I'd rather separate these things for type safety.
• extra utility for building a schema to restrict its Decoded type. Since I'm making a form, I'm about to submit my change and I already have the type for the change (generated graphql mutation type in my case), so might as well get auto-complete for it when filling out the schema.
• useAppForm
  • accepts a schema
  • automatically generates defaultValues
  • pre-sets validationLogic and validators.onDynamic to the schema
  • replaces onSubmit with onSubmitWithTransition that gives you the Decoded and wraps your code in a startTransition. I always do this, so I though might as well wrap it. Idk how applicable the transition part is but the decoded is the main piece here.
• withFieldGroup
  • accepts a schema
  • accepts a keyof Encoded to get the nested object out of the schema - the group.
  • automatically generates defaultValues
  • provides StandardSchemaV1Issue[] in render for the errors related to the group object.
  • the group that is provided in render is actually typed now. I provided generics and returned as-is muting typescript errors. Your typing has a bunch of unknown there for some reason for AppFieldExtendedReactFieldGroupApi (but maybe I should be using AppFieldExtendedReactFormApi instead? anyway, it works, idk). I think without my wrapper the default withFieldGroup returns any for me when I try to access state. Tbh I forgot what the typing problem was but you can try it.

@/components/ui/form.tsx

import type {
  AnyFieldApi,
  AnyFormApi,
  AppFieldExtendedReactFieldGroupApi,
  AppFieldExtendedReactFormApi,
  DeepKeysOfType,
  FormApi,
  FormAsyncValidateOrFn,
  FormOptions,
  FormValidateOrFn,
  StandardSchemaV1,
  StandardSchemaV1Issue,
  WithFieldGroupProps
} from '@tanstack/react-form'
import { createFormHook, createFormHookContexts, revalidateLogic, useStore } from '@tanstack/react-form'
import * as React from 'react'
import { type ComponentType, type Context, type JSX, type PropsWithChildren, startTransition } from 'react'
import { titleCase } from 'text-case'
import { kebabCase } from 'text-kebab-case'
import { cx } from '@/utils/class-utils.ts'
import { ErrorP, Loading } from '@/src/routes/-fallback/message.tsx'
import Button from '@/components/ui/button.tsx'
import { type FilterIssue } from 'effect/Schema'
import { Schema as S } from 'effect'
import { defaultFormData } from '@/components/ui/form-schema.ts'
import { deepmerge as deepmergeInit } from '@fastify/deepmerge'

export const { fieldContext, formContext, useFieldContext, useFormContext } = createFormHookContexts()

// noinspection JSUnusedGlobalSymbols
export const { useAppForm, withFieldGroup } = createSchemaFormHook({
  fieldContext,
  formContext,
  fieldComponents: {
    Input,
    RadioInput,
    SelectInput
  },
  formComponents: {
    SubmitButton,
    Errors
  }
})

function RadioInput({
  data,
  children,
  ...props
}: React.ComponentProps<'input'> & {
  data: string | object
  children: React.ReactNode
}) {
  const field = useFieldContext<string | object>()
  const loading = useStore(field.form.store, state => state.isSubmitting)
  const selected = useStore(field.store, state => state.value === data)
  const text = (
    <span
      className={cx(
        'flex w-full cursor-pointer',
        {
          'pointer-events-none': selected || loading
        },
        {
          'opacity-70': !selected && loading
        }
      )}
    >
      {selected && <span className="mr-2">✔️</span>}
      {children}
    </span>
  )
  return (
    <label className="focus-visible:border-ring focus-visible:ring-ring/50 block w-full focus-visible:ring-[3px]" tabIndex={0}>
      <input
        tabIndex={-1}
        disabled={loading}
        name={kebabCase(field.name)}
        type="radio"
        className="absolute opacity-0"
        checked={selected}
        {...props}
        onChange={e => {
          field.handleChange(data)
          props.onChange?.(e)
        }}
      />
      {loading && selected ? <Loading className="inline">{text}</Loading> : text}
    </label>
  )
}

function SelectInput({
  label,
  options,
  grouped = false,
  ...props
}: Readonly<
  React.ComponentProps<'select'> & {
    label?: string
    /**
     * If used within a field group, tanstack adds the group name to the field.name as `${group}.${name}`.
     * Provide `true` so that the group prefix is removed in the label.
     */
    grouped?: boolean
    options: React.Key[]
  }
>) {
  const field = useFieldContext<string | number>()
  return (
    <>
      <label>
        <span>{label ?? genLabel(field.name, grouped)}</span>
        <select
          name={kebabCase(field.name)}
          value={field.state.value}
          {...props}
          onChange={e => {
            field.handleChange(e.target.value)
            props.onChange?.(e)
          }}
        >
          {options.map(option => (
            <option key={option}>{option}</option>
          ))}
        </select>
      </label>
      <Errors errors={field.state.meta.errors} />
    </>
  )
}

// TODO: make errors FilterIssue[] by default
function Errors({ errors }: { errors: any[] }) {
  return (errors as FilterIssue[]).map(e => (
    <ErrorP key={e.path.join('.')} className="min-h-8">
      {e.message}
    </ErrorP>
  ))
}

function Input({
  label,
  date = false,
  grouped = false,
  ...props
}: Readonly<
  React.ComponentProps<'input'> & {
    label?: string
    date?: boolean
    /**
     * If used within a field group, tanstack adds the group name to the field.name as `${group}.${name}`.
     * Provide `true` so that the group prefix is removed in the label.
     */
    grouped?: boolean
  }
>) {
  const field = useFieldContext<string | number>()
  const isNumber = typeof field.state.value === 'number'
  return (
    <>
      <label>
        <span>{label ?? genLabel(field.name, grouped)}</span>
        <input
          type={isNumber ? 'number' : date ? 'date' : 'text'}
          name={kebabCase(field.name)}
          value={typeof field.state.value === 'number' && Number.isNaN(field.state.value) ? '' : field.state.value}
          {...props}
          onChange={e => {
            field.handleChange(isNumber ? e.target.valueAsNumber : e.target.value)
            props.onChange?.(e)
          }}
        />
      </label>
      <Errors errors={field.state.meta.errors} />
    </>
  )
}

function genLabel(name: string, grouped: boolean) {
  return titleCase(grouped ? name.substring(name.indexOf('.') + 1) : name)
}

function SubmitButton(props: React.ComponentProps<typeof Button>) {
  const form = useFormContext()
  const isSubmitting = useStore(form.store, state => state.isSubmitting)
  const isValid = useStore(form.store, state => state.isValid)
  return (
    <Button type={'submit'} disabled={!isValid || isSubmitting} {...props}>
      {isSubmitting ? <Loading message="Submitting..." /> : 'Submit'}
    </Button>
  )
}

const deepmerge = deepmergeInit()

function createSchemaFormHook<
  const TComponents extends Record<string, ComponentType<any>>,
  const TFormComponents extends Record<string, ComponentType<any>>
>(props: {
  fieldComponents: TComponents
  fieldContext: Context<AnyFieldApi>
  formComponents: TFormComponents
  formContext: Context<AnyFormApi>
}) {
  const formHook = createFormHook(props)
  return {
    ...formHook,
    withFieldGroup: <Decoded, TFormData, K extends keyof TFormData & keyof Decoded>(schema: S.Schema<Decoded, TFormData>, group: K) => {
      const defaults = defaultFormData(schema.pipe(S.pick(group)))[group]
      type TFieldGroupData = typeof defaults
      type TOnDynamic = StandardSchemaV1<TFormData, Decoded> & S.Schema<Decoded, TFormData>
      return <
        TOnMount extends undefined | FormValidateOrFn<TFormData>,
        TOnChange extends undefined | FormValidateOrFn<TFormData>,
        TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnBlur extends undefined | FormValidateOrFn<TFormData>,
        TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
        TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
        TSubmitMeta,
        TRenderProps extends Record<string, unknown>
      >(
        props: Omit<
          WithFieldGroupProps<TFieldGroupData, TComponents, TFormComponents, TSubmitMeta, TRenderProps>,
          'render' | 'defaultValues'
        > & {
          defaultValuesOverrides?: Partial<TFormData>
          render: (
            props: PropsWithChildren<
              NoInfer<TRenderProps> & {
                group: AppFieldExtendedReactFieldGroupApi<
                  TFormData,
                  TFieldGroupData,
                  DeepKeysOfType<TFormData, TFieldGroupData | null | undefined>,
                  TOnMount,
                  TOnChange,
                  TOnChangeAsync,
                  TOnBlur,
                  TOnBlurAsync,
                  TOnSubmit,
                  TOnSubmitAsync,
                  TOnDynamic,
                  TOnDynamicAsync,
                  TOnServer,
                  TSubmitMeta,
                  TComponents,
                  TFormComponents
                >
              } & {
                errors: StandardSchemaV1Issue[]
              }
            >
          ) => JSX.Element
        }
      ) =>
        formHook.withFieldGroup({
          defaultValues:
            props.defaultValuesOverrides === undefined ? defaults : (deepmerge(defaults, props.defaultValuesOverrides) as typeof defaults),
          ...props,
          render: function Render(renderProps) {
            const errors = useStore(
              renderProps.group.form.store,
              // eslint-disable-next-line
              state => state.errorMap.onDynamic?.[group] ?? ([] as StandardSchemaV1Issue[])
            )
            // @ts-expect-error downcasting to actual
            return props.render({ ...renderProps, errors })
          }
        })
    },
    // prettier-ignore
    useAppForm: <Decoded, TFormData>(schema: S.Schema<Decoded, TFormData>) => {
      type TOnDynamic = StandardSchemaV1<TFormData, Decoded> & S.Schema<Decoded, TFormData>
      return <
        TOnMount extends undefined | FormValidateOrFn<TFormData>,
        TOnChange extends undefined | FormValidateOrFn<TFormData>,
        TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnBlur extends undefined | FormValidateOrFn<TFormData>,
        TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnSubmit extends undefined | FormValidateOrFn<TFormData>,
        TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>,
        TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>,
        TSubmitMeta
      >(
        props: Omit<
          FormOptions<
            TFormData,
            TOnMount,
            TOnChange,
            TOnChangeAsync,
            TOnBlur,
            TOnBlurAsync,
            TOnSubmit,
            TOnSubmitAsync,
            TOnDynamic,
            TOnDynamicAsync,
            TOnServer,
            TSubmitMeta
          >,
          'defaultValues' | 'validationLogic' | 'validators' | 'onSubmit'
        > & {
          defaultValuesOverrides?: Partial<TFormData>
          onSubmitWithTransition: (props: {
            decoded: Decoded
            formApi: FormApi<
              TFormData,
              TOnMount,
              TOnChange,
              TOnChangeAsync,
              TOnBlur,
              TOnBlurAsync,
              TOnSubmit,
              TOnSubmitAsync,
              TOnDynamic,
              TOnDynamicAsync,
              TOnServer,
              TSubmitMeta
            >
            meta: TSubmitMeta
          }) => Promise<void>
        }
      ): AppFieldExtendedReactFormApi<
        TFormData,
        TOnMount,
        TOnChange,
        TOnChangeAsync,
        TOnBlur,
        TOnBlurAsync,
        TOnSubmit,
        TOnSubmitAsync,
        TOnDynamic,
        TOnDynamicAsync,
        TOnServer,
        TSubmitMeta,
        TComponents,
        TFormComponents
      > => {
        const defaults = defaultFormData(schema)
        return formHook.useAppForm({
          defaultValues:
            props.defaultValuesOverrides === undefined ? defaults : (deepmerge(defaults, props.defaultValuesOverrides) as TFormData),
          validationLogic: revalidateLogic(),
          validators: {
            onDynamic: S.standardSchemaV1(schema)
          },
          onSubmit: ({ value, formApi, meta }) => {
            const decoded = S.decodeSync(schema)(value, { errors: 'all', onExcessProperty: 'error' })
            startTransition(() => props.onSubmitWithTransition({ decoded, formApi, meta }))
          },
          ...props
        })
      }
    }
  }
}

'@/components/ui/form-schema.ts'

import { Option, Schema as S, SchemaAST } from 'effect'

import { Struct } from 'effect/Schema'

export const StringFormField = S.String.pipe(S.filter(s => s !== '' || 'must be filled out'))
export const StringFormFieldNonEmpty = StringFormField.pipe(S.minLength(3))

export const StringFormFieldOptional = {
  ...stringFormFieldOptional(),
  filter: (filter: (s: typeof S.String) => S.filter<typeof S.String>) => stringFormFieldOptional(filter)
}

export const StringFormFieldOptionalNonEmpty = StringFormFieldOptional.filter(S.minLength(3))

function stringFormFieldOptional(filter?: (s: typeof S.String) => S.filter<typeof S.String>) {
  return S.requiredToOptional(S.String, filter ? S.String.pipe(filter) : S.String, {
    decode: input => (input === '' ? Option.none() : Option.some(input)),
    encode: output => (Option.isNone(output) ? '' : output.value)
  })
}

export const NumberFormField = S.Number.pipe(S.filter(s => !Number.isNaN(s) || 'must be filled out'))
export const NumberFormFieldNonNegative = NumberFormField.pipe(S.nonNegative())

export const NumberFormFieldOptional = {
  ...numberFormFieldOptional(),
  filter: (filter: (s: typeof S.Number) => S.filter<typeof S.Number>) => numberFormFieldOptional(filter)
}

export const NumberFormFieldOptionalNonNegative = NumberFormFieldOptional.filter(S.nonNegative())

function numberFormFieldOptional(filter?: (s: typeof S.Number) => S.filter<typeof S.Number>) {
  return S.requiredToOptional(S.Number, filter ? S.Number.pipe(filter) : S.Number, {
    decode: input => (Number.isNaN(input) ? Option.none() : Option.some(input)),
    encode: output => (Option.isNone(output) ? Number.NaN : output.value)
  })
}

// TODO: check up on https://github.com/dotansimha/graphql-code-generator/issues/10398
export function schemaFor<A extends Record<string, any>>() {
  return <F extends Record<keyof A, Struct.Field>>(fields: F) => {
    // context is wrongly typed to something when it's actually `never`,
    //   so we have to re-cast the type to itself but without the context.
    return S.Struct(fields) as unknown as S.Schema<S.Simplify<Struct.Type<F>>, S.Simplify<Struct.Encoded<F>>>
  }
}

export function anyRequired<A extends Record<string, any>, I>(...fields: readonly (keyof A)[]) {
  return S.filter<S.Schema<A, I>>(v => {
    if (fields.length === 0) {
      return Object.values(v).some(v => v != null) || 'at least one field is required'
    }
    return fields.some(field => v[field] != null) || `${fields.join(' or ')} is required`
  })
}

/**
 * Generates default form data based on a schema.
 *
 * Warning: this code is AI generated
 *
 * This function takes a schema and recursively parses its AST (Abstract Syntax Tree)
 * to generate default values for each field based on its type:
 * - String fields: empty string ('')
 * - Number fields: NaN
 * - Boolean fields: false
 * - Objects: recursively processed with default values for each property
 * - Arrays/Tuples: array with default values for each element
 * - Optional fields: included with their default values
 *
 * The implementation is similar to how FastCheck generates random values,
 * but instead of random values, it uses empty strings and NaN.
 *
 * @param schema - The schema to generate default form data for
 * @returns Default form data object with the structure defined by the schema
 */
export function defaultFormData<A, I>(schema: S.Schema<A, I>): I {
  const ast = schema.ast

  /**
   * Recursively processes an AST node to generate default values
   * @param ast - The AST node to process
   * @returns Default value for the AST node
   */
  function processAst(ast: SchemaAST.AST): unknown {
    switch (ast._tag) {
      // String types
      case 'StringKeyword': {
        return ''
      }

      // Number types
      case 'NumberKeyword': {
        return Number.NaN
      }

      // Boolean types
      case 'BooleanKeyword': {
        return false
      }

      // Literal values (strings, numbers, booleans)
      case 'Literal': {
        if (typeof ast.literal === 'number') {
          return Number.NaN
        } else if (typeof ast.literal === 'boolean') {
          return false
        } else {
          return ''
        }
      }

      // Object types
      case 'TypeLiteral': {
        const result: Record<PropertyKey, unknown> = {}
        // Process each property in the object
        for (const prop of ast.propertySignatures) {
          result[prop.name] = processAst(prop.type)
        }
        return result
      }

      // Union types (e.g., string | number)
      case 'Union': {
        // For union types, we use the first type as the default
        if (ast.types.length > 0) {
          return processAst(ast.types[0])
        }
        return ''
      }

      // Refinement types (e.g., string with validation)
      case 'Refinement': {
        // Process the underlying type
        return processAst(ast.from)
      }

      // Transformation types (e.g., string to Date)
      case 'Transformation': {
        // Process the target type
        return processAst(ast.to)
      }

      // Array/Tuple types
      case 'TupleType': {
        // Create an array with default values for each element
        return ast.elements.map(element => processAst(element.type))
      }

      // Declaration types (custom types)
      case 'Declaration': {
        // For declarations, return an empty object as a safe default
        return {}
      }

      // Any and Unknown types
      case 'AnyKeyword':
      case 'UnknownKeyword': {
        return ''
      }

      // Void and Undefined types
      case 'VoidKeyword':
      case 'UndefinedKeyword': {
        return undefined
      }

      // Never type
      case 'NeverKeyword': {
        return null
      }

      // BigInt type
      case 'BigIntKeyword': {
        return BigInt(0)
      }

      // Symbol type
      case 'SymbolKeyword': {
        return Symbol('')
      }

      // Object type
      case 'ObjectKeyword': {
        return {}
      }

      // Enum types
      case 'Enums': {
        if (ast.enums.length > 0) {
          // Destructure only the value (second element) from the tuple
          const [, value] = ast.enums[0]
          return typeof value === 'number' ? Number.NaN : ''
        }
        return ''
      }

      // Template literal types (e.g., `prefix-${string}`)
      case 'TemplateLiteral': {
        return ''
      }

      // Unique symbol types
      case 'UniqueSymbol': {
        return ast.symbol
      }

      // Default case for any unhandled types
      default: {
        return ''
      }
    }
  }

  // Process the root AST node and cast the result to the expected type
  return processAst(ast) as I
}

I really hope y'all at least get some inspiration from it and remove the boilerplate in any way you see fit. Please also pay attention to the comments, there's some extra feedback.