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

@@ -6,6 +6,7 @@ import { Route } from '@storybook/router';
 import { Global, createGlobal } from '@storybook/theming';
 import { Symbols } from '@storybook/components';
 import type { Addon_PageType } from '@storybook/types';
+import { useStorybookApi } from '@storybook/manager-api';
 import Sidebar from './container/Sidebar';
 import Preview from './container/Preview';
 import Panel from './container/Panel';
@@ -19,6 +20,9 @@ type Props = {
 };
 
 export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) => {
+  const api = useStorybookApi();
+  const storyTitle = api.getCurrentStoryData()?.title;
+
   return (
     <>
       <Global styles={createGlobal} />
@@ -36,6 +40,7 @@ export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props)
         slotPages={pages.map(({ id, render: Content }) => (
           <Content key={id} />
         ))}
+        storyTitle={storyTitle}
       />
     </>
   );

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 {
@@ -24,6 +24,7 @@ interface Props {
   slotSidebar?: React.ReactNode;
   slotPanel?: React.ReactNode;
   slotPages?: React.ReactNode;
+  storyTitle?: string | null | undefined;
 }
 const MINIMUM_CONTENT_WIDTH_PX = 100;
 
@@ -112,7 +113,12 @@ const useLayoutSyncingState = (
   };
 };
 
-export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: Props) => {
+export const Layout = ({
+  managerLayoutState,
+  setManagerLayoutState,
+  storyTitle,
+  ...slots
+}: Props) => {
   const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
   const isMobile = !isDesktop;
 
@@ -157,7 +163,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }:
           )}
         </>
       )}
-      {isMobile && <MobileNavigation />}
+      {isMobile && <MobileNavigation storyTitle={storyTitle} />}
     </LayoutContainer>
   );
 };

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ManagerContext } from '@storybook/manager-api';
+import React from 'react';
+import { MobileAbout } from './MobileAbout';
+
+const meta = {
+  component: MobileAbout,
+  title: 'MobileAbout',
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider
+        value={
+          {
+            api: {
+              getCurrentVersion: () => ({
+                version: '7.2.2-alpha.0',
+              }),
+            },
+          } as any
+        }
+      >
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+  ],
+} satisfies Meta<typeof MobileAbout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isAboutOpen: true,
+  },
+};

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

