mayoiga 0.0.22 → 0.1.1

package/README.md

@@ -1,3 +1,5 @@
+[![Lint Check](https://github.com/hachibeeDI/mayoiga/actions/workflows/checker.yml/badge.svg)](https://github.com/hachibeeDI/mayoiga/actions/workflows/checker.yml)
+
 # Mayoiga
 
 The React Hook based form library. Of course it is TypeScript friendly.
@@ -13,8 +15,6 @@ The React Hook based form library. Of course it is TypeScript friendly.
 
 With less boilerplate code!!
 
-You can see more working demo [under the example directory](example/src/demo-app.tsx) .
-
 
 ## How to use
 
@@ -23,62 +23,38 @@ You can see more working demo [under the example directory](example/src/demo-app
 There are only two functions which you should know to use Mayoiga.
 
 - [useForm](https://hachibeedi.github.io/mayoiga/modules/_mayoiga_.html#useform)
-- [createFormScope](https://hachibeedi.github.io/mayoiga/modules/_mayoiga_.html#createformscope)
-
-And if you would like to bring it to production, you need to know how to about [InputProtocol](https://hachibeedi.github.io/mayoiga/modules/_inputprotocol_.html#inputprotocol).
-To know about that, `mayoiga/lib/forms` can be a good example.
 
-There is a short article which explains Mayoiga https://dev.to/hachibeedi/react-use-form-type-safe-react-hooks-based-form-utility-4k5h.
+- [createFormScope](https://hachibeedi.github.io/mayoiga/modules/_mayoiga_.html#createformscope)
 
 
 ### Minimum example:
 
 ```typeScript
 
-import * as React from 'react';
-import {FC} from 'react';
-
-import {useForm, createFormScope} from 'mayoiga';
-import {Input, NumberInput} from 'mayoiga/lib/forms';
+const TestFormHook = createFormHook({name:'', description: '', age: ''} as FormStateBeforeValidation, testSchema);
 
-const required = (target: string) => (target.length === 0 ? 'required' : undefined);
+const INPUT_AGE = '9';
+const PARSED_RESULT = Number(INPUT_AGE);
 
-const between = (min: number, max: number) => (target: number) => {
-  if (target < min) {
-    return `more than ${min}`;
+const handleSubmitTester = TestFormHook.handleSubmit((e) => (result) => {
+  if (result.success) {
+    expect(result.data.age).toBe(PARSED_RESULT);
+  } else {
+    expect('should not called').toBe(result.err);
   }
-  if (target > max) {
-    return `less than ${max}`;
-  }
-};
-
-const choice = function<T>(...candidates: Array<T>) {
-  return (target: T) => (candidates.includes(target) ? undefined : 'You should choose from the candidates.');
-};
+});
 
-const INITIAL_FORM_STATE = {
-  name: '',
-  age: 13,
-  seed: 'fish',
+const Top = () => {
+  return (
+    <div>
+      <AgeInputComponent formHook={TestFormHook} />
+      <button data-testid="submit-button" onClick={handleSubmitTester} />
+    </div>
+  )
 };
 
-const {context, scope} = createFormScope<typeof INITIAL_FORM_STATE>();
-
-const DemoForm = scope(props => {
-  const {Form, Field} = useForm(context);
-  return (
-    <Form onSubmit={value => console.log(value)}>
-      <Field name="name" component={Input} validations={[required]} />
-      <Field name="age" component={NumberInput} validations={[between(5, 20)]} />
-      <Field name="seed" component={Input} validations={[choice('fish', 'squid', 'octopus')]} />
-
-      <button disabled={!props.touched || Object.values(props.errors).some(e => !!e.length)}>submit</button>
-    </Form>
-  );
+act(() => {
+  render(<Top />);
 });
 
-export default function DemoApp() {
-  return <DemoForm initialState={INITIAL_FORM_STATE} onSubmit={value => alert(`submit ${JSON.stringify(value)}`)} />;
-}
-
 ```

package/dist/component.d.ts

@@ -0,0 +1,7 @@
+import type { SliceProps, FieldProps, StateRestriction, Controller } from './index';
+declare type ControlledComponentProps<State, 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 {};

package/dist/component.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export function Slicer(props) {
+    const { controller, ...restProps } = props;
+    const { Slicer: Delegate } = controller.components;
+    return React.createElement(Delegate, { ...restProps });
+}
+export function Field(props) {
+    const { controller, ...restProps } = props;
+    const { Field: Delegate } = controller.components;
+    return React.createElement(Delegate, { ...restProps });
+}

package/dist/component.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/component.test.js

@@ -0,0 +1,53 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { test, expect } from 'vitest';
+import * as zod from 'zod';
+import { Field, Slicer } from './component';
+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),
+    marked: zod.boolean(),
+});
+const createTestHook = () => createFormHook({ name: '', description: '', age: '', marked: false }, testSchema);
+// afterEach(cleanup);
+test('Field component works fine in basic usage.', async () => {
+    const TestFormHook = createTestHook();
+    const Top = () => {
+        return (React.createElement("div", null,
+            React.createElement(Field, { controller: TestFormHook.controller, name: "age" }, (tool) => React.createElement("input", { "data-testid": "age-input", ...tool }))));
+    };
+    render(React.createElement(Top, null));
+    const INPUT_AGE = '42';
+    // calling `userEvent` in here will cause race condition...
+    await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+    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).toBeNull();
+        });
+    });
+});
+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) }))));
+    };
+    render(React.createElement(Top, null));
+    const INPUT_AGE = '42';
+    // calling `userEvent` in here will cause race condition...
+    await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+    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).toBeNull();
+        });
+    });
+});

