mayoiga 0.1.6 → 0.1.8

package/.github/workflows/checker.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v1

package/dist/index.d.ts

@@ -101,14 +101,18 @@ export type Controller<State extends StateRestriction> = {
 };
 type FormHook<State extends StateRestriction, Schema extends ZodType<any, any, any>> = {
     controller: Controller<State>;
-    handleSubmit: (handler: (e: BaseSyntheticEvent) => (val: {
+    /**
+     * @param handler handling logic
+     * @returns created handler is always return Promise, because of the schema validation run it asynchronously.
+     */
+    handleSubmit: <R>(handler: (e: BaseSyntheticEvent) => (val: {
         success: true;
         data: zodInfer<Schema>;
         error: undefined;
     } | {
         success: false;
         error: ReadonlyArray<ZodIssue>;
-    }) => void | Promise<void>) => (e: BaseSyntheticEvent) => void;
+    }) => R) => (e: BaseSyntheticEvent) => Promise<R>;
     api: Subscriber<FullFormState<State>, FormControllerBehavior<State>>;
 } & Controller<State>;
 /**

package/dist/index.js

@@ -54,7 +54,8 @@ function createFormStore(initialState, schema) {
         },
         pushFormErrors: (validator) => (prev) => {
             const pushedErrors = validator(prev.value);
-            return { ...prev, errors: { ...prev.errors, ...pushedErrors } };
+            const allErrors = { ...prev.errors, ...pushedErrors };
+            return { ...prev, isValid: Object.keys(allErrors).length === 0, errors: allErrors };
         },
         reduceFormErrors: (reducer) => (prev) => {
             return { ...prev, errors: reducer(prev.errors) };
@@ -98,8 +99,20 @@ export function createFormHook(initialState, schema) {
                         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
                         return eventHandled({ success: true, data: result.data, error: undefined });
                     }
-                    void eventHandled({ success: false, error: result.error.issues });
-                    store.actions.handleIssues(result.error.issues);
+                    const handled = eventHandled({ success: false, error: result.error.issues });
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                    if (typeof handled['then'] === 'function') {
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+                        return handled.then((x) => {
+                            store.actions.handleIssues(result.error.issues);
+                            // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+                            return x;
+                        });
+                    }
+                    else {
+                        store.actions.handleIssues(result.error.issues);
+                        return handled;
+                    }
                 });
             };
         },

package/dist/index.test.js

@@ -53,11 +53,15 @@ test('zod parse value before submit', async () => {
         else {
             expect('should not called').toBe(result.error);
         }
+        return Promise.resolve('returns value');
     });
     const Top = () => {
         return (React.createElement("div", null,
             React.createElement(AgeInputComponent, { controller: TestFormHook }),
-            React.createElement("button", { "data-testid": "submit-button", onClick: handleSubmitTester })));
+            React.createElement("button", { "data-testid": "submit-button", onClick: async (e) => {
+                    const returnedValue = await handleSubmitTester(e);
+                    expect(returnedValue).toBe('returns value');
+                } })));
     };
     render(React.createElement(Top, null));
     const ageInput = screen.getByTestId('age-input');
@@ -76,6 +80,49 @@ test('zod parse value before submit', async () => {
         });
     });
 });
+test('able to handle parse error on submit', async () => {
+    const TestFormHook = createTestHook();
+    const INPUT_AGE = 'aaaa';
+    const EXPECTED_ISSUE = {
+        code: 'custom',
+        message: 'Invalid input',
+        path: ['age'],
+    };
+    const handleSubmitTester = TestFormHook.handleSubmit((e) => (result) => {
+        if (result.success) {
+            expect('should not succeed').toBe(false);
+        }
+        else {
+            expect(result.success).toBe(false);
+            expect(result.error).toStrictEqual([EXPECTED_ISSUE]);
+        }
+        return Promise.resolve('returns value');
+    });
+    const Top = () => {
+        return (React.createElement("div", null,
+            React.createElement(AgeInputComponent, { controller: TestFormHook }),
+            React.createElement("button", { "data-testid": "submit-button", onClick: async (e) => {
+                    const returnedValue = await handleSubmitTester(e);
+                    expect(returnedValue).toBe('returns value');
+                } })));
+    };
+    render(React.createElement(Top, null));
+    const ageInput = screen.getByTestId('age-input');
+    await userEvent.type(ageInput, INPUT_AGE);
+    await waitFor(() => {
+        const ageInput = screen.getByTestId('age-input');
+        expect(ageInput.value).toBe(INPUT_AGE);
+    });
+    const submitButton = screen.getByTestId('submit-button');
+    await userEvent.click(submitButton);
+    await waitFor(() => {
+        console.log('waiting');
+        TestFormHook.api.actions.peek((s) => {
+            expect(s.value.age).toBe(INPUT_AGE);
+            expect(s.errors.age).toBe(EXPECTED_ISSUE.message);
+        });
+    });
+});
 test('User is able to re-initialize the form state', async () => {
     const TestFormHook = createTestHook();
     const Top = () => {
@@ -89,3 +136,25 @@ test('User is able to re-initialize the form state', async () => {
     TestFormHook.actions.initializeForm({}, { cleanup: true });
     expect(TestFormHook.api.getState().isDirty).toBeFalsy();
 });
+test('User is able to push server side validation', async () => {
+    const TestFormHook = createTestHook();
+    const Top = () => {
+        return (React.createElement("div", null,
+            React.createElement(AgeInputComponent, { controller: TestFormHook.controller })));
+    };
+    render(React.createElement(Top, null));
+    const ageInput = screen.getByTestId('age-input');
+    await userEvent.type(ageInput, '9999');
+    TestFormHook.actions.pushFormErrors((_s) => ({ age: 'server side error' }));
+    const state1 = TestFormHook.api.getState();
+    expect(state1.isDirty).toBeTruthy();
+    expect(state1.isValid).toBeFalsy();
+    expect(state1.errors.age).toEqual('server side error');
+    await userEvent.type(ageInput, 'hgoehoge');
+    // confirm empty field won't overwrite any messages
+    TestFormHook.actions.pushFormErrors((_s) => ({}));
+    const state2 = TestFormHook.api.getState();
+    expect(state2.isDirty).toBeTruthy();
+    expect(state2.isValid).toBeFalsy();
+    expect(state2.errors.age).toEqual('Invalid input');
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayoiga",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Type safe hook based form library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -43,27 +43,32 @@
     "zod": "^3.20.2"
   },
   "dependencies": {
-    "nozuchi": "^0.0.4"
+    "nozuchi": "^0.0.6"
+  },
+  "resolutions": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.57"
   },
   "devDependencies": {
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/node": "^17.0.23",
-    "@types/react": "^18.2.7",
-    "@types/use-sync-external-store": "^0.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.59.8",
-    "@typescript-eslint/parser": "^5.59.8",
-    "eslint": "^8.41.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-testing-library": "^5.11.0",
-    "jsdom": "^22.1.0",
-    "prettier": "^2.8.8",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.57",
+    "@types/use-sync-external-store": "^0.0.6",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-testing-library": "^6.2.0",
+    "jsdom": "^24.0.0",
+    "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typedoc": "^0.24.7",
-    "typescript": "^5.0.4",
+    "typedoc": "^0.25.8",
+    "typescript": "^5.3.3",
     "use-sync-external-store": "^1.2.0",
-    "vitest": "^0.31.1",
-    "zod": "^3.20.2"
+    "vitest": "^1.3.0",
+    "zod": "^3.22.4"
   }
 }

package/src/index.test.tsx

@@ -1,5 +1,6 @@
 import {render, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import React from 'react';
 
 import {test, expect} from 'vitest';
@@ -89,13 +90,20 @@ test('zod parse value before submit', async () => {
     } else {
       expect('should not called').toBe(result.error);
     }
+    return Promise.resolve('returns value');
   });
 
   const Top = () => {
     return (
       <div>
         <AgeInputComponent controller={TestFormHook} />
-        <button data-testid="submit-button" onClick={handleSubmitTester} />
+        <button
+          data-testid="submit-button"
+          onClick={async (e) => {
+            const returnedValue = await handleSubmitTester(e);
+            expect(returnedValue).toBe('returns value');
+          }}
+        />
       </div>
     );
   };
@@ -122,6 +130,63 @@ test('zod parse value before submit', async () => {
   });
 });
 
+test('able to handle parse error on submit', async () => {
+  const TestFormHook = createTestHook();
+
+  const INPUT_AGE = 'aaaa';
+  const EXPECTED_ISSUE = {
+    code: 'custom',
+    message: 'Invalid input',
+    path: ['age'],
+  };
+
+  const handleSubmitTester = TestFormHook.handleSubmit((e) => (result) => {
+    if (result.success) {
+      expect('should not succeed').toBe(false);
+    } else {
+      expect(result.success).toBe(false);
+      expect(result.error).toStrictEqual([EXPECTED_ISSUE]);
+    }
+    return Promise.resolve('returns value');
+  });
+
+  const Top = () => {
+    return (
+      <div>
+        <AgeInputComponent controller={TestFormHook} />
+        <button
+          data-testid="submit-button"
+          onClick={async (e) => {
+            const returnedValue = await handleSubmitTester(e);
+            expect(returnedValue).toBe('returns value');
+          }}
+        />
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+  await userEvent.type(ageInput, INPUT_AGE);
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+  });
+
+  const submitButton = screen.getByTestId('submit-button');
+  await userEvent.click(submitButton);
+
+  await waitFor(() => {
+    console.log('waiting');
+    TestFormHook.api.actions.peek((s) => {
+      expect(s.value.age).toBe(INPUT_AGE);
+      expect(s.errors.age).toBe(EXPECTED_ISSUE.message);
+    });
+  });
+});
+
 test('User is able to re-initialize the form state', async () => {
   const TestFormHook = createTestHook();
 
@@ -142,3 +207,35 @@ test('User is able to re-initialize the form state', async () => {
   TestFormHook.actions.initializeForm({}, {cleanup: true});
   expect(TestFormHook.api.getState().isDirty).toBeFalsy();
 });
+
+test('User is able to push server side validation', async () => {
+  const TestFormHook = createTestHook();
+
+  const Top = () => {
+    return (
+      <div>
+        <AgeInputComponent controller={TestFormHook.controller} />
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+  await userEvent.type(ageInput, '9999');
+
+  TestFormHook.actions.pushFormErrors((_s) => ({age: 'server side error'}));
+  const state1 = TestFormHook.api.getState();
+  expect(state1.isDirty).toBeTruthy();
+  expect(state1.isValid).toBeFalsy();
+  expect(state1.errors.age).toEqual('server side error');
+
+  await userEvent.type(ageInput, 'hgoehoge');
+
+  // confirm empty field won't overwrite any messages
+  TestFormHook.actions.pushFormErrors((_s) => ({}));
+  const state2 = TestFormHook.api.getState();
+  expect(state2.isDirty).toBeTruthy();
+  expect(state2.isValid).toBeFalsy();
+  expect(state2.errors.age).toEqual('Invalid input');
+});

package/src/index.ts

@@ -120,10 +120,13 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
   type StateKeys = keyof StateBeforeValidation;
 
   const initialErrors = Object.freeze(
-    Object.keys(initialState).reduce((buf, k) => {
-      buf[k as StateKeys] = null;
-      return buf;
-    }, {} as any as Err),
+    Object.keys(initialState).reduce(
+      (buf, k) => {
+        buf[k as StateKeys] = null;
+        return buf;
+      },
+      {} as any as Err,
+    ),
   );
 
   const fullInitialState: FullState = Object.freeze({
@@ -137,15 +140,18 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
     if (result.success) {
       return {...prev, isDirty: true, isValid: true, value: newValue, errors: initialErrors};
     }
-    const newErrors = result.error.issues.reduce((buf, iss) => {
-      // TODO: should support nested value?
-      const shallowPath = iss.path[0];
-      if (shallowPath === undefined) {
+    const newErrors = result.error.issues.reduce(
+      (buf, iss) => {
+        // TODO: should support nested value?
+        const shallowPath = iss.path[0];
+        if (shallowPath === undefined) {
+          return buf;
+        }
+        buf[shallowPath as any as StateKeys] = iss.message;
         return buf;
-      }
-      buf[shallowPath as any as StateKeys] = iss.message;
-      return buf;
-    }, {} as any as Err);
+      },
+      {} as any as Err,
+    );
 
     return {...prev, isDirty: true, isValid: false, errors: newErrors, value: newValue};
   };
@@ -165,20 +171,24 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
     }),
     handleIssues: (issues) => (prev) => {
       // FIXME: handle duplication
-      const newErrors = issues.reduce((buf, iss) => {
-        const shallowPath = iss.path[0];
-        if (shallowPath === undefined) {
+      const newErrors = issues.reduce(
+        (buf, iss) => {
+          const shallowPath = iss.path[0];
+          if (shallowPath === undefined) {
+            return buf;
+          }
+          buf[shallowPath as any as StateKeys] = iss.message;
           return buf;
-        }
-        buf[shallowPath as any as StateKeys] = iss.message;
-        return buf;
-      }, {} as any as Err);
+        },
+        {} as any as Err,
+      );
 
       return {...prev, isDirty: true, isValid: false, errors: newErrors};
     },
     pushFormErrors: (validator) => (prev) => {
       const pushedErrors = validator(prev.value);
-      return {...prev, errors: {...prev.errors, ...pushedErrors}};
+      const allErrors = {...prev.errors, ...pushedErrors};
+      return {...prev, isValid: Object.keys(allErrors).length === 0, errors: allErrors};
     },
     reduceFormErrors: (reducer) => (prev) => {
       return {...prev, errors: reducer(prev.errors)};
@@ -239,13 +249,15 @@ export type Controller<State extends StateRestriction> = {
 type FormHook<State extends StateRestriction, Schema extends ZodType<any, any, any>> = {
   controller: Controller<State>;
 
-  handleSubmit: (
+  /**
+   * @param handler handling logic
+   * @returns created handler is always return Promise, because of the schema validation run it asynchronously.
+   */
+  handleSubmit: <R>(
     handler: (
       e: BaseSyntheticEvent,
-    ) => (
-      val: {success: true; data: zodInfer<Schema>; error: undefined} | {success: false; error: ReadonlyArray<ZodIssue>},
-    ) => void | Promise<void>,
-  ) => (e: BaseSyntheticEvent) => void;
+    ) => (val: {success: true; data: zodInfer<Schema>; error: undefined} | {success: false; error: ReadonlyArray<ZodIssue>}) => R,
+  ) => (e: BaseSyntheticEvent) => Promise<R>;
 
   api: Subscriber<FullFormState<State>, FormControllerBehavior<State>>;
 } & Controller<State>;
