From 4af51ac4c2d184fc4a4eba85a1bcd5c931dda23d Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Thu, 12 Sep 2024 15:13:51 +0200
Subject: [PATCH 1/2] Use ansi-to-html for colored test errors

---
 code/addons/interactions/package.json            |  1 +
 .../interactions/src/components/Interaction.tsx  |  5 +++--
 .../src/components/InteractionsPanel.tsx         | 12 ++++++++----
 .../src/components/MatcherResult.tsx             | 10 +++++++++-
 code/addons/interactions/src/utils.ts            | 16 ++++++++++++++++
 code/yarn.lock                                   |  1 +
 6 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index dd30fb2650d4..9deb3a01105f 100644
--- a/code/addons/interactions/package.json
+++ b/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",
diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx
index c9b557cddc68..610d0c1b032b 100644
--- a/code/addons/interactions/src/components/Interaction.tsx
+++ b/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>
   );
diff --git a/code/addons/interactions/src/components/InteractionsPanel.tsx b/code/addons/interactions/src/components/InteractionsPanel.tsx
index c86a1df8ffde..643732f250ca 100644
--- a/code/addons/interactions/src/components/InteractionsPanel.tsx
+++ b/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 && (
diff --git a/code/addons/interactions/src/components/MatcherResult.tsx b/code/addons/interactions/src/components/MatcherResult.tsx
index beae8b2146ff..46b5e540ad8d 100644
--- a/code/addons/interactions/src/components/MatcherResult.tsx
+++ b/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>
   );
diff --git a/code/addons/interactions/src/utils.ts b/code/addons/interactions/src/utils.ts
index 1b08eca12a24..d80d9f4cdbee 100644
--- a/code/addons/interactions/src/utils.ts
+++ b/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);
+}
diff --git a/code/yarn.lock b/code/yarn.lock
index 52f251440bb3..1c9424cca89c 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5492,6 +5492,7 @@ __metadata:
     "@storybook/instrumenter": "workspace:*"
     "@storybook/test": "workspace:*"
     "@types/node": "npm:^22.0.0"
+    ansi-to-html: "npm:^0.7.2"
     formik: "npm:^2.2.9"
     polished: "npm:^4.2.2"
     react: "npm:^18.2.0"

From e693dcd92622651f51ae3e6e69a566cdf6dfe6fe Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 13 Sep 2024 11:11:18 +0200
Subject: [PATCH 2/2] Fix check

---
 code/renderers/react/src/__test__/portable-stories.test.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
index 94de89e093a5..85f33c9a714a 100644
--- a/code/renderers/react/src/__test__/portable-stories.test.tsx
+++ b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -8,7 +8,8 @@ import React from 'react';
 
 import { addons } from 'storybook/internal/preview-api';
 
-import type { Meta } from '@storybook/react';
+import type { ProjectAnnotations } from '@storybook/csf';
+import type { Meta, ReactRenderer } from '@storybook/react';
 
 import * as addonActionsPreview from '@storybook/addon-actions/preview';
 
@@ -124,7 +125,7 @@ describe('projectAnnotations', () => {
     const Story = composeStory(
       ButtonStories.WithActionArgType,
       ButtonStories.default,
-      addonActionsPreview
+      addonActionsPreview as ProjectAnnotations<ReactRenderer>
     );
     expect(Story.args.someActionArg).toHaveProperty('isAction', true);
   });