package/dist/index.d.ts

@@ -0,0 +1,88 @@
+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 = {
+    isDirty: boolean;
+    isValid: boolean;
+};
+declare type FormErrors<State extends StateRestriction> = {
+    [k in keyof State]: string | null;
+};
+export declare 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> = {
+    name: Name;
+    children: (tool: {
+        name: Name;
+        value: State[Name];
+        onChange(this: void, name: Name, value: State[Name]): void;
+        onChange(this: void, e: ChangeEvent<HTMLElement>): void;
+    }, value: State[Name], errorMessage: string | null) => ReactNode;
+};
+export declare type SliceProps<State extends StateRestriction, Selected extends ReadonlyArray<unknown>> = {
+    selector: (s: FullFormState<State>) => Selected;
+    children: (tool: {
+        handleChange: HandleChangeAction<State>;
+    }, ...value: Readonly<Selected>) => ReactNode;
+};
+declare type FormControllerBehavior<StateBeforeValidation> = {
+    /** For testing */
+    peek: (eyeball: (prev: FullFormState<StateBeforeValidation>) => void) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+    reset: () => () => FullFormState<StateBeforeValidation>;
+    /**
+     * Initialize form state without validation.
+     */
+    initializeForm: (initialVal: Partial<StateBeforeValidation>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
+    /**
+     * Handle issue that zod reported
+     */
+    handleIssues: (issues: ReadonlyArray<ZodIssue>) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<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>;
+    /**
+     */
+    handleChange: HandleChangeAction<StateBeforeValidation, (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>>;
+    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> = {
+    handleChange: HandleChangeAction<State>;
+    handleBulkChange: (setter: (prev: State) => Partial<State>) => void;
+};
+/**
+ * Restricted type interface of the form store
+ * TODO: more restriction
+ */
+export declare 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>;
+    components: {
+        Field: <Name extends keyof State>(props: FieldProps<State, Name>) => ReactElement<any, any> | null;
+        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>> = {
+    controller: Controller<State>;
+    handleSubmit: (handler: (e: BaseSyntheticEvent) => (val: {
+        success: true;
+        data: zodInfer<Schema>;
+        error: undefined;
+    } | {
+        success: false;
+        error: ReadonlyArray<ZodIssue>;
+    }) => void | Promise<void>) => (e: BaseSyntheticEvent) => void;
+    api: Subscriber<FullFormState<State>, FormControllerBehavior<State>>;
+} & Controller<State>;
+/**
+ * @typeParam InitialState should be shallow
+ */
+export declare function createFormHook<StateBeforeValidation, Schema extends ZodType<any, any, any>>(initialState: StateBeforeValidation, schema: Schema): FormHook<StateBeforeValidation, Schema>;
+export declare function useFormSlice<State extends StateRestriction, Sliced>(formController: Controller<State>, selector: (s: FullFormState<State>) => Sliced): readonly [Sliced, ActionsCanBePublic<State>];
+export {};

package/dist/index.js

@@ -0,0 +1,146 @@
+import { createStore } from 'nozuchi';
+import { createElement, Fragment, useEffect, useMemo } from 'react';
+import { isChangeEvent } from './utils';
+const initialFormState = Object.freeze({ isDirty: false, isValid: false });
+function createFormStore(initialState, schema) {
+    const initialErrors = Object.freeze(Object.keys(initialState).reduce((buf, k) => {
+        buf[k] = null;
+        return buf;
+    }, {}));
+    const fullInitialState = Object.freeze({
+        ...initialFormState,
+        value: { ...initialState },
+        errors: { ...initialErrors },
+    });
+    const withValidation = (prev, newValue) => {
+        const result = schema.safeParse(newValue);
+        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) {
+                return buf;
+            }
+            buf[shallowPath] = iss.message;
+            return buf;
+        }, {});
+        return { ...prev, isDirty: true, isValid: false, errors: newErrors, value: newValue };
+    };
+    return createStore(fullInitialState, {
+        peek: (eyeball) => (prev) => {
+            eyeball(prev);
+            return prev;
+        },
+        reset: () => () => fullInitialState,
+        initializeForm: (initialVal) => (prev) => ({
+            ...prev,
+            value: { ...prev.value, ...initialVal },
+            errors: { ...initialErrors },
+        }),
+        handleIssues: (issues) => (prev) => {
+            // FIXME: handle duplication
+            const newErrors = issues.reduce((buf, iss) => {
+                const shallowPath = iss.path[0];
+                if (shallowPath === undefined) {
+                    return buf;
+                }
+                buf[shallowPath] = iss.message;
+                return buf;
+            }, {});
+            return { ...prev, isDirty: true, isValid: false, errors: newErrors };
+        },
+        handleError: (reducer) => (prev) => {
+            return { ...prev, errors: reducer(prev.errors) };
+        },
+        handleChange: (name, value) => (prev) => {
+            if (name in prev.value === false) {
+                return prev;
+            }
+            const newValue = { ...prev.value, [name]: value };
+            return withValidation(prev, newValue);
+        },
+        reduceFormState: (reducer) => (prev) => {
+            const reducedState = reducer(prev.value);
+            return withValidation(prev, reducedState);
+        },
+        handleBulkChange: (setter) => (prev) => {
+            const mergedNewState = { ...prev.value, ...setter(prev.value) };
+            return withValidation(prev, mergedNewState);
+        },
+    });
+}
+/**
+ * @typeParam InitialState should be shallow
+ */
+export function createFormHook(initialState, schema) {
+    const store = createFormStore(initialState, schema);
+    const formHook = {
+        useInitialize: (initialValue) => {
+            useEffect(() => {
+                store.actions.initializeForm(initialValue);
+            }, []);
+        },
+        useSelector: store.useSelector,
+        handleSubmit: (handler) => {
+            return (e) => {
+                const eventHandled = handler(e);
+                const value = store.getState().value;
+                return schema.safeParseAsync(value).then((result) => {
+                    // FIXME: hook formを捨ててzodのバージョンをあげればこの辺に型をつけられる
+                    if (result.success) {
+                        // 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);
+                });
+            };
+        },
+        components: {
+            Slicer(props) {
+                const { selector, children } = props;
+                const value = formHook.useSelector(selector);
+                return useMemo(() => {
+                    const renderContent = children({ handleChange: formHook.actions.handleChange }, ...value);
+                    return createElement(Fragment, {}, renderContent);
+                }, value);
+            },
+            Field(props) {
+                const { name, children } = props;
+                const [value, errMsg] = store.useSelector((s) => [s.value[name], s.errors[name]]);
+                return useMemo(() => {
+                    const renderContent = children({
+                        name,
+                        value,
+                        onChange: (name_or_event, value_or_none) => {
+                            if (typeof name_or_event === 'string') {
+                                // assumes name is valid if it's string
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                                return store.actions.handleChange(name_or_event, value_or_none);
+                            }
+                            if (isChangeEvent(name_or_event)) {
+                                const target = name_or_event.currentTarget || name_or_event.target;
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+                                return store.actions.handleChange(target.name, target.value);
+                            }
+                            throw new Error('`handleChange` handles unexpected formed object.');
+                        },
+                    }, value, errMsg);
+                    return createElement(Fragment, {}, renderContent);
+                }, [value, errMsg]);
+            },
+        },
+        actions: store.actions,
+    };
+    return {
+        controller: formHook,
+        api: store,
+        ...formHook,
+    };
+}
+export function useFormSlice(formController, selector) {
+    const sliced = formController.useSelector((s) => selector(s));
+    return [sliced, formController.actions];
+}

package/dist/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.test.js

@@ -0,0 +1,74 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { test, expect } from 'vitest';
+import * as zod from 'zod';
+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),
+    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]);
+    return (React.createElement("div", null,
+        React.createElement("input", { "data-testid": "age-input", value: age, name: "age", onChange: (e) => {
+                handleChange('age', e.currentTarget.value);
+            } }),
+        React.createElement("span", { "data-testid": "age-error" }, errorMessage)));
+};
+// afterEach(cleanup);
+test('useSelector can select the fields', async () => {
+    const TestFormHook = createTestHook();
+    const Top = () => {
+        return (React.createElement("div", null,
+            React.createElement(AgeInputComponent, { controller: TestFormHook.controller })));
+    };
+    render(React.createElement(Top, null));
+    const INPUT_AGE = '4';
+    // fireEvent.change(screen.getByTestId('age-input') , {target: {value: INPUT_AGE}})
+    // calling `userEvent` in here will cause race condition...
+    await userEvent.type(screen.getByTestId('age-input'), INPUT_AGE);
+    // TestFormHook.actions.handleBulkChange(prev => ({...prev, name: 'test', description: 'desc'}));
+    await waitFor(() => {
+        const ageInput = screen.getByTestId('age-input');
+        expect(ageInput.value).toBe(INPUT_AGE);
+    });
+});
+test('zod parse value before submit', async () => {
+    const TestFormHook = createTestHook();
+    const INPUT_AGE = '9';
+    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);
+        }
+    });
+    const Top = () => {
+        return (React.createElement("div", null,
+            React.createElement(AgeInputComponent, { controller: TestFormHook }),
+            React.createElement("button", { "data-testid": "submit-button", onClick: handleSubmitTester })));
+    };
+    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).toBeNull();
+        });
+    });
+});

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import type { ChangeEvent } from 'react';
+export declare function isChangeEvent<T>(x: any): x is ChangeEvent<T>;

