From 5be9167cc156acce1117d6173fc323912e7a6f16 Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Mon, 9 Jun 2025 15:29:53 +0900 Subject: [PATCH 01/11] fix(accordion): hide triangle list marker in Safari --- src/components/Accordion/Accordion.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index bb7cf9f..9b80bc6 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -27,11 +27,11 @@ export const AccordionSummary = (props: AccordionSummaryProps) => { return ( From 62c5712fe3601ff899abf508b7934ff6f10142f4 Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Mon, 9 Jun 2025 15:54:00 +0900 Subject: [PATCH 02/11] feat(calendar): add a story for calendar component --- src/components/Calendar/Calendar.stories.tsx | 491 +++++++++++++++++++ 1 file changed, 491 insertions(+) create mode 100644 src/components/Calendar/Calendar.stories.tsx diff --git a/src/components/Calendar/Calendar.stories.tsx b/src/components/Calendar/Calendar.stories.tsx new file mode 100644 index 0000000..d18ad27 --- /dev/null +++ b/src/components/Calendar/Calendar.stories.tsx @@ -0,0 +1,491 @@ +import { type CalendarDate, getLocalTimeZone, parseDate, today } from '@internationalized/date'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import React, { useState } from 'react'; +import { + Calendar, + CalendarCell, + CalendarGrid, + CalendarGridBody, + CalendarGridHeader, + CalendarHeaderCell, +} from 'react-aria-components'; +import { Button, Select } from '../'; + +const meta = { + id: 'Component/DADS v2/Calendar', + title: 'Component/カレンダー', + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +/** 静的なマークアップのみ */ +export const Static: Story = { + render: () => ( +
+
+ +
+ +

2月

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ 日 + + 月 + + 火 + + 水 + + 木 + + 金 + + 土 +
+ +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + +
+
+ + +
+
+ ), +}; + +/** + * NPMパッケージ`react-aria-components`を使用した動的な動作例 + * + * ※あくまでも動作例であり、当該パッケージの利用を推奨する意図はありません。 + */ +export const UsingReactAriaComponents: Story = { + render: () => { + const [date, setDate] = useState(parseDate('2025-02-18')); + const [focusedDate, setFocusedDate] = useState(parseDate('2025-02-18')); + + return ( + <> +

+ 選択中の日付：{date?.toString()} +

+ + +
+ +
+ +

{focusedDate?.month}月

+ +
+
+ + + {(day) => ( + + {day} + + )} + + + {(date) => ( + + )} + + +
+ + +
+ + + ); + }, +}; From 7fe431ee885ef17bccba21514f7caac2a350e0d5 Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Mon, 9 Jun 2025 15:57:16 +0900 Subject: [PATCH 03/11] fix(date-picker): every 3 fields should have aria-invalid="true" when error --- src/components/DatePicker/DatePicker.stories.tsx | 5 ++++- .../SeparatedDatePicker/SeparatedDatePicker.stories.tsx | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx index 381c326..48d68ea 100644 --- a/src/components/DatePicker/DatePicker.stories.tsx +++ b/src/components/DatePicker/DatePicker.stories.tsx @@ -129,21 +129,24 @@ export const Errored: Story = { )} - ＊年を入力してください。 + ＊正しい日付を入力してください。 ); }, diff --git a/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx b/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx index 31a0342..f824dce 100644 --- a/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx +++ b/src/components/SeparatedDatePicker/SeparatedDatePicker.stories.tsx @@ -109,13 +109,15 @@ export const Errored: Story = { - ＊年を入力してください。 + ＊正しい日付を入力してください。 ); }, From 217f8263d97f690a7d14052b390ed044badc0b13 Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Mon, 9 Jun 2025 15:58:27 +0900 Subject: [PATCH 04/11] chore: disable Biome's 11y/noLabelWithoutControl rule --- biome.json | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/biome.json b/biome.json index 3085a2e..596d0e8 100644 --- a/biome.json +++ b/biome.json @@ -39,14 +39,7 @@ }, "a11y": { "useValidAnchor": "off", - "noLabelWithoutControl": { - "level": "error", - "options": { - "inputComponents": ["Checkbox", "InputText", "Radio", "Select", "Textarea"], - "labelAttributes": [], - "labelComponents": [] - } - } + "noLabelWithoutControl": "off" } } } From a0d8ce8ee6763772c1c9e68913d88d2a28d7fa7e Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Mon, 9 Jun 2025 16:01:16 +0900 Subject: [PATCH 05/11] fix(checkbox): keep focus when checked --- src/components/Checkbox/Checkbox.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index ddc8e1b..cb702d3 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -14,7 +14,7 @@ export const Checkbox = forwardRef((props, ref) e.preventDefault(); }; - const Checkbox = () => ( + const checkbox = ( ((props, ref) className='flex w-fit items-start py-2 data-[size=sm]:gap-1 data-[size=md]:gap-2 data-[size=lg]:gap-2' data-size={size} > - + {checkbox} ((props, ref) ) : ( - + checkbox ); }); From bf5feeea783eabfb16a8993fe1ee2ffd7c0f3cab Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Mon, 9 Jun 2025 16:01:29 +0900 Subject: [PATCH 06/11] fix(radio): keep focus when checked --- src/components/Radio/Radio.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx index 56a6309..edd4629 100644 --- a/src/components/Radio/Radio.tsx +++ b/src/components/Radio/Radio.tsx @@ -14,7 +14,7 @@ export const Radio = forwardRef((props, ref) => { e.preventDefault(); }; - const Radio = () => ( + const radio = ( ((props, ref) => { className='flex w-fit items-start py-2 data-[size=sm]:gap-1 data-[size=md]:gap-2 data-[size=lg]:gap-3' data-size={size} > - + {radio} ((props, ref) => { ) : ( - + radio ); }); From a1e1b55c8319265a845bc2730aeb17c4329d3d0f Mon Sep 17 00:00:00 2001 From: SHIMADA Takayuki Date: Mon, 9 Jun 2025 16:03:38 +0900 Subject: [PATCH 07/11] fix(date-picker): correct label and functionality of calendar's clear button --- src/components/DatePicker/DatePicker.stories.tsx | 8 ++++++-- .../SeparatedDatePicker/SeparatedDatePicker.stories.tsx | 8 ++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/DatePicker/DatePicker.stories.tsx b/src/components/DatePicker/DatePicker.stories.tsx index 48d68ea..5d7c8a3 100644 --- a/src/components/DatePicker/DatePicker.stories.tsx +++ b/src/components/DatePicker/DatePicker.stories.tsx @@ -357,8 +357,12 @@ export const WithCalendar: Story = {
-