Upgrade Storybook v8.x (#1904)

## Summary: Nothing is broken. Everything is happy. ## Test plan: `yarn start` is happy `yarn build-storybook; python3 -m http.server -d storybook-static;` -> open `http://localhost:8000` in a browser `yarn build-storybook --stats-json` works and generates `/storybook-static/preview-stats.json` `yarn dev` is happy `yarn cypress:ci` is happy Author: mark-fitzgerald Reviewers: mark-fitzgerald, jeremywiebe, nishasy Required Reviewers: Approved By: jeremywiebe Checks: ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald, ✅ .github/dependabot.yml Pull Request URL: #1904
Khan · Dec 2, 2024 · 83b1bea · 83b1bea
1 parent 819184c
commit 83b1bea
Show file tree

Hide file tree

Showing 19 changed files with 836 additions and 3,083 deletions.
diff --git a/.changeset/chilled-donuts-serve.md b/.changeset/chilled-donuts-serve.md
@@ -0,0 +1,8 @@
+---
+"@khanacademy/perseus-dev-ui": patch
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+---
+
+Upgrade Storybook to v8.x
diff --git a/.changeset/yellow-carrots-obey.md b/.changeset/yellow-carrots-obey.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-dev-ui": patch
+---
+
+Upgrade Storybook to v8.x
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,4 +1,3 @@
-import turbosnap from "vite-plugin-turbosnap";
 import viteConfig from "../dev/vite.config";
 import {mergeConfig} from "vite";
 
@@ -54,24 +53,8 @@ const config: StorybookConfig = {
             },
             // Fix from: https://github.com/storybookjs/storybook/issues/25256#issuecomment-1866441206
             assetsInclude: ["/sb-preview/runtime.js"],
-            plugins:
-                configType === "PRODUCTION"
-                    ? [
-                          turbosnap({
-                              // This should be the base path of your storybook.  In monorepos, you may only need process.cwd().
-                              rootDir: config.root ?? process.cwd(),
-                          }),
-                      ]
-                    : [],
         });
     },
-
-    typescript: {
-        reactDocgen: "react-docgen",
-    },
-    docs: {
-        autodocs: true,
-    },
     staticDirs: ["../static"],
 };
 

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -60,6 +60,10 @@ const preview: Preview = {
             })),
         },
     },
+    tags: [
+        //👇 Enables auto-generated documentation for all stories
+        "autodocs",
+    ],
 };
 
 export default preview;
diff --git a/dev/package.json b/dev/package.json
@@ -34,6 +34,7 @@
         "@phosphor-icons/core": "^2.0.2"
     },
     "devDependencies": {
-        "vite": "^5.1.0"
+        "vite": "^5.1.0",
+        "@vitejs/plugin-react": "^4.3.3"
     }
 }
diff --git a/dev/vite.config.ts b/dev/vite.config.ts
@@ -1,6 +1,7 @@
 import fs from "node:fs";
 import {resolve, dirname, join} from "node:path";
 
+import react from "@vitejs/plugin-react";
 import glob from "fast-glob";
 import {defineConfig} from "vite";
 
