Release: Prerelease 8.4.0-alpha.1

.circleci/config.yml

@@ -628,6 +628,8 @@ jobs:
                   mkdir empty-<< parameters.template >>-no-install
                   cd empty-<< parameters.template >>-no-install
                   npx storybook init --yes --skip-install
+                  npm install
+                  npm run build-storybook
                 environment:
                   IN_STORYBOOK_SANDBOX: true
                   STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 8.3.2
+
+- CLI: Fix skip-install for stable latest releases - [#29133](https://github.com/storybookjs/storybook/pull/29133), thanks @valentinpalkovic!
+- Core: Do not add packageManager field to package.json during `storybook dev` - [#29152](https://github.com/storybookjs/storybook/pull/29152), thanks @valentinpalkovic!
+
+## 8.3.1
+
+- Angular: Fix sourceDecorator to apply excludeDecorators flag - [#29069](https://github.com/storybookjs/storybook/pull/29069), thanks @JSMike!
+- Core: Do not prebundle better-opn - [#29137](https://github.com/storybookjs/storybook/pull/29137), thanks @valentinpalkovic!
+- Core: Do not prebundle jsdoc-type-pratt-parser - [#29134](https://github.com/storybookjs/storybook/pull/29134), thanks @valentinpalkovic!
+- Next.js: Upgrade sass-loader from ^12 to ^13 - [#29040](https://github.com/storybookjs/storybook/pull/29040), thanks @HoncharenkoZhenya!
+
 ## 8.3.0
 
 Fresh out of the oven! Storybook 8.3 brings you:

CHANGELOG.prerelease.md

@@ -1,3 +1,22 @@
+## 8.4.0-alpha.1
+
+- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!
+- Addon-Interactions: Use ansi-to-html for colored test errors - [#29110](https://github.com/storybookjs/storybook/pull/29110), thanks @kasperpeulen!
+- Angular: Fix sourceDecorator to apply excludeDecorators flag - [#29069](https://github.com/storybookjs/storybook/pull/29069), thanks @JSMike!
+- Builder-vite: Replace .at() call with [] in codegen - [#29048](https://github.com/storybookjs/storybook/pull/29048), thanks @Chudesnov!
+- CLI: Ensure `.gitignore` updated via CLI ends with a newline - [#29124](https://github.com/storybookjs/storybook/pull/29124), thanks @3w36zj6!
+- CLI: Fix skip-install for stable latest releases - [#29133](https://github.com/storybookjs/storybook/pull/29133), thanks @valentinpalkovic!
+- CLI: Show constraints in error when getting depndencies - [#29187](https://github.com/storybookjs/storybook/pull/29187), thanks @andrasczeh!
+- Core: Do not add packageManager field to package.json during `storybook dev` - [#29152](https://github.com/storybookjs/storybook/pull/29152), thanks @valentinpalkovic!
+- Core: Do not prebundle better-opn - [#29137](https://github.com/storybookjs/storybook/pull/29137), thanks @valentinpalkovic!
+- Core: Do not prebundle jsdoc-type-pratt-parser - [#29134](https://github.com/storybookjs/storybook/pull/29134), thanks @valentinpalkovic!
+- Core: Replace `fs-extra` with the native APIs - [#29126](https://github.com/storybookjs/storybook/pull/29126), thanks @ziebam!
+- Next.js: Upgrade sass-loader from ^12 to ^13 - [#29040](https://github.com/storybookjs/storybook/pull/29040), thanks @HoncharenkoZhenya!
+- React-Vite: Downgrade react-docgen-typescript plugin - [#29184](https://github.com/storybookjs/storybook/pull/29184), thanks @shilman!
+- UI: Fix composed storybook TooltipLinkList bug where href isn't passed forward - [#29175](https://github.com/storybookjs/storybook/pull/29175), thanks @JSMike!
+- Viewport-addon: Add InitialViewportKeys type to viewport addon - [#29182](https://github.com/storybookjs/storybook/pull/29182), thanks @hyeongrok7874!
+- Vite: Add jsdoc-type-pratt-parser to `optimizeDeps` - [#29179](https://github.com/storybookjs/storybook/pull/29179), thanks @tobiasdiez!
+
 ## 8.4.0-alpha.0
 
 

code/__mocks__/fs.ts

@@ -0,0 +1,32 @@
+import { vi } from 'vitest';
+
+// This is a custom function that our tests can use during setup to specify
+// what the files on the "mock" filesystem should look like when any of the
+// `fs` APIs are used.
+let mockFiles = Object.create(null);
+
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
+export function __setMockFiles(newMockFiles: Record<string, string | null>) {
+  mockFiles = newMockFiles;
+}
+
+export const readFileSync = (filePath = '') => mockFiles[filePath];
+export const existsSync = (filePath: string) => !!mockFiles[filePath];
+export const lstatSync = (filePath: string) => ({
+  isFile: () => !!mockFiles[filePath],
+});
+export const realpathSync = vi.fn();
+export const readdir = vi.fn();
+export const readdirSync = vi.fn();
+export const readlinkSync = vi.fn();
+
+export default {
+  __setMockFiles,
+  readFileSync,
+  existsSync,
+  lstatSync,
+  realpathSync,
+  readdir,
+  readdirSync,
+  readlinkSync,
+};

code/__mocks__/fs/promises.ts

@@ -0,0 +1,32 @@
+import { vi } from 'vitest';
+
+// This is a custom function that our tests can use during setup to specify
+// what the files on the "mock" filesystem should look like when any of the
+// `fs` APIs are used.
+let mockFiles = Object.create(null);
+
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
+export function __setMockFiles(newMockFiles: Record<string, string | null>) {
+  mockFiles = newMockFiles;
+}
+
+export const writeFile = vi.fn(async (filePath: string, content: string) => {
+  mockFiles[filePath] = content;
+});
+export const readFile = vi.fn(async (filePath: string) => mockFiles[filePath]);
+export const lstat = vi.fn(async (filePath: string) => ({
+  isFile: () => !!mockFiles[filePath],
+}));
+export const readdir = vi.fn();
+export const readlink = vi.fn();
+export const realpath = vi.fn();
+
+export default {
+  __setMockFiles,
+  writeFile,
+  readFile,
+  lstat,
+  readdir,
+  readlink,
+  realpath,
+};

code/addons/docs/package.json

@@ -103,7 +103,6 @@
     "@storybook/global": "^5.0.0",
     "@storybook/react-dom-shim": "workspace:*",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "fs-extra": "^11.1.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rehype-external-links": "^3.0.0",

code/addons/interactions/package.json

@@ -62,6 +62,7 @@
     "@devtools-ds/object-inspector": "^1.1.2",
     "@storybook/icons": "^1.2.5",
     "@types/node": "^22.0.0",
+    "ansi-to-html": "^0.7.2",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

code/addons/interactions/src/components/Interaction.tsx

@@ -8,7 +8,7 @@ import { type Call, CallStates, type ControlStates } from '@storybook/instrument
 
 import { transparentize } from 'polished';
 
-import { isChaiError, isJestError } from '../utils';
+import { isChaiError, isJestError, useAnsiToHtmlFilter } from '../utils';
 import type { Controls } from './InteractionsPanel';
 import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
@@ -116,6 +116,7 @@ const RowMessage = styled('div')(({ theme }) => ({
 }));
 
 export const Exception = ({ exception }: { exception: Call['exception'] }) => {
+  const filter = useAnsiToHtmlFilter();
   if (isJestError(exception)) {
     return <MatcherResult {...exception} />;
   }
@@ -135,7 +136,7 @@ export const Exception = ({ exception }: { exception: Call['exception'] }) => {
   const more = paragraphs.length > 1;
   return (
     <RowMessage>
-      <pre>{paragraphs[0]}</pre>
+      <pre dangerouslySetInnerHTML={{ __html: filter.toHtml(paragraphs[0]) }}></pre>
       {more && <p>See the full stack trace in the browser console.</p>}
     </RowMessage>
   );

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -6,7 +6,7 @@ import { type Call, CallStates, type ControlStates } from '@storybook/instrument
 
 import { transparentize } from 'polished';
 
-import { isTestAssertionError } from '../utils';
+import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
 import { Empty } from './EmptyState';
 import { Interaction } from './Interaction';
 import { Subnav } from './Subnav';
@@ -97,6 +97,7 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
     onScrollToEnd,
     endRef,
   }) {
+    const filter = useAnsiToHtmlFilter();
     return (
       <Container>
         {(interactions.length > 0 || hasException) && (
@@ -131,9 +132,12 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
             <CaughtExceptionTitle>
               Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
             </CaughtExceptionTitle>
-            <CaughtExceptionStack data-chromatic="ignore">
-              {printSerializedError(caughtException)}
-            </CaughtExceptionStack>
+            <CaughtExceptionStack
+              data-chromatic="ignore"
+              dangerouslySetInnerHTML={{
+                __html: filter.toHtml(printSerializedError(caughtException)),
+              }}
+            ></CaughtExceptionStack>
           </CaughtException>
         )}
         {unhandledErrors && (

code/addons/interactions/src/components/MatcherResult.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { styled, typography } from 'storybook/internal/theming';
 
+import { useAnsiToHtmlFilter } from '../utils';
 import { Node } from './MethodCall';
 
 const getParams = (line: string, fromIndex = 0): string => {
@@ -59,6 +60,7 @@ export const MatcherResult = ({
   message: string;
   style?: React.CSSProperties;
 }) => {
+  const filter = useAnsiToHtmlFilter();
   const lines = message.split('\n');
   return (
     <pre
@@ -131,7 +133,13 @@ export const MatcherResult = ({
           ];
         }
 
-        return [<span key={line + index}>{line}</span>, <br key={`br${index}`} />];
+        return [
+          <span
+            key={line + index}
+            dangerouslySetInnerHTML={{ __html: filter.toHtml(line) }}
+          ></span>,
+          <br key={`br${index}`} />,
+        ];
       })}
     </pre>
   );

code/addons/interactions/src/utils.ts

@@ -1,3 +1,7 @@
+import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
+
+import Filter from 'ansi-to-html';
+
 export function isTestAssertionError(error: unknown) {
   return isChaiError(error) || isJestError(error);
 }
@@ -21,3 +25,15 @@ export function isJestError(error: unknown) {
     error.message.startsWith('expect(')
   );
 }
+
+export function createAnsiToHtmlFilter(theme: StorybookTheme) {
+  return new Filter({
+    fg: theme.color.defaultText,
+    bg: theme.background.content,
+  });
+}
+
+export function useAnsiToHtmlFilter() {
+  const theme = useTheme();
+  return createAnsiToHtmlFilter(theme);
+}

code/addons/links/package.json

@@ -71,7 +71,6 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "fs-extra": "^11.1.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

code/addons/links/scripts/fix-preview-api-reference.ts

@@ -1,4 +1,4 @@
-import { readFile, writeFile } from 'fs-extra';
+import { readFile, writeFile } from 'node:fs/promises';
 
 /* I wish this wasn't needed..
  * There seems to be some bug in tsup / the unlaying lib that does DTS bundling

code/addons/themes/docs/api.md

@@ -148,7 +148,7 @@ export const myCustomDecorator = ({ themes, defaultState, ...rest }) => {
 Let's use Vuetify as an example. Vuetify uses it's own global state to know which theme to render. To build a custom decorator to accommodate this method we'll need to do the following
 
 ```js
-// .storybook/withVeutifyTheme.decorator.js
+// .storybook/withVuetifyTheme.decorator.js
 import { DecoratorHelpers } from '@storybook/addon-themes';
 import { useTheme } from 'vuetify';
 

code/addons/viewport/src/defaults.ts

@@ -1,6 +1,6 @@
 import type { ViewportMap } from './types';
 
-export const INITIAL_VIEWPORTS: ViewportMap = {
+const INITIAL_VIEWPORTS_DATA = {
   iphone5: {
     name: 'iPhone 5',
     styles: {
@@ -225,7 +225,12 @@ export const INITIAL_VIEWPORTS: ViewportMap = {
     },
     type: 'mobile',
   },
-};
+} as const;
+
+export type InitialViewportKeys = keyof typeof INITIAL_VIEWPORTS_DATA;
+
+export const INITIAL_VIEWPORTS: ViewportMap = INITIAL_VIEWPORTS_DATA;
+
 export const DEFAULT_VIEWPORT = 'responsive';
 
 export const MINIMAL_VIEWPORTS: ViewportMap = {

code/builders/builder-vite/package.json

@@ -49,7 +49,6 @@
     "es-module-lexer": "^1.5.0",
     "express": "^4.19.2",
     "find-cache-dir": "^3.0.0",
-    "fs-extra": "^11.1.0",
     "magic-string": "^0.30.0",
     "ts-dedent": "^2.0.0"
   },

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -27,7 +27,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
       .map(
         (previewAnnotation, index) =>
           // Prefer the updated module from an HMR update, otherwise import the original module
-          `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
+          `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`
       )
       .join(',\n')}])
     return composeConfigs(configs);

code/builders/builder-vite/src/index.ts

@@ -1,12 +1,12 @@
 // noinspection JSUnusedGlobalSymbols
+import { cp, readFile } from 'node:fs/promises';
 import { join, parse } from 'node:path';
 
 import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
 import type { Options } from 'storybook/internal/types';
 
 import type { RequestHandler } from 'express';
 import express from 'express';
-import * as fs from 'fs-extra';
 import { corePath } from 'storybook/core-path';
 import type { ViteDevServer } from 'vite';
 
@@ -34,10 +34,9 @@ function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandl
       return;
     }
 
-    const indexHtml = await fs.readFile(
-      require.resolve('@storybook/builder-vite/input/iframe.html'),
-      'utf-8'
-    );
+    const indexHtml = await readFile(require.resolve('@storybook/builder-vite/input/iframe.html'), {
+      encoding: 'utf8',
+    });
     const generated = await transformIframeHtml(indexHtml, options);
     const transformed = await server.transformIndexHtml('/iframe.html', generated);
     res.setHeader('Content-Type', 'text/html');
@@ -85,14 +84,15 @@ export const build: ViteBuilder['build'] = async ({ options }) => {
   const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 
-  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
         return ext === '.js';
       }
       return true;
     },
+    recursive: true,
   });
 
   const [out] = await Promise.all([viteCompilation, previewFiles]);

code/builders/builder-vite/src/optimizeDeps.ts

@@ -32,6 +32,7 @@ const INCLUDE_CANDIDATES = [
   'fast-deep-equal',
   'html-tags',
   'isobject',
+  'jsdoc-type-pratt-parser', // TODO: Remove this once it's converted to ESM: https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/173
   'loader-utils',
   'lodash/camelCase.js',
   'lodash/camelCase',