UI: Add bottom navigation on mobile

code/builders/builder-manager/templates/template.ejs

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
 
     <title><%= typeof title !== 'undefined'? title : 'Storybook'%></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
     <% if (favicon.endsWith('.svg')) {%>
     <link rel="icon" type="image/svg+xml" href="./<%= favicon %>" />

code/ui/manager/package.json

@@ -64,6 +64,7 @@
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "@testing-library/react": "^11.2.2",
+    "@types/react-transition-group": "^4",
     "@types/semver": "^7.3.4",
     "browser-dtector": "^3.4.0",
     "copy-to-clipboard": "^3.3.1",
@@ -80,6 +81,7 @@
     "react-draggable": "^4.4.3",
     "react-helmet-async": "^1.0.7",
     "react-resize-detector": "^7.1.2",
+    "react-transition-group": "^4.4.5",
     "resolve-from": "^5.0.0",
     "semver": "^7.3.7",
     "store2": "^2.14.2",

code/ui/manager/src/App.tsx

@@ -11,6 +11,7 @@ import Preview from './container/Preview';
 import Panel from './container/Panel';
 
 import { Layout } from './components/layout/Layout';
+import { useMobileLayoutContext } from './components/mobile/MobileLayoutProvider';
 
 type Props = {
   managerLayoutState: ComponentProps<typeof Layout>['managerLayoutState'];
@@ -19,6 +20,8 @@ type Props = {
 };
 
 export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) => {
+  const { setMobileAboutOpen } = useMobileLayoutContext();
+
   return (
     <>
       <Global styles={createGlobal} />
@@ -31,7 +34,7 @@ export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props)
             <Preview id="main" withLoader />
           </Route>
         }
-        slotSidebar={<Sidebar />}
+        slotSidebar={<Sidebar onMenuClick={() => setMobileAboutOpen((state) => !state)} />}
         slotPanel={<Panel />}
         slotPages={pages.map(({ id, render: Content }) => (
           <Content key={id} />

code/ui/manager/src/components/layout/Layout.stories.tsx

@@ -4,7 +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';
 
 const PlaceholderBlock = styled.div({
   width: '100%',
@@ -61,6 +63,23 @@ const meta = {
     theme: 'light',
     layout: 'fullscreen',
   },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider
+        value={
+          {
+            api: {
+              getCurrentStoryData: () => ({
+                title: 'Some Story Title',
+              }),
+            },
+          } as any
+        }
+      >
+        <MobileLayoutProvider>{storyFn()}</MobileLayoutProvider>
+      </ManagerContext.Provider>
+    ),
+  ],
   render: (args) => {
     const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState);
 
@@ -111,38 +130,17 @@ export const Mobile = {
     chromatic: { viewports: [320] },
   },
 };
-export const MobileHorizontal = {
-  args: {
-    state: { ...defaultState, panelPosition: 'right' },
-  },
+export const MobileDark = {
+  ...Mobile,
   parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-    chromatic: { viewports: [320] },
+    ...Mobile.parameters,
+    theme: 'dark',
   },
 };
 
 export const MobileDocs = {
+  ...Mobile,
   args: {
-    state: { ...defaultState, viewMode: 'docs' },
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-    chromatic: { viewports: [320] },
-  },
-};
-
-export const MobileCustom = {
-  args: {
-    state: { ...defaultState, viewMode: 'custom' },
-  },
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile1',
-    },
-    chromatic: { viewports: [320] },
+    managerLayoutState: { ...defaultState, viewMode: 'docs' },
   },
 };

code/ui/manager/src/components/layout/Layout.tsx

@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 import type { API_Layout, API_ViewMode } from '@storybook/types';
 import { useDragging } from './useDragging';
 import { useMediaQuery } from '../hooks/useMedia';
-import { MobileNavigation } from '../mobile-navigation/MobileNavigation';
+import { MobileNavigation } from '../mobile/navigation/MobileNavigation';
 import { BREAKPOINT_MIN_600 } from '../../constants';
 
 interface InternalLayoutState {
@@ -39,10 +39,15 @@ const layoutStateIsEqual = (state: ManagerLayoutState, other: ManagerLayoutState
  * Also syncs the layout state from the global manager store to the internal state
  * here when necessary
  */
-const useLayoutSyncingState = (
-  managerLayoutState: Props['managerLayoutState'],
-  setManagerLayoutState: Props['setManagerLayoutState']
-) => {
+const useLayoutSyncingState = ({
+  managerLayoutState,
+  setManagerLayoutState,
+  isDesktop,
+}: {
+  managerLayoutState: Props['managerLayoutState'];
+  setManagerLayoutState: Props['setManagerLayoutState'];
+  isDesktop: boolean;
+}) => {
   // ref to keep track of previous managerLayoutState, to check if the props change
   const prevManagerLayoutStateRef = React.useRef<ManagerLayoutState>(managerLayoutState);
 
@@ -91,10 +96,11 @@ const useLayoutSyncingState = (
     managerLayoutState.viewMode !== 'story' && managerLayoutState.viewMode !== 'docs';
   const isPanelShown = managerLayoutState.viewMode === 'story';
 
-  const { panelResizerRef, sidebarResizerRef } = useDragging(
-    setInternalDraggingSizeState,
-    isPanelShown
-  );
+  const { panelResizerRef, sidebarResizerRef } = useDragging({
+    setState: setInternalDraggingSizeState,
+    isPanelShown,
+    isDesktop,
+  });
   const { navSize, rightPanelWidth, bottomPanelHeight } = internalDraggingSizeState.isDragging
     ? internalDraggingSizeState
     : managerLayoutState;
@@ -126,7 +132,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }:
     showPages,
     showPanel,
     isDragging,
-  } = useLayoutSyncingState(managerLayoutState, setManagerLayoutState);
+  } = useLayoutSyncingState({ managerLayoutState, setManagerLayoutState, isDesktop });
 
   return (
     <LayoutContainer
@@ -157,7 +163,9 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }:
           )}
         </>
       )}
