Release: Prerelease 8.5.0-alpha.5

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 8.4.4
+
+- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf!
+
+## 8.4.3
+
+- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf!
+- Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf!
+
 ## 8.4.2
 
 - Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 8.5.0-alpha.5
+
+- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf!
+- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf!
+- CLI: Fix init help for `storybook` command - [#29480](https://github.com/storybookjs/storybook/pull/29480), thanks @toothlessdev!
+- Composition: Fix composed story search - [#29453](https://github.com/storybookjs/storybook/pull/29453), thanks @jsingh0026!
+
 ## 8.5.0-alpha.4
 
 - Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf!

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

@@ -131,6 +131,16 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         config.test.server.deps.inline.push('@storybook/experimental-addon-test');
       }
 
+      config.optimizeDeps ??= {};
+      config.optimizeDeps = {
+        ...config.optimizeDeps,
+        include: [...(config.optimizeDeps.include ?? []), '@storybook/experimental-addon-test/**'],
+      };
+
+      if (frameworkName?.includes('react') || frameworkName?.includes('nextjs')) {
+        config.optimizeDeps.include.push('react-dom/test-utils');
+      }
+
       if (frameworkName?.includes('vue3')) {
         config.define ??= {};
         config.define.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = 'false';

code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { IconButton } from '@storybook/core/components';
 import { styled } from '@storybook/core/theming';
 import { BottomBarToggleIcon, MenuIcon } from '@storybook/icons';
+import type { API_IndexHash, API_Refs } from '@storybook/types';
 
 import { useStorybookApi, useStorybookState } from '@storybook/core/manager-api';
 
@@ -17,27 +18,46 @@ interface MobileNavigationProps {
   showPanel: boolean;
 }
 
+// Function to combine all indexes
+function combineIndexes(rootIndex: API_IndexHash | undefined, refs: API_Refs) {
+  // Create a copy of the root index to avoid mutation
+  const combinedIndex = { ...(rootIndex || {}) }; // Use an empty object as fallback
+
+  // Traverse refs and merge each nested index with the root index
+  Object.values(refs).forEach((ref) => {
+    if (ref.index) {
+      Object.assign(combinedIndex, ref.index);
+    }
+  });
+
+  return combinedIndex;
+}
+
 /**
  * Walks the tree from the current story to combine story+component+folder names into a single
  * string
  */
 const useFullStoryName = () => {
-  const { index } = useStorybookState();
+  const { index, refs } = useStorybookState();
   const api = useStorybookApi();
   const currentStory = api.getCurrentStoryData();
 
   if (!currentStory) {
     return '';
   }
-
+  const combinedIndex = combineIndexes(index, refs || {});
   let fullStoryName = currentStory.renderLabel?.(currentStory, api) || currentStory.name;
-  // @ts-expect-error (non strict)
-  let node = index[currentStory.id];
 
-  // @ts-expect-error (non strict)
-  while ('parent' in node && node.parent && index[node.parent] && fullStoryName.length < 24) {
-    // @ts-expect-error (non strict)
-    node = index[node.parent];
+  let node = combinedIndex[currentStory.id];
+
+  while (
+    node &&
+    'parent' in node &&
+    node.parent &&
+    combinedIndex[node.parent] &&
+    fullStoryName.length < 24
+  ) {
+    node = combinedIndex[node.parent];
     const parentName = node.renderLabel?.(node, api) || node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
   }

code/core/src/manager/components/sidebar/TestingModule.tsx

@@ -175,10 +175,10 @@ const DynamicInfo = ({ state }: { state: TestProviders[keyof TestProviders] }) =
   const Title = state.title;
   return (
     <Info>
-      <TitleWrapper crashed={state.crashed}>
+      <TitleWrapper crashed={state.crashed} id="testing-module-title">
         <Title {...state} />
       </TitleWrapper>
-      <DescriptionWrapper>
+      <DescriptionWrapper id="testing-module-description">
         <Description {...state} />
       </DescriptionWrapper>
     </Info>
@@ -244,7 +244,7 @@ export const TestingModule = ({
         >
           <Content ref={contentRef}>
             {testProviders.map((state) => (
-              <TestProvider key={state.id}>
+              <TestProvider key={state.id} data-module-id={state.id}>
                 <DynamicInfo state={state} />
                 <Actions>
                   {state.watchable && (

code/e2e-tests/composition.spec.ts

@@ -11,12 +11,10 @@ test.describe('composition', () => {
     'Slow, framework independent test, so only run it on in react-vite/default-ts'
   );
 
-  test.beforeEach(async ({ page }) => {
+  test('should filter and render composed stories', async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page, expect).waitUntilLoaded();
-  });
 
-  test('should correctly filter composed stories', async ({ page }) => {
     // Expect that composed Storybooks are visible
     await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
     await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
@@ -35,10 +33,64 @@ test.describe('composition', () => {
     // Expect composed stories `to be available in the search
     await page.getByPlaceholder('Find components').fill('Button');
     await expect(
-      page.getByRole('option', { name: 'Button Storybook 8.0.0 / @blocks / examples' })
+      page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
     ).toBeVisible();
+
+    const buttonStory = page.getByRole('option', {
+      name: 'Button Storybook 8.0.0 / @blocks / examples',
+    });
+    await expect(buttonStory).toBeVisible();
+    await buttonStory.click();
+
+    // Note: this could potentially be flaky due to it accessing a hosted Storybook
+    await expect(
+      page
+        .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
+        .contentFrame()
+        .getByRole('heading', { name: 'Example button component' })
+    ).toBeVisible({ timeout: 15000 });
+  });
+
+  test('should filter and render composed stories on mobile', async ({ page }) => {
+    page.setViewportSize({ width: 320, height: 800 });
+    await page.goto(storybookUrl);
+    await new SbPage(page, expect).waitUntilLoaded();
+
+    await page.click('button[title="Open navigation menu"]');
+
+    // Expect that composed Storybooks are visible
+    await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
+    await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
+
+    // Expect composed stories to be available in the sidebar
+    await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
+    await expect(
+      page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
+    ).toBeVisible();
+
+    await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
+    await expect(
+      page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]')
+    ).toBeVisible();
+
+    // Expect composed stories `to be available in the search
+    await page.getByPlaceholder('Find components').fill('Button');
     await expect(
       page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
     ).toBeVisible();
+
+    const buttonStory = page.getByRole('option', {
+      name: 'Button Storybook 8.0.0 / @blocks / examples',
+    });
+    await expect(buttonStory).toBeVisible();
+    await buttonStory.click();
+
+    // Note: this could potentially be flaky due to it accessing a hosted Storybook
+    await expect(
+      page
+        .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
+        .contentFrame()
+        .getByRole('heading', { name: 'Example button component' })
+    ).toBeVisible({ timeout: 15000 });
   });
 });

code/lib/cli-storybook/src/bin/index.ts

@@ -40,6 +40,27 @@ const command = (name: string) =>
     .option('--debug', 'Get more logs in debug mode', false)
     .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data');
 
+command('init')
+  .description('Initialize Storybook into your project')
+  .option('-f --force', 'Force add Storybook')
+  .option('-s --skip-install', 'Skip installing deps')
+  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager for installing deps')
+  .option('--use-pnp', 'Enable PnP mode for Yarn 2+')
+  .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option('-t --type <type>', 'Add Storybook for a specific project type')
+  .option('-y --yes', 'Answer yes to all prompts')
+  .option('-b --builder <webpack5 | vite>', 'Builder library')
+  .option('-l --linkable', 'Prepare installation for link (contributor helper)')
+  .option(
+    '--dev',
+    'Launch the development server after completing initialization. Enabled by default (default: true)',
+    process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true'
+  )
+  .option(
+    '--no-dev',
+    'Complete the initialization of Storybook without launching the Storybook development server'
+  );
+
 command('add <addon>')
   .description('Add an addon to your Storybook')
   .option(

code/lib/cli-storybook/test/default/cli.test.cjs

@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 const run = require('../helpers.cjs');
 
@@ -12,3 +12,92 @@ describe('Default behavior', () => {
     expect(stdout.toString()).toContain('Did you mean upgrade?');
   });
 });
+
+describe('Help command', () => {
+  it('should prints out "init" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('init');
+    expect(stdout.toString()).toContain('Initialize Storybook into your project');
+  });
+
+  it('should prints out "add" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('add');
+    expect(stdout.toString()).toContain('Add an addon to your Storybook');
+  });
+
+  it('should prints out "remove" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('remove');
+    expect(stdout.toString()).toContain('Remove an addon from your Storybook');
+  });
+
+  it('should prints out "upgrade" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('upgrade');
+    expect(stdout.toString()).toContain('Upgrade your Storybook packages to');
+  });
+
+  it('should prints out "migrate" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('migrate');
+    expect(stdout.toString()).toContain('Run a Storybook codemod migration on your source files');
+  });
+
+  it('should prints out "sandbox" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('sandbox');
+    expect(stdout.toString()).toContain('Create a sandbox from a set of possible templates');
+  });
+
+  it('should prints out "link" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('link');
+    expect(stdout.toString()).toContain(
+      'Pull down a repro from a URL (or a local directory), link it, and run storybook'
+    );
+  });
+
+  it('should prints out "automigrate" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('automigrate');
+    expect(stdout.toString()).toContain(
+      'Check storybook for incompatibilities or migrations and apply fixes'
+    );
+  });
+
+  it('should prints out "doctor" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('doctor');
+    expect(stdout.toString()).toContain(
+      'Check Storybook for known problems and provide suggestions or fixes'
+    );
+  });
+});

code/package.json

@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.5.0-alpha.5"
 }

code/playwright.config.ts

@@ -3,6 +3,10 @@ import { defineConfig, devices } from '@playwright/test';
 /** Read environment variables from file. https://github.com/motdotla/dotenv */
 // require('dotenv').config();
 
+// Comment this out and fill in the values to run E2E tests locally using the Playwright extension easily
+// process.env.STORYBOOK_URL = 'http://localhost:6006';
+// process.env.STORYBOOK_TEMPLATE_NAME = 'react-vite/default-ts';
+
 /** See https://playwright.dev/docs/test-configuration. */
 export default defineConfig({
   testDir: './e2e-tests',

docs/_snippets/addon-viewport-options-in-preview.md

@@ -4,7 +4,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 export default {
   parameters: {
     viewport: {
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
   initialGlobals: {
@@ -20,7 +20,7 @@ import { Preview } from '@storybook/your-renderer';
 const preview: Preview = {
   parameters: {
     viewport: {
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
   initialGlobals: {

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.5.0-alpha.4","info":{"plain":"- Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf!\n- UI: Add Yarn to About Section - [#29225](https://github.com/storybookjs/storybook/pull/29225), thanks @grantwforsythe!"}}
+{"version":"8.5.0-alpha.5","info":{"plain":"- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf!\n- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf!\n- CLI: Fix init help for `storybook` command - [#29480](https://github.com/storybookjs/storybook/pull/29480), thanks @toothlessdev!\n- Composition: Fix composed story search - [#29453](https://github.com/storybookjs/storybook/pull/29453), thanks @jsingh0026!"}}

test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts

@@ -3,8 +3,8 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
+    "@storybook/addon-controls",
     "@storybook/experimental-addon-test",
-    "@storybook/addon-controls"
   ],
   framework: {
     name: "@storybook/react-vite",