Manager: Add options to hide sidebar and toolbar per story

code/.storybook/manager.tsx

@@ -1,9 +1,25 @@
-import { addons } from 'storybook/internal/manager-api';
+import { type State, addons } from 'storybook/internal/manager-api';
 
 import { startCase } from 'es-toolkit/compat';
 
 addons.setConfig({
   sidebar: {
     renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
   },
+  layoutCustomisations: {
+    showSidebar(state: State, defaultValue: boolean) {
+      if (state.viewMode === 'story' && state.storyId.startsWith('😀')) {
+        return false;
+      }
+
+      return defaultValue;
+    },
+    showToolbar(state: State, defaultValue: boolean) {
+      if (state.viewMode === 'docs') {
+        return false;
+      }
+
+      return defaultValue;
+    },
+  },
 });

code/core/src/common/presets.ts

@@ -21,6 +21,7 @@ import { interopRequireDefault } from './utils/interpret-require';
 import { loadCustomPresets } from './utils/load-custom-presets';
 import { safeResolve, safeResolveFrom } from './utils/safeResolve';
 import { stripAbsNodeModulesPath } from './utils/strip-abs-node-modules-path';
+import { isFunction, isObject } from './utils/type-guards';
 
 type InterPresetOptions = Omit<
   CLIOptions &
@@ -29,10 +30,6 @@ type InterPresetOptions = Omit<
   'frameworkPresets'
 >;
 
