Merge pull request #27099 from storybookjs/shilman/extend-render-label

API: Extend sidebar renderLabel with API argument
storybookjs · May 13, 2024 · 08b89fb · 08b89fb
2 parents fc6ccd8 + 5a85ede
commit 08b89fb
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 20 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>
     );
   }

diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
@@ -260,11 +260,11 @@ The following table details how to use the API values:
 
 The following options are configurable under the `sidebar` namespace:
 
-| Name               | Type     | Description                                                   | Example Value                                    |
-| ------------------ | -------- | ------------------------------------------------------------- | ------------------------------------------------ |
-| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                          |
-| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                              |
-| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => <abbr title="...">{item.name}</abbr>` |
+| Name               | Type     | Description                                                   | Example Value                                         |
+| ------------------ | -------- | ------------------------------------------------------------- | ----------------------------------------------------- |
+| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                               |
+| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                                   |
+| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item, api) => <abbr title="...">{item.name}</abbr>` |
 
 The following options are configurable under the `toolbar` namespace:
 

diff --git a/docs/configure/features-and-behavior.md b/docs/configure/features-and-behavior.md
@@ -32,11 +32,11 @@ The following table details how to use the API values:
 
 The following options are configurable under the `sidebar` namespace:
 
-| Name               | Type     | Description                                                   | Example Value                                    |
-| ------------------ | -------- | ------------------------------------------------------------- | ------------------------------------------------ |
-| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                          |
-| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                              |
-| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => <abbr title="...">{item.name}</abbr>` |
+| Name               | Type     | Description                                                   | Example Value                                         |
+| ------------------ | -------- | ------------------------------------------------------------- | ----------------------------------------------------- |
+| **showRoots**      | Boolean  | Display the top-level nodes as a "root" in the sidebar        | `false`                                               |
+| **collapsedRoots** | Array    | Set of root node IDs to visually collapse by default          | `['misc', 'other']`                                   |
+| **renderLabel**    | Function | Create a custom label for tree nodes; must return a ReactNode | `(item, api) => <abbr title="...">{item.name}</abbr>` |
 
 The following options are configurable under the `toolbar` namespace: