Merge pull request #440 from pixiv/mimo/csf3-react-dropdownselector

/reactのStorybook CSF3化 DropdownSelector編
pixiv · Feb 7, 2024 · 3c650bf · 3c650bf
2 parents d79b54c + 2038806
commit 3c650bf
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 241 deletions.
diff --git a/packages/react/src/components/DropdownSelector/ListItem/index.story.tsx b/packages/react/src/components/DropdownSelector/ListItem/index.story.tsx
@@ -1,20 +1,20 @@
 import { useState } from 'react'
-import { Story } from '../../../_lib/compat'
 import Icon from '../../Icon'
 import Switch from '../../Switch'
-import ListItem, { ListItemProps } from '.'
+import ListItem from '.'
 import styled from 'styled-components'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/ListItem',
   component: ListItem,
-}
+} as Meta<typeof ListItem>
 
 const CustomLink = styled.a`
   color: red;
 `
 
-export const Basic: Story<ListItemProps> = () => {
+const BasicRender = () => {
   const [checked, setChecked] = useState(false)
   const handleCheck = () => {
     setChecked((v) => !v)
@@ -49,3 +49,7 @@ export const Basic: Story<ListItemProps> = () => {
     </>
   )
 }
+
+export const Basic: StoryObj<typeof ListItem> = {
+  render: BasicRender,
+}
diff --git a/packages/react/src/components/DropdownSelector/MenuList/index.story.tsx b/packages/react/src/components/DropdownSelector/MenuList/index.story.tsx
@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions'
-import { Story } from '../../../_lib/compat'
-import MenuList, { MenuListProps } from '.'
+import MenuList from '.'
 import MenuItem from '../MenuItem'
 import MenuItemGroup from '../MenuItemGroup'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/MenuList',
   component: MenuList,
-}
+} as Meta<typeof MenuList>
 
 function makeList(n: number, offset = 0) {
   return [...(Array(n) as undefined[])].map((_, i) => {
@@ -20,32 +20,38 @@ function makeList(n: number, offset = 0) {
   })
 }
 
-export const Basic: Story<MenuListProps> = () => {
-  return (
-    <>
-      <MenuList onChange={action('onChange')}>{makeList(10)}</MenuList>
-    </>
-  )
+export const Basic: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <>
+        <MenuList onChange={action('onChange')}>{makeList(10)}</MenuList>
+      </>
+    )
+  },
 }
 
-export const Disabled: Story<MenuListProps> = () => {
-  return (
-    <>
-      <MenuList onChange={action('onChange')}>
-        <MenuItem value="1">MenuItem</MenuItem>
-        <MenuItem value="2" disabled>
-          Disabled MenuItem
-        </MenuItem>
-      </MenuList>
-    </>
-  )
+export const Disabled: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <>
+        <MenuList onChange={action('onChange')}>
+          <MenuItem value="1">MenuItem</MenuItem>
+          <MenuItem value="2" disabled>
+            Disabled MenuItem
+          </MenuItem>
+        </MenuList>
+      </>
+    )
+  },
 }
 
-export const Group: Story<MenuListProps> = () => {
-  return (
-    <MenuList onChange={action('onChange')} value="1">
-      <MenuItemGroup text="Section1">{makeList(5)}</MenuItemGroup>
-      <MenuItemGroup text="Section2">{makeList(5, 5)}</MenuItemGroup>
-    </MenuList>
-  )
+export const Group: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <MenuList onChange={action('onChange')} value="1">
+        <MenuItemGroup text="Section1">{makeList(5)}</MenuItemGroup>
+        <MenuItemGroup text="Section2">{makeList(5, 5)}</MenuItemGroup>
+      </MenuList>
+    )
+  },
 }
diff --git a/packages/react/src/components/DropdownSelector/Popover/index.story.tsx b/packages/react/src/components/DropdownSelector/Popover/index.story.tsx
@@ -1,12 +1,12 @@
 import { useRef, CSSProperties, useState } from 'react'
-import { Story } from '../../../_lib/compat'
-import Popover, { PopoverProps } from '.'
+import Popover from '.'
 import Button from '../../Button'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/Popover',
   component: Popover,
-}
+} as Meta<typeof Popover>
 
 function Base(props: { style?: CSSProperties }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -33,8 +33,8 @@ function Base(props: { style?: CSSProperties }) {
   )
 }
 
-export const Basic: Story<PopoverProps> = () => {
-  return (
+export const Basic: StoryObj = {
+  render: () => (
     <>
       <Base
         style={{
@@ -61,5 +61,5 @@ export const Basic: Story<PopoverProps> = () => {
         }}
       />
     </>
-  )
+  ),
 }