-const isObject = (val: unknown): val is Record<string, any> =>
-  val != null && typeof val === 'object' && Array.isArray(val) === false;
-const isFunction = (val: unknown): val is Function => typeof val === 'function';
-
 export function filterPresetsConfig(presetsConfig: PresetConfig[]): PresetConfig[] {
   return presetsConfig.filter((preset) => {
     const presetName = typeof preset === 'string' ? preset : preset.name;
@@ -50,7 +47,7 @@ function resolvePathToMjs(filePath: string): string {
 }
 
 function resolvePresetFunction<T = any>(
-  input: T[] | Function,
+  input: T[] | CallableFunction,
   presetOptions: any,
   storybookOptions: InterPresetOptions
 ): T[] {
@@ -189,8 +186,8 @@ export const resolveAddonName = (
 const map =
   ({ configDir }: InterPresetOptions) =>
   (item: any) => {
-    const options = isObject(item) ? item['options'] || undefined : undefined;
-    const name = isObject(item) ? item['name'] : item;
+    const options = isObject(item) ? item.options || undefined : undefined;
+    const name = isObject(item) ? item.name : item;
 
     let resolved;
 

code/core/src/common/utils/__tests__/type-guards.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { isFunction, isObject } from '../type-guards';
+
+describe('type-guards - isFunction', () => {
+  it('should return true for regular functions', () => {
+    function testFn() {}
+    expect(isFunction(testFn)).toBe(true);
+  });
+
+  it('should return true for arrow functions', () => {
+    const arrowFn = () => {};
+    expect(isFunction(arrowFn)).toBe(true);
+  });
+
+  it('should return true for class methods', () => {
+    class TestClass {
+      method() {}
+    }
+    const instance = new TestClass();
+    expect(isFunction(instance.method)).toBe(true);
+  });
+
+  it('should return true for built-in functions', () => {
+    expect(isFunction(setTimeout)).toBe(true);
+    expect(isFunction(console.log)).toBe(true);
+  });
+
+  it('should return false for non-function values', () => {
+    expect(isFunction(null)).toBe(false);
+    expect(isFunction(undefined)).toBe(false);
+    expect(isFunction(42)).toBe(false);
+    expect(isFunction('string')).toBe(false);
+    expect(isFunction({})).toBe(false);
+    expect(isFunction([])).toBe(false);
+    expect(isFunction(true)).toBe(false);
+  });
+});
+
+describe('type-guards - isObject()', () => {
+  it('should return true for plain objects', () => {
+    expect(isObject({})).toBe(true);
+    expect(isObject({ a: 1 })).toBe(true);
+  });
+
+  it('should return true for class instances', () => {
+    class TestClass {}
+    const instance = new TestClass();
+    expect(isObject(instance)).toBe(true);
+  });
+
+  it('should return false for null and undefined', () => {
+    expect(isObject(null)).toBe(false);
+    expect(isObject(undefined)).toBe(false);
+  });
+
+  it('should return false for arrays', () => {
+    expect(isObject([])).toBe(false);
+    expect(isObject([1, 2, 3])).toBe(false);
+  });
+
+  it('should return false for primitive values', () => {
+    expect(isObject(42)).toBe(false);
+    expect(isObject('string')).toBe(false);
+    expect(isObject(true)).toBe(false);
+    expect(isObject(Symbol('test'))).toBe(false);
+  });
+
+  it('should return true for complex objects', () => {
+    const date = new Date();
+    const map = new Map();
+    const set = new Set();
+
+    expect(isObject(date)).toBe(true);
+    expect(isObject(map)).toBe(true);
+    expect(isObject(set)).toBe(true);
+  });
+});

code/core/src/common/utils/type-guards.ts

@@ -0,0 +1,3 @@
+export const isObject = (val: unknown): val is Record<string, any> =>
+  val != null && typeof val === 'object' && Array.isArray(val) === false;
+export const isFunction = (val: unknown): val is CallableFunction => typeof val === 'function';

code/core/src/manager-api/modules/layout.ts

@@ -1,12 +1,18 @@
 import type { ThemeVars } from '@storybook/core/theming';
 import { create } from '@storybook/core/theming/create';
-import type { API_Layout, API_PanelPositions, API_UI } from '@storybook/core/types';
+import type {
+  API_Layout,
+  API_LayoutCustomisations,
+  API_PanelPositions,
+  API_UI,
+} from '@storybook/core/types';
 import { global } from '@storybook/global';
 
 import { SET_CONFIG } from '@storybook/core/core-events';
 
 import { isEqual as deepEqual, pick, toMerged } from 'es-toolkit';
 
+import { isFunction } from '../../common/utils/type-guards';
 import merge from '../lib/merge';
 import type { ModuleFn } from '../lib/types';
 import type { State } from '../root';
@@ -21,6 +27,7 @@ export const ActiveTabs = {
 
 export interface SubState {
   layout: API_Layout;
+  layoutCustomisations: API_LayoutCustomisations;
   ui: API_UI;
   selectedPanel: string | undefined;
   theme: ThemeVars;
@@ -78,6 +85,16 @@ export interface SubAPI {
   getIsPanelShown: () => boolean;
   /** GetIsNavShown - Returns the current visibility of the navigation bar in the Storybook UI. */
   getIsNavShown: () => boolean;
+  /**
+   * GetShowToolbarWithCustomisations - Returns the current visibility of the toolbar, taking into
+   * account customisations requested by the end user via a layoutCustomisations function.
+   */
+  getShowToolbarWithCustomisations: (showToolbar: boolean) => boolean;
+  /**
+   * GetNavSizeWithCustomisations - Returns the size to apply to the sidebar/nav, taking into
+   * account customisations requested by the end user via a layoutCustomisations function.
+   */
+  getNavSizeWithCustomisations: (navSize: number) => number;
 }
 
 type PartialSubState = Partial<SubState>;
@@ -100,6 +117,10 @@ export const defaultLayoutState: SubState = {
     panelPosition: 'bottom',
     showTabs: true,
   },
+  layoutCustomisations: {
+    showSidebar: undefined,
+    showToolbar: undefined,
+  },
   selectedPanel: undefined,
   theme: create(),
 };
@@ -313,7 +334,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
     },
 
     getInitialOptions() {
-      const { theme, selectedPanel, ...options } = provider.getConfig();
+      const { theme, selectedPanel, layoutCustomisations, ...options } = provider.getConfig();
 
       return {
         ...defaultLayoutState,
@@ -324,6 +345,10 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
           ),
           ...(singleStory && { navSize: 0 }),
         },
+        layoutCustomisations: {
+          ...defaultLayoutState.layoutCustomisations,
+          ...(layoutCustomisations ?? {}),
+        },
         ui: toMerged(defaultLayoutState.ui, pick(options, Object.keys(defaultLayoutState.ui))),
         selectedPanel: selectedPanel || defaultLayoutState.selectedPanel,
         theme: theme || defaultLayoutState.theme,
@@ -340,6 +365,31 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
       return getIsNavShown(store.getState());
     },
 
+    getShowToolbarWithCustomisations(showToolbar: boolean) {
+      const state = store.getState();
+
+      if (isFunction(state.layoutCustomisations.showToolbar)) {
+        return state.layoutCustomisations.showToolbar(state, showToolbar);
+      }
+
+      return showToolbar;
+    },
+
+    getNavSizeWithCustomisations(navSize: number) {
+      const state = store.getState();
+
+      if (isFunction(state.layoutCustomisations.showSidebar)) {
+        const shouldShowNav = state.layoutCustomisations.showSidebar(state, navSize !== 0);
+        if (navSize === 0 && shouldShowNav === true) {
+          return state.layout.recentVisibleSizes.navSize;
+        } else if (navSize !== 0 && shouldShowNav === false) {
+          return 0;
+        }
+      }
+
+      return navSize;
+    },
+
     setOptions: (options: any) => {
       const { layout, ui, selectedPanel, theme } = store.getState();
 

code/core/src/manager/App.tsx

@@ -4,26 +4,30 @@ 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 = ({ managerLayoutState, setManagerLayoutState, pages, hasTab }: Props) => {
+export const App = ({ api, managerLayoutState, setManagerLayoutState, pages, hasTab }: Props) => {
   const { setMobileAboutOpen } = useLayout();
 
   return (
     <>
       <Global styles={createGlobal} />
       <Layout
+        api={api}
         hasTab={hasTab}
         managerLayoutState={managerLayoutState}
         setManagerLayoutState={setManagerLayoutState}

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

@@ -4,6 +4,8 @@
 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 { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
 import { Notifications } from '../../container/Notifications';
 import { MobileNavigation } from '../mobile/navigation/MobileNavigation';
@@ -22,6 +24,7 @@
 export type LayoutState = InternalLayoutState & ManagerLayoutState;
 
 interface Props {
+  api: API;
   managerLayoutState: ManagerLayoutState;
   setManagerLayoutState: (state: Partial<Omit<ManagerLayoutState, 'viewMode'>>) => void;
   slotMain?: React.ReactNode;
@@ -44,11 +47,13 @@
  * manager store to the internal state here when necessary
  */
 const useLayoutSyncingState = ({
+  api,
   managerLayoutState,
   setManagerLayoutState,
   isDesktop,
   hasTab,
 }: {
+  api: API;
   managerLayoutState: Props['managerLayoutState'];
   setManagerLayoutState: Props['setManagerLayoutState'];
   isDesktop: boolean;
@@ -108,8 +113,10 @@
     ? internalDraggingSizeState
     : managerLayoutState;
 
+  const customisedNavSize = api.getNavSizeWithCustomisations(navSize);
+
   return {
-    navSize,
+    navSize: customisedNavSize,
     rightPanelWidth,
     bottomPanelHeight,
     panelPosition: managerLayoutState.panelPosition,
@@ -121,7 +128,13 @@
   };
 };
 
-export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...slots }: Props) => {
+export const Layout = ({
+  api,
+  managerLayoutState,
+  setManagerLayoutState,
+  hasTab,
+  ...slots
+}: Props) => {
   const { isDesktop, isMobile } = useLayout();
 
   const {
@@ -134,7 +147,7 @@
     showPages,
     showPanel,
     isDragging,
-  } = useLayoutSyncingState({ managerLayoutState, setManagerLayoutState, isDesktop, hasTab });
+  } = useLayoutSyncingState({ api, managerLayoutState, setManagerLayoutState, isDesktop, hasTab });
 
   return (
     <LayoutContainer

code/core/src/manager/components/preview/Preview.tsx

@@ -60,6 +60,7 @@ const Preview = React.memo<PreviewProps>(function Preview(props) {
 
   const shouldScale = viewMode === 'story';
   const { showToolbar } = options;
+  const customisedShowToolbar = api.getShowToolbarWithCustomisations(showToolbar);
 
   const previousStoryId = useRef(storyId);
 
@@ -94,7 +95,7 @@ const Preview = React.memo<PreviewProps>(function Preview(props) {
         <S.PreviewContainer>
           <ToolbarComp
             key="tools"
-            isShown={showToolbar}
+            isShown={customisedShowToolbar}
             // @ts-expect-error (non strict)
             tabId={tabId}
             tabs={tabs}

code/core/src/manager/index.tsx

@@ -71,6 +71,7 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
                 <LayoutProvider>
                   <App
                     key="app"
+                    api={api}
                     pages={pages}
                     managerLayoutState={{
                       ...state.layout,