Feat i18n support for DatePicker and DateRangePicker

.changeset/weak-spies-happen.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+Feat i18n support for DatePicker and DateRangePicker

src/components/Calendar/Calendar/Calendar.tsx

@@ -13,6 +13,15 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
    * @default dayjs()
    */
   date: Dayjs;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * カレンダーの左に表示するアクション
    */
@@ -37,6 +46,8 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
 const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
   {
     date,
+    monthFormat,
+    weekList,
     actions,
     onClickCloseButton,
     isOutsideRange = () => false,
@@ -74,6 +85,8 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
         <InnerCalendar
           date={date}
           current={current}
+          monthFormat={monthFormat}
+          weekList={weekList}
           yearIsOpen={yearIsOpen}
           isOutsideRange={isOutsideRange}
           onYearIsOpen={setYearIsOpen}

src/components/Calendar/CalendarRange/CalendarRange.tsx

@@ -25,6 +25,15 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
    * @default dayjs()
    */
   endDate: Dayjs;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * カレンダーの左に表示するアクション
    */
@@ -60,6 +69,8 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
     {
       startDate,
       endDate,
+      monthFormat,
+      weekList,
       actions,
       onClose,
       isOutsideRange = () => false,
@@ -131,6 +142,8 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
             <InnerCalendarRange
               startDate={startDate}
               endDate={endDate}
+              monthFormat={monthFormat}
+              weekList={weekList}
               current={current}
               yearIsOpen={yearIsOpen}
               isOutsideRange={isOutsideRange}

src/components/Calendar/constants.ts

@@ -1,38 +1,2 @@
 // for `<ScrollArea />`
 export const HEIGHT = "400px";
-
-export const weekList = {
-  en: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-  ja: ["日", "月", "火", "水", "木", "金", "土"],
-};
-
-export const monthList = {
-  en: [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "June",
-    "July",
-    "Aug",
-    "Sept",
-    "Oct",
-    "Nov",
-    "Dec",
-  ],
-  ja: [
-    "1月",
-    "2月",
-    "3月",
-    "4月",
-    "5月",
-    "6月",
-    "7月",
-    "8月",
-    "9月",
-    "10月",
-    "11月",
-    "12月",
-  ],
-};

src/components/Calendar/internal/InnerCalendar/InnerCalendar.tsx

@@ -3,7 +3,7 @@ import dayjs, { Dayjs } from "dayjs";
 import { Icon, ScrollArea } from "../../..";
 import { useTheme } from "styled-components";
 import { useScrollCalendar } from "../../hooks/useScrollCalendar";
-import { HEIGHT, weekList } from "../../constants";
+import { HEIGHT } from "../../constants";
 import {
   CalendarContainer,
   CalendarMonth,
@@ -16,6 +16,8 @@ import { Day } from "../../Calendar/internal/Day";
 
 type Props = {
   date: Dayjs;
+  monthFormat?: string;
+  weekList?: string[];
   current: Dayjs;
   yearIsOpen: boolean;
   onYearIsOpen: (yearIsOpen: boolean) => void;
@@ -24,6 +26,8 @@ type Props = {
 };
 export const InnerCalendar: React.FC<Props> = ({
   date,
+  weekList,
+  monthFormat,
   current,
   yearIsOpen,
   onYearIsOpen,
@@ -51,7 +55,7 @@ export const InnerCalendar: React.FC<Props> = ({
             {/* 年月の表示 */}
             <CalendarMonth expanded={yearIsOpen}>
               <TitleContainer expanded={yearIsOpen} weight="bold" size="xl">
-                {m.format("YYYY年MM月")}
+                {m.format(monthFormat)}
               </TitleContainer>
               <IconButton
                 expanded={yearIsOpen}
@@ -68,9 +72,7 @@ export const InnerCalendar: React.FC<Props> = ({
             {/* カレンダーの表示 */}
             <CalendarContainer>
               {/* 曜日の表示 */}
-              {weekList["ja"].map((week) => (
-                <DayStyle key={week}>{week}</DayStyle>
-              ))}
+              {weekList?.map((week) => <DayStyle key={week}>{week}</DayStyle>)}
 
               {/* 開始曜日まで空白をセット */}
               {Array.from(new Array(m.startOf("month").day()), (_, i) => (

src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { HEIGHT, weekList } from "../../constants";
+import { HEIGHT } from "../../constants";
 import { useTheme } from "../../../../themes";
 import { useScrollCalendar } from "../../hooks/useScrollCalendar";
 import { Icon, ScrollArea } from "../../../";
@@ -18,6 +18,8 @@ import { Day } from "../../CalendarRange/internal/Day";
 type Props = {
   startDate: Dayjs;
   endDate: Dayjs;
+  monthFormat?: string;
+  weekList?: string[];
   current: Dayjs;
   yearIsOpen: boolean;
   onYearIsOpen: (yearIsOpen: boolean) => void;
@@ -28,6 +30,8 @@ type Props = {
 export const InnerCalendarRange: React.FC<Props> = ({
   startDate,
   endDate,
+  monthFormat,
+  weekList,
   current,
   yearIsOpen,
   onYearIsOpen,
@@ -54,7 +58,7 @@ export const InnerCalendarRange: React.FC<Props> = ({
           >
             <CalendarMonth expanded={yearIsOpen}>
               <TitleContainer expanded={yearIsOpen} weight="bold" size="xl">
-                {m.format("YYYY年MM月")}
+                {m.format(monthFormat)}
               </TitleContainer>
               <IconButton
                 expanded={yearIsOpen}
@@ -68,9 +72,7 @@ export const InnerCalendarRange: React.FC<Props> = ({
               </IconButton>
             </CalendarMonth>
             <CalendarContainer>
-              {weekList["ja"].map((week) => (
-                <DayStyle key={week}>{week}</DayStyle>
-              ))}
+              {weekList?.map((week) => <DayStyle key={week}>{week}</DayStyle>)}
               {Array.from(new Array(m.startOf("month").day()), (_, i) => (
                 <DayStyle key={i} />
               ))}

src/components/LocaleProvider/LocaleProvider.stories.tsx

@@ -6,6 +6,7 @@ import {
   ConfirmModal,
   DatePicker,
   MultipleFilter,
+  NewDatePicker,
   OptionType,
   Select,
   Spacer,
@@ -184,6 +185,11 @@ export const Example: StoryObj<LocaleProviderProps> = {
         <Spacer pl={2} pt={2} pb={40}>
           <DatePicker date={dayjs()} onDateChange={() => {}} />
         </Spacer>
+
+        <h2>NewDatePicker</h2>
+        <Spacer pl={2} pt={2} pb={40}>
+          <NewDatePicker date={dayjs()} onDateChange={() => {}} />
+        </Spacer>
       </LocaleProvider>
     );
   },

src/components/NewDatePicker/NewDatePicker.tsx

@@ -10,6 +10,7 @@ import {
   useInteractions,
   useRole,
 } from "@floating-ui/react";
+import { useLocaleProps } from "../../hooks/useLocaleProps";
 
 export type NewDatePickerProps = {
   /**
@@ -35,6 +36,15 @@ export type NewDatePickerProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -51,18 +61,20 @@ export type NewDatePickerProps = {
  * @memo 次のメジャーリリースで DatePicker に変更。現行の DatePicker は削除。
  */
 export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
-  function DatePicker(
-    {
+  function DatePicker(inProps, ref) {
+    const props = useLocaleProps({ props: inProps, name: "NewDatePicker" });
+    const {
       date,
       format = "YYYY-MM-DD",
       disabled = false,
+      monthFormat = "MMM YYYY",
+      weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
       isOutsideRange,
       errorText,
       actions,
       onDateChange,
-    },
-    ref,
-  ) {
+    } = props;
+
     const [open, setOpen] = useState(false);
     const { context, refs, strategy, x, y } = useFloating({
       placement: "right-start",
@@ -112,6 +124,8 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
           <Calendar
             ref={refs.setFloating}
             date={date}
+            monthFormat={monthFormat}
+            weekList={weekList}
             actions={actions}
             isOutsideRange={isOutsideRange}
             style={{

src/components/NewDateRangePicker/NewDateRangePicker.tsx

@@ -16,6 +16,7 @@ import {
   ClickStateType,
 } from "../Calendar/CalendarRange/constants";
 import { useMergeRefs } from "../../hooks/useMergeRefs";
+import { useLocaleProps } from "../../hooks/useLocaleProps";
 
 export type DateRange = {
   startDate: Dayjs;
@@ -46,6 +47,15 @@ export type NewDateRangePickerProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -64,18 +74,23 @@ export type NewDateRangePickerProps = {
 export const DateRangePicker = forwardRef<
   HTMLDivElement,
   NewDateRangePickerProps
->(function DateRangePicker(
-  {
+>(function DateRangePicker(inProps, propRef) {
+  const props = useLocaleProps({
+    props: inProps,
+    name: "NewDateRangePicker",
+  });
+  const {
     startDate,
     endDate,
     errorText,
     disabled = false,
+    monthFormat = "MMM YYYY",
+    weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     isOutsideRange = () => false,
     actions,
     onDatesChange,
-  },
-  propRef,
-) {
+  } = props;
+
   const [open, setOpen] = useState(false);
   const { context, refs, strategy, x, y } = useFloating({
     placement: "right-start",
@@ -133,6 +148,8 @@ export const DateRangePicker = forwardRef<
           startDate={startDate}
           endDate={endDate}
           actions={actions}
+          monthFormat={monthFormat}
+          weekList={weekList}
           style={{
             position: strategy,
             top: y ?? 0,

src/constants/locale.ts

@@ -7,7 +7,7 @@ import {
   MultipleFilterProps,
   ToggleButtonProps,
 } from "..";
-import { SelectProps } from "../components";
+import { NewDatePickerProps, SelectProps } from "../components";
 import { CreatableSelectProps } from "../components/CreatableSelect";
 import { FullSizeConfirmModalProps } from "../components/FullSizeConfirmModal";
 import { EditFilterCardProps } from "../components/MultipleFilter/internal/EditFilterCard/EditFilterCard";
@@ -75,6 +75,12 @@ export interface Localization {
     DateRangePicker?: {
       defaultProps: Pick<DateRangePickerProps, "displayFormat" | "monthFormat">;
     };
+    NewDatePicker?: {
+      defaultProps: Pick<NewDatePickerProps, "monthFormat" | "weekList">;
+    };
+    NewDateRangePicker?: {
+      defaultProps: Pick<NewDatePickerProps, "monthFormat" | "weekList">;
+    };
   };
 }
 
@@ -124,6 +130,18 @@ export const jaJP: Localization = {
     DateRangePicker: {
       defaultProps: { displayFormat: "YYYY/MM/DD", monthFormat: "YYYY年 M月" },
     },
+    NewDatePicker: {
+      defaultProps: {
+        monthFormat: "YYYY年MM月",
+        weekList: ["日", "月", "火", "水", "木", "金", "土"],
+      },
+    },
+    NewDateRangePicker: {
+      defaultProps: {
+        monthFormat: "YYYY年MM月",
+        weekList: ["日", "月", "火", "水", "木", "金", "土"],
+      },
+    },
   },
 };