Fix types (#1380)

voyagegroup · Aug 22, 2023 · c25dcbe · c25dcbe
1 parent c6edba5
commit c25dcbe
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 53 deletions.
diff --git a/.changeset/nice-kings-walk.md b/.changeset/nice-kings-walk.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+fix types
diff --git a/src/components/Calendar/Calendar/Calendar.tsx b/src/components/Calendar/Calendar/Calendar.tsx
@@ -15,7 +15,14 @@ import { useScroll } from "../hooks/useScroll";
 import { Action, Actions } from "../internal/Actions";
 
 export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * 日付
+   * @default dayjs()
+   */
   date: Dayjs;
+  /**
+   * カレンダーの左に表示するアクション
+   */
   actions?: Action[];
   /**
    * 閉じるボタンを押したときの振る舞い
@@ -28,6 +35,9 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
    * @default () => false
    */
   isOutsideRange?: (date: Dayjs) => boolean;
+  /**
+   * 日付が変更されたときに呼ばれる関数
+   */
   onDateChange: (value: Dayjs) => void;
 };
 

diff --git a/src/components/Calendar/CalendarRange/CalendarRange.tsx b/src/components/Calendar/CalendarRange/CalendarRange.tsx
@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
-import { Card, Icon, ScrollArea, Typography } from "../..";
+import { Card, Icon, ScrollArea, Typography, DateRange } from "../..";
 import React, { forwardRef, memo, useCallback, useRef, useState } from "react";
 import { Day } from "./internal/Day";
 import { HEIGHT, weekList } from "../constants";
@@ -15,11 +15,21 @@ import { useScroll } from "../hooks/useScroll";
 import { getDayState } from "./utils";
 import { Action, Actions } from "../internal/Actions";
 import { ClickState, ClickStateType } from "./constants";
-import { DateRange } from "./types";
 
 export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * 開始日
+   * @default dayjs()
+   */
   startDate: Dayjs;
+  /**
+   * 終了日
+   * @default dayjs()
+   */
   endDate: Dayjs;
+  /**
+   * カレンダーの左に表示するアクション
+   */
   actions?: Action[];
   /**
    * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
@@ -36,7 +46,10 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
    * @default () => false
    */
   isOutsideRange?: (date: Dayjs) => boolean;
-  onDatesChange: ({ startDate, endDate }: DateRange) => void;
+  /**
+   * 日付が変更されたときに呼ばれる関数
+   */
+  onDatesChange: (dates: DateRange) => void;
 };
 
 /**
@@ -162,4 +175,5 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
   },
 );
 
+export type { DateRange };
 export default memo(CalendarRange);
diff --git a/src/components/Calendar/CalendarRange/index.ts b/src/components/Calendar/CalendarRange/index.ts
@@ -1,2 +1,2 @@
 export { default } from "./CalendarRange";
-export type { CalendarRangeProps } from "./CalendarRange";
+export type { CalendarRangeProps, DateRange } from "./CalendarRange";
diff --git a/src/components/Calendar/CalendarRange/types.ts b/src/components/Calendar/CalendarRange/types.ts
diff --git a/src/components/DateField/DateField/DateField.tsx b/src/components/DateField/DateField/DateField.tsx
@@ -3,7 +3,37 @@ import { ErrorText, Icon, Input, Spacer } from "../..";
 import { useDateField } from "../useDateField";
 import { useMergeRefs } from "../../../hooks/useMergeRefs";
 import { CalendarIcon, InputContainer } from "./styled";
-import { DateFieldProps } from "../types";
+import { Dayjs } from "dayjs";
+
+export type DateFieldProps = {
+  /**
+   * 日付
+   * @default dayjs()
+   */
+  date: Dayjs;
+  /**
+   * 指定したい format
+   * @default YYYY-MM-DD
+   */
+  format?: string;
+  /**
+   * エラーメッセージのテキスト
+   */
+  errorText?: string;
+  /**
+   * 入力を無効にする
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 日付が変更されたときに呼ばれる関数
+   */
+  onDateChange?: (date: Dayjs) => void;
+  /**
+   * カレンダーアイコンをクリックした時に呼ばれる関数
+   */
+  onClick: () => void;
+};
 
 const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
   function DateField(
@@ -38,5 +68,4 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
   },
 );
 
-export type { DateFieldProps } from "../types";
 export default memo(DateField);
diff --git a/src/components/DateField/DateRangeField/DateRangeField.tsx b/src/components/DateField/DateRangeField/DateRangeField.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, memo, useMemo } from "react";
-import { ErrorText, Icon, Input, Spacer } from "../..";
+import { ErrorText, Icon, Input, Spacer, DateRange } from "../..";
 import { useMergeRefs } from "../../../hooks/useMergeRefs";
 import { CalendarIcon, InputContainer } from "./styled";
 import { Dayjs } from "dayjs";
