storybookjs / storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

Home Page:https://storybook.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature Request]: Storybook 7 - opt-out of autodocs for a single story when `autodocs: true`

tannera opened this issue · comments

Is your feature request related to a problem? Please describe

When using autodocs: true in main.js a doc is generated for every story. But there may be edge-cases like for a Welcome page where we do not want a doc page generated.

Describe the solution you'd like

It would be nice to be able to opt-out of the autodocs on a story level with:

export default {
  title: 'Welcome to Storybook',
  component: () => <>Welcome</>,
  parameters: {
    docs: {
      autodocs: false, // overrides the default just for this story
    },
  },
} as Meta;

Describe alternatives you've considered

Using autodocs: 'tags' but this would be a lot of boilerplate since all our stories would require the autodocs tag, and only a single Welcome story would be opted out.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

No response

We're in the same situation where this feature would be very useful

I put up a PR adding the ability to set tags: ['no-autodocs'] to support this feature: #22116

I also think this is a very useful feature

+1 i need this as well

Bumping this as it would prove useful to us as well. I'd expect autodocs: false per-Story would disable this otherwise great feature for a single story! 😉

+1
This will definitely help.
While migrating from v6 to v7, I had to enable autodocs globally since it was not good practice to write tags: ['autodocs'] in huge number of files and skip a few just for those who have a documentation file in .mdx.

+1 would be very useful

+1 This would be really nice to have.

I also have multiple cascading stories using the interaction tests, and each stories reuse the test from the previous story.
So at the end when you check the story individually it will display the final state, however on the auto generated doc, you will only see the first render before the interaction tests are applied. So you will have multiple stories but all of them on the same stage.

Screenshot 2023-06-21 at 8 14 51 PM

So being able to hide/disable a specific story would be very nice to have.

+1 we really want this to be an option... We have a Snackbar component. We have different types of Snackbars, but the maximum the stack can display is 3 so we split them in different stories to showcase them all. However, each of these stories generate docs because autodocs is set to true... We want to just refer to our general Snackbar.stories.mdx docs file.

+1
this would be great for us as well.

commented

+1 this would be super useful for us

Probably you guys are aware, but I figured that if you export a story that matches the default name for your autogenerated docs, then Storybook will merge the two leaving just the "docs" view. It's the opposite of what you want @tannera, but could still prove handy.

import { Meta } from "@storybook/react"
import * as React from "react"

import { ColorPalette } from "./ColorPalette"

const meta: Meta = {
  title: "Foundation/Colors",
  component: ColorPalette,
}

export default meta

export const Documentation = () => <ColorPalette /> // <= This line does what I'm describing

The name for the autogenerated docs is "Documentation" in our project.

Unfortunately, got an error for storybook/vue3

Error: You have a story for Design system/Colors with the same name as your component docs page (Docs), so the docs page is being dropped. Use <Meta of={} name="Other Name"> to distinguish them.