mayoiga 0.1.5 → 0.1.7

package/dist/component.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import type { SliceProps, FieldProps, StateRestriction, Controller } from './index';
-declare type ControlledComponentProps<State extends StateRestriction, Props> = Props & {
+type ControlledComponentProps<State extends StateRestriction, Props> = Props & {
     controller: Controller<State>;
 };
-export declare function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(props: ControlledComponentProps<State, SliceProps<State, R>>): JSX.Element;
-export declare function Field<State extends StateRestriction, Name extends keyof State>(props: ControlledComponentProps<State, FieldProps<State, Name>>): JSX.Element;
+export declare function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(props: ControlledComponentProps<State, SliceProps<State, R>>): React.JSX.Element;
+export declare function Field<State extends StateRestriction, Name extends keyof State>(props: ControlledComponentProps<State, FieldProps<State, Name>>): React.JSX.Element;
 export {};

package/dist/index.d.ts

@@ -1,20 +1,20 @@
 import type { Subscriber } from 'nozuchi';
 import type { BaseSyntheticEvent, ChangeEvent, ReactNode, ReactElement } from 'react';
 import type { infer as zodInfer, ZodIssue, ZodType } from 'zod';
-export declare type StateRestriction = Record<string, any>;
-declare type FormStatus = {
+export type StateRestriction = Record<string, any>;
+type FormStatus = {
     isDirty: boolean;
     isValid: boolean;
 };
-declare type FormErrors<State extends StateRestriction> = {
+type FormErrors<State extends StateRestriction> = {
     [k in keyof State]: string | null;
 };
-export declare type FullFormState<State extends StateRestriction> = FormStatus & {
+export type FullFormState<State extends StateRestriction> = FormStatus & {
     value: State;
     errors: FormErrors<State>;
 };
-export declare type HandleChangeAction<State extends StateRestriction, R = void> = <Name extends keyof State>(name: Name, value: State[Name]) => R;
-export declare type FieldProps<State extends StateRestriction, Name extends keyof State> = {
+export type HandleChangeAction<State extends StateRestriction, R = void> = <Name extends keyof State>(name: Name, value: State[Name]) => R;
+export type FieldProps<State extends StateRestriction, Name extends keyof State> = {
     name: Name;
     children: (tool: {
         name: Name;
@@ -28,7 +28,7 @@ export declare type FieldProps<State extends StateRestriction, Name extends keyo
      */
     deps?: ReadonlyArray<unknown>;
 };
-export declare type SliceProps<State extends StateRestriction, Selected extends ReadonlyArray<unknown>> = {
+export type SliceProps<State extends StateRestriction, Selected extends ReadonlyArray<unknown>> = {
     selector: (s: FullFormState<State>) => Selected;
     children: (tool: {
         handleChange: HandleChangeAction<State>;
@@ -43,14 +43,19 @@ export declare type SliceProps<State extends StateRestriction, Selected extends
      */
     deps?: ReadonlyArray<unknown>;
 };
-declare type FormControllerBehavior<StateBeforeValidation extends StateRestriction> = {
+type FormControllerBehavior<StateBeforeValidation extends StateRestriction> = {
     /** For testing */
     peek: (eyeball: (prev: FullFormState<StateBeforeValidation>) => void) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
     reset: () => () => FullFormState<StateBeforeValidation>;
     /**
      * Initialize form state without validation.
+     *
+     * @param initialVal value to initialize form state
+     * @param opts.cleanup if true, form state is become pristine (which means, `form.isDirty` is going to be false) .
      */
-    initializeForm: (initialVal: Partial<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+    initializeForm: (initialVal: Partial<StateBeforeValidation>, opts?: {
+        cleanup?: true;
+    }) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
     /**
      * Handle issue that zod reported
      */
@@ -66,9 +71,17 @@ declare type FormControllerBehavior<StateBeforeValidation extends StateRestricti
     reduceFormState: (reducer: (prevValue: StateBeforeValidation) => StateBeforeValidation) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
     handleBulkChange: (setter: (prev: StateBeforeValidation) => Partial<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
 };
-declare type ActionsCanBePublic<State extends StateRestriction> = {
+type ActionsCanBePublic<State extends StateRestriction> = {
     reset: VoidFunction;
-    initializeForm: (initial: Partial<State>) => void;
+    /**
+     * Initialize form state without validation.
+     *
+     * @param initialVal value to initialize form state
+     * @param opts.cleanup if true, form state is become pristine (which means, `form.isDirty` is going to be false) .
+     */
+    initializeForm: (initial: Partial<State>, opts?: {
+        cleanup?: true;
+    }) => void;
     pushFormErrors: (validator: (state: State) => Partial<FormErrors<State>>) => void;
     handleChange: HandleChangeAction<State>;
     handleBulkChange: (setter: (prev: State) => Partial<State>) => void;
@@ -77,7 +90,7 @@ declare type ActionsCanBePublic<State extends StateRestriction> = {
  * Restricted type interface of the form store
  * TODO: more restriction
  */
-export declare type Controller<State extends StateRestriction> = {
+export type Controller<State extends StateRestriction> = {
     useInitialize: (initialValue: Partial<State>) => void;
     useSelector: <R>(selector: (state: FullFormState<State>) => R, isEqual?: (prev: R, current: R) => boolean) => R;
     actions: ActionsCanBePublic<State>;
@@ -86,7 +99,7 @@ export declare type Controller<State extends StateRestriction> = {
         Slicer: <Selected extends ReadonlyArray<unknown>>(props: SliceProps<State, Selected>) => ReactElement<any, any> | null;
     };
 };
-declare type FormHook<State extends StateRestriction, Schema extends ZodType<any, any, any>> = {
+type FormHook<State extends StateRestriction, Schema extends ZodType<any, any, any>> = {
     controller: Controller<State>;
     handleSubmit: (handler: (e: BaseSyntheticEvent) => (val: {
         success: true;

package/dist/index.js

@@ -34,10 +34,11 @@ function createFormStore(initialState, schema) {
             return prev;
         },
         reset: () => () => fullInitialState,
-        initializeForm: (initialVal) => (prev) => ({
+        initializeForm: (initialVal, opts) => (prev) => ({
             ...prev,
             value: { ...prev.value, ...initialVal },
             errors: { ...initialErrors },
+            isDirty: opts?.cleanup === true ? false : prev.isDirty,
         }),
         handleIssues: (issues) => (prev) => {
             // FIXME: handle duplication
@@ -53,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) };

package/dist/index.test.js

@@ -13,7 +13,8 @@ const testSchema = zod.object({
         .refine((val) => (Number.isNaN(val) ? 0 : val)),
     marked: zod.boolean(),
 });
-const createTestHook = () => createFormHook({ name: '', description: '', age: '', marked: false }, testSchema);
+const initialState = { name: '', description: '', age: '', marked: false };
+const createTestHook = () => createFormHook(initialState, testSchema);
 const AgeInputComponent = (props) => {
     const { controller } = props;
     const [[age, errorMessage], { handleChange }] = useFormSlice(controller, (s) => [s.value.age, s.errors.age]);
@@ -75,3 +76,38 @@ test('zod parse value before submit', async () => {
         });
     });
 });
+test('User is able to re-initialize the form state', 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');
+    expect(TestFormHook.api.getState().isDirty).toBeTruthy();
+    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.5",
+  "version": "0.1.7",
   "description": "Type safe hook based form library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,30 +40,30 @@
   },
   "homepage": "https://github.com/hachibeeDI/mayoiga#readme",
   "peerDependencies": {
-    "zod": "^3.14.4"
+    "zod": "^3.20.2"
   },
   "dependencies": {
-    "nozuchi": "^0.0.3"
+    "nozuchi": "^0.0.4"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/node": "^17.0.23",
-    "@types/react": "^18.0.19",
+    "@types/react": "^18.2.7",
     "@types/use-sync-external-store": "^0.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "eslint": "^8.23.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-testing-library": "^5.6.3",
-    "jsdom": "^20.0.0",
-    "prettier": "^2.7.1",
+    "@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",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typedoc": "^0.23.14",
-    "typescript": "^4.8.3",
+    "typedoc": "^0.24.7",
+    "typescript": "^5.0.4",
     "use-sync-external-store": "^1.2.0",
-    "vitest": "^0.23.2",
-    "zod": "^3.19.1"
+    "vitest": "^0.31.1",
+    "zod": "^3.20.2"
   }
 }

package/src/index.test.tsx

@@ -28,7 +28,8 @@ type FormStateBeforeValidation = {
   marked: boolean;
 };
 
-const createTestHook = () => createFormHook({name: '', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
+const initialState = {name: '', description: '', age: '', marked: false};
+const createTestHook = () => createFormHook(initialState as FormStateBeforeValidation, testSchema);
 
 const AgeInputComponent = (props: {controller: Controller<FormStateBeforeValidation>}) => {
   const {controller} = props;
@@ -120,3 +121,56 @@ test('zod parse value before submit', async () => {
     });
   });
 });
+
+test('User is able to re-initialize the form state', 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');
+
+  expect(TestFormHook.api.getState().isDirty).toBeTruthy();
+  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

@@ -67,9 +67,15 @@ type FormControllerBehavior<StateBeforeValidation extends StateRestriction> = {
 
   /**
    * Initialize form state without validation.
+   *
+   * @param initialVal value to initialize form state
+   * @param opts.cleanup if true, form state is become pristine (which means, `form.isDirty` is going to be false) .
    */
   initializeForm: (
     initialVal: Partial<StateBeforeValidation>,
+    opts?: {
+      cleanup?: true;
+    },
   ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
 
   /**
@@ -151,10 +157,11 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
     },
 
     reset: () => () => fullInitialState,
-    initializeForm: (initialVal) => (prev) => ({
+    initializeForm: (initialVal, opts) => (prev) => ({
       ...prev,
       value: {...prev.value, ...initialVal},
       errors: {...initialErrors},
+      isDirty: opts?.cleanup === true ? false : prev.isDirty,
     }),
     handleIssues: (issues) => (prev) => {
       // FIXME: handle duplication
@@ -171,7 +178,8 @@ function createFormStore<StateBeforeValidation extends StateRestriction, 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)};
@@ -196,7 +204,19 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
 
 type ActionsCanBePublic<State extends StateRestriction> = {
   reset: VoidFunction;
-  initializeForm: (initial: Partial<State>) => void;
+
+  /**
+   * Initialize form state without validation.
+   *
+   * @param initialVal value to initialize form state
+   * @param opts.cleanup if true, form state is become pristine (which means, `form.isDirty` is going to be false) .
+   */
+  initializeForm: (
+    initial: Partial<State>,
+    opts?: {
+      cleanup?: true;
+    },
+  ) => void;
   pushFormErrors: (validator: (state: State) => Partial<FormErrors<State>>) => void;
   handleChange: HandleChangeAction<State>;
   handleBulkChange: (setter: (prev: State) => Partial<State>) => void;