Migrate plugin to Storybook v8

ljcl · Apr 8, 2024 · fb1f6e9 · fb1f6e9
1 parent 0f25a37
commit fb1f6e9
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 1,380 deletions.
diff --git a/.changeset/bright-ligers-wonder.md b/.changeset/bright-ligers-wonder.md
@@ -0,0 +1,8 @@
+---
+"@ljcl/storybook-addon-cssprops": major
+"examples": minor
+---
+
+Storybook 8 support
+
+Storybook has made some major changes to its API and as a result support for Storybook 7 and below has been dropped.
diff --git a/packages/examples/.babelrc.json b/packages/examples/.babelrc.json
@@ -9,8 +9,13 @@
         }
       }
     ],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/preset-typescript"
   ],
   "plugins": []
-}
+}
diff --git a/packages/examples/.storybook/main.js b/packages/examples/.storybook/main.js
@@ -5,7 +5,6 @@ const config = {
   addons: [
     getAbsolutePath("@ljcl/storybook-addon-cssprops"),
     getAbsolutePath("@storybook/addon-docs"),
-    getAbsolutePath("@storybook/addon-mdx-gfm"),
     getAbsolutePath("@storybook/addon-webpack5-compiler-babel"),
   ],
   framework: {

diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -17,10 +17,8 @@
     "@storybook/addon-actions": "^8.0.5",
     "@storybook/addon-docs": "^8.0.5",
     "@storybook/addon-links": "^8.0.5",
-    "@storybook/addon-mdx-gfm": "^8.0.5",
     "@storybook/addon-storysource": "^8.0.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/addons": "^7.6.17",
     "@storybook/react": "^8.0.5",
     "@storybook/react-webpack5": "^8.0.5",
     "@storybook/theming": "^8.0.5",

diff --git a/packages/storybook-addon-cssprops/package.json b/packages/storybook-addon-cssprops/package.json
@@ -42,19 +42,18 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addons": "^7.0.2",
-    "@storybook/api": "^7.0.2",
-    "@storybook/preview-api": "^7.0.2",
-    "@storybook/blocks": "^7.0.2",
-    "@storybook/components": "^7.0.2",
-    "@storybook/theming": "^7.0.2",
-    "@storybook/types": "^7.0.2",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/components": "^8.0.5",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/preview-api": "^8.0.5",
+    "@storybook/theming": "^8.0.5",
+    "@storybook/types": "^8.0.5",
     "@types/node": "^14.14.22",
     "@types/react": "^16.8.8",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.1.3",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "dev": "tsc --watch --preserveWatchOutput",

diff --git a/packages/storybook-addon-cssprops/src/components/CssPropsPanel.tsx b/packages/storybook-addon-cssprops/src/components/CssPropsPanel.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { CssPropsTable } from "./CssPropsTable/CssPropsTable";
 import { NoCustomPropertiesWarning } from "./NoCustomPropertiesWarning";
-import { useParameter } from "@storybook/api";
+import { useParameter } from "@storybook/manager-api";
 import type { CssPropsParametersType } from "./CssPropsTable/types";
 import { PARAM_KEY } from "../constants";
 

diff --git a/packages/storybook-addon-cssprops/src/register.tsx b/packages/storybook-addon-cssprops/src/register.tsx
@@ -1,13 +1,13 @@
 import * as React from "react";
-import { addons, types } from "@storybook/addons";
+import { addons, types } from "@storybook/manager-api";
 import { AddonPanel } from "@storybook/components";
-import { API } from "@storybook/api";
+import { API } from "@storybook/manager-api";
 import { CssPropsPanel } from "./components/CssPropsPanel";
 import { useTitle } from "./title";
 import { ADDON_ID, PARAM_KEY } from "./constants";
 
 addons.register(ADDON_ID, (api: API) => {
-  addons.addPanel(ADDON_ID, {
+  addons.add(ADDON_ID, {
     title: useTitle,
     type: types.PANEL,
     paramKey: PARAM_KEY,

diff --git a/packages/storybook-addon-cssprops/src/title.ts b/packages/storybook-addon-cssprops/src/title.ts
@@ -1,12 +1,14 @@
-import { useParameter } from "@storybook/api";
+import { useParameter } from "@storybook/manager-api";
 import { PARAM_KEY } from "./constants";
 import { CssPropertyItemGroup } from "./components/CssPropsTable/types";
 
-const CONFIG_KEYS = ['presetColors', 'disable']
+const CONFIG_KEYS = ["presetColors", "disable"];
 
 export function useTitle(): string {
   const cssprops = useParameter<CssPropertyItemGroup>(PARAM_KEY, {});
-  const controlsCount = Object.entries(cssprops).filter((item) => !CONFIG_KEYS.includes(item[0])).length;
+  const controlsCount = Object.entries(cssprops).filter(
+    (item) => !CONFIG_KEYS.includes(item[0])
+  ).length;
   const suffix = controlsCount === 0 ? "" : ` (${controlsCount})`;
   return `CSS Custom Properties${suffix}`;
 }