package/dist/utils.js

@@ -0,0 +1,6 @@
+export function isChangeEvent(x) {
+    if (typeof x !== 'object') {
+        return false;
+    }
+    return 'target' in x;
+}

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "mayoiga",
-  "version": "0.0.22",
-  "description": "Form library for React",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "version": "0.1.1",
+  "description": "Type safe hook based form library for React",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "lib"
+    "dist"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "type-check": "tsc example/src/demo-app.tsx --noEmit --jsx preserve",
-    "clean": "rm -rf lib/",
-    "docs": "typedoc --name Mayoiga --mode modules --excludePrivate --out docs/",
-    "compile": "tsc",
-    "prepublish": "npm run clean && npm run compile"
+    "clean": "rm -rf dist",
+    "test": "vitest run",
+    "prebuild": "npm run clean",
+    "build": "tsc",
+    "check:style": "prettier --check 'src/**/*.{js,ts}'",
+    "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",
+    "prepublish": "npm run check-all && npm run build"
   },
   "repository": {
     "type": "git",
@@ -26,45 +29,36 @@
     "validation",
     "state"
   ],
-  "author": "Ogura Daiki",
+  "author": "OGURA Daiki",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/hachibeeDI/mayoiga/issues"
   },
   "homepage": "https://github.com/hachibeeDI/mayoiga#readme",
