mayoiga 0.1.7 → 0.2.0

package/src/component.tsx

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

@@ -1,176 +0,0 @@
-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 initialState = {name: '', description: '', age: '', marked: false};
-const createTestHook = () => createFormHook(initialState 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();
-    });
-  });
-});
-
-test('User is able to re-initialize the form state', async () => {
-  const TestFormHook = createTestHook();
-
-  const Top = () => {
-    return (
-      <div>
-        <AgeInputComponent controller={TestFormHook.controller} />
-      </div>
-    );
-  };
-
-  render(<Top />);
-
-  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
-  await userEvent.type(ageInput, '9999');
-
-  expect(TestFormHook.api.getState().isDirty).toBeTruthy();
-  TestFormHook.actions.initializeForm({}, {cleanup: true});
-  expect(TestFormHook.api.getState().isDirty).toBeFalsy();
-});
-
-test('User is able to push server side validation', async () => {
-  const TestFormHook = createTestHook();
-
-  const Top = () => {
-    return (
-      <div>
-        <AgeInputComponent controller={TestFormHook.controller} />
-      </div>
-    );
-  };
-
-  render(<Top />);
-
-  const ageInput: HTMLInputElement = screen.getByTestId('age-input');
-  await userEvent.type(ageInput, '9999');
-
-  TestFormHook.actions.pushFormErrors((_s) => ({age: 'server side error'}));
-  const state1 = TestFormHook.api.getState();
-  expect(state1.isDirty).toBeTruthy();
-  expect(state1.isValid).toBeFalsy();
-  expect(state1.errors.age).toEqual('server side error');
-
-  await userEvent.type(ageInput, 'hgoehoge');
-
-  // confirm empty field won't overwrite any messages
-  TestFormHook.actions.pushFormErrors((_s) => ({}));
-  const state2 = TestFormHook.api.getState();
-  expect(state2.isDirty).toBeTruthy();
-  expect(state2.isValid).toBeFalsy();
-  expect(state2.errors.age).toEqual('Invalid input');
-});

package/src/index.ts

