@jcoreio/zod-forms 1.0.0

package/src/reducers/submitSucceeded.ts

@@ -0,0 +1,17 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+
+export function submitSucceededReducer<T extends z.ZodTypeAny>(
+  state: FormState<T>
+) {
+  return {
+    ...state,
+    submitting: false,
+    submitSucceeded: true,
+    submitFailed: false,
+    submitError: undefined,
+    submitPromise: undefined,
+    initialValues: state.submittedValues,
+    rawInitialValues: state.rawSubmittedValues,
+  }
+}

package/src/reducers/util/getInverseArrayElementSchema.ts

@@ -0,0 +1,9 @@
+import z from 'zod'
+import { getArrayElementSchema } from '../../util/getArrayElementSchema'
+import { invert } from 'zod-invertible'
+
+export function getInverseArrayElementSchema(schema: z.ZodTypeAny) {
+  const elemSchema = getArrayElementSchema(schema)
+  if (!elemSchema) throw new Error('field is not an array')
+  return invert(elemSchema)
+}

package/src/reducers/util/updateRawArray.ts

@@ -0,0 +1,25 @@
+import z from 'zod'
+import { Reducer } from 'react'
+import { FieldPath, FieldPathForRawValue } from '../../FieldPath'
+import { FormState } from '../../FormState'
+import { FormAction } from '../../FormAction'
+import { get } from '../../util/get'
+import { setRawValue } from '../../actions/setRawValue'
+
+export function updateRawArray<
+  T extends z.ZodTypeAny,
+  Field extends FieldPathForRawValue<any[]>
+>(
+  reducer: Reducer<FormState<T>, FormAction<T>>,
+  state: FormState<T>,
+  field: FieldPath,
+  updater: (
+    array: z.input<Field['schema']> | undefined
+  ) => z.input<Field['schema']> | undefined
+) {
+  const oldValue = get(state.rawValues, field.path)
+  const newValue = updater(oldValue as any)
+  return newValue === oldValue
+    ? state
+    : reducer(state, setRawValue(field, newValue))
+}

package/src/useArrayField.ts

