feat <DateField /> component (#1362)

.changeset/three-toys-smash.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+feat `<DateField />`

src/components/DateField/DateField.stories.tsx

@@ -0,0 +1,33 @@
+import { StoryObj } from "@storybook/react";
+import DateField, { DateFieldProps } from "./DateField";
+import dayjs from "dayjs";
+import React, { useState } from "react";
+
+export default {
+  title: "Components/Inputs/DateField",
+  component: DateField,
+};
+
+export const Example: StoryObj<DateFieldProps> = {
+  render: (args) => {
+    const [date, setDate] = useState(dayjs());
+    return <DateField {...args} date={date} onDateChange={setDate} />;
+  },
+};
+
+export const Custom: StoryObj<DateFieldProps> = {
+  args: {
+    format: "MM/DD/YYYY",
+  },
+  render: (args) => {
+    const [date, setDate] = useState(dayjs());
+    return <DateField {...args} date={date} onDateChange={setDate} />;
+  },
+};
+
+export const Japanese: StoryObj<DateFieldProps> = {
+  ...Example,
+  args: {
+    format: "YYYY月MM月DD日",
+  },
+};

src/components/DateField/DateField.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef, memo } from "react";
+import { Icon, Input } from "..";
+import { useDateField } from "./useDateField";
+import { useMergeRefs } from "./utils";
+import { CalendarIcon, InputContainer } from "./styled";
+import { DateFieldProps } from "./types";
+
+const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
+  function DateField({ onClick, ...rest }, propRef) {
+    const { ref: inputRef, ...props } = useDateField({ ...rest });
+    const ref = useMergeRefs<HTMLInputElement>(propRef, inputRef);
+
+    return (
+      <InputContainer>
+        <Input ref={ref} readOnly style={{ border: "none" }} {...props} />
+        <CalendarIcon onClick={onClick}>
+          <Icon name="date_range" />
+        </CalendarIcon>
+      </InputContainer>
+    );
+  },
+);
+
+export type { DateFieldProps } from "./types";
+export default memo(DateField);

src/components/DateField/__tests__/useDateField.test.ts

