@jcoreio/zod-forms 1.0.0

package/src/createSelectFormValues.ts

@@ -0,0 +1,16 @@
+import z from 'zod'
+import { createStructuredSelector } from 'reselect'
+import { FormState } from './FormState'
+
+export type SelectFormValues<T extends z.ZodTypeAny> = ReturnType<
+  typeof createSelectFormValues<T>
+>
+
+export function createSelectFormValues<T extends z.ZodTypeAny>() {
+  return createStructuredSelector({
+    values: (state: FormState<T>) => state.values,
+    rawValues: (state: FormState<T>) => state.rawValues,
+    initialValues: (state: FormState<T>) => state.initialValues,
+    rawInitialValues: (state: FormState<T>) => state.rawInitialValues,
+  })
+}

package/src/createZodForm.ts

@@ -0,0 +1,57 @@
+import z from 'zod'
+import { invert } from 'zod-invertible'
+import { FieldPath } from './FieldPath'
+import { createFormProvider } from './createFormProvider'
+import { useField, TypedUseField } from './useField'
+import { useHtmlField, TypedUseHtmlField } from './useHtmlField'
+import { useFormContext } from './useFormContext'
+import { useFormStatus } from './useFormStatus'
+import { useFormValues } from './useFormValues'
+import { useSubmit } from './useSubmit'
+import { useInitialize } from './useInitialize'
+import { createSelectFormStatus } from './createSelectFormStatus'
+import { createSelectFieldErrorMap } from './createSelectFieldErrorMap'
+import { createSelectFormValues } from './createSelectFormValues'
+import { TypedUseArrayField, useArrayField } from './useArrayField'
+
+export type ZodForm<T extends z.ZodTypeAny> = ReturnType<
+  typeof createZodForm<T>
+>
+
+export function createZodForm<T extends z.ZodTypeAny>({
+  schema,
+}: {
+  schema: T
+}) {
+  const root = FieldPath.root(schema)
+  const inverseSchema = invert(schema)
+
+  const selectFormStatus = createSelectFormStatus()
+  const selectFieldErrorMap = createSelectFieldErrorMap()
+  const selectFormValues = createSelectFormValues<T>()
+
+  const FormProvider = createFormProvider({
+    root,
+    schema,
+    inverseSchema,
+    selectFormStatus,
+    selectFieldErrorMap,
+    selectFormValues,
+  })
+
+  const get: (typeof root)['get'] = root.get.bind(root)
+
+  return {
+    root,
+    get,
+    FormProvider,
+    useFormContext: useFormContext<T>,
+    useFormStatus,
+    useFormValues: useFormValues<T>,
+    useInitialize: useInitialize<T>,
+    useSubmit: useSubmit<T>,
+    useArrayField: useArrayField as TypedUseArrayField<T>,
+    useField: useField as TypedUseField<T>,
+    useHtmlField: useHtmlField as TypedUseHtmlField<T>,
+  }
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+export { createZodForm, type ZodForm } from './createZodForm'
+export {
+  type FieldMeta,
+  type SubmitHandler,
+  type SubmitSuccededHandler,
+  type SubmitFailedHandler,
+} from './FormState'
+export {
+  FieldPath,
+  type FieldPathForValue,
+  type FieldPathForRawValue,
+} from './FieldPath'
+export { useField, type UseFieldProps, type TypedUseField } from './useField'
+export {
+  useArrayField,
+  type UseArrayFieldProps,
+  type TypedUseArrayField,
+} from './useArrayField'
+export { type FormContextProps } from './FormContext'
+export { useFormContext } from './useFormContext'
+export { type FormStatus } from './createSelectFormStatus'
+export { useFormStatus } from './useFormStatus'
+export { useFormValues } from './useFormValues'
+export {
+  useHtmlField,
+  type TypedUseHtmlField,
+  type UseHtmlFieldProps,
+  type HtmlFieldInputProps,
+  type ValidUseHtmlFieldProps,
+} from './useHtmlField'
+export { useInitialize } from './useInitialize'
+export { useSubmit } from './useSubmit'

package/src/initFormState.ts

@@ -0,0 +1,18 @@
+import z from 'zod'
+import { FormState } from './FormState'
+
+export function initFormState<T extends z.ZodTypeAny>(): FormState<T> {
+  return {
+    mounted: true,
+    initialized: false,
+    fieldMeta: {},
+    rawInitialValues: undefined,
+    initialValues: undefined,
+    submitting: false,
+    submitFailed: false,
+    submitSucceeded: false,
+    onSubmit: new Set(),
+    onSubmitSucceeded: new Set(),
+    onSubmitFailed: new Set(),
+  }
+}

package/src/reducers/addHandlers.ts

@@ -0,0 +1,21 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { AddHandlersAction } from '../actions/addHandlers'
+import { setAdd } from '../util/setAdd'
+
+export function addHandlersReducer<T extends z.ZodTypeAny>(
+  state: FormState<T>,
+  action: AddHandlersAction<T>
+) {
+  const { onSubmit, onSubmitSucceeded, onSubmitFailed } = action
+  return {
+    ...state,
+    ...(onSubmit && { onSubmit: setAdd(state.onSubmit, onSubmit) }),
+    ...(onSubmitSucceeded && {
+      onSubmitSucceeded: setAdd(state.onSubmitSucceeded, onSubmitSucceeded),
+    }),
+    ...(onSubmitFailed && {
+      onSubmitFailed: setAdd(state.onSubmitFailed, onSubmitFailed),
+    }),
+  }
+}

package/src/reducers/arrayInsert.ts

@@ -0,0 +1,19 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { arrayInsertRaw, ArrayInsertAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+
+export function arrayInsertReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayInsertAction
+) {
+  const { field, index, value } = action
+  const inverseSchema = getInverseArrayElementSchema(field.schema)
+  return reducer(
+    state,
+    arrayInsertRaw(field, index, inverseSchema.parse(value))
+  )
+}

package/src/reducers/arrayInsertRaw.ts

@@ -0,0 +1,22 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayInsertRawAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayInsertRawReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayInsertRawAction
+) {
+  const { field, index, rawValue } = action
+  return updateRawArray(reducer, state, field, (array) =>
+    insert(array ?? [], index, rawValue)
+  )
+}
+
+function insert<T>(array: T[], index: number, value: T) {
+  if (index < 0 || index > array.length) throw new Error(`index out of range`)
+  return [...array.slice(0, index), value, ...array.slice(index)]
+}

