Merge pull request #29026 from storybookjs/version-non-patch-from-8.3…

….0-beta.1

Release: Prerelease 8.3.0-beta.2

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 8.3.0-beta.2
+
+- Addon Vitest: Fix indentation of 'vitePluginNext' in generated Vitest config file - [#29011](https://github.com/storybookjs/storybook/pull/29011), thanks @ghengeveld!
+- Backgrounds/Viewports: Make defaults overridable in `StoryGlobals`-mode - [#29025](https://github.com/storybookjs/storybook/pull/29025), thanks @JReinhold!
+- CLI: Handle Yarn PnP wrapper scenario when adding an addon - [#29027](https://github.com/storybookjs/storybook/pull/29027), thanks @yannbf!
+- Maintenance: Rename addon-vitest to addon-test - [#29014](https://github.com/storybookjs/storybook/pull/29014), thanks @yannbf!
+- Nextjs-Vite: Re-export vite-plugin-storybook-nextjs - [#29012](https://github.com/storybookjs/storybook/pull/29012), thanks @valentinpalkovic!
+- SvelteKit/Vue3: Refactor plugin export paths - [#29016](https://github.com/storybookjs/storybook/pull/29016), thanks @yannbf!
+
 ## 8.3.0-beta.1
 
 - ConfigFile: Fix `as const satisfies` modifiers - [#29000](https://github.com/storybookjs/storybook/pull/29000), thanks @shilman!

code/.storybook/main.ts

@@ -91,7 +91,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
-    '@storybook/experimental-addon-vitest',
+    '@storybook/experimental-addon-test',
     '@storybook/addon-a11y',
     '@chromatic-com/storybook',
   ],

code/.storybook/vitest.config.ts

@@ -21,7 +21,7 @@ export default mergeConfig(
   vitestCommonConfig,
   defineProject({
     plugins: [
-      import('@storybook/experimental-addon-vitest/plugin').then(({ storybookTest }) =>
+      import('@storybook/experimental-addon-test/vite-plugin').then(({ storybookTest }) =>
         storybookTest({
           configDir: process.cwd(),
         })

code/addons/backgrounds/src/components/Tool.tsx

@@ -6,18 +6,17 @@ import { useGlobals, useParameter } from 'storybook/internal/manager-api';
 import { CircleIcon, GridIcon, PhotoIcon, RefreshIcon } from '@storybook/icons';
 
 import { PARAM_KEY as KEY } from '../constants';
+import { DEFAULT_BACKGROUNDS } from '../defaults';
 import type { Background, BackgroundMap, Config, GlobalStateUpdate } from '../types';
 
 type Link = Parameters<typeof TooltipLinkList>['0']['links'][0];
 
-const emptyBackgroundMap: BackgroundMap = {};
-
 export const BackgroundTool = memo(function BackgroundSelector() {
   const config = useParameter<Config>(KEY);
   const [globals, updateGlobals, storyGlobals] = useGlobals();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-  const { options = emptyBackgroundMap, disable = true } = config || {};
+  const { options = DEFAULT_BACKGROUNDS, disable = true } = config || {};
   if (disable) {
     return null;
   }

code/addons/backgrounds/src/decorator.ts

@@ -6,6 +6,7 @@ import type {
 } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
+import { DEFAULT_BACKGROUNDS } from './defaults';
 import type { Config, GridConfig } from './types';
 import { addBackgroundStyle, addGridStyle, clearStyles, isReduceMotionEnabled } from './utils';
 
@@ -25,7 +26,11 @@ export const withBackgroundAndGrid = (
   context: StoryContext<Renderer>
 ) => {
   const { globals, parameters, viewMode, id } = context;
-  const { options = {}, disable, grid = defaultGrid } = (parameters[KEY] || {}) as Config;
+  const {
+    options = DEFAULT_BACKGROUNDS,
+    disable,
+    grid = defaultGrid,
+  } = (parameters[KEY] || {}) as Config;
   const data = globals[KEY] || {};
   const backgroundName: string | undefined = data.value;
 

code/addons/backgrounds/src/defaults.ts

@@ -0,0 +1,6 @@
+import type { BackgroundMap } from './types';
+
+export const DEFAULT_BACKGROUNDS: BackgroundMap = {
+  light: { name: 'light', value: '#F8F8F8' },
+  dark: { name: 'dark', value: '#333' },
+};

code/addons/backgrounds/src/preview.ts

@@ -2,6 +2,7 @@ import type { Addon_DecoratorFunction } from 'storybook/internal/types';
 
 import { PARAM_KEY as KEY } from './constants';
 import { withBackgroundAndGrid } from './decorator';
+import { DEFAULT_BACKGROUNDS } from './defaults';
 import { withBackground } from './legacy/withBackgroundLegacy';
 import { withGrid } from './legacy/withGridLegacy';
 import type { Config, GlobalState } from './types';
@@ -18,20 +19,10 @@ export const parameters = {
       cellAmount: 5,
     },
     disable: false,
-    ...(FEATURES?.backgroundsStoryGlobals
-      ? {
-          options: {
-            light: { name: 'light', value: '#F8F8F8' },
-            dark: { name: 'dark', value: '#333' },
-          },
-        }
-      : {
-          // TODO: remove in 9.0
-          values: [
-            { name: 'light', value: '#F8F8F8' },
-            { name: 'dark', value: '#333333' },
-          ],
-        }),
+    // TODO: remove in 9.0
+    ...(!FEATURES?.backgroundsStoryGlobals && {
+      values: Object.values(DEFAULT_BACKGROUNDS),
+    }),
   } satisfies Partial<Config>,
 };
 

code/addons/vitest/package.json → code/addons/test/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "@storybook/experimental-addon-vitest",
+  "name": "@storybook/experimental-addon-test",
   "version": "8.3.0-beta.1",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
-    "addon-vitest",
+    "addon-test",
     "vitest",
     "testing"
   ],
@@ -29,7 +29,7 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./plugin": {
+    "./vite-plugin": {
       "types": "./dist/plugin/index.d.ts",
       "import": "./dist/plugin/index.js",
       "require": "./dist/plugin/index.cjs"

code/addons/vitest/project.json → code/addons/test/project.json

@@ -1,8 +1,8 @@
 {
-  "name": "vitest",
+  "name": "addon-test",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
     "build": {}
   }
-}
+}

code/addons/test/src/index.ts

@@ -0,0 +1,9 @@
+import type { storybookTest as storybookTestImport } from './plugin';
+
+// make it work with --isolatedModules
+export default {};
+
+// @ts-expect-error - this is a hack to make the module's sub-path augmentable
+declare module '@storybook/experimental-addon-test/vite-plugin' {
+  export const storybookTest: typeof storybookTestImport;
+}

code/addons/vitest/src/plugin/index.ts → code/addons/test/src/plugin/index.ts

@@ -113,22 +113,22 @@ export const storybookTest = (options?: UserOptions): Plugin => {
       if (typeof config.test.setupFiles === 'string') {
         config.test.setupFiles = [config.test.setupFiles];
       }
-      config.test.setupFiles.push('@storybook/experimental-addon-vitest/internal/setup-file');
+      config.test.setupFiles.push('@storybook/experimental-addon-test/internal/setup-file');
 
       // when a Storybook script is provided, we spawn Storybook for the user when in watch mode
       if (finalOptions.storybookScript) {
         config.test.globalSetup = config.test.globalSetup ?? [];
         if (typeof config.test.globalSetup === 'string') {
           config.test.globalSetup = [config.test.globalSetup];
         }
-        config.test.globalSetup.push('@storybook/experimental-addon-vitest/internal/global-setup');
+        config.test.globalSetup.push('@storybook/experimental-addon-test/internal/global-setup');
       }
 
       config.test.server ??= {};
       config.test.server.deps ??= {};
       config.test.server.deps.inline ??= [];
       if (Array.isArray(config.test.server.deps.inline)) {
-        config.test.server.deps.inline.push('@storybook/experimental-addon-vitest');
+        config.test.server.deps.inline.push('@storybook/experimental-addon-test');
       }
     },
     async transform(code, id) {

code/addons/vitest/src/postinstall.ts → code/addons/test/src/postinstall.ts

@@ -64,10 +64,19 @@ export default async function postInstall(options: PostinstallOptions) {
     logger.info(
       dedent`
         We detected that you're using Next.js.
-        We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest.
+        We will configure the @storybook/experimental-nextjs-vite/vite-plugin to allow you to run tests in Vitest.
       `
     );
-    packages.push('vite-plugin-storybook-nextjs@latest');
+
+    try {
+      const storybookVersion = await packageManager.getInstalledVersion('storybook');
+
+      packages.push(`@storybook/experimental-nextjs-vite@^${storybookVersion}`);
+    } catch (e) {
+      console.error(
+        'Failed to install @storybook/experimental-nextjs-vite. Please install it manually'
+      );
+    }
   }
 
   logger.info(c.bold('Installing packages...'));
@@ -123,14 +132,14 @@ export default async function postInstall(options: PostinstallOptions) {
         browserWorkspaceFile,
         dedent`
           import { defineWorkspace } from 'vitest/config';
-          import { storybookTest } from '@storybook/experimental-addon-vitest/plugin';
+          import { storybookTest } from '@storybook/experimental-addon-test/vite-plugin';
           ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
           export default defineWorkspace([
             '${relative(dirname(browserWorkspaceFile), rootConfig)}',
             {
               extends: '${viteConfig ? relative(dirname(browserWorkspaceFile), viteConfig) : ''}',
               plugins: [
-                storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''}
+                storybookTest(),${vitestInfo.frameworkPluginCall ? '\n      ' + vitestInfo.frameworkPluginCall : ''}
               ],
               test: {
                 browser: {
@@ -154,7 +163,7 @@ export default async function postInstall(options: PostinstallOptions) {
       resolve('vitest.config.ts'),
       dedent`
         import { defineConfig } from "vitest/config";
-        import { storybookTest } from "@storybook/experimental-addon-vitest/plugin";
+        import { storybookTest } from "@storybook/experimental-addon-test/vite-plugin";
         ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''}
         export default defineConfig({
           plugins: [
@@ -189,17 +198,19 @@ const getVitestPluginInfo = (framework: string) => {
   let frameworkPluginCall = '';
 
   if (framework === '@storybook/nextjs') {
-    frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
-    frameworkPluginCall = 'vitePluginNext()';
+    frameworkPluginImport =
+      "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'";
+    frameworkPluginCall = 'storybookNextJsPlugin()';
   }
 
   if (framework === '@storybook/sveltekit') {
-    frameworkPluginImport = "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite'";
+    frameworkPluginImport =
+      "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin'";
     frameworkPluginCall = 'storybookSveltekitPlugin()';
   }
 
   if (framework === '@storybook/vue3-vite') {
-    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite'";
+    frameworkPluginImport = "import { storybookVuePlugin } from '@storybook/vue3-vite/vite-plugin'";
     frameworkPluginCall = 'storybookVuePlugin()';
   }
 

code/addons/viewport/src/components/Tool.tsx

@@ -7,15 +7,15 @@ import { Global } from 'storybook/internal/theming';
 import { GrowIcon, RefreshIcon, TransferIcon } from '@storybook/icons';
 
 import { PARAM_KEY as KEY } from '../constants';
+import { MINIMAL_VIEWPORTS } from '../defaults';
 import { responsiveViewport } from '../responsiveViewport';
 import { registerShortcuts } from '../shortcuts';
-import type { Config, GlobalState, GlobalStateUpdate, Viewport, ViewportMap } from '../types';
+import type { Config, GlobalStateUpdate, Viewport, ViewportMap } from '../types';
 import {
   ActiveViewportLabel,
   ActiveViewportSize,
   IconButtonLabel,
   IconButtonWithLabel,
-  emptyViewportMap,
   iconsMap,
 } from '../utils';
 
@@ -39,7 +39,7 @@ export const ViewportTool: FC<{ api: API }> = ({ api }) => {
   const [globals, updateGlobals, storyGlobals] = useGlobals();
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
 
-  const { options = emptyViewportMap, disable } = config || {};
+  const { options = MINIMAL_VIEWPORTS, disable } = config || {};
   const data = globals?.[KEY] || {};
   const viewportName: string = data.value;
   const isRotated: boolean = data.isRotated;

code/addons/viewport/src/preview.ts

@@ -10,11 +10,3 @@ const modern: Record<string, GlobalState> = {
 const legacy = { viewport: 'reset', viewportRotated: false };
 
 export const initialGlobals = FEATURES?.viewportStoryGlobals ? modern : legacy;
-
-export const parameters = FEATURES?.viewportStoryGlobals
-  ? {
-      [KEY]: {
-        options: MINIMAL_VIEWPORTS,
-      },
-    }
-  : {};

code/addons/viewport/src/utils.tsx

@@ -42,5 +42,3 @@ export const iconsMap: Record<Viewport['type'], React.ReactNode> = {
   tablet: <TabletIcon />,
   other: <Fragment />,
 };
-
-export const emptyViewportMap: ViewportMap = {};

code/core/src/common/versions.ts

@@ -15,10 +15,10 @@ export default {
   '@storybook/addon-onboarding': '8.3.0-beta.1',
   '@storybook/addon-outline': '8.3.0-beta.1',
   '@storybook/addon-storysource': '8.3.0-beta.1',
+  '@storybook/experimental-addon-test': '8.3.0-beta.1',
   '@storybook/addon-themes': '8.3.0-beta.1',
   '@storybook/addon-toolbars': '8.3.0-beta.1',
   '@storybook/addon-viewport': '8.3.0-beta.1',
-  '@storybook/experimental-addon-vitest': '8.3.0-beta.1',
   '@storybook/builder-vite': '8.3.0-beta.1',
   '@storybook/builder-webpack5': '8.3.0-beta.1',
   '@storybook/core': '8.3.0-beta.1',