API: Extend sidebar renderLabel with API access

storybookjs · May 12, 2024 · dbad7c5 · dbad7c5
1 parent 5557550
commit dbad7c5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/code/lib/types/src/modules/api-stories.ts b/code/lib/types/src/modules/api-stories.ts
@@ -8,7 +8,7 @@ export interface API_BaseEntry {
   depth: number;
   name: string;
   refId?: string;
-  renderLabel?: (item: API_BaseEntry) => any;
+  renderLabel?: (item: API_BaseEntry, api: any) => any;
 }
 
 export interface API_RootEntry extends API_BaseEntry {

diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts
@@ -45,7 +45,7 @@ export interface API_Provider<API> {
   renderPreview?: API_IframeRenderer;
   handleAPI(api: API): void;
   getConfig(): {
-    sidebar?: API_SidebarOptions;
+    sidebar?: API_SidebarOptions<API>;
     theme?: ThemeVars;
     StoryMapper?: API_StoryMapper;
     [k: string]: any;
@@ -106,11 +106,11 @@ export interface API_UI {
 export type API_PanelPositions = 'bottom' | 'right';
 export type API_ActiveTabsType = 'sidebar' | 'canvas' | 'addons';
 
-export interface API_SidebarOptions {
+export interface API_SidebarOptions<API = any> {
   showRoots?: boolean;
   filters?: Record<string, API_FilterFunction>;
   collapsedRoots?: string[];
-  renderLabel?: (item: API_HashEntry) => any;
+  renderLabel?: (item: API_HashEntry, api: API) => any;
 }
 
 interface OnClearOptions {

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -19,16 +19,17 @@ interface MobileNavigationProps {
  */
 const useFullStoryName = () => {
   const { index } = useStorybookState();
-  const currentStory = useStorybookApi().getCurrentStoryData();
+  const api = useStorybookApi();
+  const currentStory = api.getCurrentStoryData();
 
   if (!currentStory) return '';
 
-  let fullStoryName = currentStory.renderLabel?.(currentStory) || currentStory.name;
+  let fullStoryName = currentStory.renderLabel?.(currentStory, api) || currentStory.name;
   let node = index[currentStory.id];
 
   while ('parent' in node && node.parent && index[node.parent] && fullStoryName.length < 24) {
     node = index[node.parent];
-    const parentName = node.renderLabel?.(node) || node.name;
+    const parentName = node.renderLabel?.(node, api) || node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
   }
   return fullStoryName;

diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -220,7 +220,8 @@ const Node = React.memo<NodeProps>(function Node({
           }}
           {...(item.type === 'docs' && { docsMode })}
         >
-          {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+          {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
+            item.name}
         </LeafNode>
         {isSelected && (
           <SkipToContentLink asChild>
@@ -272,7 +273,7 @@ const Node = React.memo<NodeProps>(function Node({
           aria-expanded={isExpanded}
         >
           <CollapseIcon isExpanded={isExpanded} />
-          {item.renderLabel?.(item) || item.name}
+          {item.renderLabel?.(item, api) || item.name}
         </CollapseButton>
         {isExpanded && (
           <IconButton
@@ -325,7 +326,8 @@ const Node = React.memo<NodeProps>(function Node({
           }
         }}
       >
-        {(item.renderLabel as (i: typeof item) => React.ReactNode)?.(item) || item.name}
+        {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
+          item.name}
       </BranchNode>
     );
   }