docs(storybook): chartsのストーリーをsmarthr-uiのStorybookに統合する (#6249)

Author: masa0527

packages/charts/src/components/BarChart/BarChart.stories.tsx

@@ -2,10 +2,10 @@ import { chartJsOptionsExamples, multiSmall, singleSmall } from '../__stories__/
 
 import { BarChart } from './BarChart'
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta: Meta<typeof BarChart> = {
-  title: 'BarChart',
+  title: 'Charts/BarChart',
   component: BarChart,
   decorators: [
     (Story) => (

packages/charts/src/components/BarChart/VRTBarChart.stories.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line smarthr/require-barrel-import
 import { Stack } from '../../../../smarthr-ui/src/components/Layout'
 import {
   chartJsOptionsExamples,
@@ -8,11 +9,9 @@ import {
 
 import { BarChart } from './BarChart'
 
-import type { StoryObj } from '@storybook/react-webpack5'
-
 export default {
-  title: 'BarChart/VRT',
-  render: (args: any) => (
+  title: 'Charts/BarChart/VRT',
+  render: (args) => (
     <Stack {...args}>
       {/* パターン1: 単一データセット、タイトルなし、ラベルなし、標準サイズ、少データ */}
       <div className="shr-h-[400px]">
@@ -71,7 +70,7 @@ export default {
 
 export const VRT = {}
 
-export const VRTForcedColors: StoryObj = {
+export const VRTForcedColors = {
   ...VRT,
   parameters: {
     chromatic: { forcedColors: 'active' },

packages/charts/src/components/Chart/Chart.stories.tsx

@@ -2,10 +2,10 @@ import { chartJsOptionsExamples, multiSmall, singleSmall } from '../__stories__/
 
 import { Chart } from './Chart'
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta: Meta<typeof Chart> = {
-  title: 'Chart',
+  title: 'Charts/Chart',
   component: Chart,
   decorators: [
     (Story) => (

packages/charts/src/components/Chart/VRTChart.stories.tsx

@@ -1,13 +1,12 @@
+// eslint-disable-next-line smarthr/require-barrel-import
 import { Stack } from '../../../../smarthr-ui/src/components/Layout'
 import { multiSmall, singleSmall } from '../__stories__/testData'
 
 import { Chart } from './Chart'
 
-import type { StoryObj } from '@storybook/react-webpack5'
-
 export default {
-  title: 'Chart/VRT',
-  render: (args: any) => (
+  title: 'Charts/Chart/VRT',
+  render: (args) => (
     <Stack {...args}>
       {/* Bar型 パターン1: 単一データセット、タイトルあり、標準サイズ */}
       <div className="shr-h-[400px]">
@@ -38,7 +37,7 @@ export default {
 
 export const VRT = {}
 
-export const VRTForcedColors: StoryObj = {
+export const VRTForcedColors = {
   ...VRT,
   parameters: {
     chromatic: { forcedColors: 'active' },

packages/charts/src/components/LineChart/LineChart.stories.tsx

@@ -2,10 +2,10 @@ import { chartJsOptionsExamples, multiSmall, singleSmall } from '../__stories__/
 
 import { LineChart } from './LineChart'
 
-import type { Meta, StoryObj } from '@storybook/react-webpack5'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 const meta: Meta<typeof LineChart> = {
-  title: 'LineChart',
+  title: 'Charts/LineChart',
   component: LineChart,
   decorators: [
     (Story) => (

packages/charts/src/components/LineChart/VRTLineChart.stories.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line smarthr/require-barrel-import
 import { Stack } from '../../../../smarthr-ui/src/components/Layout'
 import {
   chartJsOptionsExamples,
@@ -8,11 +9,9 @@ import {
 
 import { LineChart } from './LineChart'
 
-import type { StoryObj } from '@storybook/react-webpack5'
-
 export default {
-  title: 'LineChart/VRT',
-  render: (args: any) => (
+  title: 'Charts/LineChart/VRT',
+  render: (args) => (
     <Stack {...args}>
       {/* パターン1: 単一データセット、タイトルなし、ラベルなし、標準サイズ、少データ */}
       <div className="shr-h-[400px]">
@@ -71,7 +70,7 @@ export default {
 
 export const VRT = {}
 
-export const VRTForcedColors: StoryObj = {
+export const VRTForcedColors = {
   ...VRT,
   parameters: {
     chromatic: { forcedColors: 'active' },

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

@@ -6,7 +6,7 @@ import tailwindcss from 'tailwindcss'
 import type { StorybookConfig } from '@storybook/react-vite'
 
 export default {
-  stories: ['../src/**/*.stories.tsx'],
+  stories: ['../src/**/*.stories.tsx', '../../charts/src/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-docs',
     'storybook-addon-pseudo-states',
@@ -52,7 +52,10 @@ export default {
     },
     css: {
       postcss: {
-        plugins: [tailwindcss, autoprefixer],
+        plugins: [
+          tailwindcss({ config: join(__dirname, 'tailwind.storybook.config.ts') }),
+          autoprefixer,
+        ],
       },
     },
   }),

packages/smarthr-ui/.storybook/tailwind.storybook.config.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line smarthr/require-barrel-import -- Storybook 専用。本番の tailwind.config と同じプリセットを参照する。
+import preset from '../src/smarthr-ui-preset'
+
+import type { Config } from 'tailwindcss'
+
+/**
+ * Storybook のみ。`@smarthr/smarthr-ui-charts` のストーリー用クラスを含め、本番 `smarthr-ui.css` の content には含めない。
+ *
+ * `content.relative: true` がないと、`../src` 等が **カレントディレクトリ**基準で解決され、
+ * `packages/smarthr-ui` で起動したとき `../src` → `packages/src`（存在しない）となり JIT がファイルを一切見つけられない。
+ * `true` にするとパスは **この設定ファイルのあるディレクトリ**（`.storybook/`）基準になる。
+ *
+ * @see https://tailwindcss.com/docs/content-configuration
+ */
+export default {
+  presets: [preset],
+  content: {
+    relative: true,
+    files: ['../src/**/*.{js,jsx,ts,tsx}', '../../charts/src/**/*.{js,jsx,ts,tsx}'],
+  },
+} satisfies Config

packages/smarthr-ui/knip.json

@@ -2,7 +2,12 @@
   "$schema": "https://unpkg.com/knip@6/schema.json",
   "vitest": false,
   "storybook": {
-    "entry": [".storybook/main.ts", ".storybook/preview.tsx", ".storybook/manager.ts"]
+    "entry": [
+      ".storybook/main.ts",
+      ".storybook/preview.tsx",
+      ".storybook/manager.ts",
+      ".storybook/tailwind.storybook.config.ts"
+    ]
   },
   "entry": ["scripts/**/*.ts"],
   "ignore": ["**/*.stories.tsx", "rollup.*.config.js", "vitest.config.ts", "vitest-setup.js"],