@@ -0,0 +1,161 @@
+import z from 'zod'
+import { BasePath, FieldPath, FieldPathForRawValue } from './FieldPath'
+import React from 'react'
+import { useFormContext } from './useFormContext'
+import { PathInSchema, PathstringInSchema } from './util/PathInSchema'
+import { parsePathstring } from './util/parsePathstring'
+import { SchemaAt } from './util/SchemaAt'
+import { bindActionsToField } from './util/bindActionsToField'
+import { arrayActions } from './actions/arrayActions'
+import { createSelector, createStructuredSelector } from 'reselect'
+import { get } from './util/get'
+import isEqual from 'fast-deep-equal'
+import {
+  TypedUseFormSelector,
+  useFormSelector as untypedUseFormSelector,
+} from './useFormSelector'
+import { shallowEqual } from 'react-redux'
+import { setValue } from './actions/setValue'
+import { setRawValue } from './actions/setRawValue'
+import { setMeta } from './actions/setMeta'
+import { FieldMeta } from './FormState'
+
+export type UseArrayFieldProps<Field extends FieldPath> = NonNullable<
+  z.input<Field['schema']>
+> extends any[]
+  ? FieldMeta &
+      ReturnType<
+        typeof bindActionsToField<
+          typeof arrayActions & {
+            setValue: typeof setValue
+            setRawValue: typeof setRawValue
+            setMeta: typeof setMeta
+          }
+        >
+      > & {
+        elements: FieldPath<SchemaAt<Field['schema'], [number]>>[]
+        error?: string
+        dirty: boolean
+        pristine: boolean
+        valid: boolean
+        invalid: boolean
+      }
+  : { ERROR: 'not an array field' }
+
+export interface TypedUseArrayField<T extends z.ZodTypeAny> {
+  <Field extends FieldPathForRawValue<any[] | null | undefined>>(
+    field: Field
+  ): UseArrayFieldProps<Field>
+  <Path extends PathInSchema<T>>(path: Path): UseArrayFieldProps<
+    FieldPath<SchemaAt<T, Path>>
+  >
+  <Pathstring extends PathstringInSchema<T>>(
+    path: Pathstring
+  ): UseArrayFieldProps<FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>>
+}
+
+function useArrayFieldBase<Field extends FieldPath>(
+  field: Field
+): UseArrayFieldProps<Field> {
+  type Schema = Field['schema']
+
+  const {
+    arrayActions,
+    setValue,
+    setRawValue,
+    setMeta,
+    selectFormValues,
+    selectFieldErrorMap,
+  } = useFormContext()
+
+  const useFormSelector = untypedUseFormSelector as TypedUseFormSelector<Schema>
+
+  const valuesSelector = React.useMemo(
+    () =>
+      createSelector(
+        [selectFormValues],
+        createSelector(
+          [
+            createStructuredSelector({
+              value: ({ values }) =>
+                get(values, field.path) as z.output<Schema> | undefined,
+              rawValue: ({ rawValues }) =>
+                get(rawValues, field.path) as unknown,
+              initialValue: ({ initialValues }) =>
+                get(initialValues, field.path) as z.output<Schema> | undefined,
+            }),
+          ],
+          ({ rawValue, value, initialValue }) => {
+            const dirty = !isEqual(value, initialValue)
+            const pristine = !dirty
+            return {
+              dirty,
+              pristine,
+              length: Array.isArray(rawValue) ? rawValue.length : 0,
+            }
+          }
+        )
+      ),
+    [field.pathstring]
+  )
+
+  const { dirty, pristine, length } = useFormSelector(
+    valuesSelector,
+    shallowEqual
+  )
+
+  const error = useFormSelector(
+    (state) => selectFieldErrorMap(state)[field.pathstring]
+  )
+  const meta = useFormSelector((state) => state.fieldMeta[field.pathstring])
+  const submitFailed = useFormSelector((state) => state.submitFailed)
+
+  const boundActions = React.useMemo(
+    () =>
+      bindActionsToField(
+        { ...arrayActions, setValue, setRawValue, setMeta },
+        field
+      ),
+    [field.pathstring]
+  )
+  const elements = React.useMemo(
+    () => [...new Array(length).keys()].map((index) => field.subfield(index)),
+    [length]
+  )
+
+  return React.useMemo(
+    () => ({
+      ...boundActions,
+      visited: meta?.visited || false,
+      touched: meta?.touched || submitFailed,
+      elements,
+      dirty,
+      pristine,
+      valid: !error,
+      invalid: Boolean(error),
+    }),
+    [dirty, boundActions, elements, meta, submitFailed, error]
+  ) as any
+}
+
+export function useArrayField<Field extends FieldPath>(
+  field: Field
+): UseArrayFieldProps<Field>
+export function useArrayField<
+  T extends z.ZodTypeAny,
+  Path extends PathInSchema<T>
+>(field: Path): UseArrayFieldProps<FieldPath<SchemaAt<T, Path>>>
+export function useArrayField<
+  T extends z.ZodTypeAny,
+  Pathstring extends PathstringInSchema<T>
+>(
+  field: Pathstring
+): UseArrayFieldProps<FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>>
+export function useArrayField<T extends z.ZodTypeAny>(
+  field: FieldPath | BasePath | string
+): UseArrayFieldProps<any> {
+  const { root } = useFormContext<T>()
+  return useArrayFieldBase(
+    field instanceof FieldPath ? field : root.get(field as any)
+  )
+}

package/src/useField.ts

