mayoiga 0.0.22 → 0.1.3

package/package.json

@@ -1,19 +1,26 @@
 {
   "name": "mayoiga",
-  "version": "0.0.22",
-  "description": "Form library for React",
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
+  "version": "0.1.3",
+  "description": "Type safe hook based form library for React",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
-    "lib"
+    "dist",
+    "/component.js",
+    "/component.d.ts",
+    "!*.test.js"
   ],
   "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:type": "tsc --noEmit",
+    "check:style": "prettier --check 'src/**/*.{js,ts,jsx,tsx}'",
+    "check:lint": "eslint 'src/**/*.{ts,tsx}'",
+    "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": {
     "type": "git",
@@ -26,45 +33,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/setup/vite-global-setup.js

@@ -0,0 +1 @@
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;

package/src/component.test.tsx

@@ -0,0 +1,146 @@
+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';
+
+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)),
+  marked: zod.boolean(),
+});
+
+// every fields are optional for test
+type FormStateBeforeValidation = {
+  name: string;
+  description: string;
+  age: string;
+  marked: boolean;
+};
+
+const createTestHook = () => createFormHook({name: '', description: '', age: '', marked: false} as FormStateBeforeValidation, testSchema);
+
+// afterEach(cleanup);
+
+test('Field component works fine in basic usage.', async () => {
+  const TestFormHook = createTestHook();
+
+  const Top = () => {
+    return (
+      <div>
+        <Field controller={TestFormHook.controller} name="age">
+          {(tool) => <input data-testid="age-input" {...tool} />}
+        </Field>
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  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: 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).toBeNull();
+    });
+  });
+});
+
+test('Slice component works fine in basic usage.', async () => {
+  const TestFormHook = createTestHook();
+
+  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>
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  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: 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).toBeNull();
+    });
+  });
+});
+
+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

@@ -0,0 +1,23 @@
+import React from 'react';
+
+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>>,
+) {
+  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>>,
+) {
+  const {controller, ...restProps} = props;
+  const {Field: Delegate} = controller.components;
+  return <Delegate {...restProps} />;
+}

package/src/index.test.tsx

@@ -0,0 +1,122 @@
+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';
+
+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)),
+  marked: zod.boolean(),
+});
+
+// every fields are optional for test
+type FormStateBeforeValidation = {
+  name: string;
+  description: string;
+  age: string;
+  marked: boolean;
+};
+
+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);
+  return (
+    <div>
+      <input
+        data-testid="age-input"
+        value={age}
+        name="age"
+        onChange={(e) => {
+          handleChange('age' as const, e.currentTarget.value);
+        }}
+      />
+      <span data-testid="age-error">{errorMessage}</span>
+    </div>
+  );
+};
+
+// afterEach(cleanup);
+
+test('useSelector can select the fields', async () => {
+  const TestFormHook = createTestHook();
+
+  const Top = () => {
+    return (
+      <div>
+        <AgeInputComponent controller={TestFormHook.controller} />
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  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: HTMLInputElement = 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 (
+      <div>
+        <AgeInputComponent controller={TestFormHook} />
+        <button data-testid="submit-button" onClick={handleSubmitTester} />
+      </div>
+    );
+  };
+
+  render(<Top />);
+
+  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+  await userEvent.type(ageInput, INPUT_AGE);
+
+  await waitFor(() => {
+    const ageInput: HTMLInputElement = screen.getByTestId('age-input');
+    expect(ageInput.value).toBe(INPUT_AGE);
+  });
+
+  const submitButton = screen.getByTestId('submit-button');
+  await userEvent.click(submitButton);
+
+  await waitFor(() => {
+    console.log('waiting');
+    TestFormHook.api.actions.peek((s) => {
+      expect(s.value.age).toBe(INPUT_AGE);
+      expect(s.errors.age).toBeNull();
+    });
+  });
+});