form-input-switch.md

name	root	output	ignore	questions
form-input-switch	./src/	/model/**/components/form-with-preview		property required プロパティ名を入力してください (eg. shouldNotify) confirm initial 公開時 必須項目ですか？ true

form/inputs/{{ inputs.property }}/const.ts

{{ model := output.path | extractModel }}
{{ name := model + '-' + inputs.property }}

export const {{ name | snake | upper }}_DEFAULT_VALUE: boolean = false;

form/inputs/{{ inputs.property }}/hook.ts

{{ model := output.path | extractModel }}
import { type ChangeEventHandler, useCallback } from "react";

import { use{{ model | pascal }}FormStore } from "../../../store/hook";

export const use{{ model | pascal }}{{ inputs.property | pascal }}Input = () => {
  const value = use{{ model | pascal }}FormStore((state) => state.{{ inputs.property | camel }});
  const _setValue = use{{ model | pascal }}FormStore((state) => state.set{{ inputs.property | pascal }});

  const setValue: ChangeEventHandler<HTMLInputElement> = useCallback(
    (event) => {
      _setValue(event.target.checked);
    },
    [_setValue],
  );

  return { value, setValue };
};

form/inputs/{{ inputs.property }}/index.tsx

{{ model := output.path | extractModel }}

"use client";

import type { FC } from "react";

import { Switch } from "@/common/components/form/switch";

import { use{{ model | pascal }}{{ inputs.property | pascal }}Input } from "./hook";

export const {{ model | pascal }}{{ inputs.property | pascal }}Input: FC = () => {
  const { value, setValue } = use{{ model | pascal }}{{ inputs.property | pascal }}Input();

  return (
    <Switch
      label="プッシュ通知"
      description="説明"
      {{ if inputs.required }}required{{ end }}
      onLabel="する"
      offLabel="しない"
      checked={value}
      onChange={setValue}
    />
  );
};

form/inputs/{{ inputs.property }}/slice.ts

{{ model := output.path | extractModel }}

import {
  type ValidationPhase,
  getValidationErrorMessage,
} from "@/model/common/lib/validation";
import type { FormInputSliceCreater } from "@/model/common/store/form";

export type {{ model | pascal }}{{ inputs.property | pascal }}Slice = {
  {{ inputs.property | camel }}: boolean;
  set{{ inputs.property | pascal }}: ({{ inputs.property | camel }}: boolean) => void;
};

export const create{{ model | pascal }}{{ inputs.property | pascal }}Slice: FormInputSliceCreater<
  {{ model | pascal }}{{ inputs.property | pascal }}Slice,
  { {{ inputs.property | camel }}: boolean }
> = (initalValue) => (set) => ({
  {{ inputs.property | camel }}: initalValue.{{ inputs.property | camel }},
  set{{ inputs.property | pascal }}: ({{ inputs.property | camel }}) => set({ {{ inputs.property | camel }} }),
});

form/index.tsx

{{ model := output.path | extractModel }}
import { {{ model | pascal }}{{ inputs.property | pascal }}Input } from "./inputs/{{ inputs.property }}";

{{ read output.abs | before "</" }}
<{{ model | pascal }}{{ inputs.property | pascal }}Input />
{{ read output.abs | after "</" -1 }}

form/type.ts

{{ read output.abs | before "};" }}
  {{ inputs.property | camel }}: boolean;
{{ read output.abs | after "};" -1 }}

store/const.ts

{{ model := output.path | extractModel }}
{{ name := model + '-' + inputs.property }}
import { {{ name | snake | upper }}_DEFAULT_VALUE } from "../form/inputs/{{ inputs.property}}/const"

{{ read output.abs | before "};" }}
  {{ inputs.property | camel }}: {{ name | snake | upper }}_DEFAULT_VALUE,
{{ read output.abs | after "};" -1 }}

store/index.ts

{{ model := output.path | extractModel }}

import { create{{ model | pascal }}{{ inputs.property | pascal }}Slice } from "../form/inputs/{{ inputs.property}}/slice"


{{ read output.abs | before "getFormValue:" }}
      ...create{{ model | pascal }}{{ inputs.property | pascal }}Slice(initialState)(set, get, store),
{{ read output.abs | after "getFormValue:" -1 }}

store/type.ts

{{ model := output.path | extractModel }}

{{ read output.abs }}
// TODO: 次を追加 {{ model | pascal }}{{ inputs.property | pascal }}Slice &

preview/{{ inputs.property }}/index.tsx

{{ model := output.path | extractModel }}

"use client";

import { {{ model | pascal }}{{ inputs.property | pascal }}PreviewView } from "../../../preview/{{ inputs.property }}";
import { use{{ model | pascal }}FormStore } from "../../store/hook";

export const {{ model | pascal }}{{ inputs.property | pascal }}PreviewContainer = () => {
  const value = use{{ model | pascal }}FormStore((state) => state.{{ inputs.property | camel }});
  return <{{ model | pascal }}{{ inputs.property | pascal }}PreviewView value={value} />;
};

../preview/{{ inputs.property }}/index.tsx

{{ model := output.path | extractModel }}
import { Text } from "@mantine/core";

export const {{ model | pascal }}{{ inputs.property | pascal }}PreviewView = ({ value }: { value: boolean }) => {
  return <Text>{value ? "YES" : "NO"}</Text>;
};