@@ -266,12 +278,10 @@ export function createFormHook<StateBeforeValidation extends StateRestriction, S
       }, []);
     },
     useSelector: store.useSelector,
-    handleSubmit: (
+    handleSubmit: <R>(
       handler: (
         e: BaseSyntheticEvent,
-      ) => (
-        val: {success: true; data: zodInfer<Schema>; error: undefined} | {success: false; error: ReadonlyArray<ZodIssue>},
-      ) => void | Promise<void>,
+      ) => (val: {success: true; data: zodInfer<Schema>; error: undefined} | {success: false; error: ReadonlyArray<ZodIssue>}) => R,
     ) => {
       return (e: BaseSyntheticEvent) => {
         const eventHandled = handler(e);
@@ -282,8 +292,20 @@ export function createFormHook<StateBeforeValidation extends StateRestriction, S
             // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
             return eventHandled({success: true, data: result.data, error: undefined});
           }
-          void eventHandled({success: false, error: result.error.issues});
-          store.actions.handleIssues(result.error.issues);
+
+          const handled: any = eventHandled({success: false, error: result.error.issues});
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          if (typeof handled['then'] === 'function') {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
+            return handled.then((x: any) => {
+              store.actions.handleIssues(result.error.issues);
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+              return x;
+            }) as R;
+          } else {
+            store.actions.handleIssues(result.error.issues);
+            return handled as R;
+          }
         });
       };
     },

package/tsconfig.json

@@ -26,8 +26,6 @@
     "noErrorTruncation": true,
 
     "lib": ["dom", "esnext"],
-    // TODO: node is for vitest... I should isolate it probably?
-    "types": ["react/next"],
 
     "rootDir": "./src",
     "outDir": "./dist"