@@ -0,0 +1,152 @@
+import { renderHook, act } from "@testing-library/react";
+import dayjs, { Dayjs } from "dayjs";
+import { useDateField } from "../useDateField";
+
+import React from "react";
+
+/**
+ * なんかユニットテストじゃまかないきれない気がしてきた
+ *
+ * @memo setSelectionRange のテストができないので、ArrowRight/ArrowLeft で移動してそのセクションで操作した結果をテストする
+ */
+describe("useDateField", () => {
+  let date: Dayjs;
+  let onDateChange: (date: Dayjs) => void;
+  const rest = {
+    changeState: null,
+    handleChangeState: () => {},
+  };
+
+  beforeEach(() => {
+    date = dayjs("2023-01-01");
+    onDateChange = jest.fn();
+    jest.resetAllMocks();
+  });
+
+  it("should initialize correctly", () => {
+    const { result } = renderHook(() =>
+      useDateField({ date, format: "YYYY-MM-DD", onDateChange, ...rest }),
+    );
+
+    expect(result.current.value).toBe(date.format("YYYY-MM-DD"));
+  });
+
+  it("should initialize correctly when format is MM/DD/YYYY", () => {
+    const { result } = renderHook(() =>
+      useDateField({ date, format: "MM/DD/YYYY", onDateChange, ...rest }),
+    );
+
+    expect(result.current.value).toBe(date.format("MM/DD/YYYY"));
+  });
+
+  // setSelectionRange のテストができないので、ArrowRight/ArrowLeft で移動してそのセクションで操作した結果をテストする
+  // つまり、ArrowRight/ArrowLeft で移動できることのテストも兼ねている（本当は分離したい）
+  describe("should update the date when a number key is pressed", () => {
+    it('should change the year to "1999" when press 1999 in year section', () => {
+      const { result } = renderHook(() =>
+        useDateField({ date, format: "YYYY-MM-DD", onDateChange, ...rest }),
+      );
+
+      act(() => {
+        result.current.onMouseDown();
+      });
+
+      const keys = ["1", "9", "9", "9"];
+
+      keys.forEach((key) => {
+        act(() => {
+          result.current.onKeyDown({
+            key,
+            preventDefault: jest.fn(),
+          } as unknown as React.KeyboardEvent<HTMLInputElement>);
+        });
+      });
+
+      expect(result.current.value).toBe("1999-01-01");
+    });
+
+    it('should change the month to "02" when press 2 in month section', () => {
+      const { result } = renderHook(() =>
+        useDateField({ date, format: "YYYY-MM-DD", onDateChange, ...rest }),
+      );
+
+      act(() => {
+        result.current.onKeyDown({
+          key: "ArrowRight",
+          preventDefault: jest.fn(),
+        } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      });
+
+      act(() => {
+        result.current.onKeyDown({
+          key: "2",
+          preventDefault: jest.fn(),
+        } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      });
+
+      expect(result.current.value).toBe("2023-02-01");
+    });
+
+    it('should change the day to "02" when press 2 in day section', () => {
+      const { result } = renderHook(() =>
+        useDateField({ date, format: "YYYY-MM-DD", onDateChange, ...rest }),
+      );
+
+      act(() => {
+        result.current.onKeyDown({
+          key: "ArrowRight",
+          preventDefault: jest.fn(),
+        } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      });
+
+      act(() => {
+        result.current.onKeyDown({
+          key: "ArrowRight",
+          preventDefault: jest.fn(),
+        } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      });
+
+      act(() => {
+        result.current.onKeyDown({
+          key: "2",
+          preventDefault: jest.fn(),
+        } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      });
+
+      expect(result.current.value).toBe("2023-01-02");
+    });
+
+    it('should change the year to "1999" when press 1999 in year section after ArrowRight and ArrowLeft', () => {
+      const { result } = renderHook(() =>
+        useDateField({ date, format: "YYYY-MM-DD", onDateChange, ...rest }),
+      );
+
+      act(() => {
+        result.current.onKeyDown({
+          key: "ArrowRight",
+          preventDefault: jest.fn(),
+        } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      });
+
+      act(() => {
+        result.current.onKeyDown({
+          key: "ArrowLeft",
+          preventDefault: jest.fn(),
+        } as unknown as React.KeyboardEvent<HTMLInputElement>);
+      });
+
+      const keys = ["1", "9", "9", "9"];
+
+      keys.forEach((key) => {
+        act(() => {
+          result.current.onKeyDown({
+            key,
+            preventDefault: jest.fn(),
+          } as unknown as React.KeyboardEvent<HTMLInputElement>);
+        });
+      });
+
+      expect(result.current.value).toBe("1999-01-01");
+    });
+  });
+});

src/components/DateField/__tests__/utils.test.ts

@@ -0,0 +1,64 @@
+import { getSections } from "../utils";
+
+describe("getSections", () => {
+  it("should return a start:0 end: -1 when no numbers are present", () => {
+    const formattedDate = "abcd";
+    const result = getSections(formattedDate);
+    expect(result).toEqual([
+      { start: 0, end: 3, value: "abcd", editable: false },
+    ]);
+  });
+
+  it("should correctly parse a date string with YYYY-MM-DD", () => {
+    const formattedDate = "2023-01-02";
+    const result = getSections(formattedDate);
+    const expected = [
+      { start: 0, end: 3, value: "2023", editable: true },
+      { start: 4, end: 4, value: "-", editable: false },
+      { start: 5, end: 6, value: "01", editable: true },
+      { start: 7, end: 7, value: "-", editable: false },
+      { start: 8, end: 9, value: "02", editable: true },
+    ];
+    expect(result).toEqual(expected);
+  });
+
+  it("should handle a date string with MM/DD/YYYY", () => {
+    const formattedDate = "01/02/2023";
+    const result = getSections(formattedDate);
+    const expected = [
+      { start: 0, end: 1, value: "01", editable: true },
+      { start: 2, end: 2, value: "/", editable: false },
+      { start: 3, end: 4, value: "02", editable: true },
+      { start: 5, end: 5, value: "/", editable: false },
+      { start: 6, end: 9, value: "2023", editable: true },
+    ];
+    expect(result).toEqual(expected);
+  });
+
+  it("should handle a date string with YYYY年MM月NN日", () => {
+    const formattedDate = "2023年01月02日";
+    const result = getSections(formattedDate);
+    const expected = [
+      { start: 0, end: 3, value: "2023", editable: true },
+      { start: 4, end: 4, value: "年", editable: false },
+      { start: 5, end: 6, value: "01", editable: true },
+      { start: 7, end: 7, value: "月", editable: false },
+      { start: 8, end: 9, value: "02", editable: true },
+      { start: 10, end: 10, value: "日", editable: false },
+    ];
+    expect(result).toEqual(expected);
+  });
+
+  it("should handle a date string with DD----MM+-*/===YY", () => {
+    const formattedDate = "02----01+-*/===23";
+    const result = getSections(formattedDate);
+    const expected = [
+      { start: 0, end: 1, value: "02", editable: true },
+      { start: 2, end: 5, value: "----", editable: false },
+      { start: 6, end: 7, value: "01", editable: true },
+      { start: 8, end: 14, value: "+-*/===", editable: false },
+      { start: 15, end: 16, value: "23", editable: true },
+    ];
+    expect(result).toEqual(expected);
+  });
+});

src/components/DateField/constants.ts

@@ -0,0 +1,29 @@
+export const AllowedKeys = {
+  Backspace: "Backspace",
+  Delete: "Delete",
+  ArrowLeft: "ArrowLeft",
+  ArrowRight: "ArrowRight",
+  ArrowUp: "ArrowUp",
+  ArrowDown: "ArrowDown",
+  Tab: "Tab",
+  // Enter: "Enter",
+  // Escape: "Escape",
+  "0": "0",
+  "1": "1",
+  "2": "2",
+  "3": "3",
+  "4": "4",
+  "5": "5",
+  "6": "6",
+  "7": "7",
+  "8": "8",
+  "9": "9",
+} as const;
+
+export const numberKeys = Object.keys(AllowedKeys).filter(
+  (key) => !isNaN(Number(key)),
+);
+
+export const allowedKeys = Object.values(AllowedKeys);
+
+export type AllowedKeys = (typeof AllowedKeys)[keyof typeof AllowedKeys];

src/components/DateField/index.ts

@@ -0,0 +1 @@
+export { default } from "./DateField";

src/components/DateField/plugin/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-present, iamkun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.