From 2083ee4b7a2ff9d6b87d44e02715df5abc3fb2d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Olle=20Br=C3=B6ms?= <olle.broms@ewebbyran.se>
Date: Tue, 17 May 2022 19:06:57 +0200
Subject: [PATCH 01/60] Added parent wildcard sortOrder

---
 lib/store/src/storySort.test.ts | 15 +++++++++++++++
 lib/store/src/storySort.ts      |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/lib/store/src/storySort.test.ts b/lib/store/src/storySort.test.ts
index 50976f126bd5..8ffe07a3e2b9 100644
--- a/lib/store/src/storySort.test.ts
+++ b/lib/store/src/storySort.test.ts
@@ -124,4 +124,19 @@ describe('preview.storySort', () => {
     expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
     expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
   });
+
+  it('sorts according to the nested order array with parent wildcard', () => {
+    const sortFn = storySort({
+      order: ['*', ['*', 'b', 'a']],
+      includeNames: true,
+    });
+
+    expect(sortFn(fixture.a_a, fixture.a_b)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_b, fixture.a_a)).toBeLessThan(0);
+    expect(sortFn(fixture.a_c, fixture.a_a)).toBeLessThan(0);
+    expect(sortFn(fixture.a_c, fixture.a_b)).toBeLessThan(0);
+    expect(sortFn(fixture.a_a, fixture.a_c)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_b, fixture.a_c)).toBeGreaterThan(0);
+    expect(sortFn(fixture.a_a, fixture.a_a)).toBe(0);
+  });
 });
diff --git a/lib/store/src/storySort.ts b/lib/store/src/storySort.ts
index ec3d01e3040a..b1d49bfb2865 100644
--- a/lib/store/src/storySort.ts
+++ b/lib/store/src/storySort.ts
@@ -79,7 +79,8 @@ export const storySort =
       }
 
       // If a nested array is provided for a name, use it for ordering.
-      const index = order.indexOf(nameA);
+      let index = order.indexOf(nameA);
+      if (index === -1) index = order.indexOf('*');
       order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : [];
 
       // We'll need to look at the next part of the name.

From 0e2988ca38a54ca7eddae55e11dac45e750383ca Mon Sep 17 00:00:00 2001
From: Daraphista <81943522+Daraphista@users.noreply.github.com>
Date: Sun, 29 May 2022 11:47:09 +0800
Subject: [PATCH 02/60] fix(sidebar): move aria-expanded attribute to button

---
 lib/ui/src/components/sidebar/Tree.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ui/src/components/sidebar/Tree.tsx b/lib/ui/src/components/sidebar/Tree.tsx
index 222df3e2bcf3..20887cae22f2 100644
--- a/lib/ui/src/components/sidebar/Tree.tsx
+++ b/lib/ui/src/components/sidebar/Tree.tsx
@@ -190,7 +190,6 @@ const Node = React.memo<NodeProps>(
           data-ref-id={refId}
           data-item-id={item.id}
           data-nodetype="root"
-          aria-expanded={isExpanded}
         >
           <CollapseButton
             type="button"
@@ -199,6 +198,7 @@ const Node = React.memo<NodeProps>(
               event.preventDefault();
               setExpanded({ ids: [item.id], value: !isExpanded });
             }}
+            aria-expanded={isExpanded}
           >
             <CollapseIcon isExpanded={isExpanded} />
             {item.renderLabel?.(item) || item.name}

From 4c80c21eb0ac64f8b116a1b720ad0a7c0376b0ba Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 10 Jun 2022 22:49:41 +1000
Subject: [PATCH 03/60] Allow a teardown function to be returned from
 `renderToDOM`

---
 app/react/src/client/preview/render.tsx   |  2 ++
 examples/react-ts/.storybook/main.ts      |  2 +-
 examples/react-ts/src/button.tsx          | 19 ++++++++++-----
 examples/react-ts/src/button2.stories.tsx | 10 ++++++++
 examples/react-ts/src/button3.stories.tsx |  9 ++++++++
 lib/preview-web/src/Preview.tsx           |  3 ++-
 lib/preview-web/src/StoryRender.ts        | 28 +++++++++++++++--------
 lib/store/src/types.ts                    | 10 +++++++-
 8 files changed, 65 insertions(+), 18 deletions(-)
 create mode 100644 examples/react-ts/src/button2.stories.tsx
 create mode 100644 examples/react-ts/src/button3.stories.tsx

diff --git a/app/react/src/client/preview/render.tsx b/app/react/src/client/preview/render.tsx
index 94db184a3b6b..e2f305158a58 100644
--- a/app/react/src/client/preview/render.tsx
+++ b/app/react/src/client/preview/render.tsx
@@ -147,4 +147,6 @@ export async function renderToDOM(
   }
 
   await renderElement(element, domElement);
+
+  return () => unmountElement(domElement);
 }
diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts
index 752f85c6ac60..33fb89ce230f 100644
--- a/examples/react-ts/.storybook/main.ts
+++ b/examples/react-ts/.storybook/main.ts
@@ -37,7 +37,7 @@ const config: StorybookConfig = {
   },
   features: {
     postcss: false,
-    // modernInlineRender: true,
+    modernInlineRender: true,
     storyStoreV7: !global.navigator?.userAgent?.match?.('jsdom'),
     buildStoriesJson: true,
     babelModeV7: true,
diff --git a/examples/react-ts/src/button.tsx b/examples/react-ts/src/button.tsx
index 99dddad4e2f7..714b5db4e0f6 100644
--- a/examples/react-ts/src/button.tsx
+++ b/examples/react-ts/src/button.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentType, ButtonHTMLAttributes } from 'react';
+import React, { ComponentType, ButtonHTMLAttributes, useEffect } from 'react';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
@@ -12,8 +12,15 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: ComponentType;
 }
 
-export const Button = ({ label = 'Hello', icon: Icon, ...props }: ButtonProps) => (
-  <button type="button" {...props}>
-    {Icon ? <Icon /> : null} {label}
-  </button>
-);
+export const Button = ({ label = 'Hello', icon: Icon, ...props }: ButtonProps) => {
+  useEffect(() => {
+    const fn = () => console.log(`click ${label}`);
+    global.window.document.querySelector('body')?.addEventListener('click', fn);
+    return () => global.window.document.querySelector('body')?.removeEventListener('click', fn);
+  });
+  return (
+    <button type="button" {...props}>
+      {Icon ? <Icon /> : null} {label}
+    </button>
+  );
+};
diff --git a/examples/react-ts/src/button2.stories.tsx b/examples/react-ts/src/button2.stories.tsx
new file mode 100644
index 000000000000..cfaa6df924d4
--- /dev/null
+++ b/examples/react-ts/src/button2.stories.tsx
@@ -0,0 +1,10 @@
+import { Button } from './button';
+
+export default {
+  component: Button,
+  title: 'button2',
+};
+
+export const one = { args: { label: 'one' } };
+export const two = { args: { label: 'two' } };
+export const three = { args: { label: 'three' } };
diff --git a/examples/react-ts/src/button3.stories.tsx b/examples/react-ts/src/button3.stories.tsx
new file mode 100644
index 000000000000..941d8f436f3b
--- /dev/null
+++ b/examples/react-ts/src/button3.stories.tsx
@@ -0,0 +1,9 @@
+import { Button } from './button';
+
+export default {
+  component: Button,
+  title: 'button3',
+};
+
+export const four = { args: { label: 'four' } };
+export const five = { args: { label: 'five' } };
diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx
index 2eae90f861bf..a206506774f8 100644
--- a/lib/preview-web/src/Preview.tsx
+++ b/lib/preview-web/src/Preview.tsx
@@ -23,6 +23,7 @@ import {
   StoryIndex,
   PromiseLike,
   WebProjectAnnotations,
+  RenderToDOM,
 } from '@storybook/store';
 
 import { StoryRender } from './StoryRender';