package/src/reducers/arrayMove.ts

@@ -0,0 +1,36 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayMoveAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayMoveReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayMoveAction
+) {
+  const { field, from, to } = action
+  if (from === to) return state
+  return updateRawArray(reducer, state, field, (array) =>
+    array ? move(array, from, to) : array
+  )
+}
+
+export function move<T>(array: T[], from: number, to: number): T[] {
+  if (from < 0 || from >= array.length) throw new Error(`from out of range`)
+  if (to < 0 || to >= array.length) throw new Error(`to out of range`)
+  return from < to
+    ? [
+        ...array.slice(0, from),
+        ...array.slice(from + 1, to),
+        array[from],
+        ...array.slice(to + 1),
+      ]
+    : [
+        ...array.slice(0, to),
+        array[from],
+        ...array.slice(to + 1, from),
+        ...array.slice(from + 1),
+      ]
+}

package/src/reducers/arrayPop.ts

@@ -0,0 +1,16 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayPopAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayPopReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayPopAction
+) {
+  return updateRawArray(reducer, state, action.field, (array) =>
+    array?.slice(0, array.length - 1)
+  )
+}

package/src/reducers/arrayPush.ts

@@ -0,0 +1,20 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayPushAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { setValue } from '../actions/setValue'
+import { get } from '../util/get'
+
+export function arrayPushReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayPushAction
+) {
+  const { field, value } = action
+  const array = get(state.rawValues, field.path)
+  return reducer(
+    state,
+    setValue(field.get([Array.isArray(array) ? array.length : 0]), value)
+  )
+}

package/src/reducers/arrayPushRaw.ts

@@ -0,0 +1,18 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayPushRawAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayPushRawReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayPushRawAction
+) {
+  const { field, rawValue } = action
+  return updateRawArray(reducer, state, field, (array) => [
+    ...(array ?? []),
+    rawValue,
+  ])
+}

package/src/reducers/arrayRemove.ts

@@ -0,0 +1,22 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayRemoveAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayRemoveReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayRemoveAction
+) {
+  const { field, index } = action
+  return updateRawArray(reducer, state, field, (array) =>
+    array ? remove(array, index) : array
+  )
+}
+
+function remove<T>(array: T[], index: number): T[] {
+  if (index < 0 || index >= array.length) return array
+  return [...array.slice(0, index), ...array.slice(index + 1)]
+}

package/src/reducers/arrayRemoveAll.ts

@@ -0,0 +1,15 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayRemoveAllAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayRemoveAllReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayRemoveAllAction
+) {
+  const { field } = action
+  return updateRawArray(reducer, state, field, (array) => (array ? [] : array))
+}

package/src/reducers/arrayShift.ts

@@ -0,0 +1,15 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayShiftAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayShiftReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayShiftAction
+) {
+  const { field } = action
+  return updateRawArray(reducer, state, field, (array) => array?.slice(1))
+}

