mayoiga 0.1.2 → 0.1.3

package/dist/component.test.js

@@ -4,11 +4,14 @@ import React from 'react';
 import { test, expect } from 'vitest';
 import * as zod from 'zod';
 import { Field, Slicer } from './component';
-import { createFormHook, } from './index';
+import { createFormHook } from './index';
 const testSchema = zod.object({
     name: zod.string(),
     description: zod.string(),
-    age: zod.string().transform(val => Number(val)).refine(val => Number.isNaN(val) ? 0 : val),
+    age: zod
+        .string()
+        .transform((val) => Number(val))
+        .refine((val) => (Number.isNaN(val) ? 0 : val)),
     marked: zod.boolean(),
 });
 const createTestHook = () => createFormHook({ name: '', description: '', age: '', marked: false }, testSchema);
@@ -36,7 +39,7 @@ test('Slice component works fine in basic usage.', async () => {
     const TestFormHook = createTestHook();
     const Top = () => {
         return (React.createElement("div", null,
-            React.createElement(Slicer, { controller: TestFormHook.controller, selector: s => [s.value.age] }, (tool, age) => React.createElement("input", { "data-testid": "age-input", name: "age", value: age, onChange: e => tool.handleChange('age', e.target.value) }))));
+            React.createElement(Slicer, { controller: TestFormHook.controller, selector: (s) => [s.value.age] }, (tool, age) => (React.createElement("input", { "data-testid": "age-input", name: "age", value: age, onChange: (e) => tool.handleChange('age', e.target.value) })))));
     };
     render(React.createElement(Top, null));
     const INPUT_AGE = '42';
@@ -51,3 +54,30 @@ test('Slice component works fine in basic usage.', async () => {
         });
     });
 });
+test('A user able to create a reusable component', async () => {
+    const TestFormHook = createTestHook();
+    function NarrowTypedExpected(props) {
+        return (React.createElement(Field, { controller: props.controller, name: "age" }, (tool) => React.createElement("input", { "data-testid": "age-input", ...tool })));
+    }
+    function ErrorDisplayer(props) {
+        const { controller } = props;
+        return (React.createElement(Slicer, { controller: controller, selector: (s) => [s.value.age] }, (tool, age) => (React.createElement("button", { onClick: (e) => {
+                controller.actions.pushFormErrors((_state) => ({ age: age === '42' ? 'yes!!!' : 'noooo' }));
+            } }))));
+    }
+    render(React.createElement("div", null,
+        React.createElement(NarrowTypedExpected, { controller: TestFormHook.controller }),
+        React.createElement(ErrorDisplayer, { controller: TestFormHook.controller })));
+    const INPUT_AGE = '42';
+    // calling `userEvent` in here will cause race condition...
+    await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+    await userEvent.click(screen.getByRole('button'));
+    await waitFor(() => {
+        const ageInput = screen.getByTestId('age-input');
+        expect(ageInput.value).toBe(INPUT_AGE);
+        TestFormHook.api.actions.peek((s) => {
+            expect(s.value.age).toBe(INPUT_AGE);
+            expect(s.errors.age).toBe('yes!!!');
+        });
+    });
+});

package/dist/index.d.ts

