@k8o/arte-odyssey 0.0.0

package/dist/components/form/autocomplete/autocomplete.stories.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Autocomplete } from "./autocomplete";
+const meta = {
+  title: "components/form/autocomplete",
+  component: Autocomplete,
+  render: (props) => {
+    const options = [
+      { value: "2", label: "2\u9032\u6570" },
+      { value: "8", label: "8\u9032\u6570" },
+      { value: "10", label: "10\u9032\u6570" },
+      { value: "16", label: "16\u9032\u6570" }
+    ];
+    const [value, setValue] = useState([]);
+    return /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        ...props,
+        onChange: setValue,
+        options,
+        value
+      }
+    );
+  }
+};
+var autocomplete_stories_default = meta;
+const Default = {
+  args: {
+    id: "autocomplete",
+    describedbyId: void 0,
+    isInvalid: false,
+    isDisabled: false,
+    isRequired: false
+  }
+};
+const Invalid = {
+  args: {
+    id: "autocomplete",
+    describedbyId: void 0,
+    isInvalid: true,
+    isDisabled: false,
+    isRequired: true
+  }
+};
+const Disabled = {
+  args: {
+    id: "autocomplete",
+    describedbyId: void 0,
+    isInvalid: false,
+    isDisabled: true,
+    isRequired: true
+  }
+};
+export {
+  Default,
+  Disabled,
+  Invalid,
+  autocomplete_stories_default as default
+};

package/dist/components/form/autocomplete/index.d.ts

@@ -0,0 +1 @@
+export * from './autocomplete';

package/dist/components/form/autocomplete/index.js

@@ -0,0 +1 @@
+export * from "./autocomplete";

package/dist/components/form/checkbox/checkbox.d.ts

@@ -0,0 +1,8 @@
+import { type ChangeEventHandler, type FC } from 'react';
+type Props = {
+    label: string;
+    value: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+export declare const Checkbox: FC<Props>;
+export {};

package/dist/components/form/checkbox/checkbox.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "./../../../helpers/cn";
+import { CheckIcon } from "../../icons";
+const Checkbox = ({ label, value, onChange }) => {
+  const [isFocus, setIsFocus] = useState(false);
+  return /* @__PURE__ */ jsxs("label", { className: "inline-flex cursor-pointer items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        checked: value,
+        className: "sr-only",
+        onBlur: () => {
+          setIsFocus(false);
+        },
+        onChange,
+        onFocus: () => {
+          setIsFocus(true);
+        },
+        type: "checkbox"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "inline-flex size-5 items-center justify-center rounded-md border-2",
+          isFocus && "bordertransparent outline-hidden ring-2 ring-border-info",
+          value ? "border-border-base bg-primary-bg text-fg-base" : "border-border-mute bg-bg-base"
+        ),
+        children: value ? /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) : null
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-lg", children: label })
+  ] });
+};
+export {
+  Checkbox
+};

package/dist/components/form/checkbox/checkbox.stories.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Checkbox } from "./checkbox";
+const meta = {
+  title: "components/form/checkbox",
+  component: Checkbox
+};
+var checkbox_stories_default = meta;
+const Default = {
+  render: () => {
+    const [value, setValue] = useState(false);
+    return /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        label: "checkbox",
+        onChange: (e) => {
+          setValue(e.target.checked);
+        },
+        value
+      }
+    );
+  }
+};
+export {
+  Default,
+  checkbox_stories_default as default
+};

package/dist/components/form/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './checkbox';

package/dist/components/form/checkbox/index.js

@@ -0,0 +1 @@
+export * from "./checkbox";

package/dist/components/form/form-control/form-control.d.ts

@@ -0,0 +1,20 @@
+import { type FC, type ReactElement } from 'react';
+type FormControlProps = {
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isRequired?: boolean;
+    label: string;
+    labelAs?: 'label' | 'legend';
+    helpText?: string;
+    errorText?: string | undefined;
+    renderInput: (props: {
+        id: string;
+        describedbyId: string | undefined;
+        labelId: string;
+        isDisabled: boolean;
+        isInvalid: boolean;
+        isRequired: boolean;
+    }) => ReactElement;
+};
+export declare const FormControl: FC<FormControlProps>;
+export {};

