docs: TabBar の Story を見直し

packages/smarthr-ui/.storybook/main.ts

@@ -61,9 +61,6 @@ const config: StorybookConfig = {
     options: {},
   },
   staticDirs: ['../public'],
-  docs: {
-    autodocs: true,
-  },
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },

packages/smarthr-ui/.storybook/preview.tsx

@@ -75,6 +75,9 @@ const preview: Preview = {
           <Stories includePrimary={false} />
         </>
       ),
+      canvas: {
+        sourceState: 'shown',
+      },
     },
     chromatic: {
       forcedColors: 'none',
@@ -102,6 +105,7 @@ const preview: Preview = {
       )
     },
   ],
+  tags: ['autodocs'],
 }
 
 export default preview

packages/smarthr-ui/src/components/TabBar/TabBar-bordered.stories.tsx

@@ -0,0 +1,23 @@
+import TabBarStories from './TabBar.stories'
+
+import type { StoryObj } from '@storybook/react'
+
+export default {
+  ...TabBarStories,
+  title: 'Navigation（ナビゲーション）/TabBar/bordered',
+  tags: ['!autodocs'],
+}
+
+export const True: StoryObj = {
+  name: 'true',
+  args: {
+    bordered: true,
+  },
+}
+
+export const False = {
+  name: 'false',
+  args: {
+    bordered: false,
+  },
+}

packages/smarthr-ui/src/components/TabBar/TabBar.stories.tsx

@@ -1,54 +1,38 @@
 import { action } from '@storybook/addon-actions'
-import { StoryFn } from '@storybook/react'
-import { userEvent } from '@storybook/test'
 import React from 'react'
 
-import { Badge } from '../Badge'
-import { Stack } from '../Layout'
-
 import { TabBar } from './TabBar'
 import { TabItem } from './TabItem'
 
+import type { Meta } from '@storybook/react'
+
 export default {
   title: 'Navigation（ナビゲーション）/TabBar',
   component: TabBar,
   subcomponents: { TabItem },
-}
-
-export const All: StoryFn = () => (
-  <Stack as="ul" className="shr-list-none">
-    <li>
-      <p>標準</p>
-      <Template subid={1} />
-    </li>
-    <li>
-      <p>下線なし</p>
-      <Template subid={2} bordered={false} />
-    </li>
-  </Stack>
-)
+  render: (args) => (
+    <TabBar {...args}>
+      <TabItem id="tab1" onClick={action('tab1')} selected>
+        タブ1
+      </TabItem>
+      <TabItem id="tab2" onClick={action('tab2')}>
+        タブ2
+      </TabItem>
+    </TabBar>
+  ),
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} as Meta<typeof TabBar>
 
-const Template: StoryFn = ({ subid, ...props }) => (
-  <TabBar {...props}>
-    <TabItem id={`border-${subid}-1`} onClick={action('clicked')} selected>
-      基本情報
-    </TabItem>
-    <TabItem id={`border-${subid}-2`} onClick={action('clicked')} suffix={<Badge count={7} />}>
-      コメント
-    </TabItem>
-    <TabItem
-      id={`border-${subid}-3`}
-      onClick={action('clicked')}
-      disabled
-      disabledDetail={{ message: 'この機能は使用できません。' }}
-    >
-      分析対象
-    </TabItem>
-  </TabBar>
-)
-
-export const RegFocusBorder = All.bind({})
-RegFocusBorder.play = () => userEvent.tab()
+export const Default = {
+  args: {
+    bordered: true,
+  },
+}
 
-export const RegFocusNoBorder = All.bind({})
-RegFocusNoBorder.play = () => [...Array(4)].forEach((_) => userEvent.tab())
+export const Playground = {
+  args: {
+    bordered: true,
+  },
+}

packages/smarthr-ui/src/components/TabBar/TabItem.stories.tsx

@@ -0,0 +1,61 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+
+import { Badge } from '../Badge'
+
+import { TabItem } from './TabItem'
+
+import type { Meta } from '@storybook/react'
+
+export default {
+  title: 'Navigation（ナビゲーション）/TabBar/TabItem',
+  component: TabItem,
+  render: (args) => <TabItem {...args} />,
+  args: {
+    children: 'タブ',
+    id: 'tab1',
+    onClick: action('clicked'),
+  },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} as Meta<typeof TabItem>
+
+export const TabItemControl = {
+  name: 'Playground',
+  args: {
+    selected: true,
+    disabled: false,
+  },
+}
+
+export const Selected = {
+  name: 'selected',
+  args: {
+    selected: true,
+  },
+}
+
+export const Suffix = {
+  name: 'suffix',
+  args: {
+    suffix: <Badge count={1} />,
+  },
+}
+
+export const Disabled = {
+  name: 'disabled',
+  args: {
+    disabled: true,
+  },
+}
+
+export const DisabledDetail = {
+  name: 'disabledDetail',
+  args: {
+    disabled: true,
+    disabledDetail: {
+      message: '無効な理由',
+    },
+  },
+}