package/src/reducers/arraySplice.ts

@@ -0,0 +1,17 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArraySpliceAction, arraySpliceRaw } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+
+export function arraySpliceReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArraySpliceAction
+) {
+  const { field, index, deleteCount, values } = action
+  const inverseSchema = getInverseArrayElementSchema(field.schema)
+  const rawValues = values.map((v) => inverseSchema.parse(v))
+  return reducer(state, arraySpliceRaw(field, index, deleteCount, rawValues))
+}

package/src/reducers/arraySpliceRaw.ts

@@ -0,0 +1,30 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArraySpliceRawAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arraySpliceRawReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArraySpliceRawAction
+) {
+  const { field, index, deleteCount, rawValues } = action
+  return updateRawArray(reducer, state, field, (array) =>
+    splice(array ?? [], index, deleteCount, rawValues)
+  )
+}
+
+function splice<T>(
+  array: T[],
+  index: number,
+  deleteCount: number,
+  values: T[]
+) {
+  if (index < 0 || index > array.length) throw new Error(`index out of range`)
+  if (!deleteCount && !values.length) return array
+  const result = [...array]
+  result.splice(index, deleteCount, ...values)
+  return result
+}

package/src/reducers/arraySwap.ts

@@ -0,0 +1,29 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArraySwapAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arraySwapReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArraySwapAction
+) {
+  const { field, indexA, indexB } = action
+  return updateRawArray(reducer, state, field, (array) =>
+    array ? swap(array, indexA, indexB) : array
+  )
+}
+
+export function swap<T>(array: T[], indexA: number, indexB: number) {
+  if (indexA < 0 || indexA >= array.length)
+    throw new Error(`indexA out of range`)
+  if (indexB < 0 || indexB >= array.length)
+    throw new Error(`indexB out of range`)
+
+  const result = [...array]
+  result[indexA] = array[indexB]
+  result[indexB] = array[indexA]
+  return result
+}

package/src/reducers/arrayUnshift.ts

@@ -0,0 +1,16 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayUnshiftAction, arrayUnshiftRaw } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { getInverseArrayElementSchema } from './util/getInverseArrayElementSchema'
+
+export function arrayUnshiftReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayUnshiftAction
+) {
+  const { field, value } = action
+  const inverseSchema = getInverseArrayElementSchema(field.schema)
+  return reducer(state, arrayUnshiftRaw(field, inverseSchema.parse(value)))
+}

package/src/reducers/arrayUnshiftRaw.ts

@@ -0,0 +1,18 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { ArrayUnshiftRawAction } from '../actions/arrayActions'
+import { Reducer } from 'redux'
+import { FormAction } from '../FormAction'
+import { updateRawArray } from './util/updateRawArray'
+
+export function arrayUnshiftRawReducer<T extends z.ZodTypeAny>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  action: ArrayUnshiftRawAction
+) {
+  const { field, rawValue } = action
+  return updateRawArray(reducer, state, field, (array) => [
+    rawValue,
+    ...(array ?? []),
+  ])
+}

package/src/reducers/initialize.ts

@@ -0,0 +1,47 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { InitializeAction } from '../actions/initialize'
+
+export const createInitializeReducer = <T extends z.ZodTypeAny>({
+  schema,
+  inverseSchema,
+}: {
+  schema: T
+  inverseSchema: z.ZodType<z.input<T>, any, z.output<T>>
+}) =>
+  function initializeReducer(state: FormState<T>, action: InitializeAction<T>) {
+    const { keepSubmitSucceeded } = action
+    try {
+      const rawValues =
+        action.rawValues ??
+        (action.values ? inverseSchema.parse(action.values) : undefined)
+      const values =
+        action.values ??
+        (action.rawValues ? schema.parse(action.rawValues) : undefined)
+      return {
+        ...state,
+        validationError: undefined,
+        initialized: true,
+        submitting: false,
+        submitFailed: false,
+        submitSucceeded: keepSubmitSucceeded ? state.submitSucceeded : false,
+        rawValues,
+        values,
+        rawInitialValues: rawValues,
+        initialValues: values,
+      }
+    } catch (error) {
+      return {
+        ...state,
+        validationError: error,
+        initialized: true,
+        submitting: false,
+        submitFailed: false,
+        submitSucceeded: keepSubmitSucceeded ? state.submitSucceeded : false,
+        rawValues: action.rawValues,
+        values: action.values,
+        rawInitialValues: action.rawValues,
+        initialValues: action.values,
+      }
+    }
+  }

package/src/reducers/removeHandlers.ts

