@jcoreio/zod-forms 1.0.0

package/src/actions/arrayActions.ts

@@ -0,0 +1,183 @@
+import { FieldPathForValue } from '../FieldPath'
+import z from 'zod'
+
+export type ArrayFieldPath<V = any, R = any> = FieldPathForValue<
+  V[] | null | undefined,
+  R[] | null | undefined
+>
+
+type ValueFor<Field extends ArrayFieldPath> = NonNullable<
+  z.output<Field['schema']>
+>[number]
+
+type RawValueFor<Field extends ArrayFieldPath> = NonNullable<
+  z.input<Field['schema']>
+>[number]
+
+export type ArrayInsertAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arrayInsert<Field>>
+
+export function arrayInsert<Field extends ArrayFieldPath>(
+  field: Field,
+  index: number,
+  value: ValueFor<Field>
+) {
+  return { type: 'arrayInsert', field, index, value } as const
+}
+
+export type ArrayInsertRawAction<
+  Field extends ArrayFieldPath = ArrayFieldPath
+> = ReturnType<typeof arrayInsertRaw<Field>>
+
+export function arrayInsertRaw<Field extends ArrayFieldPath>(
+  field: Field,
+  index: number,
+  rawValue: RawValueFor<Field>
+) {
+  return { type: 'arrayInsertRaw', field, index, rawValue } as const
+}
+
+export type ArrayMoveAction = ReturnType<typeof arrayMove>
+
+export function arrayMove(field: ArrayFieldPath, from: number, to: number) {
+  return { type: 'arrayMove', field, from, to } as const
+}
+
+export type ArrayPopAction = ReturnType<typeof arrayPop>
+
+export function arrayPop(field: ArrayFieldPath) {
+  return { type: 'arrayPop', field } as const
+}
+
+export type ArrayPushAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arrayPush<Field>>
+
+export function arrayPush<Field extends ArrayFieldPath>(
+  field: Field,
+  value: ValueFor<Field>
+) {
+  return { type: 'arrayPush', field, value } as const
+}
+
+export type ArrayPushRawAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arrayPushRaw<Field>>
+
+export function arrayPushRaw<Field extends ArrayFieldPath>(
+  field: Field,
+  rawValue: RawValueFor<Field>
+) {
+  return { type: 'arrayPushRaw', field, rawValue } as const
+}
+
+export type ArrayRemoveAction = ReturnType<typeof arrayRemove>
+
+export function arrayRemove(field: ArrayFieldPath, index: number) {
+  return { type: 'arrayRemove', field, index } as const
+}
+
+export type ArrayRemoveAllAction = ReturnType<typeof arrayRemoveAll>
+
+export function arrayRemoveAll(field: ArrayFieldPath) {
+  return { type: 'arrayRemoveAll', field } as const
+}
+
+export type ArrayShiftAction = ReturnType<typeof arrayShift>
+
+export function arrayShift(field: ArrayFieldPath) {
+  return { type: 'arrayShift', field } as const
+}
+
+export type ArraySpliceAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arraySplice<Field>>
+
+export function arraySplice<Field extends ArrayFieldPath>(
+  field: Field,
+  index: number,
+  deleteCount: number,
+  ...values: ValueFor<Field>[]
+) {
+  return { type: 'arraySplice', field, index, deleteCount, values } as const
+}
+
+export type ArraySpliceRawAction<
+  Field extends ArrayFieldPath = ArrayFieldPath
+> = ReturnType<typeof arraySpliceRaw<Field>>
+
+export function arraySpliceRaw<Field extends ArrayFieldPath>(
+  field: Field,
+  index: number,
+  deleteCount: number,
+  ...rawValues: RawValueFor<Field>[]
+) {
+  return {
+    type: 'arraySpliceRaw',
+    field,
+    index,
+    deleteCount,
+    rawValues,
+  } as const
+}
+
+export type ArraySwapAction = ReturnType<typeof arraySwap>
+
+export function arraySwap(
+  field: ArrayFieldPath,
+  indexA: number,
+  indexB: number
+) {
+  return { type: 'arraySwap', field, indexA, indexB } as const
+}
+
+export type ArrayUnshiftAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  ReturnType<typeof arrayUnshift<Field>>
+
+export function arrayUnshift<Field extends ArrayFieldPath>(
+  field: Field,
+  value: ValueFor<Field>
+) {
+  return { type: 'arrayUnshift', field, value } as const
+}
+
+export type ArrayUnshiftRawAction<
+  Field extends ArrayFieldPath = ArrayFieldPath
+> = ReturnType<typeof arrayUnshiftRaw<Field>>
+
+export function arrayUnshiftRaw<Field extends ArrayFieldPath>(
+  field: Field,
+  rawValue: RawValueFor<Field>
+) {
+  return { type: 'arrayUnshiftRaw', field, rawValue } as const
+}
+
+export type ArrayAction<Field extends ArrayFieldPath = ArrayFieldPath> =
+  | ArrayInsertAction<Field>
+  | ArrayInsertRawAction<Field>
+  | ArrayMoveAction
+  | ArrayPopAction
+  | ArrayPushAction<Field>
+  | ArrayPushRawAction<Field>
+  | ArrayRemoveAction
+  | ArrayRemoveAllAction
+  | ArrayShiftAction
+  | ArraySpliceAction<Field>
+  | ArraySpliceRawAction<Field>
+  | ArraySwapAction
+  | ArrayUnshiftAction<Field>
+  | ArrayUnshiftRawAction<Field>
+
+export const arrayActions = {
+  insert: arrayInsert,
+  insertRaw: arrayInsertRaw,
+  move: arrayMove,
+  pop: arrayPop,
+  push: arrayPush,
+  pushRaw: arrayPushRaw,
+  remove: arrayRemove,
+  removeAll: arrayRemoveAll,
+  shift: arrayShift,
+  splice: arraySplice,
+  spliceRaw: arraySpliceRaw,
+  swap: arraySwap,
+  unshift: arrayUnshift,
+  unshiftRaw: arrayUnshiftRaw,
+}

