Merge pull request #330 from chromaui/norbert/cpc

Align with Storybook 8.2 core package layout

.eslintrc.cjs

@@ -2,6 +2,7 @@ module.exports = {
   root: true,
   extends: ["@storybook/eslint-config-storybook", "plugin:storybook/recommended"],
   rules: {
+    'import/no-unresolved': 'off',
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "eslint-comments/disable-enable-pair": "off",
     "simple-import-sort/imports": "error",

.storybook/main.ts

@@ -14,30 +14,17 @@ const configFileMap = {
 
 const config: StorybookConfig = {
   addons: [
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        backgrounds: false,
-        viewport: false,
-      },
-    },
     "@storybook/addon-interactions",
     "@storybook/addon-designs",
+    "@storybook/addon-mdx-gfm",
     {
       name: useDistVersion ? "../dist/preset.js" : "../src/dev.ts",
       options: {
         configFile: configFileMap[CHROMATIC_BASE_URL || '"https://www.chromatic.com"'],
       },
     },
-    "@storybook/addon-mdx-gfm",
   ],
-  docs: {
-    autodocs: "tag",
-  },
-  framework: {
-    name: "@storybook/react-vite",
-    options: {},
-  },
+  framework: "@storybook/react-vite",
   logLevel: "debug",
   staticDirs: ["../public"],
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],

.storybook/preview.tsx

@@ -1,7 +1,10 @@
 import { action } from "@storybook/addon-actions";
-import { ManagerContext } from "@storybook/manager-api";
 import type { Decorator, Loader, Preview } from "@storybook/react";
 import { fn } from "@storybook/test";
+import { HttpResponse, graphql } from "msw";
+import { initialize, mswLoader } from "msw-storybook-addon";
+import React from "react";
+import { ManagerContext } from "storybook/internal/manager-api";
 import {
   Global,
   ThemeProvider,
@@ -10,10 +13,7 @@ import {
   styled,
   themes,
   useTheme,
-} from "@storybook/theming";
-import { HttpResponse, graphql } from "msw";
-import { initialize, mswLoader } from "msw-storybook-addon";
-import React from "react";
+} from "storybook/internal/theming";
 
 import { AuthProvider } from "../src/AuthContext";
 import { baseModes } from "../src/modes";

package.json

@@ -59,33 +59,27 @@
     "react-confetti": "^6.1.0",
     "strip-ansi": "^7.1.0"
   },
