Cutomize storybook docs

tslib/react/.storybook/main.ts

@@ -2,18 +2,19 @@ import type { StorybookConfig } from "@storybook/react-vite"
 
 const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@chromatic-com/storybook",
   ],
+
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
-  docs: {
-    autodocs: "tag",
-  },
+
   async viteFinal(config) {
     const { mergeConfig } = await import("vite")
     return mergeConfig(config, {
@@ -25,5 +26,9 @@ const config: StorybookConfig = {
       },
     })
   },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 }
 export default config

tslib/react/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from "@storybook/react"
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-}
-
-export default preview

tslib/react/.storybook/preview.tsx

@@ -0,0 +1,32 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Subtitle,
+  Title,
+} from "@storybook/blocks"
+import type { Preview } from "@storybook/react"
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+        </>
+      ),
+    },
+  },
+}
+
+export default preview

tslib/react/package.json

@@ -38,15 +38,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@optuna/types": "file:../types",
+    "@chromatic-com/storybook": "^1.6.1",
     "@optuna/storage": "file:../storage",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
-    "@storybook/addon-links": "^8.0.4",
-    "@storybook/blocks": "^8.0.4",
-    "@storybook/react": "^8.0.4",
-    "@storybook/react-vite": "^8.0.4",
-    "@storybook/test": "^8.0.4",
+    "@optuna/types": "file:../types",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@types/plotly.js-dist-min": "^2.3.4",
@@ -54,7 +55,7 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "jsdom": "^24.0.0",
-    "storybook": "^8.0.4",
+    "storybook": "^8.2.9",
     "typescript": "^5.2.2",
     "vite": "^5.1.0",
     "vitest": "^1.4.0"

tslib/react/src/components/PlotEdf.stories.tsx

@@ -2,24 +2,22 @@ import { CssBaseline, ThemeProvider } from "@mui/material"
 import { Meta, StoryObj } from "@storybook/react"
 import React from "react"
 import { useMockStudy } from "../MockStudies"
-import { lightTheme } from "../styles/lightTheme"
 import { darkTheme } from "../styles/darkTheme"
+import { lightTheme } from "../styles/lightTheme"
 import { PlotEdf } from "./PlotEdf"
 
 const meta: Meta<typeof PlotEdf> = {
   component: PlotEdf,
-  title: "PlotEdf",
+  title: "Plot/EDF",
   tags: ["autodocs"],
   decorators: [
     (Story, storyContext) => {
-      const studyId = storyContext.parameters?.studyId;
-      const theme = storyContext.parameters?.theme;
-
+      const studyId = storyContext.parameters?.studyId
       const { study } = useMockStudy(studyId)
       if (!study) return <p>loading...</p>
 
       return (
-        <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
+        <ThemeProvider theme={storyContext.parameters?.theme}>
           <CssBaseline />
           <Story
             args={{
@@ -34,18 +32,26 @@ const meta: Meta<typeof PlotEdf> = {
 }
 
 export default meta
+
 type Story = StoryObj<typeof PlotEdf>
 
 export const LightTheme: Story = {
   parameters: {
     studyId: 1,
-    theme: "light",
+    theme: lightTheme,
   },
 }
 
 export const DarkTheme: Story = {
   parameters: {
     studyId: 1,
-    theme: "dark",
+    theme: darkTheme,
   },
 }
+
+// TODO(c-bata): Add a story for the case where two studies are compared.
+// export const CompareStudy: Story = {
+//   parameters: {
+//     ...
+//   },
+// }

tslib/react/tsconfig.json

@@ -23,12 +23,11 @@
     "noFallthroughCasesInSwitch": true,
     "jsx": "react-jsx"
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "include": ["src/**/*.ts", "src/**/*.tsx", ".storybook/**/*.tsx"],
   "exclude": [
     "src/**/*.stories.tsx",
     "src/**/*.stories.ts",
     "src/MockStudies.ts",
-    "src/utils/loadStorageFromFile.ts"
   ],
   "references": [{ "path": "./tsconfig.node.json" }]
 }