@@ -20,6 +21,7 @@ export default defineConfig({
         // Dev/Storybook environment.
         "process.env.STORYBOOK": JSON.stringify(true),
     },
+    plugins: [react({jsxRuntime: "automatic"})],
     resolve: {
         alias: {
             hubble: resolve(__dirname, "../vendor/hubble/hubble.js"),

diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "engines": {
         "node": ">=20"
     },
-    "dependencies": {
+    "devDependencies": {
         "@babel/core": "^7.23.2",
         "@babel/eslint-parser": "^7.22.15",
         "@babel/eslint-plugin": "^7.22.10",
@@ -40,14 +40,14 @@
         "@rollup/plugin-node-resolve": "^13.2.1",
         "@rollup/plugin-replace": "^4.0.0",
         "@sheerun/mutationobserver-shim": "^0.3.3",
-        "@storybook/addon-a11y": "^7.6.17",
-        "@storybook/addon-actions": "^7.6.17",
-        "@storybook/addon-controls": "^7.6.17",
-        "@storybook/addon-essentials": "^7.6.17",
-        "@storybook/addon-links": "^7.6.17",
-        "@storybook/addon-viewport": "^7.6.17",
-        "@storybook/react": "^7.6.17",
-        "@storybook/react-vite": "^7.6.17",
+        "@storybook/addon-a11y": "^8.4.5",
+        "@storybook/addon-actions": "^8.4.5",
+        "@storybook/addon-controls": "^8.4.5",
+        "@storybook/addon-essentials": "^8.4.5",
+        "@storybook/addon-links": "^8.4.5",
+        "@storybook/addon-viewport": "^8.4.5",
+        "@storybook/react": "^8.4.5",
+        "@storybook/react-vite": "^8.4.5",
         "@swc-node/register": "^1.6.6",
         "@swc/core": "^1.3.68",
         "@testing-library/dom": "^10.3.1",
@@ -117,13 +117,12 @@
         "rollup-plugin-preserve-shebangs": "^0.2.0",
         "rollup-plugin-styles": "^4.0.0",
         "sloc": "^0.2.1",
-        "storybook": "^7.6.17",
+        "storybook": "^8.4.5",
         "style-loader": "^3.3.3",
         "tiny-invariant": "^1.3.1",
         "typescript": "5.7.2",
         "typescript-coverage-report": "^0.7.0",
         "vite-plugin-istanbul": "^5.0.0",
-        "vite-plugin-turbosnap": "^1.0.3",
         "winston": "^3.7.2"
     },
     "scripts": {
@@ -143,7 +142,7 @@
         "test": "jest",
         "storybook": "storybook dev -p 6006",
         "start": "storybook dev -p 6006",
-        "build-storybook": "storybook build",
+        "build-storybook": "storybook build --stats-json",
         "cypress": "cypress open --component",
         "cypress:ci": "cross-env cypress run --component",
         "format": "prettier --write .",

diff --git a/packages/math-input/src/full-keypad.stories.tsx b/packages/math-input/src/full-keypad.stories.tsx
@@ -1,11 +1,8 @@
-import {action} from "@storybook/addon-actions";
 import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
-import * as React from "react";
 
 import Keypad from "./components/keypad";
 
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-import type {ComponentStory} from "@storybook/react";
+import type {StoryObj} from "@storybook/react";
 
 const opsPage = "Operators Page";
 const numsPage = "Numbers Page";
@@ -85,58 +82,55 @@ export default {
     },
 };
 
-const Template: ComponentStory<typeof Keypad> = (
-    args: PropsFor<typeof Keypad>,
-): React.ReactElement => (
-    <Keypad
-        {...args}
-        onClickKey={action("onClickKey")}
-        onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
-    />
-);
+type Story = StoryObj<typeof Keypad>;
 
-export const Default = Template.bind({});
+export const Default: Story = {};
 
-export const PreAlgebra = Template.bind({});
-PreAlgebra.args = {
-    preAlgebra: true,
+export const PreAlgebra: Story = {
+    args: {
+        preAlgebra: true,
+    },
 };
 
-export const Trigonometry = Template.bind({});
-Trigonometry.args = {
-    preAlgebra: true,
-    trigonometry: true,
+export const Trigonometry: Story = {
+    args: {
+        preAlgebra: true,
+        trigonometry: true,
+    },
 };
 
-export const FractionsOnly = Template.bind({});
-FractionsOnly.args = {
-    fractionsOnly: true,
+export const FractionsOnly: Story = {
+    args: {
+        fractionsOnly: true,
+    },
 };
 
-export const Everything = Template.bind({});
-Everything.args = {
-    advancedRelations: true,
-    basicRelations: true,
-    divisionKey: true,
-    logarithms: true,
-    convertDotToTimes: false,
-    preAlgebra: true,
-    trigonometry: true,
-    expandedView: true,
-    showDismiss: true,
-    extraKeys: ["a", "b", "c"],
+export const Everything: Story = {
+    args: {
+        advancedRelations: true,
+        basicRelations: true,
+        divisionKey: true,
+        logarithms: true,
+        convertDotToTimes: false,
+        preAlgebra: true,
+        trigonometry: true,
+        expandedView: true,
+        showDismiss: true,
+        extraKeys: ["a", "b", "c"],
+    },
 };
 
-export const EverythingMinusNavigationPad = Template.bind({});
-EverythingMinusNavigationPad.args = {
-    advancedRelations: true,
-    basicRelations: true,
-    divisionKey: true,
-    logarithms: true,
-    convertDotToTimes: false,
-    preAlgebra: true,
-    trigonometry: true,
-    expandedView: false,
-    showDismiss: true,
-    extraKeys: ["a", "b", "c"],
+export const EverythingMinusNavigationPad: Story = {
+    args: {
+        advancedRelations: true,
+        basicRelations: true,
+        divisionKey: true,
+        logarithms: true,
+        convertDotToTimes: false,
+        preAlgebra: true,
+        trigonometry: true,
+        expandedView: false,
+        showDismiss: true,
+        extraKeys: ["a", "b", "c"],
+    },
 };