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>

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]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 84a0da2. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[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

[Sidnioulz]

I don't understand why this fails in CI, as I've added the signature to the SubAPI for layout. Any advice on what I did wrong?

[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.