@@ -1,352 +0,0 @@
-import {createStore} from 'nozuchi';
-import {createElement, Fragment, useEffect, useMemo} from 'react';
-
-import {isChangeEvent} from './utils';
-
-import type {Subscriber} from 'nozuchi';
-import type {BaseSyntheticEvent, ChangeEvent, ReactNode, ReactElement} from 'react';
-
-import type {infer as zodInfer, SafeParseReturnType, ZodIssue, ZodType} from 'zod';
-
-export type StateRestriction = Record<string, any>;
-
-type FormStatus = {
-  isDirty: boolean;
-  isValid: boolean;
-};
-
-type FormErrors<State extends StateRestriction> = {
-  [k in keyof State]: string | null;
-};
-
-export type FullFormState<State extends StateRestriction> = FormStatus & {value: State; errors: FormErrors<State>};
-
-export type HandleChangeAction<State extends StateRestriction, R = void> = <Name extends keyof State>(name: Name, value: State[Name]) => R;
-
-export type FieldProps<State extends StateRestriction, Name extends keyof State> = {
-  name: Name;
-  children: (
-    tool: {
-      name: Name;
-      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;
-
-  /**
-   * Mayoiga Field will memoize the result of renderProps for performance.
-   * If your renderProps depends on external variables, you should apply those on deps
-   */
-  deps?: ReadonlyArray<unknown>;
-};
-
-export type SliceProps<State extends StateRestriction, Selected extends ReadonlyArray<unknown>> = {
-  selector: (s: FullFormState<State>) => Selected;
-  children: (tool: {handleChange: HandleChangeAction<State>}, ...value: Readonly<Selected>) => ReactNode;
-  /**
-   * Mayoiga Slicer will memoize the result of renderProps for performance.
-   * If your renderProps depends on external variables, you should apply those on deps
-   *
-   * ```typescript
-   * <Slicer selector={s => [s.value.selected]} deps={[selection]}>{(tools, selected: string) => <AwesomeSelection value={selected} options={selection} />}</Slicer>
-   * ```
-   */
-  deps?: ReadonlyArray<unknown>;
-};
-
-type FormControllerBehavior<StateBeforeValidation extends StateRestriction> = {
-  /** For testing */
-  peek: (
-    eyeball: (prev: FullFormState<StateBeforeValidation>) => void,
-  ) => (prev: FullFormState<StateBeforeValidation>) => FullFormState<StateBeforeValidation>;
-
-  reset: () => () => FullFormState<StateBeforeValidation>;
-
-  /**
-   * Initialize form state without validation.
-   *
-   * @param initialVal value to initialize form state
-   * @param opts.cleanup if true, form state is become pristine (which means, `form.isDirty` is going to be false) .
-   */
-  initializeForm: (
-    initialVal: Partial<StateBeforeValidation>,
-    opts?: {
-      cleanup?: true;
-    },
-  ) => (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>;
-};
-
-const initialFormState = Object.freeze({isDirty: false, isValid: false});
-
-function createFormStore<StateBeforeValidation extends StateRestriction, Schema extends ZodType<any, any, any>>(
-  initialState: StateBeforeValidation,
-  schema: Schema,
-): Subscriber<FullFormState<StateBeforeValidation>, FormControllerBehavior<StateBeforeValidation>> {
-  type FullState = FullFormState<StateBeforeValidation>;
-  type Err = FormErrors<StateBeforeValidation>;
-  type StateKeys = keyof StateBeforeValidation;
-
-  const initialErrors = Object.freeze(
-    Object.keys(initialState).reduce((buf, k) => {
-      buf[k as StateKeys] = null;
-      return buf;
-    }, {} as any as Err),
-  );
-
-  const fullInitialState: FullState = Object.freeze({
-    ...initialFormState,
-    value: {...initialState},
-    errors: {...initialErrors},
-  });
-
-  const withValidation = (prev: FullState, newValue: StateBeforeValidation) => {
-    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 as any as StateKeys] = iss.message;
-      return buf;
-    }, {} as any as Err);
-
-    return {...prev, isDirty: true, isValid: false, errors: newErrors, value: newValue};
-  };
-
-  return createStore(fullInitialState, {
-    peek: (eyeball) => (prev) => {
-      eyeball(prev);
-      return prev;
-    },
-
-    reset: () => () => fullInitialState,
-    initializeForm: (initialVal, opts) => (prev) => ({
-      ...prev,
-      value: {...prev.value, ...initialVal},
-      errors: {...initialErrors},
-      isDirty: opts?.cleanup === true ? false : prev.isDirty,
-    }),
-    handleIssues: (issues) => (prev) => {
-      // FIXME: handle duplication
-      const newErrors = issues.reduce((buf, iss) => {
-        const shallowPath = iss.path[0];
-        if (shallowPath === undefined) {
-          return buf;
-        }
-        buf[shallowPath as any as StateKeys] = iss.message;
-        return buf;
-      }, {} as any as Err);
-
-      return {...prev, isDirty: true, isValid: false, errors: newErrors};
-    },
-    pushFormErrors: (validator) => (prev) => {
-      const pushedErrors = validator(prev.value);
-      const allErrors = {...prev.errors, ...pushedErrors};
-      return {...prev, isValid: Object.keys(allErrors).length === 0, errors: allErrors};
-    },
-    reduceFormErrors: (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);
-    },
-  });
-}
-
-type ActionsCanBePublic<State extends StateRestriction> = {
-  reset: VoidFunction;
-
-  /**
-   * Initialize form state without validation.
-   *
-   * @param initialVal value to initialize form state
-   * @param opts.cleanup if true, form state is become pristine (which means, `form.isDirty` is going to be false) .
-   */
-  initializeForm: (
-    initial: Partial<State>,
-    opts?: {
-      cleanup?: true;
-    },
-  ) => void;
-  pushFormErrors: (validator: (state: State) => Partial<FormErrors<State>>) => void;
-  handleChange: HandleChangeAction<State>;
-  handleBulkChange: (setter: (prev: State) => Partial<State>) => void;
-};
-
-/**
- * Restricted type interface of the form store
- * TODO: more restriction
- */
-export type Controller<State extends StateRestriction> = {
-  useInitialize: (initialValue: Partial<State>) => void;
-  useSelector: <R>(selector: (state: FullFormState<State>) => R, isEqual?: (prev: R, current: R) => boolean) => R;
-
-  actions: ActionsCanBePublic<State>;
-  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;
-  };
-};
-
-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 function createFormHook<StateBeforeValidation extends StateRestriction, Schema extends ZodType<any, any, any>>(
-  initialState: StateBeforeValidation,
-  schema: Schema,
-): FormHook<StateBeforeValidation, Schema> {
-  const store = createFormStore(initialState, schema);
-
-  const formHook = {
-    useInitialize: (initialValue: Partial<StateBeforeValidation>) => {
-      useEffect(() => {
-        store.actions.initializeForm(initialValue);
-      }, []);
-    },
-    useSelector: store.useSelector,
-    handleSubmit: (
-      handler: (
-        e: BaseSyntheticEvent,
-      ) => (
-        val: {success: true; data: zodInfer<Schema>; error: undefined} | {success: false; error: ReadonlyArray<ZodIssue>},
-      ) => void | Promise<void>,
-    ) => {
-      return (e: BaseSyntheticEvent) => {
-        const eventHandled = handler(e);
-        const value = store.getState().value;
-        return schema.safeParseAsync(value).then((result: SafeParseReturnType<StateBeforeValidation, zodInfer<typeof schema>>) => {
-          // 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<R extends ReadonlyArray<unknown>>(props: SliceProps<StateBeforeValidation, R>) {
-        const {selector, children, deps} = props;
-        const slicedValues = formHook.useSelector(selector);
-        return useMemo(
-          () => {
-            const renderContent = children({handleChange: formHook.actions.handleChange}, ...slicedValues);
-            return createElement(Fragment, {}, renderContent);
-          },
-          deps ? [...slicedValues, ...deps] : slicedValues,
-        );
-      },
-      Field<Name extends keyof StateBeforeValidation>(props: FieldProps<StateBeforeValidation, Name>) {
-        const {name, children, deps} = props;
-        const [value, errMsg] = store.useSelector((s) => [s.value[name], s.errors[name]] as const);
-        return useMemo(
-          () => {
-            const renderContent = children(
-              {
-                name,
-                value,
-                onChange: (name_or_event: unknown, value_or_none?: unknown) => {
-                  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 as Name, value_or_none as any);
-                  }
-                  if (isChangeEvent(name_or_event)) {
-                    const target: any = 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);
-          },
-          deps ? [value, errMsg, ...deps] : [value, errMsg],
-        );
-      },
-    },
-    actions: store.actions,
-  };
-
-  return {
-    controller: formHook,
-    api: store,
-    ...formHook,
-  };
-}
-
-export function useFormSlice<State extends StateRestriction, Sliced>(
-  formController: Controller<State>,
-  selector: (s: FullFormState<State>) => Sliced,
-) {
-  const sliced = formController.useSelector((s) => selector(s));
-  return [sliced, formController.actions] as const;
-}

package/src/utils.ts

@@ -1,8 +0,0 @@
-import type {ChangeEvent} from 'react';
-
-export function isChangeEvent<T>(x: any): x is ChangeEvent<T> {
-  if (typeof x !== 'object') {
-    return false;
-  }
-  return 'target' in x;
-}

package/tsconfig.json

@@ -1,38 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "declaration": true,
-    "jsx": "react",
-    "moduleResolution": "node",
-    // TODO: skip while vitest is broken
-    "skipLibCheck": true,
-
-    "strict": true,
-
-    "noUnusedLocals": true,
-    "noUnusedParameters": false,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "useUnknownInCatchVariables": true,
-    "exactOptionalPropertyTypes": true,
-
-    "forceConsistentCasingInFileNames": true,
-    "removeComments": false,
-
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "noErrorTruncation": true,
-
-    "lib": ["dom", "esnext"],
-    // TODO: node is for vitest... I should isolate it probably?
-    "types": ["react/next"],
-
-    "rootDir": "./src",
-    "outDir": "./dist"
-  },
-  "include": [
-    "./src/**/*"
-  ],
-}

package/vite.config.js

@@ -1,10 +0,0 @@
-import {defineConfig} from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    globals: true,
-    // environment: 'happy-dom',  DO NOT USE IT
-    environment: 'jsdom',
-    setupFiles: ['./setup/vite-global-setup.js'],
-  },
-})