Update titles for addons, controls, and panel tabs to support render …

…functions and JSX elements
storybookjs · Mar 17, 2023 · ef0a7fb · ef0a7fb
1 parent 49b53d7
commit ef0a7fb
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 27 deletions.
diff --git a/code/addons/actions/src/manager.tsx b/code/addons/actions/src/manager.tsx
@@ -1,26 +1,31 @@
 import React, { useState, useEffect } from 'react';
+import type { API } from '@storybook/manager-api';
 import { addons, types } from '@storybook/manager-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';
 
+function Title({ api }: { api: API }) {
+  const [actionsCount, setActionsCount] = useState(0);
+  const onEvent = () => setActionsCount((previous) => previous + 1);
+  const onChange = () => setActionsCount(0);
+
+  useEffect(() => {
+    api.on(EVENT_ID, onEvent);
+    api.on(STORY_CHANGED, onChange);
+    return () => {
+      api.off(EVENT_ID, onEvent);
+      api.off(STORY_CHANGED, onChange);
+    };
+  });
+  const suffix = actionsCount === 0 ? '' : ` (${actionsCount})`;
+  return <>Actions{suffix}</>;
+}
+
 addons.register(ADDON_ID, (api) => {
   addons.addPanel(PANEL_ID, {
     title() {
-      const [actionsCount, setActionsCount] = useState(0);
-      const onEvent = () => setActionsCount((previous) => previous + 1);
-      const onChange = () => setActionsCount(0);
-
-      useEffect(() => {
-        api.on(EVENT_ID, onEvent);
-        api.on(STORY_CHANGED, onChange);
-        return () => {
-          api.off(EVENT_ID, onEvent);
-          api.off(STORY_CHANGED, onChange);
-        };
-      });
-      const suffix = actionsCount === 0 ? '' : ` (${actionsCount})`;
-      return `Actions${suffix}`;
+      return <Title api={api} />;
     },
     type: types.PANEL,
     render: ({ active, key }) => <ActionLogger key={key} api={api} active={!!active} />,

diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx
@@ -4,15 +4,20 @@ import { AddonPanel } from '@storybook/components';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
+function Title() {
+  const rows = useArgTypes();
+  const controlsCount = Object.values(rows).filter(
+    (argType) => argType?.control && !argType?.table?.disable
+  ).length;
+  const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
+
+  return <>Controls{suffix}</>;
+}
+
 addons.register(ADDON_ID, (api: API) => {
   addons.addPanel(ADDON_ID, {
     title() {
-      const rows = useArgTypes();
-      const controlsCount = Object.values(rows).filter(
-        (argType) => argType?.control && !argType?.table?.disable
-      ).length;
-      const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
-      return `Controls${suffix}`;
+      return <Title />;
     },
     type: types.PANEL,
     paramKey: PARAM_KEY,

diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
@@ -295,8 +295,14 @@ export interface Addon_RenderOptions {
   key?: string;
 }
 
+export type ReactJSXElement = {
+  type: any;
+  props: any;
+  key: any;
+};
+
 export interface Addon_Type {
-  title: (() => string) | string;
+  title: (() => string | ReactJSXElement) | string;
   type?: Addon_Types;
   id?: string;
   route?: (routeOptions: RouterData) => string;

diff --git a/code/ui/components/src/tabs/tabs.helpers.tsx b/code/ui/components/src/tabs/tabs.helpers.tsx
@@ -10,9 +10,17 @@ export const VisuallyHidden = styled.div<VisuallyHiddenProps>(({ active }) =>
   active ? { display: 'block' } : { display: 'none' }
 );
 
+type TChild = {
+  active: boolean;
+  title: (() => string | ReactElement) | string;
+  id: any;
+  color: any;
+  render: any;
+};
+
 export const childrenToList = (children: any, selected: string) =>
   Children.toArray(children).map(
-    ({ props: { title, id, color, children: childrenOfChild } }: ReactElement, index) => {
+    ({ props: { title, id, color, children: childrenOfChild } }: ReactElement, index): TChild => {
       const content = Array.isArray(childrenOfChild) ? childrenOfChild[0] : childrenOfChild;
       return {
         active: selected ? id === selected : index === 0,

diff --git a/code/ui/components/src/tabs/tabs.tsx b/code/ui/components/src/tabs/tabs.tsx
@@ -146,10 +146,12 @@ export const Tabs: FC<TabsProps> = memo(
       <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
         <FlexBar scrollable={false} border backgroundColor={backgroundColor}>
           <TabBar style={{ whiteSpace: 'normal' }} ref={tabBarRef} role="tablist">
-            {visibleList.map(({ title, id, active, color }) => {
+            {visibleList.map(({ title, id, active, color }, index) => {
+              const indexId = `index-${index}`;
+
               return (
                 <TabButton
-                  id={`tabbutton-${sanitize(title)}`}
+                  id={`tabbutton-${sanitize(id) ?? indexId}`}
                   ref={(ref: HTMLButtonElement) => {
                     tabRefs.current.set(id, ref);
                   }}
@@ -164,7 +166,7 @@ export const Tabs: FC<TabsProps> = memo(
                   }}
                   role="tab"
                 >
-                  {title}
+                  {typeof title === 'string' ? title : title()}
                 </TabButton>
               );
             })}

diff --git a/code/ui/manager/src/components/panel/panel.tsx b/code/ui/manager/src/components/panel/panel.tsx
@@ -6,7 +6,7 @@ import { shortcutToHumanString } from '@storybook/manager-api';
 import useMediaQuery from '../hooks/useMedia';
 
 export interface SafeTabProps {
-  title: (() => string) | string;
+  title: (() => string | ReactElement) | string;
   id: string;
   children: ReactElement;
 }
@@ -89,7 +89,7 @@ const AddonPanel = React.memo<{
         id="storybook-panel-root"
       >
         {Object.entries(panels).map(([k, v]) => (
-          <SafeTab key={k} id={k} title={typeof v.title === 'function' ? v.title() : v.title}>
+          <SafeTab key={k} id={k} title={v.title}>
             {v.render}
           </SafeTab>
         ))}