@@ -0,0 +1,152 @@
+import z from 'zod'
+import { BasePath, FieldPath } from './FieldPath'
+import { FieldMeta } from './FormState'
+import { get } from './util/get'
+import React from 'react'
+import { setValue } from './actions/setValue'
+import { setRawValue } from './actions/setRawValue'
+import { setMeta } from './actions/setMeta'
+import {
+  useFormSelector as untypedUseFormSelector,
+  TypedUseFormSelector,
+} from './useFormSelector'
+import { useFormContext } from './useFormContext'
+import { createSelector, createStructuredSelector } from 'reselect'
+import { shallowEqual } from 'react-redux'
+import isEqual from 'fast-deep-equal'
+import { PathInSchema, PathstringInSchema } from './util/PathInSchema'
+import { parsePathstring } from './util/parsePathstring'
+import { SchemaAt } from './util/SchemaAt'
+import { maybeParse } from './util/maybeParse'
+import { bindActionsToField } from './util/bindActionsToField'
+
+export type UseFieldProps<Field extends FieldPath> = FieldMeta &
+  ReturnType<
+    typeof bindActionsToField<{
+      setValue: typeof setValue
+      setRawValue: typeof setRawValue
+      setMeta: typeof setMeta
+    }>
+  > & {
+    value: z.output<Field['schema']> | undefined
+    rawValue: unknown
+    initialValue: z.output<Field['schema']> | undefined
+    rawInitialValue: unknown
+    error?: string
+    dirty: boolean
+    pristine: boolean
+    valid: boolean
+    invalid: boolean
+  }
+
+export interface TypedUseField<T extends z.ZodTypeAny> {
+  <Field extends FieldPath>(field: Field): UseFieldProps<Field>
+  <Path extends PathInSchema<T>>(path: Path): UseFieldProps<
+    FieldPath<SchemaAt<T, Path>>
+  >
+  <Pathstring extends PathstringInSchema<T>>(path: Pathstring): UseFieldProps<
+    FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>
+  >
+}
+
+function useFieldBase<T extends z.ZodTypeAny, Field extends FieldPath>(
+  field: Field
+): UseFieldProps<Field> {
+  type Schema = Field['schema']
+
+  const {
+    setValue,
+    setRawValue,
+    setMeta,
+    selectFormValues,
+    selectFieldErrorMap,
+  } = useFormContext<T>()
+
+  const useFormSelector = untypedUseFormSelector as TypedUseFormSelector<T>
+
+  const valuesSelector = React.useMemo(
+    () =>
+      createSelector(
+        [selectFormValues],
+        createSelector(
+          [
+            createStructuredSelector({
+              value: ({ values }) =>
+                get(values, field.path) as z.output<Schema> | undefined,
+              rawValue: ({ rawValues }) =>
+                get(rawValues, field.path) as unknown,
+              initialValue: ({ initialValues }) =>
+                get(initialValues, field.path) as z.output<Schema> | undefined,
+              rawInitialValue: ({ rawInitialValues }) =>
+                get(rawInitialValues, field.path) as unknown,
+            }),
+          ],
+          ({
+            rawValue,
+            value = maybeParse(field.schema, rawValue),
+            rawInitialValue,
+            initialValue = maybeParse(field.schema, rawInitialValue),
+          }) => {
+            const dirty = !isEqual(value, initialValue)
+            const pristine = !dirty
+            return {
+              value,
+              rawValue,
+              initialValue,
+              rawInitialValue,
+              dirty,
+              pristine,
+            }
+          }
+        )
+      ),
+    [field.pathstring]
+  )
+
+  const values = useFormSelector(valuesSelector, shallowEqual)
+
+  const error = useFormSelector(
+    (state) => selectFieldErrorMap(state)[field.pathstring]
+  )
+  const meta = useFormSelector((state) => state.fieldMeta[field.pathstring])
+  const submitFailed = useFormSelector((state) => state.submitFailed)
+
+  const boundActions = React.useMemo(
+    () => bindActionsToField({ setValue, setRawValue, setMeta }, field),
+    [field.pathstring]
+  )
+
+  return React.useMemo(
+    () => ({
+      ...boundActions,
+      ...values,
+      visited: meta?.visited || false,
+      touched: meta?.touched || submitFailed,
+      error,
+      valid: !error,
+      invalid: Boolean(error),
+    }),
+    [field.pathstring, values, meta, error, submitFailed]
+  ) as any
+}
+
+export function useField<Field extends FieldPath>(
+  field: Field
+): UseFieldProps<Field>
+export function useField<T extends z.ZodTypeAny, Path extends PathInSchema<T>>(
+  field: Path
+): UseFieldProps<FieldPath<SchemaAt<T, Path>>>
+export function useField<
+  T extends z.ZodTypeAny,
+  Pathstring extends PathstringInSchema<T>
+>(
+  field: Pathstring
+): UseFieldProps<FieldPath<SchemaAt<T, parsePathstring<Pathstring>>>>
+export function useField<T extends z.ZodTypeAny>(
+  field: FieldPath | BasePath | string
+): UseFieldProps<any> {
+  const { root } = useFormContext<T>()
+  return useFieldBase(
+    field instanceof FieldPath ? field : root.get(field as any)
+  )
+}

