Merge pull request #228 from storybookjs/next

Upgrade to Storybook 8
storybookjs · Mar 11, 2024 · 18bba6b · 18bba6b
2 parents 34b0d0d + 892e4ee
commit 18bba6b
Show file tree

Hide file tree

Showing 14 changed files with 7,455 additions and 24,082 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.15.1
+v18.19.0
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,5 +17,5 @@
     "release": "npm run release --workspace=@storybook/addon-designs"
   },
   "prettier": {},
-  "version": "7.0.0-beta.2"
+  "version": "8.0.0-alpha.1"
 }
diff --git a/packages/assets/package.json b/packages/assets/package.json
@@ -1,5 +1,5 @@
 {
   "name": "@storybook/addon-designs-assets",
-  "version": "7.0.0-beta.2",
+  "version": "8.0.0-alpha.1",
   "private": true
 }
diff --git a/packages/examples-tab/package.json b/packages/examples-tab/package.json
@@ -1,9 +1,9 @@
 {
   "name": "examples-tab",
-  "version": "7.0.0-beta.2",
+  "version": "8.0.0-alpha.1",
   "private": true,
   "dependencies": {
-    "examples": "7.0.0-beta.2"
+    "examples": "*"
   },
   "scripts": {
     "storybook": "storybook dev -p 6007",

diff --git a/packages/examples/.storybook/main.js b/packages/examples/.storybook/main.js
@@ -5,12 +5,8 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-designs",
     "@storybook/addon-docs",
-    "@storybook/addon-storysource",
-    "@storybook/addon-mdx-gfm",
+    "@storybook/addon-webpack5-compiler-swc",
   ],
-  features: {
-    babelModeV7: true,
-  },
   core: {
     disableTelemetry: true,
   },

diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -1,31 +1,28 @@
 {
   "name": "examples",
-  "version": "7.0.0-beta.2",
+  "version": "8.0.0-alpha.1",
   "private": true,
   "dependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.5",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
     "@babel/preset-typescript": "^7.17.12",
-    "@storybook/addon-actions": "^7.0.7",
-    "@storybook/addon-mdx-gfm": "^7.0.7",
+    "@storybook/addon-actions": "^8.0.0-alpha.10 || ^8.0.0",
     "@storybook/addon-designs": "*",
     "@storybook/addon-designs-assets": "*",
-    "@storybook/addon-docs": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/addon-storysource": "^7.0.7",
-    "@storybook/addons": "^7.0.7",
-    "@storybook/blocks": "^7.0.7",
-    "@storybook/components": "^7.0.7",
-    "@storybook/mdx1-csf": "^1.0.0",
-    "@storybook/react": "^7.0.7",
-    "@storybook/react-webpack5": "^7.0.7",
-    "@storybook/theming": "^7.0.7",
-    "storybook": "^7.0.7"
+    "@storybook/addon-docs": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/addon-links": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/addon-storysource": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/blocks": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/components": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/react": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/react-webpack5": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/theming": "^8.0.0-alpha.10 || ^8.0.0",
+    "storybook": "^8.0.0-alpha.10 || ^8.0.0"
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",

diff --git a/packages/examples/stories/docs/advanced/index.stories.js b/packages/examples/stories/docs/advanced/index.stories.js
@@ -4,48 +4,53 @@ import { config } from "@storybook/addon-designs";
 
 import { Button } from "../../Button";
 
-export default {
+const meta = {
   title: "Docs/Advanced usage",
 };
 
-export const setTabName = () => <Button>Button</Button>;
+export default meta;
 
-setTabName.parameters = {
-  design: config({
-    name: "Wireframe",
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-  }),
-};
-
-export const embedMultipleDesigns = () => <Button>Button</Button>;
-
-embedMultipleDesigns.parameters = {
-  design: config([
-    {
+export const setTabName = {
+  render: () => <Button>Button</Button>,
+  parameters: {
+    design: config({
+      name: "Wireframe",
       type: "figma",
       url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-    {
-      type: "link",
-      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-  ]),
+    }),
+  },
 };
 
-export const setTabNames = () => <Button>Button</Button>;
+export const embedMultipleDesigns = {
+  render: () => <Button>Button</Button>,
+  parameters: {
+    design: config([
+      {
+        type: "figma",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+      {
+        type: "link",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+    ]),
+  },
+};
 
-setTabNames.parameters = {
-  design: config([
-    {
-      name: "Foo",
-      type: "figma",
-      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-    {
-      name: "Bar",
-      type: "link",
-      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    },
-  ]),
+export const setTabNames = {
+  render: () => <Button>Button</Button>,
+  parameters: {
+    design: config([
+      {
+        name: "Foo",
+        type: "figma",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+      {
+        name: "Bar",
+        type: "link",
+        url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      },
+    ]),
+  },
 };
diff --git a/packages/examples/stories/docs/figma/examples.stories.js b/packages/examples/stories/docs/figma/examples.stories.js
@@ -4,53 +4,56 @@ import { config } from "@storybook/addon-designs";
 
 import { Button } from "../../Button";
 
-export default {
+const meta = {
   title: "Docs/Figma/Examples",
   component: Button,
+  render: () => <Button>Button</Button>,
 };
 
-export const embedFile = () => <Button>Button</Button>;
+export default meta;
 
-embedFile.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-  }),
+export const embedFile = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+    }),
+  },
 };
 
-export const embedFrame = () => <Button>Button</Button>;
-
-embedFrame.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample?node-id=2%3A5",
-  }),
+export const embedFrame = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample?node-id=2%3A5",
+    }),
+  },
 };
 
