Merge pull request #263 from storybookjs/valentin/release-9

valentinpalkovic · web-flow · commit f1dee195dff0 · 2025-04-16T12:28:51.000+02:00
Release 9.0.0
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: 'category: feature'
-assignees: ''
-
+title: ""
+labels: "category: feature"
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@ A [Storybook](https://github.com/storybooks/storybook) addon that embed Figma or
 
 ## Requirements
 
-- Storybook@>=8.0.0 (Version 7 of this addon supports Storybook 7)
+- Storybook@>=9.0.0 (Version 7 of this addon supports Storybook 7, Version 8 supports Storybook 8)
 
 This addon should work well with any framework. If you find that the addon does not work, please open an issue.
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,5 +16,5 @@
     "fmt": "prettier --write README.md CHANGELOG.md CONTRIBUTING.md package.json 'packages/**/*.{js,jsx,ts,tsx,md,mdx,json}'",
     "release": "npm run release --workspace=@storybook/addon-designs"
   },
-  "version": "8.0.0"
+  "version": "9.0.0"
 }
diff --git a/packages/examples/.storybook/main.ts b/packages/examples/.storybook/main.ts
@@ -1,5 +1,5 @@
 import remarkGfm from "remark-gfm";
-import type { StorybookConfig } from "@storybook/types";
+import type { StorybookConfig } from "@storybook/react-webpack5";
 
 const isTabMode = process.env.STORYBOOK_ADDON_DESIGNS_MODE === "tab";
 
diff --git a/packages/examples/.storybook/manager.ts b/packages/examples/.storybook/manager.ts
@@ -1,6 +1,6 @@
 // import "../types.d.ts";
