Release: Prerelease 8.3.0-alpha.7

.gitignore

@@ -54,4 +54,6 @@ code/bench-results/
 
 /packs
 code/.nx/cache
-!**/fixtures/**/yarn.lock
+code/.vite-inspect
+.nx/cache
+!**/fixtures/**/yarn.lock

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 8.3.0-alpha.7
+
+- Addon Vitest: Set screenshotFailures to false by default - [#28908](https://github.com/storybookjs/storybook/pull/28908), thanks @yannbf!
+- Addon Vitest: Fix error message logic in set up file - [#28906](https://github.com/storybookjs/storybook/pull/28906), thanks @yannbf!
+- Core: Add Rsbuild frameworks to known frameworks - [#28694](https://github.com/storybookjs/storybook/pull/28694), thanks @fi3ework!
+- Test: Fix support for TS < 4.7 - [#28887](https://github.com/storybookjs/storybook/pull/28887), thanks @ndelangen!
+
 ## 8.3.0-alpha.6
 
 - Addon Vitest: Add experimental vitest integration - [#28768](https://github.com/storybookjs/storybook/pull/28768), thanks @kasperpeulen!
@@ -21,7 +28,7 @@
 
 - CSF: Allow overridding globals at the story level - [#26654](https://github.com/storybookjs/storybook/pull/26654), thanks @tmeasday!
 - Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
-- Core: Split Storybook CLI  - [#28519](https://github.com/storybookjs/storybook/pull/28519), thanks @kasperpeulen!
+- Core: Split Storybook CLI - [#28519](https://github.com/storybookjs/storybook/pull/28519), thanks @kasperpeulen!
 - Fix: Invariant failed: Expected package.json#version to be defined in the "undefined" package - [#28752](https://github.com/storybookjs/storybook/pull/28752), thanks @abcdmku!
 - Next.js: Make RSC portable-stories compatible - [#28756](https://github.com/storybookjs/storybook/pull/28756), thanks @valentinpalkovic!
 - UI: Fix collapse/expand all functionality - [#28582](https://github.com/storybookjs/storybook/pull/28582), thanks @filipemelo2002!
@@ -71,7 +78,6 @@
 
 ## 8.3.0-alpha.0
 
-
 ## 8.2.0-beta.3
 
 - Addon Controls: Fix saving on Windows - [#28485](https://github.com/storybookjs/storybook/pull/28485), thanks @ghengeveld!
@@ -213,7 +219,6 @@
 
 ## 8.2.0-alpha.0
 
-
 ## 8.1.0-beta.1
 
 - API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
@@ -259,7 +264,7 @@
 - Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
 - React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
 - Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
-- Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
+- Test: Support module mocking with conditional subpath imports in `package.json` - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
 - UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
 - UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
 - Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
@@ -333,11 +338,10 @@
 
 ## 8.1.0-alpha.1
 
-- Maintenance: Fix performance regressions  - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
+- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
 
 ## 8.1.0-alpha.0
 
-
 ## 8.0.0-rc.5
 
 - CLI: Automigration fix version detection of upgrading related packages - [#26410](https://github.com/storybookjs/storybook/pull/26410), thanks @ndelangen!
@@ -348,7 +352,7 @@
 - CLI: Add explicit actions to header story - [#26352](https://github.com/storybookjs/storybook/pull/26352), thanks @kasperpeulen!
 - CLI: Automigration for upgrading storybook related dependencies - [#26377](https://github.com/storybookjs/storybook/pull/26377), thanks @ndelangen!
 - CLI: Fix doctor compatibility check - [#26363](https://github.com/storybookjs/storybook/pull/26363), thanks @yannbf!
-- CLI: Fix fn reference in preact templates  - [#26384](https://github.com/storybookjs/storybook/pull/26384), thanks @kasperpeulen!
+- CLI: Fix fn reference in preact templates - [#26384](https://github.com/storybookjs/storybook/pull/26384), thanks @kasperpeulen!
 - CLI: Remove duplicated dependency warning - [#26385](https://github.com/storybookjs/storybook/pull/26385), thanks @yannbf!
 - CLI: Vite migration link (shorter) - [#26379](https://github.com/storybookjs/storybook/pull/26379), thanks @ndelangen!
 - Composition: Fix refs not loading when there's multiple - [#26356](https://github.com/storybookjs/storybook/pull/26356), thanks @ndelangen!

code/.eslintrc.js

@@ -1,15 +1,7 @@
 const path = require('path');
-const fs = require('fs');
 
 const scriptPath = path.join(__dirname, '..', 'scripts');
 
-const addonsPackages = fs
-  .readdirSync(path.join(__dirname, 'addons'))
-  .filter((p) => fs.statSync(path.join(__dirname, 'addons', p)).isDirectory());
-const libPackages = fs
-  .readdirSync(path.join(__dirname, 'lib'))
-  .filter((p) => fs.statSync(path.join(__dirname, 'lib', p)).isDirectory());
-
 module.exports = {
   root: true,
   extends: [path.join(scriptPath, '.eslintrc.cjs')],
@@ -58,18 +50,6 @@ module.exports = {
         '@typescript-eslint/dot-notation': 'off',
       },
     },
-    {
-      files: [
-        '*.test.*',
-        '*.spec.*',
-        '**/template/**/*',
-        '**/vitest.config.ts',
-        '**/addons/docs/**/*',
-      ],
-      rules: {
-        'import/no-extraneous-dependencies': 'off',
-      },
-    },
     {
       files: ['*.js', '*.jsx', '*.json', '*.html', '**/.storybook/*.ts', '**/.storybook/*.tsx'],
       parserOptions: {
@@ -82,14 +62,6 @@ module.exports = {
         '@typescript-eslint/return-await': 'off',
       },
     },
-    {
-      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
-      files: ['**/*.ts', '**/*.tsx'],
-      rules: {
-        'no-shadow': 'off',
-        '@typescript-eslint/ban-types': 'warn', // should become error, in the future
-      },
-    },
     {
       // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
       files: ['**/builder-vite/**/*.html'],
@@ -98,54 +70,34 @@ module.exports = {
       },
     },
     {
-      // these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies
-      files: ['frameworks/**/*', 'builders/**/*', 'deprecated/**/*', 'renderers/**/*'],
-      excludedFiles: ['frameworks/angular/**/*', 'frameworks/ember/**/*', 'core/**/*'],
+      files: ['**/.storybook/**', '**/scripts/**/*', 'vitest.d.ts', '**/vitest.config.*'],
       rules: {
         'import/no-extraneous-dependencies': [
           'error',
-          { bundledDependencies: false, devDependencies: true, peerDependencies: true },
+          { packageDir: [__dirname], devDependencies: true, peerDependencies: true },
         ],
       },
     },
     {
-      files: ['**/.storybook/**'],
+      files: [
+        '*.test.*',
+        '*.spec.*',
+        '**/addons/docs/**/*',
+        '**/__tests__/**',
+        '**/__testfixtures__/**',
+        '**/*.test.*',
+        '**/*.stories.*',
+        '**/*.mockdata.*',
+        '**/template/**/*',
+      ],
       rules: {
-        'import/no-extraneous-dependencies': [
-          'error',
-          { packageDir: [__dirname], devDependencies: true, peerDependencies: true },
-        ],
+        'import/no-extraneous-dependencies': 'off',
       },
     },
-    ...addonsPackages.map((directory) => ({
-      files: [path.join('**', 'addons', directory, '**', '*.*')],
-      rules: {
-        'import/no-extraneous-dependencies': [
-          'error',
-          {
-            packageDir: [__dirname, path.join(__dirname, 'addons', directory)],
-            devDependencies: true,
-          },
-        ],
-      },
-    })),
-    ...libPackages.map((directory) => ({
-      files: [path.join('**', 'lib', directory, '**', '*.*')],
-      rules: {
-        'import/no-extraneous-dependencies': [
-          'error',
-          {
-            packageDir: [__dirname, path.join(__dirname, 'lib', directory)],
-            devDependencies: true,
-          },
-        ],
-      },
-    })),
     {
       files: ['**/__tests__/**', '**/__testfixtures__/**', '**/*.test.*', '**/*.stories.*'],
       rules: {
         '@typescript-eslint/no-empty-function': 'off',
-        'import/no-extraneous-dependencies': 'off',
       },
     },
     {
@@ -204,13 +156,6 @@ module.exports = {
         'no-undef': 'off', // ignore "window" undef errors
       },
     },
-    {
-      // Because those templates reference css files in other directory.
-      files: ['**/template/cli/**/*'],
-      rules: {
-        'import/no-unresolved': 'off',
-      },
-    },
     {
       files: ['**/*.ts', '!**/*.test.*', '!**/*.spec.*'],
       excludedFiles: ['**/*.test.*', '**/*.mockdata.*'],

code/.storybook/main.ts

@@ -1,8 +1,5 @@
 import { join } from 'node:path';
 
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { mergeConfig } from 'vite';
-
 import type { StorybookConfig } from '../frameworks/react-vite';
 
 const componentsPath = join(__dirname, '../core/src/components');
@@ -129,8 +126,10 @@ const config: StorybookConfig = {
     viewportStoryGlobals: true,
     backgroundsStoryGlobals: true,
   },
-  viteFinal: (viteConfig, { configType }) =>
-    mergeConfig(viteConfig, {
+  viteFinal: async (viteConfig, { configType }) => {
+    const { mergeConfig } = await import('vite');
+
+    return mergeConfig(viteConfig, {
       resolve: {
         alias: {
           ...(configType === 'DEVELOPMENT'
@@ -143,12 +142,16 @@ const config: StorybookConfig = {
             : {}),
         },
       },
-      optimizeDeps: { force: true },
+      optimizeDeps: {
+        force: true,
+        include: ['@storybook/blocks'],
+      },
       build: {
         // disable sourcemaps in CI to not run out of memory
         sourcemap: process.env.CI !== 'true',
       },
-    }),
+    } satisfies typeof viteConfig);
+  },
   // logLevel: 'debug',
 };
 

code/.storybook/preview.tsx

@@ -16,7 +16,7 @@ import {
 
 import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
-import type { Decorator, ReactRenderer } from '@storybook/react';
+import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
 
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
@@ -95,7 +95,6 @@ const StackContainer = ({ children, layout }) => (
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
-      // margin: layout === 'fullscreen' ? 0 : '-1rem',
     }}
   >
     <style dangerouslySetInnerHTML={{ __html: 'html, body, #storybook-root { height: 100%; }' }} />
@@ -124,15 +123,21 @@ const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRendere
 const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
 export 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:
+   * 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:
+   *
+   * ```ts
    * parameters: {
-   *  relativeCsfPaths: ['../stories/MyStory.stories.tsx'], // relative to the story
+   *   relativeCsfPaths: ['../stories/MyStory.stories.tsx'], // relative to the story
    * }
+   * ```
+   *
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
-    if (!relativeCsfPaths) return {};
+    if (!relativeCsfPaths) {
+      return {};
+    }
     const csfFiles = await Promise.all(
       (relativeCsfPaths as string[]).map(async (blocksRelativePath) => {
         const projectRelativePath = `./lib/blocks/src/${blocksRelativePath.replace(
@@ -185,7 +190,8 @@ export const decorators = [
       <Story />
     ),
   /**
-   * This decorator renders the stories side-by-side, stacked or default based on the theme switcher in the toolbar
+   * This decorator renders the stories side-by-side, stacked or default based on the theme switcher
+   * in the toolbar
    */
   (StoryFn, { globals, playFunction, args, storyGlobals, parameters }) => {
     let theme = globals.sb_theme;
@@ -267,9 +273,9 @@ export const decorators = [
     }
   },
   /**
-   * This decorator shows the current state of the arg named in the
-   * parameters.withRawArg property, by updating the arg in the onChange function
-   * this also means that the arg will sync with the control panel
+   * This decorator shows the current state of the arg named in the parameters.withRawArg property,
+   * by updating the arg in the onChange function this also means that the arg will sync with the
+   * control panel
    *
    * If parameters.withRawArg is not set, this decorator will do nothing
    */

code/.storybook/vitest.config.ts

@@ -33,7 +33,7 @@ export default mergeConfig(
       include: [
         // TODO: test all core and addon stories later
         // './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../addons/interactions/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
+        '../addons/**/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
       ],
       exclude: [
         ...defaultExclude,

code/addons/a11y/src/a11yRunner.ts

@@ -15,10 +15,7 @@ let activeStoryId: string | undefined;
 
 const defaultParameters = { config: {}, options: {} };
 
-/**
- * Handle A11yContext events.
- * Because the event are sent without manual check, we split calls
- */
+/** Handle A11yContext events. Because the event are sent without manual check, we split calls */
 const handleRequest = async (storyId: string, input: A11yParameters | null) => {
   if (!input?.manual) {
     await run(storyId, input ?? defaultParameters);

code/addons/a11y/src/components/A11yContext.tsx

@@ -105,7 +105,9 @@ export const A11yContextProvider: React.FC<React.PropsWithChildren<A11yContextPr
     }
   }, [active, handleClearHighlights, emit, storyEntry]);
 
-  if (!active) return null;
+  if (!active) {
+    return null;
+  }
 
   return (
     <A11yContext.Provider

code/addons/actions/src/addArgsHelpers.ts

@@ -11,8 +11,8 @@ const isInInitialArgs = (name: string, initialArgs: Args) =>
   typeof initialArgs[name] === 'undefined' && !(name in initialArgs);
 
 /**
- * Automatically add action args for argTypes whose name
- * matches a regex, such as `^on.*` for react-style `onClick` etc.
+ * Automatically add action args for argTypes whose name matches a regex, such as `^on.*` for
+ * react-style `onClick` etc.
  */
 
 export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) => {
@@ -39,9 +39,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) =
   }, {} as Args);
 };
 
-/**
- * Add action args for list of strings.
- */
+/** Add action args for list of strings. */
 export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
   const {
     initialArgs,

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -48,7 +48,11 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => {
 
   useEffect(() => {
     // Scroll to bottom, when the action panel was already scrolled down
-    if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+
+    // Scroll to bottom, when the action panel was already scrolled down
+    if (wasAtBottom) {
+      wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
+    }
   }, [wasAtBottom, actions.length]);
 
   return (