-export const embedPrivateFile = () => <Button>Button</Button>;
-
-embedPrivateFile.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/WOpzYgwlTe1UV6MpJP6SMv/private-test",
-  }),
+export const embedPrivateFile = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/WOpzYgwlTe1UV6MpJP6SMv/private-test",
+    }),
+  },
 };
 
-export const embedPrototype = () => <Button>Button</Button>;
-
-embedPrototype.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/proto/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-  }),
+export const embedPrototype = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/proto/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+    }),
+  },
 };
 
-export const allowFullscreen = () => <Button>Button</Button>;
-
-allowFullscreen.parameters = {
-  design: config({
-    type: "figma",
-    url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
-    allowFullscreen: true,
-  }),
+export const allowFullscreen = {
+  parameters: {
+    design: config({
+      type: "figma",
+      url: "https://www.figma.com/file/Klm6pxIZSaJFiOMX5FpTul9F/storybook-addon-designs-sample",
+      allowFullscreen: true,
+    }),
+  },
 };
diff --git a/packages/examples/stories/internal/blocks/1.design.stories.js b/packages/examples/stories/internal/blocks/1.design.stories.js
@@ -1,3 +1,5 @@
+import React from "react";
+
 export default {
   title: "Internal/Blocks/Design",
 };

diff --git a/packages/storybook-addon-designs/package.json b/packages/storybook-addon-designs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-designs",
-  "version": "7.0.0--canary.ca11952.0",
+  "version": "8.0.0-alpha.1",
   "description": "Storybook addon for embedding your design preview in addon panel",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -24,26 +24,27 @@
   "devDependencies": {
     "@auto-it/released": "^11.0.1",
     "@figspec/components": "^1.0.0",
-    "@storybook/addon-docs": "^7.0.7",
-    "@storybook/components": "^7.0.7",
-    "@storybook/core-events": "^7.0.7",
-    "@storybook/manager-api": "^7.0.7",
-    "@storybook/preview-api": "^7.0.7",
-    "@storybook/theming": "^7.0.7",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@storybook/addon-docs": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/components": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/core-events": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/manager-api": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/preview-api": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/theming": "^8.0.0-alpha.10 || ^8.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/webpack-env": "^1.13.9",
     "auto": "^11.0.1",
     "figma-js": "^1.13.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.7.3"
   },
   "peerDependencies": {
-    "@storybook/addon-docs": "^7.0.0",
-    "@storybook/addons": "^7.0.0",
-    "@storybook/components": "^7.0.0",
-    "@storybook/manager-api": "^7.0.0",
-    "@storybook/preview-api": "^7.0.0",
-    "@storybook/theming": "^7.0.0",
+    "@storybook/addon-docs": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/components": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/manager-api": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/preview-api": "^8.0.0-alpha.10 || ^8.0.0",
+    "@storybook/theming": "^8.0.0-alpha.10 || ^8.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },

diff --git a/packages/storybook-addon-designs/src/blocks.tsx b/packages/storybook-addon-designs/src/blocks.tsx
@@ -86,6 +86,8 @@ export interface BlocksCommonProps {
    */
   collapsable?: boolean;
 
+  children?: React.ReactNode;
+
   /**
    * **Doc Block Props**
    *

diff --git a/packages/storybook-addon-designs/src/register/components/ErrorBoundary.tsx b/packages/storybook-addon-designs/src/register/components/ErrorBoundary.tsx
@@ -12,7 +12,7 @@ type State =
       error: unknown;
     };
 
-export class ErrorBoundary extends Component {
+export class ErrorBoundary extends Component<{ children: React.ReactNode }> {
   public state: State = { hasError: false };
 
   static getDerivedStateFromError(error: unknown): State {

diff --git a/packages/storybook-addon-designs/src/register/index.tsx b/packages/storybook-addon-designs/src/register/index.tsx
@@ -34,15 +34,15 @@ export default function register(renderTarget: "panel" | "tab") {
     if (renderTarget === "tab") {
       addons.add(PanelName, {
         title: DEFAULT_TAB_NAME,
-        render({ active, key }) {
+        render({ active }) {
           if (!active) {
             // NOTE: Return type of render is `ReactElement`, hence returning `null` causes
             //       type error. I'm using `<noscript>` in place of `null`.
-            return <noscript key={key} />;
+            return <noscript />;
           }
 
           return (
-            <ErrorBoundary key={key}>
+            <ErrorBoundary>
               <Wrapper active />
             </ErrorBoundary>
           );