Release: Prerelease 8.3.0-alpha.8

.circleci/config.yml

@@ -403,7 +403,7 @@ jobs:
       parallelism:
         type: integer
     executor:
-      class: large
+      class: xlarge
       name: sb_playwright
     parallelism: << parameters.parallelism >>
     steps:
@@ -723,7 +723,7 @@ workflows:
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 4
+          parallelism: 5
           requires:
             - create-sandboxes
       - bench:
@@ -789,7 +789,7 @@ workflows:
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 4
+          parallelism: 5
           requires:
             - create-sandboxes
       - test-portable-stories:
@@ -856,7 +856,7 @@ workflows:
           requires:
             - build-sandboxes
       - vitest-integration:
-          parallelism: 8
+          parallelism: 11
           requires:
             - create-sandboxes
       - test-portable-stories:

.github/workflows/publish.yml

@@ -159,8 +159,8 @@ jobs:
         run: |
           git checkout next
           git pull
-          git push --force origin latest-release
-          git push --force origin main
+          git push origin --force next:latest-release
+          git push origin --force next:main
 
       - name: Sync CHANGELOG.md from `main` to `next`
         if: steps.target.outputs.target == 'main'
@@ -174,6 +174,7 @@ jobs:
           git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" || true
           git push origin next
 
+      # TODO: remove this step - @JReinhold
       - name: Sync version JSONs from `next-release` to `main`
         if: github.ref_name == 'next-release'
         working-directory: .

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 8.3.0-alpha.8
+
+- Addon Vitest: Improve transformation logic to avoid duplicate tests - [#28929](https://github.com/storybookjs/storybook/pull/28929), thanks @yannbf!
+- Addon Vitest: Set default viewport if applicable - [#28905](https://github.com/storybookjs/storybook/pull/28905), thanks @yannbf!
+- Addon-docs: Remove babel dependency - [#28915](https://github.com/storybookjs/storybook/pull/28915), thanks @shilman!
+- Blocks: Fix scroll to non-ascii anchors - [#28826](https://github.com/storybookjs/storybook/pull/28826), thanks @SkReD!
+- Core: Introduce setProjectAnnotations API to more renderers and frameworks - [#28907](https://github.com/storybookjs/storybook/pull/28907), thanks @yannbf!
+- Dependencies: Upgrade `commander` - [#28857](https://github.com/storybookjs/storybook/pull/28857), thanks @43081j!
+- SvelteKit: Introduce portable stories support - [#28918](https://github.com/storybookjs/storybook/pull/28918), thanks @yannbf!
+
 ## 8.3.0-alpha.7
 
 - Addon Vitest: Set screenshotFailures to false by default - [#28908](https://github.com/storybookjs/storybook/pull/28908), thanks @yannbf!

code/addons/docs/package.json

@@ -98,7 +98,6 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.24.4",
     "@mdx-js/react": "^3.0.0",
     "@storybook/blocks": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",

code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="UtfSymbolsScroll" />
+
+## Instruction
+
+> Instruction below works only in iframe.html. Unknown code in normal mode (with manager) removes hash from url.
+
+Click on [link](#anchor-with-utf-symbols-абвг). That will jump scroll to anchor after green block below. Then reload page and 
+it should smooth-scroll to that anchor. 
+
+<div style={{ height: "1500px", background: "green", color: "white" }}>Space for scroll test</div>
+
+## Anchor with utf symbols (абвг)

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

@@ -3,8 +3,12 @@ import { join, resolve } from 'node:path';
 
 import type { Plugin } from 'vitest/config';
 
-import { loadAllPresets, validateConfigurationFiles } from 'storybook/internal/common';
-import { vitestTransform } from 'storybook/internal/csf-tools';
+import {
+  getInterpretedFile,
+  loadAllPresets,
+  validateConfigurationFiles,
+} from 'storybook/internal/common';
+import { readConfig, vitestTransform } from 'storybook/internal/csf-tools';
 import { MainFileMissingError } from 'storybook/internal/server-errors';
 import type { StoriesEntry } from 'storybook/internal/types';
 
@@ -16,6 +20,16 @@ const defaultOptions: UserOptions = {
   storybookUrl: 'http://localhost:6006',
 };
 
+const extractTagsFromPreview = async (configDir: string) => {
+  const previewConfigPath = getInterpretedFile(join(resolve(configDir), 'preview'));
+
+  if (!previewConfigPath) {
+    return [];
+  }
+  const previewConfig = await readConfig(previewConfigPath);
+  return previewConfig.getFieldValue(['tags']) ?? [];
+};
+
 export const storybookTest = (options?: UserOptions): Plugin => {
   const finalOptions = {
     ...defaultOptions,
@@ -45,27 +59,33 @@ export const storybookTest = (options?: UserOptions): Plugin => {
     finalOptions.configDir = resolve(process.cwd(), finalOptions.configDir);
   }
 
+  let previewLevelTags: string[];
+
   return {
     name: 'vite-plugin-storybook-test',
     enforce: 'pre',
     async buildStart() {
+      // evaluate main.js and preview.js so we can extract
+      // stories for autotitle support and tags for tags filtering support
+      const configDir = finalOptions.configDir;
       try {
-        await validateConfigurationFiles(finalOptions.configDir);
+        await validateConfigurationFiles(configDir);
       } catch (err) {
         throw new MainFileMissingError({
-          location: finalOptions.configDir,
+          location: configDir,
           source: 'vitest',
         });
       }
 
       const presets = await loadAllPresets({
-        configDir: finalOptions.configDir,
+        configDir,
         corePresets: [],
         overridePresets: [],
         packageJson: {},
       });
 
       stories = await presets.apply('stories', []);
+      previewLevelTags = await extractTagsFromPreview(configDir);
     },
     async config(config) {
       // If we end up needing to know if we are running in browser mode later
@@ -123,6 +143,7 @@ export const storybookTest = (options?: UserOptions): Plugin => {
           configDir: finalOptions.configDir,
           tagsFilter: finalOptions.tags,
           stories,
+          previewLevelTags,
         });
       }
     },

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

@@ -3,33 +3,29 @@
 /* eslint-disable no-underscore-dangle */
 import { type RunnerTask, type TaskContext, type TaskMeta, type TestContext } from 'vitest';
 
-import type { ComposedStoryFn } from 'storybook/internal/types';
+import { composeStory } from 'storybook/internal/preview-api';
+import type { ComponentAnnotations, ComposedStoryFn } from 'storybook/internal/types';
 
-import type { UserOptions } from './types';
 import { setViewport } from './viewports';
 
-type TagsFilter = Required<UserOptions['tags']>;
-
-export const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
-  const isIncluded =
-    tagsFilter?.include.length === 0 || tagsFilter?.include.some((tag) => storyTags.includes(tag));
-  const isNotExcluded = tagsFilter?.exclude.every((tag) => !storyTags.includes(tag));
-
-  return isIncluded && isNotExcluded;
-};
-
-export const testStory = (Story: ComposedStoryFn, tagsFilter: TagsFilter) => {
+export const testStory = (
+  exportName: string,
+  story: ComposedStoryFn,
+  meta: ComponentAnnotations,
+  skipTags: string[]
+) => {
+  const composedStory = composeStory(story, meta, undefined, undefined, exportName);
   return async (context: TestContext & TaskContext & { story: ComposedStoryFn }) => {
-    if (Story === undefined || tagsFilter?.skip.some((tag) => Story.tags.includes(tag))) {
+    if (composedStory === undefined || skipTags?.some((tag) => composedStory.tags.includes(tag))) {
       context.skip();
     }
 
-    context.story = Story;
+    context.story = composedStory;
 
     const _task = context.task as RunnerTask & { meta: TaskMeta & { storyId: string } };
-    _task.meta.storyId = Story.id;
+    _task.meta.storyId = composedStory.id;
 
-    await setViewport(Story.parameters.viewport);
-    await Story.run();
+    await setViewport(composedStory.parameters.viewport);
+    await composedStory.run();
   };
 };

code/addons/vitest/src/plugin/viewports.test.ts

@@ -0,0 +1,154 @@
+/* eslint-disable no-underscore-dangle */
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { page } from '@vitest/browser/context';
+
+import { DEFAULT_VIEWPORT_DIMENSIONS, type ViewportsParam, setViewport } from './viewports';
+
+vi.mock('@vitest/browser/context', () => ({
+  page: {
+    viewport: vi.fn(),
+  },
+}));
+
+describe('setViewport', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    globalThis.__vitest_browser__ = true;
+  });
+
+  afterEach(() => {
+    globalThis.__vitest_browser__ = false;
+  });
+
+  it('should no op outside when not in Vitest browser mode', async () => {
+    globalThis.__vitest_browser__ = false;
+
+    await setViewport();
+    expect(page.viewport).not.toHaveBeenCalled();
+  });
+
+  it('should fall back to DEFAULT_VIEWPORT_DIMENSIONS if defaultViewport does not exist', async () => {
+    const viewportsParam: any = {
+      defaultViewport: 'nonExistentViewport',
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(
+      DEFAULT_VIEWPORT_DIMENSIONS.width,
+      DEFAULT_VIEWPORT_DIMENSIONS.height
+    );
+  });
+
+  it('should set the dimensions of viewport from INITIAL_VIEWPORTS', async () => {
+    const viewportsParam: any = {
+      // supported by default in addon viewports
+      defaultViewport: 'ipad',
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(768, 1024);
+  });
+
+  it('should set custom defined viewport dimensions', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'customViewport',
+      viewports: {
+        customViewport: {
+          name: 'Custom Viewport',
+          type: 'mobile',
+          styles: {
+            width: '800px',
+            height: '600px',
+          },
+        },
+      },
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(800, 600);
+  });
+
+  it('should correctly handle percentage-based dimensions', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'percentageViewport',
+      viewports: {
+        percentageViewport: {
+          name: 'Percentage Viewport',
+          type: 'desktop',
+          styles: {
+            width: '50%',
+            height: '50%',
+          },
+        },
+      },
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
+  });
+
+  it('should correctly handle vw and vh based dimensions', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'viewportUnits',
+      viewports: {
+        viewportUnits: {
+          name: 'VW/VH Viewport',
+          type: 'desktop',
+          styles: {
+            width: '50vw',
+            height: '50vh',
+          },
+        },
+      },
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
+  });
+
+  it('should correctly handle em based dimensions', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'viewportUnits',
+      viewports: {
+        viewportUnits: {
+          name: 'em/rem Viewport',
+          type: 'mobile',
+          styles: {
+            width: '20em',
+            height: '40rem',
+          },
+        },
+      },
+    };
+
+    await setViewport(viewportsParam);
+    expect(page.viewport).toHaveBeenCalledWith(320, 640); // dimensions * 16
+  });
+
+  it('should throw an error for unsupported dimension values', async () => {
+    const viewportsParam: ViewportsParam = {
+      defaultViewport: 'invalidViewport',
+      viewports: {
+        invalidViewport: {
+          name: 'Invalid Viewport',
+          type: 'desktop',
+          styles: {
+            width: 'calc(100vw - 20px)',
+            height: '10pc',
+          },
+        },
+      },
+    };
+
+    await expect(setViewport(viewportsParam)).rejects.toThrowErrorMatchingInlineSnapshot(`
+      [SB_ADDON_VITEST_0001 (UnsupportedViewportDimensionError): Encountered an unsupported value "calc(100vw - 20px)" when setting the viewport width dimension.
+
+      The Storybook plugin only supports values in the following units:
+      - px, vh, vw, em, rem and %.
+
+      You can either change the viewport for this story to use one of the supported units or skip the test by adding '!test' to the story's tags per https://storybook.js.org/docs/writing-stories/tags]
+    `);
+    expect(page.viewport).not.toHaveBeenCalled();
+  });
+});