Flatten components list and pull out InteractionsPanel from Panel

addons/interactions/src/Panel.tsx

@@ -8,48 +8,11 @@ import {
   STORY_RENDER_PHASE_CHANGED,
   STORY_THREW_EXCEPTION,
 } from '@storybook/core-events';
-import { AddonPanel, Link, Placeholder } from '@storybook/components';
 import { EVENTS, Call, CallStates, ControlStates, LogItem } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
-import { StatusIcon } from './components/StatusIcon/StatusIcon';
-import { Subnav } from './components/Subnav/Subnav';
-import { Interaction } from './components/Interaction/Interaction';
-
-export interface Controls {
-  start: (args: any) => void;
-  back: (args: any) => void;
-  goto: (args: any) => void;
-  next: (args: any) => void;
-  end: (args: any) => void;
-  rerun: (args: any) => void;
-}
-
-interface AddonPanelProps {
-  active: boolean;
-}
-
-interface InteractionsPanelProps {
-  active: boolean;
-  controls: Controls;
-  controlStates: ControlStates;
-  interactions: (Call & {
-    status?: CallStates;
-    childCallIds: Call['id'][];
-    isCollapsed: boolean;
-    toggleCollapsed: () => void;
-  })[];
-  fileName?: string;
-  hasException?: boolean;
-  caughtException?: Error;
-  isPlaying?: boolean;
-  pausedAt?: Call['id'];
-  calls: Map<string, any>;
-  endRef?: React.Ref<HTMLDivElement>;
-  onScrollToEnd?: () => void;
-  isRerunAnimating: boolean;
-  setIsRerunAnimating: React.Dispatch<React.SetStateAction<boolean>>;
-}
+import { StatusIcon } from './components/StatusIcon';
+import { InteractionsPanel } from './components/InteractionsPanel';
 
 const INITIAL_CONTROL_STATES = {
   debugger: false,
@@ -69,121 +32,7 @@ const TabStatus = ({ children }: { children: React.ReactChild }) => {
   return container && ReactDOM.createPortal(children, container);
 };
 
-const Container = styled.div<{ withException: boolean }>(({ theme, withException }) => ({
-  minHeight: '100%',
-  background: withException ? theme.background.warning : theme.background.content,
-}));
-
-const CaughtException = styled.div(({ theme }) => ({
-  padding: 15,
-  fontSize: theme.typography.size.s2 - 1,
-  lineHeight: '19px',
-}));
-const CaughtExceptionCode = styled.code(({ theme }) => ({
-  margin: '0 1px',
-  padding: 3,
-  fontSize: theme.typography.size.s1 - 1,
-  lineHeight: 1,
-  verticalAlign: 'top',
-  background: 'rgba(0, 0, 0, 0.05)',
-  border: `1px solid ${theme.color.border}`,
-  borderRadius: 3,
-}));
-const CaughtExceptionTitle = styled.div({
-  paddingBottom: 4,
-  fontWeight: 'bold',
-});
-const CaughtExceptionDescription = styled.p({
-  margin: 0,
-  padding: '0 0 20px',
-});
-const CaughtExceptionStack = styled.pre(({ theme }) => ({
-  margin: 0,
-  padding: 0,
-  fontSize: theme.typography.size.s1 - 1,
-}));
-
-export const AddonPanelPure: React.FC<InteractionsPanelProps> = React.memo(
-  ({
-    calls,
-    controls,
-    controlStates,
-    interactions,
-    fileName,
-    hasException,
-    caughtException,
-    isPlaying,
-    pausedAt,
-    onScrollToEnd,
-    endRef,
-    isRerunAnimating,
-    setIsRerunAnimating,
-    ...panelProps
-  }) => (
-    <AddonPanel {...panelProps}>
-      <Container withException={!!caughtException}>
-        {controlStates.debugger && interactions.length > 0 && (
-          <Subnav
-            controls={controls}
-            controlStates={controlStates}
-            status={
-              // eslint-disable-next-line no-nested-ternary
-              isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
-            }
-            storyFileName={fileName}
-            onScrollToEnd={onScrollToEnd}
-            isRerunAnimating={isRerunAnimating}
-            setIsRerunAnimating={setIsRerunAnimating}
-          />
-        )}
-        <div>
-          {interactions.map((call) => (
-            <Interaction
-              key={call.id}
-              call={call}
-              callsById={calls}
-              controls={controls}
-              controlStates={controlStates}
-              childCallIds={call.childCallIds}
-              isCollapsed={call.isCollapsed}
-              toggleCollapsed={call.toggleCollapsed}
-              pausedAt={pausedAt}
-            />
-          ))}
-        </div>
-        {caughtException && !caughtException.message?.startsWith('ignoredException') && (
-          <CaughtException>
-            <CaughtExceptionTitle>
-              Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
-            </CaughtExceptionTitle>
-            <CaughtExceptionDescription>
-              This story threw an error after it finished rendering which means your interactions
-              couldn&apos;t be run. Go to this story&apos;s play function in {fileName} to fix.
-            </CaughtExceptionDescription>
-            <CaughtExceptionStack>
-              {caughtException.stack || `${caughtException.name}: ${caughtException.message}`}
-            </CaughtExceptionStack>
-          </CaughtException>
-        )}
-        <div ref={endRef} />
-      </Container>
-      {!isPlaying && interactions.length === 0 && (
-        <Placeholder>
-          No interactions found
-          <Link
-            href="https://github.com/storybookjs/storybook/blob/next/addons/interactions/README.md"
-            target="_blank"
-            withArrow
-          >
-            Learn how to add interactions to your story
-          </Link>
-        </Placeholder>
-      )}
-    </AddonPanel>
-  )
-);
-
-export const Panel: React.FC<AddonPanelProps> = (props) => {
+export const Panel: React.FC<{ active: boolean }> = (props) => {
   const [storyId, setStoryId] = React.useState<StoryId>();
   const [controlStates, setControlStates] = React.useState<ControlStates>(INITIAL_CONTROL_STATES);
   const [pausedAt, setPausedAt] = React.useState<Call['id']>();
@@ -293,7 +142,7 @@ export const Panel: React.FC<AddonPanelProps> = (props) => {
         {showStatus &&
           (hasException ? <TabIcon status={CallStates.ERROR} /> : ` (${interactions.length})`)}
       </TabStatus>
-      <AddonPanelPure
+      <InteractionsPanel
         calls={calls.current}
         controls={controls}
         controlStates={controlStates}

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

@@ -2,10 +2,10 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
-import { getCalls } from '../../mocks';
+import { getCalls } from '../mocks';
 
 import { Interaction } from './Interaction';
-import SubnavStories from '../Subnav/Subnav.stories';
+import SubnavStories from './Subnav.stories';
 
 type Story = ComponentStoryObj<typeof Interaction>;
 

addons/interactions/src/components/Interaction.tsx

@@ -4,10 +4,10 @@ import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
 import { styled, typography } from '@storybook/theming';
 import { transparentize } from 'polished';
 
-import { MatcherResult } from '../MatcherResult';
-import { MethodCall } from '../MethodCall';
-import { StatusIcon } from '../StatusIcon/StatusIcon';
-import { Controls } from '../../Panel';
+import { MatcherResult } from './MatcherResult';
+import { MethodCall } from './MethodCall';
+import { StatusIcon } from './StatusIcon';
+import { Controls } from './InteractionsPanel';
 
 const MethodCallWrapper = styled.div(() => ({
   fontFamily: typography.fonts.mono,

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

@@ -7,9 +7,9 @@ import { styled } from '@storybook/theming';
 import { userEvent, within, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
-import { getCalls, getInteractions } from './mocks';
-import { AddonPanelPure } from './Panel';
-import SubnavStories from './components/Subnav/Subnav.stories';
+import { getCalls, getInteractions } from '../mocks';
+import { InteractionsPanel } from './InteractionsPanel';
+import SubnavStories from './Subnav.stories';
 
 const StyledWrapper = styled.div(({ theme }) => ({
   backgroundColor: theme.background.content,
@@ -27,7 +27,7 @@ const interactions = getInteractions(CallStates.DONE);
 
 export default {
   title: 'Addons/Interactions/Panel',
-  component: AddonPanelPure,
+  component: InteractionsPanel,
   decorators: [
     (Story: any) => (
       <StyledWrapper id="panel-tab-content">
@@ -51,9 +51,9 @@ export default {
     // prop for the AddonPanel used as wrapper of Panel
     active: true,
   },
-} as ComponentMeta<typeof AddonPanelPure>;
+} as ComponentMeta<typeof InteractionsPanel>;
 
-type Story = ComponentStoryObj<typeof AddonPanelPure>;
+type Story = ComponentStoryObj<typeof InteractionsPanel>;
 
 export const Passing: Story = {
   args: {

addons/interactions/src/components/InteractionsPanel.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react';
+import { AddonPanel, Link, Placeholder } from '@storybook/components';
+import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
+import { styled } from '@storybook/theming';
+
+import { Subnav } from './Subnav';
+import { Interaction } from './Interaction';
+
+export interface Controls {
+  start: (args: any) => void;
+  back: (args: any) => void;
+  goto: (args: any) => void;
+  next: (args: any) => void;
+  end: (args: any) => void;
+  rerun: (args: any) => void;
+}
+
+interface InteractionsPanelProps {
+  active: boolean;
+  controls: Controls;
+  controlStates: ControlStates;
+  interactions: (Call & {
+    status?: CallStates;
+    childCallIds: Call['id'][];
+    isCollapsed: boolean;
+    toggleCollapsed: () => void;
+  })[];
+  fileName?: string;
+  hasException?: boolean;
+  caughtException?: Error;
+  isPlaying?: boolean;
+  pausedAt?: Call['id'];
+  calls: Map<string, any>;
+  endRef?: React.Ref<HTMLDivElement>;
+  onScrollToEnd?: () => void;
+  isRerunAnimating: boolean;
+  setIsRerunAnimating: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const Container = styled.div<{ withException: boolean }>(({ theme, withException }) => ({
+  minHeight: '100%',
+  background: withException ? theme.background.warning : theme.background.content,
+}));
+
+const CaughtException = styled.div(({ theme }) => ({
+  padding: 15,
+  fontSize: theme.typography.size.s2 - 1,
+  lineHeight: '19px',
+}));
+const CaughtExceptionCode = styled.code(({ theme }) => ({
+  margin: '0 1px',
+  padding: 3,
+  fontSize: theme.typography.size.s1 - 1,
+  lineHeight: 1,
+  verticalAlign: 'top',
+  background: 'rgba(0, 0, 0, 0.05)',
+  border: `1px solid ${theme.color.border}`,
+  borderRadius: 3,
+}));
+const CaughtExceptionTitle = styled.div({
+  paddingBottom: 4,
+  fontWeight: 'bold',
+});
+const CaughtExceptionDescription = styled.p({
+  margin: 0,
+  padding: '0 0 20px',
+});
+const CaughtExceptionStack = styled.pre(({ theme }) => ({
+  margin: 0,
+  padding: 0,
+  fontSize: theme.typography.size.s1 - 1,
+}));
+
+export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
+  ({
+    calls,
+    controls,
+    controlStates,
+    interactions,
+    fileName,
+    hasException,
+    caughtException,
+    isPlaying,
+    pausedAt,
+    onScrollToEnd,
+    endRef,
+    isRerunAnimating,
+    setIsRerunAnimating,
+    ...panelProps
+  }) => (
+    <AddonPanel {...panelProps}>
+      <Container withException={!!caughtException}>
+        {controlStates.debugger && (interactions.length > 0 || hasException) && (
+          <Subnav
+            controls={controls}
+            controlStates={controlStates}
+            status={
+              // eslint-disable-next-line no-nested-ternary
+              isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
+            }
+            storyFileName={fileName}
+            onScrollToEnd={onScrollToEnd}
+            isRerunAnimating={isRerunAnimating}
+            setIsRerunAnimating={setIsRerunAnimating}
+          />
+        )}
+        <div>
+          {interactions.map((call) => (
+            <Interaction
+              key={call.id}
+              call={call}
+              callsById={calls}
+              controls={controls}
+              controlStates={controlStates}
+              childCallIds={call.childCallIds}
+              isCollapsed={call.isCollapsed}
+              toggleCollapsed={call.toggleCollapsed}
+              pausedAt={pausedAt}
+            />
+          ))}
+        </div>
+        {caughtException && !caughtException.message?.startsWith('ignoredException') && (
+          <CaughtException>
+            <CaughtExceptionTitle>
+              Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
+            </CaughtExceptionTitle>
+            <CaughtExceptionDescription>
+              This story threw an error after it finished rendering which means your interactions
+              couldn&apos;t be run. Go to this story&apos;s play function in {fileName} to fix.
+            </CaughtExceptionDescription>
+            <CaughtExceptionStack>
+              {caughtException.stack || `${caughtException.name}: ${caughtException.message}`}
+            </CaughtExceptionStack>
+          </CaughtException>
+        )}
+        <div ref={endRef} />
+        {!isPlaying && !caughtException && interactions.length === 0 && (
+          <Placeholder>
+            No interactions found
+            <Link
+              href="https://storybook.js.org/docs/react/writing-stories/play-function"
+              target="_blank"
+              withArrow
+            >
+              Learn how to add interactions to your story
+            </Link>
+          </Placeholder>
+        )}
+      </Container>
+    </AddonPanel>
+  )
+);

addons/interactions/src/components/MethodCall.tsx

@@ -387,7 +387,7 @@ export const MethodCall = ({
   call,
   callsById,
 }: {
-  call: Call;
+  call?: Call;
   callsById: Map<Call['id'], Call>;
 }) => {
   // Call might be undefined during initial render, can be safely ignored.

addons/interactions/src/components/StatusIcon.tsx

@@ -4,7 +4,7 @@ import { Call, CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
 import { transparentize } from 'polished';
-import localTheme from '../../theme';
+import localTheme from '../theme';
 
 export interface StatusIconProps extends IconsProps {
   status: Call['status'];

addons/interactions/src/components/Subnav.tsx

@@ -12,8 +12,8 @@ import {
 import { Call, CallStates, ControlStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 
-import { StatusBadge } from '../StatusBadge/StatusBadge';
-import { Controls } from '../../Panel';
+import { StatusBadge } from './StatusBadge';
+import { Controls } from './InteractionsPanel';
 
 const SubnavWrapper = styled.div(({ theme }) => ({
   background: theme.background.app,