-import { addons } from "@storybook/manager-api";
-import { create } from "@storybook/theming";
+import { addons } from "storybook/manager-api";
+import { create } from "storybook/theming";
 
 import logo from "../assets/logo-with-text.svg";
 import pkg from "@storybook/addon-designs/package.json";
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -1,23 +1,18 @@
 {
   "name": "examples",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "private": true,
   "devDependencies": {
-    "@storybook/addon-actions": "8.0.0",
     "@storybook/addon-designs": "*",
-    "@storybook/addon-docs": "8.0.0",
-    "@storybook/addon-links": "8.0.0",
-    "@storybook/addon-storysource": "8.0.0",
+    "@storybook/addon-docs": "^9.0.0-alpha.10",
+    "@storybook/addon-links": "^9.0.0-alpha.10",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/blocks": "8.0.0",
-    "@storybook/components": "8.0.0",
-    "@storybook/react": "8.0.0",
-    "@storybook/react-webpack5": "8.0.0",
-    "@storybook/theming": "8.0.0",
+    "@storybook/react": "^9.0.0-alpha.10",
+    "@storybook/react-webpack5": "^9.0.0-alpha.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "remark-gfm": "^4.0.0",
-    "storybook": "8.0.0"
+    "storybook": "^9.0.0-alpha.10"
   },
   "scripts": {
     "storybook": "storybook dev -p 6006",
diff --git a/packages/examples/stories/Button.css b/packages/examples/stories/Button.css
@@ -6,26 +6,29 @@
   border: none 0;
   outline: 0;
 
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   color: #fff;
   background-image: linear-gradient(277.88deg, #51b441 32.37%, #61c451 99.3%);
   text-transform: uppercase;
   border-radius: 4px;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
   cursor: pointer;
 
-  transition: transform 0.1s ease, box-shadow 0.1s ease;
+  transition:
+    transform 0.1s ease,
+    box-shadow 0.1s ease;
 }
 
 .button:active {
-    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
 
-    transform: scale(0.99);
+  transform: scale(0.99);
 }
 
 .button:disabled {
-    background-image: linear-gradient(277.88deg, #a6b4a4 32.37%, #bdc4bc 99.3%);
-    color: #e0e0e0;
-    cursor: not-allowed;
+  background-image: linear-gradient(277.88deg, #a6b4a4 32.37%, #bdc4bc 99.3%);
+  color: #e0e0e0;
+  cursor: not-allowed;
 }
diff --git a/packages/examples/stories/docs/0.quickStart.mdx b/packages/examples/stories/docs/0.quickStart.mdx
@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks";
-import { TabsState } from "@storybook/components";
+import { Meta } from "@storybook/addon-docs/blocks";
+import { TabsState } from "storybook/internal/components";
 
 <Meta title="Docs/Quick start" />
 
diff --git a/packages/examples/stories/docs/advanced/docs.mdx b/packages/examples/stories/docs/advanced/docs.mdx
@@ -1,5 +1,5 @@
-import { Meta, Subtitle } from "@storybook/blocks";
-import { TabsState } from "@storybook/components";
+import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
+import { TabsState } from "storybook/internal/components";
 
 import { Figma } from "@storybook/addon-designs/blocks";
 
diff --git a/packages/examples/stories/docs/advanced/hide-tab.mdx b/packages/examples/stories/docs/advanced/hide-tab.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Subtitle } from "@storybook/blocks";
+import { Meta, Story, Canvas, Subtitle } from "@storybook/addon-docs/blocks";
 import { hideTab } from "./index.stories";
 import { PanelName } from "@storybook/addon-designs";
 
diff --git a/packages/examples/stories/docs/figma/README.mdx b/packages/examples/stories/docs/figma/README.mdx
@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks";
-import { Badge } from "@storybook/components";
+import { Meta } from "@storybook/addon-docs/blocks";
+import { Badge } from "storybook/internal/components";
 
 <Meta title="Docs/Figma/README" />
 
diff --git a/packages/examples/stories/docs/figma/examples.mdx b/packages/examples/stories/docs/figma/examples.mdx
@@ -1,4 +1,4 @@
-import { Meta, Subtitle } from "@storybook/blocks";
+import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
 import * as FigmaStories from "./examples.stories";
 
 <Meta of={FigmaStories} />
diff --git a/packages/examples/stories/docs/figspec/README.mdx b/packages/examples/stories/docs/figspec/README.mdx
@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks";
-import { Badge } from "@storybook/components";
+import { Meta } from "@storybook/addon-docs/blocks";
+import { Badge } from "storybook/internal/components";
 
 <Meta title="Docs/Figma (Figspec)/README" />
 
diff --git a/packages/examples/stories/docs/iframe/Docs.mdx b/packages/examples/stories/docs/iframe/Docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Subtitle } from "@storybook/blocks";
+import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
 import * as IFrameStories from "./index.stories";
 
 <Meta of={IFrameStories} />
diff --git a/packages/examples/stories/docs/iframe/README.mdx b/packages/examples/stories/docs/iframe/README.mdx
@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks";
-import { Badge } from "@storybook/components";
+import { Meta } from "@storybook/addon-docs/blocks";
+import { Badge } from "storybook/internal/components";
 
 <Meta title="Docs/iframe/README" />
 
diff --git a/packages/examples/stories/docs/image/Docs.mdx b/packages/examples/stories/docs/image/Docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Subtitle } from "@storybook/blocks";
+import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
 import * as ImageStories from "./index.stories";
 
 <Meta of={ImageStories} />
diff --git a/packages/examples/stories/docs/image/README.mdx b/packages/examples/stories/docs/image/README.mdx
@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks";
-import { Badge } from "@storybook/components";
+import { Meta } from "@storybook/addon-docs/blocks";
+import { Badge } from "storybook/internal/components";
 
 <Meta title="Docs/Image/README" />
 
diff --git a/packages/examples/stories/docs/link/Docs.mdx b/packages/examples/stories/docs/link/Docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Subtitle } from "@storybook/blocks";
+import { Meta, Subtitle } from "@storybook/addon-docs/blocks";
 import * as LinkStories from "./index.stories";
 
 <Meta of={LinkStories} />
diff --git a/packages/examples/stories/docs/link/README.mdx b/packages/examples/stories/docs/link/README.mdx
@@ -1,5 +1,5 @@
-import { Meta } from "@storybook/blocks";
-import { Badge } from "@storybook/components";
+import { Meta } from "@storybook/addon-docs/blocks";
+import { Badge } from "storybook/internal/components";
 
 <Meta title="Docs/Link/README" />
 
diff --git a/packages/examples/stories/internal/blocks/0.common.mdx b/packages/examples/stories/internal/blocks/0.common.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes, Source } from "@storybook/blocks";
+import { Meta, ArgTypes, Source } from "@storybook/addon-docs/blocks";
 import { DocBlockBase, IFrame } from "@storybook/addon-designs/blocks";
 
 <Meta title="Internal/Blocks/Common" />
diff --git a/packages/examples/stories/internal/blocks/1.design.mdx b/packages/examples/stories/internal/blocks/1.design.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes, Source, Canvas } from "@storybook/blocks";
+import { Meta, ArgTypes, Source, Canvas } from "@storybook/addon-docs/blocks";
 import { Design } from "@storybook/addon-designs/blocks";
 import * as $1DesignStories from "./1.design.stories";
 
diff --git a/packages/examples/stories/internal/blocks/figma-spec.mdx b/packages/examples/stories/internal/blocks/figma-spec.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes } from "@storybook/blocks";
+import { Meta, ArgTypes } from "@storybook/addon-docs/blocks";
 import { Figspec } from "@storybook/addon-designs/blocks";
 
 <Meta title="Internal/Blocks/Figspec" />
