[RFC] Selectively hide panel

[unional]

Summary

Provide a mechanism to:

• hide addon panels per story.
• give sufficient information to the addon author to hide the addon panel when it is not needed.

Problem Statement

As the number of Storybook addons, so does the number of addon panels.
In many case, not all panels are useful for a specific story.

It cluttered the UI, making it harder to use.
There also could be performance impact.

But currently, there seems to be no way to control which panel to hide per story.

Non-goals

• not controlling the hiding or showing of the "Show addons" pane form .storybook/manager.ts

Implementation

For the addon author, the useChannel({ STORY_CHANGED: ... }) may already have sufficient information, but I have not work on creating a Panel yet so I'm not 100% sure.

The bottom line is allow the author to do this:

export const Panel = () => {
  const shouldShow = ...
  if (!shouldShow) return null

  return <MyPanel />
}

For the consumer,
allow them to control which panel to hide.
One way is adding a specific prop:

export const Story = {
  hidePanels: ['addon-a', 'addon-b']
  // ...
}

Another way is use the same syntax as in tags, which allow the panels to be sorted too:

export const Story = {
  addonPanels: ['addon-x', 'addon-y', '!addon-a', '!addon-b']
}

Prior Art

No response

Deliverables

No response

Risks

No response

Unresolved Questions

• Using a to do list makes it easy to resolve the questions as we move the RFC along.

Alternatives considered / Abandoned Ideas

No response

[shilman]

I agree this is a good feature. There's an undocumented way of doing this today--we didn't document it because there was no consensus on what the API should be. I'll sketch that out here for discussion's sake.

[Sidnioulz]

@shilman could we build upon the layoutCustomisations API endpoints to add one that receives a list of panels and must return the panels to display? That would provide a unique API for controlling what UI elements are displayed where.

[Sidnioulz]

@unional if you want to have a look at the current API for hiding the sidebar/toolbar, it's documented on https://storybook.js.org/docs/configure/user-interface/features-and-behavior.

[shilman]

This makes sense to me!

[Sidnioulz]

Passing this as accepted as we discussed we'd switch it to an open issue in a refinement a few weeks back.