@@ -0,0 +1,140 @@
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+import { Transition, type TransitionStatus } from 'react-transition-group';
+import { styled } from '@storybook/theming';
+import { Icons, Link } from '@storybook/components';
+import { UpgradeBlock } from '../../upgrade/UpgradeBlock';
+import { MOBILE_TRANSITION_DURATION } from '../../../constants';
+
+interface MobileAboutProps {
+  isAboutOpen: boolean;
+  setAboutOpen: (open: boolean) => void;
+}
+
+export const MobileAbout: FC<MobileAboutProps> = ({ isAboutOpen, setAboutOpen }) => {
+  const aboutRef = useRef(null);
+
+  return (
+    <Transition
+      nodeRef={aboutRef}
+      in={isAboutOpen}
+      timeout={MOBILE_TRANSITION_DURATION}
+      appear
+      mountOnEnter
+      unmountOnExit
+    >
+      {(state) => (
+        <Container ref={aboutRef} state={state} transitionDuration={MOBILE_TRANSITION_DURATION}>
+          <Button onClick={() => setAboutOpen(false)}>
+            <Icons icon="arrowleftalt" />
+            Back
+          </Button>
+          <LinkContainer>
+            <LinkLine href="https://github.com/storybookjs/storybook" target="_blank">
+              <LinkLeft>
+                <Icons icon="github" />
+                <span>Github</span>
+              </LinkLeft>
+              <Icons icon="sharealt" width={12} />
+            </LinkLine>
+            <LinkLine
+              href="https://storybook.js.org/docs/react/get-started/install/"
+              target="_blank"
+            >
+              <LinkLeft>
+                <Icons icon="storybook" />
+                <span>Documentation</span>
+              </LinkLeft>
+              <Icons icon="sharealt" width={12} />
+            </LinkLine>
+          </LinkContainer>
+          <UpgradeBlock />
+          <BottomText>
+            Open source software maintained by{' '}
+            <Link href="https://chromatic.com" target="_blank">
+              Chromatic
+            </Link>{' '}
+            and the{' '}
+            <Link href="https://github.com/storybookjs/storybook/graphs/contributors">
+              Storybook Community
+            </Link>
+          </BottomText>
+        </Container>
+      )}
+    </Transition>
+  );
+};
+
+const Container = styled.div<{ state: TransitionStatus; transitionDuration: number }>(
+  ({ theme, state, transitionDuration }) => ({
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0,
+    zIndex: 11,
+    transition: `all ${transitionDuration}ms ease-in-out`,
+    overflow: 'scroll',
+    padding: '20px',
+    color: theme.color.defaultText,
+    background: theme.background.content,
+    opacity: `${(() => {
+      if (state === 'entering') return 1;
+      if (state === 'entered') return 1;
+      if (state === 'exiting') return 0;
+      if (state === 'exited') return 0;
+      return 0;
+    })()}`,
+    transform: `${(() => {
+      if (state === 'entering') return 'translateX(0)';
+      if (state === 'entered') return 'translateX(0)';
+      if (state === 'exiting') return 'translateX(20px)';
+      if (state === 'exited') return 'translateX(20px)';
+      return 'translateX(0)';
+    })()}`,
+  })
+);
+
+const LinkContainer = styled.div({
+  marginTop: 20,
+  marginBottom: 20,
+});
+
+const LinkLine = styled.a(({ theme }) => ({
+  all: 'unset',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  fontSize: theme.typography.size.s2 - 1,
+  height: 52,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  cursor: 'pointer',
+  padding: '0 10px',
+
+  '&:last-child': {
+    borderBottom: 'none',
+  },
+}));
+
+const LinkLeft = styled.div(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: theme.typography.size.s2 - 1,
+  height: 40,
+  gap: 5,
+}));
+
+const BottomText = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s2 - 1,
+  marginTop: 30,
+}));
+
+const Button = styled.button(({ theme }) => ({
+  all: 'unset',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  color: 'currentColor',
+  fontSize: theme.typography.size.s2 - 1,
+  padding: '0 10px',
+}));

code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx

@@ -0,0 +1,53 @@
+import type { FC, ReactNode } from 'react';
+import React, { useRef } from 'react';
+import { styled } from '@storybook/theming';
+import { Transition } from 'react-transition-group';
+import type { TransitionStatus } from 'react-transition-group/Transition';
+
+interface MobileAddonsDrawerProps {
+  children: ReactNode;
+  isAddonsOpen: boolean;
+}
+
+const duration = 200;
+
+const Container = styled.div<{ state: TransitionStatus }>(({ theme, state }) => ({
+  position: 'fixed',
+  boxSizing: 'border-box',
+  width: '100%',
+  background: theme.background.content,
+  height: '50%',
+  bottom: 0,
+  left: 0,
+  zIndex: 11,
+  transition: `all ${duration}ms ease-in-out`,
+  overflow: 'hidden',
+  borderTop: `1px solid ${theme.appBorderColor}`,
+  transform: `${(() => {
+    if (state === 'entering') return 'translateY(0)';
+    if (state === 'entered') return 'translateY(0)';
+    if (state === 'exiting') return 'translateY(100%)';
+    if (state === 'exited') return 'translateY(100%)';
+    return 'translateY(0)';
+  })()}`,
+}));
+
+export const MobileAddonsDrawer: FC<MobileAddonsDrawerProps> = ({ children, isAddonsOpen }) => {
+  const containerRef = useRef(null);
+
+  return (
+    <Transition
+      nodeRef={containerRef}
+      in={isAddonsOpen}
+      timeout={duration}
+      mountOnEnter
+      unmountOnExit
+    >
+      {(state) => (
+        <Container ref={containerRef} state={state}>
+          {children}
+        </Container>
+      )}
+    </Transition>
+  );
+};