package/src/useFormContext.ts

@@ -0,0 +1,11 @@
+import z from 'zod'
+import React from 'react'
+import { FormContext, FormContextProps } from './FormContext'
+
+export function useFormContext<T extends z.ZodTypeAny>(): FormContextProps<T> {
+  const props: FormContextProps<T> = React.useContext(FormContext) as any
+  if (!props) {
+    throw new Error(`must be used inside a <FormProvider>`)
+  }
+  return props
+}

package/src/useFormDispatch.ts

@@ -0,0 +1,13 @@
+import { createDispatchHook } from 'react-redux'
+import { FormStateContext } from './FormStateContext'
+import z from 'zod'
+import { FormAction } from './FormAction'
+import { Dispatch } from 'redux'
+
+export const useFormDispatch = createDispatchHook(
+  FormStateContext
+) as typeof useFormDispatchType
+
+declare function useFormDispatchType<T extends z.ZodTypeAny>(): Dispatch<
+  FormAction<T>
+>

package/src/useFormSelector.ts

@@ -0,0 +1,9 @@
+import { createSelectorHook, TypedUseSelectorHook } from 'react-redux'
+import { FormStateContext } from './FormStateContext'
+import { FormState } from './FormState'
+import z from 'zod'
+
+export const useFormSelector = createSelectorHook(FormStateContext)
+export type TypedUseFormSelector<T extends z.ZodTypeAny> = TypedUseSelectorHook<
+  FormState<T>
+>

package/src/useFormStatus.ts

@@ -0,0 +1,14 @@
+import z from 'zod'
+import {
+  useFormSelector as untypedUseFormSelector,
+  TypedUseFormSelector,
+} from './useFormSelector'
+import { useFormContext } from './useFormContext'
+
+const useFormSelector =
+  untypedUseFormSelector as TypedUseFormSelector<z.ZodTypeAny>
+
+export function useFormStatus() {
+  const { selectFormStatus } = useFormContext()
+  return useFormSelector(selectFormStatus)
+}

package/src/useFormValues.ts

@@ -0,0 +1,8 @@
+import z from 'zod'
+import { useFormSelector, TypedUseFormSelector } from './useFormSelector'
+import { useFormContext } from './useFormContext'
+
+export function useFormValues<T extends z.ZodTypeAny>() {
+  const { selectFormValues } = useFormContext<T>()
+  return (useFormSelector as TypedUseFormSelector<T>)(selectFormValues)
+}

package/src/useHtmlField.ts

