Merge branch 'mobile-updates' into close-icon-mobile

storybookjs · Sep 21, 2023 · 7660f3d · 7660f3d
2 parents 9e223a8 + 591550e
commit 7660f3d
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 59 deletions.
diff --git a/code/ui/manager/src/App.tsx b/code/ui/manager/src/App.tsx
@@ -11,7 +11,7 @@ import Preview from './container/Preview';
 import Panel from './container/Panel';
 
 import { Layout } from './components/layout/Layout';
-import { useMobileLayoutContext } from './components/mobile/MobileLayoutProvider';
+import { useLayout } from './components/layout/LayoutProvider';
 
 type Props = {
   managerLayoutState: ComponentProps<typeof Layout>['managerLayoutState'];
@@ -20,7 +20,7 @@ type Props = {
 };
 
 export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) => {
-  const { setMobileAboutOpen } = useMobileLayoutContext();
+  const { setMobileAboutOpen } = useLayout();
 
   return (
     <>

diff --git a/code/ui/manager/src/components/layout/Layout.stories.tsx b/code/ui/manager/src/components/layout/Layout.stories.tsx
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { styled } from '@storybook/theming';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
-import { MobileLayoutProvider } from '../mobile/MobileLayoutProvider';
+import { LayoutProvider } from './LayoutProvider';
 import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories';
 
 const PlaceholderBlock = styled.div({
@@ -65,7 +65,7 @@ const meta = {
   },
   decorators: [
     MobileNavigationStoriesMeta.decorators[0] as any,
-    (storyFn) => <MobileLayoutProvider>{storyFn()}</MobileLayoutProvider>,
+    (storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>,
   ],
   render: (args) => {
     const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState);

diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx
@@ -2,9 +2,9 @@ import React, { useEffect, useLayoutEffect, useState } from 'react';
 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 { BREAKPOINT_MIN_600 } from '../../constants';
+import { MEDIA_MIN_BREAKPOINT } from '../../constants';
+import { useLayout } from './LayoutProvider';
 
 interface InternalLayoutState {
   isDragging: boolean;
@@ -119,8 +119,7 @@ const useLayoutSyncingState = ({
 };
 
 export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: Props) => {
-  const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
-  const isMobile = !isDesktop;
+  const { isDesktop, isMobile } = useLayout();
 
   const {
     navSize,
@@ -179,7 +178,7 @@ const LayoutContainer = styled.div<LayoutState>(
       display: 'flex',
       flexDirection: 'column',
 
-      [`@media ${BREAKPOINT_MIN_600}`]: {
+      [MEDIA_MIN_BREAKPOINT]: {
         display: 'grid',
         gap: 0,
         gridTemplateColumns: `minmax(0, ${navSize}px) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, ${rightPanelWidth}px)`,
@@ -215,7 +214,7 @@ const ContentContainer = styled.div(({ theme }) => ({
   backgroundColor: theme.background.content,
   display: 'grid', // This is needed to make the content container fill the available space
 
-  [`@media ${BREAKPOINT_MIN_600}`]: {
+  [MEDIA_MIN_BREAKPOINT]: {
     flex: 'auto',
     gridArea: 'content',
   },

diff --git a/...omponents/mobile/MobileLayoutProvider.tsx → .../src/components/layout/LayoutProvider.tsx b/...omponents/mobile/MobileLayoutProvider.tsx → .../src/components/layout/LayoutProvider.tsx
@@ -1,43 +1,53 @@
 import type { FC } from 'react';
 import React, { createContext, useContext, useState } from 'react';
+import { useMediaQuery } from '../hooks/useMedia';
+import { BREAKPOINT } from '../../constants';
 
-type MobileLayoutContextType = {
+type LayoutContextType = {
   isMobileMenuOpen: boolean;
   setMobileMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isMobileAboutOpen: boolean;
   setMobileAboutOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isMobilePanelOpen: boolean;
   setMobilePanelOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  isDesktop: boolean;
+  isMobile: boolean;
 };
 
-const MobileLayoutContext = createContext<MobileLayoutContextType>({
+const LayoutContext = createContext<LayoutContextType>({
   isMobileMenuOpen: false,
   setMobileMenuOpen: () => {},
   isMobileAboutOpen: false,
   setMobileAboutOpen: () => {},
   isMobilePanelOpen: false,
   setMobilePanelOpen: () => {},
+  isDesktop: false,
+  isMobile: false,
 });
 
-export const MobileLayoutProvider: FC = ({ children }) => {
+export const LayoutProvider: FC = ({ children }) => {
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isMobileAboutOpen, setMobileAboutOpen] = useState(false);
   const [isMobilePanelOpen, setMobilePanelOpen] = useState(false);
+  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINT}px)`);
+  const isMobile = !isDesktop;
 
   return (
-    <MobileLayoutContext.Provider
+    <LayoutContext.Provider
       value={{
         isMobileMenuOpen,
         setMobileMenuOpen,
         isMobileAboutOpen,
         setMobileAboutOpen,
         isMobilePanelOpen,
         setMobilePanelOpen,
+        isDesktop,
+        isMobile,
       }}
     >
       {children}
-    </MobileLayoutContext.Provider>
+    </LayoutContext.Provider>
   );
 };
 
-export const useMobileLayoutContext = () => useContext(MobileLayoutContext);
+export const useLayout = () => useContext(LayoutContext);
diff --git a/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx b/code/ui/manager/src/components/mobile/about/MobileAbout.stories.tsx
@@ -3,13 +3,13 @@ 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';
+import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
 
 /**
  * A helper component to open the about page via the MobileLayoutContext
  */
 const OpenAboutHelper = ({ children }: { children: any }) => {
-  const { setMobileAboutOpen } = useMobileLayoutContext();
+  const { setMobileAboutOpen } = useLayout();
   useEffect(() => {
     setMobileAboutOpen(true);
   }, [setMobileAboutOpen]);
@@ -41,9 +41,9 @@ const meta = {
             } as any
           }
         >
-          <MobileLayoutProvider>
+          <LayoutProvider>
             <OpenAboutHelper>{storyFn()}</OpenAboutHelper>
-          </MobileLayoutProvider>
+          </LayoutProvider>
         </ManagerContext.Provider>
       );
     },

diff --git a/code/ui/manager/src/components/mobile/about/MobileAbout.tsx b/code/ui/manager/src/components/mobile/about/MobileAbout.tsx
@@ -5,10 +5,10 @@ import { styled } from '@storybook/theming';
 import { Icons, Link } from '@storybook/components';
 import { UpgradeBlock } from '../../upgrade/UpgradeBlock';
 import { MOBILE_TRANSITION_DURATION } from '../../../constants';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 export const MobileAbout: FC = () => {
-  const { isMobileAboutOpen, setMobileAboutOpen } = useMobileLayoutContext();
+  const { isMobileAboutOpen, setMobileAboutOpen } = useLayout();
   const aboutRef = useRef(null);
 
   return (

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx b/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx
@@ -3,7 +3,7 @@ import React, { useRef } from 'react';
 import { styled } from '@storybook/theming';
 import { Transition } from 'react-transition-group';
 import type { TransitionStatus } from 'react-transition-group/Transition';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileAddonsDrawerProps {
   children: ReactNode;
@@ -38,7 +38,7 @@ const Container = styled.div<{ state: TransitionStatus }>(({ theme, state }) =>
 }));
 
 export const MobileAddonsDrawer: FC<MobileAddonsDrawerProps> = ({ children }) => {
-  const { isMobilePanelOpen } = useMobileLayoutContext();
+  const { isMobilePanelOpen } = useLayout();
   const containerRef = useRef(null);
 
   return (

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx b/code/ui/manager/src/components/mobile/navigation/MobileMenuDrawer.tsx
@@ -5,7 +5,7 @@ import { Transition } from 'react-transition-group';
 import type { TransitionStatus } from 'react-transition-group/Transition';
 import { MobileAbout } from '../about/MobileAbout';
 import { MOBILE_TRANSITION_DURATION } from '../../../constants';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileMenuDrawerProps {
   children?: React.ReactNode;
@@ -16,7 +16,7 @@ export const MobileMenuDrawer: FC<MobileMenuDrawerProps> = ({ children }) => {
   const sidebarRef = useRef<HTMLDivElement>(null);
   const overlayRef = useRef<HTMLDivElement>(null);
   const { isMobileMenuOpen, setMobileMenuOpen, isMobileAboutOpen, setMobileAboutOpen } =
-    useMobileLayoutContext();
+    useLayout();
 
   return (
     <>

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -4,10 +4,10 @@ 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';
+import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
 
 const MockPanel = () => {
-  const { setMobilePanelOpen } = useMobileLayoutContext();
+  const { setMobilePanelOpen } = useLayout();
   return (
     <div>
       panel
@@ -67,12 +67,12 @@ const meta = {
   decorators: [
     (storyFn) => (
       <ManagerContext.Provider value={mockManagerStore}>
-        <MobileLayoutProvider>
+        <LayoutProvider>
           <div style={{ display: 'flex', flexDirection: 'column', height: '100svh' }}>
             <div style={{ flex: 1 }} />
             {storyFn()}
           </div>
-        </MobileLayoutProvider>
+        </LayoutProvider>
       </ManagerContext.Provider>
     ),
   ],

diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx
@@ -5,7 +5,7 @@ import { IconButton, Icons } from '@storybook/components';
 import { useStorybookApi, useStorybookState } from '@storybook/manager-api';
 import { MobileMenuDrawer } from './MobileMenuDrawer';
 import { MobileAddonsDrawer } from './MobileAddonsDrawer';
-import { useMobileLayoutContext } from '../MobileLayoutProvider';
+import { useLayout } from '../../layout/LayoutProvider';
 
 interface MobileNavigationProps {
   menu?: React.ReactNode;
@@ -35,7 +35,7 @@ const useFullStoryName = () => {
 };
 
 export const MobileNavigation: FC<MobileNavigationProps> = ({ menu, panel, showPanel }) => {
-  const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useMobileLayoutContext();
+  const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout();
   const fullStoryName = useFullStoryName();
 
   return (

diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx
@@ -3,9 +3,7 @@ import { Tabs, Icons, IconButton } from '@storybook/components';
 import type { State } from '@storybook/manager-api';
 import { shortcutToHumanString } from '@storybook/manager-api';
 import type { Addon_BaseType } from '@storybook/types';
-import { useMediaQuery } from '../hooks/useMedia';
-import { BREAKPOINT_MIN_600 } from '../../constants';
-import { useMobileLayoutContext } from '../mobile/MobileLayoutProvider';
+import { useLayout } from '../layout/LayoutProvider';
 
 export interface SafeTabProps {
   title: Addon_BaseType['title'];
@@ -51,8 +49,7 @@ export const AddonPanel = React.memo<{
     panelPosition = 'right',
     absolute = true,
   }) => {
-    const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
-    const { setMobilePanelOpen } = useMobileLayoutContext();
+    const { isDesktop, setMobilePanelOpen } = useLayout();
 
     return (
       <Tabs

diff --git a/code/ui/manager/src/components/preview/Toolbar.tsx b/code/ui/manager/src/components/preview/Toolbar.tsx
@@ -28,8 +28,7 @@ import { ejectTool } from './tools/eject';
 import { menuTool } from './tools/menu';
 import { addonsTool } from './tools/addons';
 import { remountTool } from './tools/remount';
-import { useMediaQuery } from '../hooks/useMedia';
-import { BREAKPOINT_MIN_600 } from '../../constants';
+import { useLayout } from '../layout/LayoutProvider';
 
 export const getTools = (getFn: API['getElements']) => Object.values(getFn(types.TOOL));
 export const getToolsExtra = (getFn: API['getElements']) => Object.values(getFn(types.TOOLEXTRA));
@@ -50,10 +49,10 @@ export const fullScreenTool: Addon_BaseType = {
   type: types.TOOL,
   match: (p) => ['story', 'docs'].includes(p.viewMode),
   render: () => {
-    const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
-    if (!isDesktop) {
-      return null;
-    }
+    const { isDesktop } = useLayout();
+
+    if (!isDesktop) return null;
+
     return (
       <Consumer filter={fullScreenMapper}>
         {({ toggle, isFullscreen, shortcut, hasPanel, singleStory }) =>

diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx
@@ -5,8 +5,7 @@ import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 import type { Button, TooltipLinkListLink } from '@storybook/components';
 import { WithTooltip, TooltipLinkList, Icons, IconButton } from '@storybook/components';
-import { useMediaQuery } from '../hooks/useMedia';
-import { BREAKPOINT_MIN_600 } from '../../constants';
+import { useLayout } from '../layout/LayoutProvider';
 
 export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
 
@@ -120,7 +119,7 @@ export interface SidebarMenuProps {
 
 export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick }) => {
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-  const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
+  const { isDesktop } = useLayout();
 
   if (!isDesktop) {
     return (

diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx
@@ -20,7 +20,7 @@ import { Search } from './Search';
 import { SearchResults } from './SearchResults';
 import type { Refs, CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
-import { BREAKPOINT_MIN_600 } from '../../constants';
+import { MEDIA_MIN_BREAKPOINT } from '../../constants';
 
 export const DEFAULT_REF_ID = 'storybook_internal';
 
@@ -37,7 +37,7 @@ const Container = styled.nav(({ theme }) => ({
   flexDirection: 'column',
   background: theme.background.content,
 
-  [`@media ${BREAKPOINT_MIN_600}`]: {
+  [MEDIA_MIN_BREAKPOINT]: {
     background: theme.background.app,
   },
 }));

diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx
@@ -36,9 +36,7 @@ import {
   getLink,
 } from '../../utils/tree';
 import { statusMapping, getHighestStatus, getGroupStatus } from '../../utils/status';
-import { useMediaQuery } from '../hooks/useMedia';
-import { BREAKPOINT_MIN_600 } from '../../constants';
-import { useMobileLayoutContext } from '../mobile/MobileLayoutProvider';
+import { useLayout } from '../layout/LayoutProvider';
 
 export const Action = styled.button<{ height?: number; width?: number }>(
   ({ theme, height, width }) => ({
@@ -204,8 +202,7 @@ const Node = React.memo<NodeProps>(function Node({
   onSelectStoryId,
   api,
 }) {
-  const isDesktop = useMediaQuery(BREAKPOINT_MIN_600);
-  const { setMobileMenuOpen } = useMobileLayoutContext();
+  const { isDesktop, setMobileMenuOpen } = useLayout();
 
   if (!isDisplayed) {
     return null;

diff --git a/code/ui/manager/src/components/upgrade/UpgradeBlock.tsx b/code/ui/manager/src/components/upgrade/UpgradeBlock.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { styled } from '@storybook/theming';
 import { useStorybookApi } from '@storybook/manager-api';
 import { Link } from '@storybook/components';
-import { BREAKPOINT_MIN_600 } from '../../constants';
+import { MEDIA_MIN_BREAKPOINT } from '../../constants';
 
 interface UpgradeBlockProps {
   onNavigateToWhatsNew?: () => void;
@@ -45,7 +45,7 @@ const Container = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s2,
   width: '100%',
 
-  [`@media ${BREAKPOINT_MIN_600}`]: {
+  [MEDIA_MIN_BREAKPOINT]: {
     maxWidth: 400,
   },
 }));

diff --git a/code/ui/manager/src/constants.ts b/code/ui/manager/src/constants.ts
@@ -1,2 +1,3 @@
-export const BREAKPOINT_MIN_600 = '(min-width: 600px)';
+export const BREAKPOINT = 600;
+export const MEDIA_MIN_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
 export const MOBILE_TRANSITION_DURATION = 300;