Configure default tab

[openscript]

Is your feature request related to a problem? Please describe.
I'm always frustrated when I cannot make it as easy as possible for the user like when the user has to click something unnecessarily.

Describe the solution you'd like
It would be great, if the default tab is configurable. Currently the default tab is always canvas.

Describe alternatives you've considered
Thanks to #7066 and #9095 we are able to hide the canvas tab, but this is not an option, because I want to keep it. My users want to see the docs tab by default and switch to another if they need to.

Are you able to assist bring the feature to reality?
Yes I can, if you tell me some starting points to implement this.

Additional context
Even though the canvas tab is hidden on my start page, the canvas tab is selected by default:

Written regarding the storybook version 6.0.12.

[openscript]

As it turns out this is actually already possible. I've added a .storybook/preview.js config with the following content:

import { addParameters } from '@storybook/client-api';

addParameters({
  viewMode: 'docs',
});

I'm on version 6.0.13. I've found the necessary hints here.

[ScottEAdams]

Maybe I am wrong but is that the same as doing

export const parameters = {
	actions: { argTypesRegex: '^on[A-Z].*' },
	viewMode: 'docs'
}

[openscript]

Likely if it's working. Mabye @shilman can give more insight here?

[shilman]

Yes. addParameters is deprecated in 6.0 and the preferred method is to export parameters

[sotnikov-link]

First page (with clean Application cache) opens tab «Canvas» if even tab «Canvas» is hidden: /?path=/story/base-start--page :(

<Meta
  title="Base/Start"
  parameters={{
    viewMode: 'docs',
    previewTabs: { 'storybook/docs/panel': null, canvas: { hidden: true } },
  }}
/>

[sotnikov-link]

My versions from package.json

"@storybook/addon-docs": "^6.0.17",
"@storybook/addon-essentials": "^6.0.17",
"@storybook/addon-links": "^6.0.17",
"@storybook/addon-storysource": "^6.0.17",
"@storybook/addons": "^6.0.17",
"@storybook/react": "^6.0.17",

[openscript]

Hmm.. Have you tried to do it via the .storybook/preview.js file?

[sotnikov-link]

Hmm.. Have you tried to do it via the .storybook/preview.js file?

Yes. Application cache is clean for your firs visit?

My .storybook/preview.js

import { PARAM_KEY as docsViewId } from '@storybook/addon-docs/dist/shared';
import { addParameters } from '@storybook/react';

addParameters({
  viewMode: docsViewId,
});

[openscript]

I've imported import { addParameters } from '@storybook/client-api';. I don't know if this maybe makes a difference.

[shilman]

shouldn't make a difference @openscript

[sotnikov-link]

@openscript
Browser cache is clean for your firs visit?

[openscript]

@openscript
Browser cache is clean for your firs visit?

Yes, I've started the server and then open my storybook with an incognito tab. It works just like expected. Always the docs page is shown first.

Here is the whole project: https://github.com/openscript/react-dsv-import

[sotnikov-link]

@openscript
Browser cache is clean for your firs visit?

Yes, I've started the server and then open my storybook with an incognito tab. It works just like expected. Always the docs page is shown first.

Here is the whole project: https://github.com/openscript/react-dsv-import

Is your site using it now? Your site is not being opened tab «Docs» with an incognito.

[openscript]

No the currently deployed version is outdated. I suggest to clone, install the dependency and run yarn dev to start storybook.

[sotnikov-link]

I checked your repository on branches: master, develop. It doesn't work: https://i.imgur.com/3Mg34ee.mp4.

You see Canvas of MDX which looks like Docs but it isn't Docs.

I delete first MDX Story docs/start.stories.mdx on branch develop and I see clearly tab "Canvas" for first visit: https://i.imgur.com/6CC05gm.mp4.

All Demos: https://imgur.com/a/YCZYT5h.

[openscript]

I've checked it on the develop branch and it works in Firefox and Chromium:
https://drive.google.com/file/d/13GqoEexLQYtf5Al_ZL-IlLX3poEU5nA7/view

I've no idea where is the difference 😕

[sotnikov-link]

I delete first MDX Story docs/start.stories.mdx on branch develop and I see clearly tab "Canvas" for first visit: https://i.imgur.com/6CC05gm.mp4.

Try to do the same.

[openscript]

You are right. There is probably a bug:

<Meta title="Start" parameters={{ previewTabs: { canvas: { hidden: true }}}} />

Even the canvas is hidden it is shown..

[sotnikov-link]

Maybe you transit this issue to status "open"? :)