package/dist/components/form/form-control/form-control.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+const FormControl = ({
+  isDisabled = false,
+  isInvalid = false,
+  isRequired = false,
+  label,
+  labelAs = "label",
+  helpText,
+  errorText,
+  renderInput
+}) => {
+  const id = useId();
+  const describedbyId = isInvalid && errorText ? `${id}-feedback` : helpText ? `${id}-helptext` : void 0;
+  const labelId = `${id}-label`;
+  return /* @__PURE__ */ jsxs("fieldset", { className: "flex w-full flex-col", children: [
+    labelAs === "label" ? /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "mb-1 flex gap-2 font-bold text-fg-base text-md",
+        htmlFor: id,
+        id: labelId,
+        children: [
+          label,
+          isRequired && /* @__PURE__ */ jsx("span", { className: "font-medium text-fg-error", children: "\u5FC5\u9808" })
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs("legend", { className: "mb-1 flex gap-2 font-bold text-fg-base text-md", children: [
+      label,
+      isRequired && /* @__PURE__ */ jsx("span", { className: "font-medium text-fg-error", children: "\u5FC5\u9808" })
+    ] }),
+    renderInput({
+      id,
+      describedbyId,
+      labelId,
+      isDisabled,
+      isInvalid,
+      isRequired
+    }),
+    isInvalid && errorText ? /* @__PURE__ */ jsx(
+      "p",
+      {
+        "aria-live": "polite",
+        className: "text-fg-error text-sm",
+        id: `${id}-feedback`,
+        children: errorText
+      }
+    ) : helpText && /* @__PURE__ */ jsx("p", { className: "text-fg-mute text-sm", id: `${id}-helptext`, children: helpText })
+  ] });
+};
+export {
+  FormControl
+};

package/dist/components/form/form-control/form-control.stories.js

@@ -0,0 +1,94 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TextField } from "../text-field";
+import { FormControl } from "./form-control";
+const meta = {
+  title: "components/form/form-control",
+  component: FormControl,
+  args: {
+    renderInput: (props) => {
+      const [state, setState] = useState("");
+      return /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...props,
+          onChange: (e) => {
+            setState(e.target.value);
+          },
+          value: state
+        }
+      );
+    }
+  }
+};
+var form_control_stories_default = meta;
+const Default = {
+  args: {
+    label: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9"
+  }
+};
+const HelpText = {
+  args: {
+    label: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9",
+    helpText: "RFC\u306B\u6E96\u62E0\u3057\u305F\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002"
+  }
+};
+const Required = {
+  args: {
+    label: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9",
+    helpText: "RFC\u306B\u6E96\u62E0\u3057\u305F\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    isRequired: true
+  }
+};
+const Error = {
+  args: {
+    label: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9",
+    helpText: "RFC\u306B\u6E96\u62E0\u3057\u305F\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    isInvalid: true,
+    errorText: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u304C\u6B63\u3057\u304F\u3042\u308A\u307E\u305B\u3093\u3002",
+    isRequired: true
+  }
+};
+const ErrorWithoutText = {
+  args: {
+    label: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9",
+    helpText: "RFC\u306B\u6E96\u62E0\u3057\u305F\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    isInvalid: true,
+    isRequired: true
+  }
+};
+const Disabled = {
+  args: {
+    label: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9",
+    helpText: "RFC\u306B\u6E96\u62E0\u3057\u305F\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    isDisabled: true
+  }
+};
+const Legend = {
+  args: {
+    label: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9",
+    helpText: "RFC\u306B\u6E96\u62E0\u3057\u305F\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9\u3092\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    labelAs: "legend"
+  },
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // labelが不要なケースに使うのでoffにする
+          label: { enabled: false },
+          "label-title-only": { enabled: false }
+        }
+      }
+    }
+  }
+};
+export {
+  Default,
+  Disabled,
+  Error,
+  ErrorWithoutText,
+  HelpText,
+  Legend,
+  Required,
+  form_control_stories_default as default
+};

package/dist/components/form/form-control/index.d.ts

@@ -0,0 +1 @@
+export * from './form-control';

package/dist/components/form/form-control/index.js

