Manager: Add options to hide sidebar and toolbar per story

[Sidnioulz]

Closes #22081.

Context

• [Feature Request] Add option to hide toolbars for doc pages #22081
• [Feature Request] Add option to hide toolbars for doc pages #22081 (comment) in particular

What I did

• Added a layoutCustomisations object to the manager layout state, which receives functions to customise whether the toolbar or sidebar should be shown in the UI
• Added two getters that get navSize and showToolbar, along with customisations requested by the end user, for use as close to the context of use as possible (within the Preview and Layout components)
• Edited documentation to mention the new toolbar function
• Made minor type/prop drilling/util generalisation code changes

What's left to do

• Get feedback from core team and @ndelangen
• Add general documentation on layout customisations (left a stub in the relevant place)
• Check how to register the new toolbar.mdx page (if relevant) since toc is gone
• Consider adding an option to hide the panel on certain stories too (e.g. highly curated showcase / example stories where argType editing makes less sense)
• Find a way to test this code as the manager Preview.stories.tsx file is gone
• Discuss the behaviour of the sidebar button in the toolbar, when in fullscreen and the sidebar is hidden
• Discuss the expected behaviour for the sidebar menu in mobile when showSidebar returns false

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Edit code/.storybook/manager.tsx with the snippet below
2. Run yarn storybook:ui
3. Notice that on docs entries, the toolbar disappears, and it reappears on other entries
4. Notice that on the unicode docs pages, the sidebar disappears; good luck navigating away from it :D

The snippet:

import { type State, addons } from 'storybook/internal/manager-api';

addons.setConfig({
  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;
    },
  },
});

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	80.5 MB	80.5 MB	0 B	0.51	0%
initSize	80.5 MB	80.5 MB	0 B	0.51	0%
diffSize	97 B	97 B	0 B	-	0%
buildSize	7.31 MB	7.31 MB	1.02 kB	1.52	0%
buildSbAddonsSize	1.9 MB	1.9 MB	0 B	1.41	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.88 MB	1.02 kB	1.08	0.1%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.97 MB	3.97 MB	1.02 kB	1.49	0%
buildPreviewSize	3.34 MB	3.34 MB	0 B	1.52	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	24.8s	7s	-17s -757ms	-1.03	-251.1%
generateTime	19.1s	19.3s	134ms	-0.13	0.7%
initTime	4.8s	4.6s	-216ms	-0.05	-4.7%
buildTime	9.3s	9s	-345ms	-0.09	-3.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.9s	4.6s	-242ms	-0.93	-5.2%
devManagerResponsive	3.8s	3.7s	-107ms	-0.67	-2.9%
devManagerHeaderVisible	693ms	628ms	-65ms	-1.21	-10.4%
devManagerIndexVisible	700ms	660ms	-40ms	-1.22	-6.1%
devStoryVisibleUncached	2.3s	3.2s	911ms	-0.22	27.8%
devStoryVisible	722ms	661ms	-61ms	-1.32	🔰-9.2%
devAutodocsVisible	689ms	673ms	-16ms	-0.63	-2.4%
devMDXVisible	675ms	622ms	-53ms	-1.02	-8.5%
buildManagerHeaderVisible	1s	658ms	-438ms	-0.62	-66.6%
buildManagerIndexVisible	1.1s	668ms	-436ms	-0.76	-65.3%
buildStoryVisible	1s	642ms	-395ms	-0.61	-61.5%
buildAutodocsVisible	1.1s	584ms	-527ms	-0.34	-90.2%
buildMDXVisible	618ms	479ms	-139ms	-1.31	🔰-29%

Greptile Summary

This PR adds layout customization options to conditionally show/hide the Storybook toolbar and sidebar based on story context, primarily addressing the need to hide toolbars on documentation pages.

• Added layoutCustomisations object in manager config with showSidebar and showToolbar functions
• Implemented getShowToolbarWithCustomisations and getNavSizeWithCustomisations in layout module to handle visibility logic
• Added new documentation in toolbar.mdx explaining conditional toolbar visibility features
• Modified Layout and Preview components to integrate customization logic through API props
• Added type definitions for layout customization interfaces in addons.ts and api.ts

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 6838695.

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	2m 3s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-02-13 11:23:56 UTC

[greptile-apps]

_{17 file(s) reviewed, 12 comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

style: Example values should include type annotations to match the function signatures in the code

[jonniebigodes]

@Sidnioulz, could you ping me when you finish adding the documentation so that I can review it properly and help you get this in?

Let me know and we'll go from there.

[Sidnioulz]

@jonniebigodes thanks, I had totally forgotten about this bit. I've updated it to integrate the new config options in your existing docs, and added a Sidebar UI section with both the showSidebar options/API and the keyboard shortcut doc which was missing.

I've placed a warning about not using showSidebar without an alternative means of nav everywhere where it's mentioned.

[jonniebigodes]

@Sidnioulz, I'm sorry for the radio silence on this. I was tasked with other documentation / project-related items that required my attention. I looked into it and left some items for you to consider when you can.

Let me know and we'll go from there.

Hope you have a great weekend.

Stay safe

[Sidnioulz]

@jonniebigodes I believe I've addressed all docs feedback. Thanks again for showing me how to preview docs and handle snippets! Do let me know if anything extra needs changing.

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 6838695, ran on 13 February 2025 at 11:32:04 UTC}

No significant changes detected, all good. 👏

[jonniebigodes]

@Sidnioulz, thank you for taking the time to address the documentation feedback. Appreciate it 🙏 ! From my end, all is good, and I'm approving this to unblock you.

@ndelangen, can you follow up with @Sidnioulz for any code changes that need follow-up?

Thanks in advance

[Sidnioulz]

@ndelangen I've implemented what we discussed yesterday, Layout stories should now all pass! This is ready for review. I'll only add commits to handle the rebase conflicts.