use full story name + title in mobile navigation heading

storybookjs · Sep 21, 2023 · 8604570 · 8604570
1 parent 63ca44c
commit 8604570
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 30 deletions.
diff --git a/code/ui/manager/src/components/layout/Layout.stories.tsx b/code/ui/manager/src/components/layout/Layout.stories.tsx
@@ -4,9 +4,9 @@ import React, { useState } from 'react';
 
 import { styled } from '@storybook/theming';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ManagerContext } from '@storybook/manager-api';
 import { Layout } from './Layout';
 import { MobileLayoutProvider } from '../mobile/MobileLayoutProvider';
+import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories';
 
 const PlaceholderBlock = styled.div({
   width: '100%',
@@ -64,21 +64,8 @@ const meta = {
     layout: 'fullscreen',
   },
   decorators: [
-    (storyFn) => (
-      <ManagerContext.Provider
-        value={
-          {
-            api: {
-              getCurrentStoryData: () => ({
-                title: 'Some Story Title',
-              }),
-            },
-          } as any
-        }
-      >
-        <MobileLayoutProvider>{storyFn()}</MobileLayoutProvider>
-      </ManagerContext.Provider>
-    ),
+    MobileNavigationStoriesMeta.decorators[0] as any,
+    (storyFn) => <MobileLayoutProvider>{storyFn()}</MobileLayoutProvider>,
   ],
   render: (args) => {
     const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState);

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { ManagerContext } from '@storybook/manager-api';
 import { within } from '@storybook/testing-library';
+import { startCase } from 'lodash';
 import { MobileNavigation } from './MobileNavigation';
 import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider';
 
@@ -17,22 +18,55 @@ const MockPanel = () => {
   );
 };
 
+const renderLabel = ({ name }: { name: string }) => startCase(name);
+
+const mockManagerStore: any = {
+  state: {
+    index: {
+      someRootId: {
+        type: 'root',
+        id: 'someRootId',
+        name: 'root',
+        isRoot: true,
+        isComponent: false,
+        isLeaf: false,
+        renderLabel,
+      },
+      someComponentId: {
+        type: 'component',
+        id: 'someComponentId',
+        name: 'component',
+        parent: 'someRootId',
+        isRoot: false,
+        isComponent: true,
+        isLeaf: false,
+        renderLabel,
+      },
+      someStoryId: {
+        type: 'story',
+        id: 'someStoryId',
+        name: 'story',
+        parent: 'someComponentId',
+        isRoot: false,
+        isComponent: false,
+        isLeaf: true,
+        renderLabel,
+      },
+    },
+  },
+  api: {
+    getCurrentStoryData() {
+      return mockManagerStore.state.index.someStoryId;
+    },
+  },
+};
+
 const meta = {
   component: MobileNavigation,
   title: 'Mobile/Navigation',
   decorators: [
     (storyFn) => (
-      <ManagerContext.Provider
-        value={
-          {
-            api: {
-              getCurrentStoryData: () => ({
-                title: 'Some Story Title',
-              }),
-            },
-          } as any
-        }
-      >
+      <ManagerContext.Provider value={mockManagerStore}>
         <MobileLayoutProvider>
           <div style={{ display: 'flex', flexDirection: 'column', height: '100svh' }}>
             <div style={{ flex: 1 }} />
@@ -66,6 +100,58 @@ export const Dark: Story = {
   parameters: { theme: 'dark' },
 };
 
+export const LongStoryName: Story = {
+  decorators: [
+    (storyFn) => {
+      const mockManagerStoreWithLongNames: any = {
+        state: {
+          index: {
+            someRootId: {
+              type: 'root',
+              id: 'someRootId',
+              name: 'someLongRootName',
+              isRoot: true,
+              isComponent: false,
+              isLeaf: false,
+              renderLabel,
+            },
+            someComponentId: {
+              type: 'component',
+              id: 'someComponentId',
+              name: 'someComponentName',
+              parent: 'someRootId',
+              isRoot: false,
+              isComponent: true,
+              isLeaf: false,
+              renderLabel,
+            },
+            someStoryId: {
+              type: 'story',
+              id: 'someStoryId',
+              name: 'someLongStoryName',
+              parent: 'someComponentId',
+              isRoot: false,
+              isComponent: false,
+              isLeaf: true,
+              renderLabel,
+            },
+          },
+        },
+        api: {
+          getCurrentStoryData() {
+            return mockManagerStoreWithLongNames.state.index.someStoryId;
+          },
+        },
+      };
+      return (
+        <ManagerContext.Provider value={mockManagerStoreWithLongNames}>
+          {storyFn()}
+        </ManagerContext.Provider>
+      );
+    },
+  ],
+};
+
 export const MenuOpen: Story = {
   play: async ({ canvasElement }) => {
     const menuOpen = await within(canvasElement).getByTitle('Open navigation menu');

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useState } from 'react';
 import { styled } from '@storybook/theming';
 import { IconButton, Icons } from '@storybook/components';
-import { useStorybookApi } from '@storybook/manager-api';
+import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { MobileMenuDrawer } from './MobileMenuDrawer';
 import { MobileAddonsDrawer } from './MobileAddonsDrawer';
 import { useMobileLayoutContext } from '../MobileLayoutProvider';
@@ -13,10 +13,31 @@ interface MobileNavigationProps {
   showPanel: boolean;
 }
 
+/**
+ * walks the tree from the current story to combine story+component+folder names into a single string
+ */
+const useFullStoryName = () => {
+  const { index } = useStorybookState();
+  const currentStory = useStorybookApi().getCurrentStoryData();
+
+  if (!currentStory) {
+    return '';
+  }
+
+  let fullStoryName = currentStory.renderLabel(currentStory);
+  let node = index[currentStory.id];
+
+  while ('parent' in node && node.parent && index[node.parent]) {
+    node = index[node.parent];
+    fullStoryName = `${node.renderLabel(node)}/${fullStoryName}`;
+  }
+  return fullStoryName;
+};
+
 export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showPanel }) => {
   const [isMenuOpen, setMenuOpen] = useState(false);
   const { isMobileAboutOpen, setMobileAboutOpen, setMobilePanelOpen } = useMobileLayoutContext();
-  const storyTitle = useStorybookApi().getCurrentStoryData()?.title;
+  const fullStoryName = useFullStoryName();
 
   return (
     <Container>
@@ -31,7 +52,7 @@ export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showP
       <MobileAddonsDrawer>{panel}</MobileAddonsDrawer>
       <Button onClick={() => setMenuOpen(!isMenuOpen)} title="Open navigation menu">
         <Icons icon="menu" />
-        {storyTitle || ''}
+        {fullStoryName}
       </Button>
       {showPanel && (
         <DrawerIconButton onClick={() => setMobilePanelOpen(true)} title="Open addon panel">