@@ -44,7 +44,8 @@ declare type FormControllerBehavior<StateBeforeValidation> = {
     /**
      * You can handle server side or other external error via this action.
      */
-    handleError: (reducer: (prev: FormErrors<StateBeforeValidation>) => FormErrors<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+    pushFormErrors: (validator: (state: StateBeforeValidation) => Partial<FormErrors<StateBeforeValidation>>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+    reduceFormErrors: (reducer: (prev: FormErrors<StateBeforeValidation>) => FormErrors<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
     /**
      */
     handleChange: HandleChangeAction<StateBeforeValidation, (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>>;
@@ -54,9 +55,9 @@ declare type FormControllerBehavior<StateBeforeValidation> = {
 declare type ActionsCanBePublic<State extends StateRestriction> = {
     reset: VoidFunction;
     initializeForm: (initial: Partial<State>) => void;
+    pushFormErrors: (validator: (state: State) => Partial<FormErrors<State>>) => void;
     handleChange: HandleChangeAction<State>;
     handleBulkChange: (setter: (prev: State) => Partial<State>) => void;
-    handleError: (reducer: (prev: FormErrors<State>) => FormErrors<State>) => void;
 };
 /**
  * Restricted type interface of the form store

package/dist/index.js

@@ -51,7 +51,11 @@ function createFormStore(initialState, schema) {
             }, {});
             return { ...prev, isDirty: true, isValid: false, errors: newErrors };
         },
-        handleError: (reducer) => (prev) => {
+        pushFormErrors: (validator) => (prev) => {
+            const pushedErrors = validator(prev.value);
+            return { ...prev, errors: { ...prev.errors, ...pushedErrors } };
+        },
+        reduceFormErrors: (reducer) => (prev) => {
             return { ...prev, errors: reducer(prev.errors) };
         },
         handleChange: (name, value) => (prev) => {

package/dist/index.test.js

@@ -7,13 +7,16 @@ import { createFormHook, useFormSlice } from './index';
 const testSchema = zod.object({
     name: zod.string(),
     description: zod.string(),
-    age: zod.string().transform(val => Number(val)).refine(val => Number.isNaN(val) ? 0 : val),
+    age: zod
+        .string()
+        .transform((val) => Number(val))
+        .refine((val) => (Number.isNaN(val) ? 0 : val)),
     marked: zod.boolean(),
 });
 const createTestHook = () => createFormHook({ name: '', description: '', age: '', marked: false }, testSchema);
 const AgeInputComponent = (props) => {
     const { controller } = props;
-    const [[age, errorMessage], { handleChange }] = useFormSlice(controller, s => [s.value.age, s.errors.age]);
+    const [[age, errorMessage], { handleChange }] = useFormSlice(controller, (s) => [s.value.age, s.errors.age]);
     return (React.createElement("div", null,
         React.createElement("input", { "data-testid": "age-input", value: age, name: "age", onChange: (e) => {
                 handleChange('age', e.currentTarget.value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mayoiga",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Type safe hook based form library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,10 +15,11 @@
     "test": "vitest run",
     "prebuild": "npm run clean",
     "build": "tsc",
-    "check:style": "prettier --check 'src/**/*.{js,ts}'",
+    "check:type": "tsc --noEmit",
+    "check:style": "prettier --check 'src/**/*.{js,ts,jsx,tsx}'",
     "check:lint": "eslint 'src/**/*.{ts,tsx}'",
-    "check-all": "npm run check:style && npm run check:lint && npm run build --noEmit && npm run test",
-    "fix-all": "npm run check:style --write && npm run check:lint --fix",
+    "check-all": "npm run check:type && npm run check:style && npm run check:lint && npm run build --noEmit && npm run test",
+    "fix-all": "npm run check:style -- --write && npm run check:lint -- --fix",
     "prepublish": "npm run check-all && npm run build"
   },
   "repository": {

package/src/component.test.tsx

@@ -1,4 +1,3 @@
-
 import {render, screen, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -7,14 +6,19 @@ import {test, expect} from 'vitest';
 
 import * as zod from 'zod';
 
-import { Field, Slicer } from './component';
+import {Field, Slicer} from './component';
+
+import {createFormHook} from './index';
 
-import {createFormHook, } from './index';
+import type {Controller} from './index';
 
 const testSchema = zod.object({
   name: zod.string(),
   description: zod.string(),
-  age: zod.string().transform(val => Number(val)).refine(val => Number.isNaN(val) ? 0 : val),
+  age: zod
+    .string()
+    .transform((val) => Number(val))
+    .refine((val) => (Number.isNaN(val) ? 0 : val)),
   marked: zod.boolean(),
 });
 
@@ -24,9 +28,9 @@ type FormStateBeforeValidation = {
   description: string;
   age: string;
   marked: boolean;
-}
+};
 
-const createTestHook =  () => createFormHook({name:'', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
+const createTestHook = () => createFormHook({name: '', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
 
 // afterEach(cleanup);
 
@@ -36,11 +40,11 @@ test('Field component works fine in basic usage.', async () => {
   const Top = () => {
     return (
       <div>
-        <Field controller={TestFormHook.controller} name="age">{
-          (tool) => <input data-testid="age-input" {...tool} />
-        }</Field>
+        <Field controller={TestFormHook.controller} name="age">
+          {(tool) => <input data-testid="age-input" {...tool} />}
+        </Field>
       </div>
-    )
+    );
   };
 
   render(<Top />);
@@ -66,11 +70,13 @@ test('Slice component works fine in basic usage.', async () => {
   const Top = () => {
     return (
       <div>
-        <Slicer controller={TestFormHook.controller} selector={s => [s.value.age] as const}>{
-          (tool, age: string) => <input data-testid="age-input" name="age" value={age} onChange={e => tool.handleChange('age' as const, e.target.value)} />
-        }</Slicer>
+        <Slicer controller={TestFormHook.controller} selector={(s) => [s.value.age] as const}>
+          {(tool, age: string) => (
+            <input data-testid="age-input" name="age" value={age} onChange={(e) => tool.handleChange('age' as const, e.target.value)} />
+          )}
+        </Slicer>
       </div>
-    )
+    );
   };
 
   render(<Top />);
@@ -89,3 +95,52 @@ test('Slice component works fine in basic usage.', async () => {
     });
   });
 });
+
+test('A user able to create a reusable component', async () => {
+  const TestFormHook = createTestHook();
+
+  function NarrowTypedExpected(props: {controller: Controller<{age: string}>}) {
+    return (
+      <Field controller={props.controller} name="age">
+        {(tool) => <input data-testid="age-input" {...tool} />}
+      </Field>
+    );
+  }
+
+  function ErrorDisplayer(props: {controller: Controller<{age: string}>}) {
+    const {controller} = props;
+    return (
+      <Slicer controller={controller} selector={(s) => [s.value.age] as const}>
+        {(tool, age: string) => (
+          <button
+            onClick={(e) => {
+              controller.actions.pushFormErrors((_state) => ({age: age === '42' ? 'yes!!!' : 'noooo'}));
+            }}
+          />
+        )}
+      </Slicer>
+    );
+  }
+
+  render(
+    <div>
+      <NarrowTypedExpected controller={TestFormHook.controller} />
+      <ErrorDisplayer controller={TestFormHook.controller} />
+    </div>,
+  );
+
+  const INPUT_AGE = '42';
+
+  // calling `userEvent` in here will cause race condition...
+  await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+  await userEvent.click(screen.getByRole('button'));
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+    TestFormHook.api.actions.peek((s) => {
+      expect(s.value.age).toBe(INPUT_AGE);
+      expect(s.errors.age).toBe('yes!!!');
+    });
+  });
+});

package/src/component.tsx

@@ -1,18 +1,22 @@
 import React from 'react';
 
-import type {SliceProps, FieldProps, StateRestriction, Controller, } from './index';
+import type {SliceProps, FieldProps, StateRestriction, Controller} from './index';
 
 type ControlledComponentProps<State, Props> = Props & {
   controller: Controller<State>;
-}
+};
 
-export function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(props: ControlledComponentProps<State, SliceProps<State, R>>) {
+export function Slicer<State extends StateRestriction, R extends ReadonlyArray<unknown>>(
+  props: ControlledComponentProps<State, SliceProps<State, R>>,
+) {
   const {controller, ...restProps} = props;
   const {Slicer: Delegate} = controller.components;
   return <Delegate {...restProps} />;
 }
 
-export function Field<State extends StateRestriction, Name extends keyof State>(props: ControlledComponentProps<State, FieldProps<State, Name>>) {
+export function Field<State extends StateRestriction, Name extends keyof State>(
+  props: ControlledComponentProps<State, FieldProps<State, Name>>,
+) {
   const {controller, ...restProps} = props;
   const {Field: Delegate} = controller.components;
   return <Delegate {...restProps} />;

package/src/index.test.tsx

@@ -7,14 +7,16 @@ import {test, expect} from 'vitest';
 import * as zod from 'zod';
 
 import {createFormHook, useFormSlice} from './index';
- 
-import type {Controller} from './index';
 
+import type {Controller} from './index';
 
 const testSchema = zod.object({
   name: zod.string(),
   description: zod.string(),
-  age: zod.string().transform(val => Number(val)).refine(val => Number.isNaN(val) ? 0 : val),
+  age: zod
+    .string()
+    .transform((val) => Number(val))
+    .refine((val) => (Number.isNaN(val) ? 0 : val)),
   marked: zod.boolean(),
 });
 
@@ -24,13 +26,13 @@ type FormStateBeforeValidation = {
   description: string;
   age: string;
   marked: boolean;
-}
+};
 
-const createTestHook =  () => createFormHook({name:'', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
+const createTestHook = () => createFormHook({name: '', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
 
 const AgeInputComponent = (props: {controller: Controller<FormStateBeforeValidation>}) => {
   const {controller} = props;
-  const [[age, errorMessage], {handleChange}] = useFormSlice(controller, s => [s.value.age, s.errors.age] as const);
+  const [[age, errorMessage], {handleChange}] = useFormSlice(controller, (s) => [s.value.age, s.errors.age] as const);
   return (
     <div>
       <input
@@ -56,7 +58,7 @@ test('useSelector can select the fields', async () => {
       <div>
         <AgeInputComponent controller={TestFormHook.controller} />
       </div>
-    )
+    );
   };
 
   render(<Top />);
@@ -81,12 +83,12 @@ test('zod parse value before submit', async () => {
   const PARSED_RESULT = Number(INPUT_AGE);
 
   const handleSubmitTester = TestFormHook.handleSubmit((e) => (result) => {
-      if (result.success) {
-        expect(result.data.age).toBe(PARSED_RESULT);
-      } else {
-        expect('should not called').toBe(result.error);
-      }
-    });
+    if (result.success) {
+      expect(result.data.age).toBe(PARSED_RESULT);
+    } else {
+      expect('should not called').toBe(result.error);
+    }
+  });
 
   const Top = () => {
     return (
@@ -94,16 +96,16 @@ test('zod parse value before submit', async () => {
         <AgeInputComponent controller={TestFormHook} />
         <button data-testid="submit-button" onClick={handleSubmitTester} />
       </div>
-    )
+    );
   };
 
   render(<Top />);
 
-  const ageInput: HTMLInputElement = screen.getByTestId('age-input') ;
+  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
   await userEvent.type(ageInput, INPUT_AGE);
 
   await waitFor(() => {
-    const ageInput: HTMLInputElement = screen.getByTestId('age-input') ;
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
     expect(ageInput.value).toBe(INPUT_AGE);
   });
 
@@ -117,4 +119,4 @@ test('zod parse value before submit', async () => {
       expect(s.errors.age).toBeNull();
     });
   });
-});
+});

package/src/index.ts

@@ -65,7 +65,11 @@ type FormControllerBehavior<StateBeforeValidation> = {
   /**
    * You can handle server side or other external error via this action.
    */
-  handleError: (
+  pushFormErrors: (
+    validator: (state: StateBeforeValidation) => Partial<FormErrors<StateBeforeValidation>>,
+  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+
+  reduceFormErrors: (
     reducer: (prev: FormErrors<StateBeforeValidation>) => FormErrors<StateBeforeValidation>,
   ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
 
@@ -150,7 +154,11 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
 
       return {...prev, isDirty: true, isValid: false, errors: newErrors};
     },
-    handleError: (reducer) => (prev) => {
+    pushFormErrors: (validator) => (prev) => {
+      const pushedErrors = validator(prev.value);
+      return {...prev, errors: {...prev.errors, ...pushedErrors}};
+    },
+    reduceFormErrors: (reducer) => (prev) => {
       return {...prev, errors: reducer(prev.errors)};
     },
     handleChange: (name, value) => (prev) => {
@@ -174,9 +182,9 @@ function createFormStore<StateBeforeValidation extends StateRestriction, Schema
 type ActionsCanBePublic<State extends StateRestriction> = {
   reset: VoidFunction;
   initializeForm: (initial: Partial<State>) => void;
+  pushFormErrors: (validator: (state: State) => Partial<FormErrors<State>>) => void;
   handleChange: HandleChangeAction<State>;
   handleBulkChange: (setter: (prev: State) => Partial<State>) => void;
-  handleError: (reducer: (prev: FormErrors<State>) => FormErrors<State>) => void;
 };
 
 /**