Merge branch 'next' into previewAnno

.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/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -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/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/addons/vitest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-vitest",
-  "version": "8.3.0-alpha.7",
+  "version": "8.3.0-alpha.8",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",

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();
   };
 };