Merge pull request #29439 from storybookjs/version-non-patch-from-8.4…

….0-alpha.8 Release: Prerelease beta 8.4.0-beta.0
storybookjs · Oct 24, 2024 · f58fb8a · f58fb8a
2 parents 3e154da + 3810a16
commit f58fb8a
Show file tree

Hide file tree

Showing 238 changed files with 18,540 additions and 1,155 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -64,7 +64,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.46.0-jammy
+      - image: mcr.microsoft.com/playwright:v1.48.1-jammy
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -154,7 +154,7 @@ jobs:
             cd code
             yarn local-registry --publish
       - report-workflow-on-failure
-      - store_artifacts: 
+      - store_artifacts:
           path: code/bench/esbuild-metafiles
       - save_cache:
           name: Save Yarn cache
@@ -261,6 +261,7 @@ jobs:
     executor:
       class: xlarge
       name: sb_playwright
+    parallelism: 4
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -270,15 +271,35 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage
-      - store_test_results:
-          path: code/junit.xml
+            SHARD="$((${CIRCLE_NODE_INDEX}+1))"; yarn test --reporter=blob --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
+      # TODO: bring coverage back later. This has caused flakiness in the tests because
+      # Somehow Vitest reports coverage while some tests are still running,
+      # then it tries to report coverage again and as result it crashes like this:
+      # https://app.circleci.com/pipelines/github/storybookjs/storybook/85043/workflows/4ddf7907-b93c-4b17-8fdf-fe0bd7fde905/jobs/715446
+      # - persist_to_workspace:
+      #     root: .
+      #     paths:
+      #       - code/coverage
       - persist_to_workspace:
           root: .
           paths:
-            - code/coverage
+            - code/.vitest-reports
       - report-workflow-on-failure
       - cancel-workflow-on-failure
+  store-test-results:
+    executor:
+      class: small
+      name: sb_node_22_browsers
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Merge test results
+          command: cd code && yarn vitest run --merge-reports --reporter=junit --outputFile=junit.xml
+      - store_test_results:
+          path: code/junit.xml
   coverage:
     executor:
       class: small
@@ -654,6 +675,31 @@ jobs:
                   STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
                   STORYBOOK_DISABLE_TELEMETRY: true
       - report-workflow-on-failure
+  test-ui-testing-module:
+    executor:
+      name: sb_playwright
+      class: medium
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Install dependencies
+          command: yarn install --no-immutable
+          working_directory: test-storybooks/portable-stories-kitchen-sink/react
+          environment:
+            YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      - run:
+          name: Run E2E tests
+          command: yarn playwright-e2e
+          working_directory: test-storybooks/portable-stories-kitchen-sink/react
+      - store_test_results:
+          path: test-results
+      - store_artifacts:
+          path: test-storybooks/portable-stories-kitchen-sink/react/test-results/
+          destination: playwright
+      - report-workflow-on-failure
   test-portable-stories:
     parameters:
       directory:
@@ -682,7 +728,7 @@ jobs:
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
       - run:
           name: Run Playwright CT tests
-          command: yarn playwright
+          command: yarn playwright-ct
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
       - run:
           name: Run Cypress CT tests
@@ -713,6 +759,9 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -754,6 +803,9 @@ workflows:
           parallelism: 5
           requires:
             - build-sandboxes
+      - test-ui-testing-module:
+          requires:
+            - build
       - test-portable-stories:
           requires:
             - build
@@ -782,6 +834,9 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -825,6 +880,9 @@ workflows:
           matrix:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
+      - test-ui-testing-module:
+          requires:
+            - build
       - bench:
           parallelism: 5
           requires:
@@ -852,6 +910,9 @@ workflows:
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -895,6 +956,9 @@ workflows:
           matrix:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
+      - test-ui-testing-module:
+          requires:
+            - build
       - test-empty-init:
           requires:
             - build

diff --git a/.github/workflows/generate-sandboxes.yml b/.github/workflows/generate-sandboxes.yml
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           ref: next
-  
+
       - uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
@@ -1,3 +1,8 @@
+## 8.4.0-beta.0
+
+- Core: Add unified UI Testing Module - [#29241](https://github.com/storybookjs/storybook/pull/29241), thanks @yannbf!
+- Svelte: Improve argTypes inference with `svelte2tsx` - support runes - [#29423](https://github.com/storybookjs/storybook/pull/29423), thanks @JReinhold!
+
 ## 8.4.0-alpha.8
 
 - Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!

diff --git a/README.md b/README.md
@@ -86,7 +86,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead
 
 Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz.
 
-Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
+Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
 
 ### Community
 
@@ -97,10 +97,10 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 ### Supported Frameworks
 
 | Renderer                                                       | Demo                                                                                                                                                                         |                                                                                                                                                       |
-|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
+| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/)          | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
 | [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/)        | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/)                                  |
-| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)            | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/)                                                |
+| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)           | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/)                                           |
 | [Web components](code/renderers/web-components)                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components)                       |
 | [React Native](https://github.com/storybookjs/react-native)    | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/)                                                                     | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)     |
 | [HTML](code/renderers/html)                                    | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/)           | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html)                                             |
@@ -132,7 +132,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [storysource](code/addons/storysource/)                                   | View the code of your stories within the Storybook UI                      |
 | [viewport](code/addons/viewport/)                                         | Change display sizes and layouts for responsive components using Storybook |
 
-See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.
 
@@ -237,7 +237,6 @@ By making a recurring donation, you can support us and our work. \[[Become a bac
 
 <a href="https://opencollective.com/storybook"><img src="https://opencollective.com/storybook/tiers/backers.svg?limit=80&button=false&avatarHeight=46&width=750"></a>
 
-
 ## License
 
 [MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)

diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
@@ -80,10 +80,18 @@ const config: StorybookConfig = {
       directory: '../addons/interactions/src',
       titlePrefix: 'addons/interactions',
     },
-    // {
-    //   directory: '../addons/interactions/template/stories',
-    //   titlePrefix: 'addons/interactions',
-    // },
+    {
+      directory: '../addons/interactions/template/stories',
+      titlePrefix: 'addons/interactions/tests',
+    },
+    {
+      directory: '../addons/test/src/components',
+      titlePrefix: 'addons/test',
+    },
+    {
+      directory: '../addons/test/template/stories',
+      titlePrefix: 'addons/test',
+    },
   ],
   addons: [
     '@storybook/addon-themes',

diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
@@ -18,8 +18,6 @@ import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
 
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-
 import { DocsPageWrapper } from '../lib/blocks/src/components';
 import { isChromatic } from './isChromatic';
 
@@ -135,7 +133,9 @@ export const loaders = [
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
-    if (!relativeCsfPaths) {
+    // TODO bring a better way to skip tests when running as part of the vitest plugin instead of __STORYBOOK_URL__
+    // eslint-disable-next-line no-underscore-dangle
+    if (!relativeCsfPaths || (import.meta as any).env?.__STORYBOOK_URL__) {
       return {};
     }
     const csfFiles = await Promise.all(
@@ -358,3 +358,5 @@ export const parameters = {
     },
   },
 };
+
+export const tags = ['test', 'vitest'];
diff --git a/code/.storybook/storybook.setup.ts b/code/.storybook/storybook.setup.ts
@@ -3,6 +3,9 @@ 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 coreAnnotations from '../addons/toolbars/template/stories/preview';
 import * as componentAnnotations from '../core/template/stories/preview';
 // register global components used in many stories
@@ -17,6 +20,7 @@ const annotations = setProjectAnnotations([
   // @ts-expect-error check type errors later
   componentAnnotations,
   coreAnnotations,
+  testAnnotations,
   {
     // 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/.storybook/vitest.config.ts b/code/.storybook/vitest.config.ts
@@ -19,29 +19,39 @@ if (process.env.INSPECT === 'true') {
 
 export default mergeConfig(
   vitestCommonConfig,
+  // @ts-expect-error added this because of testNamePattern below
   defineProject({
     plugins: [
       import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
         storybookTest({
           configDir: process.cwd(),
+          tags: {
+            include: ['vitest'],
+          },
         })
       ),
       ...extraPlugins,
     ],
     test: {
       name: 'storybook-ui',
       include: [
-        // TODO: test all core and addon stories later
-        // './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../addons/**/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        // '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
       ],
       exclude: [
         ...defaultExclude,
         '../node_modules/**',
         '**/__mockdata__/**',
+        '../**/__mockdata__/**',
         // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
         '**/Zoom.stories.tsx',
       ],
+      // TODO: bring this back once portable stories support @storybook/core/preview-api hooks
+      // @ts-expect-error this type does not exist but the property does!
+      testNamePattern: /^(?!.*(UseState)).*$/,
       browser: {
         enabled: true,
         name: 'chromium',

diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md
@@ -2,7 +2,7 @@
 
 This Storybook addon can be helpful to make your UI components more accessible.
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png)
 

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@testing-library/react": "^14.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md
@@ -2,19 +2,19 @@
 
 Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png)
 
 ## Installation
 
-Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-actions
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {

diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md
@@ -2,21 +2,21 @@
 
 Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif)
 
 ## Installation
 
-Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-backgrounds
 ```
 
 ## Configuration
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {