Release: Prerelease beta 8.6.0-beta.0

.circleci/config.yml

@@ -195,7 +195,7 @@ jobs:
       - cancel-workflow-on-failure
   knip:
     executor:
-      class: medium
+      class: large
       name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -314,9 +314,9 @@ jobs:
       - cancel-workflow-on-failure
   unit-tests:
     executor:
-      class: large
+      class: xlarge
       name: sb_playwright
-    parallelism: 4
+    parallelism: 2
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -621,7 +621,32 @@ jobs:
           command: yarn upload-bench $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench) << pipeline.parameters.ghPrNumber >> << pipeline.parameters.ghBaseBranch >>
       - report-workflow-on-failure:
           template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task bench)
-  test-empty-init:
+  test-init-features:
+    executor:
+      class: small
+      name: sb_node_22_browsers
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Storybook init for features
+          command: |
+            cd code
+            yarn local-registry --open &
+            cd ../../
+            mkdir features-1
+            cd features-1
+            npm set registry http://localhost:6001
+            npx create-storybook --yes --package-manager npm --features dev docs test
+            npx vitest
+          environment:
+            IN_STORYBOOK_SANDBOX: true
+            STORYBOOK_INIT_EMPTY_TYPE: react-vite-ts
+            STORYBOOK_DISABLE_TELEMETRY: true
+
+  test-init-empty:
     executor:
       class: small
       name: sb_node_22_browsers
@@ -860,6 +885,9 @@ workflows:
       - test-ui-testing-module:
           requires:
             - build
+      - test-init-features:
+          requires:
+            - build
       - test-portable-stories:
           requires:
             - build
@@ -934,6 +962,9 @@ workflows:
       - test-ui-testing-module:
           requires:
             - build
+      - test-init-features:
+          requires:
+            - build
       - bench-sandboxes:
           parallelism: 5
           requires:
@@ -1007,7 +1038,10 @@ workflows:
       - test-ui-testing-module:
           requires:
             - build