[openscript]

I think it would be better to create a new issue. If I have time later I'll do that.

[spudly]

I think it would be better to create a new issue. If I have time later I'll do that.

Is there a new issue for this?

[openscript]

I've never created one.

[symmetriq]

The problem with viewMode: 'docs' is it keeps switching you back to the Docs tab whenever you select a different component in the sidebar. When this setting is not enabled, it remembers which tab was active when switching components.

I'd prefer to make the Docs tab default, but not at the expense of having to keep clicking Canvas every time I switch components.

[llaenowyd]

it keeps switching you back to the Docs tab whenever you select a different component

That could be useful in some cases. I think I prefer it in my case, if the docs are looking great, then steer the user onto them, but they can click into Canvas to look at something, almost a kind of drill in.

Also hope to see it being simpler to land on the doc page as the user first visits the Storybook. I'm not sure if that's included in this issue or if there's a way I haven't discovered as yet.

[coreybruyere]

None of the above solutions worked for me. Should this issue be closed?

[dep]

With the following in my preview.js, my first Story still shows "Canvas" onload. Clicking to other stories and then back to it makes it switch to Docs, but always a problem on firstload.

addParameters({
  viewMode: "docs",
});

[thedamon]

With the following in my preview.js, my first Story still shows "Canvas" onload. Clicking to other stories and then back to it makes it switch to Docs, but always a problem on firstload.

addParameters({
  viewMode: "docs",
});

I'm having this issue as well with a story that I wish to default to docs and have no canvas tab.

If I click the story title in the nav it goes to the docs tab, but if I click the story's group (which this is the first story inside) it goes to canvas... missing the parameters I have set.

As mentioned, the idea to go to the Docs tab as default for a certain story without messing around what the default behaviour is seems like a nice idea.

I may have to put the Docs in Canvas and hide the docs tab to make it work consistently tho :/

[shilman]

@thedamon we're getting rid of the docs tab entirely in 7.0, so i don't expect us to fix this in 6.5 unless it's community contributed & an easy fix

We're actively working on the Docs behavior for v7 now and would love feedback for what needs to be done to suit your use case. You can read about the changes here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-changes

And you can try it out with:

npx sb@next upgrade --prerelease

It's still pretty raw & we'll be adding a bunch of migration support between now & final release

[thedamon]

My usecase is to include a README.md from a package as my story as it doesn't really have a story. I thought using Docs with a content override would work since it's more doc than canvas, but I think now I ought to just stick it in canvas with mdx. I'll have a look tho!

[shilman]

I think you can do that very directly in v7:

// Readme.mdx
import { Meta } from '@storybook/blocks';
import Readme from 'path/to/README.md';

<Readme />

We might even be able to support .md files directly so you could just include that in your main.js file, but that's not currently implemented and I'm not sure we would. cc @JReinhold

All that said, I think you should be able to do the same thing in V6:

// Readme.stories.mdx
import { Meta } from '@storybook/addon-docs';
import Readme from 'path/to/README.md';

<Readme />

There's a transcludeMarkdown true option that's needed to get this behavior

[thedamon]

yup. i need to make a wrapper component i think because (for now) we rely on markdown NOT being transcluded in a custom Changelog tab. I just created a component manually like:

/* Docs.mdx */
import { Description } from '@storybook/addon-docs/blocks';
import readme from './README.md';

<Description markdown={readme}></Description>

Using "Canvas" I should be able to just make the above my story.

[Mishhub]

Is there any solution for this ?