Allow to auto switch (or hide) between docs / canvas

[daKmoR]

When moving through multiple stories where some have handwritten docs and others use knobs it can become quite cumbersome/confusing. Where to open docs and where to open canvas?

Describe the solution you'd like
I would like to be able to set for each story if it should show docs or canvas. (optionally it could even hide the "not needed" docs/canvas)

straw man proposal

// docs stories
export default {
  parameters: { options: { 
    selectedBarPanel: 'storybook/docs', // switch to by default
    uniqueBarPanel: 'storybook/docs', // switch & hide all other barPanels
  } },
};

// knobs stories
export default {
  parameters: { options: { 
    selectedBarPanel: 'storybook/canvas',
    selectedPanel: 'storybookjs/knobs/panel' 
  } },
};

Are you able to assist bring the feature to reality?
yes, I can code 🤗 if you point me in the right direction - pretty please 🙏

Additional context

This is how it currently feels 😅 confusing when to use canvas with knobs and when to use docs.
Also see live example https://open-wc.org/demoing-storybook/

[rblock-aw]

I don't want to hijack this feature request, but I want to propose an alternative solution to the same problem. I too think switching between docs / canvas is confusing and distracting from reading and interpreting the documentation. However, if there would be a way to embed the knobs within the story preview itself (or in a separate pane but then dependent on the selected story in the left navigation bar), I think the need for switching between the docs / canvas is almost gone (especially if also the actions pane etc. could be rendered in the same way). The canvas would then mostly be used for examining a story separately e.g. for testing (taking snapshots) or debugging a particular case.

How do you feel about this? Should I create a separate feature request for this?

[shilman]

@rblock-aw There are two existing issues for knobs specifically #6639 and addons in general #6700

Feel free to join in there!

[rblock-aw]

Sure, I actually searched for 'docs knobs' and didn't stumble on those topics (my bad). Thanks for the pointer!

[daKmoR]

I took a slightly different approach now...

e.g. there are no separate docs/knobs stories anymore. So all are docs and you can open them in canvas to see the knobs for the story...

probably nice would be if the menu would change while you scroll down (e.g. that always the story you look at becomes active)

It looks now like this

you can also see it live at https://open-wc.org/demoing-storybook/?path=/docs/demo-card-docs--simple

closing - if auto selecting current viewed story ever becomes "mandatory" I can create a separate issue for it 👍

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.2 containing PR #9090 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

[kelly-tock]

I took a slightly different approach now...

e.g. there are no separate docs/knobs stories anymore. So all are docs and you can open them in canvas to see the knobs for the story...

probably nice would be if the menu would change while you scroll down (e.g. that always the story you look at becomes active)

It looks now like this

you can also see it live at https://open-wc.org/demoing-storybook/?path=/docs/demo-card-docs--simple

closing - if auto selecting current viewed story ever becomes "mandatory" I can create a separate issue for it 👍

would it be possible @daKmoR to see the source of this demo? I can't find how to do some of those options. is it just me or are the docs for this documentation tool hard to find?

[JSONRice]

@kelly-tock the documentation is really not thorough. I'm migrating from 5 -> 6 and can't get the canvas to even show up. Here is my config in main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-controls',
    '@storybook/addon-viewport'
  ],
}