package/src/actions/initialize.ts

@@ -0,0 +1,16 @@
+import z from 'zod'
+
+export type InitializeAction<T extends z.ZodTypeAny> = ReturnType<
+  typeof initialize<T>
+>
+
+export function initialize<T extends z.ZodTypeAny>(props: {
+  rawValues?: z.input<T>
+  values?: z.output<T>
+  keepSubmitSucceeded?: boolean
+}) {
+  return {
+    type: 'initialize',
+    ...props,
+  } as const
+}

package/src/actions/removeHandlers.ts

@@ -0,0 +1,13 @@
+import z from 'zod'
+import { Handlers } from './addHandlers'
+
+export type RemoveHandlersAction<T extends z.ZodTypeAny> = ReturnType<
+  typeof removeHandlers<T>
+>
+
+export function removeHandlers<T extends z.ZodTypeAny>(handlers: Handlers<T>) {
+  return {
+    type: 'removeHandlers',
+    ...handlers,
+  } as const
+}

package/src/actions/setMeta.ts

@@ -0,0 +1,17 @@
+import { FieldPath } from '../FieldPath'
+import { FieldMeta } from '../FormState'
+
+export type SetMetaAction<Field extends FieldPath> = ReturnType<
+  typeof setMeta<Field>
+>
+
+export function setMeta<Field extends FieldPath>(
+  field: Field,
+  meta: Partial<FieldMeta>
+) {
+  return {
+    type: 'setMeta',
+    field,
+    meta,
+  } as const
+}

package/src/actions/setMounted.ts

@@ -0,0 +1,8 @@
+export type SetMountedAction = ReturnType<typeof setMounted>
+
+export function setMounted(mounted: boolean) {
+  return {
+    type: 'setMounted',
+    mounted,
+  } as const
+}