@@ -0,0 +1,235 @@
+import z from 'zod'
+import { BasePath, FieldPath } from './FieldPath'
+import { useField, UseFieldProps } from './useField'
+import React, { HTMLInputTypeAttribute } from 'react'
+import { invert } from 'zod-invertible'
+import { useFormContext } from './useFormContext'
+import { acceptsNumber } from './util/acceptsNumber'
+import { acceptsBigint } from './util/acceptsBigint'
+import { PathInSchema, PathstringInSchema } from './util/PathInSchema'
+import { parsePathstring } from './util/parsePathstring'
+import { SchemaAt } from './util/SchemaAt'
+
+export type HtmlFieldInputProps = {
+  name: string
+  type: HTMLInputTypeAttribute
+  value: string
+  checked?: boolean
+  onChange: React.ChangeEventHandler
+  onFocus: React.FocusEventHandler
+  onBlur: React.FocusEventHandler
+}
+
+export type ValidUseHtmlFieldProps<Field extends FieldPath> = {
+  input: HtmlFieldInputProps
+  meta: UseFieldProps<Field>
+}
+
+export type UseHtmlFieldProps<Field extends FieldPath> = z.input<
+  Field['schema']
+> extends string | number | bigint | boolean | null | undefined
+  ? {
+      input: HtmlFieldInputProps
+      meta: UseFieldProps<Field>
+    }
+  : {
+      ERROR: 'field schema input must be a nullish string, number, boolean or bigint'
+    }
+
+type UseHtmlFieldOptions<Field, Schema extends z.ZodTypeAny> = {
+  field: Field
+  type: z.input<Schema> extends boolean | null | undefined
+    ? 'checkbox'
+    : Exclude<HTMLInputTypeAttribute, 'checkbox'>
+  normalizeOnBlur?: boolean
+}
+
+export interface TypedUseHtmlField<T extends z.ZodTypeAny> {
+  <Field extends FieldPath>(
+    options: UseHtmlFieldOptions<Field, Field['schema']>
+  ): UseHtmlFieldProps<Field>
+  <Path extends PathInSchema<T>>(
+    options: UseHtmlFieldOptions<Path, SchemaAt<T, Path>>
+  ): UseHtmlFieldProps<FieldPath<SchemaAt<T, Path>>>
+  <Path extends PathstringInSchema<T>>(
+    options: UseHtmlFieldOptions<Path, SchemaAt<T, parsePathstring<Path>>>
+  ): UseHtmlFieldProps<FieldPath<SchemaAt<T, parsePathstring<Path>>>>
+}
+
+function useHtmlFieldBase<Field extends FieldPath>(
+  options: UseHtmlFieldOptions<Field, Field['schema']>
+): UseHtmlFieldProps<Field> {
+  const { field, type, normalizeOnBlur = true } = options
+  const props = useField(field)
+  const {
+    value,
+    rawValue,
+    initialValue,
+    rawInitialValue,
+    setValue,
+    setRawValue,
+    setMeta,
+    ...meta
+  } = props
+
+  const { schema } = field
+
+  // tempRawValue is used for storing blank text when we've coerced the
+  // raw value to null or undefined, or storing numeric text when we've
+  // coerced the raw value to a number or bigint.
+  // This way we can set a raw value that will parse better in the form
+  // state without interfering with the text the user is typing.
+  const [tempRawValue, setTempRawValue] = React.useState(
+    rawValue as string | null | undefined
+  )
+
+  const tryNumber = React.useMemo(() => acceptsNumber(schema), [schema])
+  const tryBigint = React.useMemo(() => acceptsBigint(schema), [schema])
+
+  const onChange = React.useCallback(
+    (e: React.ChangeEvent) => {
+      if (e.currentTarget instanceof HTMLInputElement) {
+        const rawValue = getRawValue(e.currentTarget)
+        const normalized = normalizeRawValue(rawValue, {
+          schema,
+          tryNumber,
+          tryBigint,
+        })
+        if (typeof rawValue === 'string' && typeof normalized !== 'string') {
+          setTempRawValue(rawValue)
+        }
+        setRawValue(normalized)
+      }
+    },
+    [getRawValue, setRawValue, schema]
+  )
+
+  const onFocus = React.useCallback(() => {
+    setMeta({ visited: true })
+  }, [])
+
+  const onBlur = React.useCallback(
+    (e: React.FocusEvent) => {
+      if (e.currentTarget instanceof HTMLInputElement) {
+        let rawValue = normalizeRawValue(getRawValue(e.currentTarget), {
+          schema,
+          tryNumber,
+          tryBigint,
+        })
+        if (normalizeOnBlur) {
+          const parsed = field.schema.safeParse(rawValue)
+          const formatted = parsed.success
+            ? invert(field.schema).safeParse(parsed.data)
+            : undefined
+          if (formatted?.success) rawValue = formatted.data
+        }
+        setRawValue(rawValue)
+        setTempRawValue(undefined)
+      }
+      setMeta({ visited: true, touched: true })
+    },
+    [getRawValue, setRawValue, schema]
+  )
+
+  return React.useMemo(
+    (): ValidUseHtmlFieldProps<Field> => ({
+      input: {
+        name: field.pathstring,
+        type,
+        value:
+          typeof rawValue === 'boolean'
+            ? String(rawValue)
+            : typeof rawValue === 'string'
+            ? rawValue || tempRawValue || ''
+            : tempRawValue || (rawValue == null ? '' : String(rawValue) || ''),
+        ...(type === 'checkbox' && { checked: Boolean(rawValue) }),
+        onChange,
+        onFocus,
+        onBlur,
+      },
+      meta: {
+        ...meta,
+        value,
+        rawValue,
+        initialValue,
+        rawInitialValue,
+        setValue,
+        setRawValue,
+        setMeta,
+      },
+    }),
+    [props, tempRawValue, onChange]
+  ) as any
+}
+
+function getRawValue(el: HTMLInputElement | HTMLSelectElement) {
+  return el.type === 'checkbox' ? el.checked : el.value
+}
+
+function normalizeBlank(schema: z.ZodTypeAny): any {
+  if (schema.safeParse(undefined).success) return undefined
+  if (schema.safeParse(null).success) return null
+  return undefined
+}
+
+function safeBigInt(rawValue: string): bigint | undefined {
+  try {
+    return BigInt(rawValue)
+  } catch (error) {
+    return undefined
+  }
+}
+
+function normalizeRawValue(
+  rawValue: string | boolean,
+  {
+    schema,
+    tryNumber,
+    tryBigint,
+  }: { schema: z.ZodTypeAny; tryNumber: boolean; tryBigint: boolean }
+): string | boolean | number | bigint | null | undefined {
+  if (typeof rawValue === 'boolean') return rawValue
+  if (typeof rawValue === 'string' && !/\S/.test(rawValue)) {
+    return normalizeBlank(schema)
+  }
+  if (typeof rawValue === 'string' && !schema.safeParse(rawValue).success) {
+    if (tryNumber) {
+      const num = Number(rawValue)
+      if (!isNaN(num)) return num
+    }
+    if (tryBigint) {
+      const bigint = safeBigInt(rawValue)
+      if (bigint != null) return bigint
+    }
+  }
+  return rawValue
+}
+
+export function useHtmlField<Field extends FieldPath>(
+  options: UseHtmlFieldOptions<Field, Field['schema']>
+): UseHtmlFieldProps<Field>
+export function useHtmlField<
+  T extends z.ZodTypeAny,
+  Path extends PathInSchema<T>
+>(
+  options: UseHtmlFieldOptions<Path, SchemaAt<T, Path>>
+): UseHtmlFieldProps<FieldPath<SchemaAt<T, Path>>>
+export function useHtmlField<
+  T extends z.ZodTypeAny,
+  Path extends PathstringInSchema<T>
+>(
+  options: UseHtmlFieldOptions<Path, SchemaAt<T, parsePathstring<Path>>>
+): UseHtmlFieldProps<FieldPath<SchemaAt<T, parsePathstring<Path>>>>
+export function useHtmlField({
+  field,
+  ...rest
+}: UseHtmlFieldOptions<
+  FieldPath | BasePath,
+  z.ZodTypeAny
+>): UseHtmlFieldProps<any> {
+  const { root } = useFormContext()
+  return useHtmlFieldBase({
+    field: field instanceof FieldPath ? field : root.get(field),
+    ...rest,
+  })
+}

package/src/useInitialize.ts

@@ -0,0 +1,14 @@
+import z from 'zod'
+import React, { DependencyList } from 'react'
+import { useFormContext } from './useFormContext'
+import { InitializeAction } from './actions/initialize'
+
+export function useInitialize<T extends z.ZodTypeAny>(
+  options: Omit<InitializeAction<T>, 'type'>,
+  deps: DependencyList = [options.values, options.rawValues]
+) {
+  const { initialize } = useFormContext<T>()
+  React.useEffect(() => {
+    initialize(options)
+  }, deps)
+}