chore: upgrade storybook 8 (#4124)

* feat: upgrade storybook8 * chore: upgrade storybook and vite * chore: remove @mdx-js/react optimizeDep * chore: add @mdx-js/react optimizeDep * fix: format
nextui-org · Nov 27, 2024 · d51d354 · d51d354
1 parent e3aa9cd
commit d51d354
Show file tree

Hide file tree

Showing 11 changed files with 1,046 additions and 3,285 deletions.
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "@react-bootstrap/babel-preset": "^2.1.0",
     "@react-types/link": "^3.4.4",
     "@react-types/shared": "3.24.1",
-    "@storybook/react": "^7.4.6",
+    "@storybook/react": "^8.4.5",
     "@swc/core": "^1.3.35",
     "@swc/jest": "^0.2.24",
     "@testing-library/dom": "^10.4.0",

diff --git a/packages/storybook/.storybook/addons/react-strict-mode/index.tsx b/packages/storybook/.storybook/addons/react-strict-mode/index.tsx
@@ -1,29 +1,29 @@
-import type { PropsWithChildren } from "react"
+import type {PropsWithChildren} from "react";
 
-import { addons, makeDecorator } from "@storybook/preview-api"
-import { getQueryParams } from "@storybook/preview-api"
-import React, { StrictMode, useEffect, useState } from "react"
+import {addons, makeDecorator} from "@storybook/preview-api";
+import React, {StrictMode, useEffect, useState} from "react";
 
-function StrictModeDecorator({ children }: PropsWithChildren<any>) {
-  const [isStrict, setStrict] = useState(() => getQueryParams()?.strict === "true")
+function StrictModeDecorator({children}: PropsWithChildren<any>) {
+  const strictQuery = new URLSearchParams(window.location.search).get("strict");
+  const [isStrict, setStrict] = useState(strictQuery === "true");
 
   useEffect(() => {
-    const channel = addons.getChannel()
+    const channel = addons.getChannel();
 
-    channel.on("strict/updated", setStrict)
+    channel.on("strict/updated", setStrict);
 
     return () => {
-      channel.removeListener("strict/updated", setStrict)
-    }
-  }, [])
+      channel.removeListener("strict/updated", setStrict);
+    };
+  }, []);
 
-  return isStrict ? <StrictMode>{children}</StrictMode> : children
+  return isStrict ? <StrictMode>{children}</StrictMode> : children;
 }
 
 export const withStrictModeSwitcher = makeDecorator({
   name: "withStrictModeSwitcher",
   parameterName: "strictModeSwitcher",
   wrapper: (getStory, context) => {
-    return <StrictModeDecorator>{getStory(context)}</StrictModeDecorator>
+    return <StrictModeDecorator>{getStory(context)}</StrictModeDecorator>;
   },
-})
+});
diff --git a/packages/storybook/.storybook/addons/react-strict-mode/register.tsx b/packages/storybook/.storybook/addons/react-strict-mode/register.tsx
@@ -1,11 +1,11 @@
-import type { API } from "@storybook/manager-api";
+import type {API} from "@storybook/manager-api";
 
-import { addons, types } from "@storybook/manager-api";
-import React, { useEffect, useState } from "react";
+import {addons, types} from "@storybook/manager-api";
+import React, {useEffect, useState} from "react";
 
 const ADDON_ID = "StrictModeSwitcher";
 