@@ -0,0 +1,21 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { RemoveHandlersAction } from '../actions/removeHandlers'
+import { setDelete } from '../util/setDelete'
+
+export function removeHandlersReducer<T extends z.ZodTypeAny>(
+  state: FormState<T>,
+  action: RemoveHandlersAction<T>
+) {
+  const { onSubmit, onSubmitSucceeded, onSubmitFailed } = action
+  return {
+    ...state,
+    ...(onSubmit && { onSubmit: setDelete(state.onSubmit, onSubmit) }),
+    ...(onSubmitSucceeded && {
+      onSubmitSucceeded: setDelete(state.onSubmitSucceeded, onSubmitSucceeded),
+    }),
+    ...(onSubmitFailed && {
+      onSubmitFailed: setDelete(state.onSubmitFailed, onSubmitFailed),
+    }),
+  }
+}

package/src/reducers/setMeta.ts

@@ -0,0 +1,26 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { SetMetaAction } from '../actions/setMeta'
+import { FieldPath } from '../FieldPath'
+
+export function setMetaReducer<T extends z.ZodTypeAny>(
+  state: FormState<T>,
+  action: SetMetaAction<FieldPath>
+) {
+  const { field, meta } = action
+  const oldMeta = state.fieldMeta[field.pathstring]
+  if (
+    Object.entries(meta).every(([key, value]) =>
+      Object.is(value, (oldMeta as any)?.[key])
+    )
+  ) {
+    return state
+  }
+  return {
+    ...state,
+    fieldMeta: {
+      ...state.fieldMeta,
+      [field.pathstring]: { ...oldMeta, ...meta },
+    },
+  }
+}

package/src/reducers/setRawValue.ts

@@ -0,0 +1,40 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { SetRawValueAction } from '../actions/setRawValue'
+import { set } from '../util/set'
+import { FieldPath } from '../FieldPath'
+
+export const createSetRawValueReducer = <T extends z.ZodTypeAny>({
+  schema,
+}: {
+  schema: T
+}) =>
+  function setRawValueReducer<Field extends FieldPath>(
+    state: FormState<T>,
+    action: SetRawValueAction<Field>
+  ) {
+    const newRawValues = set(
+      state.rawValues,
+      action.field.path,
+      action.rawValue
+    )
+    if (newRawValues === state.rawValues) return state
+    try {
+      const newValues = schema.parse(newRawValues)
+      return {
+        ...state,
+        submitError: undefined,
+        validationError: undefined,
+        rawValues: newRawValues,
+        values: newValues,
+      }
+    } catch (error) {
+      return {
+        ...state,
+        submitError: undefined,
+        validationError: error,
+        rawValues: newRawValues,
+        values: undefined,
+      }
+    }
+  }

package/src/reducers/setSubmitStatus.ts

@@ -0,0 +1,15 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { SetSubmitStatusAction } from '../actions/setSubmitStatus'
+
+export function setSubmitStatusReducer<T extends z.ZodTypeAny>(
+  state: FormState<T>,
+  action: SetSubmitStatusAction<T>
+) {
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    type,
+    ...status
+  } = action
+  return { ...state, ...status }
+}

package/src/reducers/setValue.ts

@@ -0,0 +1,49 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+import { SetValueAction } from '../actions/setValue'
+import { set } from '../util/set'
+import { FieldPath } from '../FieldPath'
+import { invert } from 'zod-invertible'
+
+export const createSetValueReducer = <T extends z.ZodTypeAny>({
+  schema,
+  inverseSchema,
+}: {
+  schema: T
+  inverseSchema: z.ZodType<z.input<T>, any, z.output<T>>
+}) =>
+  function setValueReducer<Field extends FieldPath>(
+    state: FormState<T>,
+    action: SetValueAction<Field>
+  ) {
+    const newValues = set(state.values, action.field.path, action.value)
+    try {
+      const newRawValues = inverseSchema.parse(newValues)
+      schema.parse(newRawValues)
+      return {
+        ...state,
+        submitError: undefined,
+        validationError: undefined,
+        rawValues: newRawValues,
+        values: newValues,
+      }
+    } catch (error) {
+      const newRawParsed = invert(action.field.schema).safeParse(action.value)
+      const rawValues = newRawParsed.success
+        ? set(state.rawValues, action.field.path, newRawParsed.data)
+        : state.rawValues
+      const newParsed = schema.safeParse(rawValues)
+      const result = {
+        ...state,
+        submitError: undefined,
+        validationError: !newRawParsed.success
+          ? newRawParsed.error
+          : newParsed.success
+          ? undefined
+          : newParsed.error,
+        rawValues,
+        values: newParsed.success ? newParsed.data : state.values,
+      }
+      return result
+    }
+  }