-      {isMobile && <MobileNavigation />}
+      {isMobile && (
+        <MobileNavigation menu={slots.slotSidebar} panel={slots.slotPanel} showPanel={showPanel} />
+      )}
     </LayoutContainer>
   );
 };

code/ui/manager/src/components/layout/useDragging.ts

@@ -22,10 +22,15 @@ function interpolate(relativeValue: number, min: number, max: number): number {
   return min + (max - min) * relativeValue;
 }
 
-export function useDragging(
-  setState: Dispatch<SetStateAction<LayoutState>>,
-  isPanelShown: boolean
-) {
+export function useDragging({
+  setState,
+  isPanelShown,
+  isDesktop,
+}: {
+  setState: Dispatch<SetStateAction<LayoutState>>;
+  isPanelShown: boolean;
+  isDesktop: boolean;
+}) {
   const panelResizerRef = useRef<HTMLDivElement>(null);
   const sidebarResizerRef = useRef<HTMLDivElement>(null);
 
@@ -176,7 +181,9 @@ export function useDragging(
       previewIframe?.removeAttribute('style');
     };
   }, [
-    isPanelShown, // we need to rerun this effect when the panel is shown/hidden to re-attach the event listeners
+    // we need to rerun this effect when the panel is shown/hidden or when changing between mobile/desktop to re-attach the event listeners
+    isPanelShown,
+    isDesktop,
     setState,
   ]);
 

code/ui/manager/src/components/mobile/MobileLayoutProvider.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react';
+import React, { createContext, useContext, useState } from 'react';
+
+type MobileLayoutContextType = {
+  isMobileAboutOpen: boolean;
+  setMobileAboutOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isMobilePanelOpen: boolean;
+  setMobilePanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const MobileLayoutContext = createContext<MobileLayoutContextType>({
+  isMobileAboutOpen: false,
+  setMobileAboutOpen: () => {},
+  isMobilePanelOpen: false,
+  setMobilePanelOpen: () => {},
+});
+
+export const MobileLayoutProvider: FC = ({ children }) => {
+  const [isMobileAboutOpen, setMobileAboutOpen] = useState(false);
+  const [isMobilePanelOpen, setMobilePanelOpen] = useState(false);
+
+  return (
+    <MobileLayoutContext.Provider
+      value={{ isMobileAboutOpen, setMobileAboutOpen, isMobilePanelOpen, setMobilePanelOpen }}
+    >
+      {children}
+    </MobileLayoutContext.Provider>
+  );
+};
+
+export const useMobileLayoutContext = () => useContext(MobileLayoutContext);

code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ManagerContext } from '@storybook/manager-api';
+import React, { useEffect } from 'react';
+import { within } from '@storybook/testing-library';
+import { MobileAbout } from './MobileAbout';
+import { MobileLayoutProvider, useMobileLayoutContext } from '../MobileLayoutProvider';
+
+/**
+ * A helper component to open the about page via the MobileLayoutContext
+ */
+const OpenAboutHelper = ({ children }: { children: any }) => {
+  const { setMobileAboutOpen } = useMobileLayoutContext();
+  useEffect(() => {
+    setMobileAboutOpen(true);
+  }, [setMobileAboutOpen]);
+  return children;
+};
+
+const meta = {
+  component: MobileAbout,
+  title: 'Mobile/About',
+  parameters: {
+    layout: 'fullscreen',
+    theme: 'light',
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+    chromatic: { viewports: [320] },
+  },
+  decorators: [
+    (storyFn) => {
+      return (
+        <ManagerContext.Provider
+          value={
+            {
+              api: {
+                getCurrentVersion: () => ({
+                  version: '7.2.0',
+                }),
+              },
+            } as any
+          }
+        >
+          <MobileLayoutProvider>
+            <OpenAboutHelper>{storyFn()}</OpenAboutHelper>
+          </MobileLayoutProvider>
+        </ManagerContext.Provider>
+      );
+    },
+  ],
+} satisfies Meta<typeof MobileAbout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Dark: Story = {
+  parameters: { theme: 'dark' },
+};
+
+export const Closed: Story = {
+  play: async ({ canvasElement }) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const closeButton = await within(canvasElement).getByTitle('Close about section');
+    await closeButton.click();
+  },
+};