-function StrictModeSwitcher({ api }: { api: API }) {
+function StrictModeSwitcher({api}: {api: API}) {
   const [isStrict, setStrict] = useState(() => api.getQueryParam("strict") === "true");
 
   const onChange = () => setStrict((val) => !val);
@@ -46,7 +46,7 @@ function StrictModeSwitcher({ api }: { api: API }) {
 if (process.env.NODE_ENV !== "production") {
   addons.register(ADDON_ID, (api) => {
     addons.add(ADDON_ID, {
-      match: ({ viewMode }) => !!viewMode?.match(/^(story|docs)$/),
+      match: ({viewMode}) => !!viewMode?.match(/^(story|docs)$/),
       render: () => <StrictModeSwitcher api={api} />,
       title: "Strict Mode Switcher",
       type: types.TOOL,

diff --git a/packages/storybook/.storybook/main.js → packages/storybook/.storybook/main.ts b/packages/storybook/.storybook/main.js → packages/storybook/.storybook/main.ts
@@ -1,25 +1,43 @@
-import { dirname, join } from "path";
-module.exports = {
+import {dirname, join} from "path";
+import remarkGfm from "remark-gfm";
+import type {StorybookConfig} from "@storybook/react-vite";
+
+const config: StorybookConfig = {
   stories: [
-    "./welcome.stories.mdx",
+    "./welcome.mdx",
     "../../components/**/stories/**/*.stories.@(js|jsx|ts|tsx)",
     "../../core/theme/stories/*.stories.@(js|jsx|ts|tsx)",
   ],
+
   staticDirs: ["../public"],
+
   addons: [
     getAbsolutePath("@storybook/addon-a11y"),
     getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@storybook/addon-links"),
     getAbsolutePath("storybook-dark-mode"),
-    getAbsolutePath("@storybook/addon-mdx-gfm"),
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
     "./addons/react-strict-mode/register",
   ],
+
   framework: {
     name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
   },
+
   core: {
     disableTelemetry: true,
   },
+
   typescript: {
     reactDocgen: false,
   },
@@ -28,3 +46,5 @@ module.exports = {
 function getAbsolutePath(value) {
   return dirname(require.resolve(join(value, "package.json")));
 }
+
+export default config;
diff --git a/packages/storybook/.storybook/preview.tsx b/packages/storybook/.storybook/preview.tsx
@@ -4,7 +4,7 @@ import {NextUIProvider} from "@nextui-org/system/src/provider";
 import type {Preview} from "@storybook/react";
 
 import "./style.css";
-import { withStrictModeSwitcher } from "./addons/react-strict-mode";
+import {withStrictModeSwitcher} from "./addons/react-strict-mode";
 
 const decorators: Preview["decorators"] = [
   (Story, {globals: {locale, disableAnimation}}) => {
@@ -30,7 +30,6 @@ const commonTheme = {
 };
 
 const parameters: Preview["parameters"] = {
-  actions: {argTypesRegex: "^on[A-Z].*"},
   options: {
     storySort: {
       method: "alphabetical",
@@ -134,6 +133,7 @@ const preview: Preview = {
   decorators,
   parameters,
   globalTypes,
+  tags: ["autodocs"],
 };
 
 export default preview;
diff --git a/.../storybook/.storybook/welcome.stories.mdx → packages/storybook/.storybook/welcome.mdx b/.../storybook/.storybook/welcome.stories.mdx → packages/storybook/.storybook/welcome.mdx
@@ -13,10 +13,9 @@ import {link, button} from "@nextui-org/theme";
 
 <br />
 
-<p className="!text-base !text-foreground max-w-xl [&>p]:text-foreground [&>p]:text-base">
-  Here you can find the guidelines, components APIs and examples to help you build your next project
-  with NextUI.
-</p>
+<div className="!text-base !text-foreground max-w-xl [&>p]:text-foreground [&>p]:text-base">
+  Here you can find the guidelines, components APIs and examples to help you build your next project with NextUI.
+</div>
 
 <div className="flex flex-col gap-8">
   <div className="flex flex-row justify-start items-center mt-8 gap-4">
@@ -127,6 +126,6 @@ import {link, button} from "@nextui-org/theme";
 <br />
 
 
-<div class="block text-xs [&>p]:text-default-400">
-  Last updated on <time datetime="2023-03-07">Jul 31, 2023</time>
+<div className="block text-xs [&>p]:text-default-400">
+  Last updated on <time dateTime="2023-03-07">Jul 31, 2023</time>
 </div>
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -5,6 +5,7 @@
   "keywords": [
     "storybook"
   ],
+  "type": "module",
   "author": "Junior Garcia <[email protected]>",
   "homepage": "https://nextui.org",
   "license": "MIT",
@@ -37,23 +38,24 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.4.6",
-    "@storybook/addon-actions": "^7.4.6",
-    "@storybook/addon-docs": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
-    "@storybook/cli": "^7.4.6",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/preview-api": "^7.6.17",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-vite": "^7.4.6",
-    "@storybook/theming": "^7.4.6",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/addon-docs": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
+    "@storybook/cli": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/preview-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-vite": "^8.4.5",
+    "@storybook/theming": "^8.4.5",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.13",
-    "storybook": "^7.4.6",
-    "storybook-dark-mode": "^3.0.1",
+    "remark-gfm": "^4.0.0",
+    "storybook": "^8.4.5",
+    "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.3.5",
-    "vite": "^4.4.7"
+    "vite": "^5.4.11"
   },
   "tsup": {
     "clean": true,

diff --git a/packages/storybook/postcss.config.js b/packages/storybook/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

diff --git a/packages/storybook/tailwind.config.js b/packages/storybook/tailwind.config.js
@@ -1,9 +1,9 @@
-const {nextui} = require("@nextui-org/theme/plugin");
+import {nextui} from '@nextui-org/theme/plugin';
 
-// /** @type {import('tailwindcss').Config} */
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+export default {
   content: [
-    "./.storybook/welcome.stories.mdx",
+    "./.storybook/welcome.mdx",
     "../components/*/src/**/*.{js,jsx,ts,tsx}",
     "../components/*/stories/**/*.{js,jsx,ts,tsx}",
     "../core/theme/src/components/**/*.{js,jsx,ts,tsx}",

diff --git a/packages/storybook/vite.config.ts b/packages/storybook/vite.config.ts
@@ -0,0 +1,9 @@
+import {defineConfig} from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    include: ["@storybook/theming", "@mdx-js/react"],
+  },
+});