Release: Prerelease 8.4.0-beta.1

CHANGELOG.prerelease.md

@@ -1,3 +1,15 @@
+## 8.4.0-beta.1
+
+- Addon Test: Error when addon interactions exists - [#29434](https://github.com/storybookjs/storybook/pull/29434), thanks @valentinpalkovic!
+- Addon Test: Escape XML when converting ANSI to HTML in test errors - [#29446](https://github.com/storybookjs/storybook/pull/29446), thanks @ghengeveld!
+- Addon Test: Fix hiding stacktrace for assertion errors in test panel - [#29458](https://github.com/storybookjs/storybook/pull/29458), thanks @ghengeveld!
+- CLI: Fix `yarn` detection - [#29448](https://github.com/storybookjs/storybook/pull/29448), thanks @ndelangen!
+- Core: Close story status menu when selecting an item - [#29455](https://github.com/storybookjs/storybook/pull/29455), thanks @ghengeveld!
+- Core: Open 'Component tests' addon panel when clicking a story status - [#29456](https://github.com/storybookjs/storybook/pull/29456), thanks @ghengeveld!
+- Core: Show checkmark icon in story status dropdown and update status label for component tests - [#29451](https://github.com/storybookjs/storybook/pull/29451), thanks @ghengeveld!
+- Dependencies: Upgrade VTA to v3.1.0 - [#29449](https://github.com/storybookjs/storybook/pull/29449), thanks @ghengeveld!
+- Maintenance: Fix broken and outdated documentation links - [#29412](https://github.com/storybookjs/storybook/pull/29412), thanks @jonniebigodes!
+
 ## 8.4.0-beta.0
 
 - Core: Add unified UI Testing Module - [#29241](https://github.com/storybookjs/storybook/pull/29241), thanks @yannbf!

code/.storybook/main.ts

@@ -96,7 +96,6 @@ const config: StorybookConfig = {
   addons: [
     '@storybook/addon-themes',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
     '@storybook/experimental-addon-test',

code/addons/interactions/src/preset.ts

@@ -18,3 +18,6 @@ export const checkActionsLoaded = (configDir: string) => {
     getConfig: (configFile) => serverRequire(configFile),
   });
 };
+
+// This annotation is read by addon-test, so it can throw an error if both addons are used
+export const ADDON_INTERACTIONS_IN_USE = true;

code/addons/test/package.json

@@ -103,6 +103,7 @@
     "react-dom": "^18.2.0",
     "semver": "^7.6.3",
     "slash": "^5.0.0",
+    "strip-ansi": "^7.1.0",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.3.2",
     "vitest": "^2.1.3"

code/addons/test/src/manager.tsx

@@ -80,6 +80,11 @@ const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: nu
 };
 
 addons.register(ADDON_ID, (api) => {
+  const openAddonPanel = () => {
+    api.setSelectedPanel(PANEL_ID);
+    api.togglePanel(true);
+  };
+
   addons.add(TEST_PROVIDER_ID, {
     type: Addon_TypesEnum.experimental_TEST_PROVIDER,
     runnable: true,
@@ -152,7 +157,7 @@ addons.register(ADDON_ID, (api) => {
             .map(({ storyId, status, testRunId, ...rest }) => {
               if (storyId) {
                 const statusObject: API_StatusObject = {
-                  title: 'Vitest',
+                  title: 'Component tests',
                   status: statusMap[status],
                   description:
                     'failureMessages' in rest && rest.failureMessages?.length
@@ -161,6 +166,7 @@ addons.register(ADDON_ID, (api) => {
                   data: {
                     testRunId,
                   },
+                  onClick: openAddonPanel,
                 };
                 return [storyId, statusObject];
               }

code/addons/test/src/preset.ts

@@ -9,7 +9,7 @@ import {
   TESTING_MODULE_WATCH_MODE_REQUEST,
 } from 'storybook/internal/core-events';
 import { oneWayHash, telemetry } from 'storybook/internal/telemetry';
-import type { Options, StoryId } from 'storybook/internal/types';
+import type { Options, PresetProperty, StoryId } from 'storybook/internal/types';
 
 import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
@@ -99,3 +99,33 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
 
   return channel;
 };
+
+export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
+  entry = [],
+  options
+) => {
+  checkActionsLoaded(options.configDir);
+  return entry;
+};
+
+export const managerEntries: PresetProperty<'managerEntries'> = async (entry = [], options) => {
+  // Throw an error when addon-interactions is used.
+  // This is done by reading an annotation defined in addon-interactions, which although not ideal,
+  // is a way to handle addon conflict without having to worry about the order of which they are registered
+  const annotation = await options.presets.apply('ADDON_INTERACTIONS_IN_USE', false);
+  if (annotation) {
+    // eslint-disable-next-line local-rules/no-uncategorized-errors
+    const error = new Error(
+      dedent`
+        You have both "@storybook/addon-interactions" and "@storybook/experimental-addon-test" listed as addons in your Storybook config. This is not allowed, as @storybook/experimental-addon-test is a replacement for @storybook/addon-interactions.
+
+        Please remove "@storybook/addon-interactions" from the addons array in your main Storybook config at ${options.configDir} and remove the dependency from your package.json file.
+      `
+    );
+    error.name = 'AddonConflictError';
+    throw error;
+  }
+
+  // for whatever reason seems like the return type of managerEntries is not correct (it expects never instead of string[])
+  return entry as never;
+};

code/addons/test/src/utils.ts

@@ -1,6 +1,7 @@
 import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
 
 import Filter from 'ansi-to-html';
+import stripAnsi from 'strip-ansi';
 
 export function isTestAssertionError(error: unknown) {
   return isChaiError(error) || isJestError(error);
@@ -22,12 +23,13 @@ export function isJestError(error: unknown) {
     typeof error === 'object' &&
     'message' in error &&
     typeof error.message === 'string' &&
-    error.message.startsWith('expect(')
+    stripAnsi(error.message).startsWith('expect(')
   );
 }
 
 export function createAnsiToHtmlFilter(theme: StorybookTheme) {
   return new Filter({
+    escapeXML: true,
     fg: theme.color.defaultText,
     bg: theme.background.content,
   });

code/core/assets/server/base-preview-body.html

@@ -93,7 +93,7 @@ <h1 id="error-message"></h1>
         <strong>Missing Context/Providers</strong>: You can use decorators to supply specific
         contexts or providers, which are sometimes necessary for components to render correctly. For
         detailed instructions on using decorators, please visit the
-        <a href="https://storybook.js.org/docs/react/writing-stories/decorators"
+        <a href="https://storybook.js.org/docs/writing-stories/decorators"
           >Decorators documentation</a
         >.
       </li>

code/core/src/common/js-package-manager/JsPackageManagerFactory.ts

@@ -129,6 +129,7 @@ function hasNPM(cwd?: string) {
     cwd,
     shell: true,
     env: {
+      ...process.env,
       COREPACK_ENABLE_STRICT: '0',
     },
   });
@@ -140,6 +141,7 @@ function hasPNPM(cwd?: string) {
     cwd,
     shell: true,
     env: {
+      ...process.env,
       COREPACK_ENABLE_STRICT: '0',
     },
   });
@@ -151,6 +153,7 @@ function getYarnVersion(cwd?: string): 1 | 2 | undefined {
     cwd,
     shell: true,
     env: {
+      ...process.env,
       COREPACK_ENABLE_STRICT: '0',
     },
   });

code/core/src/common/presets.ts

@@ -198,7 +198,7 @@ const map =
       resolved = resolveAddonName(configDir, name, options);
     } catch (err) {
       logger.error(
-        `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}`
+        `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/addons/writing-presets/\n${item}`
       );
       return undefined;
     }

code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx

@@ -187,10 +187,10 @@ export const Story = {
     const meta = {
       title: 'Example/Header',
       component: Header,
-      // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+      // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
       tags: ['autodocs'],
       parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
         layout: 'fullscreen',
       },
     } satisfies Meta<typeof Header>;

code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts

@@ -56,7 +56,7 @@ Your main configuration somehow does not contain a 'stories' field, or it resolv
 
 Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.
 
-More info: https://storybook.js.org/docs/react/faq#can-i-have-a-storybook-with-no-local-stories
+More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories
 ]
 `);
   });

code/core/src/csf-tools/CsfFile.ts

@@ -174,7 +174,7 @@ export class NoMetaError extends Error {
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
 
-      More info: https://storybook.js.org/docs/react/writing-stories#default-export
+      More info: https://storybook.js.org/docs/writing-stories#default-export
     `);
     this.name = this.constructor.name;
   }

code/core/src/manager/components/sidebar/RefIndicator.tsx

@@ -307,10 +307,7 @@ const ReadDocsMessage: FC = () => {
   const theme = useTheme();
 
   return (
-    <Message
-      href="https://storybook.js.org/docs/react/sharing/storybook-composition"
-      target="_blank"
-    >
+    <Message href="https://storybook.js.org/docs/sharing/storybook-composition" target="_blank">
       <DocumentIcon color={theme.color.green} />
       <div>
         <MessageTitle>Read Composition docs</MessageTitle>
@@ -348,14 +345,12 @@ const LoadingMessage: FC<{ url: string }> = ({ url }) => {
   );
 };
 
+// TODO: This is a temporary fix as the documentation link is not available with the 8.0 release, since the features it referenced were removed. See https://storybook.js.org/docs/7/sharing/storybook-composition#improve-your-storybook-composition for context.
 const PerformanceDegradedMessage: FC = () => {
   const theme = useTheme();
 
   return (
-    <Message
-      href="https://storybook.js.org/docs/react/sharing/storybook-composition#improve-your-storybook-composition"
-      target="_blank"
-    >
+    <Message href="https://storybook.js.org/docs/sharing/storybook-composition" target="_blank">
       <LightningIcon color={theme.color.gold} />
       <div>
         <MessageTitle>Reduce lag</MessageTitle>

code/core/src/manager/components/sidebar/SidebarBottom.tsx

@@ -211,7 +211,7 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
   }, [api, testProviders, updateTestProvider, clearState]);
 
   const testProvidersArray = Object.values(testProviders);
-  if (!hasWarnings && !hasErrors && !testProvidersArray.length) {
+  if (!hasWarnings && !hasErrors && !testProvidersArray.length && !notifications.length) {
     return null;
   }
 

code/core/src/manager/components/sidebar/Tree.tsx

@@ -7,6 +7,7 @@ import {
   CollapseIcon as CollapseIconSvg,
   ExpandAltIcon,
   StatusFailIcon,
+  StatusPassIcon,
   StatusWarnIcon,
   SyncIcon,
 } from '@storybook/icons';
@@ -210,9 +211,10 @@ const Node = React.memo<NodeProps>(function Node({
         {icon ? (
           <WithTooltip
             closeOnOutsideClick
+            closeOnTriggerHidden
             onClick={(event) => event.stopPropagation()}
             placement="bottom"
-            tooltip={() => (
+            tooltip={({ onHide }) => (
               <TooltipLinkList
                 links={Object.entries(status || {})
                   .sort(
@@ -224,7 +226,7 @@ const Node = React.memo<NodeProps>(function Node({
                     description: value.description,
                     'aria-label': `Test status for ${value.title}: ${value.status}`,
                     icon: {
-                      success: null, // We don't show a checkmark, to avoid clutter
+                      success: <StatusPassIcon color={theme.color.positive} />,
                       error: <StatusFailIcon color={theme.color.negative} />,
                       warn: <StatusWarnIcon color={theme.color.warning} />,
                       pending: <SyncIcon size={12} color={theme.color.defaultText} />,
@@ -233,6 +235,7 @@ const Node = React.memo<NodeProps>(function Node({
                     onClick: () => {
                       onSelectStoryId(item.id);
                       value.onClick?.();
+                      onHide();
                     },
                   }))}
               />

code/core/src/preview-api/modules/preview-web/parseArgsParam.ts

@@ -115,7 +115,7 @@ export const parseArgsParam = (argsString: string): Args => {
     once.warn(dedent`
       Omitted potentially unsafe URL args.
 
-      More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
+      More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url
     `);
     return acc;
   }, {} as Args);

code/core/src/preview-api/modules/store/args.ts

@@ -120,7 +120,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
       once.error(dedent`
         Invalid argType: '${key}.options' should be an array.
 
-        More info: https://storybook.js.org/docs/react/api/argtypes
+        More info: https://storybook.js.org/docs/api/arg-types
       `);
       return allowArg();
     }
@@ -129,7 +129,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
       once.error(dedent`
         Invalid argType: '${key}.options' should only contain primitives. Use a 'mapping' for complex values.
 
-        More info: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
+        More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values
       `);
       return allowArg();
     }

code/core/src/router/utils.ts

@@ -197,7 +197,7 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin
     once.warn(dedent`
       Omitted potentially unsafe URL args.
 
-      More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
+      More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url
     `);
     return acc;
   }, {} as Args);

code/core/src/server-errors.ts

@@ -116,7 +116,7 @@ export class ConflictingStaticDirConfigError extends StorybookError {
       category: Category.CORE_SERVER,
       code: 1,
       documentation:
-        'https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration',
+        'https://storybook.js.org/docs/configure/integration/images-and-assets#serving-static-files-via-storybook-configuration',
       message: dedent`
         Storybook encountered a conflict when trying to serve statics. You have configured both:
         * Storybook's option in the config file: 'staticDirs'
@@ -133,7 +133,7 @@ export class InvalidStoriesEntryError extends StorybookError {
       category: Category.CORE_COMMON,
       code: 4,
       documentation:
-        'https://storybook.js.org/docs/react/faq#can-i-have-a-storybook-with-no-local-stories',
+        'https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories',
       message: dedent`
         Storybook could not index your stories.
         Your main configuration somehow does not contain a 'stories' field, or it resolved to an empty array.
@@ -150,7 +150,7 @@ export class WebpackMissingStatsError extends StorybookError {
       code: 1,
       documentation: [
         'https://webpack.js.org/configuration/stats/',
-        'https://storybook.js.org/docs/react/builders/webpack#configure',
+        'https://storybook.js.org/docs/builders/webpack#configure',
       ],
       message: dedent`
         No Webpack stats found. Did you turn off stats reporting in your Webpack config?
@@ -217,7 +217,7 @@ export class MissingAngularJsonError extends StorybookError {
     super({
       category: Category.CLI_INIT,
       code: 2,
-      documentation: 'https://storybook.js.org/docs/angular/faq#error-no-angularjson-file-found',
+      documentation: 'https://storybook.js.org/docs/faq#error-no-angularjson-file-found',
       message: dedent`
         An angular.json file was not found in the current working directory: ${data.path}
         Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located.`,