+  "peerDependencies": {
+    "storybook": "^8.2.0"
+  },
   "devDependencies": {
     "@emotion/weak-memoize": "^0.3.1",
     "@graphql-codegen/cli": "^4.0.1",
     "@graphql-codegen/client-preset": "^4.0.1",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@storybook/addon-actions": "^8.0.0",
-    "@storybook/addon-designs": "^8.0.0",
-    "@storybook/addon-essentials": "^8.0.0",
-    "@storybook/addon-interactions": "^8.0.0",
-    "@storybook/addon-mdx-gfm": "^8.0.0",
-    "@storybook/blocks": "^8.0.0",
-    "@storybook/channels": "^8.0.0",
-    "@storybook/client-logger": "^8.0.0",
-    "@storybook/components": "^8.0.0",
-    "@storybook/core-events": "^8.0.0",
+    "@mdx-js/rollup": "^3.0.1",
+    "@storybook/addon-actions": "^8.2.9",
+    "@storybook/addon-designs": "^8.0.3",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-mdx-gfm": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/icons": "^1.2.8",
-    "@storybook/manager": "^8.0.0",
-    "@storybook/manager-api": "^8.0.0",
-    "@storybook/preview": "^8.0.0",
-    "@storybook/react": "^8.0.0",
-    "@storybook/react-vite": "^8.0.0",
-    "@storybook/telemetry": "^8.0.0",
-    "@storybook/test": "^8.0.0",
+    "@storybook/icons": "^1.2.10",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.0.0",
-    "@storybook/types": "^8.0.0",
     "@types/jsonfile": "^6.1.1",
     "@types/node": "^18.15.0",
     "@types/pluralize": "^0.0.29",
@@ -102,10 +96,10 @@
     "eslint": "^8.42.0",
     "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "graphql": "^16.8.1",
     "msw": "^2.0.0",
-    "msw-storybook-addon": "2.0.0--canary.122.b3ed3b1.0",
+    "msw-storybook-addon": "^2.0.3",
     "npm-run-all": "^4.1.5",
     "pluralize": "^8.0.0",
     "polished": "^4.2.2",
@@ -116,7 +110,7 @@
     "react-dom": "^16.14.0",
     "react-joyride": "^2.7.2",
     "rimraf": "^3.0.2",
-    "storybook": "^8.0.0",
+    "storybook": "^8.2.9",
     "ts-dedent": "^2.2.0",
     "tsup": "^6.6.3",
     "typescript": "^4.9.5",

src/Panel.tsx

@@ -1,6 +1,6 @@
-import type { API } from "@storybook/manager-api";
-import { useChannel, useStorybookState } from "@storybook/manager-api";
 import React, { useCallback, useEffect, useState } from "react";
+import type { API } from "storybook/internal/manager-api";
+import { useChannel, useStorybookState } from "storybook/internal/manager-api";
 
 import { AuthProvider } from "./AuthContext";
 import { Spinner } from "./components/design-system";

src/buildSteps.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-unresolved
 import { TaskName } from "chromatic/node";
 import { filesize } from "filesize";
 

src/components/Accordions.tsx

@@ -6,7 +6,7 @@ import {
   StopIcon as Stop,
   TimerIcon as Timer,
 } from "@storybook/icons";
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 import { IconButton } from "./IconButton";
 

src/components/ActionButton.tsx

@@ -1,6 +1,6 @@
-import { styled, type Theme } from "@storybook/theming";
 import { darken, lighten } from "polished";
 import { ComponentProps } from "react";
+import { styled, type Theme } from "storybook/internal/theming";
 
 import { IconButton } from "./IconButton";
 

src/components/Badge.tsx

@@ -1,6 +1,6 @@
-import { Badge as BaseBadge } from "@storybook/components";
-import { styled } from "@storybook/theming";
 import { ReactNode } from "react";
+import { Badge as BaseBadge } from "storybook/internal/components";
+import { styled } from "storybook/internal/theming";
 
 type BadgeProps = React.ComponentProps<typeof BaseBadge>;
 

src/components/Box.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 export const Box = styled.div<{ warning?: boolean }>(
   ({ theme }) => ({

src/components/BrowserSelector.tsx

@@ -1,7 +1,7 @@
-import { WithTooltip } from "@storybook/components";
 import { ChevronDownIcon } from "@storybook/icons";
-import { styled, useTheme } from "@storybook/theming";
 import React, { ComponentProps } from "react";
+import { WithTooltip } from "storybook/internal/components";
+import { styled, useTheme } from "storybook/internal/theming";
 
 import { Browser, BrowserInfo, ComparisonResult } from "../gql/graphql";
 import { aggregateResult } from "../utils/aggregateResult";

src/components/BuildProgressBarInline.tsx

@@ -1,5 +1,5 @@
-import { styled } from "@storybook/theming";
 import React from "react";
+import { styled } from "storybook/internal/theming";
 
 import { LocalBuildProgress } from "../types";
 import { BuildProgressLabel } from "./BuildProgressLabel";

src/components/Button.tsx

@@ -1,5 +1,5 @@
-import { Button as BaseButton } from "@storybook/components";
-import { css, styled } from "@storybook/theming";
+import { Button as BaseButton } from "storybook/internal/components";
+import { css, styled } from "storybook/internal/theming";
 
 export const Button = styled(BaseButton)<{
   link?: boolean;

src/components/ButtonStack.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 export const ButtonStack = styled.div(() => ({
   display: "flex",

src/components/Code.tsx

@@ -1,5 +1,5 @@
-import { Code as SBCode } from "@storybook/components";
-import { styled } from "@storybook/theming";
+import { Code as SBCode } from "storybook/internal/components";
+import { styled } from "storybook/internal/theming";
 
 export const Code = styled(SBCode)(({ theme }) => ({
   color: theme.base === "light" ? theme.color.darker : theme.color.lighter,

src/components/Container.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 export const Container = styled.div({
   display: "flex",

src/components/Eyebrow.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 export const Eyebrow = styled.div(({ theme }) => ({
   background: theme.background.app,

src/components/Heading.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 export const Heading = styled.h1(({ theme }) => ({
   marginTop: 0,

src/components/IconButton.tsx

@@ -1,6 +1,6 @@
-import { IconButton as BaseIconButton } from "@storybook/components";
-import { styled, type Theme } from "@storybook/theming";
 import { ComponentProps } from "react";
+import { IconButton as BaseIconButton } from "storybook/internal/components";
+import { styled, type Theme } from "storybook/internal/theming";
 
 const getStatusStyles = (theme: Theme, status?: IconButtonProps["status"]) =>
   (status &&

src/components/ModeSelector.tsx

@@ -1,7 +1,7 @@
-import { WithTooltip } from "@storybook/components";
 import { ChevronDownIcon, DiamondIcon } from "@storybook/icons";
-import { styled, useTheme } from "@storybook/theming";
 import React from "react";
+import { WithTooltip } from "storybook/internal/components";
+import { styled, useTheme } from "storybook/internal/theming";
 
 import { ComparisonResult, TestMode } from "../gql/graphql";
 import { aggregateResult } from "../utils/aggregateResult";

src/components/Placeholder.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 export const Placeholder = styled.div<{
   width?: number;

src/components/Screen.tsx

@@ -1,7 +1,7 @@
 import { CloseIcon } from "@storybook/icons";
-import { styled } from "@storybook/theming";
 import pluralize from "pluralize";
 import React, { ReactNode, useCallback, useState } from "react";
+import { styled } from "storybook/internal/theming";
 
 import { CONFIG_INFO, CONFIG_INFO_DISMISSED } from "../constants";
 import { Configuration } from "../screens/VisualTests/Configuration";

src/components/SidebarBottom.tsx

@@ -1,7 +1,7 @@
-import { type API, type State, useStorybookState } from "@storybook/manager-api";
-import { styled } from "@storybook/theming";
-import type { API_FilterFunction } from "@storybook/types";
 import React, { useCallback, useEffect } from "react";
+import { type API, type State, useStorybookState } from "storybook/internal/manager-api";
+import { styled } from "storybook/internal/theming";
+import type { API_FilterFunction } from "storybook/internal/types";
 
 import { ADDON_ID, ENABLE_FILTER } from "../constants";
 import { SidebarToggleButton } from "./SidebarToggleButton";

src/components/SidebarToggleButton.tsx

@@ -1,7 +1,7 @@
-import { Badge as BaseBadge } from "@storybook/components";
-import { css, styled } from "@storybook/theming";
 import pluralize from "pluralize";
 import React, { ComponentProps } from "react";
+import { Badge as BaseBadge } from "storybook/internal/components";
+import { css, styled } from "storybook/internal/theming";
 
 import { IconButton } from "./IconButton";
 

src/components/SidebarTop.tsx

@@ -1,8 +1,8 @@
 import { FailedIcon, PassedIcon } from "@storybook/icons";
-import { type API, useStorybookState } from "@storybook/manager-api";
-import { color } from "@storybook/theming";
 import pluralize from "pluralize";
 import React, { useCallback, useContext, useEffect, useRef } from "react";
+import { type API, useStorybookState } from "storybook/internal/manager-api";
+import { color } from "storybook/internal/theming";
 
 import {
   ADDON_ID,
@@ -98,7 +98,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline: "Check the visual test addon to see the progress of your build.",
         },
         icon: <PassedIcon color={color.positive} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
       });
@@ -116,7 +115,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline: "Aborted by user.",
         },
         icon: <FailedIcon color={color.negative} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
       });
@@ -142,7 +140,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
             : "No visual changes detected",
         },
         icon: <PassedIcon color={color.positive} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
       });
@@ -159,7 +156,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline: "Check the Storybook process on the command line for more details.",
         },
         icon: <FailedIcon color={color.negative} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
     }
@@ -173,7 +169,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
             "Your account has insufficient snapshots remaining to run this build. Visit your billing page to find out more.",
         },
         icon: <FailedIcon color={color.negative} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
     }

src/components/SidebarTopButton.tsx

@@ -1,7 +1,7 @@
-import { WithTooltip } from "@storybook/components";
 import { PlayIcon, StopAltIcon } from "@storybook/icons";
-import { keyframes, styled } from "@storybook/theming";
 import React, { ComponentProps } from "react";
+import { WithTooltip } from "storybook/internal/components";
+import { keyframes, styled } from "storybook/internal/theming";
 
 import { LocalBuildProgress } from "../types";
 import { BuildProgressLabel } from "./BuildProgressLabel";

src/components/SnapshotImage.tsx

@@ -1,6 +1,6 @@
 import { PhotoIcon, ShareAltIcon } from "@storybook/icons";
-import { styled, useTheme } from "@storybook/theming";
 import React, { ComponentProps } from "react";
+import { styled, useTheme } from "storybook/internal/theming";
 
 import { CaptureImage, CaptureOverlayImage, ComparisonResult, Test } from "../gql/graphql";
 import { Spinner } from "./design-system";

src/components/SnapshotImageThumb.tsx

@@ -1,6 +1,6 @@
 import { CheckIcon } from "@storybook/icons";
-import { styled } from "@storybook/theming";
 import React from "react";
+import { styled } from "storybook/internal/theming";
 
 const Wrapper = styled.div<{ status?: "positive" }>(({ status, theme }) => ({
   position: "relative",

src/components/Stack.tsx

@@ -1,7 +1,6 @@
-import type { CSSObject } from "@storybook/theming";
-import { styled } from "@storybook/theming";
+import type { CSSObject } from "storybook/internal/theming";
+import { styled } from "storybook/internal/theming";
 
-// @ts-expect-error TODO fix overload
 export const Stack = styled.div<Pick<CSSObject, "alignItems" | "textAlign">>((props) => ({
   display: "flex",
   flexDirection: "column",

src/components/StatusDot.tsx

@@ -1,5 +1,5 @@
-import { css, styled } from "@storybook/theming";
 import React from "react";
+import { css, styled } from "storybook/internal/theming";
 
 import { ComparisonResult, TestStatus } from "../gql/graphql";
 

src/components/SuffixInput.tsx

@@ -1,5 +1,5 @@
-import { styled } from "@storybook/theming";
 import React, { ComponentProps, ReactNode } from "react";
+import { styled } from "storybook/internal/theming";
 
 import { Input } from "./design-system";
 

src/components/Text.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@storybook/theming";
+import { styled } from "storybook/internal/theming";
 
 export const Text = styled.div<{
   center?: boolean;