chore: update zod example

examples/05_zod/src/index.tsx

@@ -1,42 +1,35 @@
+import { atomFromZodSchema } from 'jotai-form/zod';
+import { useAtomValue } from 'jotai/react';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import { useAtom } from 'jotai/react';
-import { atomWithValidate } from 'jotai-form';
-import { z } from 'zod';
+import { ZodIssue, z } from 'zod';
 
-const emailSchema = z.string().email();
-
-const emailAtom = atomWithValidate('[email protected]', {
- validate: (email) => {
- try {
- emailSchema.parse(email);
- return email;
- } catch (err: any) {
- // We catch the original and pull out the array of issues
- // to render
- // you can also just pick the first one and throw that again
- throw err.issues;
- }
- },
-});
+const formAtom = atomFromZodSchema(
+ z.object({
+ email: z.string().email().default('[email protected]'),
+ }),
+);
 
 const App = () => {
- const [state, setValue] = useAtom(emailAtom);
+ const formValue = useAtomValue(formAtom);
+ const { fieldErrors, isDirty, isValid, values, handleOnChange } = formValue;
 
  return (
  <>
- <span>{state.isDirty && '*'}</span>
+ <span>{isDirty && '*'}</span>
  <input
- value={state.value}
- onChange={(e) => setValue(e.target.value as any)}
+ value={values.email}
+ onChange={(e) => handleOnChange('email')(e.target.value as any)}
  />
- <span>{state.isValid && 'Valid'}</span>
- {!state.isValid &&
- // Since there's no way for error to inherit itself, this becomes necessary
- ((state.error as any[]) || []).map((issue: any, errIndex: number) => (
- // eslint-disable-next-line react/no-array-index-key
- <span key={`error-${errIndex}`}>{`${issue.message}`}</span>
- ))}
+ <span>{isValid && 'Valid'}</span>
+ {!isValid && (
+ <span key="error">
+ {[]
+ .concat(fieldErrors.email?.issues)
+ .filter((x) => x)
+ .map((d: ZodIssue) => d.message)}
+ </span>
+ )}
  </>
  );
 };

src/atomWithValidate.ts

@@ -47,6 +47,7 @@ export function atomWithValidate<Value>(
  let initialPromise: Promise<Value> | undefined;
  try {
  const initialValidatedValue = validate(initialValue);
+
  if (initialValidatedValue instanceof Promise) {
  initialPromise = initialValidatedValue;
  initialState = {
@@ -69,6 +70,7 @@ export function atomWithValidate<Value>(
  error,
  };
  }
+
  const baseAtom = atom(initialState);
  if (process.env.NODE_ENV !== 'production') {
  baseAtom.debugPrivate = true;

webpack.config.js

@@ -34,6 +34,8 @@ module.exports = {
  resolve: {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  alias: {
+ 'jotai-form/zod': `${__dirname}/src/utils/zod.ts`,
+ 'jotai-form/yup': `${__dirname}/src/utils/yup.ts`,
  'jotai-form': `${__dirname}/src`,
  },
  },