Force docs tab to show first when visiting story

[vocal flume]

I have a story that i want to only be documentation, however even when i configure it to show in docs mode first it doesn't show when i navigate to the story's parent .

When i click on the story itself it shows the docs tab, but if i click on the story group, it loads the empty canvas tab.

i have the following parameters:

  parameters: {
    previewTabs: {
      canvas: { hidden: true },
    },
    viewMode: 'docs',
  }

[snow dust]

Hi did you find any solution for this?

[vocal venture]

+1

Did you find a solution for this @vocal flume ?

[vocal flume]

@vocal venture @snow dust Not in a way that wasn’t frustrating. After a lot of battling and doing weird things to try and make mdx work how I wanted ultimately my solution was to use Vitepress instead

[trail edge]

You can... try using this, https://www.npmjs.com/package/@component-controls/storybook

or in previewTabs { 'storybook/docs/panel': { index: -1 }, } if you're under Storybook 7.0 in preview.js

[vocal venture]

Thanks

[solid nebula]

We know this behavior was frustrating, and in Storybook 7, we take an entirely different approach that's worth considering for your case: https://storybook.js.org/blog/storybook-7-docs/#:~:text=Autodocs are component-centric

[vocal venture]

🎉

I found a workaround for making the viewMode persist to "docs" when navigating/opening the story group in the sidepanel in Storybook 6.5 (similar to the new behavior shown in Storybook 7)

Here is the decorator – any time the the viewMode changes back to 'story', it will re-select the story and trigger the correct viewMode as set in the story parameters (see below)

import { addons, useEffect } from '@storybook/addons';
import { SELECT_STORY } from '@storybook/core-events';

const withDocsRedirect = (Story, context) => {
    const { id, viewMode } = context;

    useEffect(() => {
        if (viewMode !== 'docs') {
            const channel = addons.getChannel();
            channel.emit(SELECT_STORY, { storyId: id });
        }
    }, [viewMode]);

    return Story();
};

Make sure your story has the following configured:

export const Docs = {
    parameters: {
        viewMode: 'docs',
    },
    decorators: [withDocsRedirect],
};