@@ -9,22 +9,34 @@ import {
   ClickStateType,
 } from "../../Calendar/CalendarRange/constants";
 
-type Range = {
-  startDate: Dayjs;
-  endDate: Dayjs;
-};
-
 export type DateRangeFieldProps = {
-  date: Range;
+  /**
+   * 日付
+   * @default { startDate: dayjs(), endDate: dayjs() }
+   */
+  date: DateRange;
+  /**
+   * 指定したい format
+   * @default YYYY-MM-DD
+   */
   format?: string;
+  /**
+   * エラーメッセージのテキスト
+   */
   errorText?: string;
   /**
    * 入力を無効にする
    * @default false
    */
   disabled?: boolean;
+  /**
+   * カレンダーアイコンをクリックした時に呼ばれる関数
+   */
   onClickCalendarIcon?: () => void;
-  onDatesChange?: (date: Range) => void;
+  /**
+   * 日付が変更されたときに呼ばれる関数
+   */
+  onDatesChange?: (date: DateRange) => void;
 };
 
 const DateRangeField = forwardRef<HTMLInputElement, DateRangeFieldProps>(

diff --git a/src/components/DateField/types.ts b/src/components/DateField/types.ts
@@ -1,34 +1,4 @@
-import { Dayjs } from "dayjs";
-
-export type DateFieldProps = {
-  /**
-   * 日付
-   * @default dayjs()
-   */
-  date: Dayjs;
-  /**
-   * 指定したい format
-   * @default YYYY-MM-DD
-   */
-  format?: string;
-  /**
-   * エラーメッセージのテキスト
-   */
-  errorText?: string;
-  /**
-   * 入力を無効にする
-   * @default false
-   */
-  disabled?: boolean;
-  /**
-   * 日付が変更されたときに呼ばれる関数
-   */
-  onDateChange?: (date: Dayjs) => void;
-  /**
-   * カレンダーアイコンをクリックした時に呼ばれる関数
-   */
-  onClick: () => void;
-};
+import { DateFieldProps } from "./DateField/DateField";
 
 export type UseDateFieldProps = Omit<DateFieldProps, "onClick">;
 

diff --git a/src/components/NewDatePicker/NewDatePicker.tsx b/src/components/NewDatePicker/NewDatePicker.tsx
@@ -12,17 +12,38 @@ import {
 } from "@floating-ui/react";
 
 export type NewDatePickerProps = {
+  /**
+   * 日付
+   * @default dayjs()
+   */
   date: Dayjs;
+  /**
+   * カレンダーの左に表示するアクション
+   */
   actions?: Action[];
+  /**
+   * 指定したい format
+   * @default YYYY-MM-DD
+   */
   format?: string;
+  /**
+   * エラーメッセージのテキスト
+   */
   errorText?: string;
+  /**
+   * 入力を無効にする
+   * @default false
+   */
   disabled?: boolean;
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
    * @default () => false
    */
   isOutsideRange?: (date: Dayjs) => boolean;
+  /**
+   * 日付が変更されたときに呼ばれる関数
+   */
   onDateChange: (date: Dayjs) => void;
 };
 

diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
@@ -15,21 +15,46 @@ import {
   ClickState,
   ClickStateType,
 } from "../Calendar/CalendarRange/constants";
-import { DateRange } from "../Calendar/CalendarRange/types";
+
+export type DateRange = {
+  startDate: Dayjs;
+  endDate: Dayjs;
+};
 
 export type NewDateRangePickerProps = {
+  /**
+   * 開始日
+   * @default dayjs()
+   */
   startDate: Dayjs;
+  /**
+   * 終了日
+   * @default dayjs()
+   */
   endDate: Dayjs;
+  /**
+   * エラーメッセージのテキスト
+   */
   errorText?: string;
+  /**
+   * カレンダーの左に表示するアクション
+   */
   actions?: Action[];
+  /**
+   * 入力を無効にする
+   * @default false
+   */
   disabled?: boolean;
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
    * @default () => false
    */
   isOutsideRange?: (date: Dayjs) => boolean;
-  onDatesChange: (date: DateRange) => void;
+  /**
+   * 日付が変更されたときに呼ばれる関数
+   */
+  onDatesChange: (dates: DateRange) => void;
 };
 
 /**

diff --git a/src/components/NewDateRangePicker/index.ts b/src/components/NewDateRangePicker/index.ts
@@ -1 +1,2 @@
 export { default } from "./NewDateRangePicker";
+export type { NewDateRangePickerProps, DateRange } from "./NewDateRangePicker";