package/src/actions/setRawValue.ts

@@ -0,0 +1,17 @@
+import z from 'zod'
+import { FieldPath } from '../FieldPath'
+
+export type SetRawValueAction<Field extends FieldPath> = ReturnType<
+  typeof setRawValue<Field>
+>
+
+export function setRawValue<Field extends FieldPath>(
+  field: Field,
+  rawValue: z.input<Field['schema']>
+) {
+  return {
+    type: 'setRawValue',
+    field,
+    rawValue,
+  } as const
+}

package/src/actions/setSubmitStatus.ts

@@ -0,0 +1,26 @@
+import z from 'zod'
+import { FormState } from '../FormState'
+
+export type SetSubmitStatusAction<T extends z.ZodTypeAny> = ReturnType<
+  typeof setSubmitStatus<T>
+>
+
+export function setSubmitStatus<T extends z.ZodTypeAny>(
+  options: Partial<
+    Pick<
+      FormState<T>,
+      | 'submitting'
+      | 'submitError'
+      | 'submitPromise'
+      | 'submitSucceeded'
+      | 'submitFailed'
+      | 'submittedValues'
+      | 'rawSubmittedValues'
+    >
+  >
+) {
+  return {
+    type: 'setSubmitStatus',
+    ...options,
+  } as const
+}

package/src/actions/setValue.ts

@@ -0,0 +1,21 @@
+import z from 'zod'
+import { FieldPath } from '../FieldPath'
+
+export type SetValueAction<Field extends FieldPath> = ReturnType<
+  typeof setValue<Field>
+>
+
+export function setValue<Field extends FieldPath>(
+  field: Field,
+  value: z.output<Field['schema']>,
+  options?: {
+    normalize?: boolean
+  }
+) {
+  return {
+    type: 'setValue',
+    field,
+    value,
+    ...options,
+  } as const
+}

package/src/actions/submit.ts

@@ -0,0 +1,7 @@
+export type SubmitAction = ReturnType<typeof submit>
+
+export function submit() {
+  return {
+    type: 'submit',
+  } as const
+}

package/src/actions/submitSucceeded.ts

@@ -0,0 +1,7 @@
+export type SubmitSucceededAction = ReturnType<typeof submitSucceeded>
+
+export function submitSucceeded() {
+  return {
+    type: 'submitSucceeded',
+  } as const
+}

package/src/createFormMiddleware.ts

@@ -0,0 +1,74 @@
+import { Dispatch, Middleware } from 'redux'
+import z from 'zod'
+import { FormAction } from './FormAction'
+import { FormState } from './FormState'
+import { SubmitAction } from './actions/submit'
+import { setSubmitStatus } from './actions/setSubmitStatus'
+import { submitSucceeded } from './actions/submitSucceeded'
+
+export function createFormMiddleware<T extends z.ZodTypeAny>(): Middleware<
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  {},
+  FormState<T>,
+  Dispatch<FormAction<T>>
+> {
+  return (store) => (next) => (action) => {
+    const result: FormState<T> = next(action) as any
+
+    const nextState = store.getState()
+
+    if (isSubmitAction(action) && !nextState.submitting) {
+      const {
+        onSubmit,
+        onSubmitSucceeded,
+        onSubmitFailed,
+        values,
+        rawValues,
+        initialValues,
+      } = nextState
+      const submitPromise = (async () => {
+        if (nextState.validationError) throw nextState.validationError
+        for (const fn of onSubmit) await fn(values, { initialValues })
+      })()
+      store.dispatch(
+        setSubmitStatus({
+          submitting: true,
+          submittedValues: values,
+          rawSubmittedValues: rawValues,
+          submitError: undefined,
+          submitSucceeded: false,
+          submitFailed: false,
+          submitPromise,
+        })
+      )
+      submitPromise.then(
+        async () => {
+          if (store.getState().submitPromise !== submitPromise) return
+          store.dispatch(submitSucceeded())
+          for (const fn of onSubmitSucceeded) await fn()
+        },
+        async (error) => {
+          if (store.getState().submitPromise !== submitPromise) return
+          store.dispatch(
+            setSubmitStatus({
+              submitting: false,
+              submitError: error,
+              submitSucceeded: false,
+              submitFailed: true,
+              submitPromise: undefined,
+            })
+          )
+          for (const fn of onSubmitFailed) await fn(error)
+        }
+      )
+    }
+
+    return result
+  }
+}
+
+function isSubmitAction(action: any): action is SubmitAction {
+  return (
+    action instanceof Object && 'type' in action && action.type === 'submit'
+  )
+}

