[WIP] new layout-system

[ndelangen]

Work In Progress

New layout system:
This introduced a new core principle for storybook called 'layout'.
This can be set via a config.js or perhaps in the future could be set per story basis.

goals:

• a config that describes the layout
• implement config => render
• support fullscreen switching
• support switching addonPanel
• support switching storiesPanel
• write fantastic unittests for great covefe

stretch goals

• allow setting of additional props
• expose a list of default layouts importable for users
• expose some utilities to help manage layouts
• get global config from config.js
• allow local config from story
• allow modifying config at runtime

long stretch goals

• persist changes
• setting on where to persist (localstorage / config)
• deal with discrepancies between local changes and config changes

[ndelangen]

This is what the setup looks like:

This is what you do with this currently, although admittedly, having multiple previews is buggy right now.

[ndelangen]

Progress update:
It's now possible to define "static analysable" uiOptions in a file called .storybook.js.

This file will be loaded into the manager directly, the preview does not push the options into the manager on first run. (It still can).
I'm investigating if There's more options here. Like can I use this file as a universal storybook config file, and place all storybook related configuration in a statically analysable way.

Something to discuss on the roadmap meeting 🎉

[ndelangen]

UPDATE:

I implemented:

• support switching addonPanel
• support switching storiesPanel

Made a video showcasing some of the functionality:

[ndelangen]

@shilman Can we discuss if this satisfies your idea of what must be done to get this merged into A 3.x release?

Anyone else on the @storybooks/team want to weigh in on that? @danielduan @Hypnosphi ?

[danielduan]

I'm definitely leaning towards having this be 3.4. This does change Storybook's behavior for every possible user we have so it's definitely not a minor refactor.

However, if we can get this completed soon and go through a good amount of alpha testing, I could be convinced that this be included in 3.3.

[ndelangen]

Definitely 3.4 or higher, 3.3 is locked for significant changes AFAIK.

[ndelangen]

🤣

[renaudtertrais]

Could be great to be able to achieve those kind of layout:

[gauthamchandra]

Hi, I was wondering if this is still being worked on (maybe in another PR)?

We wanted to customize the layout and styling for the storybook UI itself but as mentioned earlier in this issue, that's not currently possible due to the dynamically generated nature of the CSS classes.

I wouldn't mind helping out in this regard and opening a PR but wanted to make sure noone else is already working on this.