fix: Use context to pass API to Layout and mock it in Layout stories

storybookjs · Feb 13, 2025 · 6838695 · 6838695
1 parent 4cd8b7f
commit 6838695
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/code/core/src/manager/App.tsx b/code/core/src/manager/App.tsx
@@ -4,30 +4,26 @@ import React from 'react';
 import { Global, createGlobal } from '@storybook/core/theming';
 import type { Addon_PageType } from '@storybook/core/types';
 
-import type { API } from '@storybook/core/manager-api';
-
 import { Layout } from './components/layout/Layout';
 import { useLayout } from './components/layout/LayoutProvider';
 import Panel from './container/Panel';
 import Preview from './container/Preview';
 import Sidebar from './container/Sidebar';
 
 type Props = {
-  api: API;
   managerLayoutState: ComponentProps<typeof Layout>['managerLayoutState'];
   setManagerLayoutState: ComponentProps<typeof Layout>['setManagerLayoutState'];
   pages: Addon_PageType[];
   hasTab: boolean;
 };
 
-export const App = ({ api, managerLayoutState, setManagerLayoutState, pages, hasTab }: Props) => {
+export const App = ({ managerLayoutState, setManagerLayoutState, pages, hasTab }: Props) => {
   const { setMobileAboutOpen } = useLayout();
 
   return (
     <>
       <Global styles={createGlobal} />
       <Layout
-        api={api}
         hasTab={hasTab}
         managerLayoutState={managerLayoutState}
         setManagerLayoutState={setManagerLayoutState}

diff --git a/code/core/src/manager/components/layout/Layout.stories.tsx b/code/core/src/manager/components/layout/Layout.stories.tsx
@@ -6,6 +6,8 @@ import { styled } from '@storybook/core/theming';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
+import { ManagerContext } from '@storybook/core/manager-api';
+
 import { action } from '@storybook/addon-actions';
 
 import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories';
@@ -53,6 +55,15 @@ const defaultState = {
   viewMode: 'story',
 } as const;
 
+const managerContext: any = {
+  state: {},
+  api: {
+    getNavSizeWithCustomisations: fn()
+      .mockName('api::getNavSizeWithCustomisations')
+      .mockImplementation((size: number) => size),
+  },
+};
+
 const meta = {
   title: 'Layout',
   component: Layout,
@@ -68,6 +79,9 @@ const meta = {
   globals: { sb_theme: 'light' },
   parameters: { layout: 'fullscreen' },
   decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
+    ),
     MobileNavigationStoriesMeta.decorators[0] as any,
     (storyFn) => (
       <LocationProvider>

diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx
@@ -4,7 +4,7 @@ import { Match } from '@storybook/core/router';
 import { styled } from '@storybook/core/theming';
 import type { API_Layout, API_ViewMode } from '@storybook/core/types';
 
-import type { API } from '@storybook/core/manager-api';
+import { type API, useStorybookApi } from '@storybook/core/manager-api';
 
 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
 import { Notifications } from '../../container/Notifications';
@@ -24,7 +24,6 @@ interface ManagerLayoutState
 export type LayoutState = InternalLayoutState & ManagerLayoutState;
 
 interface Props {
-  api: API;
   managerLayoutState: ManagerLayoutState;
   setManagerLayoutState: (state: Partial<Omit<ManagerLayoutState, 'viewMode'>>) => void;
   slotMain?: React.ReactNode;
@@ -128,14 +127,9 @@ const useLayoutSyncingState = ({
   };
 };
 
-export const Layout = ({
-  api,
-  managerLayoutState,
-  setManagerLayoutState,
-  hasTab,
-  ...slots
-}: Props) => {
+export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...slots }: Props) => {
   const { isDesktop, isMobile } = useLayout();
+  const api = useStorybookApi();
 
   const {
     navSize,