-  "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
-    "@types/node": "^11.11.4",
-    "@types/react": "^16.8.19",
-    "@types/react-dom": "^16.8.2",
-    "babel-loader": "^8.0.6",
-    "prettier": "^1.18.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "tslint": "^5.14.0",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-immutable": "^6.0.0",
-    "tslint-plugin-prettier": "^2.0.1",
-    "tslint-react": "^4.0.0",
-    "typedoc": "^0.14.2",
-    "typescript": "^3.5.1",
-    "typescript-eslint-parser": "^22.0.0",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.3",
-    "webpack-dev-server": "^3.7.1"
-  },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "zod": "^3.14.4"
   },
-
-  "resolutions": {
-    "@types/react": "^16.8.19"
+  "dependencies": {
+    "nozuchi": "^0.0.3"
   },
-  "dependencies": {}
+  "devDependencies": {
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^14.1.1",
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.1",
+    "@types/use-sync-external-store": "^0.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
+    "eslint": "^8.13.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-testing-library": "^5.3.1",
+    "jsdom": "^19.0.0",
+    "prettier": "^2.6.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "typescript": "^4.6.3",
+    "use-sync-external-store": "^1.0.0",
+    "vitest": "^0.9.3",
+    "zod": "^3.14.4"
+  }
 }

package/lib/actions.d.ts

@@ -1,28 +0,0 @@
-export declare type FSA<S> = {
-    type: 'SWAP';
-    payload: S;
-} | {
-    type: 'SET_STATE';
-    payload: Partial<S>;
-} | {
-    type: 'CHANGE';
-    payload: {
-        name: keyof S;
-        value: S[keyof S];
-    };
-} | {
-    type: 'SUBMIT';
-    payload: {};
-} | {
-    type: 'ERROR';
-    payload: {
-        name: keyof S;
-        value: ReadonlyArray<string>;
-    };
-};
-export declare type FormReducerActionTypes = FSA<any>['type'];
-export declare const swap: <S>(newInitialState: S) => FSA<S>;
-export declare const setNewState: <S>(newState: Partial<S>) => FSA<S>;
-export declare const changeField: <S>(name: keyof S, value: S[keyof S]) => FSA<S>;
-export declare const submitValue: <S>(state: S) => FSA<S>;
-export declare const sendErrors: <S>(name: keyof S, errors: readonly string[]) => FSA<S>;

package/lib/actions.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.swap = (newInitialState) => ({
-    type: 'SWAP',
-    payload: newInitialState,
-});
-exports.setNewState = (newState) => ({
-    type: 'SET_STATE',
-    payload: newState,
-});
-exports.changeField = (name, value) => ({
-    type: 'CHANGE',
-    payload: {
-        name,
-        value,
-    },
-});
-exports.submitValue = (state) => ({
-    type: 'SUBMIT',
-    payload: {},
-});
-exports.sendErrors = (name, errors) => ({
-    type: 'ERROR',
-    payload: {
-        name,
-        value: errors,
-    },
-});
-//# sourceMappingURL=actions.js.map

package/lib/actions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":";;AA6Ba,QAAA,IAAI,GAAG,CAAI,eAAkB,EAAU,EAAE,CAAC,CAAC;IACtD,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,eAAe;CACzB,CAAC,CAAC;AAEU,QAAA,WAAW,GAAG,CAAI,QAAoB,EAAU,EAAE,CAAC,CAAC;IAC/D,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,QAAQ;CAClB,CAAC,CAAC;AAEU,QAAA,WAAW,GAAG,CAAI,IAAa,EAAE,KAAiB,EAAU,EAAE,CAAC,CAAC;IAC3E,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE;QACP,IAAI;QACJ,KAAK;KACN;CACF,CAAC,CAAC;AAEU,QAAA,WAAW,GAAG,CAAI,KAAQ,EAAU,EAAE,CAAC,CAAC;IACnD,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,EAAE;CACZ,CAAC,CAAC;AAEU,QAAA,UAAU,GAAG,CAAI,IAAa,EAAE,MAA6B,EAAU,EAAE,CAAC,CAAC;IACtF,IAAI,EAAE,OAAO;IACb,OAAO,EAAE;QACP,IAAI;QACJ,KAAK,EAAE,MAAM;KACd;CACF,CAAC,CAAC"}

package/lib/forms.d.ts

@@ -1,21 +0,0 @@
-/**
- * This is just a sample implementation.
- * You can make to fit any component library that you are using.
- *
- */
-/// <reference types="react" />
-import { InputProtocol } from './inputProtocol';
-export declare function MappedInputFactory(mapInputToState?: (val: string) => any /** FIXME: fmmmmmm */): <S, Name extends keyof S>(props: InputProtocol<S, Name, undefined>) => JSX.Element;
-export declare const Input: <S, Name extends keyof S>(props: InputProtocol<S, Name, undefined>) => JSX.Element;
-export declare const NumberInput: <S, Name extends keyof S>(props: InputProtocol<S, Name, undefined>) => JSX.Element;
-export declare function MappedRadioFactory(candidates: ReadonlyArray<{
-    label: string;
-    value: any;
-}>, 
-/** FIXME: fmmmmmm, I think I can write infer which returns `never` if type is invalid but... */
-mapInputToState?: (val: string) => any): <S, Name extends keyof S>(props: InputProtocol<S, Name, undefined>) => JSX.Element;
-export declare function MappedSelectFactory(options: ReadonlyArray<{
-    label: string;
-    value: any;
-    disabled?: boolean;
-}>, mapInputToState?: (val: string) => any): <S, Name extends keyof S>(props: InputProtocol<S, Name, undefined>) => JSX.Element;

