mayoiga 0.0.22 → 0.1.3

package/.eslintrc.js

@@ -0,0 +1,111 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint/eslint-plugin', "testing-library"],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    // Lintの時間があまりに長いようなら無効化も考える
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+
+    'plugin:import/errors',
+    'plugin:import/typescript',
+    'plugin:testing-library/react',
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 'next',
+    sourceType: 'module',
+    ecaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    curly: 'error',
+    eqeqeq: ['error', 'smart'],
+
+    'no-return-await': 'error',
+    'require-await': 'error',
+    'no-await-in-loop': 'error',
+
+    '@typescript-eslint/prefer-readonly': 'error',
+    // '@typescript-eslint/prefer-readonly-parameter-types': ["error", {ignoreInferredTypes: true}],
+    '@typescript-eslint/array-type': ['error', {default: 'generic', readonly: 'generic'}],
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      {
+        prefer: 'type-imports',
+      },
+    ],
+
+    'padding-line-between-statements': [
+      'error',
+      {blankLine: 'always', prev: 'multiline-const', next: 'multiline-const'},
+      {blankLine: 'always', prev: '*', next: 'function'},
+      {blankLine: 'always', prev: '*', next: 'class'},
+      {blankLine: 'always', prev: '*', next: 'export'},
+    ],
+
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        vars: 'all',
+        args: 'none',
+        ignoreRestSiblings: true,
+
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    // 要検討
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    // voidとのunionで微妙な挙動をするので一旦停止
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: false,
+      },
+    ],
+
+    'import/newline-after-import': 'error',
+    'import/named': 'off',
+    'import/no-named-default': 'error',
+    'import/no-default-export': 'off',
+    'import/default': 'off',
+    'import/no-useless-path-segments': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'internal', 'parent', ['index', 'sibling'], 'type'],
+        'newlines-between': 'always-and-inside-groups',
+        alphabetize: {
+          order: 'asc' /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
+          caseInsensitive: true /* ignore case. Options: [true, false] */,
+        },
+      },
+    ],
+
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.js', '.jsx', '.ts', '.tsx'],
+    },
+
+    'import/ignore': ['node_modules'],
+  },
+  "overrides": [
+    {
+      // 3) Now we enable eslint-plugin-testing-library rules or preset only for matching files!
+      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+      "extends": ["plugin:testing-library/react"]
+    },
+  ]
+};

package/.github/workflows/checker.yml

@@ -0,0 +1,42 @@
+name: Lint Check
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - uses: actions/checkout@v1
+    - name: Cache node_modules
+      uses: actions/cache@preview
+      with:
+        path: ~/.cache/yarn
+        key: ${{ runner.os }}-projectname-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+        restore-keys:
+          ${{ runner.os }}-projectname-
+
+    - name: Install node_modules
+      if: steps.cache.outputs.cache-hit != 'true'
+      run: |
+        npm install -g yarn
+        yarn install
+
+    - name: Lint
+      run: |
+        yarn check-all
+
+    - name: Test
+      run: |
+        yarn test

package/.gitignore

@@ -0,0 +1,217 @@
+
+# Created by https://www.toptal.com/developers/gitignore/api/macos,node,visualstudiocode,vim
+# Edit at https://www.toptal.com/developers/gitignore?templates=macos,node,visualstudiocode,vim
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### Node Patch ###
+# Serverless Webpack directories
+.webpack/
+
+# Optional stylelint cache
+
+# SvelteKit build / generate output
+.svelte-kit
+
+### Vim ###
+# Swap
+[._]*.s[a-v][a-z]
+!*.svg  # comment out if you don't need vector files
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+
+# Session
+Session.vim
+Sessionx.vim
+
+# Temporary
+.netrwhist
+*~
+# Auto-generated tag files
+tags
+# Persistent undo
+[._]*.un~
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# Support for Project snippet scope
+
+# End of https://www.toptal.com/developers/gitignore/api/macos,node,visualstudiocode,vim
+

package/.prettierrc

@@ -0,0 +1,5 @@
+printWidth: 140
+parser: typescript
+bracketSpacing: false
+trailingComma: all
+singleQuote: true

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/component.d.ts

@@ -0,0 +1 @@
+export {Slicer, Field} from "./dist/component";

package/component.js

@@ -0,0 +1 @@
+module.exports = require('./dist/component.js');

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,83 @@
+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();
+        });
+    });
+});
+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

@@ -0,0 +1,92 @@
+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.
+     */
+    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>>;
+    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> = {
+    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;
+};
+/**
+ * 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 {};