package/src/createFormProvider.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { Store, applyMiddleware, bindActionCreators, createStore } from 'redux'
+import z from 'zod'
+import { setMounted } from './actions/setMounted'
+import { createFormReducer } from './createFormReducer'
+import { FormAction } from './FormAction'
+import { FormState } from './FormState'
+import { Provider } from 'react-redux'
+import { initialize } from './actions/initialize'
+import { setRawValue } from './actions/setRawValue'
+import { setValue } from './actions/setValue'
+import { FormContext, FormContextProps } from './FormContext'
+import { FormStateContext } from './FormStateContext'
+import { createFormMiddleware } from './createFormMiddleware'
+import { submit } from './actions/submit'
+import { setSubmitStatus } from './actions/setSubmitStatus'
+import { setMeta } from './actions/setMeta'
+import { addHandlers } from './actions/addHandlers'
+import { removeHandlers } from './actions/removeHandlers'
+import { arrayActions } from './actions/arrayActions'
+
+export const createFormProvider = <T extends z.ZodTypeAny>(
+  props: Pick<
+    FormContextProps<T>,
+    | 'root'
+    | 'schema'
+    | 'inverseSchema'
+    | 'selectFormStatus'
+    | 'selectFieldErrorMap'
+    | 'selectFormValues'
+  >
+) =>
+  function FormProvider({ children }: { children: React.ReactElement }) {
+    const storeRef = React.useRef<Store<FormState<T>, FormAction<T>>>()
+    if (!storeRef.current) {
+      storeRef.current = createStore(
+        createFormReducer(props),
+        applyMiddleware(createFormMiddleware())
+      )
+    }
+    const store = storeRef.current
+    const { dispatch } = store
+
+    const getValues = React.useCallback(() => store.getState().values, [])
+    const getRawValues = React.useCallback(() => store.getState().rawValues, [])
+    const getInitialValues = React.useCallback(
+      () => store.getState().initialValues,
+      []
+    )
+    const getRawInitialValues = React.useCallback(
+      () => store.getState().rawInitialValues,
+      []
+    )
+    const getStatus = React.useCallback(
+      () => props.selectFormStatus(store.getState()),
+      []
+    )
+
+    React.useEffect(
+      () => () => {
+        store.dispatch(setMounted(false))
+      },
+      []
+    )
+    const formContext = React.useMemo(
+      (): FormContextProps<T> => ({
+        ...props,
+        getValues,
+        getRawValues,
+        getInitialValues,
+        getRawInitialValues,
+        getStatus,
+        ...bindActionCreators(
+          {
+            initialize: initialize<T>,
+            addHandlers: addHandlers<T>,
+            removeHandlers: removeHandlers<T>,
+            submit,
+            setSubmitStatus: setSubmitStatus<T>,
+            setMeta: setMeta as any,
+            setRawValue: setRawValue as any,
+            setValue: setValue as any,
+          },
+          dispatch
+        ),
+        arrayActions: bindActionCreators(arrayActions, dispatch),
+      }),
+      []
+    )
+
+    return (
+      <FormContext.Provider value={formContext as any}>
+        <Provider
+          store={store}
+          context={FormStateContext as FormStateContext<T>}
+        >
+          {children}
+        </Provider>
+      </FormContext.Provider>
+    )
+  }

