fix: 1 Story 1 コンポーネントの構成に変更

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,65 +1,38 @@
 import { action } from '@storybook/addon-actions'
-import React, { type ComponentProps } from 'react'
-
-import { Heading } from '../Heading'
-import { Stack } from '../Layout'
+import React from 'react'
 
 import { TabBar } from './TabBar'
 import { TabItem } from './TabItem'
 
-import type { Meta, StoryFn } from '@storybook/react'
-
-const Template: StoryFn<ComponentProps<typeof TabBar>> = (args) => (
-  <TabBar {...args}>
-    <TabItem id="tab1" onClick={action('tab1')} selected>
-      タブ1
-    </TabItem>
-    <TabItem id="tab2" onClick={action('tab2')}>
-      タブ2
-    </TabItem>
-  </TabBar>
-)
+import type { Meta } from '@storybook/react'
 
 export default {
   title: 'Navigation（ナビゲーション）/TabBar',
   component: TabBar,
   subcomponents: { TabItem },
-  render: Template,
+  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>
 
-export const Default = () => (
-  <TabBar>
-    <TabItem id="tab1" onClick={action('tab1')} selected>
-      タブ1
-    </TabItem>
-    <TabItem id="tab2" onClick={action('tab2')}>
-      タブ2
-    </TabItem>
-  </TabBar>
-)
-
-export const Playground = {
+export const Default = {
   args: {
     bordered: true,
   },
 }
 
-export const Boardered = {
-  name: 'bordered',
-  render: () => (
-    <Stack gap={2} as="section">
-      <Heading>bordered</Heading>
-      <Stack as="section" gap={0.5}>
-        <Heading type="blockTitle">線あり（デフォルト）</Heading>
-        <Template bordered />
-      </Stack>
-      <Stack as="section" gap={0.5}>
-        <Heading type="blockTitle">線なし</Heading>
-        <Template bordered={false} />
-      </Stack>
-    </Stack>
-  ),
+export const Playground = {
+  args: {
+    bordered: true,
+  },
 }

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

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