From a932ccea07202179e69f1498e65b1701ff1f7d03 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 27 Nov 2024 21:55:14 +0900 Subject: [PATCH 1/8] =?UTF-8?q?docs:=20SingleComboBox=20=E3=81=AE=20Story?= =?UTF-8?q?=20=E3=82=92=E8=A6=8B=E7=9B=B4=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SingleComboBox.test.tsx} | 2 +- .../{ => SingleComboBox}/SingleComboBox.tsx | 21 +- .../ComboBox/SingleComboBox/index.ts | 1 + .../stories/SingleComboBox.stories.tsx | 166 ++++++++++ .../stories/VRTSingleComboBox.stories.tsx | 214 ++++++++++++ .../stories/singleComboBox.pict | 5 + .../ComboBox/SingleCombobox.stories.tsx | 305 ------------------ .../ComboBox/VRTSingleCombobox.stories.tsx | 53 --- 8 files changed, 397 insertions(+), 370 deletions(-) rename packages/smarthr-ui/src/components/ComboBox/{SingleCombobox.test.tsx => SingleComboBox/SingleComboBox.test.tsx} (99%) rename packages/smarthr-ui/src/components/ComboBox/{ => SingleComboBox}/SingleComboBox.tsx (96%) create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict delete mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx delete mode 100644 packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.test.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.test.tsx similarity index 99% rename from packages/smarthr-ui/src/components/ComboBox/SingleCombobox.test.tsx rename to packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.test.tsx index 18fbdc3b77..5926c46d44 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.test.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.test.tsx @@ -2,7 +2,7 @@ import { userEvent } from '@storybook/test' import { render, screen } from '@testing-library/react' import React, { ComponentProps, act } from 'react' -import { FormControl } from '../FormControl' +import { FormControl } from '../../FormControl' import { SingleComboBox } from './SingleComboBox' diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx similarity index 96% rename from packages/smarthr-ui/src/components/ComboBox/SingleComboBox.tsx rename to packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx index 11c1ab47d6..110ce2a801 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx @@ -14,18 +14,17 @@ import React, { import innerText from 'react-innertext' import { tv } from 'tailwind-variants' -import { useClick } from '../../hooks/useClick' -import { genericsForwardRef } from '../../libs/util' -import { textColor } from '../../themes' -import { UnstyledButton } from '../Button' -import { FaCaretDownIcon, FaCircleXmarkIcon } from '../Icon' -import { Input } from '../Input' +import { useClick } from '../../../hooks/useClick' +import { genericsForwardRef } from '../../../libs/util' +import { textColor } from '../../../themes' +import { UnstyledButton } from '../../Button' +import { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon' +import { Input } from '../../Input' +import { useListBox } from '../useListBox' +import { useOptions } from '../useOptions' -import { useListBox } from './useListBox' -import { useOptions } from './useOptions' - -import type { BaseProps, ComboBoxItem } from './types' -import type { DecoratorsType } from '../../types' +import type { DecoratorsType } from '../../../types' +import type { BaseProps, ComboBoxItem } from '../types' type Props = BaseProps & { /** diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts new file mode 100644 index 0000000000..f37ab59f1d --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts @@ -0,0 +1 @@ +export { SingleComboBox } from './SingleComboBox' diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx new file mode 100644 index 0000000000..6712742385 --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -0,0 +1,166 @@ +import { Meta, StoryObj } from '@storybook/react' +import React from 'react' + +import { FormControl } from '../../../FormControl' +import { FaCirclePlusIcon } from '../../../Icon' +import { Stack } from '../../../Layout' +import { SingleComboBox } from '../SingleComboBox' + +const defaultItems = { + 'option 1': { + label: 'option 1', + value: 'value-1', + data: { + name: 'test', + age: 23, + }, + }, + 'option 2': { + label: 'option 2', + value: 'value-2', + data: { + name: 'test 2', + age: 34, + }, + }, + 'option 3': { + label: 'option 3', + value: 'value-3', + disabled: true, + }, + 'option 4': { + label: 'option 4', + value: 'value-4', + }, + 'option 5': { + label: 'option 5', + value: 'value-5', + }, + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { + label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', + value: 'value-6', + }, + アイテムのラベルがReactNodeの場合: { + label: ( + + アイテムのラベルがReactNodeの場合 + （ダミーテキストダミーテキストダミーテキストダミーテキスト） + + ), + value: 'value-7', + }, +} +const prefixes = { なし: '', あり: } + +export default { + title: 'Forms（フォーム）/SingleComboBox', + component: SingleComboBox, + args: { + items: Object.values(defaultItems), + selectedItem: null, + defaultItem: defaultItems['option 1'], + }, + argTypes: { + items: { control: 'object' }, + selectedItem: { + control: { type: 'select' }, + options: Object.keys(defaultItems), + mapping: defaultItems, + }, + defaultItem: { + control: { type: 'select' }, + options: Object.keys(defaultItems), + mapping: defaultItems, + }, + prefix: { + control: 'radio', + options: Object.keys(prefixes), + mapping: prefixes, + }, + }, + parameters: { + chromatic: { disableSnapshot: true }, + }, +} as Meta + +export const Playground: StoryObj = {} + +export const SelectedItem: StoryObj = { + name: 'selectedItem', + args: { + selectedItem: defaultItems['option 2'], + }, +} + +export const DefaultItem: StoryObj = { + name: 'defaultItem', + args: { + defaultItem: defaultItems['option 4'], + }, +} + +export const Prefix: StoryObj = { + name: 'prefix', + render: (args) => ( +
+ + + + + + + + +
+ ), +} + +export const Disabled: StoryObj = { + name: 'disabled', + args: { + disabled: true, + }, +} + +export const Error: StoryObj = { + name: 'error', + args: { + error: true, + }, +} + +export const Creatable: StoryObj = { + name: 'creatable', + args: { + creatable: true, + dropdownHelpMessage: '新しいアイテムを追加できます。', + }, +} + +export const IsLoading: StoryObj = { + name: 'isLoading', + args: { + isLoading: true, + }, +} + +export const Width: StoryObj = { + name: 'width', + args: { + width: '500px', + }, +} + +export const DropdownHelpMessage: StoryObj = { + name: 'dropdownHelpMessage', + args: { + dropdownHelpMessage: 'ヘルプメッセージ', + }, +} + +export const DropdownWidth: StoryObj = { + name: 'dropdownWidth', + args: { + dropdownWidth: '300px', + }, +} diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx new file mode 100644 index 0000000000..69118366cf --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -0,0 +1,214 @@ +import { action } from '@storybook/addon-actions' +import { Meta, StoryFn, StoryObj } from '@storybook/react' +import { userEvent, within } from '@storybook/test' +import React, { ReactNode, useCallback, useState } from 'react' + +import { FormControl } from '../../../FormControl' +import { FaCirclePlusIcon } from '../../../Icon' +import { InformationPanel } from '../../../InformationPanel' +import { Stack } from '../../../Layout' +import { SingleComboBox } from '../SingleComboBox' + +const defaultItems = { + 'option 1': { + label: 'option 1', + value: 'value-1', + data: { + name: 'test', + age: 23, + }, + }, + 'option 2': { + label: 'option 2', + value: 'value-2', + data: { + name: 'test 2', + age: 34, + }, + }, + 'option 3': { + label: 'option 3', + value: 'value-3', + disabled: true, + }, + 'option 4': { + label: 'option 4', + value: 'value-4', + }, + 'option 5': { + label: 'option 5', + value: 'value-5', + }, + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { + label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', + value: 'value-6', + }, + アイテムのラベルがReactNodeの場合: { + label: ( + + アイテムのラベルがReactNodeの場合 + （ダミーテキストダミーテキストダミーテキストダミーテキスト） + + ), + value: 'value-7', + }, +} + +const prefixes = { なし: '', あり: } + +/* pict singleComboBox.pict + * disabled error width prefix selectedItem + * false false なし なし あり + * false true あり あり なし + * true true あり なし あり + * true false あり あり なし + * true true なし なし なし + * true false なし あり あり + */ + +const _cases: Array[0], 'items'>> = [ + { + disabled: false, + error: false, + width: undefined, + prefix: undefined, + selectedItem: defaultItems['option 1'], + }, + { disabled: false, error: true, width: '15em', prefix: prefixes['あり'], selectedItem: null }, + { + disabled: true, + error: true, + width: '15em', + prefix: undefined, + selectedItem: + defaultItems[ + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）' + ], + }, + { disabled: true, error: false, width: '15em', prefix: prefixes['あり'], selectedItem: null }, + { disabled: true, error: true, width: undefined, prefix: undefined, selectedItem: null }, + { + disabled: true, + error: false, + width: undefined, + prefix: prefixes['あり'], + selectedItem: defaultItems['アイテムのラベルがReactNodeの場合'], + }, +] + +export default { + title: 'Forms（フォーム）/SingleComboBox/VRT', + component: SingleComboBox, + render: (args) => ( + +
+ + + +
+ {[undefined, 'hover', 'focus-visible'].map((id) => ( + + {_cases.map((props, i) => ( +
+ + + +
+ ))} + + ))} + + ), + args: { + items: Object.values(defaultItems), + }, + parameters: { + withTheming: true, + chromatic: { disableSnapshot: false }, + }, + tags: ['!autodocs', 'skip-test-runner'], +} as Meta + +export const VRT: StoryObj = {} + +type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any } + +const StoryFunctionSingleComboBox: StoryFn = () => { + const [items, setItems] = useState(Object.values(defaultItems)) + const [selectedItem, setSelectedItem] = useState(null) + const [seq, setSeq] = useState(0) + + const handleSelectItem = useCallback((item: Item) => { + action('onSelect')(item) + setSelectedItem(item) + }, []) + const handleClear = useCallback(() => { + action('onClear')() + setSelectedItem(null) + }, []) + const handleAddItem = useCallback( + (label: string) => { + action('onAdd')(label) + const newItem = { + label, + value: label, + } + setItems([...items, newItem]) + setSelectedItem(newItem) + setSeq(seq + 1) + }, + [items, seq], + ) + + const [itemsForDefault] = useState(Object.values(defaultItems)) + const [selectedItemForDefault, setSelectedItemForDefault] = useState(null) + + const handleSelectItemForDefault = useCallback((item: Item) => { + action('onSelect')(item) + setSelectedItemForDefault(item) + }, []) + const handleClearForDefault = useCallback(() => { + action('onClear')() + setSelectedItemForDefault(null) + }, []) + + return ( +
+ + + +
+ ) +} + +const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { + const canvas = within(canvasElement) + const textboxes = await canvas.findAllByRole('combobox') + await textboxes[0].focus() + const body = canvasElement.ownerDocument.body + const option = await within(body).findByText('option 1') + await userEvent.hover(option) + const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') + await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する +} +VRT.play = playSingle + +export const VRTForcedColors: StoryObj = { + ...VRT, + parameters: { + chromatic: { forcedColors: 'active' }, + }, +} diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict new file mode 100644 index 0000000000..13e92e19e3 --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict @@ -0,0 +1,5 @@ +disabled: true, false +error: true, false +width: あり, なし +prefix: あり, なし +selectedItem: あり, なし diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx deleted file mode 100644 index 45428c4d9b..0000000000 --- a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx +++ /dev/null @@ -1,305 +0,0 @@ -import { action } from '@storybook/addon-actions' -import { StoryFn } from '@storybook/react' -import React, { ReactNode, useCallback, useState } from 'react' - -import { FormControl } from '../FormControl' -import { Stack } from '../Layout' - -import { SingleComboBox } from '.' - -export default { - title: 'Forms（フォーム）/SingleComboBox', - component: SingleComboBox, - parameters: { - docs: { - source: { type: 'dynamic' }, - }, - }, -} - -const defaultItems = [ - { - label: 'option 1', - value: 'value-1', - data: { - name: 'test', - age: 23, - }, - }, - { - label: 'option 2', - value: 'value-2', - data: { - name: 'test 2', - age: 34, - }, - }, - { - label: 'option 3', - value: 'value-3', - disabled: true, - }, - { - label: 'option 4', - value: 'value-4', - }, - { - label: 'option 5', - value: 'value-5', - }, - { - label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', - value: 'value-6', - }, - { - label: ( - - アイテムのラベルがReactNodeの場合 - （ダミーテキストダミーテキストダミーテキストダミーテキスト） - - ), - value: 'value-7', - }, -] - -const manyItems = Array.from({ length: 2000 }).map((_, i) => ({ - label: `option ${i}`, - value: `option ${i}`, -})) - -type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any } - -export const SingleCombobox: StoryFn = () => { - const [items, setItems] = useState(defaultItems) - const [selectedItem, setSelectedItem] = useState(null) - const [seq, setSeq] = useState(0) - - const handleSelectItem = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItem(item) - }, []) - const handleClear = useCallback(() => { - action('onClear')() - setSelectedItem(null) - }, []) - const handleAddItem = useCallback( - (label: string) => { - action('onAdd')(label) - const newItem = { - label, - value: label, - } - setItems([...items, newItem]) - setSelectedItem(newItem) - setSeq(seq + 1) - }, - [items, seq], - ) - - const [itemsForDefault] = useState(defaultItems) - const [selectedItemForDefault, setSelectedItemForDefault] = useState(null) - - const handleSelectItemForDefault = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItemForDefault(item) - }, []) - const handleClearForDefault = useCallback(() => { - action('onClear')() - setSelectedItemForDefault(null) - }, []) - - return ( - - - { - action('onChangeSelected')(item) - setSelectedItem(item) - }} - onFocus={action('onFocus')} - onBlur={action('onBlur')} - data-test="single-combobox-default" - /> - - - - - - - - - - - - - - - - - - - - - - - - `no result.(${text})`, - destroyButtonIconAlt: (text) => `destroy.(${text})`, - }} - /> - - - - - - - - - - - - { - e.preventDefault() - handleClear() - }} - onChangeSelected={(item) => { - action('onChangeSelected')(item) - setSelectedItem(item) - }} - data-test="single-combobox-default" - /> - - - - -
{ - throw new Error('このsubmitは発火しません') - }} - > - - { - action('onChangeSelected')(item) - setSelectedItem(item) - }} - data-test="single-combobox-no-form-submit" - /> - -
- - ) -} diff --git a/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx deleted file mode 100644 index 1271b59c55..0000000000 --- a/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { StoryFn } from '@storybook/react' -import { userEvent, within } from '@storybook/test' -import React from 'react' - -import { InformationPanel } from '../InformationPanel' -import { Stack } from '../Layout' - -import { SingleCombobox as StoriesSingleComboBox } from './SingleCombobox.stories' - -import { SingleComboBox } from '.' - -export default { - title: 'Forms（フォーム）/SingleComboBox', - component: SingleComboBox, - parameters: { - withTheming: true, - }, -} - -export const VRTSingleCombobox: StoryFn = () => ( - - - Singleコンボボックスのリストを展開して1つ目の項目をホバーした状態で表示されます - - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} - - -) -const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { - const canvas = within(canvasElement) - const textboxes = await canvas.findAllByRole('combobox') - await textboxes[0].focus() - const body = canvasElement.ownerDocument.body - const option = await within(body).findByText('option 1') - await userEvent.hover(option) - const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') - await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する -} -VRTSingleCombobox.play = playSingle - -export const VRTForcedColorsSingleCombobox: StoryFn = () => ( - - - Chromatic 上では強制カラーモードで表示されます{' '} - - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} - - -) -VRTForcedColorsSingleCombobox.play = playSingle -VRTForcedColorsSingleCombobox.parameters = { - chromatic: { forcedColors: 'active' }, -} From 6d372380761ded263379b97db9b7ebd81a152188 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 27 Nov 2024 21:59:42 +0900 Subject: [PATCH 2/8] =?UTF-8?q?refactor:=20=E4=B8=8D=E8=A6=81=E3=81=AA?= =?UTF-8?q?=E9=96=A2=E6=95=B0=E7=AD=89=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/VRTSingleComboBox.stories.tsx | 65 +------------------ 1 file changed, 3 insertions(+), 62 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx index 69118366cf..367cc45793 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -1,11 +1,9 @@ -import { action } from '@storybook/addon-actions' -import { Meta, StoryFn, StoryObj } from '@storybook/react' +import { Meta, StoryObj } from '@storybook/react' import { userEvent, within } from '@storybook/test' -import React, { ReactNode, useCallback, useState } from 'react' +import React from 'react' import { FormControl } from '../../../FormControl' import { FaCirclePlusIcon } from '../../../Icon' -import { InformationPanel } from '../../../InformationPanel' import { Stack } from '../../../Layout' import { SingleComboBox } from '../SingleComboBox' @@ -136,64 +134,6 @@ export default { export const VRT: StoryObj = {} -type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any } - -const StoryFunctionSingleComboBox: StoryFn = () => { - const [items, setItems] = useState(Object.values(defaultItems)) - const [selectedItem, setSelectedItem] = useState(null) - const [seq, setSeq] = useState(0) - - const handleSelectItem = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItem(item) - }, []) - const handleClear = useCallback(() => { - action('onClear')() - setSelectedItem(null) - }, []) - const handleAddItem = useCallback( - (label: string) => { - action('onAdd')(label) - const newItem = { - label, - value: label, - } - setItems([...items, newItem]) - setSelectedItem(newItem) - setSeq(seq + 1) - }, - [items, seq], - ) - - const [itemsForDefault] = useState(Object.values(defaultItems)) - const [selectedItemForDefault, setSelectedItemForDefault] = useState(null) - - const handleSelectItemForDefault = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItemForDefault(item) - }, []) - const handleClearForDefault = useCallback(() => { - action('onClear')() - setSelectedItemForDefault(null) - }, []) - - return ( -
- - - -
- ) -} - const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { const canvas = within(canvasElement) const textboxes = await canvas.findAllByRole('combobox') @@ -204,6 +144,7 @@ const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する } + VRT.play = playSingle export const VRTForcedColors: StoryObj = { From 6aa24f9d50bf63e6a6241849f343bd6a2c0fb7ff Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 27 Nov 2024 22:04:08 +0900 Subject: [PATCH 3/8] =?UTF-8?q?refactor:=20=E4=B8=8D=E8=A6=81=E3=81=AA?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/VRTSingleComboBox.stories.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx index 367cc45793..1a2bbe7435 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -109,17 +109,15 @@ export default { /> - {[undefined, 'hover', 'focus-visible'].map((id) => ( - - {_cases.map((props, i) => ( -
- - - -
- ))} - - ))} + + {_cases.map((props, i) => ( +
+ + + +
+ ))} + ), args: { From 43d7c404402f2feb8ac15f9ccacf35d9cc8e8b0b Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Thu, 28 Nov 2024 09:54:29 +0900 Subject: [PATCH 4/8] =?UTF-8?q?chore:=20=20calender=E3=81=AEflaky=E3=82=92?= =?UTF-8?q?=E8=A7=A3=E6=B6=88=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Calendar/stories/VRTCalendar.stories.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx b/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx index bb1a1db85b..4e3ca3126e 100644 --- a/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx +++ b/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx @@ -1,8 +1,8 @@ -import { fireEvent, userEvent, within } from '@storybook/test' +import { userEvent, within } from '@storybook/test' import dayjs from 'dayjs' import React from 'react' -import { Cluster, Stack } from '../../Layout' +import { Cluster } from '../../Layout' import { Calendar } from '../Calendar' import type { Meta, StoryObj } from '@storybook/react' @@ -11,17 +11,17 @@ export default { title: 'Data Display（データ表示）/Calendar/VRT', render: (args) => ( - + @@ -49,9 +49,9 @@ export const VRTFocusVisible: StoryObj = { ...VRT, render: (args) => ( ), From f3662606a83f30c7226eec7b1744b1cf70ac1616 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Thu, 28 Nov 2024 22:02:02 +0900 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=E6=8C=87=E6=91=98=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/SingleComboBox.stories.tsx | 31 +++-- .../stories/VRTSingleComboBox.stories.tsx | 109 ++++-------------- 2 files changed, 39 insertions(+), 101 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index 6712742385..92a9a1599b 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -1,12 +1,13 @@ +/* eslint-disable smarthr/a11y-input-in-form-control */ import { Meta, StoryObj } from '@storybook/react' -import React from 'react' +import React, { useState } from 'react' -import { FormControl } from '../../../FormControl' import { FaCirclePlusIcon } from '../../../Icon' import { Stack } from '../../../Layout' import { SingleComboBox } from '../SingleComboBox' -const defaultItems = { +// eslint-disable-next-line storybook/prefer-pascal-case +export const defaultItems = { 'option 1': { label: 'option 1', value: 'value-1', @@ -50,7 +51,9 @@ const defaultItems = { value: 'value-7', }, } -const prefixes = { なし: '', あり: } + +// eslint-disable-next-line storybook/prefer-pascal-case +export const prefixes = { なし: '', あり: } export default { title: 'Forms（フォーム）/SingleComboBox', @@ -58,7 +61,6 @@ export default { args: { items: Object.values(defaultItems), selectedItem: null, - defaultItem: defaultItems['option 1'], }, argTypes: { items: { control: 'object' }, @@ -81,6 +83,7 @@ export default { parameters: { chromatic: { disableSnapshot: true }, }, + excludeStories: ['defaultItems', 'prefixes'], } as Meta export const Playground: StoryObj = {} @@ -102,16 +105,10 @@ export const DefaultItem: StoryObj = { export const Prefix: StoryObj = { name: 'prefix', render: (args) => ( -
- - - - - - - - -
+ + + + ), } @@ -147,7 +144,7 @@ export const IsLoading: StoryObj = { export const Width: StoryObj = { name: 'width', args: { - width: '500px', + width: '20rem', }, } @@ -161,6 +158,6 @@ export const DropdownHelpMessage: StoryObj = { export const DropdownWidth: StoryObj = { name: 'dropdownWidth', args: { - dropdownWidth: '300px', + dropdownWidth: '30rem', }, } diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx index 1a2bbe7435..c0de979343 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -1,58 +1,12 @@ +/* eslint-disable smarthr/a11y-input-in-form-control */ import { Meta, StoryObj } from '@storybook/react' import { userEvent, within } from '@storybook/test' import React from 'react' -import { FormControl } from '../../../FormControl' -import { FaCirclePlusIcon } from '../../../Icon' import { Stack } from '../../../Layout' import { SingleComboBox } from '../SingleComboBox' -const defaultItems = { - 'option 1': { - label: 'option 1', - value: 'value-1', - data: { - name: 'test', - age: 23, - }, - }, - 'option 2': { - label: 'option 2', - value: 'value-2', - data: { - name: 'test 2', - age: 34, - }, - }, - 'option 3': { - label: 'option 3', - value: 'value-3', - disabled: true, - }, - 'option 4': { - label: 'option 4', - value: 'value-4', - }, - 'option 5': { - label: 'option 5', - value: 'value-5', - }, - 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { - label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', - value: 'value-6', - }, - アイテムのラベルがReactNodeの場合: { - label: ( - - アイテムのラベルがReactNodeの場合 - （ダミーテキストダミーテキストダミーテキストダミーテキスト） - - ), - value: 'value-7', - }, -} - -const prefixes = { なし: '', あり: } +import { defaultItems, prefixes } from './SingleComboBox.stories' /* pict singleComboBox.pict * disabled error width prefix selectedItem @@ -94,35 +48,35 @@ const _cases: Array[0], 'items'>> = [ }, ] +const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { + const canvas = within(canvasElement) + const textboxes = await canvas.findAllByRole('combobox') + await textboxes[textboxes.length - 1].focus() + const body = canvasElement.ownerDocument.body + const option = await within(body).findByText('option 1') + await userEvent.hover(option) + const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') + await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する +} + export default { title: 'Forms（フォーム）/SingleComboBox/VRT', component: SingleComboBox, render: (args) => ( - -
- - - -
- - {_cases.map((props, i) => ( -
- - - -
- ))} - + + {_cases.map((props, i) => ( + + ))} + ), - args: { - items: Object.values(defaultItems), - }, + play: playSingle, parameters: { withTheming: true, chromatic: { disableSnapshot: false }, @@ -132,19 +86,6 @@ export default { export const VRT: StoryObj = {} -const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { - const canvas = within(canvasElement) - const textboxes = await canvas.findAllByRole('combobox') - await textboxes[0].focus() - const body = canvasElement.ownerDocument.body - const option = await within(body).findByText('option 1') - await userEvent.hover(option) - const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') - await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する -} - -VRT.play = playSingle - export const VRTForcedColors: StoryObj = { ...VRT, parameters: { From aea51be24af25438c8267a872f0d3940a6e597d9 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Fri, 29 Nov 2024 09:01:46 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20defaultItem=E3=81=8C=E5=8F=8D?= =?UTF-8?q?=E6=98=A0=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SingleComboBox/stories/SingleComboBox.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index 92a9a1599b..45d74bbc2f 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -97,6 +97,16 @@ export const SelectedItem: StoryObj = { export const DefaultItem: StoryObj = { name: 'defaultItem', + render: (args) => { + const [selectItem, setSelectItem] = useState(args.defaultItem) + return ( + setSelectItem(item)} + /> + ) + }, args: { defaultItem: defaultItems['option 4'], }, From 20bc809e46d717bc5445e0dd4d80bb9e90266a98 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Tue, 10 Dec 2024 21:26:29 +0900 Subject: [PATCH 7/8] =?UTF-8?q?docs:=20=E9=81=B8=E6=8A=9E=E3=81=97?= =?UTF-8?q?=E3=81=9F=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0=E3=82=92=E6=B6=88?= =?UTF-8?q?=E3=81=97=E3=81=9F=E3=82=8A=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/smarthr-ui/package.json | 1 + .../stories/SingleComboBox.stories.tsx | 35 ++++++++++++++++--- pnpm-lock.yaml | 3 ++ 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json index 699ae99820..e596b0b58b 100644 --- a/packages/smarthr-ui/package.json +++ b/packages/smarthr-ui/package.json @@ -32,6 +32,7 @@ "@storybook/blocks": "^8.4.7", "@storybook/cli": "^8.4.7", "@storybook/manager-api": "^8.4.7", + "@storybook/preview-api": "^8.4.7", "@storybook/react": "^8.4.7", "@storybook/react-webpack5": "^8.4.7", "@storybook/source-loader": "^8.4.7", diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index 45d74bbc2f..d195c7a85f 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -1,4 +1,5 @@ /* eslint-disable smarthr/a11y-input-in-form-control */ +import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' import React, { useState } from 'react' @@ -12,34 +13,45 @@ export const defaultItems = { label: 'option 1', value: 'value-1', data: { - name: 'test', - age: 23, + option: 'option 1', }, }, 'option 2': { label: 'option 2', value: 'value-2', data: { - name: 'test 2', - age: 34, + option: 'option 2', }, }, 'option 3': { label: 'option 3', value: 'value-3', disabled: true, + data: { + option: 'option 3', + }, }, 'option 4': { label: 'option 4', value: 'value-4', + data: { + option: 'option 4', + }, }, 'option 5': { label: 'option 5', value: 'value-5', + data: { + option: 'option 5', + }, }, 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', value: 'value-6', + data: { + option: + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', + }, }, アイテムのラベルがReactNodeの場合: { label: ( @@ -49,6 +61,9 @@ export const defaultItems = { ), value: 'value-7', + data: { + option: 'アイテムのラベルがReactNodeの場合', + }, }, } @@ -58,6 +73,16 @@ export const prefixes = { なし: '', あり: } export default { title: 'Forms（フォーム）/SingleComboBox', component: SingleComboBox, + render: (args) => { + const [, setArgs] = useArgs() + return ( + setArgs({ selectedItem: null })} + onSelect={(item) => setArgs({ selectedItem: item.data?.option })} + /> + ) + }, args: { items: Object.values(defaultItems), selectedItem: null, @@ -84,7 +109,7 @@ export default { chromatic: { disableSnapshot: true }, }, excludeStories: ['defaultItems', 'prefixes'], -} as Meta +} as Meta> export const Playground: StoryObj = {} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86b6145925..a17576e5ad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -150,6 +150,9 @@ importers: '@storybook/manager-api': specifier: ^8.4.7 version: 8.4.7(storybook@8.4.7(prettier@3.4.2)) + '@storybook/preview-api': + specifier: ^8.4.7 + version: 8.4.7(storybook@8.4.7(prettier@3.4.2)) '@storybook/react': specifier: ^8.4.7 version: 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.4.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.7(prettier@3.4.2))(typescript@5.7.2) From 0b6d0bbd6a67b04c7d1f8dcbfe341da6e323deda Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Tue, 10 Dec 2024 21:34:04 +0900 Subject: [PATCH 8/8] =?UTF-8?q?docs:=20dropdownHelpMessage=E3=82=92?= =?UTF-8?q?=E9=81=B8=E6=8A=9E=E5=BC=8F=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SingleComboBox/stories/SingleComboBox.stories.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index d195c7a85f..b89b7c59af 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -5,6 +5,7 @@ import React, { useState } from 'react' import { FaCirclePlusIcon } from '../../../Icon' import { Stack } from '../../../Layout' +import { Text } from '../../../Text' import { SingleComboBox } from '../SingleComboBox' // eslint-disable-next-line storybook/prefer-pascal-case @@ -104,6 +105,14 @@ export default { options: Object.keys(prefixes), mapping: prefixes, }, + dropdownHelpMessage: { + control: { type: 'select' }, + options: ['文字列', 'ReactNode'], + mapping: { + 文字列: 'ヘルプメッセージ', + ReactNode: React Nodeを渡したメッセージ, + }, + }, }, parameters: { chromatic: { disableSnapshot: true },