package/lib/forms.js

@@ -1,82 +0,0 @@
-"use strict";
-/**
- * This is just a sample implementation.
- * You can make to fit any component library that you are using.
- *
- */
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
-// TODO: mapStateToValue (val: S[Name]) => string
-function MappedInputFactory(mapInputToState = val => val /** FIXME: fmmmmmm */) {
-    return (props) => {
-        const { name, value, onChange, errors, touched, delegatedProps = {} } = props, restProps = __rest(props, ["name", "value", "onChange", "errors", "touched", "delegatedProps"]);
-        const handleChange = react_1.useCallback((e) => {
-            const value = e.currentTarget.value;
-            onChange(name, mapInputToState(value));
-        }, [onChange]);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("input", Object.assign({}, restProps, delegatedProps, { value: value
-                    ? value /** FIXME: TS 3.5.1 changes defualt infer is unknown */
-                        .toString()
-                    : '', name: name, onChange: handleChange })),
-            touched && errors.length !== 0 && React.createElement("div", { style: { color: 'red' } }, errors[0])));
-    };
-}
-exports.MappedInputFactory = MappedInputFactory;
-exports.Input = MappedInputFactory();
-exports.NumberInput = MappedInputFactory(val => parseInt(val, 10) || 0);
-function MappedRadioFactory(candidates, 
-/** FIXME: fmmmmmm, I think I can write infer which returns `never` if type is invalid but... */
-mapInputToState = val => val) {
-    return (props) => {
-        const { name, onChange, errors, touched, delegatedProps = {} } = props, restProps = __rest(props, ["name", "onChange", "errors", "touched", "delegatedProps"]);
-        const handleChange = react_1.useCallback((e) => {
-            const value = e.currentTarget.value;
-            onChange(name, mapInputToState(value));
-        }, [onChange]);
-        return (React.createElement(React.Fragment, null,
-            candidates.map(({ label, value }) => (React.createElement("label", { key: value },
-                React.createElement("input", Object.assign({}, restProps, delegatedProps, { type: "radio", name: name, value: value, checked: value === props.value, onChange: handleChange })),
-                label))),
-            touched && errors.length !== 0 && React.createElement("div", { style: { color: 'red' } }, errors[0])));
-    };
-}
-exports.MappedRadioFactory = MappedRadioFactory;
-function MappedSelectFactory(options, mapInputToState = val => val) {
-    return (props) => {
-        const { value, name, onChange, errors, touched, delegatedProps = {} } = props, restProps = __rest(props, ["value", "name", "onChange", "errors", "touched", "delegatedProps"]);
-        const handleChange = react_1.useCallback((e) => {
-            const value = e.currentTarget.value;
-            onChange(name, mapInputToState(value));
-        }, [onChange]);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("select", Object.assign({}, restProps, delegatedProps, { name: name, value: value
-                    ? value /** TS 3.5.1 changes defualt infer is unknown */
-                        .toString()
-                    : '', onChange: handleChange }),
-                React.createElement("option", { value: "", disabled: true }, "Please select"),
-                options.map(({ label, value, disabled }) => (React.createElement("option", { key: value, value: value, disabled: disabled }, label)))),
-            touched && errors.length !== 0 && React.createElement("div", { style: { color: 'red' } }, errors[0])));
-    };
-}
-exports.MappedSelectFactory = MappedSelectFactory;
-//# sourceMappingURL=forms.js.map