package/src/createFormReducer.ts

@@ -0,0 +1,91 @@
+import { Reducer } from 'redux'
+import z from 'zod'
+import { FormAction } from './FormAction'
+import { FormState } from './FormState'
+import { initFormState } from './initFormState'
+import { addHandlersReducer } from './reducers/addHandlers'
+import { removeHandlersReducer } from './reducers/removeHandlers'
+import { createSetValueReducer } from './reducers/setValue'
+import { createSetRawValueReducer } from './reducers/setRawValue'
+import { setMetaReducer } from './reducers/setMeta'
+import { submitSucceededReducer } from './reducers/submitSucceeded'
+import { setSubmitStatusReducer } from './reducers/setSubmitStatus'
+import { createInitializeReducer } from './reducers/initialize'
+import { arrayPopReducer } from './reducers/arrayPop'
+import { arrayMoveReducer } from './reducers/arrayMove'
+import { arrayRemoveReducer } from './reducers/arrayRemove'
+import { arrayRemoveAllReducer } from './reducers/arrayRemoveAll'
+import { arrayShiftReducer } from './reducers/arrayShift'
+import { arraySwapReducer } from './reducers/arraySwap'
+import { arrayPushRawReducer } from './reducers/arrayPushRaw'
+import { arrayInsertRawReducer } from './reducers/arrayInsertRaw'
+import { arraySpliceRawReducer } from './reducers/arraySpliceRaw'
+import { arrayUnshiftRawReducer } from './reducers/arrayUnshiftRaw'
+import { arrayPushReducer } from './reducers/arrayPush'
+import { arrayUnshiftReducer } from './reducers/arrayUnshift'
+import { arrayInsertReducer } from './reducers/arrayInsert'
+import { arraySpliceReducer } from './reducers/arraySplice'
+
+export function createFormReducer<T extends z.ZodTypeAny>(options: {
+  schema: T
+  inverseSchema: z.ZodType<z.input<T>, any, z.output<T>>
+}): Reducer<FormState<T>, FormAction<T>> {
+  const initializeReducer = createInitializeReducer(options)
+  const setValueReducer = createSetValueReducer(options)
+  const setRawValueReducer = createSetRawValueReducer(options)
+  const formReducer = (
+    state: FormState<T> = initFormState(),
+    action: FormAction<T>
+  ): FormState<T> => {
+    switch (action.type) {
+      case 'setMounted':
+        return { ...state, mounted: action.mounted }
+      case 'addHandlers':
+        return addHandlersReducer(state, action)
+      case 'removeHandlers':
+        return removeHandlersReducer(state, action)
+      case 'initialize':
+        return initializeReducer(state, action)
+      case 'setSubmitStatus':
+        return setSubmitStatusReducer(state, action)
+      case 'submitSucceeded':
+        return submitSucceededReducer(state)
+      case 'setValue':
+        return setValueReducer(state, action)
+      case 'setRawValue':
+        return setRawValueReducer(state, action)
+      case 'setMeta':
+        return setMetaReducer(state, action)
+      case 'arrayInsert':
+        return arrayInsertReducer(formReducer, state, action)
+      case 'arrayInsertRaw':
+        return arrayInsertRawReducer(formReducer, state, action)
+      case 'arrayMove':
+        return arrayMoveReducer(formReducer, state, action)
+      case 'arrayPop':
+        return arrayPopReducer(formReducer, state, action)
+      case 'arrayPush':
+        return arrayPushReducer(formReducer, state, action)
+      case 'arrayPushRaw':
+        return arrayPushRawReducer(formReducer, state, action)
+      case 'arrayRemove':
+        return arrayRemoveReducer(formReducer, state, action)
+      case 'arrayRemoveAll':
+        return arrayRemoveAllReducer(formReducer, state, action)
+      case 'arrayShift':
+        return arrayShiftReducer(formReducer, state, action)
+      case 'arraySplice':
+        return arraySpliceReducer(formReducer, state, action)
+      case 'arraySpliceRaw':
+        return arraySpliceRawReducer(formReducer, state, action)
+      case 'arraySwap':
+        return arraySwapReducer(formReducer, state, action)
+      case 'arrayUnshift':
+        return arrayUnshiftReducer(formReducer, state, action)
+      case 'arrayUnshiftRaw':
+        return arrayUnshiftRawReducer(formReducer, state, action)
+    }
+    return state
+  }
+  return formReducer
+}

