From 9066c10fd5ff17aebbe6e0243701cb9ec726ed3a Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Wed, 23 Apr 2025 11:13:00 +0900 Subject: [PATCH 1/4] feat: add DatePicker and SeparatedDatePicker --- .../DatePicker/DatePicker.stories.tsx | 406 ++++++++++++++++++ src/components/DatePicker/DatePicker.tsx | 77 ++++ src/components/DatePicker/index.ts | 5 + .../parts/DatePickerCalendarButton.tsx | 33 ++ .../DatePicker/parts/DatePickerDate.tsx | 23 + .../DatePicker/parts/DatePickerMonth.tsx | 23 + .../DatePicker/parts/DatePickerYear.tsx | 23 + .../SeparatedDatePicker.stories.tsx | 358 +++++++++++++++ .../SeparatedDatePicker.tsx | 23 + src/components/SeparatedDatePicker/index.ts | 5 + .../SeparatedDatePickerCalendarButton.tsx | 33 ++ .../parts/SeparatedDatePickerDate.tsx | 27 ++ .../parts/SeparatedDatePickerMonth.tsx | 27 ++ .../parts/SeparatedDatePickerYear.tsx | 27 ++ src/components/index.ts | 2 + src/index.ts | 2 + 16 files changed, 1094 insertions(+) create mode 100644 src/components/DatePicker/DatePicker.stories.tsx create mode 100644 src/components/DatePicker/DatePicker.tsx create mode 100644 src/components/DatePicker/index.ts create mode 100644 src/components/DatePicker/parts/DatePickerCalendarButton.tsx create mode 100644 src/components/DatePicker/parts/DatePickerDate.tsx create mode 100644 src/components/DatePicker/parts/DatePickerMonth.tsx create mode 100644 src/components/DatePicker/parts/DatePickerYear.tsx create mode 100644 src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx create mode 100644 src/components/SeparatedDatePicker/SeparatedDatePicker.tsx create mode 100644 src/components/SeparatedDatePicker/index.ts create mode 100644 src/components/SeparatedDatePicker/parts/SeparatedDatePickerCalendarButton.tsx create mode 100644 src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx create mode 100644 src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx create mode 100644 src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000..8c2d58f --- /dev/null +++ b/src/components/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,406 @@ +import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date'; +import type { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; +import { + Calendar, + CalendarCell, + CalendarGrid, + CalendarGridBody, + CalendarGridHeader, + CalendarHeaderCell, + DatePicker as ReactAriaDatePicker, + Dialog, + Popover, + type DateValue, +} from 'react-aria-components'; +import { + Button, + DatePicker, + DatePickerCalendarButton, + DatePickerDate, + DatePickerMonth, + DatePickerYear, + ErrorText, + Legend, + RequirementBadge, + Select, + SupportText, +} from '..'; + +/** + * Defaultタイプのデートピッカー。 + * 左右キーで年月日フィールド間を移動する機能を持ちます。 + * + * SeparatedタイプはSeparatedDatePickerコンポーネントを参照してください。 + */ +const meta = { + title: 'Component/DADS v2/DatePicker/DatePicker', + tags: ['autodocs'], + component: DatePicker, + argTypes: { + size: { + type: 'string', + description: 'デートピッカーのサイズを以下から選択します。', + control: { type: 'radio' }, + options: ['lg', 'md', 'sm'], + table: { + defaultValue: { summary: 'lg' }, + type: { summary: "'lg' | 'md' | 'sm'" }, + }, + }, + isError: { + description: 'エラー状態であるかどうかを指定します。', + control: { type: 'boolean' }, + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, + }, + isDisabled: { + description: '無効状態であるかどうかを指定します。', + control: { type: 'boolean' }, + table: { + defaultValue: { summary: 'false' }, + type: { summary: 'boolean' }, + }, + }, + }, + args: { + size: 'lg', + isError: false, + isDisabled: false, + children: ({ yearRef, monthRef, dateRef }) => ( + <> + + + + + ), + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = {}; + +/** 項目ラベルやサポートテキスト等と一緒に表示した例 */ +export const WithFieldset: Story = { + render({ ...args }) { + return ( +
+ + 日付※必須 + + 例：2025年01月20日 + + {({ yearRef, monthRef, dateRef }) => ( + <> + + + + + )} + +
+ ); + }, +}; + +/** + * 項目ラベルやサポートテキスト等と一緒に表示した例 + * + * Defaultタイプはすべての入力フィールドがエラー状態になります。 + */ +export const Errored: Story = { + args: { + isError: true, + }, + render({ ...args }) { + return ( +
+ + 日付※必須 + + 例：2025年01月20日 + + {({ yearRef, monthRef, dateRef }) => ( + <> + + + + + )} + + ＊年を入力してください。 +
+ ); + }, +}; + +/** + * Disabled状態を表示した例 + */ +export const Disabled: Story = { + args: { + isDisabled: true, + }, + render({ ...args }) { + return ( +
+ + 日付※任意 + + 例：2025年01月20日 + + {({ yearRef, monthRef, dateRef }) => ( + <> + + + + + )} + +
+ ); + }, +}; + +/** カレンダーで日付を選択できるようにした例 */ +export const WithCalendar: Story = { + render({ size, ...args }) { + const [yearInput, setYearInput] = useState(''); + const [monthInput, setMonthInput] = useState(''); + const [dayInput, setDayInput] = useState(''); + + function handleCalendarChange(newDate: DateValue | null) { + if (newDate !== null) { + setYearInput(String(newDate.year)); + setMonthInput(String(newDate.month).padStart(2, '0')); + setDayInput(String(newDate.day).padStart(2, '0')); + } else { + setYearInput(''); + setMonthInput(''); + setDayInput(''); + } + } + + return ( + + {({ state }) => { + const updateCalendarDate = () => { + const year = Number.parseInt(yearInput); + const month = Number.parseInt(monthInput); + const day = Number.parseInt(dayInput); + + if (!Number.isNaN(year) && !Number.isNaN(month) && !Number.isNaN(day)) { + state.setValue(new CalendarDate(year, month, day)); + } else { + state.setValue(null); + } + }; + + return ( + <> + + {({ yearRef, monthRef, dateRef }) => ( + <> + setYearInput(e.target.value)} + onBlur={updateCalendarDate} + /> + setMonthInput(e.target.value)} + onBlur={updateCalendarDate} + /> + setDayInput(e.target.value)} + onBlur={updateCalendarDate} + /> + + )} + + state.setOpen(true)} + /> + + + + {({ state: calendarState }) => ( + <> +
+ +
+ +

{calendarState.focusedDate.month}月

+ +
+
+ + + {(day) => ( + + {day} + + )} + + + {(date) => ( + + )} + + +
+ + +
+ + )} + + + + + ); + }} + + ); + }, +}; + +/** 年月または月日のみのタイプ */ +export const Partial: Story = { + render({ ...args }) { + return ( +
+ + {({ yearRef, monthRef }) => ( + <> + + + + )} + + + + {({ monthRef, dateRef }) => ( + <> + + + + )} + +
+ ); + }, +}; diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx new file mode 100644 index 0000000..fec648e --- /dev/null +++ b/src/components/DatePicker/DatePicker.tsx @@ -0,0 +1,77 @@ +import { type ComponentProps, type KeyboardEvent, type Ref, useRef } from 'react'; + +export type DatePickerSize = 'lg' | 'md' | 'sm'; + +export type DatePickerProps = Omit, 'children'> & { + size?: DatePickerSize; + isError?: boolean; + isDisabled?: boolean; + children: (props: { + yearRef: Ref; + monthRef: Ref; + dateRef: Ref; + }) => JSX.Element; +}; + +export const DatePicker = (props: DatePickerProps) => { + const { className, size = 'lg', isError, isDisabled, children, ...rest } = props; + + const yearRef = useRef(null); + const monthRef = useRef(null); + const dateRef = useRef(null); + + function handleKeyDown(event: KeyboardEvent) { + if (event.key === 'ArrowRight') { + moveRight(event); + } else if (event.key === 'ArrowLeft') { + moveLeft(event); + } else if (event.key.match(/^[^0-9]$/)) { + if (!event.ctrlKey && !event.metaKey) { + event.preventDefault(); + } + } + } + + function moveRight(event: KeyboardEvent) { + const input = event.target as HTMLInputElement; + if (input.selectionStart !== input.selectionEnd) { + return; + } + if (input.selectionEnd === input.value.length) { + event.preventDefault(); + if (input === yearRef.current) { + monthRef.current?.focus(); + } else if (input === monthRef.current) { + dateRef.current?.focus(); + } + } + } + + function moveLeft(event: KeyboardEvent) { + const input = event.target as HTMLInputElement; + if (input.selectionStart !== input.selectionEnd) { + return; + } + if (input.selectionStart === 0) { + event.preventDefault(); + if (input === monthRef.current) { + yearRef.current?.focus(); + } else if (input === dateRef.current) { + monthRef.current?.focus(); + } + } + } + + return ( +
+ {children({ yearRef, monthRef, dateRef })} +
+ ); +}; diff --git a/src/components/DatePicker/index.ts b/src/components/DatePicker/index.ts new file mode 100644 index 0000000..4344c21 --- /dev/null +++ b/src/components/DatePicker/index.ts @@ -0,0 +1,5 @@ +export * from './DatePicker'; +export * from './parts/DatePickerCalendarButton'; +export * from './parts/DatePickerDate'; +export * from './parts/DatePickerMonth'; +export * from './parts/DatePickerYear'; diff --git a/src/components/DatePicker/parts/DatePickerCalendarButton.tsx b/src/components/DatePicker/parts/DatePickerCalendarButton.tsx new file mode 100644 index 0000000..1c16eec --- /dev/null +++ b/src/components/DatePicker/parts/DatePickerCalendarButton.tsx @@ -0,0 +1,33 @@ +import { type ComponentProps, forwardRef } from 'react'; +import type { DatePickerSize } from '../DatePicker'; + +export type DatePickerCalendarButtonProps = ComponentProps<'button'> & { + size?: DatePickerSize; +}; + +export const DatePickerCalendarButton = forwardRef< + HTMLButtonElement, + DatePickerCalendarButtonProps +>((props, ref) => { + const { className, size = 'lg', ...rest } = props; + + return ( + + ); +}); diff --git a/src/components/DatePicker/parts/DatePickerDate.tsx b/src/components/DatePicker/parts/DatePickerDate.tsx new file mode 100644 index 0000000..a27bb9a --- /dev/null +++ b/src/components/DatePicker/parts/DatePickerDate.tsx @@ -0,0 +1,23 @@ +import { type ComponentProps, forwardRef } from 'react'; + +export type DatePickerDateProps = ComponentProps<'input'> & {}; + +export const DatePickerDate = forwardRef((props, ref) => { + const { className, 'aria-disabled': disabled, readOnly, ...rest } = props; + + return ( + + ); +}); diff --git a/src/components/DatePicker/parts/DatePickerMonth.tsx b/src/components/DatePicker/parts/DatePickerMonth.tsx new file mode 100644 index 0000000..b4b8c77 --- /dev/null +++ b/src/components/DatePicker/parts/DatePickerMonth.tsx @@ -0,0 +1,23 @@ +import { type ComponentProps, forwardRef } from 'react'; + +export type DatePickerMonthProps = ComponentProps<'input'> & {}; + +export const DatePickerMonth = forwardRef((props, ref) => { + const { className, 'aria-disabled': disabled, readOnly, ...rest } = props; + + return ( + + ); +}); diff --git a/src/components/DatePicker/parts/DatePickerYear.tsx b/src/components/DatePicker/parts/DatePickerYear.tsx new file mode 100644 index 0000000..b651774 --- /dev/null +++ b/src/components/DatePicker/parts/DatePickerYear.tsx @@ -0,0 +1,23 @@ +import { type ComponentProps, forwardRef } from 'react'; + +export type DatePickerYearProps = ComponentProps<'input'> & {}; + +export const DatePickerYear = forwardRef((props, ref) => { + const { className, 'aria-disabled': disabled, readOnly, ...rest } = props; + + return ( + + ); +}); diff --git a/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx b/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx new file mode 100644 index 0000000..b41bf4f --- /dev/null +++ b/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx @@ -0,0 +1,358 @@ +import { CalendarDate, getLocalTimeZone, today } from '@internationalized/date'; +import type { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; +import { + Calendar, + CalendarCell, + CalendarGrid, + CalendarGridBody, + CalendarGridHeader, + CalendarHeaderCell, + DatePicker as ReactAriaDatePicker, + Dialog, + Popover, + type DateValue, +} from 'react-aria-components'; +import { + Button, + ErrorText, + Legend, + RequirementBadge, + Select, + SeparatedDatePicker, + SeparatedDatePickerCalendarButton, + SeparatedDatePickerDate, + SeparatedDatePickerMonth, + SeparatedDatePickerYear, + SupportText, +} from '..'; + +/** + * Separatedタイプのデートピッカー。 + * 左右キーで年月日フィールド間を移動する機能を持ちます。 + * + * DefaultタイプはDatePickerコンポーネントを参照してください。 + */ +const meta = { + title: 'Component/DADS v2/DatePicker/SeparatedDatePicker', + tags: ['autodocs'], + component: SeparatedDatePicker, + argTypes: { + size: { + type: 'string', + description: 'デートピッカーのサイズを以下から選択します。', + control: { type: 'radio' }, + options: ['lg', 'md', 'sm'], + table: { + defaultValue: { summary: 'lg' }, + type: { summary: "'lg' | 'md' | 'sm'" }, + }, + }, + }, + args: { + size: 'lg', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + render({ ...args }) { + return ( + + + + + + ); + }, +}; + +/** 項目ラベルやサポートテキスト等と一緒に表示した例 */ +export const WithFieldset: Story = { + render({ ...args }) { + return ( +
+ + 日付※必須 + + 西暦、半角 + + + + + +
+ ); + }, +}; + +/** + * 項目ラベルやサポートテキスト等と一緒に表示した例 + * + * Separatedタイプは個別の入力フィールドがエラー状態になります。 + */ +export const Errored: Story = { + render({ ...args }) { + return ( +
+ + 日付※必須 + + 西暦、半角 + + + + + + ＊年を入力してください。 +
+ ); + }, +}; + +/** + * Disabled状態を表示した例 + * + * 無効化するために`disabled`属性ではなく`aria-disabled`属性を使用します。 + */ +export const Disabled: Story = { + render({ ...args }) { + return ( +
+ + 日付※任意 + + 西暦、半角 + + + + + +
+ ); + }, +}; + +/** カレンダーで日付を選択できるようにした例 */ +export const WithCalendar: Story = { + render({ size, ...args }) { + const [yearInput, setYearInput] = useState(''); + const [monthInput, setMonthInput] = useState(''); + const [dayInput, setDayInput] = useState(''); + + function handleCalendarChange(newDate: DateValue | null) { + if (newDate !== null) { + setYearInput(String(newDate.year)); + setMonthInput(String(newDate.month).padStart(2, '0')); + setDayInput(String(newDate.day).padStart(2, '0')); + } else { + setYearInput(''); + setMonthInput(''); + setDayInput(''); + } + } + + return ( + + {({ state }) => { + const updateCalendarDate = () => { + const year = Number.parseInt(yearInput); + const month = Number.parseInt(monthInput); + const day = Number.parseInt(dayInput); + + if (!Number.isNaN(year) && !Number.isNaN(month) && !Number.isNaN(day)) { + state.setValue(new CalendarDate(year, month, day)); + } else { + state.setValue(null); + } + }; + + return ( + <> + + setYearInput(e.target.value)} + onBlur={updateCalendarDate} + /> + setMonthInput(e.target.value)} + onBlur={updateCalendarDate} + /> + setDayInput(e.target.value)} + onBlur={updateCalendarDate} + /> + + state.setOpen(true)} + /> + + + + {({ state: calendarState }) => ( + <> +
+ +
+ +

{calendarState.focusedDate.month}月

+ +
+
+ + + {(day) => ( + + {day} + + )} + + + {(date) => ( + + )} + + +
+ + +
+ + )} + + + + + ); + }} + + ); + }, +}; + +/** 年月または月日のみのタイプ */ +export const Partial: Story = { + render({ ...args }) { + return ( + <> +
+ + + + + + + + + +
+ + ); + }, +}; diff --git a/src/components/SeparatedDatePicker/SeparatedDatePicker.tsx b/src/components/SeparatedDatePicker/SeparatedDatePicker.tsx new file mode 100644 index 0000000..be08a1c --- /dev/null +++ b/src/components/SeparatedDatePicker/SeparatedDatePicker.tsx @@ -0,0 +1,23 @@ +import type { ComponentProps } from 'react'; + +export type SeparatedDatePickerSize = 'lg' | 'md' | 'sm'; + +export type SeparatedDatePickerProps = ComponentProps<'div'> & { + size?: SeparatedDatePickerSize; +}; + +export const SeparatedDatePicker = (props: SeparatedDatePickerProps) => { + const { className, size = 'lg', children, ...rest } = props; + + return ( +
+
+ {children} +
+
+ ); +}; diff --git a/src/components/SeparatedDatePicker/index.ts b/src/components/SeparatedDatePicker/index.ts new file mode 100644 index 0000000..afb90bd --- /dev/null +++ b/src/components/SeparatedDatePicker/index.ts @@ -0,0 +1,5 @@ +export * from './parts/SeparatedDatePickerCalendarButton'; +export * from './parts/SeparatedDatePickerDate'; +export * from './parts/SeparatedDatePickerMonth'; +export * from './parts/SeparatedDatePickerYear'; +export * from './SeparatedDatePicker'; diff --git a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerCalendarButton.tsx b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerCalendarButton.tsx new file mode 100644 index 0000000..6ab4e1c --- /dev/null +++ b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerCalendarButton.tsx @@ -0,0 +1,33 @@ +import { type ComponentProps, forwardRef } from 'react'; +import type { SeparatedDatePickerSize } from '../SeparatedDatePicker'; + +export type SeparatedDatePickerCalendarButtonProps = ComponentProps<'button'> & { + size?: SeparatedDatePickerSize; +}; + +export const SeparatedDatePickerCalendarButton = forwardRef< + HTMLButtonElement, + SeparatedDatePickerCalendarButtonProps +>((props, ref) => { + const { className, size = 'lg', ...rest } = props; + + return ( + + ); +}); diff --git a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx new file mode 100644 index 0000000..d85ed5d --- /dev/null +++ b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerDate.tsx @@ -0,0 +1,27 @@ +import { type ComponentProps, forwardRef } from 'react'; + +export type SeparatedDatePickerDateProps = ComponentProps<'input'> & {}; + +export const SeparatedDatePickerDate = forwardRef( + (props, ref) => { + const { className, 'aria-disabled': disabled, readOnly, ...rest } = props; + + return ( + + ); + }, +); diff --git a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx new file mode 100644 index 0000000..1ab6560 --- /dev/null +++ b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerMonth.tsx @@ -0,0 +1,27 @@ +import { type ComponentProps, forwardRef } from 'react'; + +export type SeparatedDatePickerMonthProps = ComponentProps<'input'> & {}; + +export const SeparatedDatePickerMonth = forwardRef( + (props, ref) => { + const { className, 'aria-disabled': disabled, readOnly, ...rest } = props; + + return ( + + ); + }, +); diff --git a/src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx new file mode 100644 index 0000000..7bbea21 --- /dev/null +++ b/src/components/SeparatedDatePicker/parts/SeparatedDatePickerYear.tsx @@ -0,0 +1,27 @@ +import { type ComponentProps, forwardRef } from 'react'; + +export type SeparatedDatePickerYearProps = ComponentProps<'input'> & {}; + +export const SeparatedDatePickerYear = forwardRef( + (props, ref) => { + const { className, 'aria-disabled': disabled, readOnly, ...rest } = props; + + return ( + + ); + }, +); diff --git a/src/components/index.ts b/src/components/index.ts index 14bb7a2..4920c0d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,6 +7,7 @@ export { export { BreadcrumbItem, BreadcrumbList, Breadcrumbs, BreadcrumbsLabel } from './Breadcrumbs'; export { Button, buttonBaseStyle, buttonSizeStyle, buttonVariantStyle } from './Button'; export { Checkbox } from './Checkbox'; +export * from './DatePicker'; export { Disclosure, DisclosureBackLink, DisclosureSummary } from './Disclosure'; export { Divider } from './Divider'; export { @@ -56,6 +57,7 @@ export { Ol, olStyle } from './Ol'; export { Radio } from './Radio'; export { RequirementBadge } from './RequirementBadge'; export { Select } from './Select'; +export * from './SeparatedDatePicker'; export { Slot } from './Slot'; export { SupportText } from './SupportText'; export { Textarea } from './Textarea'; diff --git a/src/index.ts b/src/index.ts index 43b1b7d..a4691d8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -10,6 +10,7 @@ export { buttonSizeStyle, buttonVariantStyle, Checkbox, + DatePicker, Disclosure, DisclosureBackLink, DisclosureSummary, @@ -39,6 +40,7 @@ export { Radio, RequirementBadge, Select, + SeparatedDatePicker, SupportText, Textarea, Ul, From 0750a994adab903a21df93609d7845d7f24df6ae Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Wed, 23 Apr 2025 11:14:12 +0900 Subject: [PATCH 2/4] feat: use date-* attributes for styling --- src/components/Divider/Divider.tsx | 17 ++++++++++------- src/components/Input/Input.tsx | 18 ++++++------------ src/components/Label/Label.tsx | 9 ++------- src/components/Legend/Legend.tsx | 9 ++------- .../RequirementBadge/RequirementBadge.tsx | 9 +++++---- src/components/Select/Select.tsx | 18 ++++++------------ src/components/Textarea/Textarea.tsx | 6 ++++-- 7 files changed, 35 insertions(+), 51 deletions(-) diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx index 30b20b1..d4e7137 100644 --- a/src/components/Divider/Divider.tsx +++ b/src/components/Divider/Divider.tsx @@ -2,12 +2,6 @@ import type { ComponentProps } from 'react'; export type DividerColor = 'gray-420' | 'gray-536' | 'black'; -export const DividerColorStyle: { [key in DividerColor]: string } = { - 'gray-420': 'border-solid-gray-420', - 'gray-536': 'border-solid-gray-536', - black: 'border-black', -}; - export type DividerProps = ComponentProps<'hr'> & { color?: DividerColor; }; @@ -15,5 +9,14 @@ export type DividerProps = ComponentProps<'hr'> & { export const Divider = (props: DividerProps) => { const { className, color = 'gray-420', ...rest } = props; - return
; + return ( +
+ ); }; diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 6029d35..b378613 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -2,15 +2,6 @@ import { type ComponentProps, forwardRef } from 'react'; export type InputBlockSize = 'lg' | 'md' | 'sm'; -export const InputBlockSizeStyle: { [key in InputBlockSize]: string } = { - // NOTE: - // Tailwind CSS (v3.4.4) does not have any utility classes for logical properties of sizing. - // Once it　is officially released, we will replace them with classes like `bs-14`. - lg: 'h-14', - md: 'h-12', - sm: 'h-10', -}; - export type InputProps = ComponentProps<'input'> & { isError?: boolean; blockSize?: InputBlockSize; @@ -22,13 +13,16 @@ export const Input = forwardRef((props, ref) => { return ( & { size?: LabelSize; }; @@ -20,9 +14,10 @@ export const Label = (props: LabelProps) => {