@@ -0,0 +1 @@
+export * from "./form-control";

package/dist/components/form/number-field/index.d.ts

@@ -0,0 +1 @@
+export * from './number-field';

package/dist/components/form/number-field/index.js

@@ -0,0 +1 @@
+export * from "./number-field";

package/dist/components/form/number-field/number-field.d.ts

@@ -0,0 +1,17 @@
+import { type FC } from 'react';
+type Props = {
+    id?: string;
+    describedbyId?: string | undefined;
+    isInvalid: boolean;
+    isDisabled: boolean;
+    isRequired: boolean;
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    precision?: number;
+    max?: number;
+    min?: number;
+    placeholder?: string;
+};
+export declare const NumberField: FC<Props>;
+export {};

package/dist/components/form/number-field/number-field.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "./../../../helpers/cn";
+import { between, cast, toPrecision } from "./../../../helpers/number";
+import { MinusIcon, PlusIcon } from "../../icons";
+const NumberField = ({
+  id,
+  describedbyId,
+  isInvalid,
+  isDisabled,
+  isRequired,
+  value,
+  onChange,
+  step = 1,
+  precision = 0,
+  max = 9007199254740991,
+  min = -9007199254740991,
+  placeholder
+}) => {
+  const [displayValue, setDisplayValue] = useState(value.toFixed(precision));
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setDisplayValue(value.toFixed(precision));
+    setPrevValue(value);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex h-12 w-full items-center justify-between gap-2 rounded-md border border-border-base bg-bg-base shadow-xs",
+        "focus-within:bordertransparent focus-within:outline-hidden focus-within:ring-2 focus-within:ring-border-info",
+        "has-aria-invalid:border-border-error",
+        "has-disabled:cursor-not-allowed has-disabled:border-border-mute has-disabled:bg-bg-mute has-disabled:has-hover:hover:bg-bg-mute"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-describedby": describedbyId,
+            "aria-invalid": isInvalid,
+            "aria-required": isRequired,
+            "aria-valuemax": max,
+            "aria-valuemin": min,
+            "aria-valuenow": value,
+            autoComplete: "off",
+            autoCorrect: "off",
+            className: cn(
+              "h-full w-full grow bg-transparent pr-8 pl-3 focus-visible:outline-hidden",
+              "disabled:cursor-not-allowed"
+            ),
+            disabled: isDisabled,
+            id,
+            inputMode: "decimal",
+            onBlur: () => {
+              const newValue = between(cast(displayValue, precision), min, max);
+              onChange(newValue);
+              setDisplayValue(newValue.toFixed(precision));
+            },
+            onChange: (e) => {
+              if (e.nativeEvent.isComposing) {
+                return;
+              }
+              setDisplayValue(e.target.value);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "ArrowUp") {
+                const newValue = between(
+                  toPrecision(cast(displayValue, precision) + step, precision),
+                  min,
+                  max
+                );
+                onChange(newValue);
+                setDisplayValue(newValue.toFixed(precision));
+              }
+              if (e.key === "ArrowDown") {
+                const newValue = between(
+                  toPrecision(cast(displayValue, precision) - step, precision),
+                  min,
+                  max
+                );
+                onChange(newValue);
+                setDisplayValue(newValue.toFixed(precision));
+              }
+            },
+            pattern: "[0-9]*(.[0-9]+)?",
+            placeholder,
+            role: "spinbutton",
+            type: "text",
+            value: displayValue
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "absolute right-0 flex h-full flex-col", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: cn(
+                "flex w-6 grow items-center justify-center rounded-tr-sm border-border-base border-b border-l bg-bg-mute",
+                "disabled:cursor-not-allowed"
+              ),
+              disabled: isDisabled,
+              onClick: () => {
+                const newValue = between(
+                  toPrecision(cast(displayValue, precision) + step, precision),
+                  min,
+                  max
+                );
+                onChange(newValue);
+                setDisplayValue(newValue.toFixed(precision));
+              },
+              tabIndex: -1,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "\u5897\u3084\u3059" }),
+                /* @__PURE__ */ jsx(PlusIcon, { size: "sm" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: cn(
+                "flex w-6 grow items-center justify-center rounded-br-sm border-border-base border-l bg-bg-mute",
+                "disabled:cursor-not-allowed"
+              ),
+              disabled: isDisabled,
+              onClick: () => {
+                const newValue = between(
+                  toPrecision(cast(displayValue, precision) - step, precision),
+                  min,
+                  max
+                );
+                onChange(newValue);
+                setDisplayValue(newValue.toFixed(precision));
+              },
+              tabIndex: -1,
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "\u6E1B\u3089\u3059" }),
+                /* @__PURE__ */ jsx(MinusIcon, { size: "sm" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  NumberField
+};

package/dist/components/form/number-field/number-field.stories.js

@@ -0,0 +1,106 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { expect } from "storybook/test";
+import { NumberField } from "./number-field";
+const meta = {
+  title: "components/form/number-field",
+  component: NumberField,
+  args: {
+    id: "textfield",
+    describedbyId: "numberfield-feedback"
+  },
+  render: (args) => {
+    const [value, setValue] = useState(0);
+    return /* @__PURE__ */ jsx(NumberField, { ...args, onChange: setValue, value });
+  },
+  parameters: {
+    a11y: {
+      options: {
+        rules: {
+          // NumberField単体ではラベルを付随しない
+          "label-title-only": { enabled: false },
+          label: { enabled: false }
+        }
+      }
+    }
+  }
+};
+var number_field_stories_default = meta;
+const Default = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false
+  },
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("spinbutton");
+    await userEvent.type(input, "2.0[Tab]");
+    await expect(input).toHaveValue("2");
+    await userEvent.click(input);
+    await userEvent.keyboard("{ArrowUp}");
+    await userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(input).toHaveValue("0");
+  }
+};
+const Min0Max100 = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    min: 0,
+    max: 100
+  },
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("spinbutton");
+    await userEvent.type(input, "-10[Tab]");
+    await expect(input).toHaveValue("0");
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(input).toHaveValue("0");
+    await userEvent.type(input, "111[Tab]");
+    await expect(input).toHaveValue("100");
+    await userEvent.keyboard("{ArrowUp}");
+    await expect(input).toHaveValue("100");
+  }
+};
+const Precision = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    precision: 2,
+    step: 0.01
+  }
+};
+const Placeholder = {
+  args: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+    placeholder: "10.2"
+  }
+};
+const Invalid = {
+  args: {
+    isDisabled: false,
+    isInvalid: true,
+    isRequired: false
+  }
+};
+const Disabled = {
+  args: {
+    isDisabled: true,
+    isInvalid: false,
+    isRequired: false
+  }
+};
+export {
+  Default,
+  Disabled,
+  Invalid,
+  Min0Max100,
+  Placeholder,
+  Precision,
+  number_field_stories_default as default
+};