package/src/createSelectFieldErrorMap.ts

@@ -0,0 +1,47 @@
+import z from 'zod'
+import { pathstring } from './util/pathstring'
+import { createSelector } from 'reselect'
+import { FormState } from './FormState'
+
+export type SelectFieldErrorMap = ReturnType<typeof createSelectFieldErrorMap>
+
+export function createSelectFieldErrorMap() {
+  return createSelector(
+    [
+      (state: FormState<any>) => state.validationError,
+      (state: FormState<any>) => state.submitError,
+    ],
+    (...errors: any[]): { [K in string]?: string } =>
+      Object.fromEntries(
+        errors.flatMap((e) =>
+          isZodError(e)
+            ? e.issues.map((issue) => [
+                pathstring(issue.path),
+                messageForIssue(issue),
+              ])
+            : []
+        )
+      )
+  )
+}
+
+function isZodError(error: any): error is z.ZodError {
+  return error && error.name === 'ZodError'
+}
+
+/**
+ * Gets less confusing error messages for ordinary users for certain ZodIssues
+ */
+function messageForIssue(issue: z.ZodIssue): string {
+  if (issue.code === 'invalid_type') {
+    return issue.received === 'null' || issue.received === 'undefined'
+      ? // Without this, the error would say "Expected <type>, received null"
+        // or "Invalid number" as below
+        'Required'
+      : issue.expected === 'number' || issue.expected === 'bigint'
+      ? // Without this, invalid text input for z.number() would say "Expected number, received string"
+        'Invalid number'
+      : issue.message
+  }
+  return issue.message
+}

package/src/createSelectFormStatus.ts

@@ -0,0 +1,41 @@
+import { createSelector, createStructuredSelector } from 'reselect'
+import { FormState } from './FormState'
+import isEqual from 'fast-deep-equal'
+
+export type SelectFormStatus = ReturnType<typeof createSelectFormStatus>
+export type FormStatus = ReturnType<SelectFormStatus>
+
+export function createSelectFormStatus() {
+  let lastValidationError: FormState<any>['validationError'] = undefined
+
+  function selectValidationError({ validationError }: FormState<any>) {
+    if (
+      validationError === lastValidationError ||
+      isEqual(validationError?.issues, lastValidationError?.issues)
+    ) {
+      return lastValidationError
+    }
+    return (lastValidationError = validationError)
+  }
+
+  const selectPristine = createSelector(
+    [
+      (state: FormState<any>) => state.values,
+      (state: FormState<any>) => state.initialValues,
+    ],
+    isEqual
+  )
+
+  return createStructuredSelector({
+    initialized: (state: FormState<any>) => state.initialized,
+    submitting: (state: FormState<any>) => state.submitting,
+    submitSucceeded: (state: FormState<any>) => state.submitSucceeded,
+    submitFailed: (state: FormState<any>) => state.submitFailed,
+    submitError: (state: FormState<any>) => state.submitError,
+    validationError: selectValidationError,
+    valid: (state: FormState<any>) => selectValidationError(state) == null,
+    invalid: (state: FormState<any>) => selectValidationError(state) != null,
+    pristine: selectPristine,
+    dirty: (state: FormState<any>) => !selectPristine(state),
+  })
+}