-      - test-empty-init:
+      - test-init-features:
+          requires:
+            - build
+      - test-init-empty:
           requires:
             - build
           matrix:

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 8.5.5
+
+- Builder-Vite: Fix Turbosnap - [#30522](https://github.com/storybookjs/storybook/pull/30522), thanks @valentinpalkovic!
+
+## 8.5.4
+
+- Addon A11y: Make Vitest Axe optional - [#30442](https://github.com/storybookjs/storybook/pull/30442), thanks @valentinpalkovic!
+- Builder-Vite: Fix allowedHosts handling for custom hosts - [#30432](https://github.com/storybookjs/storybook/pull/30432), thanks @JSMike!
+- Builder-Vite: Fix resolve id warning - [#30511](https://github.com/storybookjs/storybook/pull/30511), thanks @valentinpalkovic!
+- React: Update react-docgen-typescript to fix CI hanging issues - [#30422](https://github.com/storybookjs/storybook/pull/30422), thanks @yannbf!
+
 ## 8.5.3
 
 - Preview: Add `globals` to `extract()` - [#30415](https://github.com/storybookjs/storybook/pull/30415), thanks @ndelangen!

CHANGELOG.prerelease.md

@@ -1,3 +1,14 @@
+## 8.6.0-beta.0
+
+- Addon A11y: Introduce parameters.a11y.test - [#30516](https://github.com/storybookjs/storybook/pull/30516), thanks @valentinpalkovic!
+- Addon-Docs: Change URL hash when TOC item is clicked, and fix TOC loading bugs - [#30130](https://github.com/storybookjs/storybook/pull/30130), thanks @Sidnioulz!
+- Addon-Test: Fix config and watch mode inconsistencies - [#30491](https://github.com/storybookjs/storybook/pull/30491), thanks @JReinhold!
+- Addon-docs: Consider custom code snippet in story code panel and update styles - [#30179](https://github.com/storybookjs/storybook/pull/30179), thanks @larsrickert!
+- Builder-Vite: Fix Turbosnap - [#30522](https://github.com/storybookjs/storybook/pull/30522), thanks @valentinpalkovic!
+- CSF: Add support for CSF factories - [#30197](https://github.com/storybookjs/storybook/pull/30197), thanks @kasperpeulen!
+- Cleanup: Remove unused constants in viewport addon - [#30479](https://github.com/storybookjs/storybook/pull/30479), thanks @Guria!
+- Svelte: Fix conflicting variable names and support for `+page.svelte` files - [#30369](https://github.com/storybookjs/storybook/pull/30369), thanks @xeho91!
+
 ## 8.6.0-alpha.5
 
 - Core: Add `UniversalStore` API to sync state/events between multiple environments - [#30445](https://github.com/storybookjs/storybook/pull/30445), thanks @JReinhold!

code/.eslintrc.js

@@ -58,7 +58,16 @@ module.exports = {
       },
     },
     {
-      files: ['*.js', '*.jsx', '*.json', '*.html', '**/.storybook/*.ts', '**/.storybook/*.tsx'],
+      files: [
+        '*.js',
+        '*.jsx',
+        '*.json',
+        '*.html',
+        '**/.storybook/*.ts',
+        '**/.storybook/*.tsx',
+        '**/.storybook/**/*.ts',
+        '**/.storybook/**/*.tsx',
+      ],
       parserOptions: {
         project: null,
       },

code/.storybook/main.ts

@@ -1,12 +1,12 @@
 import { join } from 'node:path';
 
-import type { StorybookConfig } from '../frameworks/react-vite';
+import { defineMain } from '../frameworks/react-vite/src/node';
 
 const componentsPath = join(__dirname, '../core/src/components');
 const managerApiPath = join(__dirname, '../core/src/manager-api');
-const imageContextPath = join(__dirname, '..//frameworks/nextjs/src/image-context.ts');
+const imageContextPath = join(__dirname, '../frameworks/nextjs/src/image-context.ts');
 
-const config: StorybookConfig = {
+const config = defineMain({
   stories: [
     './*.stories.@(js|jsx|ts|tsx)',
     {
@@ -159,6 +159,7 @@ const config: StorybookConfig = {
       build: {
         // disable sourcemaps in CI to not run out of memory
         sourcemap: process.env.CI !== 'true',
+        target: ['chrome100'],
       },
       server: {
         watch: {
@@ -169,6 +170,6 @@ const config: StorybookConfig = {
     } satisfies typeof viteConfig);
   },
   // logLevel: 'debug',
-};
+});
 
 export default config;

code/.storybook/preview.tsx

@@ -18,7 +18,20 @@ import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
 
+// TODO add empty preview
+// import * as storysource from '@storybook/addon-storysource';
+// import * as designs from '@storybook/addon-designs/preview';
+import addonTest from '@storybook/experimental-addon-test';
+import { definePreview } from '@storybook/react-vite';
+
+import addonA11y from '@storybook/addon-a11y';
+import addonEssentials from '@storybook/addon-essentials';
+import addonThemes from '@storybook/addon-themes';
+
+import * as addonsPreview from '../addons/toolbars/template/stories/preview';
+import * as templatePreview from '../core/template/stories/preview';
 import { DocsPageWrapper } from '../lib/blocks/src/components';
+import '../renderers/react/template/components/index';
 import { isChromatic } from './isChromatic';
 
 const { document } = global;
@@ -120,7 +133,7 @@ const ThemedSetRoot = () => {
 // eslint-disable-next-line no-underscore-dangle
 const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined;
 const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined;
-export const loaders = [
+const loaders = [
   /**
    * This loader adds a DocsContext to the story, which is required for the most Blocks to work. A
    * story will specify which stories they need in the index with:
@@ -169,7 +182,7 @@ export const loaders = [
   },
 ] as Loader[];
 
-export const decorators = [
+const decorators = [
   // This decorator adds the DocsContext created in the loader above
   (Story, { loaded: { docsContext } }) =>
     docsContext ? (
@@ -307,11 +320,7 @@ export const decorators = [
   },
 ] satisfies Decorator[];
 
-export const parameters = {
-  options: {
-    storySort: (a, b) =>
-      a.title === b.title ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }),
-  },
+const parameters = {
   docs: {
     theme: themes.light,
     toc: {},
@@ -360,4 +369,17 @@ export const parameters = {
   },
 };
 
-export const tags = ['test', 'vitest'];
+export default definePreview({
+  addons: [
+    addonThemes(),
+    addonEssentials(),
+    addonA11y(),
+    addonTest(),
+    addonsPreview,
+    templatePreview,
+  ],
+  decorators,
+  loaders,
+  tags: ['test', 'vitest'],
+  parameters,
+});

code/.storybook/storybook.setup.ts

@@ -3,25 +3,12 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest';
 import { setProjectAnnotations } from '@storybook/react';
 import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
 
-// eslint-disable-next-line import/namespace
-import * as testAnnotations from '@storybook/experimental-addon-test/preview';
-
-import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
-
-import * as coreAnnotations from '../addons/toolbars/template/stories/preview';
-import * as componentAnnotations from '../core/template/stories/preview';
-// register global components used in many stories
-import '../renderers/react/template/components';
-import * as projectAnnotations from './preview';
+import preview from './preview';
 
 vi.spyOn(console, 'warn').mockImplementation((...args) => console.log(...args));
 
 const annotations = setProjectAnnotations([
-  a11yAddonAnnotations,
-  projectAnnotations,
-  componentAnnotations,
-  coreAnnotations,
-  testAnnotations,
+  preview.composed,
   {
     // experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
     // https://vitest.dev/guide/browser/interactivity-api.html

code/addons/a11y/src/constants.ts

@@ -13,5 +13,3 @@ export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-
 export const TEST_PROVIDER_ID = 'storybook/addon-a11y/test-provider';
 
 export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL };
-
-export const A11Y_TEST_TAG = 'a11y-test';

code/addons/a11y/src/index.ts

@@ -1,2 +1,9 @@
+import { definePreview } from 'storybook/internal/preview-api';
+
+import * as addonAnnotations from './preview';
+
 export { PARAM_KEY } from './constants';
 export * from './params';
+export type { A11yParameters } from './types';
+
+export default () => definePreview(addonAnnotations);

code/addons/a11y/src/params.ts

@@ -1,4 +1,6 @@
-import type { ElementContext, ImpactValue, RunOptions, Spec } from 'axe-core';
+import type { ElementContext, RunOptions, Spec } from 'axe-core';
+
+type A11yTest = 'off' | 'todo' | 'error';
 
 export interface Setup {
   element?: ElementContext;
@@ -13,4 +15,5 @@ export interface A11yParameters {
   /** @deprecated Use globals.a11y.manual instead */
   manual?: boolean;
   disable?: boolean;
+  test?: A11yTest;
 }

code/addons/a11y/src/preview.test.tsx

@@ -4,7 +4,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { StoryContext } from 'storybook/internal/csf';
 
 import { run } from './a11yRunner';
-import { A11Y_TEST_TAG } from './constants';
 import { experimental_afterEach } from './preview';
 import { getIsVitestRunning, getIsVitestStandaloneRun } from './utils';
 
@@ -88,12 +87,13 @@ describe('afterEach', () => {
         addReport: vi.fn(),
       },
       parameters: {
-        a11y: {},
+        a11y: {
+          test: 'error',
+        },
       },
       globals: {
         a11y: {},
       },
-      tags: [A11Y_TEST_TAG],
       ...overrides,
     }) as any;
 
@@ -138,33 +138,39 @@ describe('afterEach', () => {
     });
   });
 
-  it('should report passed status when there are no violations', async () => {
-    const context = createContext();
+  it('should run accessibility checks and should report them as warnings', async () => {
+    const context = createContext({
+      parameters: {
+        a11y: {
+          test: 'todo',
+        },
+      },
+    });
     const result = {
-      violations: [],
+      violations,
     };
+
     mockedRun.mockResolvedValue(result as any);
+    mocks.getIsVitestStandaloneRun.mockReturnValue(false);
 
     await experimental_afterEach(context);
 
     expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
+
     expect(context.reporting.addReport).toHaveBeenCalledWith({
       type: 'a11y',
       version: 1,
       result,
-      status: 'passed',
+      status: 'warning',
     });
   });
 
-  it('should run accessibility checks if "a11y-test" flag is not available and is not running in Vitest', async () => {
-    const context = createContext({
-      tags: [],
-    });
+  it('should report passed status when there are no violations', async () => {
+    const context = createContext();
     const result = {
       violations: [],
     };
     mockedRun.mockResolvedValue(result as any);
-    vi.mocked(getIsVitestRunning).mockReturnValue(false);
 
     await experimental_afterEach(context);
 
@@ -222,11 +228,14 @@ describe('afterEach', () => {
     expect(context.reporting.addReport).not.toHaveBeenCalled();
   });
 
-  it('should not run accessibility checks if vitest is running and story is not tagged with a11ytest', async () => {
+  it('should not run accessibility checks when parameters.a11y.test is "off"', async () => {
     const context = createContext({
-      tags: [],
+      parameters: {
+        a11y: {
+          test: 'off',
+        },
+      },
     });
-    vi.mocked(getIsVitestRunning).mockReturnValue(true);
 
     await experimental_afterEach(context);