package/lib/forms.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"forms.js","sourceRoot":"","sources":["../src/forms.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -1,3 +0,0 @@
-import { useForm, useFormState, createFormScope } from './mayoiga';
-import { InputProtocol } from './inputProtocol';
-export { useForm, useFormState, createFormScope, InputProtocol };

package/lib/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const mayoiga_1 = require("./mayoiga");
-exports.useForm = mayoiga_1.useForm;
-exports.useFormState = mayoiga_1.useFormState;
-exports.createFormScope = mayoiga_1.createFormScope;
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;AAAA,uCAAiE;AAGzD,kBAHA,iBAAO,CAGA;AAAE,uBAHA,sBAAY,CAGA;AAAE,0BAHA,yBAAe,CAGA"}

package/lib/inputProtocol.d.ts

@@ -1,17 +0,0 @@
-import { InputHTMLAttributes } from 'react';
-declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
-declare type MayoigaConnectedInputProtocol<S, Name extends keyof S, DelegatedProps> = {
-    name: Name;
-    value: S[Name];
-    /** Errors which generated by mayoiga validation */
-    errors: ReadonlyArray<string>;
-    /** Validation is running even if it is first renderd. `touched` can be useful if you would like to suppress error indication until user touched the input. */
-    touched: boolean;
-    onChange(name: Name, value: S[Name]): void;
-    /**
-     * Props which passed via `componentProps` of {@link FieldProps}.
-     */
-    delegatedProps: DelegatedProps;
-};
-export declare type InputProtocol<S, Name extends keyof S, DelegatedProps> = MayoigaConnectedInputProtocol<S, Name, DelegatedProps> & Omit<InputHTMLAttributes<any>, 'name' | 'onChange' | 'value'>;
-export {};

package/lib/inputProtocol.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// TODO: How's the below?
-// type Primitive = 'string' | 'number' | 'boolean';
-// type FieldType<FT> = FT extends string
-//   ? 'string'
-//   : FT extends number
-//   ? 'number'
-//   : FT extends boolean
-//   ? 'boolean'
-//   : ((domVal: string) => FT);
-// const PRIMITIVE_CONVERT_DEF = {
-//   string: (val: string) => val,
-//   number: (val: string) => parseInt(val, 10) || 0,
-//   boolean: (val: string) => val === 'true',
-// };
-// function fieldConverter<FT>(dataType: FieldType<FT>, value: string): FT {
-//   const def = (PRIMITIVE_CONVERT_DEF as any)[dataType as any];
-//   if (def) {
-//     return def(value);
-//   }
-//   return (dataType as any)(value);
-// }
-//# sourceMappingURL=inputProtocol.js.map

package/lib/inputProtocol.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inputProtocol.js","sourceRoot":"","sources":["../src/inputProtocol.tsx"],"names":[],"mappings":";;AAsBA,yBAAyB;AACzB,oDAAoD;AACpD,yCAAyC;AACzC,eAAe;AACf,wBAAwB;AACxB,eAAe;AACf,yBAAyB;AACzB,gBAAgB;AAChB,gCAAgC;AAChC,kCAAkC;AAClC,kCAAkC;AAClC,qDAAqD;AACrD,8CAA8C;AAC9C,KAAK;AAEL,4EAA4E;AAC5E,iEAAiE;AACjE,eAAe;AACf,yBAAyB;AACzB,MAAM;AACN,qCAAqC;AACrC,IAAI"}

package/lib/mayoiga.d.ts

@@ -1,110 +0,0 @@
-import * as React from 'react';
-import { Dispatch, Context, ReactNode, FC } from 'react';
-import { FSA } from './actions';
-import { Store } from './reducer';
-import { InputProtocol } from './inputProtocol';
-declare type MayoigaContextValue<S> = {
-    state: Store<S>;
-    dispatch: Dispatch<FSA<S>>;
-};
-/**
- * Validator definition to pass to the each form fields.
- *
- * @param target The value which handled by the input field.
- * @param record The form state itselfs. It is useful if you had to write validation depends on other fields.
- * @returns It should return string if there is something wrong.
- */
-declare type Validator<S, Name extends keyof S> = (target: S[Name], record: S) => undefined | string;
-declare type FormProps<S> = {
-    className?: string;
-    onSubmit?(value: S): void;
-    children: ReactNode;
-};
-declare type FieldProps<S, Name extends keyof S, ComponentProps> = {
-    /** One on the name of field. Have to be `keyof State`. */
-    name: Name;
-    /** You might want to handle onChange event in case. */
-    onChange?(name: Name, value: S[Name]): void;
-    validations?: ReadonlyArray<Validator<S, Name>>;
-    /**
-     * Props to delegate to the input component.
-     * @example
-     * ```
-     *
-     * componentProps={{disabled: props.formState.age >= 20}}
-     * component={AlcoholCheckbox}
-     * ```
-     */
-    componentProps?: ComponentProps;
-    /** Component which can handle the field of the form state. It should implement {@link InputProtocol}. */
-    component: FC<InputProtocol<S, Name, ComponentProps>>;
-};
-declare type MayoigaProps<S> = {
-    initialState: S;
-    onSubmit(hasErrors: boolean, value: S, formInfo: {
-        errors: Store<S>['errors'];
-        touched: boolean;
-    }): void;
-};
-/** @obsolete */
-declare type ScopedComponentProps<S> = {
-    touched: boolean;
-    errors: Store<S>['errors'];
-    formState: S;
-};
-/**
- * A function to create scope which allows to use `useForm` function to manage form value.
- *
- * @example
- * ```
- *
- * type FormState = {name: '', age: 0};
- * const {context, scope} = createFormScope<FormState>();
- *
- * const TheForm = scope(props => {
- *   const {Form, Field} = useForm(context);
- *   // ...
- * ```
- *
- */
-export declare function createFormScope<S>(): {
-    context: React.Context<MayoigaContextValue<S>>;
-    scope: <OwnProps = {}>(ConnectedComponent: React.FunctionComponent<OwnProps & ScopedComponentProps<S>>) => (props: OwnProps & MayoigaProps<S>) => JSX.Element;
-};
-/**
- * The Hook to summon type safe React form component.
- * To know the props that Field can accept {@link FieldProps}.
- *
- * @example
- * ```
- *
- * const TheForm = scope(props => {
- *   const {Form, Field} = useForm(context);
- *   return (
- *     <Form>
- *       <Field name="name" component={props => <input value={props.value.toString()} />} validations={[required]} />
- *       <Field name="fieldNameHaven'tDefined" <= you will see compile error if you were specified the name haven't declared in the context type for initialState.
- *     </Form>
- *   );
- * ```
- *
- * You should be aware, `component` props for <Field /> is going to be cached at the first render. So it should be same pure function.
- */
-export declare function useForm<S>(formScope: Context<MayoigaContextValue<S>>): {
-    Form: React.MemoExoticComponent<(props: FormProps<S>) => JSX.Element>;
-    Field: <Name extends Extract<keyof S, string>, ComponentProps = undefined>(props: FieldProps<S, Name, ComponentProps>) => JSX.Element;
-    useFormState(): [Store<S>, (newState: Partial<S>) => void];
-};
-/**
- * You can get current form state and also change it:
- *
- * ```
- * const [{ errors, formData }, setFormState] = useFormState(context);
- * ...
- *   onChange={(name, value) => {
- *      if (value) setFormState({otherFieldValue: ''});
- *   }}
- * ```
- */
-export declare function useFormState<S>(formScope: Context<MayoigaContextValue<S>>): [Store<S>, (newState: Partial<S>) => void];
-export {};

package/lib/mayoiga.js

@@ -1,131 +0,0 @@
-"use strict";
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const actions_1 = require("./actions");
-const reducer_1 = require("./reducer");
-const EMPTY_ERRORS = [];
-// TODO: need `mapChanged(value: S): S;` ?
-/**
- * A function to create scope which allows to use `useForm` function to manage form value.
- *
- * @example
- * ```
- *
- * type FormState = {name: '', age: 0};
- * const {context, scope} = createFormScope<FormState>();
- *
- * const TheForm = scope(props => {
- *   const {Form, Field} = useForm(context);
- *   // ...
- * ```
- *
- */
-function createFormScope() {
-    const Ctx = react_1.createContext(null);
-    return {
-        context: Ctx,
-        scope: function (ConnectedComponent) {
-            return (props) => {
-                const { initialState, onSubmit } = props;
-                const [state, dispatch] = reducer_1.useFormReducer(initialState, onSubmit);
-                // TODO: I assumed useReducer is re-render if initialState was changed but doesn't. Need investigation though, I'll address by the useEffect for the time being.
-                react_1.useEffect(() => dispatch(actions_1.swap(initialState)), [initialState]);
-                const touchedAll = Object.values(state.touched).every(v => v);
-                return (React.createElement(Ctx.Provider, { value: { state, dispatch } },
-                    React.createElement(ConnectedComponent, Object.assign({}, props, { formState: state.formData, touched: touchedAll, errors: state.errors }))));
-            };
-        },
-    };
-}
-exports.createFormScope = createFormScope;
-/**
- * The Hook to summon type safe React form component.
- * To know the props that Field can accept {@link FieldProps}.
- *
- * @example
- * ```
- *
- * const TheForm = scope(props => {
- *   const {Form, Field} = useForm(context);
- *   return (
- *     <Form>
- *       <Field name="name" component={props => <input value={props.value.toString()} />} validations={[required]} />
- *       <Field name="fieldNameHaven'tDefined" <= you will see compile error if you were specified the name haven't declared in the context type for initialState.
- *     </Form>
- *   );
- * ```
- *
- * You should be aware, `component` props for <Field /> is going to be cached at the first render. So it should be same pure function.
- */
-function useForm(formScope) {
-    return react_1.useMemo(() => ({
-        Form: react_1.memo((props) => {
-            const { state, dispatch } = react_1.useContext(formScope);
-            const { className, onSubmit } = props;
-            return (React.createElement("form", { className: className, onSubmit: e => {
-                    e.preventDefault();
-                    if (onSubmit) {
-                        onSubmit(state.formData);
-                    }
-                    dispatch(actions_1.submitValue(state.formData));
-                } }, props.children));
-        }),
-        Field: (props) => {
-            const { state, dispatch } = react_1.useContext(formScope);
-            const { component, name, validations, componentProps, onChange } = props;
-            const validate = (target) => {
-                if (validations !== undefined) {
-                    const errors = validations.map(v => v(target, state.formData)).filter((result) => !!result);
-                    dispatch(actions_1.sendErrors(name, errors.length === 0 ? [] : errors));
-                }
-            };
-            const handleChange = react_1.useCallback((name, value) => {
-                dispatch(actions_1.changeField(name, value));
-                if (onChange) {
-                    onChange(name, value);
-                }
-                validate(value);
-            }, [name, state, componentProps]);
-            const value = state.formData[name];
-            const errors = state.errors[name];
-            const touched = state.touched[name];
-            react_1.useEffect(() => {
-                // I'm not exactly sure why but we need it to accomplish dispatch action on mounted. :(
-                window.requestAnimationFrame(() => validate(value));
-            }, [state.formData]);
-            // cache component for performance
-            const Component = react_1.useMemo(() => component, [name]);
-            return (React.createElement(Component, { name: name, value: value /** FIXME: */, onChange: handleChange, errors: errors, touched: touched, delegatedProps: componentProps }));
-        },
-        useFormState() {
-            const { state, dispatch } = react_1.useContext(formScope);
-            return [state, (newState) => dispatch(actions_1.setNewState(newState))];
-        },
-    }), [formScope]);
-}
-exports.useForm = useForm;
-/**
- * You can get current form state and also change it:
- *
- * ```
- * const [{ errors, formData }, setFormState] = useFormState(context);
- * ...
- *   onChange={(name, value) => {
- *      if (value) setFormState({otherFieldValue: ''});
- *   }}
- * ```
- */
-function useFormState(formScope) {
-    const { state, dispatch } = react_1.useContext(formScope);
-    return [state, (newState) => dispatch(actions_1.setNewState(newState))];
-}
-exports.useFormState = useFormState;
-//# sourceMappingURL=mayoiga.js.map

package/lib/mayoiga.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mayoiga.js","sourceRoot":"","sources":["../src/mayoiga.tsx"],"names":[],"mappings":"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"}

package/lib/reducer.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { FSA } from './actions';
-declare type Errors<StateKeys extends string> = {
-    [K in StateKeys]: ReadonlyArray<string>;
-};
-declare type Touched<StateKeys extends string> = {
-    [K in StateKeys]: boolean;
-};
-export declare type Store<S extends {
-    [key: string]: any;
-}> = {
-    errors: Errors<Extract<keyof S, string>>;
-    formData: S;
-    touched: Touched<Extract<keyof S, string>>;
-};
-export declare const useFormReducer: <S>(initialState: S, onSubmit: (hasErrors: boolean, value: S, formInfo: {
-    errors: Errors<Extract<keyof S, string>>;
-    touched: boolean;
-}) => void) => [Store<S>, import("react").Dispatch<FSA<S>>];
-export {};

package/lib/reducer.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const createFormInitialState = (initialState) => {
-    const stateKeys = Object.keys(initialState);
-    return {
-        formData: initialState,
-        errors: stateKeys.reduce((buf, k) => {
-            // NOTE: because typedoc is using old version of TypeScript.
-            buf[k] = [];
-            return buf;
-        }, {}),
-        touched: stateKeys.reduce((buf, k) => {
-            // NOTE: same as above. Hey! should I make the code dirty because of document automation???
-            buf[k] = false;
-            return buf;
-        }, {}),
-    };
-};
-exports.useFormReducer = (initialState, onSubmit) => react_1.useReducer((state, action) => {
-    // TODO: logging functionality
-    // console.log(action);
-    switch (action.type) {
-        case 'SWAP': {
-            return createFormInitialState(action.payload);
-        }
-        case 'SET_STATE': {
-            return Object.assign({}, state, { formData: Object.assign({}, state.formData, action.payload) });
-        }
-        case 'CHANGE': {
-            const { name, value } = action.payload;
-            return Object.assign({}, state, { formData: Object.assign({}, state.formData, { [name]: value }), touched: Object.assign({}, state.touched, { [name]: true }) });
-        }
-        case 'SUBMIT': {
-            // FIXME: :thinking_face:
-            const haveTouchedAll = Object.values(state.touched).every(v => v);
-            const hasAnyError = Object.values(state.errors).some(errs => errs.length !== 0);
-            // I should repent my sin. I called side effect in reducer...
-            onSubmit(hasAnyError, state.formData, {
-                errors: state.errors,
-                touched: haveTouchedAll,
-            });
-            return state;
-        }
-        case 'ERROR': {
-            const { name, value } = action.payload;
-            return Object.assign({}, state, { errors: Object.assign({}, state.errors, { [name]: value }) });
-        }
-        default:
-            return state;
-    }
-}, initialState, createFormInitialState);
-//# sourceMappingURL=reducer.js.map

package/lib/reducer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"reducer.js","sourceRoot":"","sources":["../src/reducer.ts"],"names":[],"mappings":";;AAAA,iCAAiC;AAejC,MAAM,sBAAsB,GAAG,CAAsB,YAAe,EAAE,EAAE;IACtE,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5C,OAAO;QACL,QAAQ,EAAE,YAAY;QACtB,MAAM,EAAE,SAAS,CAAC,MAAM,CACtB,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACT,4DAA4D;YAC3D,GAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;YACrB,OAAO,GAAG,CAAC;QACb,CAAC,EACD,EAAwB,CACzB;QACD,OAAO,EAAE,SAAS,CAAC,MAAM,CACvB,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE;YACT,2FAA2F;YAC1F,GAAW,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACxB,OAAO,GAAG,CAAC;QACb,CAAC,EACD,EAAyB,CAC1B;KACF,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,cAAc,GAAG,CAC5B,YAAe,EACf,QAA0G,EAC1G,EAAE,CACF,kBAAU,CACR,CAAC,KAAe,EAAE,MAAc,EAAE,EAAE;IAClC,8BAA8B;IAC9B,uBAAuB;IACvB,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,sBAAsB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SAC/C;QACD,KAAK,WAAW,CAAC,CAAC;YAChB,yBACK,KAAK,IACR,QAAQ,oBACH,KAAK,CAAC,QAAQ,EACd,MAAM,CAAC,OAAO,KAEnB;SACH;QACD,KAAK,QAAQ,CAAC,CAAC;YACb,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,MAAM,CAAC,OAAO,CAAC;YACrC,yBACK,KAAK,IACR,QAAQ,oBACH,KAAK,CAAC,QAAQ,IACjB,CAAC,IAAI,CAAC,EAAE,KAAK,KAEf,OAAO,oBACF,KAAK,CAAC,OAAO,IAChB,CAAC,IAAI,CAAC,EAAE,IAAI,OAEd;SACH;QACD,KAAK,QAAQ,CAAC,CAAC;YACb,yBAAyB;YACzB,MAAM,cAAc,GAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAA4B,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YAC9F,MAAM,WAAW,GAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC;YAC3G,6DAA6D;YAC7D,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,EAAE;gBACpC,MAAM,EAAE,KAAK,CAAC,MAAM;gBACpB,OAAO,EAAE,cAAc;aACxB,CAAC,CAAC;YACH,OAAO,KAAK,CAAC;SACd;QACD,KAAK,OAAO,CAAC,CAAC;YACZ,MAAM,EAAC,IAAI,EAAE,KAAK,EAAC,GAAG,MAAM,CAAC,OAAO,CAAC;YACrC,yBACK,KAAK,IACR,MAAM,oBACD,KAAK,CAAC,MAAM,IACf,CAAC,IAAI,CAAC,EAAE,KAAK,OAEf;SACH;QACD;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,EACD,YAAY,EACZ,sBAAsB,CACvB,CAAC"}