@@ -45,7 +46,7 @@ export class Preview<TFramework extends AnyFramework> {
 
   importFn?: ModuleImportFn;
 
-  renderToDOM: WebProjectAnnotations<TFramework>['renderToDOM'];
+  renderToDOM: RenderToDOM<TFramework>;
 
   storyRenders: StoryRender<TFramework>[] = [];
 
diff --git a/lib/preview-web/src/StoryRender.ts b/lib/preview-web/src/StoryRender.ts
index d0ede7cc1223..7bbb7f31f400 100644
--- a/lib/preview-web/src/StoryRender.ts
+++ b/lib/preview-web/src/StoryRender.ts
@@ -6,7 +6,13 @@ import {
   StoryContextForLoaders,
   StoryContext,
 } from '@storybook/csf';
-import { Story, RenderContext, StoryStore } from '@storybook/store';
+import {
+  Story,
+  RenderContext,
+  StoryStore,
+  RenderToDOM,
+  TeardownRenderToDOM,
+} from '@storybook/store';
 import { Channel } from '@storybook/addons';
 import { STORY_RENDER_PHASE_CHANGED, STORY_RENDERED } from '@storybook/core-events';
 
@@ -62,13 +68,12 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
 
   public disableKeyListeners = false;
 
+  private teardownRender: TeardownRenderToDOM = () => {};
+
   constructor(
     public channel: Channel,
     public store: StoryStore<TFramework>,
-    private renderToScreen: (
-      renderContext: RenderContext<TFramework>,
-      canvasElement: HTMLElement
-    ) => void | Promise<void>,
+    private renderToScreen: RenderToDOM<TFramework>,
     private callbacks: RenderContextCallbacks<TFramework>,
     public id: StoryId,
     public viewMode: ViewMode,
@@ -190,9 +195,10 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
         unboundStoryFn,
       };
 
-      await this.runPhase(abortSignal, 'rendering', async () =>
-        this.renderToScreen(renderContext, this.canvasElement)
-      );
+      await this.runPhase(abortSignal, 'rendering', async () => {
+        this.teardownRender =
+          (await this.renderToScreen(renderContext, this.canvasElement)) || (() => {});
+      });
       this.notYetRendered = false;
       if (abortSignal.aborted) return;
 
@@ -241,7 +247,11 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
     // Wait several ticks that may be needed to handle the abort, then try again.
     // Note that there's a max of 5 nested timeouts before they're no longer "instant".
     for (let i = 0; i < 3; i += 1) {
-      if (!this.isPending()) return;
+      if (!this.isPending()) {
+        // eslint-disable-next-line no-await-in-loop
+        await this.teardownRender();
+        return;
+      }
       // eslint-disable-next-line no-await-in-loop
       await new Promise((resolve) => setTimeout(resolve, 0));
     }
diff --git a/lib/store/src/types.ts b/lib/store/src/types.ts
index d52a0f2588e6..6271fab4cb5c 100644
--- a/lib/store/src/types.ts
+++ b/lib/store/src/types.ts
@@ -29,9 +29,17 @@ export type ModuleExports = Record<string, any>;
 export type PromiseLike<T> = Promise<T> | SynchronousPromise<T>;
 export type ModuleImportFn = (path: Path) => PromiseLike<ModuleExports>;
 
+type MaybePromise<T> = Promise<T> | T;
+
+export type TeardownRenderToDOM = () => MaybePromise<void>;
+export type RenderToDOM<TFramework extends AnyFramework> = (
+  context: RenderContext<TFramework>,
+  element: Element
+) => MaybePromise<void | TeardownRenderToDOM>;
+
 export type WebProjectAnnotations<TFramework extends AnyFramework> =
   ProjectAnnotations<TFramework> & {
-    renderToDOM?: (context: RenderContext<TFramework>, element: Element) => Promise<void> | void;
+    renderToDOM?: RenderToDOM<TFramework>;
   };
 
 export type NormalizedProjectAnnotations<TFramework extends AnyFramework = AnyFramework> =

From 06e4c29adc194c49b81ffc93427e35c53cebffee Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Wed, 15 Jun 2022 19:10:36 +1000
Subject: [PATCH 04/60] Add integration tests for teardown function

---
 addons/docs/src/blocks/Story.tsx           |   1 +
 lib/preview-web/src/PreviewWeb.mockdata.ts |   5 +-
 lib/preview-web/src/PreviewWeb.test.ts     | 134 ++++++++++++++++-----
 3 files changed, 111 insertions(+), 29 deletions(-)

diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index e61fcb321512..877e3b89cfb1 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -120,6 +120,7 @@ function makeGate(): [Promise<void>, () => void] {
 }
 
 const Story: FunctionComponent<StoryProps> = (props) => {
+  console.log('Story');
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
   const storyRef = useRef();
diff --git a/lib/preview-web/src/PreviewWeb.mockdata.ts b/lib/preview-web/src/PreviewWeb.mockdata.ts
index ae2eadf8c707..2bca04fe2ac2 100644
--- a/lib/preview-web/src/PreviewWeb.mockdata.ts
+++ b/lib/preview-web/src/PreviewWeb.mockdata.ts
@@ -7,7 +7,7 @@ import {
   STORY_RENDER_PHASE_CHANGED,
   STORY_THREW_EXCEPTION,
 } from '@storybook/core-events';
-import { StoryIndex } from '@storybook/store';
+import { StoryIndex, TeardownRenderToDOM } from '@storybook/store';
 import { RenderPhase } from './PreviewWeb';
 
 export const componentOneExports = {
@@ -32,12 +32,13 @@ export const importFn = jest.fn(async (path) => {
   return path === './src/ComponentOne.stories.js' ? componentOneExports : componentTwoExports;
 });
 
+export const teardownRenderToDOM: jest.Mock<TeardownRenderToDOM> = jest.fn();
 export const projectAnnotations = {
   globals: { a: 'b' },
   globalTypes: {},
   decorators: [jest.fn((s) => s())],
   render: jest.fn(),
-  renderToDOM: jest.fn(),
+  renderToDOM: jest.fn().mockReturnValue(teardownRenderToDOM),
 };
 export const getProjectAnnotations = () => projectAnnotations;
 
diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts
index 8d58970be041..4620b661ebe5 100644
--- a/lib/preview-web/src/PreviewWeb.test.ts
+++ b/lib/preview-web/src/PreviewWeb.test.ts
@@ -44,6 +44,7 @@ import {
   waitForRender,
   waitForQuiescence,
   waitForRenderPhase,
+  teardownRenderToDOM,
 } from './PreviewWeb.mockdata';
 
 jest.mock('./WebView');
@@ -120,7 +121,8 @@ beforeEach(() => {
   componentOneExports.default.loaders[0].mockReset().mockImplementation(async () => ({ l: 7 }));
   componentOneExports.default.parameters.docs.container.mockClear();
   componentOneExports.a.play.mockReset();
-  projectAnnotations.renderToDOM.mockReset();
+  teardownRenderToDOM.mockReset();
+  projectAnnotations.renderToDOM.mockReset().mockReturnValue(teardownRenderToDOM);
   projectAnnotations.render.mockClear();
   projectAnnotations.decorators[0].mockClear();
   (ReactDOM.render as any as jest.Mock<typeof ReactDOM.render>)
@@ -470,7 +472,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if renderToDOM throws', async () => {
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+        projectAnnotations.renderToDOM.mockImplementation(() => {
           throw error;
         });
 
@@ -519,9 +521,7 @@ describe('PreviewWeb', () => {
 
       it('renders error if the story calls showError', async () => {
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
-          context.showError(error)
-        );
+        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
 
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
@@ -535,7 +535,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if the story calls showException', async () => {
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+        projectAnnotations.renderToDOM.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -562,7 +562,7 @@ describe('PreviewWeb', () => {
 
       it('does not show error display if the render function throws IGNORED_EXCEPTION', async () => {
         document.location.search = '?id=component-one--a';
-        projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+        projectAnnotations.renderToDOM.mockImplementation(() => {
           throw IGNORED_EXCEPTION;
         });
 
@@ -837,7 +837,7 @@ describe('PreviewWeb', () => {
         const [gate, openGate] = createGate();
 
         document.location.search = '?id=component-one--a';
-        projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
+        projectAnnotations.renderToDOM.mockImplementation(async () => gate);
 
         await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
         await waitForRenderPhase('rendering');
@@ -876,7 +876,7 @@ describe('PreviewWeb', () => {
 
       it('works if it is called directly from inside non async renderToDOM', async () => {
         document.location.search = '?id=component-one--a';
-        projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+        projectAnnotations.renderToDOM.mockImplementation(() => {
           emitter.emit(UPDATE_STORY_ARGS, {
             storyId: 'component-one--a',
             updatedArgs: { new: 'arg' },
@@ -912,7 +912,7 @@ describe('PreviewWeb', () => {
         componentOneExports.a.play.mockImplementationOnce(async () => gate);
 
         const renderToDOMCalled = new Promise((resolve) => {
-          projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+          projectAnnotations.renderToDOM.mockImplementation(() => {
             resolve(null);
           });
         });
@@ -1296,7 +1296,7 @@ describe('PreviewWeb', () => {
       const [gate, openGate] = createGate();
 
       document.location.search = '?id=component-one--a';
-      projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
+      projectAnnotations.renderToDOM.mockImplementation(async () => gate);
       await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
       await waitForRenderPhase('rendering');
 
@@ -1463,6 +1463,20 @@ describe('PreviewWeb', () => {
         expect(projectAnnotations.renderToDOM).not.toHaveBeenCalled();
       });
 
+      it('does NOT call renderToDOMs teardown', async () => {
+        document.location.search = '?id=component-one--a';
+        await createAndRenderPreview();
+
+        projectAnnotations.renderToDOM.mockClear();
+        emitter.emit(SET_CURRENT_STORY, {
+          storyId: 'component-one--a',
+          viewMode: 'story',
+        });
+        await waitForSetCurrentStory();
+
+        expect(teardownRenderToDOM).not.toHaveBeenCalled();
+      });
+
       // For https://github.com/storybookjs/storybook/issues/17214
       it('does NOT render a second time if preparing', async () => {
         document.location.search = '?id=component-one--a';
@@ -1510,6 +1524,20 @@ describe('PreviewWeb', () => {
     });
 
     describe('when changing story in story viewMode', () => {
+      it('calls renderToDOMs teardown', async () => {
+        document.location.search = '?id=component-one--a';
+        await createAndRenderPreview();
+
+        projectAnnotations.renderToDOM.mockClear();
+        emitter.emit(SET_CURRENT_STORY, {
+          storyId: 'component-one--b',
+          viewMode: 'story',
+        });
+        await waitForSetCurrentStory();
+
+        expect(teardownRenderToDOM).toHaveBeenCalled();
+      });
+
       it('updates URL', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
@@ -1645,7 +1673,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+        projectAnnotations.renderToDOM.mockImplementation(() => {
           throw error;
         });
 
@@ -1666,9 +1694,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
-          context.showError(error)
-        );
+        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
 
         mockChannel.emit.mockClear();
         emitter.emit(SET_CURRENT_STORY, {
@@ -1690,7 +1716,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+        projectAnnotations.renderToDOM.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -1811,7 +1837,7 @@ describe('PreviewWeb', () => {
           const [gate, openGate] = createGate();
 
           document.location.search = '?id=component-one--a';
-          projectAnnotations.renderToDOM.mockImplementationOnce(async () => gate);
+          projectAnnotations.renderToDOM.mockImplementation(async () => gate);
           await new PreviewWeb().initialize({ importFn, getProjectAnnotations });
           await waitForRenderPhase('rendering');
 
@@ -1937,6 +1963,19 @@ describe('PreviewWeb', () => {
     });
 
     describe('when changing from story viewMode to docs', () => {
+      it('calls renderToDOMs teardown', async () => {
+        document.location.search = '?id=component-one--a';
+        await createAndRenderPreview();
+
+        emitter.emit(SET_CURRENT_STORY, {
+          storyId: 'component-one--a',
+          viewMode: 'docs',
+        });
+        await waitForSetCurrentStory();
+
+        expect(teardownRenderToDOM).toHaveBeenCalled();
+      });
+
       it('updates URL', async () => {
         document.location.search = '?id=component-one--a';
         await createAndRenderPreview();
@@ -2199,7 +2238,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+        projectAnnotations.renderToDOM.mockImplementation(() => {
           throw error;
         });
 
@@ -2217,9 +2256,7 @@ describe('PreviewWeb', () => {
 
       it('renders error if the story calls showError', async () => {
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
-          context.showError(error)
-        );
+        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
 
         document.location.search = '?id=component-one--a&viewMode=docs';
         const preview = await createAndRenderPreview();
@@ -2241,7 +2278,7 @@ describe('PreviewWeb', () => {
 
       it('renders exception if the story calls showException', async () => {
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+        projectAnnotations.renderToDOM.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -2347,6 +2384,17 @@ describe('PreviewWeb', () => {
           : componentTwoExports;
       });
 
+      it('calls renderToDOMs teardown', async () => {
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+        mockChannel.emit.mockClear();
+
+        preview.onStoriesChanged({ importFn: newImportFn });
+        await waitForRender();
+
+        expect(teardownRenderToDOM).toHaveBeenCalled();
+      });
+
       it('does not emit STORY_UNCHANGED', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
@@ -2491,7 +2539,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce(() => {
+        projectAnnotations.renderToDOM.mockImplementation(() => {
           throw error;
         });
 
@@ -2508,9 +2556,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = { title: 'title', description: 'description' };
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
-          context.showError(error)
-        );
+        projectAnnotations.renderToDOM.mockImplementation((context) => context.showError(error));
 
         mockChannel.emit.mockClear();
         preview.onStoriesChanged({ importFn: newImportFn });
@@ -2528,7 +2574,7 @@ describe('PreviewWeb', () => {
         const preview = await createAndRenderPreview();
 
         const error = new Error('error');
-        projectAnnotations.renderToDOM.mockImplementationOnce((context) =>
+        projectAnnotations.renderToDOM.mockImplementation((context) =>
           context.showException(error)
         );
 
@@ -2629,6 +2675,17 @@ describe('PreviewWeb', () => {
           : newComponentTwoExports;
       });
 
+      it('does NOT call renderToDOMs teardown', async () => {
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+
+        mockChannel.emit.mockClear();
+        preview.onStoriesChanged({ importFn: newImportFn });
+        await waitForEvents([STORY_UNCHANGED]);
+
+        expect(teardownRenderToDOM).not.toHaveBeenCalled();
+      });
+
       it('emits STORY_UNCHANGED', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
@@ -2754,6 +2811,17 @@ describe('PreviewWeb', () => {
         },
       };
 
+      it('calls renderToDOMs teardown', async () => {
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+
+        mockChannel.emit.mockClear();
+        preview.onStoriesChanged({ importFn: newImportFn, storyIndex: newStoryIndex });
+        await waitForEvents([STORY_MISSING]);
+
+        expect(teardownRenderToDOM).toHaveBeenCalled();
+      });
+
       it('renders loading error', async () => {
         document.location.search = '?id=component-one--a';
         const preview = await createAndRenderPreview();
@@ -2920,6 +2988,18 @@ describe('PreviewWeb', () => {
       });
     });
 
+    it('calls renderToDOMs teardown', async () => {
+      document.location.search = '?id=component-one--a';
+      const preview = await createAndRenderPreview();
+
+      projectAnnotations.renderToDOM.mockClear();
+      mockChannel.emit.mockClear();
+      preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations });
+      await waitForRender();
+
+      expect(teardownRenderToDOM).toHaveBeenCalled();
+    });
+
     it('rerenders the current story with new global meta-generated context', async () => {
       document.location.search = '?id=component-one--a';
       const preview = await createAndRenderPreview();

From 95d3f32bd184faa49cd8073ff5a4b67a0ccf8bfe Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 16 Jun 2022 12:24:30 +1000
Subject: [PATCH 05/60] Update addons/docs/src/blocks/Story.tsx

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>
---
 addons/docs/src/blocks/Story.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index 877e3b89cfb1..e61fcb321512 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -120,7 +120,6 @@ function makeGate(): [Promise<void>, () => void] {
 }
 
 const Story: FunctionComponent<StoryProps> = (props) => {
-  console.log('Story');
   const context = useContext(DocsContext);
   const channel = addons.getChannel();
   const storyRef = useRef();

From 3a576721975b079ba02260e0db6065605668cb0d Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Fri, 17 Jun 2022 13:48:45 +1000
Subject: [PATCH 06/60] Update snapshots

---
 .../src/__snapshots__/storyshots.test.ts.snap | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
index 409f2a8ab57e..a3430706744a 100644
--- a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
+++ b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
@@ -4041,6 +4041,51 @@ exports[`Storyshots Demo/Examples / Emoji Button With Args 1`] = `
 </button>
 `;
 
+exports[`Storyshots Demo/button2 One 1`] = `
+<button
+  type="button"
+>
+   
+  one
+</button>
+`;
+
+exports[`Storyshots Demo/button2 Three 1`] = `
+<button
+  type="button"
+>
+   
+  three
+</button>
+`;
+
+exports[`Storyshots Demo/button2 Two 1`] = `
+<button
+  type="button"
+>
+   
+  two
+</button>
+`;
+
+exports[`Storyshots Demo/button3 Five 1`] = `
+<button
+  type="button"
+>
+   
+  five
+</button>
+`;
+
+exports[`Storyshots Demo/button3 Four 1`] = `
+<button
+  type="button"
+>
+   
+  four
+</button>
+`;
+
 exports[`Storyshots Docs/ButtonMdx Basic 1`] = `
 <button
   type="button"

From accb633ec8b6469f77abc940efc25708bd2ef2f8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 17 Jun 2022 09:22:26 +0200
Subject: [PATCH 07/60] Fix callsById for Node in an array

---
 .../AccountForm/addon-interactions.stories.tsx   |  3 +++
 .../interactions/src/components/MethodCall.tsx   | 16 +++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
index d3df3f635f2f..d7f81dacd007 100644
--- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
+++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
@@ -35,6 +35,9 @@ export const Demo: CSF2Story = (args) => (
 Demo.play = async ({ args, canvasElement }) => {
   await userEvent.click(within(canvasElement).getByRole('button'));
   await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
+  await expect([{ name: 'John', age: 42 }]).toEqual(
+    expect.arrayContaining([expect.objectContaining({ name: 'John' })])
+  );
 };
 
 export const FindBy: CSF2Story = (args) => {
diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx
index fa792dce56aa..824a16cf88e7 100644
--- a/addons/interactions/src/components/MethodCall.tsx
+++ b/addons/interactions/src/components/MethodCall.tsx
@@ -112,7 +112,7 @@ export const Node = ({
     case value === undefined:
       return <UndefinedNode {...props} />;
     case Array.isArray(value):
-      return <ArrayNode {...props} value={value} />;
+      return <ArrayNode {...props} value={value} callsById={callsById} />;
     case typeof value === 'string':
       return <StringNode {...props} value={value} />;
     case typeof value === 'number':
@@ -191,12 +191,22 @@ export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
   );
 };
 
-export const ArrayNode = ({ value, nested = false }: { value: any[]; nested?: boolean }) => {
+export const ArrayNode = ({
+  value,
+  nested = false,
+  callsById,
+}: {
+  value: any[];
+  nested?: boolean;
+  callsById?: Map<Call['id'], Call>;
+}) => {
   const colors = useThemeColors();
   if (nested) {
     return <span style={{ color: colors.base }}>[…]</span>;
   }
-  const nodes = value.slice(0, 3).map((v) => <Node key={v} value={v} nested />);
+  const nodes = value
+    .slice(0, 3)
+    .map((v) => <Node key={v} value={v} nested callsById={callsById} />);
   const nodelist = interleave(nodes, <span>, </span>);
   if (value.length <= 3) {
     return <span style={{ color: colors.base }}>[{nodelist}]</span>;

From 5a7d04c78e71153027ece59b974068666ff0c4b8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 17 Jun 2022 09:30:29 +0200
Subject: [PATCH 08/60] Address key prop warning

---
 .../components/AccountForm/addon-interactions.stories.tsx    | 5 ++++-
 addons/interactions/src/components/MethodCall.tsx            | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
index d7f81dacd007..f1d8aace3951 100644
--- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
+++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
@@ -36,7 +36,10 @@ Demo.play = async ({ args, canvasElement }) => {
   await userEvent.click(within(canvasElement).getByRole('button'));
   await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
   await expect([{ name: 'John', age: 42 }]).toEqual(
-    expect.arrayContaining([expect.objectContaining({ name: 'John' })])
+    expect.arrayContaining([
+      expect.objectContaining({ name: 'John' }),
+      expect.objectContaining({ age: 42 }),
+    ])
   );
 };
 
diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx
index 824a16cf88e7..871068cea0ef 100644
--- a/addons/interactions/src/components/MethodCall.tsx
+++ b/addons/interactions/src/components/MethodCall.tsx
@@ -206,7 +206,7 @@ export const ArrayNode = ({
   }
   const nodes = value
     .slice(0, 3)
-    .map((v) => <Node key={v} value={v} nested callsById={callsById} />);
+    .map((v) => <Node key={JSON.stringify(v)} value={v} nested callsById={callsById} />);
   const nodelist = interleave(nodes, <span>, </span>);
   if (value.length <= 3) {
     return <span style={{ color: colors.base }}>[{nodelist}]</span>;

From 383b5b50d2c88bfbd866572c14ff6c90dabcb739 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 6 Jun 2022 13:02:24 +0200
Subject: [PATCH 09/60] Fixed PnP compatibility for bundled ui and router
 packages

---
 lib/router/package.json | 2 +-
 lib/ui/package.json     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/router/package.json b/lib/router/package.json
index 89defca0d1d0..89cf5867d002 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "@storybook/client-logger": "6.5.0-rc.1",
     "core-js": "^3.8.2",
+    "qs": "^6.10.0",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
@@ -50,7 +51,6 @@
     "history": "5.0.0",
     "lodash": "^4.17.21",
     "memoizerific": "^1.11.3",
-    "qs": "^6.10.0",
     "react-router": "6.0.2",
     "react-router-dom": "6.0.2",
     "ts-dedent": "^2.0.0",
diff --git a/lib/ui/package.json b/lib/ui/package.json
index b99d3582d1b7..9bf40dd1ff8c 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -50,6 +50,7 @@
     "@storybook/semver": "^7.3.2",
     "@storybook/theming": "6.5.0-rc.1",
     "core-js": "^3.8.2",
+    "qs": "^6.10.0",
     "regenerator-runtime": "^0.13.7",
     "resolve-from": "^5.0.0"
   },
@@ -67,7 +68,6 @@
     "markdown-to-jsx": "^7.1.3",
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
-    "qs": "^6.10.0",
     "react-draggable": "^4.4.3",
     "react-helmet-async": "^1.0.7",
     "react-sizeme": "^3.0.1",

From d7cb9899fa4693fc2b0049a024c7c2e0525e3251 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Mon, 6 Jun 2022 14:05:04 +0200
Subject: [PATCH 10/60] chore(CI): reenable cra pnp tests

---
 .circleci/config.yml | 45 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index cd947ee9c6e0..6dcb72899d0d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -265,32 +265,31 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
-      # TODO: we disabled this one because it keeps failing, we should fix it, and enable it again!
-      # - attach_workspace:
-      #     at: .
-      # - run:
-      #     name: Running local registry
-      #     command: yarn local-registry --port 6000 --open
-      #     background: true
-      # - run:
-      #     name: Wait for registry
-      #     command: yarn wait-on http://localhost:6000
-      # - run:
-      #     name: run e2e tests cra
-      #     command: yarn test:e2e-framework --pnp cra
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: Wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: run e2e tests cra
+          command: yarn test:e2e-framework --pnp cra
       # - run:
       #     name: run e2e tests vue
       #     command: yarn test:e2e-framework --pnp sfcVue
-      # - run:
-      #     name: prep artifacts
-      #     when: always
-      #     command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
-      # - store_artifacts:
-      #     path: /tmp/cypress-record
-      #     destination: cypress
-      # - store_artifacts:
-      #     path: /tmp/storybook-e2e-testing-out.zip
-      #     destination: e2e
+      - run:
+          name: prep artifacts
+          when: always
+          command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
+      - store_artifacts:
+          path: /tmp/cypress-record
+          destination: cypress
+      - store_artifacts:
+          path: /tmp/storybook-e2e-testing-out.zip
+          destination: e2e
   e2e-tests-examples:
     executor:
       class: small

From d66cb5375746d35661e880ab0c3a8f0891fdf5f6 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 7 Jun 2022 11:25:23 +0200
Subject: [PATCH 11/60] fix: change the way presets are required

---
 lib/core-common/src/presets.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/core-common/src/presets.ts b/lib/core-common/src/presets.ts
index 24093df15337..886108625bd5 100644
--- a/lib/core-common/src/presets.ts
+++ b/lib/core-common/src/presets.ts
@@ -97,7 +97,7 @@ export const resolveAddonName = (
   const managerFile = safeResolve(`${path}/manager`);
   const registerFile = safeResolve(`${path}/register`) || safeResolve(`${path}/register-panel`);
   const previewFile = safeResolve(`${path}/preview`);
-  const presetFile = safeResolve(`${path}/preset`);
+  const presetFile = r(`${path}/preset`);
 
   if (!(managerFile || previewFile) && presetFile) {
     return {

From d2928dede11da15dcbf559a4b1e4b14e06566640 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 9 Jun 2022 12:09:07 +0200
Subject: [PATCH 12/60] telemetry: strip out preset from addon name

also move getStorybookMetadata method to the bottom so it's used after the definition
of computeStorybookMetadata
---
 lib/telemetry/src/storybook-metadata.test.ts | 13 ++++++--
 lib/telemetry/src/storybook-metadata.ts      | 34 ++++++++++----------
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/lib/telemetry/src/storybook-metadata.test.ts b/lib/telemetry/src/storybook-metadata.test.ts
index 0ccaeae27d95..d3366777160c 100644
--- a/lib/telemetry/src/storybook-metadata.test.ts
+++ b/lib/telemetry/src/storybook-metadata.test.ts
@@ -82,12 +82,17 @@ describe('await computeStorybookMetadata', () => {
         devDependencies: {
           '@storybook/react': 'x.y.z',
           '@storybook/addon-essentials': 'x.x.x',
-          'storybook-addon-deprecated': 'x.x.x',
+          '@storybook/addon-knobs': 'x.x.y',
+          'storybook-addon-deprecated': 'x.x.z',
         },
       },
       mainConfig: {
         ...mainJsMock,
-        addons: ['@storybook/addon-essentials', 'storybook-addon-deprecated/register'],
+        addons: [
+          '@storybook/addon-essentials',
+          'storybook-addon-deprecated/register',
+          '@storybook/addon-knobs/preset',
+        ],
       },
     });
 
@@ -97,6 +102,10 @@ describe('await computeStorybookMetadata', () => {
           "options": undefined,
           "version": "x.x.x",
         },
+        "@storybook/addon-knobs": Object {
+          "options": undefined,
+          "version": "x.x.x",
+        },
         "storybook-addon-deprecated": Object {
           "options": undefined,
           "version": "x.x.x",
diff --git a/lib/telemetry/src/storybook-metadata.ts b/lib/telemetry/src/storybook-metadata.ts
index 0a82e61f436b..562cb132e406 100644
--- a/lib/telemetry/src/storybook-metadata.ts
+++ b/lib/telemetry/src/storybook-metadata.ts
@@ -12,22 +12,6 @@ import type { StorybookMetadata, Dependency, StorybookAddon } from './types';
 import { getActualPackageVersion, getActualPackageVersions } from './package-versions';
 import { getMonorepoType } from './get-monorepo-type';
 
-let cachedMetadata: StorybookMetadata;
-export const getStorybookMetadata = async (_configDir: string) => {
-  if (cachedMetadata) {
-    return cachedMetadata;
-  }
-
-  const packageJson = readPkgUp.sync({ cwd: process.cwd() }).packageJson as PackageJson;
-  const configDir =
-    (_configDir ||
-      (getStorybookConfiguration(packageJson.scripts.storybook, '-c', '--config-dir') as string)) ??
-    '.storybook';
-  const mainConfig = loadMainConfig({ configDir });
-  cachedMetadata = await computeStorybookMetadata({ mainConfig, packageJson });
-  return cachedMetadata;
-};
-
 export const metaFrameworks = {
   next: 'Next',
   'react-scripts': 'CRA',
@@ -147,7 +131,7 @@ export const computeStorybookMetadata = async ({
       let result;
       let options;
       if (typeof addon === 'string') {
-        result = addon.replace('/register', '');
+        result = addon.replace('/register', '').replace('/preset', '');
       } else {
         options = addon.options;
         result = addon.name;
@@ -204,3 +188,19 @@ export const computeStorybookMetadata = async ({
     hasStorybookEslint,
   };
 };
+
+let cachedMetadata: StorybookMetadata;
+export const getStorybookMetadata = async (_configDir: string) => {
+  if (cachedMetadata) {
+    return cachedMetadata;
+  }
+
+  const packageJson = readPkgUp.sync({ cwd: process.cwd() }).packageJson as PackageJson;
+  const configDir =
+    (_configDir ||
+      (getStorybookConfiguration(packageJson.scripts.storybook, '-c', '--config-dir') as string)) ??
+    '.storybook';
+  const mainConfig = loadMainConfig({ configDir });
+  cachedMetadata = await computeStorybookMetadata({ mainConfig, packageJson });
+  return cachedMetadata;
+};

From 31aef64e964784b862f7871d676a9fc5e374a97a Mon Sep 17 00:00:00 2001
From: joshwooding <12938082+joshwooding@users.noreply.github.com>
Date: Sun, 12 Jun 2022 00:40:32 +0100
Subject: [PATCH 13/60] Warn when storyName usage is detected in CSF3 stories

---
 lib/csf-tools/src/CsfFile.test.ts | 19 +++++++++++++++++++
 lib/csf-tools/src/CsfFile.ts      |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/lib/csf-tools/src/CsfFile.test.ts b/lib/csf-tools/src/CsfFile.test.ts
index 6bfa32456104..80d2bc2ca052 100644
--- a/lib/csf-tools/src/CsfFile.test.ts
+++ b/lib/csf-tools/src/CsfFile.test.ts
@@ -613,5 +613,24 @@ describe('CsfFile', () => {
               __id: foo-bar--a
       `);
     });
+
+    it('Object export with storyName', () => {
+      const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
+
+      parse(
+        dedent`
+        export default { title: 'foo/bar' };
+        export const A = {
+          storyName: 'Apple'
+        }
+      `,
+        true
+      );
+
+      expect(consoleWarnMock).toHaveBeenCalledWith(
+        'Unexpected usage of "storyName" in "A". Please use "name" instead.'
+      );
+      consoleWarnMock.mockRestore();
+    });
   });
 });
diff --git a/lib/csf-tools/src/CsfFile.ts b/lib/csf-tools/src/CsfFile.ts
index 3d38d6a2f93d..88a8fbd5eec3 100644
--- a/lib/csf-tools/src/CsfFile.ts
+++ b/lib/csf-tools/src/CsfFile.ts
@@ -268,6 +268,10 @@ export class CsfFile {
                         __isArgsStory = isArgsStory(p.value as t.Expression, parent, self);
                       } else if (p.key.name === 'name' && t.isStringLiteral(p.value)) {
                         name = p.value.value;
+                      } else if (p.key.name === 'storyName' && t.isStringLiteral(p.value)) {
+                        logger.warn(
+                          `Unexpected usage of "storyName" in "${exportName}". Please use "name" instead.`
+                        );
                       }
                       self._storyAnnotations[exportName][p.key.name] = p.value;
                     }

From f1ae95431a2d6dfec9a8b73abea4e43e0bc7b368 Mon Sep 17 00:00:00 2001
From: joshwooding <12938082+joshwooding@users.noreply.github.com>
Date: Tue, 31 May 2022 01:08:22 +0100
Subject: [PATCH 14/60] Move memoizerific to dependencies in theming

---
 lib/theming/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/theming/package.json b/lib/theming/package.json
index 06c888cb2cc8..44a904e1d05f 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "@storybook/client-logger": "6.5.0-rc.1",
     "core-js": "^3.8.2",
+    "memoizerific": "^1.11.3",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
@@ -52,7 +53,6 @@
     "@types/node": "^14.14.20 || ^16.0.0",
     "deep-object-diff": "^1.1.0",
     "global": "^4.4.0",
-    "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "ts-dedent": "^2.0.0",
     "ts-node": "^10.4.0"

From 833594248a6d592eb6b19dcf2ecb8f89155f08f2 Mon Sep 17 00:00:00 2001
From: joshwooding <12938082+joshwooding@users.noreply.github.com>
Date: Tue, 31 May 2022 01:10:09 +0100
Subject: [PATCH 15/60] Move memoizerific and qs to dependencies in router

---
 lib/router/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/router/package.json b/lib/router/package.json
index 89cf5867d002..5692236d313f 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "@storybook/client-logger": "6.5.0-rc.1",
     "core-js": "^3.8.2",
+    "memoizerific": "^1.11.3",
     "qs": "^6.10.0",
     "regenerator-runtime": "^0.13.7"
   },
@@ -50,7 +51,6 @@
     "global": "^4.4.0",
     "history": "5.0.0",
     "lodash": "^4.17.21",
-    "memoizerific": "^1.11.3",
     "react-router": "6.0.2",
     "react-router-dom": "6.0.2",
     "ts-dedent": "^2.0.0",

From d410bd9ba73e66c86fb76fd88a60e2ad89f3d3dd Mon Sep 17 00:00:00 2001
From: joshwooding <12938082+joshwooding@users.noreply.github.com>
Date: Tue, 31 May 2022 01:15:38 +0100
Subject: [PATCH 16/60] Move memoizerific and qs to dependencies in ui

---
 lib/ui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ui/package.json b/lib/ui/package.json
index 9bf40dd1ff8c..8f3566513981 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -50,6 +50,7 @@
     "@storybook/semver": "^7.3.2",
     "@storybook/theming": "6.5.0-rc.1",
     "core-js": "^3.8.2",
+    "memoizerific": "^1.11.3",
     "qs": "^6.10.0",
     "regenerator-runtime": "^0.13.7",
     "resolve-from": "^5.0.0"
@@ -66,7 +67,6 @@
     "global": "^4.4.0",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.1.3",
-    "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "react-draggable": "^4.4.3",
     "react-helmet-async": "^1.0.7",

From e1d7f08ae4031c2556219cba48d200f74e9a0326 Mon Sep 17 00:00:00 2001
From: joshwooding <12938082+joshwooding@users.noreply.github.com>
Date: Mon, 13 Jun 2022 12:05:28 +0100
Subject: [PATCH 17/60] Core: Fix process is not defined when using components

---
 lib/components/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/package.json b/lib/components/package.json
index 07ae352266b1..eef2e017f8e4 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -45,6 +45,7 @@
     "@storybook/theming": "6.5.0-rc.1",
     "@types/react-syntax-highlighter": "11.0.5",
     "core-js": "^3.8.2",
+    "memoizerific": "^1.11.3",
     "qs": "^6.10.0",
     "react-syntax-highlighter": "^15.4.5",
     "regenerator-runtime": "^0.13.7",
@@ -61,7 +62,6 @@
     "jest": "^26.6.3",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.1.3",
-    "memoizerific": "^1.11.3",
     "overlayscrollbars": "^1.13.1",
     "polished": "^4.2.2",
     "prettier": ">=2.2.1 <=2.3.0",

From d35bc155c0898de463b3728a2fdb7e2e88296c0b Mon Sep 17 00:00:00 2001
From: Matt Evenson <mevenson@usc.edu>
Date: Sun, 12 Jun 2022 21:55:52 -0700
Subject: [PATCH 18/60] Remove duplicate statement

`title: 'DocumentScreen',` appears twice in the component meta.
---
 docs/snippets/react/page-story-with-args-composition.ts.mdx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/snippets/react/page-story-with-args-composition.ts.mdx b/docs/snippets/react/page-story-with-args-composition.ts.mdx
index a088dfda54fe..be960adff652 100644
--- a/docs/snippets/react/page-story-with-args-composition.ts.mdx
+++ b/docs/snippets/react/page-story-with-args-composition.ts.mdx
@@ -18,7 +18,6 @@ export default {
   */
   title: 'DocumentScreen',
   component: DocumentScreen,
-  title: 'DocumentScreen',
 } as ComponentMeta<typeof DocumentScreen>;
 
 
@@ -30,4 +29,4 @@ Simple.args = {
   document: DocumentHeader.Simple.args.document,
   subdocuments: DocumentList.Simple.args.documents,
 };
-```
\ No newline at end of file
+```

From f92dd04755bb40178d3e0200197bebe738f18719 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 7 Jun 2022 09:51:34 +0200
Subject: [PATCH 19/60] bundle the syntax highlighter again inside
 lib/components

---
 lib/components/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/package.json b/lib/components/package.json
index eef2e017f8e4..e57b79742407 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -43,11 +43,9 @@
     "@storybook/client-logger": "6.5.0-rc.1",
     "@storybook/csf": "0.0.2--canary.4566f4d.1",
     "@storybook/theming": "6.5.0-rc.1",
-    "@types/react-syntax-highlighter": "11.0.5",
     "core-js": "^3.8.2",
     "memoizerific": "^1.11.3",
     "qs": "^6.10.0",
-    "react-syntax-highlighter": "^15.4.5",
     "regenerator-runtime": "^0.13.7",
     "util-deprecate": "^1.0.2"
   },
@@ -55,6 +53,7 @@
     "@popperjs/core": "^2.6.0",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
+    "@types/react-syntax-highlighter": "11.0.5",
     "color-convert": "^2.0.1",
     "css": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
@@ -68,6 +67,7 @@
     "prop-types": "^15.7.2",
     "react-colorful": "^5.1.2",
     "react-popper-tooltip": "^3.1.1",
+    "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.0",
     "ts-dedent": "^2.0.0",
     "ts-node": "^10.4.0"

From 2e9fb447cde92af39ae5762a127a2a5099900a44 Mon Sep 17 00:00:00 2001
From: Alex Guja <60717961+alexguja@users.noreply.github.com>
Date: Wed, 15 Jun 2022 14:13:01 +0200
Subject: [PATCH 20/60] Update test-runner.md

Make code snippet consistent with the others on the page. Typically yarn is shown before npm, so this change will make the code snippet consistent with the rest.
---
 docs/writing-tests/test-runner.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 5502adfbcd15..1940f87630c0 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -43,8 +43,9 @@ Start your Storybook with:
 <CodeSnippets
   paths={[
     'angular/storybook-run-dev.with-builder.js.mdx',
-    'common/storybook-run-dev.npm.js.mdx',
     'common/storybook-run-dev.yarn.js.mdx',
+    'common/storybook-run-dev.npm.js.mdx',
+
   ]}
 />
 
@@ -302,4 +303,4 @@ As the test runner is based on Playwright, you might need to use specific docker
 - [Accessibility tests](./accessibility-testing.md) for accessibility
 - [Interaction tests](./interaction-testing.md) for user behavior simulation
 - [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
-- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
\ No newline at end of file
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools

From f19b470e7030d95773b2a639d63c6cdeeb606c08 Mon Sep 17 00:00:00 2001
From: Deen <deen@echobind.com>
Date: Tue, 14 Jun 2022 13:17:40 -0500
Subject: [PATCH 21/60] fix: display skip to sidebar button

---
 lib/ui/src/components/preview/FramesRenderer.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/ui/src/components/preview/FramesRenderer.tsx b/lib/ui/src/components/preview/FramesRenderer.tsx
index c8ccbae69d5e..4d384b3c968a 100644
--- a/lib/ui/src/components/preview/FramesRenderer.tsx
+++ b/lib/ui/src/components/preview/FramesRenderer.tsx
@@ -20,6 +20,7 @@ const SkipToSidebarLink = styled(Button)(({ theme }) => ({
   display: 'none',
   '@media (min-width: 600px)': {
     position: 'absolute',
+    display: 'block',
     top: 10,
     right: 15,
     padding: '10px 15px',

From d5b741ef60298eae6850e252679939343504639b Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 10 Jun 2022 15:41:04 +0200
Subject: [PATCH 22/60] Don't intercept calls inside callbacks, and bubble
 exceptions inside callbacks up to the parent rather than forwarding it to the
 next interceptable call

---
 lib/instrumenter/src/instrumenter.test.ts | 66 ++++++++++++++++++++---
 lib/instrumenter/src/instrumenter.ts      | 59 +++++++++++++-------
 2 files changed, 100 insertions(+), 25 deletions(-)

diff --git a/lib/instrumenter/src/instrumenter.test.ts b/lib/instrumenter/src/instrumenter.test.ts
index 5f6064f5cbde..748cdcd9126f 100644
--- a/lib/instrumenter/src/instrumenter.test.ts
+++ b/lib/instrumenter/src/instrumenter.test.ts
@@ -39,6 +39,8 @@ let instrumenter: Instrumenter;
 const instrument = <TObj extends Record<string, any>>(obj: TObj, options: Options = {}) =>
   instrumenter.instrument(obj, options);
 
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0));
+
 beforeEach(() => {
   jest.useRealTimers();
   callSpy.mockClear();
@@ -317,6 +319,20 @@ describe('Instrumenter', () => {
     expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
   });
 
+  it('hoists child exceptions (in callback)', () => {
+    const { fn1, fn2 } = instrument({
+      fn1: (callback?: Function) => callback && callback(),
+      fn2: () => {
+        throw new Error('Boom!');
+      },
+    });
+    expect(
+      fn1(() => {
+        fn2();
+      })
+    ).toEqual(new Error('Boom!'));
+  });
+
   it("re-throws anything that isn't an error", () => {
     const { fn } = instrument({
       fn: () => {
@@ -357,6 +373,41 @@ describe('Instrumenter', () => {
   describe('with intercept: true', () => {
     const options = { intercept: true };
 
+    it('only includes intercepted calls in the log', async () => {
+      const fn = (callback?: Function) => callback && callback();
+      const { fn1, fn2 } = instrument({ fn1: fn, fn2: fn }, options);
+      const { fn3 } = instrument({ fn3: fn }, { intercept: false });
+      fn1();
+      fn2();
+      fn3();
+      await tick();
+      expect(syncSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          logItems: [
+            { callId: 'kind--story [0] fn1', status: 'done' },
+            { callId: 'kind--story [1] fn2', status: 'done' },
+          ],
+        })
+      );
+    });
+
+    it('does not intercept child calls (in callback)', async () => {
+      const fn = (callback?: Function) => callback && callback();
+      const { fn1, fn2 } = instrument({ fn1: fn, fn2: fn }, options);
+      fn1(() => {
+        fn2();
+      });
+      await tick();
+      expect(syncSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          logItems: [
+            { callId: 'kind--story [0] fn1', status: 'done' },
+            // Second call is not here because it is not intercepted
+          ],
+        })
+      );
+    });
+
     it('emits a call event with error data when the function throws', () => {
       const { fn } = instrument(
         {
@@ -443,12 +494,13 @@ describe('Instrumenter', () => {
     });
 
     it.skip('starts debugging at the first non-nested interceptable call', () => {
-      const { fn } = instrument({ fn: jest.fn((...args: any) => args) }, { intercept: true });
-      fn(fn(), fn()); // setup the dependencies
+      const fn = (...args) => args;
+      const { fn1, fn2, fn3 } = instrument({ fn1: fn, fn2: fn, fn3: fn }, { intercept: true });
+      fn3(fn1(), fn2()); // setup the dependencies
       addons.getChannel().emit(EVENTS.START, { storyId });
-      const a = fn('a');
-      const b = fn('b');
-      const c = fn(a, b);
+      const a = fn1('a');
+      const b = fn2('b');
+      const c = fn3(a, b);
       expect(a).toEqual(['a']);
       expect(b).toEqual(['b']);
       expect(c).toEqual(expect.any(Promise));
@@ -476,13 +528,13 @@ describe('Instrumenter', () => {
       expect(fn).toHaveBeenCalledTimes(0);
 
       addons.getChannel().emit(EVENTS.NEXT, { storyId });
-      await new Promise((resolve) => setTimeout(resolve, 0));
+      await tick();
 
       expect(mockedInstrumentedFn).toHaveBeenCalledTimes(2);
       expect(fn).toHaveBeenCalledTimes(1);
 
       addons.getChannel().emit(EVENTS.END, { storyId });
-      await new Promise((resolve) => setTimeout(resolve, 0));
+      await tick();
 
       expect(mockedInstrumentedFn).toHaveBeenCalledTimes(3);
       expect(fn).toHaveBeenCalledTimes(3);
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index 9e54071bab64..a167937b0cdc 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -147,6 +147,12 @@ export class Instrumenter {
         // Rethrow any unhandled forwarded exception so it doesn't go unnoticed.
         if (forwardedException) throw forwardedException;
       }
+      if (newPhase === 'errored') {
+        this.setState(storyId, {
+          isLocked: false,
+          isPlaying: false,
+        });
+      }
     });
 
     // Trash non-retained state and clear the log when switching stories, but not on initial boot.
@@ -331,7 +337,8 @@ export class Instrumenter {
     this.setState(storyId, { cursor: cursor + 1 });
     const id = `${parentId || storyId} [${cursor}] ${method}`;
     const { path = [], intercept = false, retain = false } = options;
-    const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;
+    const interceptable =
+      !parentId && (typeof intercept === 'function' ? intercept(method, path) : intercept);
     const call: Call = { id, parentId, storyId, cursor, path, method, args, interceptable, retain };
     const result = (interceptable ? this.intercept : this.invoke).call(this, fn, call, options);
     return this.instrument(result, { ...options, mutate: true, path: [{ __callId__: call.id }] });
@@ -418,6 +425,11 @@ export class Instrumenter {
           throw IGNORED_EXCEPTION;
         }
 
+        // Exceptions inside callbacks should bubble up to the parent call rather than be forwarded.
+        if (call.parentId) {
+          throw e;
+        }
+
         // Non-interceptable calls need their exceptions forwarded to the next interceptable call.
         // In case no interceptable call picks it up, it'll get rethrown in the "completed" phase.
         this.setState(call.storyId, { forwardedException: e });
@@ -437,25 +449,36 @@ export class Instrumenter {
         throw alreadyCompletedException;
       }
 
-      const finalArgs = options.getArgs
+      // Some libraries override function args through the `getArgs` option.
+      const actualArgs = options.getArgs
         ? options.getArgs(call, this.getState(call.storyId))
         : call.args;
-      const result = fn(
-        // Wrap any callback functions to provide a way to access their "parent" call.
-        // This is picked up in the `track` function and used for call metadata.
-        ...finalArgs.map((arg: any) => {
-          if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
-          return (...args: any) => {
-            const { cursor, parentId } = this.getState(call.storyId);
-            this.setState(call.storyId, { cursor: 0, parentId: call.id });
-            const restore = () => this.setState(call.storyId, { cursor, parentId });
-            const res = arg(...args);
-            if (res instanceof Promise) res.then(restore, restore);
-            else restore();
-            return res;
-          };
-        })
-      );
+
+      // Wrap any callback functions to provide a way to access their "parent" call.
+      // This is picked up in the `track` function and used for call metadata.
+      const finalArgs = actualArgs.map((arg: any) => {
+        // We only want to wrap plain functions, not objects.
+        if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
+
+        // console.log(call.id);
+        return (...args: any) => {
+          // Set the cursor and parentId for calls that happen inside the callback.
+          const { cursor, parentId } = this.getState(call.storyId);
+          this.setState(call.storyId, { cursor: 0, parentId: call.id });
+          const restore = () => this.setState(call.storyId, { cursor, parentId });
+
+          // Invoke the actual callback function.
+          const res = arg(...args);
+
+          // Reset cursor and parentId to their original values before we entered the callback.
+          if (res instanceof Promise) res.then(restore, restore);
+          else restore();
+
+          return res;
+        };
+      });
+
+      const result = fn(...finalArgs);
 
       // Track the result so we can trace later uses of it back to the originating call.
       // Primitive results (undefined, null, boolean, string, number, BigInt) are ignored.

From 3bcec76f42aeeabfc0fe42bb255746de93032245 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Fri, 10 Jun 2022 16:50:51 +0200
Subject: [PATCH 23/60] Show child interactions in log and display errors in
 the appropriate place

---
 .../components/Interaction/Interaction.tsx    |  3 +-
 lib/instrumenter/src/instrumenter.test.ts     | 11 +++++--
 lib/instrumenter/src/instrumenter.ts          | 30 ++++++++++---------
 lib/instrumenter/src/types.ts                 |  1 +
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index d9d6bf27ddb1..9f96c9a95852 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -27,6 +27,7 @@ const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].incl
     backgroundColor:
       theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
   }),
+  paddingLeft: call.parentId ? 20 : 0,
 }));
 
 const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
@@ -88,7 +89,7 @@ export const Interaction = ({
         </MethodCallWrapper>
       </RowLabel>
       {call.status === CallStates.ERROR &&
-        call.exception &&
+        call.exception?.callId === call.id &&
         (call.exception.message.startsWith('expect(') ? (
           <MatcherResult {...call.exception} />
         ) : (
diff --git a/lib/instrumenter/src/instrumenter.test.ts b/lib/instrumenter/src/instrumenter.test.ts
index 748cdcd9126f..7599bce6b3ac 100644
--- a/lib/instrumenter/src/instrumenter.test.ts
+++ b/lib/instrumenter/src/instrumenter.test.ts
@@ -319,7 +319,7 @@ describe('Instrumenter', () => {
     expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
   });
 
-  it('hoists child exceptions (in callback)', () => {
+  it('bubbles child exceptions up to parent (in callback)', () => {
     const { fn1, fn2 } = instrument({
       fn1: (callback?: Function) => callback && callback(),
       fn2: () => {
@@ -391,7 +391,7 @@ describe('Instrumenter', () => {
       );
     });
 
-    it('does not intercept child calls (in callback)', async () => {
+    it('also includes child calls in the log', async () => {
       const fn = (callback?: Function) => callback && callback();
       const { fn1, fn2 } = instrument({ fn1: fn, fn2: fn }, options);
       fn1(() => {
@@ -402,7 +402,11 @@ describe('Instrumenter', () => {
         expect.objectContaining({
           logItems: [
             { callId: 'kind--story [0] fn1', status: 'done' },
-            // Second call is not here because it is not intercepted
+            {
+              callId: 'kind--story [0] fn1 [0] fn2',
+              status: 'done',
+              parentId: 'kind--story [0] fn1',
+            },
           ],
         })
       );
@@ -425,6 +429,7 @@ describe('Instrumenter', () => {
             name: 'Error',
             message: 'Boom!',
             stack: expect.stringContaining('Error: Boom!'),
+            callId: 'kind--story [0] fn',
           },
         })
       );
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index a167937b0cdc..06b07b893603 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -178,7 +178,7 @@ export class Instrumenter {
             playUntil ||
             shadowCalls
               .slice(0, firstRowIndex)
-              .filter((call) => call.interceptable)
+              .filter((call) => call.interceptable && !call.parentId)
               .slice(-1)[0]?.id,
         };
       });
@@ -193,7 +193,8 @@ export class Instrumenter {
       const next = isDebugging
         ? log.findIndex(({ status }) => status === CallStates.WAITING)
         : log.length;
-      start({ storyId, playUntil: log[next - 2]?.callId });
+      const playUntil = log[next - 2]?.parentId || log[next - 2]?.callId;
+      start({ storyId, playUntil });
     };
 
     const goto = ({ storyId, callId }: { storyId: string; callId: Call['id'] }) => {
@@ -276,7 +277,7 @@ export class Instrumenter {
         }
       });
       if (call.interceptable && !seen.has(call.id)) {
-        acc.unshift({ callId: call.id, status: call.status });
+        acc.unshift({ callId: call.id, status: call.status, parentId: call.parentId });
         seen.add(call.id);
       }
       return acc;
@@ -337,10 +338,10 @@ export class Instrumenter {
     this.setState(storyId, { cursor: cursor + 1 });
     const id = `${parentId || storyId} [${cursor}] ${method}`;
     const { path = [], intercept = false, retain = false } = options;
-    const interceptable =
-      !parentId && (typeof intercept === 'function' ? intercept(method, path) : intercept);
+    const interceptable = typeof intercept === 'function' ? intercept(method, path) : intercept;
     const call: Call = { id, parentId, storyId, cursor, path, method, args, interceptable, retain };
-    const result = (interceptable ? this.intercept : this.invoke).call(this, fn, call, options);
+    const interceptOrInvoke = interceptable && !parentId ? this.intercept : this.invoke;
+    const result = interceptOrInvoke.call(this, fn, call, options);
     return this.instrument(result, { ...options, mutate: true, path: [{ __callId__: call.id }] });
   }
 
@@ -405,10 +406,10 @@ export class Instrumenter {
       }
     });
 
-    const handleException = (e: unknown) => {
+    const handleException = (e: any) => {
       if (e instanceof Error) {
-        const { name, message, stack } = e;
-        const exception = { name, message, stack };
+        const { name, message, stack, callId = call.id } = e as Error & { callId?: Call['id'] };
+        const exception = { name, message, stack, callId };
         this.update({ ...info, status: CallStates.ERROR, exception });
 
         // Always track errors to their originating call.
@@ -419,17 +420,18 @@ export class Instrumenter {
           ]),
         }));
 
+        // Exceptions inside callbacks should bubble up to the parent call rather than be forwarded.
+        if (call.parentId) {
+          Object.defineProperty(e, 'callId', { value: call.id });
+          throw e;
+        }
+
         // We need to throw to break out of the play function, but we don't want to trigger a redbox
         // so we throw an ignoredException, which is caught and silently ignored by Storybook.
         if (call.interceptable && e !== alreadyCompletedException) {
           throw IGNORED_EXCEPTION;
         }
 
-        // Exceptions inside callbacks should bubble up to the parent call rather than be forwarded.
-        if (call.parentId) {
-          throw e;
-        }
-
         // Non-interceptable calls need their exceptions forwarded to the next interceptable call.
         // In case no interceptable call picks it up, it'll get rethrown in the "completed" phase.
         this.setState(call.storyId, { forwardedException: e });
diff --git a/lib/instrumenter/src/types.ts b/lib/instrumenter/src/types.ts
index 48f17fdec0d1..862036ea75a9 100644
--- a/lib/instrumenter/src/types.ts
+++ b/lib/instrumenter/src/types.ts
@@ -47,6 +47,7 @@ export interface ControlStates {
 export interface LogItem {
   callId: Call['id'];
   status: Call['status'];
+  parentId?: Call['id'];
 }
 
 export interface Payload {

From 1ea2f9cdd818092bbd7311cb89ccef104f62bb24 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sun, 12 Jun 2022 12:59:49 +0200
Subject: [PATCH 24/60] Fix mock data

---
 addons/interactions/src/mocks/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/interactions/src/mocks/index.ts b/addons/interactions/src/mocks/index.ts
index 7952b6ecf896..8113f28e26c5 100644
--- a/addons/interactions/src/mocks/index.ts
+++ b/addons/interactions/src/mocks/index.ts
@@ -24,7 +24,7 @@ export const getCall = (status: CallStates): Call => {
   };
 
   const overrides = CallStates.ERROR
-    ? { exception: { name: 'Error', stack: '', message: "Things didn't work!" } }
+    ? { exception: { name: 'Error', stack: '', message: 'Oops!', callId: defaultData.id } }
     : {};
 
   return { ...defaultData, ...overrides };

From 136c1212c2a274d6e88e60aa571fdc40f173d34b Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sun, 12 Jun 2022 20:16:21 +0200
Subject: [PATCH 25/60] Fix exception type

---
 lib/instrumenter/src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/instrumenter/src/types.ts b/lib/instrumenter/src/types.ts
index 862036ea75a9..e88eb4de79e2 100644
--- a/lib/instrumenter/src/types.ts
+++ b/lib/instrumenter/src/types.ts
@@ -11,7 +11,7 @@ export interface Call {
   interceptable: boolean;
   retain: boolean;
   status?: CallStates.DONE | CallStates.ERROR | CallStates.ACTIVE | CallStates.WAITING;
-  exception?: Error;
+  exception?: Error & { callId: Call['id'] };
 }
 
 export enum CallStates {

From ee7baf27e0176663aa9e67fa615b28bf1a0e5ee9 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sun, 12 Jun 2022 20:27:43 +0200
Subject: [PATCH 26/60] Disable interaction on child interactions

---
 addons/interactions/src/components/Interaction/Interaction.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index 9f96c9a95852..21f4d4450d47 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -79,7 +79,7 @@ export const Interaction = ({
       <RowLabel
         call={call}
         onClick={() => controls.goto(call.id)}
-        disabled={!controlStates.goto}
+        disabled={!controlStates.goto || !!call.parentId}
         onMouseEnter={() => controlStates.goto && setIsHovered(true)}
         onMouseLeave={() => controlStates.goto && setIsHovered(false)}
       >

From 6f42962372ac1c54801c3f45aa7ca1154e21895e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 13 Jun 2022 23:32:08 +0200
Subject: [PATCH 27/60] Many fixes

---
 addons/interactions/src/Panel.tsx             | 25 +++--
 .../components/Interaction/Interaction.tsx    | 78 +++++++++++-----
 .../src/components/MatcherResult.tsx          |  2 +-
 .../src/components/MethodCall.stories.tsx     | 57 ++++++++----
 .../src/components/MethodCall.tsx             | 89 +++++++++---------
 .../src/components/Subnav/Subnav.stories.tsx  |  1 +
 lib/instrumenter/src/instrumenter.ts          | 92 ++++++++++---------
 lib/instrumenter/src/types.ts                 |  7 +-
 8 files changed, 212 insertions(+), 139 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index 4693f8577991..e1fd3a1f6f8e 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -29,6 +29,7 @@ interface InteractionsPanelProps {
   controls: Controls;
   controlStates: ControlStates;
   interactions: (Call & { status?: CallStates })[];
+  nextCallId?: Call['id'];
   fileName?: string;
   hasException?: boolean;
   isPlaying?: boolean;
@@ -63,6 +64,7 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
     controls,
     controlStates,
     interactions,
+    nextCallId,
     fileName,
     hasException,
     isPlaying,
@@ -87,15 +89,18 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
           setIsRerunAnimating={setIsRerunAnimating}
         />
       )}
-      {interactions.map((call) => (
-        <Interaction
-          key={call.id}
-          call={call}
-          callsById={calls}
-          controls={controls}
-          controlStates={controlStates}
-        />
-      ))}
+      <div>
+        {interactions.map((call) => (
+          <Interaction
+            key={call.id}
+            call={call}
+            callsById={calls}
+            controls={controls}
+            controlStates={controlStates}
+            nextCallId={nextCallId}
+          />
+        ))}
+      </div>
       <div ref={endRef} />
       {!isPlaying && interactions.length === 0 && (
         <Placeholder>
@@ -176,6 +181,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
 
   const showStatus = log.length > 0 && !isPlaying;
   const hasException = log.some((item) => item.status === CallStates.ERROR);
+  const nextCall = log.find((item) => item.status === CallStates.WAITING && !item.parentId);
 
   return (
     <React.Fragment key="interactions">
@@ -188,6 +194,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
         controls={controls}
         controlStates={controlStates}
         interactions={interactions}
+        nextCallId={nextCall?.callId}
         fileName={fileName}
         hasException={hasException}
         isPlaying={isPlaying}
diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index 21f4d4450d47..34b68808c294 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -17,18 +17,30 @@ const MethodCallWrapper = styled.div(() => ({
 
 const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{
   call: Call;
-}>(({ theme, call }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  borderBottom: `1px solid ${theme.appBorderColor}`,
-  fontFamily: typography.fonts.base,
-  fontSize: 13,
-  ...(call.status === CallStates.ERROR && {
-    backgroundColor:
-      theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
+  isNext: boolean;
+}>(
+  ({ theme, call }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    borderBottom: `1px solid ${theme.appBorderColor}`,
+    fontFamily: typography.fonts.base,
+    fontSize: 13,
+    ...(call.status === CallStates.ERROR && {
+      backgroundColor:
+        theme.base === 'dark'
+          ? transparentize(0.93, theme.color.negative)
+          : theme.background.warning,
+    }),
+    paddingLeft: call.parentId ? 20 : 0,
   }),
-  paddingLeft: call.parentId ? 20 : 0,
-}));
+  ({ theme, isNext }) =>
+    isNext && {
+      '&::before': {
+        content: '""',
+        boxShadow: `0 0 1px 1px ${theme.color.secondary}`,
+      },
+    }
+);
 
 const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
@@ -56,30 +68,52 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
   },
 }));
 
-const RowMessage = styled('pre')({
-  margin: 0,
-  padding: '8px 10px 8px 30px',
+const RowMessage = styled('div')(({ theme }) => ({
+  padding: '8px 10px 8px 36px',
   fontSize: typography.size.s1,
-});
+  pre: {
+    margin: 0,
+    padding: 0,
+  },
+  p: {
+    color: theme.color.dark,
+  },
+}));
+
+const Exception = ({ exception }: { exception: Call['exception'] }) => {
+  if (exception.message.startsWith('expect(')) {
+    return <MatcherResult {...exception} />;
+  }
+  const paragraphs = exception.message.split('\n\n');
+  const more = paragraphs.length > 1;
+  return (
+    <RowMessage>
+      <pre>{paragraphs[0]}</pre>
+      {more && <p>See the full stack trace in the browser console.</p>}
+    </RowMessage>
+  );
+};
 
 export const Interaction = ({
   call,
   callsById,
   controls,
   controlStates,
+  nextCallId,
 }: {
   call: Call;
   callsById: Map<Call['id'], Call>;
   controls: Controls;
   controlStates: ControlStates;
+  nextCallId: Call['id'];
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   return (
-    <RowContainer call={call}>
+    <RowContainer call={call} isNext={nextCallId === call.id}>
       <RowLabel
         call={call}
         onClick={() => controls.goto(call.id)}
-        disabled={!controlStates.goto || !!call.parentId}
+        disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
         onMouseEnter={() => controlStates.goto && setIsHovered(true)}
         onMouseLeave={() => controlStates.goto && setIsHovered(false)}
       >
@@ -88,13 +122,9 @@ export const Interaction = ({
           <MethodCall call={call} callsById={callsById} />
         </MethodCallWrapper>
       </RowLabel>
-      {call.status === CallStates.ERROR &&
-        call.exception?.callId === call.id &&
-        (call.exception.message.startsWith('expect(') ? (
-          <MatcherResult {...call.exception} />
-        ) : (
-          <RowMessage>{call.exception.message}</RowMessage>
-        ))}
+      {call.status === CallStates.ERROR && call.exception?.callId === call.id && (
+        <Exception exception={call.exception} />
+      )}
     </RowContainer>
   );
 };
diff --git a/addons/interactions/src/components/MatcherResult.tsx b/addons/interactions/src/components/MatcherResult.tsx
index cf52a920ae42..4e3814702e3f 100644
--- a/addons/interactions/src/components/MatcherResult.tsx
+++ b/addons/interactions/src/components/MatcherResult.tsx
@@ -50,7 +50,7 @@ export const MatcherResult = ({ message }: { message: string }) => {
     <pre
       style={{
         margin: 0,
-        padding: '8px 10px 8px 30px',
+        padding: '8px 10px 8px 36px',
         fontSize: typography.size.s1,
       }}
     >
diff --git a/addons/interactions/src/components/MethodCall.stories.tsx b/addons/interactions/src/components/MethodCall.stories.tsx
index feda43c8ff5c..b7551d0c32e9 100644
--- a/addons/interactions/src/components/MethodCall.stories.tsx
+++ b/addons/interactions/src/components/MethodCall.stories.tsx
@@ -27,7 +27,6 @@ export default {
   },
 };
 
-class FooBar {}
 export const Args = () => (
   <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
     <Node value={null} />
@@ -56,37 +55,50 @@ export const Args = () => (
       }}
       showObjectInspector
     />
-    <Node value={new FooBar()} />
-    <Node value={function goFaster() {}} />
+    <Node value={{ __class__: { name: 'FooBar' } }} />
+    <Node value={{ __function__: { name: 'goFaster' } }} />
     <Node value={{ __element__: { localName: 'hr' } }} />
     <Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
     <Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
     <Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
     <Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
-    <Node value={new Date(Date.UTC(2012, 11, 20, 0, 0, 0))} />
-    <Node value={new Date(1600000000000)} />
-    <Node value={new Date(1600000000123)} />
-    <Node value={new EvalError()} />
-    <Node value={new SyntaxError("Can't do that")} />
-    <Node value={new TypeError("Cannot read property 'foo' of undefined")} />
-    <Node value={new ReferenceError('Invalid left-hand side in assignment')} />
     <Node
-      value={
-        new Error(
-          "XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource."
-        )
-      }
+      value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
     />
-    <Node value={/hello/i} />
-    <Node value={new RegExp(`src(.*)\\.js$`)} />
+    <Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
+    <Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
+    <Node value={{ __error__: { name: 'EvalError', message: '' } }} />
+    <Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
+    <Node
+      value={{
+        __error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
+      }}
+    />
+    <Node
+      value={{
+        __error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
+      }}
+    />
+    <Node
+      value={{
+        __error__: {
+          name: 'Error',
+          message:
+            "XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
+        },
+      }}
+    />
+    <Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
+    <Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
     {/* eslint-disable-next-line symbol-description */}
-    <Node value={Symbol()} />
-    <Node value={Symbol('Hello world')} />
+    <Node value={{ __symbol__: { description: '' } }} />
+    <Node value={{ __symbol__: { description: 'Hello world' } }} />
   </div>
 );
 
 const calls: Call[] = [
   {
+    cursor: 0,
     id: '1',
     path: ['screen'],
     method: 'getByText',
@@ -96,6 +108,7 @@ const calls: Call[] = [
     retain: false,
   },
   {
+    cursor: 1,
     id: '2',
     path: ['userEvent'],
     method: 'click',
@@ -105,6 +118,7 @@ const calls: Call[] = [
     retain: false,
   },
   {
+    cursor: 2,
     id: '3',
     path: [],
     method: 'expect',
@@ -114,6 +128,7 @@ const calls: Call[] = [
     retain: false,
   },
   {
+    cursor: 3,
     id: '4',
     path: [{ __callId__: '3' }, 'not'],
     method: 'toBe',
@@ -123,6 +138,7 @@ const calls: Call[] = [
     retain: false,
   },
   {
+    cursor: 4,
     id: '5',
     path: ['jest'],
     method: 'fn',
@@ -132,6 +148,7 @@ const calls: Call[] = [
     retain: false,
   },
   {
+    cursor: 5,
     id: '6',
     path: [],
     method: 'expect',
@@ -141,6 +158,7 @@ const calls: Call[] = [
     retain: false,
   },
   {
+    cursor: 6,
     id: '7',
     path: ['expect'],
     method: 'stringMatching',
@@ -150,6 +168,7 @@ const calls: Call[] = [
     retain: false,
   },
   {
+    cursor: 7,
     id: '8',
     path: [{ __callId__: '6' }, 'not'],
     method: 'toHaveBeenCalledWith',
diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx
index 10a3bf2c0f47..e74e02e6340e 100644
--- a/addons/interactions/src/components/MethodCall.tsx
+++ b/addons/interactions/src/components/MethodCall.tsx
@@ -111,32 +111,34 @@ export const Node = ({
       return <NullNode {...props} />;
     case value === undefined:
       return <UndefinedNode {...props} />;
+    case Array.isArray(value):
+      return <ArrayNode {...props} value={value} />;
     case typeof value === 'string':
-      return <StringNode value={value} {...props} />;
+      return <StringNode {...props} value={value} />;
     case typeof value === 'number':
-      return <NumberNode value={value} {...props} />;
+      return <NumberNode {...props} value={value} />;
     case typeof value === 'boolean':
-      return <BooleanNode value={value} {...props} />;
-    case typeof value === 'function':
-      return <FunctionNode value={value} {...props} />;
-    case value instanceof Array:
-      return <ArrayNode value={value} {...props} />;
-    case value instanceof Date:
-      return <DateNode value={value} {...props} />;
-    case value instanceof Error:
-      return <ErrorNode value={value} {...props} />;
-    case value instanceof RegExp:
-      return <RegExpNode value={value} {...props} />;
+      return <BooleanNode {...props} value={value} />;
+
+    /* eslint-disable no-underscore-dangle */
+    case Object.prototype.hasOwnProperty.call(value, '__date__'):
+      return <DateNode {...props} {...value.__date__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__error__'):
+      return <ErrorNode {...props} {...value.__error__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
+      return <RegExpNode {...props} {...value.__regexp__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__function__'):
+      return <FunctionNode {...props} {...value.__function__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
+      return <SymbolNode {...props} {...value.__symbol__} />;
     case Object.prototype.hasOwnProperty.call(value, '__element__'):
-      // eslint-disable-next-line no-underscore-dangle
-      return <ElementNode value={value.__element__} {...props} />;
+      return <ElementNode {...props} {...value.__element__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__class__'):
+      return <ClassNode {...props} {...value.__class__} />;
     case Object.prototype.hasOwnProperty.call(value, '__callId__'):
-      // eslint-disable-next-line no-underscore-dangle
       return <MethodCall call={callsById.get(value.__callId__)} callsById={callsById} />;
-    case typeof value === 'object' &&
-      value.constructor?.name &&
-      value.constructor?.name !== 'Object':
-      return <ClassNode value={value} {...props} />;
+    /* eslint-enable no-underscore-dangle */
+
     case Object.prototype.toString.call(value) === '[object Object]':
       return <ObjectNode value={value} showInspector={showObjectInspector} {...props} />;
     default:
@@ -263,18 +265,23 @@ export const ObjectNode = ({
   );
 };
 
-export const ClassNode = ({ value }: { value: Record<string, any> }) => {
+export const ClassNode = ({ name }: { name: string }) => {
   const colors = useThemeColors();
-  return <span style={{ color: colors.instance }}>{value.constructor.name}</span>;
+  return <span style={{ color: colors.instance }}>{name}</span>;
 };
 
-export const FunctionNode = ({ value }: { value: Function }) => {
+export const FunctionNode = ({ name }: { name: string }) => {
   const colors = useThemeColors();
-  return <span style={{ color: colors.function }}>{value.name || 'anonymous'}</span>;
+  return <span style={{ color: colors.function }}>{name || <i>anonymous</i>}</span>;
 };
 
-export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) => {
-  const { prefix, localName, id, classNames = [], innerText } = value;
+export const ElementNode = ({
+  prefix,
+  localName,
+  id,
+  classNames = [],
+  innerText,
+}: ElementRef['__element__']) => {
   const name = prefix ? `${prefix}:${localName}` : localName;
   const colors = useThemeColors();
   return (
@@ -309,8 +316,8 @@ export const ElementNode = ({ value }: { value: ElementRef['__element__'] }) =>
   );
 };
 
-export const DateNode = ({ value }: { value: Date }) => {
-  const [date, time, ms] = value.toISOString().split(/[T.Z]/);
+export const DateNode = ({ value }: { value: string }) => {
+  const [date, time, ms] = value.split(/[T.Z]/);
   const colors = useThemeColors();
   return (
     <span style={{ whiteSpace: 'nowrap', color: colors.date }}>
@@ -323,42 +330,36 @@ export const DateNode = ({ value }: { value: Date }) => {
   );
 };
 
-export const ErrorNode = ({ value }: { value: Error }) => {
+export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
   const colors = useThemeColors();
   return (
     <span style={{ color: colors.error.name }}>
-      {value.name}
-      {value.message && ': '}
-      {value.message && (
-        <span
-          style={{ color: colors.error.message }}
-          title={value.message.length > 50 ? value.message : ''}
-        >
-          {ellipsize(value.message, 50)}
+      {name}
+      {message && ': '}
+      {message && (
+        <span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
+          {ellipsize(message, 50)}
         </span>
       )}
     </span>
   );
 };
 
-export const RegExpNode = ({ value }: { value: RegExp }) => {
+export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
   const colors = useThemeColors();
   return (
     <span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
-      /<span style={{ color: colors.regex.source }}>{value.source}</span>/{value.flags}
+      /<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
     </span>
   );
 };
 
-export const SymbolNode = ({ value }: { value: symbol }) => {
+export const SymbolNode = ({ description }: { description: string }) => {
   const colors = useThemeColors();
   return (
     <span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
       Symbol(
-      {value.description && (
-        <span style={{ color: colors.meta }}>{JSON.stringify(value.description)}</span>
-      )}
-      )
+      {description && <span style={{ color: colors.meta }}>"{description}"</span>})
     </span>
   );
 };
diff --git a/addons/interactions/src/components/Subnav/Subnav.stories.tsx b/addons/interactions/src/components/Subnav/Subnav.stories.tsx
index 9605bc53252c..40e365d03fb9 100644
--- a/addons/interactions/src/components/Subnav/Subnav.stories.tsx
+++ b/addons/interactions/src/components/Subnav/Subnav.stories.tsx
@@ -12,6 +12,7 @@ export default {
       goto: action('goto'),
       next: action('next'),
       end: action('end'),
+      rerun: action('rerun'),
     },
     controlStates: {
       debugger: true,
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index 06b07b893603..a4302ac750ac 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -10,7 +10,7 @@ import {
 } from '@storybook/core-events';
 import global from 'global';
 
-import { Call, CallRef, CallStates, State, Options, ControlStates, LogItem } from './types';
+import { Call, CallRef, CallStates, ControlStates, LogItem, Options, State } from './types';
 
 export const EVENTS = {
   CALL: 'instrumenter/call',
@@ -73,7 +73,6 @@ const getInitialState = (): State => ({
   playUntil: undefined,
   resolvers: {},
   syncTimeout: undefined,
-  forwardedException: undefined,
 });
 
 const getRetainedState = (state: State, isDebugging = false) => {
@@ -132,7 +131,7 @@ export class Instrumenter {
 
     // Start with a clean slate before playing after a remount, and stop debugging when done.
     this.channel.on(STORY_RENDER_PHASE_CHANGED, ({ storyId, newPhase }) => {
-      const { isDebugging, forwardedException } = this.getState(storyId);
+      const { isDebugging } = this.getState(storyId);
       this.setState(storyId, { renderPhase: newPhase });
       if (newPhase === 'playing') {
         resetState({ storyId, isDebugging });
@@ -142,10 +141,7 @@ export class Instrumenter {
           isLocked: false,
           isPlaying: false,
           isDebugging: false,
-          forwardedException: undefined,
         });
-        // Rethrow any unhandled forwarded exception so it doesn't go unnoticed.
-        if (forwardedException) throw forwardedException;
       }
       if (newPhase === 'errored') {
         this.setState(storyId, {
@@ -189,12 +185,11 @@ export class Instrumenter {
 
     const back = ({ storyId }: { storyId: string }) => {
       const { isDebugging } = this.getState(storyId);
-      const log = this.getLog(storyId);
+      const log = this.getLog(storyId).filter((call) => !call.parentId);
       const next = isDebugging
         ? log.findIndex(({ status }) => status === CallStates.WAITING)
         : log.length;
-      const playUntil = log[next - 2]?.parentId || log[next - 2]?.callId;
-      start({ storyId, playUntil });
+      start({ storyId, playUntil: log[next - 2]?.callId });
     };
 
     const goto = ({ storyId, callId }: { storyId: string; callId: Call['id'] }) => {
@@ -276,7 +271,7 @@ export class Instrumenter {
           seen.add((node as CallRef).__callId__);
         }
       });
-      if (call.interceptable && !seen.has(call.id)) {
+      if ((call.interceptable || call.exception) && !seen.has(call.id)) {
         acc.unshift({ callId: call.id, status: call.status, parentId: call.parentId });
         seen.add(call.id);
       }
@@ -378,25 +373,50 @@ export class Instrumenter {
     // const { abortSignal } = global.window.__STORYBOOK_PREVIEW__ || {};
     // if (abortSignal && abortSignal.aborted) throw IGNORED_EXCEPTION;
 
-    const { callRefsByResult, forwardedException, renderPhase } = this.getState(call.storyId);
+    const { callRefsByResult, renderPhase } = this.getState(call.storyId);
 
-    const info: Call = {
-      ...call,
-      // Map args that originate from a tracked function call to a call reference to enable nesting.
-      // These values are often not fully serializable anyway (e.g. HTML elements).
-      args: call.args.map((arg) => {
-        if (callRefsByResult.has(arg)) {
-          return callRefsByResult.get(arg);
-        }
-        if (arg instanceof global.window.HTMLElement) {
-          const { prefix, localName, id, classList, innerText } = arg;
-          const classNames = Array.from(classList);
-          return { __element__: { prefix, localName, id, classNames, innerText } };
-        }
-        return arg;
-      }),
+    // Map complex values to a JSON-serializable representation.
+    const serializeValues = (value: any): any => {
+      if (callRefsByResult.has(value)) {
+        return callRefsByResult.get(value);
+      }
+      if (value instanceof Array) {
+        return value.map(serializeValues);
+      }
+      if (value instanceof Date) {
+        return { __date__: { value: value.toISOString() } };
+      }
+      if (value instanceof Error) {
+        const { name, message, stack } = value;
+        return { __error__: { name, message, stack } };
+      }
+      if (value instanceof RegExp) {
+        const { flags, source } = value;
+        return { __regexp__: { flags, source } };
+      }
+      if (value instanceof global.window.HTMLElement) {
+        const { prefix, localName, id, classList, innerText } = value;
+        const classNames = Array.from(classList);
+        return { __element__: { prefix, localName, id, classNames, innerText } };
+      }
+      if (typeof value === 'function') {
+        return { __function__: { name: value.name } };
+      }
+      if (typeof value === 'symbol') {
+        return { __symbol__: { description: value.description } };
+      }
+      if (
+        typeof value === 'object' &&
+        value.constructor?.name &&
+        value.constructor?.name !== 'Object'
+      ) {
+        return { __class__: { name: value.constructor.name } };
+      }
+      return value;
     };
 
+    const info: Call = { ...call, args: call.args.map(serializeValues) };
+
     // Mark any ancestor calls as "chained upon" so we won't attempt to defer it later.
     call.path.forEach((ref: any) => {
       if (ref?.__callId__) {
@@ -408,7 +428,7 @@ export class Instrumenter {
 
     const handleException = (e: any) => {
       if (e instanceof Error) {
-        const { name, message, stack, callId = call.id } = e as Error & { callId?: Call['id'] };
+        const { name, message, stack, callId = call.id } = e as Error & { callId: Call['id'] };
         const exception = { name, message, stack, callId };
         this.update({ ...info, status: CallStates.ERROR, exception });
 
@@ -420,7 +440,7 @@ export class Instrumenter {
           ]),
         }));
 
-        // Exceptions inside callbacks should bubble up to the parent call rather than be forwarded.
+        // Exceptions inside callbacks should bubble up to the parent call.
         if (call.parentId) {
           Object.defineProperty(e, 'callId', { value: call.id });
           throw e;
@@ -428,25 +448,16 @@ export class Instrumenter {
 
         // We need to throw to break out of the play function, but we don't want to trigger a redbox
         // so we throw an ignoredException, which is caught and silently ignored by Storybook.
-        if (call.interceptable && e !== alreadyCompletedException) {
+        if (e !== alreadyCompletedException) {
+          // eslint-disable-next-line no-console
+          console?.warn(e);
           throw IGNORED_EXCEPTION;
         }
-
-        // Non-interceptable calls need their exceptions forwarded to the next interceptable call.
-        // In case no interceptable call picks it up, it'll get rethrown in the "completed" phase.
-        this.setState(call.storyId, { forwardedException: e });
-        return e;
       }
       throw e;
     };
 
     try {
-      // An earlier, non-interceptable call might have forwarded an exception.
-      if (forwardedException) {
-        this.setState(call.storyId, { forwardedException: undefined });
-        throw forwardedException;
-      }
-
       if (renderPhase === 'played' && !call.retain) {
         throw alreadyCompletedException;
       }
@@ -462,7 +473,6 @@ export class Instrumenter {
         // We only want to wrap plain functions, not objects.
         if (typeof arg !== 'function' || Object.keys(arg).length) return arg;
 
-        // console.log(call.id);
         return (...args: any) => {
           // Set the cursor and parentId for calls that happen inside the callback.
           const { cursor, parentId } = this.getState(call.storyId);
diff --git a/lib/instrumenter/src/types.ts b/lib/instrumenter/src/types.ts
index e88eb4de79e2..e9cca7003547 100644
--- a/lib/instrumenter/src/types.ts
+++ b/lib/instrumenter/src/types.ts
@@ -11,7 +11,12 @@ export interface Call {
   interceptable: boolean;
   retain: boolean;
   status?: CallStates.DONE | CallStates.ERROR | CallStates.ACTIVE | CallStates.WAITING;
-  exception?: Error & { callId: Call['id'] };
+  exception?: {
+    name: Error['name'];
+    message: Error['message'];
+    stack: Error['stack'];
+    callId: Call['id'];
+  };
 }
 
 export enum CallStates {

From edc79c9d7cca4862abae504367dc87ddbb73baad Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 08:43:00 +0200
Subject: [PATCH 28/60] Remove unused eslint directives

---
 addons/interactions/src/components/MethodCall.stories.tsx | 1 -
 lib/instrumenter/src/instrumenter.ts                      | 1 -
 2 files changed, 2 deletions(-)

diff --git a/addons/interactions/src/components/MethodCall.stories.tsx b/addons/interactions/src/components/MethodCall.stories.tsx
index b7551d0c32e9..dda969492020 100644
--- a/addons/interactions/src/components/MethodCall.stories.tsx
+++ b/addons/interactions/src/components/MethodCall.stories.tsx
@@ -90,7 +90,6 @@ export const Args = () => (
     />
     <Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
     <Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
-    {/* eslint-disable-next-line symbol-description */}
     <Node value={{ __symbol__: { description: '' } }} />
     <Node value={{ __symbol__: { description: 'Hello world' } }} />
   </div>
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index a4302ac750ac..081335990748 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -449,7 +449,6 @@ export class Instrumenter {
         // We need to throw to break out of the play function, but we don't want to trigger a redbox
         // so we throw an ignoredException, which is caught and silently ignored by Storybook.
         if (e !== alreadyCompletedException) {
-          // eslint-disable-next-line no-console
           console?.warn(e);
           throw IGNORED_EXCEPTION;
         }

From 33644734d359da993ce2a83f11a34feb53a55fbe Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 08:46:50 +0200
Subject: [PATCH 29/60] Fix prop forwarding

---
 .../src/components/Interaction/Interaction.tsx             | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index 34b68808c294..b2c304187ffa 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -15,10 +15,9 @@ const MethodCallWrapper = styled.div(() => ({
   inlineSize: 'calc( 100% - 40px )',
 }));
 
-const RowContainer = styled('div', { shouldForwardProp: (prop) => !['call'].includes(prop) })<{
-  call: Call;
-  isNext: boolean;
-}>(
+const RowContainer = styled('div', {
+  shouldForwardProp: (prop) => !['call', 'isNext'].includes(prop),
+})<{ call: Call; isNext: boolean }>(
   ({ theme, call }) => ({
     display: 'flex',
     flexDirection: 'column',

From ea77b6d93ba2f3bc5a6e7d6b09aac3b81d4bed60 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 13:07:03 +0200
Subject: [PATCH 30/60] Fix back button

---
 lib/instrumenter/src/instrumenter.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index 081335990748..5c2001031bbb 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -184,12 +184,12 @@ export class Instrumenter {
     };
 
     const back = ({ storyId }: { storyId: string }) => {
-      const { isDebugging } = this.getState(storyId);
       const log = this.getLog(storyId).filter((call) => !call.parentId);
-      const next = isDebugging
-        ? log.findIndex(({ status }) => status === CallStates.WAITING)
-        : log.length;
-      start({ storyId, playUntil: log[next - 2]?.callId });
+      const last = log.reduceRight((res, item, index) => {
+        if (res >= 0 || item.status === CallStates.WAITING) return res;
+        return index;
+      }, -1);
+      start({ storyId, playUntil: log[last - 1]?.callId });
     };
 
     const goto = ({ storyId, callId }: { storyId: string; callId: Call['id'] }) => {

From dbcf78b0f9f2a5bc5de595af703e64d497df3876 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 13:50:30 +0200
Subject: [PATCH 31/60] Fix pausedAt indicator

---
 addons/interactions/src/Panel.tsx                | 12 +++++++-----
 .../src/components/Interaction/Interaction.tsx   | 16 ++++++++--------
 lib/instrumenter/src/instrumenter.ts             |  6 +++++-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index e1fd3a1f6f8e..2778d1c2f1d2 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -29,10 +29,10 @@ interface InteractionsPanelProps {
   controls: Controls;
   controlStates: ControlStates;
   interactions: (Call & { status?: CallStates })[];
-  nextCallId?: Call['id'];
   fileName?: string;
   hasException?: boolean;
   isPlaying?: boolean;
+  pausedAt?: Call['id'];
   calls: Map<string, any>;
   endRef?: React.Ref<HTMLDivElement>;
   onScrollToEnd?: () => void;
@@ -64,10 +64,10 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
     controls,
     controlStates,
     interactions,
-    nextCallId,
     fileName,
     hasException,
     isPlaying,
+    pausedAt,
     onScrollToEnd,
     endRef,
     isRerunAnimating,
@@ -97,7 +97,7 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
             callsById={calls}
             controls={controls}
             controlStates={controlStates}
-            nextCallId={nextCallId}
+            pausedAt={pausedAt}
           />
         ))}
       </div>
@@ -121,6 +121,7 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
 export const Panel: React.FC<AddonPanelProps> = (props) => {
   const [storyId, setStoryId] = React.useState<StoryId>();
   const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
+  const [pausedAt, setPausedAt] = React.useState<Call['id']>();
   const [isPlaying, setPlaying] = React.useState(false);
   const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
   const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
@@ -151,10 +152,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
       [EVENTS.SYNC]: (payload) => {
         setControlStates(payload.controlStates);
         setLog(payload.logItems);
+        setPausedAt(payload.pausedAt);
       },
       [STORY_RENDER_PHASE_CHANGED]: (event) => {
         setStoryId(event.storyId);
         setPlaying(event.newPhase === 'playing');
+        setPausedAt(undefined);
       },
     },
     []
@@ -181,7 +184,6 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
 
   const showStatus = log.length > 0 && !isPlaying;
   const hasException = log.some((item) => item.status === CallStates.ERROR);
-  const nextCall = log.find((item) => item.status === CallStates.WAITING && !item.parentId);
 
   return (
     <React.Fragment key="interactions">
@@ -194,10 +196,10 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
         controls={controls}
         controlStates={controlStates}
         interactions={interactions}
-        nextCallId={nextCall?.callId}
         fileName={fileName}
         hasException={hasException}
         isPlaying={isPlaying}
+        pausedAt={pausedAt}
         endRef={endRef}
         onScrollToEnd={scrollTarget && scrollToTarget}
         isRerunAnimating={isRerunAnimating}
diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index b2c304187ffa..0ca32dfd2f7d 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -16,8 +16,8 @@ const MethodCallWrapper = styled.div(() => ({
 }));
 
 const RowContainer = styled('div', {
-  shouldForwardProp: (prop) => !['call', 'isNext'].includes(prop),
-})<{ call: Call; isNext: boolean }>(
+  shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
+})<{ call: Call; pausedAt: Call['id'] }>(
   ({ theme, call }) => ({
     display: 'flex',
     flexDirection: 'column',
@@ -32,11 +32,11 @@ const RowContainer = styled('div', {
     }),
     paddingLeft: call.parentId ? 20 : 0,
   }),
-  ({ theme, isNext }) =>
-    isNext && {
+  ({ theme, call, pausedAt }) =>
+    pausedAt === call.id && {
       '&::before': {
         content: '""',
-        boxShadow: `0 0 1px 1px ${theme.color.secondary}`,
+        boxShadow: `0 0 0 1px ${theme.color.warning}`,
       },
     }
 );
@@ -98,17 +98,17 @@ export const Interaction = ({
   callsById,
   controls,
   controlStates,
-  nextCallId,
+  pausedAt,
 }: {
   call: Call;
   callsById: Map<Call['id'], Call>;
   controls: Controls;
   controlStates: ControlStates;
-  nextCallId: Call['id'];
+  pausedAt?: Call['id'];
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   return (
-    <RowContainer call={call} isNext={nextCallId === call.id}>
+    <RowContainer call={call} pausedAt={pausedAt}>
       <RowLabel
         call={call}
         onClick={() => controls.goto(call.id)}
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index 5c2001031bbb..ea3c8a57a512 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -544,6 +544,9 @@ export class Instrumenter {
   sync(storyId: StoryId) {
     const { isLocked, isPlaying } = this.getState(storyId);
     const logItems: LogItem[] = this.getLog(storyId);
+    const pausedAt = logItems
+      .filter(({ parentId }) => !parentId)
+      .find((item) => item.status === CallStates.WAITING)?.callId;
 
     const hasActive = logItems.some((item) => item.status === CallStates.ACTIVE);
     if (debuggerDisabled || isLocked || hasActive || logItems.length === 0) {
@@ -562,7 +565,8 @@ export class Instrumenter {
       next: isPlaying,
       end: isPlaying,
     };
-    this.channel.emit(EVENTS.SYNC, { controlStates, logItems });
+
+    this.channel.emit(EVENTS.SYNC, { controlStates, logItems, pausedAt });
   }
 }
 

From 6d540e00e20d0bbe5682b526d5dbdd9e1bd84e7e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 13:50:52 +0200
Subject: [PATCH 32/60] Fix broken play function

---
 .../src/components/AccountForm/addon-interactions.stories.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
index 9619a228b507..d3df3f635f2f 100644
--- a/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
+++ b/addons/interactions/src/components/AccountForm/addon-interactions.stories.tsx
@@ -131,7 +131,7 @@ export const StandardEmailFailed: CSF3Story = {
     await userEvent.click(canvas.getByRole('button', { name: /create account/i }));
 
     await canvas.findByText('Please enter a correctly formatted email address');
-    expect(args.onSubmit).not.toHaveBeenCalled();
+    await expect(args.onSubmit).not.toHaveBeenCalled();
   },
 };
 

From 1605cbb9c20fdff25a671ee73522a7113aa5b2f4 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 14:18:17 +0200
Subject: [PATCH 33/60] Value might be null

---
 lib/instrumenter/src/instrumenter.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index ea3c8a57a512..230dd9bc6819 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -407,8 +407,8 @@ export class Instrumenter {
       }
       if (
         typeof value === 'object' &&
-        value.constructor?.name &&
-        value.constructor?.name !== 'Object'
+        value?.constructor?.name &&
+        value?.constructor?.name !== 'Object'
       ) {
         return { __class__: { name: value.constructor.name } };
       }

From 1fa16ca0bae0802ad6e6a6817b149801de9bceb8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 22:05:06 +0200
Subject: [PATCH 34/60] Tweak indicator style

---
 .../src/components/Interaction/Interaction.tsx    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index 0ca32dfd2f7d..45e6fab4d9a8 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -19,6 +19,7 @@ const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop),
 })<{ call: Call; pausedAt: Call['id'] }>(
   ({ theme, call }) => ({
+    position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     borderBottom: `1px solid ${theme.appBorderColor}`,
@@ -36,7 +37,19 @@ const RowContainer = styled('div', {
     pausedAt === call.id && {
       '&::before': {
         content: '""',
-        boxShadow: `0 0 0 1px ${theme.color.warning}`,
+        position: 'absolute',
+        top: -5,
+        borderTop: '4.5px solid transparent',
+        borderLeft: `7px solid ${theme.color.warning}`,
+        borderBottom: '4.5px solid transparent',
+      },
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: -1,
+        height: 1,
+        width: '100%',
+        background: theme.color.warning,
       },
     }
 );

From 249496f14c78168874a5268c9ab15078534331af Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 22:24:18 +0200
Subject: [PATCH 35/60] Fix rendering inconsistency

---
 addons/interactions/src/components/Interaction/Interaction.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index 45e6fab4d9a8..f7cd0206091b 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -47,9 +47,8 @@ const RowContainer = styled('div', {
         content: '""',
         position: 'absolute',
         top: -1,
-        height: 1,
         width: '100%',
-        background: theme.color.warning,
+        borderTop: `1.5px solid ${theme.color.warning}`,
       },
     }
 );

From fcf5728018a691d323d57d6671e5f06b9e02e253 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 22:46:51 +0200
Subject: [PATCH 36/60] Fix zIndex

---
 addons/interactions/src/components/Interaction/Interaction.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index f7cd0206091b..ec1672027aa7 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -39,6 +39,7 @@ const RowContainer = styled('div', {
         content: '""',
         position: 'absolute',
         top: -5,
+        zIndex: 1,
         borderTop: '4.5px solid transparent',
         borderLeft: `7px solid ${theme.color.warning}`,
         borderBottom: '4.5px solid transparent',
@@ -47,6 +48,7 @@ const RowContainer = styled('div', {
         content: '""',
         position: 'absolute',
         top: -1,
+        zIndex: 1,
         width: '100%',
         borderTop: `1.5px solid ${theme.color.warning}`,
       },

From 41913b693fada9c797356800ca1d3ab6d555cc5a Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 Jun 2022 23:47:15 +0200
Subject: [PATCH 37/60] Fix tests

---
 lib/instrumenter/src/instrumenter.test.ts | 49 +++++++----------------
 lib/instrumenter/src/instrumenter.ts      |  4 +-
 2 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/lib/instrumenter/src/instrumenter.test.ts b/lib/instrumenter/src/instrumenter.test.ts
index 7599bce6b3ac..f0f97b573634 100644
--- a/lib/instrumenter/src/instrumenter.test.ts
+++ b/lib/instrumenter/src/instrumenter.test.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 
 import { addons, mockChannel } from '@storybook/addons';
+import { logger } from '@storybook/client-logger';
 import {
   FORCE_REMOUNT,
   SET_CURRENT_STORY,
@@ -11,6 +12,8 @@ import global from 'global';
 import { EVENTS, Instrumenter } from './instrumenter';
 import type { Options } from './types';
 
+jest.mock('@storybook/client-logger');
+
 const callSpy = jest.fn();
 const syncSpy = jest.fn();
 const forceRemountSpy = jest.fn();
@@ -298,39 +301,40 @@ describe('Instrumenter', () => {
     );
   });
 
-  it('catches thrown errors and returns the error', () => {
+  it('catches thrown errors and throws an ignoredException instead', () => {
     const { fn } = instrument({
       fn: () => {
         throw new Error('Boom!');
       },
     });
-    expect(fn()).toEqual(new Error('Boom!'));
-    expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
+    expect(fn).toThrow('ignoredException');
   });
 
-  it('forwards nested exceptions', () => {
+  it('catches nested exceptions and throws an ignoredException instead', () => {
     const { fn1, fn2 } = instrument({
-      fn1: (...args: any) => {}, // doesn't forward args
+      fn1: (_: any) => {},
       fn2: () => {
         throw new Error('Boom!');
       },
     });
-    expect(fn1(fn2())).toEqual(new Error('Boom!'));
-    expect(() => setRenderPhase('played')).toThrow(new Error('Boom!'));
+    expect(() => fn1(fn2())).toThrow('ignoredException');
   });
 
   it('bubbles child exceptions up to parent (in callback)', () => {
     const { fn1, fn2 } = instrument({
-      fn1: (callback?: Function) => callback && callback(),
+      fn1: jest.fn((callback: Function) => callback()),
       fn2: () => {
         throw new Error('Boom!');
       },
     });
-    expect(
+    expect(() =>
       fn1(() => {
         fn2();
       })
-    ).toEqual(new Error('Boom!'));
+    ).toThrow('ignoredException');
+    expect(fn1).toHaveBeenCalled();
+    expect(logger.warn).toHaveBeenCalledWith(new Error('Boom!'));
+    expect((logger.warn as any).mock.calls[0][0].callId).toBe('kind--story [0] fn1 [0] fn2');
   });
 
   it("re-throws anything that isn't an error", () => {
@@ -434,31 +438,6 @@ describe('Instrumenter', () => {
         })
       );
     });
-
-    it('catches thrown errors and throws an ignoredException instead', () => {
-      const { fn } = instrument(
-        {
-          fn: () => {
-            throw new Error('Boom!');
-          },
-        },
-        options
-      );
-      expect(fn).toThrow('ignoredException');
-    });
-
-    it('catches forwarded exceptions and throws an ignoredException instead', () => {
-      const { fn1, fn2 } = instrument(
-        {
-          fn1: (_: any) => {},
-          fn2: () => {
-            throw new Error('Boom!');
-          },
-        },
-        options
-      );
-      expect(() => fn1(fn2())).toThrow('ignoredException');
-    });
   });
 
   describe('while debugging', () => {
diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index 230dd9bc6819..4b8253cd3548 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { addons, Channel } from '@storybook/addons';
 import type { StoryId } from '@storybook/addons';
-import { once } from '@storybook/client-logger';
+import { logger, once } from '@storybook/client-logger';
 import {
   FORCE_REMOUNT,
   IGNORED_EXCEPTION,
@@ -449,7 +449,7 @@ export class Instrumenter {
         // We need to throw to break out of the play function, but we don't want to trigger a redbox
         // so we throw an ignoredException, which is caught and silently ignored by Storybook.
         if (e !== alreadyCompletedException) {
-          console?.warn(e);
+          logger.warn(e);
           throw IGNORED_EXCEPTION;
         }
       }

From 2509e7e3bd67fc65a496cde552338a620bb33574 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 15 Jun 2022 11:00:32 +0200
Subject: [PATCH 38/60] Fix story data

---
 .../src/components/MethodCall.stories.tsx            | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/addons/interactions/src/components/MethodCall.stories.tsx b/addons/interactions/src/components/MethodCall.stories.tsx
index dda969492020..b65001b4e1cb 100644
--- a/addons/interactions/src/components/MethodCall.stories.tsx
+++ b/addons/interactions/src/components/MethodCall.stories.tsx
@@ -142,7 +142,7 @@ const calls: Call[] = [
     path: ['jest'],
     method: 'fn',
     storyId: 'kind--story',
-    args: [function actionHandler() {}],
+    args: [{ __function__: { name: 'actionHandler' } }],
     interceptable: false,
     retain: false,
   },
@@ -162,7 +162,7 @@ const calls: Call[] = [
     path: ['expect'],
     method: 'stringMatching',
     storyId: 'kind--story',
-    args: [/hello/i],
+    args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
     interceptable: false,
     retain: false,
   },
@@ -172,7 +172,13 @@ const calls: Call[] = [
     path: [{ __callId__: '6' }, 'not'],
     method: 'toHaveBeenCalledWith',
     storyId: 'kind--story',
-    args: [{ __callId__: '7' }, new Error("Cannot read property 'foo' of undefined")],
+    args: [
+      { __callId__: '7' },
+      [
+        { __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
+        { __symbol__: { description: 'Hello world' } },
+      ],
+    ],
     interceptable: false,
     retain: false,
   },

From 3b668db2fbe6dfbebc7a3569fb652167893a7816 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 15 Jun 2022 11:14:24 +0200
Subject: [PATCH 39/60] Show pausedAt indicator in story

---
 addons/interactions/src/Panel.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/addons/interactions/src/Panel.stories.tsx b/addons/interactions/src/Panel.stories.tsx
index 8e22606d4ecf..6e3b1eca0476 100644
--- a/addons/interactions/src/Panel.stories.tsx
+++ b/addons/interactions/src/Panel.stories.tsx
@@ -68,6 +68,7 @@ export const Paused: Story = {
       next: true,
       end: true,
     },
+    pausedAt: getCall(CallStates.WAITING).id,
   },
 };
 

From b134d7202f5c183cae6c1ea0c18608336b522328 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 15 Jun 2022 12:11:00 +0200
Subject: [PATCH 40/60] Better story data

---
 addons/interactions/src/Panel.stories.tsx     |  18 ++-
 .../Interaction/Interaction.stories.tsx       |  18 ++-
 addons/interactions/src/mocks/index.ts        | 143 ++++++++++++++----
 3 files changed, 139 insertions(+), 40 deletions(-)

diff --git a/addons/interactions/src/Panel.stories.tsx b/addons/interactions/src/Panel.stories.tsx
index 6e3b1eca0476..cc6f37afdd09 100644
--- a/addons/interactions/src/Panel.stories.tsx
+++ b/addons/interactions/src/Panel.stories.tsx
@@ -4,7 +4,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
-import { getCall } from './mocks';
+import { getCalls, getInteractions } from './mocks';
 import { AddonPanelPure } from './Panel';
 import SubnavStories from './components/Subnav/Subnav.stories';
 
@@ -20,6 +20,8 @@ const StyledWrapper = styled.div(({ theme }) => ({
   overflow: 'auto',
 }));
 
+const interactions = getInteractions(CallStates.DONE);
+
 export default {
   title: 'Addons/Interactions/Panel',
   component: AddonPanelPure,
@@ -34,10 +36,10 @@ export default {
     layout: 'fullscreen',
   },
   args: {
-    calls: new Map(),
+    calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,
     controlStates: SubnavStories.args.controlStates,
-    interactions: [getCall(CallStates.DONE)],
+    interactions,
     fileName: 'addon-interactions.stories.tsx',
     hasException: false,
     isPlaying: false,
@@ -52,14 +54,14 @@ type Story = ComponentStoryObj<typeof AddonPanelPure>;
 
 export const Passing: Story = {
   args: {
-    interactions: [getCall(CallStates.DONE)],
+    interactions: getInteractions(CallStates.DONE),
   },
 };
 
 export const Paused: Story = {
   args: {
     isPlaying: true,
-    interactions: [getCall(CallStates.WAITING)],
+    interactions: getInteractions(CallStates.WAITING),
     controlStates: {
       debugger: true,
       start: false,
@@ -68,21 +70,21 @@ export const Paused: Story = {
       next: true,
       end: true,
     },
-    pausedAt: getCall(CallStates.WAITING).id,
+    pausedAt: interactions[interactions.length - 1].id,
   },
 };
 
 export const Playing: Story = {
   args: {
     isPlaying: true,
-    interactions: [getCall(CallStates.ACTIVE)],
+    interactions: getInteractions(CallStates.ACTIVE),
   },
 };
 
 export const Failed: Story = {
   args: {
     hasException: true,
-    interactions: [getCall(CallStates.ERROR)],
+    interactions: getInteractions(CallStates.ERROR),
   },
 };
 
diff --git a/addons/interactions/src/components/Interaction/Interaction.stories.tsx b/addons/interactions/src/components/Interaction/Interaction.stories.tsx
index 3fc5ab83b5ef..2089cef4a2a0 100644
--- a/addons/interactions/src/components/Interaction/Interaction.stories.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.stories.tsx
@@ -2,7 +2,7 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
-import { getCall } from '../../mocks';
+import { getCalls } from '../../mocks';
 
 import { Interaction } from './Interaction';
 import SubnavStories from '../Subnav/Subnav.stories';
@@ -13,7 +13,7 @@ export default {
   title: 'Addons/Interactions/Interaction',
   component: Interaction,
   args: {
-    callsById: new Map(),
+    callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
     controls: SubnavStories.args.controls,
     controlStates: SubnavStories.args.controlStates,
   },
@@ -21,25 +21,31 @@ export default {
 
 export const Active: Story = {
   args: {
-    call: getCall(CallStates.ACTIVE),
+    call: getCalls(CallStates.ACTIVE).slice(-1)[0],
   },
 };
 
 export const Waiting: Story = {
   args: {
-    call: getCall(CallStates.WAITING),
+    call: getCalls(CallStates.WAITING).slice(-1)[0],
   },
 };
 
 export const Failed: Story = {
   args: {
-    call: getCall(CallStates.ERROR),
+    call: getCalls(CallStates.ERROR).slice(-1)[0],
   },
 };
 
 export const Done: Story = {
   args: {
-    call: getCall(CallStates.DONE),
+    call: getCalls(CallStates.DONE).slice(-1)[0],
+  },
+};
+
+export const WithParent: Story = {
+  args: {
+    call: { ...getCalls(CallStates.DONE).slice(-1)[0], parentId: 'parent-id' },
   },
 };
 
diff --git a/addons/interactions/src/mocks/index.ts b/addons/interactions/src/mocks/index.ts
index 8113f28e26c5..e55fe4d88b8f 100644
--- a/addons/interactions/src/mocks/index.ts
+++ b/addons/interactions/src/mocks/index.ts
@@ -1,31 +1,122 @@
 import { CallStates, Call } from '@storybook/instrumenter';
 
-export const getCall = (status: CallStates): Call => {
-  const defaultData = {
-    id: 'addons-interactions-accountform--standard-email-filled [3] change',
-    cursor: 0,
-    path: ['fireEvent'],
-    method: 'change',
-    storyId: 'addons-interactions-accountform--standard-email-filled',
-    args: [
-      {
-        __callId__: 'addons-interactions-accountform--standard-email-filled [2] getByTestId',
-        retain: false,
-      },
-      {
-        target: {
-          value: 'michael@chromatic.com',
-        },
-      },
-    ],
-    interceptable: true,
-    retain: false,
-    status,
-  };
+export const getCalls = (finalStatus: CallStates) => {
+  const calls: Call[] = [
+    {
+      id: 'story--id [3] within',
+      storyId: 'story--id',
+      cursor: 3,
+      path: [],
+      method: 'within',
+      args: [{ __element__: { localName: 'div', id: 'root' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [4] findByText',
+      storyId: 'story--id',
+      cursor: 4,
+      path: [{ __callId__: 'story--id [3] within' }],
+      method: 'findByText',
+      args: ['Click'],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [5] click',
+      storyId: 'story--id',
+      cursor: 5,
+      path: ['userEvent'],
+      method: 'click',
+      args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 6,
+      path: [],
+      method: 'waitFor',
+      args: [{ __function__: { name: '' } }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [0] expect',
+      parentId: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 1,
+      path: [],
+      method: 'expect',
+      args: [{ __function__: { name: 'handleSubmit' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [1] stringMatching',
+      parentId: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 2,
+      path: ['expect'],
+      method: 'stringMatching',
+      args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+      parentId: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 3,
+      path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
+      method: 'toHaveBeenCalledWith',
+      args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [7] expect',
+      storyId: 'story--id',
+      cursor: 7,
+      path: [],
+      method: 'expect',
+      args: [{ __function__: { name: 'handleReset' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [8] toHaveBeenCalled',
+      storyId: 'story--id',
+      cursor: 8,
+      path: [{ __callId__: 'story--id [7] expect' }, 'not'],
+      method: 'toHaveBeenCalled',
+      args: [],
+      interceptable: true,
+      retain: false,
+      status: finalStatus,
+    },
+  ];
 
-  const overrides = CallStates.ERROR
-    ? { exception: { name: 'Error', stack: '', message: 'Oops!', callId: defaultData.id } }
-    : {};
+  if (finalStatus === CallStates.ERROR) {
+    calls[calls.length - 1].exception = {
+      name: 'Error',
+      stack: '',
+      message: 'Oops!',
+      callId: calls[calls.length - 1].id,
+    };
+  }
 
-  return { ...defaultData, ...overrides };
+  return calls;
 };
+
+export const getInteractions = (finalStatus: CallStates) =>
+  getCalls(finalStatus).filter((call) => call.interceptable);

From 18cf8c6c6d3a20b9a814d1315c99858b88a95367 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 15 Jun 2022 11:23:39 +0200
Subject: [PATCH 41/60] Add story book interaction row with parentId

---
 .../src/components/Interaction/Interaction.stories.tsx      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/addons/interactions/src/components/Interaction/Interaction.stories.tsx b/addons/interactions/src/components/Interaction/Interaction.stories.tsx
index 2089cef4a2a0..e8eb8b74b0e6 100644
--- a/addons/interactions/src/components/Interaction/Interaction.stories.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.stories.tsx
@@ -49,6 +49,12 @@ export const WithParent: Story = {
   },
 };
 
+export const WithParent: Story = {
+  args: {
+    call: { ...getCall(CallStates.DONE), parentId: 'parent-id' },
+  },
+};
+
 export const Disabled: Story = {
   args: { ...Done.args, controlStates: { ...SubnavStories.args.controlStates, goto: false } },
 };

From 2e23d67253c478826be404a4a355cf4905eb39a2 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 15 Jun 2022 12:11:00 +0200
Subject: [PATCH 42/60] Better story data

---
 .../src/components/Interaction/Interaction.stories.tsx      | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/addons/interactions/src/components/Interaction/Interaction.stories.tsx b/addons/interactions/src/components/Interaction/Interaction.stories.tsx
index e8eb8b74b0e6..2089cef4a2a0 100644
--- a/addons/interactions/src/components/Interaction/Interaction.stories.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.stories.tsx
@@ -49,12 +49,6 @@ export const WithParent: Story = {
   },
 };
 
-export const WithParent: Story = {
-  args: {
-    call: { ...getCall(CallStates.DONE), parentId: 'parent-id' },
-  },
-};
-
 export const Disabled: Story = {
   args: { ...Done.args, controlStates: { ...SubnavStories.args.controlStates, goto: false } },
 };

From 3285a9e6b7ce22f0a92d8c43da9ef1b61e304ccf Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 15 Jun 2022 15:50:34 +0200
Subject: [PATCH 43/60] Collapse child interactions

---
 addons/interactions/src/Panel.tsx             | 31 +++++++-
 .../components/Interaction/Interaction.tsx    | 70 +++++++++++++++----
 2 files changed, 86 insertions(+), 15 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index 2778d1c2f1d2..dc06587140f0 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -28,7 +28,12 @@ interface InteractionsPanelProps {
   active: boolean;
   controls: Controls;
   controlStates: ControlStates;
-  interactions: (Call & { status?: CallStates })[];
+  interactions: (Call & {
+    status?: CallStates;
+    childCallIds: Call['id'][];
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+  })[];
   fileName?: string;
   hasException?: boolean;
   isPlaying?: boolean;
@@ -97,6 +102,9 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
             callsById={calls}
             controls={controls}
             controlStates={controlStates}
+            childCallIds={call.childCallIds}
+            isExpanded={call.isExpanded}
+            toggleExpanded={call.toggleExpanded}
             pausedAt={pausedAt}
           />
         ))}
@@ -125,13 +133,32 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const [isPlaying, setPlaying] = React.useState(false);
   const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
   const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
+  const [expanded, setExpanded] = React.useState<Set<Call['id']>>(new Set());
 
   // Calls are tracked in a ref so we don't needlessly rerender.
   const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
   const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
 
   const [log, setLog] = React.useState<LogItem[]>([]);
-  const interactions = log.map(({ callId, status }) => ({ ...calls.current.get(callId), status }));
+  const childCallMap = new Map<Call['id'], Call['id'][]>();
+  const interactions = log
+    .filter((call) => {
+      if (!call.parentId) return true;
+      childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
+      return expanded.has(call.parentId);
+    })
+    .map(({ callId, status }) => ({
+      ...calls.current.get(callId),
+      status,
+      childCallIds: childCallMap.get(callId),
+      isExpanded: expanded.has(callId),
+      toggleExpanded: () =>
+        setExpanded((ids) => {
+          if (ids.has(callId)) ids.delete(callId);
+          else ids.add(callId);
+          return new Set(ids);
+        }),
+    }));
 
   const endRef = React.useRef();
   React.useEffect(() => {
diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index ec1672027aa7..a7fe2052957e 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { IconButton, Icons, TooltipNote, WithTooltip, Bar } from '@storybook/components';
 import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
@@ -55,9 +56,15 @@ const RowContainer = styled('div', {
     }
 );
 
+const RowHeader = styled.div<{ disabled: boolean }>(({ theme, disabled }) => ({
+  display: 'flex',
+  '&:hover': disabled ? {} : { background: theme.background.hoverable },
+}));
+
 const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].includes(prop) })<
   React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }
 >(({ theme, disabled, call }) => ({
+  flex: 1,
   display: 'grid',
   background: 'none',
   border: 0,
@@ -68,7 +75,6 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
   padding: '8px 15px',
   textAlign: 'start',
   cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
-  '&:hover': disabled ? {} : { background: theme.background.hoverable },
   '&:focus-visible': {
     outline: 0,
     boxShadow: `inset 3px 0 0 0 ${
@@ -81,6 +87,19 @@ const RowLabel = styled('button', { shouldForwardProp: (prop) => !['call'].inclu
   },
 }));
 
+const RowActions = styled.div(({ theme }) => ({
+  padding: 6,
+}));
+
+export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
+  color: theme.color.mediumdark,
+  margin: '0 3px',
+}));
+
+const Note = styled(TooltipNote)(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+}));
+
 const RowMessage = styled('div')(({ theme }) => ({
   padding: '8px 10px 8px 36px',
   fontSize: typography.size.s1,
@@ -112,29 +131,54 @@ export const Interaction = ({
   callsById,
   controls,
   controlStates,
+  childCallIds,
+  isExpanded,
+  toggleExpanded,
   pausedAt,
 }: {
   call: Call;
   callsById: Map<Call['id'], Call>;
   controls: Controls;
   controlStates: ControlStates;
+  childCallIds?: Call['id'][];
+  isExpanded: boolean;
+  toggleExpanded: () => void;
   pausedAt?: Call['id'];
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
   return (
     <RowContainer call={call} pausedAt={pausedAt}>
-      <RowLabel
-        call={call}
-        onClick={() => controls.goto(call.id)}
-        disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
-        onMouseEnter={() => controlStates.goto && setIsHovered(true)}
-        onMouseLeave={() => controlStates.goto && setIsHovered(false)}
-      >
-        <StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
-        <MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
-          <MethodCall call={call} callsById={callsById} />
-        </MethodCallWrapper>
-      </RowLabel>
+      <RowHeader disabled={!controlStates.goto || !call.interceptable || !!call.parentId}>
+        <RowLabel
+          call={call}
+          onClick={() => controls.goto(call.id)}
+          disabled={!controlStates.goto || !call.interceptable || !!call.parentId}
+          onMouseEnter={() => controlStates.goto && setIsHovered(true)}
+          onMouseLeave={() => controlStates.goto && setIsHovered(false)}
+        >
+          <StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
+          <MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
+            <MethodCall call={call} callsById={callsById} />
+          </MethodCallWrapper>
+        </RowLabel>
+        <RowActions>
+          {childCallIds?.length > 0 && (
+            <WithTooltip
+              hasChrome={false}
+              tooltip={
+                <Note
+                  note={`${isExpanded ? 'Hide' : 'Show'} interactions (${childCallIds.length})`}
+                />
+              }
+            >
+              <StyledIconButton containsIcon onClick={toggleExpanded}>
+                <Icons icon="listunordered" />
+              </StyledIconButton>
+            </WithTooltip>
+          )}
+        </RowActions>
+      </RowHeader>
+
       {call.status === CallStates.ERROR && call.exception?.callId === call.id && (
         <Exception exception={call.exception} />
       )}

From e39fb2277ad6d7c3f5fa5a2660f1f197acafc85e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 16 Jun 2022 15:21:16 +0200
Subject: [PATCH 44/60] Expand by default

---
 addons/interactions/src/Panel.tsx              | 18 +++++++++---------
 .../src/components/Interaction/Interaction.tsx | 12 ++++++------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index dc06587140f0..fcd6918cfcf5 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -31,8 +31,8 @@ interface InteractionsPanelProps {
   interactions: (Call & {
     status?: CallStates;
     childCallIds: Call['id'][];
-    isExpanded: boolean;
-    toggleExpanded: () => void;
+    isCollapsed: boolean;
+    toggleCollapsed: () => void;
   })[];
   fileName?: string;
   hasException?: boolean;
@@ -103,8 +103,8 @@ export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
             controls={controls}
             controlStates={controlStates}
             childCallIds={call.childCallIds}
-            isExpanded={call.isExpanded}
-            toggleExpanded={call.toggleExpanded}
+            isCollapsed={call.isCollapsed}
+            toggleCollapsed={call.toggleCollapsed}
             pausedAt={pausedAt}
           />
         ))}
@@ -133,7 +133,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const [isPlaying, setPlaying] = React.useState(false);
   const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
   const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
-  const [expanded, setExpanded] = React.useState<Set<Call['id']>>(new Set());
+  const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
 
   // Calls are tracked in a ref so we don't needlessly rerender.
   const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
@@ -145,15 +145,15 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
     .filter((call) => {
       if (!call.parentId) return true;
       childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
-      return expanded.has(call.parentId);
+      return !collapsed.has(call.parentId);
     })
     .map(({ callId, status }) => ({
       ...calls.current.get(callId),
       status,
       childCallIds: childCallMap.get(callId),
-      isExpanded: expanded.has(callId),
-      toggleExpanded: () =>
-        setExpanded((ids) => {
+      isCollapsed: collapsed.has(callId),
+      toggleCollapsed: () =>
+        setCollapsed((ids) => {
           if (ids.has(callId)) ids.delete(callId);
           else ids.add(callId);
           return new Set(ids);
diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index a7fe2052957e..768149e38f04 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -132,8 +132,8 @@ export const Interaction = ({
   controls,
   controlStates,
   childCallIds,
-  isExpanded,
-  toggleExpanded,
+  isCollapsed,
+  toggleCollapsed,
   pausedAt,
 }: {
   call: Call;
@@ -141,8 +141,8 @@ export const Interaction = ({
   controls: Controls;
   controlStates: ControlStates;
   childCallIds?: Call['id'][];
-  isExpanded: boolean;
-  toggleExpanded: () => void;
+  isCollapsed: boolean;
+  toggleCollapsed: () => void;
   pausedAt?: Call['id'];
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
@@ -167,11 +167,11 @@ export const Interaction = ({
               hasChrome={false}
               tooltip={
                 <Note
-                  note={`${isExpanded ? 'Hide' : 'Show'} interactions (${childCallIds.length})`}
+                  note={`${isCollapsed ? 'Show' : 'Hide'} interactions (${childCallIds.length})`}
                 />
               }
             >
-              <StyledIconButton containsIcon onClick={toggleExpanded}>
+              <StyledIconButton containsIcon onClick={toggleCollapsed}>
                 <Icons icon="listunordered" />
               </StyledIconButton>
             </WithTooltip>

From aa7f2b6dea36a934543238900c8568d65892d4e0 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 16 Jun 2022 15:21:37 +0200
Subject: [PATCH 45/60] Tweak anonymous function color

---
 addons/interactions/src/components/MethodCall.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/addons/interactions/src/components/MethodCall.tsx b/addons/interactions/src/components/MethodCall.tsx
index e74e02e6340e..fa792dce56aa 100644
--- a/addons/interactions/src/components/MethodCall.tsx
+++ b/addons/interactions/src/components/MethodCall.tsx
@@ -272,7 +272,11 @@ export const ClassNode = ({ name }: { name: string }) => {
 
 export const FunctionNode = ({ name }: { name: string }) => {
   const colors = useThemeColors();
-  return <span style={{ color: colors.function }}>{name || <i>anonymous</i>}</span>;
+  return name ? (
+    <span style={{ color: colors.function }}>{name}</span>
+  ) : (
+    <span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
+  );
 };
 
 export const ElementNode = ({

From 6fdd19c71a9a4feff7867684d13c59d61ddf9c6b Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 16 Jun 2022 15:56:47 +0200
Subject: [PATCH 46/60] Update
 addons/interactions/src/components/Interaction/Interaction.tsx

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>
---
 addons/interactions/src/components/Interaction/Interaction.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/interactions/src/components/Interaction/Interaction.tsx b/addons/interactions/src/components/Interaction/Interaction.tsx
index 768149e38f04..30922f8dc908 100644
--- a/addons/interactions/src/components/Interaction/Interaction.tsx
+++ b/addons/interactions/src/components/Interaction/Interaction.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IconButton, Icons, TooltipNote, WithTooltip, Bar } from '@storybook/components';
+import { IconButton, Icons, TooltipNote, WithTooltip } from '@storybook/components';
 import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';

From bf2ad5d99063c6560c70fb0f852ecb612bb076d1 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Sun, 19 Jun 2022 14:10:51 +1000
Subject: [PATCH 47/60] Created npm7 migration

---
 lib/cli/src/automigrate/fixes/npm7.ts      | 41 ++++++++++++++++++++++
 lib/cli/src/js-package-manager/NPMProxy.ts | 22 ++++++++++--
 2 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 lib/cli/src/automigrate/fixes/npm7.ts

diff --git a/lib/cli/src/automigrate/fixes/npm7.ts b/lib/cli/src/automigrate/fixes/npm7.ts
new file mode 100644
index 000000000000..74f40e6723d8
--- /dev/null
+++ b/lib/cli/src/automigrate/fixes/npm7.ts
@@ -0,0 +1,41 @@
+import chalk from 'chalk';
+import dedent from 'ts-dedent';
+import { Fix } from '../types';
+import { NPMProxy } from '../../js-package-manager/NPMProxy';
+
+interface Npm7RunOptions {
+  npmVersion: string;
+}
+
+/**
+ * Is the user using npm7+? If so create a .npmrc with legacy-peer-deps=true
+ */
+export const npm7: Fix<Npm7RunOptions> = {
+  id: 'npm7',
+
+  async check({ packageManager }) {
+    if (packageManager.type !== 'npm') return null;
+
+    const npmVersion = (packageManager as NPMProxy).getNpmVersion();
+    if ((packageManager as NPMProxy).needsLegacyPeerDeps(npmVersion)) {
+      return { npmVersion };
+    }
+    return null;
+  },
+
+  prompt({ npmVersion }) {
+    const npmFormatted = chalk.cyan(`npm ${npmVersion}`);
+    return dedent`
+      We've detected you are running ${npmFormatted} which has peer dependency semantics which Storybook is incompatible with.
+
+      In order to work with Storybook's package structure, you'll need to run \`npm\` with the
+      \`--legacy-peer-deps=true\` flag. We can generate an \`.npmrc\` which will do that automatically.
+      
+      More info: ${chalk.yellow('https://github.com/storybookjs/storybook/issues/18298')}
+    `;
+  },
+
+  async run({ packageManager }) {
+    (packageManager as NPMProxy).setLegacyPeerDeps();
+  },
+};
diff --git a/lib/cli/src/js-package-manager/NPMProxy.ts b/lib/cli/src/js-package-manager/NPMProxy.ts
index 052bb6fcd255..a75d7d2b69fd 100644
--- a/lib/cli/src/js-package-manager/NPMProxy.ts
+++ b/lib/cli/src/js-package-manager/NPMProxy.ts
@@ -18,10 +18,28 @@ export class NPMProxy extends JsPackageManager {
     return `npm run ${command}`;
   }
 
+  getNpmVersion(): string {
+    return this.executeCommand('npm', ['--version']);
+  }
+
+  hasLegacyPeerDeps() {
+    return (
+      this.executeCommand('npm', ['config', 'get', 'legacy-peer-deps', '--location=project']) ===
+      'true'
+    );
+  }
+
+  setLegacyPeerDeps() {
+    this.executeCommand('npm', ['config', 'set', 'legacy-peer-deps=true', '--location=project']);
+  }
+
+  needsLegacyPeerDeps(version: string) {
+    return semver.gte(version, '7.0.0') && !this.hasLegacyPeerDeps();
+  }
+
   getInstallArgs(): string[] {
     if (!this.installArgs) {
-      const version = this.executeCommand('npm', ['--version']);
-      this.installArgs = semver.gte(version, '7.0.0')
+      this.installArgs = this.needsLegacyPeerDeps(this.getNpmVersion())
         ? ['install', '--legacy-peer-deps']
         : ['install'];
     }

From 10afa9ea1923cc470b185cb93a262deb826252c9 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 20 Jun 2022 11:47:43 +1000
Subject: [PATCH 48/60] Add a test

---
 lib/cli/src/automigrate/fixes/npm7.test.ts | 47 ++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 lib/cli/src/automigrate/fixes/npm7.test.ts

diff --git a/lib/cli/src/automigrate/fixes/npm7.test.ts b/lib/cli/src/automigrate/fixes/npm7.test.ts
new file mode 100644
index 000000000000..83346ccdfaf1
--- /dev/null
+++ b/lib/cli/src/automigrate/fixes/npm7.test.ts
@@ -0,0 +1,47 @@
+import { NPMProxy } from '../../js-package-manager/NPMProxy';
+import { npm7 } from './npm7';
+
+const mockExecuteCommand = jest.fn();
+class MockedNPMProxy extends NPMProxy {
+  executeCommand(...args) {
+    return mockExecuteCommand(...args);
+  }
+}
+
+function mockExecuteResults(map: Record<string, string>) {
+  mockExecuteCommand.mockImplementation((command, args) => {
+    const commandString = `${command} ${args.join(' ')}`;
+    if (map[commandString]) return map[commandString];
+
+    throw new Error(`Unexpected execution of '${commandString}'`);
+  });
+}
+
+describe('npm7 fix', () => {
+  describe('npm < 7', () => {
+    it('does not match', async () => {
+      mockExecuteResults({ 'npm --version': '6.0.0' });
+      expect(await npm7.check({ packageManager: new MockedNPMProxy() })).toEqual(null);
+    });
+  });
+
+  describe('npm 7+', () => {
+    it('matches if config is not installed', async () => {
+      mockExecuteResults({
+        'npm --version': '7.0.0',
+        'npm config get legacy-peer-deps --location=project': 'false',
+      });
+      expect(await npm7.check({ packageManager: new MockedNPMProxy() })).toEqual({
+        npmVersion: '7.0.0',
+      });
+    });
+
+    it('does not match if config is installed', async () => {
+      mockExecuteResults({
+        'npm --version': '7.0.0',
+        'npm config get legacy-peer-deps --location=project': 'true',
+      });
+      expect(await npm7.check({ packageManager: new MockedNPMProxy() })).toEqual(null);
+    });
+  });
+});

From f0169ca02e9ce2192bdec1f9cb4b0e3212efd76b Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Mon, 20 Jun 2022 12:33:03 +1000
Subject: [PATCH 49/60] Use node14 in netlify

---
 netlify.toml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/netlify.toml b/netlify.toml
index b390f857e386..8dc12b5ad1e3 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -2,7 +2,7 @@
   publish = "built-storybooks"
   command = "yarn bootstrap --core && yarn build-storybooks --all"
 [build.environment]
-  NODE_VERSION = "12"
+  NODE_VERSION = "14"
   YARN_VERSION = "1.22.10"
   DOTENV_DISPLAY_WARNING = "none"
   STORYBOOK_EXAMPLE_APP ="true"

From 565304c8d7d34aed35c9ad2bb7e0136cd1676a12 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 20 Jun 2022 14:19:24 +0200
Subject: [PATCH 50/60] Reset instrumenter state on HMR

---
 lib/instrumenter/src/instrumenter.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
index 4b8253cd3548..86b5f64cc4b1 100644
--- a/lib/instrumenter/src/instrumenter.ts
+++ b/lib/instrumenter/src/instrumenter.ts
@@ -133,6 +133,9 @@ export class Instrumenter {
     this.channel.on(STORY_RENDER_PHASE_CHANGED, ({ storyId, newPhase }) => {
       const { isDebugging } = this.getState(storyId);
       this.setState(storyId, { renderPhase: newPhase });
+      if (newPhase === 'preparing' && isDebugging) {
+        resetState({ storyId });
+      }
       if (newPhase === 'playing') {
         resetState({ storyId, isDebugging });
       }

From 815ac936e2cef55d83575c22cc4de3073dd7ee1d Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 20 Jun 2022 14:49:27 +0200
Subject: [PATCH 51/60] Prevent showing child exception while parent is still
 playing

---
 addons/interactions/src/Panel.tsx | 36 ++++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index fcd6918cfcf5..c2d5f6672872 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -140,6 +140,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
 
   const [log, setLog] = React.useState<LogItem[]>([]);
+  const callsById = new Map<Call['id'], Call>();
   const childCallMap = new Map<Call['id'], Call['id'][]>();
   const interactions = log
     .filter((call) => {
@@ -147,18 +148,29 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
       childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
       return !collapsed.has(call.parentId);
     })
-    .map(({ callId, status }) => ({
-      ...calls.current.get(callId),
-      status,
-      childCallIds: childCallMap.get(callId),
-      isCollapsed: collapsed.has(callId),
-      toggleCollapsed: () =>
-        setCollapsed((ids) => {
-          if (ids.has(callId)) ids.delete(callId);
-          else ids.add(callId);
-          return new Set(ids);
-        }),
-    }));
+    .map(({ callId, status }) => {
+      const call = calls.current.get(callId);
+      const value = {
+        ...call,
+        status,
+        childCallIds: childCallMap.get(callId),
+        isCollapsed: collapsed.has(callId),
+        toggleCollapsed: () =>
+          setCollapsed((ids) => {
+            if (ids.has(callId)) ids.delete(callId);
+            else ids.add(callId);
+            return new Set(ids);
+          }),
+      };
+      if (
+        status === CallStates.ERROR &&
+        callsById.get(call.parentId)?.status === CallStates.ACTIVE
+      ) {
+        value.status = CallStates.ACTIVE;
+      }
+      callsById.set(callId, value);
+      return value;
+    });
 
   const endRef = React.useRef();
   React.useEffect(() => {

From f45a51cbcebf545cb8e2bb7d761b270a7d8a143d Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Mon, 20 Jun 2022 15:25:35 +0200
Subject: [PATCH 52/60] Small refactor

---
 addons/interactions/src/Panel.tsx | 66 +++++++++++++++----------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
index c2d5f6672872..0b8325166ace 100644
--- a/addons/interactions/src/Panel.tsx
+++ b/addons/interactions/src/Panel.tsx
@@ -134,44 +134,12 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const [isRerunAnimating, setIsRerunAnimating] = React.useState(false);
   const [scrollTarget, setScrollTarget] = React.useState<HTMLElement>();
   const [collapsed, setCollapsed] = React.useState<Set<Call['id']>>(new Set());
+  const [log, setLog] = React.useState<LogItem[]>([]);
 
   // Calls are tracked in a ref so we don't needlessly rerender.
   const calls = React.useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
   const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
 
-  const [log, setLog] = React.useState<LogItem[]>([]);
-  const callsById = new Map<Call['id'], Call>();
-  const childCallMap = new Map<Call['id'], Call['id'][]>();
-  const interactions = log
-    .filter((call) => {
-      if (!call.parentId) return true;
-      childCallMap.set(call.parentId, (childCallMap.get(call.parentId) || []).concat(call.callId));
-      return !collapsed.has(call.parentId);
-    })
-    .map(({ callId, status }) => {
-      const call = calls.current.get(callId);
-      const value = {
-        ...call,
-        status,
-        childCallIds: childCallMap.get(callId),
-        isCollapsed: collapsed.has(callId),
-        toggleCollapsed: () =>
-          setCollapsed((ids) => {
-            if (ids.has(callId)) ids.delete(callId);
-            else ids.add(callId);
-            return new Set(ids);
-          }),
-      };
-      if (
-        status === CallStates.ERROR &&
-        callsById.get(call.parentId)?.status === CallStates.ACTIVE
-      ) {
-        value.status = CallStates.ACTIVE;
-      }
-      callsById.set(callId, value);
-      return value;
-    });
-
   const endRef = React.useRef();
   React.useEffect(() => {
     let observer: IntersectionObserver;
@@ -224,6 +192,38 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
   const showStatus = log.length > 0 && !isPlaying;
   const hasException = log.some((item) => item.status === CallStates.ERROR);
 
+  const interactions = React.useMemo(() => {
+    const callsById = new Map<Call['id'], Call>();
+    const childCallMap = new Map<Call['id'], Call['id'][]>();
+    return log
+      .filter(({ callId, parentId }) => {
+        if (!parentId) return true;
+        childCallMap.set(parentId, (childCallMap.get(parentId) || []).concat(callId));
+        return !collapsed.has(parentId);
+      })
+      .map(({ callId, status }) => ({ ...calls.current.get(callId), status } as Call))
+      .map((call) => {
+        const status =
+          call.status === CallStates.ERROR &&
+          callsById.get(call.parentId)?.status === CallStates.ACTIVE
+            ? CallStates.ACTIVE
+            : call.status;
+        callsById.set(call.id, { ...call, status });
+        return {
+          ...call,
+          status,
+          childCallIds: childCallMap.get(call.id),
+          isCollapsed: collapsed.has(call.id),
+          toggleCollapsed: () =>
+            setCollapsed((ids) => {
+              if (ids.has(call.id)) ids.delete(call.id);
+              else ids.add(call.id);
+              return new Set(ids);
+            }),
+        };
+      });
+  }, [log, collapsed]);
+
   return (
     <React.Fragment key="interactions">
       <TabStatus>

From e17e0f04a415a6cf8d06a4307d1873efff601559 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Tue, 21 Jun 2022 13:31:48 +1000
Subject: [PATCH 53/60] Actually run the npm7 migration

---
 lib/cli/src/automigrate/fixes/index.ts     |  2 ++
 lib/cli/src/js-package-manager/NPMProxy.ts | 11 +++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/lib/cli/src/automigrate/fixes/index.ts b/lib/cli/src/automigrate/fixes/index.ts
index 566162243ed3..7cc92a1bba40 100644
--- a/lib/cli/src/automigrate/fixes/index.ts
+++ b/lib/cli/src/automigrate/fixes/index.ts
@@ -5,6 +5,7 @@ import { vue3 } from './vue3';
 import { mainjsFramework } from './mainjsFramework';
 import { eslintPlugin } from './eslint-plugin';
 import { builderVite } from './builder-vite';
+import { npm7 } from './npm7';
 import { Fix } from '../types';
 
 export * from '../types';
@@ -16,4 +17,5 @@ export const fixes: Fix[] = [
   mainjsFramework,
   eslintPlugin,
   builderVite,
+  npm7,
 ];
diff --git a/lib/cli/src/js-package-manager/NPMProxy.ts b/lib/cli/src/js-package-manager/NPMProxy.ts
index a75d7d2b69fd..8f74cf57e446 100644
--- a/lib/cli/src/js-package-manager/NPMProxy.ts
+++ b/lib/cli/src/js-package-manager/NPMProxy.ts
@@ -23,10 +23,13 @@ export class NPMProxy extends JsPackageManager {
   }
 
   hasLegacyPeerDeps() {
-    return (
-      this.executeCommand('npm', ['config', 'get', 'legacy-peer-deps', '--location=project']) ===
-      'true'
-    );
+    const result = this.executeCommand('npm', [
+      'config',
+      'get',
+      'legacy-peer-deps',
+      '--location=project',
+    ]);
+    return result.trim() === 'true';
   }
 
   setLegacyPeerDeps() {

From 0e3bd7af0b3f7d57295f6e705d39a61e0937b99f Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 22 Jun 2022 16:00:24 +0200
Subject: [PATCH 54/60] upgrade @storybook/testing-library to next

---
 addons/interactions/package.json              |   2 +-
 examples/angular-cli/package.json             |   2 +-
 examples/official-storybook/package.json      |   2 +-
 examples/svelte-kitchen-sink/package.json     |   2 +-
 examples/vue-3-cli/package.json               |   2 +-
 examples/vue-kitchen-sink/package.json        |   2 +-
 .../web-components-kitchen-sink/package.json  |   2 +-
 package.json                                  |   2 +-
 yarn.lock                                     | 150 ++++++++++++++++--
 9 files changed, 145 insertions(+), 21 deletions(-)

diff --git a/addons/interactions/package.json b/addons/interactions/package.json
index d86a5ae3e0f2..a9cdfc2204d0 100644
--- a/addons/interactions/package.json
+++ b/addons/interactions/package.json
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@storybook/jest": "^0.0.5",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "formik": "^2.2.9"
   },
   "peerDependencies": {
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index cf04964c67aa..a4144d29e1bb 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -54,7 +54,7 @@
     "@storybook/babel-plugin-require-context-hook": "1.0.1",
     "@storybook/jest": "^0.0.5",
     "@storybook/source-loader": "6.5.0-rc.1",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "@types/core-js": "^2.5.4",
     "@types/jest": "^26.0.16",
     "@types/node": "^14.14.20 || ^16.0.0",
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 1bd706b5591d..35f2cb44eb4d 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -36,7 +36,7 @@
     "@storybook/react": "6.5.0-rc.1",
     "@storybook/router": "6.5.0-rc.1",
     "@storybook/source-loader": "6.5.0-rc.1",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "@storybook/theming": "6.5.0-rc.1",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/user-event": "^13.1.9",
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 881a8306072f..9d6edc94512f 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -24,7 +24,7 @@
     "@storybook/jest": "^0.0.5",
     "@storybook/source-loader": "6.5.0-rc.1",
     "@storybook/svelte": "6.5.0-rc.1",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "svelte-jester": "1.3.0",
     "svelte-preprocess": "4.6.8"
   },
diff --git a/examples/vue-3-cli/package.json b/examples/vue-3-cli/package.json
index f2f4f3481380..f87414b6d097 100644
--- a/examples/vue-3-cli/package.json
+++ b/examples/vue-3-cli/package.json
@@ -20,7 +20,7 @@
     "@storybook/addon-links": "6.5.0-rc.1",
     "@storybook/addon-storyshots": "6.5.0-rc.1",
     "@storybook/jest": "^0.0.5",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "@storybook/vue3": "6.5.0-rc.1",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 29d40181469a..042c6c94925d 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -27,7 +27,7 @@
     "@storybook/addons": "6.5.0-rc.1",
     "@storybook/jest": "^0.0.5",
     "@storybook/source-loader": "6.5.0-rc.1",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "@storybook/vue": "6.5.0-rc.1",
     "@vue/babel-preset-jsx": "^1.2.4",
     "babel-loader": "^8.0.0",
diff --git a/examples/web-components-kitchen-sink/package.json b/examples/web-components-kitchen-sink/package.json
index 9fc08ebcee34..f13f2d0481ab 100644
--- a/examples/web-components-kitchen-sink/package.json
+++ b/examples/web-components-kitchen-sink/package.json
@@ -51,7 +51,7 @@
     "@storybook/source-loader": "portal:../../lib/source-loader",
     "@storybook/store": "portal:../../lib/store",
     "@storybook/telemetry": "portal:../../lib/telemetry",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "@storybook/theming": "portal:../../lib/theming",
     "@storybook/ui": "portal:../../lib/ui",
     "@storybook/web-components": "portal:../../app/web-components",
diff --git a/package.json b/package.json
index 0713dc02c531..8695fe63253f 100644
--- a/package.json
+++ b/package.json
@@ -185,7 +185,7 @@
     "@storybook/store": "workspace:*",
     "@storybook/svelte": "workspace:*",
     "@storybook/telemetry": "workspace:*",
-    "@storybook/testing-library": "^0.0.7",
+    "@storybook/testing-library": "0.0.14-next.0",
     "@storybook/theming": "workspace:*",
     "@storybook/ui": "workspace:*",
     "@storybook/vue": "workspace:*",
diff --git a/yarn.lock b/yarn.lock
index 342557e467ed..be9ddfd72d27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6681,7 +6681,7 @@ __metadata:
     "@storybook/csf": 0.0.2--canary.4566f4d.1
     "@storybook/instrumenter": 6.5.0-rc.1
     "@storybook/jest": ^0.0.5
-    "@storybook/testing-library": ^0.0.7
+    "@storybook/testing-library": 0.0.14-next.0
     "@storybook/theming": 6.5.0-rc.1
     core-js: ^3.8.2
     formik: ^2.2.9
@@ -7051,6 +7051,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addons@npm:6.5.9":
+  version: 6.5.9
+  resolution: "@storybook/addons@npm:6.5.9"
+  dependencies:
+    "@storybook/api": 6.5.9
+    "@storybook/channels": 6.5.9
+    "@storybook/client-logger": 6.5.9
+    "@storybook/core-events": 6.5.9
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.9
+    "@storybook/theming": 6.5.9
+    "@types/webpack-env": ^1.16.0
+    core-js: ^3.8.2
+    global: ^4.4.0
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 3ee3e61abc7bff6b481374597cc6717936685222b187d173462483d77d9b284fe5650e9764f7232ae80678e4718440d712f182c01c16887d53c77a1abe262616
+  languageName: node
+  linkType: hard
+
 "@storybook/angular@6.5.0-rc.1, @storybook/angular@workspace:*, @storybook/angular@workspace:app/angular":
   version: 0.0.0-use.local
   resolution: "@storybook/angular@workspace:app/angular"
@@ -7200,6 +7222,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/api@npm:6.5.9":
+  version: 6.5.9
+  resolution: "@storybook/api@npm:6.5.9"
+  dependencies:
+    "@storybook/channels": 6.5.9
+    "@storybook/client-logger": 6.5.9
+    "@storybook/core-events": 6.5.9
+    "@storybook/csf": 0.0.2--canary.4566f4d.1
+    "@storybook/router": 6.5.9
+    "@storybook/semver": ^7.3.2
+    "@storybook/theming": 6.5.9
+    core-js: ^3.8.2
+    fast-deep-equal: ^3.1.3
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+    store2: ^2.12.0
+    telejson: ^6.0.8
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 6f3aaed66c27715740397ff80a01fda1e363e75165c90cb5f50e4effc00e91b2d1f58b506d2279e83a905f794988e9aaaa75d5b7380c192c954f8c6520368d67
+  languageName: node
+  linkType: hard
+
 "@storybook/babel-plugin-require-context-hook@npm:1.0.1":
   version: 1.0.1
   resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1"
@@ -7375,6 +7425,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/channels@npm:6.5.9":
+  version: 6.5.9
+  resolution: "@storybook/channels@npm:6.5.9"
+  dependencies:
+    core-js: ^3.8.2
+    ts-dedent: ^2.0.0
+    util-deprecate: ^1.0.2
+  checksum: 3011663b754fe9028076b2a27573c6ca2040eb227918c315b9e6ea4d23298b1ac305e26aa4e89c02c9120ddd475d0f49d42bcb287b84cb37953c5f99606c3ed1
+  languageName: node
+  linkType: hard
+
 "@storybook/cli@6.5.0-rc.1, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli"
@@ -7470,6 +7531,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:6.5.9, @storybook/client-logger@npm:^6.4.0":
+  version: 6.5.9
+  resolution: "@storybook/client-logger@npm:6.5.9"
+  dependencies:
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: 764aacff6859c2cfe93f90498504e6628d8c7606490f1eec835639e21f177b10f0e93cad605dadf0ca6e08f6d5e62153597de6c80570ae65d76b4c71b6884e09
+  languageName: node
+  linkType: hard
+
 "@storybook/codemod@6.5.0-rc.1, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
@@ -7651,6 +7722,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/core-events@npm:6.5.9":
+  version: 6.5.9
+  resolution: "@storybook/core-events@npm:6.5.9"
+  dependencies:
+    core-js: ^3.8.2
+  checksum: 5d9eb651ef528330bebe9048eec61d4e3af29fabcf3cc8d7572a94f199e2220dfa738c19d65a761de5ec377d7933316af5eb2bfd0dc8c4027cd7dd57951552bd
+  languageName: node
+  linkType: hard
+
 "@storybook/core-server@6.5.0-rc.1, @storybook/core-server@workspace:lib/core-server":
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:lib/core-server"
@@ -8026,6 +8106,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/instrumenter@npm:^6.4.0":
+  version: 6.5.9
+  resolution: "@storybook/instrumenter@npm:6.5.9"
+  dependencies:
+    "@storybook/addons": 6.5.9
+    "@storybook/client-logger": 6.5.9
+    "@storybook/core-events": 6.5.9
+    core-js: ^3.8.2
+    global: ^4.4.0
+  checksum: df6e535759540c09cb0addd65250121a10767ea7f43d6452417208eb09f565250f52c4417c707c964b61da063ee06d15c7aa3baaa86a0a585768fc94cdb8f31d
+  languageName: node
+  linkType: hard
+
 "@storybook/jest@npm:^0.0.5":
   version: 0.0.5
   resolution: "@storybook/jest@npm:0.0.5"
@@ -8497,7 +8590,7 @@ __metadata:
     "@storybook/store": "workspace:*"
     "@storybook/svelte": "workspace:*"
     "@storybook/telemetry": "workspace:*"
-    "@storybook/testing-library": ^0.0.7
+    "@storybook/testing-library": 0.0.14-next.0
     "@storybook/theming": "workspace:*"
     "@storybook/ui": "workspace:*"
     "@storybook/vue": "workspace:*"
@@ -8705,6 +8798,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/router@npm:6.5.9":
+  version: 6.5.9
+  resolution: "@storybook/router@npm:6.5.9"
+  dependencies:
+    "@storybook/client-logger": 6.5.9
+    core-js: ^3.8.2
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 765977adbcaa1d06958489bd1316056c35f712f04c603a3848ed04dea3155f65369a085759913ccf19ffda3de41d429f455fbc330c3bcf7b3fdc65e9a3ddd320
+  languageName: node
+  linkType: hard
+
 "@storybook/semver@npm:^7.3.2":
   version: 7.3.2
   resolution: "@storybook/semver@npm:7.3.2"
@@ -8851,16 +8960,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/testing-library@npm:^0.0.7":
-  version: 0.0.7
-  resolution: "@storybook/testing-library@npm:0.0.7"
+"@storybook/testing-library@npm:0.0.14-next.0":
+  version: 0.0.14-next.0
+  resolution: "@storybook/testing-library@npm:0.0.14-next.0"
   dependencies:
-    "@storybook/client-logger": 6.4.0-rc.5
-    "@storybook/instrumenter": 6.4.0-rc.5
+    "@storybook/client-logger": ^6.4.0
+    "@storybook/instrumenter": ^6.4.0
     "@testing-library/dom": ^8.3.0
     "@testing-library/user-event": ^13.2.1
     ts-dedent: ^2.2.0
-  checksum: 6be4b2d418195417cd0a04e5a4f2b71a93364cb88780084714a0553c39e6b38943458511b25b101c830b332783afec98a40eefcdc663dca3f34e8f48609a4670
+  checksum: fd10ebddd305743f4388ad939b90fed155b6c3a755e96a73f72d38d9afe2546a22be0c9a5d83b8b6d91742dd7be5d2e7dfcbbd630b2fa97e4ef7dde00f0824b0
   languageName: node
   linkType: hard
 
@@ -8924,6 +9033,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:6.5.9":
+  version: 6.5.9
+  resolution: "@storybook/theming@npm:6.5.9"
+  dependencies:
+    "@storybook/client-logger": 6.5.9
+    core-js: ^3.8.2
+    memoizerific: ^1.11.3
+    regenerator-runtime: ^0.13.7
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 28b2626ab2ef4396d3e8d0fad651bf13b323318028e7b01a99c9b999f368655d7aa78dd8154396753828746d934cfbaee1575c890307893d6a3cca9655c9a60e
+  languageName: node
+  linkType: hard
+
 "@storybook/ui@6.5.0-rc.1, @storybook/ui@workspace:*, @storybook/ui@workspace:lib/ui":
   version: 0.0.0-use.local
   resolution: "@storybook/ui@workspace:lib/ui"
@@ -12959,7 +13083,7 @@ __metadata:
     "@storybook/babel-plugin-require-context-hook": 1.0.1
     "@storybook/jest": ^0.0.5
     "@storybook/source-loader": 6.5.0-rc.1
-    "@storybook/testing-library": ^0.0.7
+    "@storybook/testing-library": 0.0.14-next.0
     "@types/core-js": ^2.5.4
     "@types/jest": ^26.0.16
     "@types/node": ^14.14.20 || ^16.0.0
@@ -34018,7 +34142,7 @@ __metadata:
     "@storybook/react": 6.5.0-rc.1
     "@storybook/router": 6.5.0-rc.1
     "@storybook/source-loader": 6.5.0-rc.1
-    "@storybook/testing-library": ^0.0.7
+    "@storybook/testing-library": 0.0.14-next.0
     "@storybook/theming": 6.5.0-rc.1
     "@testing-library/dom": ^7.31.2
     "@testing-library/user-event": ^13.1.9
@@ -42980,7 +43104,7 @@ __metadata:
     "@storybook/jest": ^0.0.5
     "@storybook/source-loader": 6.5.0-rc.1
     "@storybook/svelte": 6.5.0-rc.1
-    "@storybook/testing-library": ^0.0.7
+    "@storybook/testing-library": 0.0.14-next.0
     global: ^4.4.0
     svelte-jester: 1.3.0
     svelte-preprocess: 4.6.8
@@ -45921,7 +46045,7 @@ __metadata:
     "@storybook/addon-links": 6.5.0-rc.1
     "@storybook/addon-storyshots": 6.5.0-rc.1
     "@storybook/jest": ^0.0.5
-    "@storybook/testing-library": ^0.0.7
+    "@storybook/testing-library": 0.0.14-next.0
     "@storybook/vue3": 6.5.0-rc.1
     "@vue/cli-plugin-babel": ~4.5.0
     "@vue/cli-plugin-typescript": ~4.5.0
@@ -46018,7 +46142,7 @@ __metadata:
     "@storybook/addons": 6.5.0-rc.1
     "@storybook/jest": ^0.0.5
     "@storybook/source-loader": 6.5.0-rc.1
-    "@storybook/testing-library": ^0.0.7
+    "@storybook/testing-library": 0.0.14-next.0
     "@storybook/vue": 6.5.0-rc.1
     "@vue/babel-preset-jsx": ^1.2.4
     babel-loader: ^8.0.0

From 2d011763bb4ec191fed2002c36cc6765b0190212 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 24 Jun 2022 12:48:45 -0600
Subject: [PATCH 55/60] Fix /docs 404s

---
 docs/configure/overview.md                |   4 +-
 docs/configure/story-rendering.md         |   2 +-
 docs/configure/styling-and-css.md         |   4 +-
 docs/faq.md                               | 140 ++++++++++------------
 docs/frameworks.js                        |  10 +-
 docs/writing-tests/interaction-testing.md |   4 +-
 6 files changed, 78 insertions(+), 86 deletions(-)

diff --git a/docs/configure/overview.md b/docs/configure/overview.md
index c2a7fa44c02c..5cc0081afff2 100644
--- a/docs/configure/overview.md
+++ b/docs/configure/overview.md
@@ -28,7 +28,7 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as
 
 - `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
 - `addons` - a list of the [addons](https://storybook.js.org/addons/) you are using.
-- `webpackFinal` - custom [webpack configuration](./webpack.md#extending-storybooks-webpack-config).
+- `webpackFinal` - custom [webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config).
 - `babel` - custom [babel configuration](./babel.md).
 - `framework` - framework specific configurations to help the loading and building process.
 
@@ -185,7 +185,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
 | `features`            | Enables Storybook's additional features.<br/> See table below for a list of available features `features: { storyStoreV7: true }`                                                |
 | `refs`                | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }`                      |
 | `logLevel`            | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'`                                                                              |
-| `webpackFinal`        | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                               |
+| `webpackFinal`        | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }`                                                     |
 | `env`                 | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
 
 ## Configure story rendering
diff --git a/docs/configure/story-rendering.md b/docs/configure/story-rendering.md
index 360dde244f14..f930fe1e3765 100644
--- a/docs/configure/story-rendering.md
+++ b/docs/configure/story-rendering.md
@@ -2,7 +2,7 @@
 title: 'Story rendering'
 ---
 
-In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
+In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](../builders/webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
 
 ## Adding to &#60;head&#62;
 
diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index 2253874499fb..a6c01a6589bf 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -10,7 +10,7 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in
 
 ### Importing CSS files
 
-If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](./webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
+If your component files import their CSS, Storybook's webpack configuration will work out of the box. The noticeable exception to this is if you're using a CSS precompiler. In this case, you can either install and configure a Storybook preset (e.g., [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss)), or customize [Storybook's webpack configuration](../builders/webpack.md#extending-storybooks-webpack-config) and include the appropriate loader.
 
 <FeatureSnippets paths={['configure/css-troubleshooting/angular.mdx']} />
 
@@ -18,4 +18,4 @@ To use your CSS in all stories, you import it in [`.storybook/preview.js`](./ove
 
 ### Adding webfonts
 
-If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
\ No newline at end of file
+If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
diff --git a/docs/faq.md b/docs/faq.md
index f05062edf05e..21f9d717989d 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -145,72 +145,70 @@ With the release of version 6.0, we updated our documentation as well. That does
 
 We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
 
-
-| Section          | Page                                      | Current Location                                                                  | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
-|------------------|-------------------------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| Get started      | Install                                   | [See current documentation](./get-started/install.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |
-|                  | What's a story                            | [See current documentation](./get-started/whats-a-story.md)                       | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
-|                  | Browse Stories                            | [See current documentation](./get-started/browse-stories.md)                      | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
-|                  | Setup                                     | [See current documentation](./get-started/setup.md)                               | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
-| Write stories    | Introduction                              | [See current documentation](./writing-stories/introduction.md)                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
-|                  | Parameters                                | [See current documentation](./writing-stories/parameters.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters)                                                                                                                   | Non existing feature or undocumented                                                                                                                     |
-|                  | Decorators                                | [See current documentation](./writing-stories/decorators.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators)                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
-|                  | Naming components and hierarchy           | [See current documentation](./writing-stories/naming-components-and-hierarchy.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
-|                  | Build pages and screens                   | [See current documentation](./writing-stories/build-pages-with-storybook.md)      | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories for multiple components           | [See current documentation](./writing-stories/stories-for-multiple-components.md) | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Write docs       | DocsPage                                  | [See current documentation](./writing-docs/docs-page.md)                          | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
-|                  | MDX                                       | [See current documentation](./writing-docs/mdx.md)                                | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Argstable                      | [See current documentation](./writing-docs/doc-block-argstable.md)                | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Canvas                         | [See current documentation](./writing-docs/doc-block-canvas.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)             | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Description                    | [See current documentation](./writing-docs/doc-block-description.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Icon Gallery                   | [See current documentation](./writing-docs/doc-block-icongallery.md)              | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Source                         | [See current documentation](./writing-docs/doc-block-source.md)                   | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Story                          | [See current documentation](./writing-docs/doc-block-story.md)                    | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Doc Blocks/Typeset                        | [See current documentation](./writing-docs/doc-block-typeset.md)                  | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
-|                  | Preview and build docs                    | [See current documentation](./writing-docs/build-documentation.md)                | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Testing          | Visual tests                              | [See current documentation](./writing-tests/visual-testing.md)                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing)                 |
-|                  | Accessibility tests                       | [See current documentation](./writing-tests/accessibility-testing.md)             | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Interaction tests                         | [See current documentation](./writing-tests/interaction-testing.md)               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing)                                                                                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing)                      |
-|                  | Snapshot tests                            | [See current documentation](./writing-tests/snapshot-testing.md)                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing)                       |
-|                  | Import stories in tests                   | [See current documentation](./writing-tests/importing-stories-in-tests.md)        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing)                         |
-| Sharing          | Publish Storybook                         | [See current documentation](./sharing/publish-storybook.md)                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook)                       |
-|                  | Embed                                     | [See current documentation](./sharing/embed.md)                                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Composition                               | [See current documentation](./sharing/storybook-composition.md)                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Package Composition                       | [See current documentation](./sharing/package-composition.md)                     | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Essential addons | Controls                                  | [See current documentation](./essentials/controls.md)                             | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs)                                                                                                                     | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs)         |
-|                  | Actions                                   | [See current documentation](./essentials/actions.md)                              | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions)                                                                                                                                                        | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions)                                            |
-|                  | Viewport                                  | [See current documentation](./essentials/viewport.md)                             | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport)                                                                                                                                                       | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport)                                           |
-|                  | Backgrounds                               | [See current documentation](./essentials/backgrounds.md)                          | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds)                                                                                                                                                    | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds)                                        |
-|                  | Toolbars and globals                      | [See current documentation](./essentials/toolbars-and-globals.md)                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide)                                                                                                                                         | Non existing feature or undocumented                                                                                                                     |
-| Configure        | Overview                                  | [See current documentation](./configure/overview.md)                              | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
-|                  | Integration/Babel                         | [See current documentation](./configure/babel.md)                                 | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config)                                                                                                             | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
-|                  | Integration/Typescript                    | [See current documentation](./configure/typescript.md)                            | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config)                 |
-|                  | Integration/Styling and CSS               | [See current documentation](./configure/styling-and-css.md)                       | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
-|                  | Integration/Images and assets             | [See current documentation](./configure/images-and-assets.md)                     | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
-|                  | Story rendering                           | [See current documentation](./configure/story-rendering.md)                       | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags)         |
-|                  | Story Layout                              | [See current documentation](./configure/story-layout.md)                          | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | User Interface/Features and behavior      | [See current documentation](./configure/features-and-behavior.md)                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
-|                  | User Interface/Theming                    | [See current documentation](./configure/theming.md)                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming)                           |
-|                  | User Interface/Sidebar & URLS             | [See current documentation](./configure/sidebar-and-urls.md)                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
-|                  | Environment variables                     | [See current documentation](./configure/environment-variables.md)                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars)                          |
-| Builders         | Introduction                              | [See current documentation](./builders/overview.md)                               | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Vite                                      | [See current documentation](./builders/vite.md)                                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Webpack                                   | [See current documentation](./builders/webpack.md)                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md)                                                                                                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md)    |
-|                  | Builder API                               | [See current documentation](./builders/builder-api.md)                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-| Addons           | Introduction                              | [See current documentation](./addons/introduction.md)                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
-|                  | Install addons                            | [See current documentation](./addons/install-addons.md)                           | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/)                                                                                                                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/)                             |
-|                  | Writing Addons                            | [See current documentation](./addons/writing-addons.md)                           | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
-|                  | Writing Presets                           | [See current documentation](./addons/writing-presets.md)                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets)                                                                                                                                      | Non existing feature or undocumented                                                                                                                     |
-|                  | Addons Knowledge Base                     | [See current documentation](./addons/addon-knowledge-base.md)                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
-|                  | Types of addons                           | [See current documentation](./addons/addon-types.md)                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | Addons API                                | [See current documentation](./addons/addons-api.md)                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api)                                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api)                                       |
-| API              | Stories/Component Story Format            | [See current documentation](./api/csf.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format)                                                                                                                               | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories/MDX syntax                        | [See current documentation](./api/mdx.md)                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax)                                                                                                                                           | Non existing feature or undocumented                                                                                                                     |
-|                  | Stories/StoriesOF format (see note below) | [See current documentation](../lib/core/docs/storiesOf.md)                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
-|                  | Frameworks                                | [See current documentation](./api/new-frameworks.md)                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
-|                  | CLI options                               | [See current documentation](./api/cli-options.md)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
-
+| Section          | Page                                      | Current Location                                                                                           | Version 5.3 location                                                                                                                                                                                                                                                 | Version 5.0 location                                                                                                                                     |
+| ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Get started      | Install                                   | [See current documentation](./get-started/install.md)                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide)                         |
+|                  | What's a story                            | [See current documentation](./get-started/whats-a-story.md)                                                | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
+|                  | Browse Stories                            | [See current documentation](./get-started/browse-stories.md)                                               | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides)                        |
+|                  | Setup                                     | [See current documentation](./get-started/setup.md)                                                        | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides)                                                                                                                                    | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides)                        |
+| Write stories    | Introduction                              | [See current documentation](./writing-stories/introduction.md)                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
+|                  | Parameters                                | [See current documentation](./writing-stories/parameters.md)                                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters)                                                                                                                   | Non existing feature or undocumented                                                                                                                     |
+|                  | Decorators                                | [See current documentation](./writing-stories/decorators.md)                                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators)                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) |
+|                  | Naming components and hierarchy           | [See current documentation](./writing-stories/naming-components-and-hierarchy.md)                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
+|                  | Build pages and screens                   | [See current documentation](./writing-stories/build-pages-with-storybook.md)                               | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories for multiple components           | [See current documentation](./writing-stories/stories-for-multiple-components.md)                          | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Write docs       | DocsPage                                  | [See current documentation](./writing-docs/docs-page.md)                                                   | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
+|                  | MDX                                       | [See current documentation](./writing-docs/mdx.md)                                                         | See versioned addon documentation                                                                                                                                                                                                                                    | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Argstable                      | [See current documentation](./writing-docs/doc-block-argstable.md)                                         | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Canvas                         | [See current documentation](./writing-docs/doc-block-canvas.md)                                            | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Color Palette                  | [See current documentation](./writing-docs/doc-block-colorpalette.md)                                      | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Description                    | [See current documentation](./writing-docs/doc-block-description.md)                                       | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Icon Gallery                   | [See current documentation](./writing-docs/doc-block-icongallery.md)                                       | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Source                         | [See current documentation](./writing-docs/doc-block-source.md)                                            | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Story                          | [See current documentation](./writing-docs/doc-block-story.md)                                             | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Doc Blocks/Typeset                        | [See current documentation](./writing-docs/doc-block-typeset.md)                                           | [See versioned addon documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/docs/)                                                                                                                                                          | Non existing feature or undocumented                                                                                                                     |
+|                  | Preview and build docs                    | [See current documentation](./writing-docs/build-documentation.md)                                         | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Testing          | Visual tests                              | [See current documentation](./writing-tests/visual-testing.md)                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing)                 |
+|                  | Accessibility tests                       | [See current documentation](./writing-tests/accessibility-testing.md)                                      | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Interaction tests                         | [See current documentation](./writing-tests/interaction-testing.md)                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing)                                                                                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing)                      |
+|                  | Snapshot tests                            | [See current documentation](./writing-tests/snapshot-testing.md)                                           | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing)                       |
+|                  | Import stories in tests                   | [See current documentation](./writing-tests/importing-stories-in-tests.md)                                 | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing)                                                                                                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing)                         |
+| Sharing          | Publish Storybook                         | [See current documentation](./sharing/publish-storybook.md)                                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook)                       |
+|                  | Embed                                     | [See current documentation](./sharing/embed.md)                                                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Composition                               | [See current documentation](./sharing/storybook-composition.md)                                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Package Composition                       | [See current documentation](./sharing/package-composition.md)                                              | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Essential addons | Controls                                  | [See current documentation](./essentials/controls.md)                                                      | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs)                                                                                                                     | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs)         |
+|                  | Actions                                   | [See current documentation](./essentials/actions.md)                                                       | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions)                                                                                                                                                        | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions)                                            |
+|                  | Viewport                                  | [See current documentation](./essentials/viewport.md)                                                      | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport)                                                                                                                                                       | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport)                                           |
+|                  | Backgrounds                               | [See current documentation](./essentials/backgrounds.md)                                                   | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds)                                                                                                                                                    | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds)                                        |
+|                  | Toolbars and globals                      | [See current documentation](./essentials/toolbars-and-globals.md)                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide)                                                                                                                                         | Non existing feature or undocumented                                                                                                                     |
+| Configure        | Overview                                  | [See current documentation](./configure/overview.md)                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories)                           |
+|                  | Integration/Babel                         | [See current documentation](./configure/babel.md)                                                          | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config)                                                                                                             | See versioned documentation here and [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) |
+|                  | Integration/Typescript                    | [See current documentation](./configure/typescript.md)                                                     | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config)                 |
+|                  | Integration/Styling and CSS               | [See current documentation](./configure/styling-and-css.md)                                                | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
+|                  | Integration/Images and assets             | [See current documentation](./configure/images-and-assets.md)                                              | See versioned documentation                                                                                                                                                                                                                                          | See versioned documentation                                                                                                                              |
+|                  | Story rendering                           | [See current documentation](./configure/story-rendering.md)                                                | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags)         |
+|                  | Story Layout                              | [See current documentation](./configure/story-layout.md)                                                   | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | User Interface/Features and behavior      | [See current documentation](./configure/features-and-behavior.md)                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
+|                  | User Interface/Theming                    | [See current documentation](./configure/theming.md)                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming)                                                                                                                                       | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming)                           |
+|                  | User Interface/Sidebar & URLS             | [See current documentation](./configure/sidebar-and-urls.md)                                               | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter)                                                                                                                             | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter)                 |
+|                  | Environment variables                     | [See current documentation](./configure/environment-variables.md)                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars)                                                                                                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars)                          |
+| Builders         | Introduction                              | [See current documentation](./builders/overview.md)                                                        | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Vite                                      | [See current documentation](./builders/vite.md)                                                            | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Webpack                                   | [See current documentation](./builders/webpack.md)                                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.md)                                                                                                                | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.md)    |
+|                  | Builder API                               | [See current documentation](./builders/builder-api.md)                                                     | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+| Addons           | Introduction                              | [See current documentation](./addons/introduction.md)                                                      | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
+|                  | Install addons                            | [See current documentation](./addons/install-addons.md)                                                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/)                                                                                                                                         | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/)                             |
+|                  | Writing Addons                            | [See current documentation](./addons/writing-addons.md)                                                    | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
+|                  | Writing Presets                           | [See current documentation](./addons/writing-presets.md)                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets)                                                                                                                                      | Non existing feature or undocumented                                                                                                                     |
+|                  | Addons Knowledge Base                     | [See current documentation](./addons/addon-knowledge-base.md)                                              | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons)                                                                                                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons)                            |
+|                  | Types of addons                           | [See current documentation](./addons/addon-types.md)                                                       | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | Addons API                                | [See current documentation](./addons/addons-api.md)                                                        | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api)                                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api)                                       |
+| API              | Stories/Component Story Format            | [See current documentation](./api/csf.md)                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format)                                                                                                                               | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories/MDX syntax                        | [See current documentation](./api/mdx.md)                                                                  | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/mdx-syntax)                                                                                                                                           | Non existing feature or undocumented                                                                                                                     |
+|                  | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/next/lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api)                                                                                                                                        | Non existing feature or undocumented                                                                                                                     |
+|                  | Frameworks                                | [See current documentation](./api/new-frameworks.md)                                                       | Non existing feature or undocumented                                                                                                                                                                                                                                 | Non existing feature or undocumented                                                                                                                     |
+|                  | CLI options                               | [See current documentation](./api/cli-options.md)                                                          | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
 
 <div class="aside">
 With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
@@ -285,7 +283,6 @@ See our documentation on how to customize the [Storyshots configuration](./writi
 
 Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
 
-
 ### Why aren't my code blocks highlighted with Storybook MDX
 
 Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
@@ -341,7 +338,6 @@ You'll need to update it to make it compatible with MDX 2.
 
 See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information.
 
-
 ### Why can't I import my own stories into MDX 2?
 
 This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
@@ -351,12 +347,11 @@ This is a known issue with MDX 2. We're working to fix it. For now you can apply
 
 import { Story } from '@storybook/addon-docs';
 
-import * as stories from './Button.stories.jsx';
+import \* as stories from './Button.stories.jsx';
 
 <Story name="Basic" story={stories.Basic} />
 ```
 
-
 ### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
 
 If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
@@ -399,8 +394,6 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t
 
 No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
 
-
-
 ### How can my code detect if it is running in Storybook?
 
 You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
@@ -477,11 +470,10 @@ export default {
 
 There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
 
-
 ### How does Storybook handles enviroment variables?
 
 Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
 
 To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
 
-Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
\ No newline at end of file
+Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
diff --git a/docs/frameworks.js b/docs/frameworks.js
index e634b6612c45..8d2e1156f7b8 100644
--- a/docs/frameworks.js
+++ b/docs/frameworks.js
@@ -117,27 +117,27 @@ module.exports = {
         {
           name: 'Source',
           unsupported: [],
-          path: 'writing-docs/doc-blocks#source',
+          path: 'writing-docs/doc-block-source',
         },
         {
           name: 'Dynamic source',
           supported: ['react', 'vue', 'angular', 'svelte', 'web-components', 'html'],
-          path: 'writing-docs/doc-blocks#source',
+          path: 'writing-docs/doc-block-source',
         },
         {
           name: 'Args Table',
           supported: ['react', 'vue', 'angular', 'html', 'ember', 'web-components', 'svelte'],
-          path: 'writing-docs/doc-blocks#argstable',
+          path: 'writing-docs/doc-block-argstable',
         },
         {
           name: 'Description',
           supported: ['react', 'vue', 'angular', 'ember', 'web-components'],
-          path: 'writing-docs/doc-blocks#description',
+          path: 'writing-docs/doc-block-description',
         },
         {
           name: 'Inline stories',
           supported: ['react', 'vue', 'web-components', 'html', 'svelte', 'angular'],
-          path: 'writing-docs/doc-blocks#inline-rendering',
+          path: 'writing-docs/docs-page#inline-stories-vs-iframe-stories',
         },
       ],
     },
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 1b86c56dfc01..d4d74ea0ca48 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -157,7 +157,7 @@ Interaction tests can be expensive to maintain when applied wholesale to every c
 
 - [Test runner](./test-runner.md) to automate test execution
 - [Visual tests](./visual-testing.md) for appearance
-- [Accessibility tests](accessibility-testing.md) for accessibility
+- [Accessibility tests](./accessibility-testing.md) for accessibility
 - Interaction tests for user behavior simulation
 - [Snapshot tests](./snapshot-testing.md) for rendering errors and warnings
-- [Import stories in other tests](./importing-stories-in-tests.md) for other tools
\ No newline at end of file
+- [Import stories in other tests](./importing-stories-in-tests.md) for other tools

From 338923712270c47f95b5dd64444c44c08865d7c6 Mon Sep 17 00:00:00 2001
From: Joshua <62268199+minimalsm@users.noreply.github.com>
Date: Fri, 24 Jun 2022 20:20:54 +0100
Subject: [PATCH 56/60] Update whats-a-story.md

---
 docs/get-started/whats-a-story.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 8425cc063cfc..c349c1768787 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -93,6 +93,6 @@ Stories are also helpful for checking that UI continues to look correct as you m
   />
 </video>
 
-Checking component’s stories as you develop helps prevent accidental regressions. Tools that integrate with Storybook can also [automate](../writing-tests/introduction.md) this for you.
+Checking component’s stories as you develop helps prevent accidental regressions. [Tools that integrate with Storybook can automate this](../writing-tests/introduction.md) for you.
 
 Now that we’ve seen the basic anatomy of a story let’s see how we use Storybook’s UI to develop stories.

From b0cf7bbb558762a4951d105839992e0d4e63372b Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 24 Jun 2022 14:38:09 -0600
Subject: [PATCH 57/60] Fix formatting of `docs/faq.md`

- Prettier screwed it up in 2d011763bb
---
 docs/faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/faq.md b/docs/faq.md
index 21f9d717989d..cc1dec1ca45a 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -347,7 +347,7 @@ This is a known issue with MDX 2. We're working to fix it. For now you can apply
 
 import { Story } from '@storybook/addon-docs';
 
-import \* as stories from './Button.stories.jsx';
+import * as stories from './Button.stories.jsx';
 
 <Story name="Basic" story={stories.Basic} />
 ```

From c57c1015570c4c8300313e7ed14ea404a29cf7e9 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 24 Jun 2022 16:36:20 -0600
Subject: [PATCH 58/60] Fix syntax error in `test-runner.md`

---
 docs/writing-tests/test-runner.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 1940f87630c0..e72bd8205454 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -45,7 +45,6 @@ Start your Storybook with:
     'angular/storybook-run-dev.with-builder.js.mdx',
     'common/storybook-run-dev.yarn.js.mdx',
     'common/storybook-run-dev.npm.js.mdx',
-
   ]}
 />
 

From a86531d10d64a6515c416ff465d5863944299bff Mon Sep 17 00:00:00 2001
From: Sruthi Sanigarapu <sruthigithub@gmail.com>
Date: Mon, 20 Jun 2022 23:37:25 -0500
Subject: [PATCH 59/60] Update document to show storybook initialization using
 npm.

npx storybook init command is installing storybook using yarn by
default on projects that use npm. This leads to clobbering of package.lock
when storybook addons are installed  using npm. This update will show users
how to initialize storybook using npm.
---
 docs/get-started/installation-problems/angular.mdx | 7 +++++++
 docs/get-started/installation-problems/ember.mdx   | 7 +++++++
 docs/get-started/installation-problems/preact.mdx  | 7 +++++++
 docs/get-started/installation-problems/react.mdx   | 7 +++++++
 docs/get-started/installation-problems/svelte.mdx  | 7 +++++++
 docs/get-started/installation-problems/vue.mdx     | 7 +++++++
 6 files changed, 42 insertions(+)

diff --git a/docs/get-started/installation-problems/angular.mdx b/docs/get-started/installation-problems/angular.mdx
index 773e23f801ac..c0c463e548bf 100644
--- a/docs/get-started/installation-problems/angular.mdx
+++ b/docs/get-started/installation-problems/angular.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --use-npm
+  ```
+
 - Add the `--type angular` flag to the installation command to set up Storybook manually:
 
   ```shell
diff --git a/docs/get-started/installation-problems/ember.mdx b/docs/get-started/installation-problems/ember.mdx
index 23856fe3d542..7a7698e3d84b 100644
--- a/docs/get-started/installation-problems/ember.mdx
+++ b/docs/get-started/installation-problems/ember.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --use-npm
+  ```
+
 - Add the `--type ember` flag to the installation command to set up Storybook manually:
 
   ```shell
diff --git a/docs/get-started/installation-problems/preact.mdx b/docs/get-started/installation-problems/preact.mdx
index 3b1a2b94a1bd..593f0c13ef33 100644
--- a/docs/get-started/installation-problems/preact.mdx
+++ b/docs/get-started/installation-problems/preact.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+
+  ```shell
+  npx storybook init --use-npm
+  ```
+
 - Add the `--type preact` flag to the installation command to set up Storybook manually:
 
   ```shell
diff --git a/docs/get-started/installation-problems/react.mdx b/docs/get-started/installation-problems/react.mdx
index 36f517bcdaff..0acc6ef29f97 100644
--- a/docs/get-started/installation-problems/react.mdx
+++ b/docs/get-started/installation-problems/react.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+  
+  ```shell
+  npx storybook init --use-npm
+  ```
+
 - Add the `--type react` flag to the installation command to set up Storybook manually:
 
   ```shell
diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx
index 2b53693d98c8..68f248b11ec8 100644
--- a/docs/get-started/installation-problems/svelte.mdx
+++ b/docs/get-started/installation-problems/svelte.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+  
+  ```shell
+  npx storybook init --use-npm
+  ```
+
 - Add the `--type svelte` flag to the installation command to set up Storybook manually:
 
   ```shell
diff --git a/docs/get-started/installation-problems/vue.mdx b/docs/get-started/installation-problems/vue.mdx
index 61ab98ead519..d0c276ff4970 100644
--- a/docs/get-started/installation-problems/vue.mdx
+++ b/docs/get-started/installation-problems/vue.mdx
@@ -1,3 +1,10 @@
+- Storybook's CLI provides support for both [Yarn](https://yarnpkg.com/) and [npm](https://www.npmjs.com/) package managers.
+  If you have Yarn installed in your environment but prefer to use npm as your default package manager add the `--use-npm` flag to your installation command. For example:
+  
+  ```shell
+  npx storybook init --use-npm
+  ```
+
 - Add the `--type vue` (for Vue 2), or `--type vue3` (for Vue 3) flag to the installation command to set up Storybook manually:
 
   ```shell

From 19d9cc2ba3b89af8d967f6183167a553ba6a216c Mon Sep 17 00:00:00 2001
From: Matthew Smith <matthew.smith@replicant.ai>
Date: Sat, 18 Jun 2022 22:24:29 -0400
Subject: [PATCH 60/60] Add html framework examples for the introduction docs

---
 .../button-story-component-decorator.js.mdx   | 21 ++++++++++++
 .../button-story-component-decorator.ts.mdx   | 23 +++++++++++++
 .../html/button-story-default-exports.js.mdx  | 13 ++++++++
 .../html/button-story-default-exports.ts.mdx  | 15 +++++++++
 .../html/button-story-rename-story.js.mdx     | 16 ++++++++++
 .../html/button-story-rename-story.ts.mdx     | 18 +++++++++++
 .../html/button-story-using-args.js.mdx       | 26 +++++++++++++++
 .../html/button-story-using-args.ts.mdx       | 27 ++++++++++++++++
 .../html/button-story-with-args.js.mdx        |  2 ++
 .../html/button-story-with-args.ts.mdx        | 11 +++++--
 .../html/button-story-with-blue-args.js.mdx   | 25 +++++++++++++++
 .../html/button-story-with-blue-args.ts.mdx   | 27 ++++++++++++++++
 .../html/button-story-with-emojis.js.mdx      | 16 ++++++++++
 .../html/button-story-with-emojis.ts.mdx      | 17 ++++++++++
 docs/snippets/html/button-story.js.mdx        |  2 ++
 docs/snippets/html/button-story.ts.mdx        |  2 ++
 docs/snippets/html/list-story-expanded.js.mdx | 27 ++++++++++++++++
 docs/snippets/html/list-story-expanded.ts.mdx | 29 +++++++++++++++++
 .../html/list-story-reuse-data.js.mdx         | 22 +++++++++++++
 .../html/list-story-reuse-data.ts.mdx         | 32 +++++++++++++++++++
 docs/snippets/html/list-story-starter.js.mdx  | 12 +++++++
 docs/snippets/html/list-story-starter.ts.mdx  | 14 ++++++++
 docs/writing-stories/args.md                  |  2 ++
 docs/writing-stories/introduction.md          | 20 ++++++++++++
 24 files changed, 417 insertions(+), 2 deletions(-)
 create mode 100644 docs/snippets/html/button-story-component-decorator.js.mdx
 create mode 100644 docs/snippets/html/button-story-component-decorator.ts.mdx
 create mode 100644 docs/snippets/html/button-story-default-exports.js.mdx
 create mode 100644 docs/snippets/html/button-story-default-exports.ts.mdx
 create mode 100644 docs/snippets/html/button-story-rename-story.js.mdx
 create mode 100644 docs/snippets/html/button-story-rename-story.ts.mdx
 create mode 100644 docs/snippets/html/button-story-using-args.js.mdx
 create mode 100644 docs/snippets/html/button-story-using-args.ts.mdx
 create mode 100644 docs/snippets/html/button-story-with-blue-args.js.mdx
 create mode 100644 docs/snippets/html/button-story-with-blue-args.ts.mdx
 create mode 100644 docs/snippets/html/button-story-with-emojis.js.mdx
 create mode 100644 docs/snippets/html/button-story-with-emojis.ts.mdx
 create mode 100644 docs/snippets/html/list-story-expanded.js.mdx
 create mode 100644 docs/snippets/html/list-story-expanded.ts.mdx
 create mode 100644 docs/snippets/html/list-story-reuse-data.js.mdx
 create mode 100644 docs/snippets/html/list-story-reuse-data.ts.mdx
 create mode 100644 docs/snippets/html/list-story-starter.js.mdx
 create mode 100644 docs/snippets/html/list-story-starter.ts.mdx

diff --git a/docs/snippets/html/button-story-component-decorator.js.mdx b/docs/snippets/html/button-story-component-decorator.js.mdx
new file mode 100644
index 000000000000..c87cb62adbb8
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.js.mdx
@@ -0,0 +1,21 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  decorators: [(story) => {
+    const decorator = document.createElement('div');
+    decorator.style.margin = '3em';
+    decorator.appendChild(story());
+    return decorator;
+  }],
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-component-decorator.ts.mdx b/docs/snippets/html/button-story-component-decorator.ts.mdx
new file mode 100644
index 000000000000..d1a4efaa4258
--- /dev/null
+++ b/docs/snippets/html/button-story-component-decorator.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  decorators: [(story) => {
+    const decorator = document.createElement('div');
+    decorator.style.margin = '3em';
+    decorator.appendChild(story());
+    return decorator;
+  }],
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-exports.js.mdx
new file mode 100644
index 000000000000..c6bbe5bf64f1
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.js.mdx
@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+};
+```
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-exports.ts.mdx
new file mode 100644
index 000000000000..e294d98b1b40
--- /dev/null
+++ b/docs/snippets/html/button-story-default-exports.ts.mdx
@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts
+
+import { Meta } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+```
diff --git a/docs/snippets/html/button-story-rename-story.js.mdx b/docs/snippets/html/button-story-rename-story.js.mdx
new file mode 100644
index 000000000000..3f13f148ce43
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+
+export const Primary = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-rename-story.ts.mdx b/docs/snippets/html/button-story-rename-story.ts.mdx
new file mode 100644
index 000000000000..0b37196b9a41
--- /dev/null
+++ b/docs/snippets/html/button-story-rename-story.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```
diff --git a/docs/snippets/html/button-story-using-args.js.mdx b/docs/snippets/html/button-story-using-args.js.mdx
new file mode 100644
index 000000000000..9df04fd6e394
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-using-args.ts.mdx b/docs/snippets/html/button-story-using-args.ts.mdx
new file mode 100644
index 000000000000..759858bf1da4
--- /dev/null
+++ b/docs/snippets/html/button-story-using-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```
diff --git a/docs/snippets/html/button-story-with-args.js.mdx b/docs/snippets/html/button-story-with-args.js.mdx
index 60feb2014547..8d71b288cef9 100644
--- a/docs/snippets/html/button-story-with-args.js.mdx
+++ b/docs/snippets/html/button-story-with-args.js.mdx
@@ -1,4 +1,6 @@
 ```js
+// Button.stories.js
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story-with-args.ts.mdx b/docs/snippets/html/button-story-with-args.ts.mdx
index 3130fc260de7..9b75446177ee 100644
--- a/docs/snippets/html/button-story-with-args.ts.mdx
+++ b/docs/snippets/html/button-story-with-args.ts.mdx
@@ -1,16 +1,23 @@
 ```ts
+// Button.stories.ts
+
 import { Meta, StoryFn } from '@storybook/html';
 
+type ButtonArgs = {
+  primary: boolean;
+  label: string;
+}
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta;
+} as Meta<ButtonArgs>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: StoryFn = (args): HTMLButtonElement => {
+const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => {
   const btn = document.createElement('button');
   btn.innerText = args.label;
 
diff --git a/docs/snippets/html/button-story-with-blue-args.js.mdx b/docs/snippets/html/button-story-with-blue-args.js.mdx
new file mode 100644
index 000000000000..5cb8981ad168
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.js.mdx
@@ -0,0 +1,25 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+
+export const Primary = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-blue-args.ts.mdx b/docs/snippets/html/button-story-with-blue-args.ts.mdx
new file mode 100644
index 000000000000..906845b4f472
--- /dev/null
+++ b/docs/snippets/html/button-story-with-blue-args.ts.mdx
@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+```
diff --git a/docs/snippets/html/button-story-with-emojis.js.mdx b/docs/snippets/html/button-story-with-emojis.js.mdx
new file mode 100644
index 000000000000..b6b9b43ec295
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.js.mdx
@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story-with-emojis.ts.mdx b/docs/snippets/html/button-story-with-emojis.ts.mdx
new file mode 100644
index 000000000000..47a1f99f8ee1
--- /dev/null
+++ b/docs/snippets/html/button-story-with-emojis.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+export const Primary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```
diff --git a/docs/snippets/html/button-story.js.mdx b/docs/snippets/html/button-story.js.mdx
index 743c489eff80..6268687c428b 100644
--- a/docs/snippets/html/button-story.js.mdx
+++ b/docs/snippets/html/button-story.js.mdx
@@ -1,4 +1,6 @@
 ```js
+// Button.stories.js
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
diff --git a/docs/snippets/html/button-story.ts.mdx b/docs/snippets/html/button-story.ts.mdx
index 104aa6ccbd19..62e72638171e 100644
--- a/docs/snippets/html/button-story.ts.mdx
+++ b/docs/snippets/html/button-story.ts.mdx
@@ -1,4 +1,6 @@
 ```ts
+// Button.stories.ts
+
 import { Meta, StoryFn } from '@storybook/html';
 
 export default {
diff --git a/docs/snippets/html/list-story-expanded.js.mdx b/docs/snippets/html/list-story-expanded.js.mdx
new file mode 100644
index 000000000000..b9cbe7d627f1
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.js.mdx
@@ -0,0 +1,27 @@
+
+```js
+// List.stories.js
+
+import { createList } from  './List';
+import { createListItem } from './ListItem';
+
+export default {
+  title: 'List',
+};
+
+export const Empty = (args) => createList(args);
+
+export const OneItem = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-expanded.ts.mdx b/docs/snippets/html/list-story-expanded.ts.mdx
new file mode 100644
index 000000000000..81e14d1162a4
--- /dev/null
+++ b/docs/snippets/html/list-story-expanded.ts.mdx
@@ -0,0 +1,29 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+import { createListItem } from './ListItem';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+export const Empty: StoryFn<ListArgs> = (args) => createList(args);
+
+export const OneItem: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
new file mode 100644
index 000000000000..a58833617912
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -0,0 +1,22 @@
+
+```js
+// List.stories.js
+
+import { createList } from  './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  title: 'List',
+};
+
+export const ManyItems = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem(Selected.args));
+  list.appendChild(createListItem(Unselected.args));
+  list.appendChild(createListItem(Unselected.args));
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
new file mode 100644
index 000000000000..434bec00d690
--- /dev/null
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -0,0 +1,32 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+export const Empty: StoryFn<ListArgs> = (args) => createList(args);
+
+export const OneItem: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem(Selected.args));
+  list.appendChild(createListItem(Unselected.args));
+  list.appendChild(createListItem(Unselected.args));
+  return list;
+};
+```
diff --git a/docs/snippets/html/list-story-starter.js.mdx b/docs/snippets/html/list-story-starter.js.mdx
new file mode 100644
index 000000000000..8e4959b468d3
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.js.mdx
@@ -0,0 +1,12 @@
+```js
+// List.stories.js
+
+import { createList } from  './List';
+
+export default {
+  title: 'List',
+};
+
+// Always an empty list, not super interesting
+const Template = (args) => createList(args);
+```
diff --git a/docs/snippets/html/list-story-starter.ts.mdx b/docs/snippets/html/list-story-starter.ts.mdx
new file mode 100644
index 000000000000..e0706e6c0827
--- /dev/null
+++ b/docs/snippets/html/list-story-starter.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+// Always an empty list, not super interesting
+const Template: StoryFn<ListArgs> = (args) => createList(args);
+```
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index b7b5ac95c273..6d10a8faab72 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -33,6 +33,8 @@ To define the args of a single story, use the `args` CSF story key:
     'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
+    'html/button-story-with-args.ts.mdx',
+    'html/button-story-with-args.js.mdx',
   ]}
 />
 
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 96ca9925fffa..15e4c456516b 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -37,6 +37,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
     'angular/button-story-default-export-with-component.ts.mdx',
     'svelte/button-story-default-export-with-component.js.mdx',
     'web-components/button-story-default-export-with-component.js.mdx',
+    'html/button-story-default-export.js.mdx',
+    'html/button-story-default-export.ts.mdx',
   ]}
 />
 
@@ -59,6 +61,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'svelte/button-story.js.mdx',
     'svelte/button-story.native-format.mdx',
     'web-components/button-story.js.mdx',
+    'html/button-story.js.mdx',
+    'html/button-story.ts.mdx',
   ]}
 />
 
@@ -99,6 +103,8 @@ You can rename any particular story you need. For instance, to give it a more ac
     'angular/button-story-rename-story.ts.mdx',
     'svelte/button-story-rename-story.js.mdx',
     'web-components/button-story-rename-story.js.mdx',
+    'html/button-story-rename-story.js.mdx',
+    'html/button-story-rename-story.ts.mdx',
   ]}
 />
 
@@ -127,6 +133,8 @@ A story is a function that describes how to render a component. You can have mul
     'svelte/button-story-with-emojis.native-format.mdx',
     'svelte/button-story-with-emojis.mdx.mdx',
     'web-components/button-story-with-emojis.js.mdx',
+    'html/button-story-with-emojis.js.mdx',
+    'html/button-story-with-emojis.ts.mdx',
   ]}
 />
 
@@ -152,6 +160,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
     'svelte/button-story-using-args.js.mdx',
     'svelte/button-story-using-args.native-format.mdx',
     'web-components/button-story-using-args.js.mdx',
+    'html/button-story-using-args.js.mdx',
+    'html/button-story-using-args.ts.mdx',
   ]}
 />
 
@@ -254,6 +264,8 @@ For instance, suppose you wanted to test your Button component against a differe
     'svelte/button-story-with-blue-args.native-format.mdx',
     'svelte/button-story-with-blue-args.mdx.mdx',
     'web-components/button-story-with-blue-args.js.mdx',
+    'html/button-story-with-blue-args.js.mdx',
+    'html/button-story-with-blue-args.ts.mdx',
   ]}
 />
 
@@ -286,6 +298,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'svelte/button-story-component-decorator.native-format.mdx',
     'svelte/button-story-component-decorator.mdx.mdx',
     'web-components/button-story-component-decorator.js.mdx',
+    'html/button-story-component-decorator.js.mdx',
+    'html/button-story-component-decorator.ts.mdx',
   ]}
 />
 
@@ -310,6 +324,8 @@ When building design systems or component libraries, you may have two or more co
     'vue/list-story-starter.ts-3.ts.mdx',
     'svelte/list-story-starter.native-format.mdx',
     'web-components/list-story-starter.js.mdx',
+    'html/list-story-starter.js.mdx',
+    'html/list-story-starter.ts.mdx',
   ]}
 />
 
@@ -330,6 +346,8 @@ In such cases, it makes sense to render a different function for each story:
     'vue/list-story-expanded.ts-3.ts.mdx',
     'svelte/list-story-expanded.native-format.mdx',
     'web-components/list-story-expanded.js.mdx',
+    'html/list-story-expanded.js.mdx',
+    'html/list-story-expanded.ts.mdx',
   ]}
 />
 
@@ -349,6 +367,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
     'vue/list-story-reuse-data.3.js.mdx',
     'vue/list-story-reuse-data.ts-3.ts.mdx',
     'web-components/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.ts.mdx',
   ]}
 />