Merge branch 'next' into next

storybookjs · Feb 12, 2025 · 8d78547 · 8d78547
2 parents 5705ef1 + e9f1e19
commit 8d78547
Show file tree

Hide file tree

Showing 523 changed files with 16,053 additions and 5,994 deletions.
diff --git a/.circleci/config.yml b/.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:
@@ -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
@@ -846,7 +871,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -860,6 +885,9 @@ workflows:
       - test-ui-testing-module:
           requires:
             - build
+      - test-init-features:
+          requires:
+            - build
       - test-portable-stories:
           requires:
             - build
@@ -918,7 +946,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -934,6 +962,9 @@ workflows:
       - test-ui-testing-module:
           requires:
             - build
+      - test-init-features:
+          requires:
+            - build
       - bench-sandboxes:
           parallelism: 5
           requires:
@@ -991,7 +1022,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 30
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -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:

diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@ test-results
 .verdaccio-cache
 .next
 /.npmrc
+tsconfig.vitest-temp.json
 
 # Yarn stuff
 /**/.yarn/*

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+## 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!
+- Vite: Fix add component UI invalidation - [#30438](https://github.com/storybookjs/storybook/pull/30438), thanks @shilman!
+
 ## 8.5.2
 
 - Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,22 @@
+## 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!
+- Core: Fix statically serving single files and multiple dirs on the same endpoint - [#30467](https://github.com/storybookjs/storybook/pull/30467), thanks @JReinhold!
+- Core: Move CSF to monorepo - [#30488](https://github.com/storybookjs/storybook/pull/30488), thanks @kasperpeulen!
+- React: Update react-docgen-typescript to fix CI hanging issues - [#30422](https://github.com/storybookjs/storybook/pull/30422), thanks @yannbf!
+
+## 8.6.0-alpha.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!
+- Vite: Fix add component UI invalidation - [#30438](https://github.com/storybookjs/storybook/pull/30438), thanks @shilman!
+
+## 8.6.0-alpha.3
+
+- Core: Fix invalid Websocket termination - [#30408](https://github.com/storybookjs/storybook/pull/30408), thanks @valentinpalkovic!
+- Core: Improve type compatibility with React 19 - [#30031](https://github.com/storybookjs/storybook/pull/30031), thanks @mrginglymus!
+- Preview: Add `globals` to `extract()` - [#30415](https://github.com/storybookjs/storybook/pull/30415), thanks @ndelangen!
+
 ## 8.6.0-alpha.2
 
 - Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!

diff --git a/MIGRATION.md b/MIGRATION.md
@@ -2,6 +2,9 @@
 
 - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
   - [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
+- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [React Vite: react-docgen-typescript is updated](#react-vite-react-docgen-typescript-is-updated)
+  - [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild)
   - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
   - [Addon-a11y: Changing the default element selector](#addon-a11y-changing-the-default-element-selector)
@@ -460,6 +463,26 @@ Storybook now supports [Angular's experimental zoneless mode](https://angular.de
 
 ## From version 8.4.x to 8.5.x
 
+### React Vite: react-docgen-typescript is updated
+
+Storybook now uses [react-docgen-typescript](https://github.com/joshwooding/vite-plugin-react-docgen-typescript) v0.5.0 which updates its internal logic on how it parses files, available under an experimental feature flag `EXPERIMENTAL_useWatchProgram`, which is disabled by default.
+
+Previously, once you made changes to a component's props, the controls and args table would not update unless you restarted Storybook. With the `EXPERIMENTAL_useWatchProgram` flag, you do not need to restart Storybook anymore, however you do need to refresh the browser page. Keep in mind that this flag is experimental and also does not support the `references` field in tsconfig.json files. Depending on how big your codebase is, it might have performance issues.
+
+```ts
+// .storybook/main.ts
+const config = {
+  // ...
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      EXPERIMENTAL_useWatchProgram: true,
+    },
+  },
+};
+export default config;
+```
+
 ### Introducing features.developmentModeForBuild
 
 As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `development` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds.
@@ -473,7 +496,7 @@ export default {
     developmentModeForBuild: true,
   },
 };
-````
+```
 
 ### Added source code panel to docs
 

diff --git a/code/.eslintrc.js b/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,
       },
@@ -93,6 +102,7 @@ module.exports = {
         '**/__tests__/**',
         '**/__testfixtures__/**',
         '**/*.test.*',
+        '**/*.test-d.*',
         '**/*.stories.*',
         '**/*.mockdata.*',
         '**/template/**/*',

diff --git a/code/.storybook/main.ts b/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;
diff --git a/code/.storybook/preview.tsx b/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,
+});
diff --git a/code/.storybook/storybook.setup.ts b/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

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.6.0-alpha.2",
+  "version": "8.6.0-alpha.5",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -68,8 +68,7 @@
   "dependencies": {
     "@storybook/addon-highlight": "workspace:*",
     "@storybook/test": "workspace:*",
-    "axe-core": "^4.2.0",
-    "vitest-axe": "^0.1.0"
+    "axe-core": "^4.2.0"
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
@@ -82,7 +81,8 @@
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",
     "resize-observer-polyfill": "^1.5.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.7.3",
+    "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
     "storybook": "workspace:^"

diff --git a/code/addons/a11y/src/constants.ts b/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';
diff --git a/code/addons/a11y/src/index.ts b/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);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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';