diff --git a/packages/examples/stories/internal/blocks/figma.mdx b/packages/examples/stories/internal/blocks/figma.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes } from "@storybook/blocks";
+import { Meta, ArgTypes } from "@storybook/addon-docs/blocks";
 import { Figma } from "@storybook/addon-designs/blocks";
 
 <Meta title="Internal/Blocks/Figma" />
diff --git a/packages/examples/stories/internal/blocks/iframe.mdx b/packages/examples/stories/internal/blocks/iframe.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes } from "@storybook/blocks";
+import { Meta, ArgTypes } from "@storybook/addon-docs/blocks";
 import { IFrame } from "@storybook/addon-designs/blocks";
 
 <Meta title="Internal/Blocks/IFrame" />
diff --git a/packages/examples/stories/internal/blocks/image.mdx b/packages/examples/stories/internal/blocks/image.mdx
@@ -1,4 +1,4 @@
-import { Meta, ArgTypes } from "@storybook/blocks";
+import { Meta, ArgTypes } from "@storybook/addon-docs/blocks";
 import { Image } from "@storybook/addon-designs/blocks";
 import sampleImage from "../../../assets/sample.png";
 
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": "8.0.0-alpha.1",
+  "version": "9.0.0",
   "description": "Storybook addon for embedding your design preview in addon panel",
   "keywords": [
     "storybook-addon",
@@ -45,36 +45,25 @@
   },
   "devDependencies": {
     "@auto-it/released": "^11.1.1",
-    "@storybook/components": "^8.0.0",
-    "@storybook/core-events": "^8.0.0",
-    "@storybook/manager-api": "^8.0.0",
-    "@storybook/preview-api": "^8.0.0",
-    "@storybook/theming": "^8.0.0",
     "@types/react": "^18.2.65",
     "@types/react-dom": "^18.2.21",
     "@types/webpack-env": "^1.18.4",
     "auto": "^11.1.1",
     "figma-js": "^1.16.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^18.0.0",
     "tsup": "^8.0.2",
-    "typescript": "^5.4.2"
+    "storybook": "^9.0.0-alpha.5",
+    "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "@storybook/blocks": "^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0",
-    "@storybook/components": "^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0",
-    "@storybook/theming": "^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
+    "@storybook/addon-docs": "^0.0.0-0 || ^9.0.0 || ^9.0.0-0",
+    "storybook": "^0.0.0-0 || ^9.0.0 || ^9.0.0-0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
-    "@storybook/blocks": {
-      "optional": true
-    },
-    "@storybook/components": {
-      "optional": true
-    },
-    "@storybook/theming": {
+    "@storybook/addon-docs": {
       "optional": true
     },
     "react": {
diff --git a/packages/storybook-addon-designs/src/blocks.tsx b/packages/storybook-addon-designs/src/blocks.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import type { CSSProperties, FC } from "react";
-import { ActionBar, Placeholder } from "@storybook/components";
-import { styled } from "@storybook/theming";
-import { useOf, Of } from "@storybook/blocks";
+import { ActionBar, Placeholder } from "storybook/internal/components";
+import { styled } from "storybook/theming";
+import { useOf, Of } from "@storybook/addon-docs/blocks";
 
 import { Figma as FigmaInternal } from "./manager/components/Figma";
 import { Figspec as FigspecInternal } from "./manager/components/Figspec";
@@ -13,7 +13,7 @@ import { Wrapper as WrapperInternal } from "./manager/components/Wrapper";
 import * as config from "./config";
 import { ParameterName } from "./constants";
 
-// Since the exports of `@storybook/components` is unstable, I couldn't manage
+// Since the exports of `storybook/internal/components` is unstable, I couldn't manage
 // to import the `components.resetWrapper` while maintaining version requirements.
 // This component does similar to the official one at minimum.
 // https://github.com/storybookjs/storybook/blob/4bd2fc9b0677190c59e60fd63841294ab88e80c5/lib/components/src/typography/DocumentFormatting.tsx#L364-L372
diff --git a/packages/storybook-addon-designs/src/manager/components/ErrorBoundary.tsx b/packages/storybook-addon-designs/src/manager/components/ErrorBoundary.tsx
@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { Component, ErrorInfo, Fragment } from "react";
-import { Link, Placeholder } from "@storybook/components";
-import { jsx } from "@storybook/theming";
+import { Link, Placeholder } from "storybook/internal/components";
+import { jsx } from "storybook/theming";
 
 type State =
   | {
diff --git a/packages/storybook-addon-designs/src/manager/components/Figma.tsx b/packages/storybook-addon-designs/src/manager/components/Figma.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, useMemo } from "react";
-import { jsx } from "@storybook/theming";
+import { jsx } from "storybook/theming";
 
 import { IFrame } from "./IFrame";
 
diff --git a/packages/storybook-addon-designs/src/manager/components/Figspec.tsx b/packages/storybook-addon-designs/src/manager/components/Figspec.tsx
@@ -12,8 +12,8 @@ import {
   FigspecFrameViewer,
   FigspecFrameViewerProps,
 } from "@figspec/react";
-import { Placeholder } from "@storybook/components";
-import { css, jsx } from "@storybook/theming";
+import { Placeholder } from "storybook/internal/components";
+import { css, jsx } from "storybook/theming";
 
 import { FigspecConfig } from "../../config";
 
diff --git a/packages/storybook-addon-designs/src/manager/components/IFrame.tsx b/packages/storybook-addon-designs/src/manager/components/IFrame.tsx
@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { FC, ReactNode, useEffect, useState } from "react";
-import { css, jsx } from "@storybook/theming";
+import { css, jsx } from "storybook/theming";
 
-import { Placeholder } from "@storybook/components";
+import { Placeholder } from "storybook/internal/components";
 
 import { IFrameConfigBase } from "../../config";
 
diff --git a/packages/storybook-addon-designs/src/manager/components/Image.tsx b/packages/storybook-addon-designs/src/manager/components/Image.tsx
@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import { Fragment, useMemo, CSSProperties, FC } from "react";
-import { css, jsx } from "@storybook/theming";
+import { css, jsx } from "storybook/theming";
 
-import { FlexBar, Separator } from "@storybook/components";
+import { FlexBar, Separator } from "storybook/internal/components";
 
 import { Pan } from "./Pan";
 import { ZoomButtons } from "./ZoomButtons";
@@ -28,17 +28,26 @@ export const ImagePreview: FC<Props> = ({ config }) => {
   return (
     <div css={$container}>
       <FlexBar border>
-        <Fragment key="left">
-          <p>
-            <b>Image</b>
-          </p>
-          <Separator />
-          <ZoomButtons
-            onReset={zoom.resetZoom}
-            onZoomIn={zoom.zoomIn}
-            onZoomOut={zoom.zoomOut}
-          />
-        </Fragment>
+        <div
+          style={{
+            display: "grid",
+            gridAutoFlow: "column",
+            gap: "4px",
+            alignItems: "center",
+          }}
+        >
+          <Fragment key="left">
+            <p>
+              <b>Image</b>
+            </p>
+            <Separator />
+            <ZoomButtons
+              onReset={zoom.resetZoom}
+              onZoomIn={zoom.zoomIn}
+              onZoomOut={zoom.zoomOut}
+            />
+          </Fragment>
+        </div>
       </FlexBar>
       <Pan css={$preview} defaultValue={config.offset}>
         <img css={$image} src={config.url} style={imageStyles} />
diff --git a/packages/storybook-addon-designs/src/manager/components/LinkPanel.tsx b/packages/storybook-addon-designs/src/manager/components/LinkPanel.tsx
diff --git a/packages/storybook-addon-designs/src/manager/components/Pan.tsx b/packages/storybook-addon-designs/src/manager/components/Pan.tsx
diff --git a/packages/storybook-addon-designs/src/manager/components/Sketch.tsx b/packages/storybook-addon-designs/src/manager/components/Sketch.tsx
diff --git a/packages/storybook-addon-designs/src/manager/components/Tabs.tsx b/packages/storybook-addon-designs/src/manager/components/Tabs.tsx
diff --git a/packages/storybook-addon-designs/src/manager/components/Wrapper.tsx b/packages/storybook-addon-designs/src/manager/components/Wrapper.tsx
diff --git a/packages/storybook-addon-designs/src/manager/components/ZoomButtons.tsx b/packages/storybook-addon-designs/src/manager/components/ZoomButtons.tsx
diff --git a/packages/storybook-addon-designs/src/manager/containers/Wrapper.tsx b/packages/storybook-addon-designs/src/manager/containers/Wrapper.tsx
diff --git a/packages/storybook-addon-designs/src/manager/register.tsx b/packages/storybook-addon-designs/src/manager/register.tsx
diff --git a/packages/storybook-addon-designs/tsconfig.json b/packages/storybook-addon-designs/tsconfig.json
diff --git a/packages/storybook-addon-designs/tsup.config.ts b/packages/storybook-addon-designs/tsup.config.ts

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,5 @@`
`16`	`16`	`"fmt": "prettier --write README.md CHANGELOG.md CONTRIBUTING.md package.json 'packages/*/.{js,jsx,ts,tsx,md,mdx,json}'",`
`17`	`17`	`"release": "npm run release --workspace=@storybook/addon-designs"`
`18`	`18`	`},`
`19`		`- "version": "8.0.0"`
	`19`	`+ "version": "9.0.0"`
`20`	`20`	`}`