From f0fb358bf7e324d3fc2d834251c5976ea79000f3 Mon Sep 17 00:00:00 2001
From: mimo <mimo@pixiv.co.jp>
Date: Wed, 31 Jan 2024 15:29:14 +0900
Subject: [PATCH 1/2] feat: refactor MultiSelect storyes

---
 .../__snapshots__/index.story.storyshot       |  76 ++---
 .../components/MultiSelect/index.story.tsx    | 288 ++++++------------
 2 files changed, 128 insertions(+), 236 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot b/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot
index d34a4ac36..06d041bb0 100644
--- a/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/MultiSelect/__snapshots__/index.story.storyshot
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests MultiSelect Default 1`] = `
+exports[`Storybook Tests MultiSelect Basic 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -136,7 +136,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -149,7 +149,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={true}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -166,8 +166,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -179,7 +178,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -196,8 +195,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -209,7 +207,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={true}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -226,8 +224,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -239,7 +236,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -256,8 +253,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -405,7 +401,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -418,7 +414,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -435,8 +431,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -448,7 +443,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -465,8 +460,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -478,7 +472,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -495,8 +489,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -508,7 +501,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -525,8 +518,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -673,7 +665,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -686,7 +678,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -703,8 +695,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -716,7 +707,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -733,8 +724,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -746,7 +736,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -763,8 +753,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -776,7 +765,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -793,8 +782,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -950,7 +938,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -980,7 +968,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -1010,7 +998,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -1040,7 +1028,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
diff --git a/packages/react/src/components/MultiSelect/index.story.tsx b/packages/react/src/components/MultiSelect/index.story.tsx
index 3de025dc1..8d4887700 100644
--- a/packages/react/src/components/MultiSelect/index.story.tsx
+++ b/packages/react/src/components/MultiSelect/index.story.tsx
@@ -1,42 +1,18 @@
 import { useState } from 'react'
-import { Story } from '../../_lib/compat'
 import styled from 'styled-components'
 import { MultiSelectGroup, default as MultiSelect } from '.'
+import { Meta, StoryObj } from '@storybook/react'
+
+const StyledMultiSelectGroup = styled(MultiSelectGroup)`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+`
 
 export default {
   title: 'MultiSelect',
   component: MultiSelect,
   argTypes: {
-    name: {
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-    },
-    selected: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    readonly: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    invalid: {
-      control: {
-        type: 'boolean',
-      },
-    },
     variant: {
       control: {
         type: 'inline-radio',
@@ -44,173 +20,101 @@ export default {
       },
     },
   },
-}
-
-type Props = {
-  name: string
-  label: string
-  selected: boolean
-  onChange: (selected: string[]) => void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  variant?: 'default' | 'overlay'
-  className?: string
-}
-
-const StyledMultiSelectGroup = styled(MultiSelectGroup)`
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-`
-
-const Template: Story<Props> = ({
-  name,
-  label,
-  selected,
-  onChange,
-  disabled,
-  readonly,
-  invalid,
-  variant,
-  className,
-}) => {
-  return (
-    <StyledMultiSelectGroup
-      {...{
-        name,
-        label,
-        onChange,
-        disabled,
-        readonly,
-        invalid,
-      }}
-      selected={selected ? ['選択肢1', '選択肢3'] : []}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  name: '',
-  label: '',
-  selected: true,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
-  // eslint-disable-next-line no-console
-  onChange: (selected) => console.log(selected),
-}
+  args: {
+    variant: 'default',
+  },
+} as Meta<typeof MultiSelect>
 
-type PlaygroundProps = {
-  name: string
-  label: string
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  className?: string
-  variant?: 'default' | 'overlay'
+export const Basic: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={() => {
+          // eslint-disable-next-line no-console
+          console.log('click')
+        }}
+        selected={['選択肢1', '選択肢3']}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }
 
-export const Playground: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
-
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={props.variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Playground.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
+export const Invalid: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={() => {
+          // eslint-disable-next-line no-console
+          console.log('click')
+        }}
+        selected={[]}
+        invalid
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }
 
-export const Invalid: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
-
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-      invalid
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={props.variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Invalid.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-  variant: 'default',
+export const Overlay: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={() => {
+          // eslint-disable-next-line no-console
+          console.log('click')
+        }}
+        selected={[]}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+  args: {
+    variant: 'overlay',
+  },
 }
 
-export const Overlay: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
+export const Playground: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const [selected, setSelected] = useState<string[]>([])
 
-  return (
-    <StyledMultiSelectGroup
-      {...props}
-      selected={selected}
-      onChange={setSelected}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant="overlay"
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Overlay.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
+    return (
+      <StyledMultiSelectGroup
+        name=""
+        label=""
+        onChange={setSelected}
+        selected={selected}
+      >
+        {[1, 2, 3, 4].map((idx) => (
+          <MultiSelect {...args} value={`選択肢${idx}`} key={idx}>
+            選択肢{idx}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }

From caec7f02c56ee4ef37e6627e2b3d0b2e45baeb15 Mon Sep 17 00:00:00 2001
From: mimo <mimo@pixiv.co.jp>
Date: Thu, 8 Feb 2024 17:06:36 +0900
Subject: [PATCH 2/2] chore(react): replace console.log to action)

---
 .../src/components/MultiSelect/index.story.tsx   | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/components/MultiSelect/index.story.tsx b/packages/react/src/components/MultiSelect/index.story.tsx
index 8d4887700..81ceb67d3 100644
--- a/packages/react/src/components/MultiSelect/index.story.tsx
+++ b/packages/react/src/components/MultiSelect/index.story.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import styled from 'styled-components'
 import { MultiSelectGroup, default as MultiSelect } from '.'
 import { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 
 const StyledMultiSelectGroup = styled(MultiSelectGroup)`
   display: grid;
@@ -32,10 +33,7 @@ export const Basic: StoryObj<typeof MultiSelect> = {
       <StyledMultiSelectGroup
         name="name"
         label="label"
-        onChange={() => {
-          // eslint-disable-next-line no-console
-          console.log('click')
-        }}
+        onChange={action('click')}
         selected={['選択肢1', '選択肢3']}
       >
         {options.map((option) => (
@@ -55,10 +53,7 @@ export const Invalid: StoryObj<typeof MultiSelect> = {
       <StyledMultiSelectGroup
         name="name"
         label="label"
-        onChange={() => {
-          // eslint-disable-next-line no-console
-          console.log('click')
-        }}
+        onChange={action('click')}
         selected={[]}
         invalid
       >
@@ -79,10 +74,7 @@ export const Overlay: StoryObj<typeof MultiSelect> = {
       <StyledMultiSelectGroup
         name="name"
         label="label"
-        onChange={() => {
-          // eslint-disable-next-line no-console
-          console.log('click')
-        }}
+        onChange={action('click')}
         selected={[]}
       >
         {options.map((option) => (