package/dist/components/form/radio/index.d.ts

@@ -0,0 +1 @@
+export * from './radio';

package/dist/components/form/radio/index.js

@@ -0,0 +1 @@
+export * from "./radio";

package/dist/components/form/radio/radio.d.ts

@@ -0,0 +1,11 @@
+import type { ChangeEventHandler, FC } from 'react';
+import type { Option } from '../../../types/variables';
+type Props = {
+    labelId: string;
+    isDisabled: boolean;
+    value: string;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    options: readonly Option[];
+};
+export declare const Radio: FC<Props>;
+export {};

package/dist/components/form/radio/radio.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "./../../../helpers/cn";
+const Radio = ({
+  labelId,
+  isDisabled,
+  value,
+  onChange,
+  options
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-labelledby": labelId,
+      className: cn(
+        "flex cursor-pointer flex-col gap-2",
+        isDisabled && "cursor-not-allowed"
+      ),
+      role: "radiogroup",
+      children: options.map((option) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: cn(
+            "flex cursor-pointer items-center gap-2",
+            "has-disabled:cursor-not-allowed"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                checked: value === option.value,
+                className: cn(
+                  "cursor-pointer",
+                  "disabled:cursor-not-allowed disabled:bg-bg-mute"
+                ),
+                disabled: isDisabled,
+                onChange,
+                type: "radio",
+                value: option.value
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: option.label })
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+};
+export {
+  Radio
+};