[Bug]: Story-level `tags` are ignored

thomasvaeth commented 3 weeks ago

I would like to exclude stories from appearing in the sidebar. I only want to have stories for interaction testing purposes, but not for users to use.

https://storybook.js.org/docs/api/csf#non-story-exports

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
  includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
};

I am able to do:

<Story
  ...
  parameters={{
    docs: {
      // Disables the story from showing on the Docs page, but not in the Sidebar
      disable: true,
    },
  }}
/>

But this does not prevent it from still be selectable in the sidebar.

xeho91 commented 3 weeks ago

I'm not sure if this is related to this addon or if there is a bug.

AFAIK includeStories and excludeStories works only on Docs page. On the sidebar they will still appear.

I think what you might be looking for is stories built-in-tags. To hide certain stories from appearing on the sidebar, and with this addon the below example should do the job:

<Story name="MockedData" tags={["!dev"]} />

thomasvaeth commented 3 weeks ago

I am using v4.1.5 and getting Object literal may only specify known properties, and '"tags"' does not exist in type 'StoryProps'. when trying to use tags on Story.

xeho91 commented 3 weeks ago

I am using v4.1.5 and getting Object literal may only specify known properties, and '"tags"' does not exist in type 'StoryProps'. when trying to use tags on Story.

I see. Could you also help me determine how much work there could be to fix it?

I need the following information:

Which version of Storybook are you using? AFAIK, "!dev" tag will work only for v8 and above.
If you're on Storybook v8... then does it work at runtime, despite the typing issue?

thomasvaeth commented 3 weeks ago

Storybook v8.2.8
I am logging all of the stories and I still see all the tags as [ 'dev', 'test', 'autodocs' ] when it should be !dev. My Preview file is set up like:

const preview: Preview = {
  tags: ['autodocs'],
  ...
};

So that's how I'm getting autodocs to be true for every Story.

thomasvaeth commented 3 weeks ago

So I dug a little more into this today and noticed some things.

https://github.com/storybookjs/addon-svelte-csf/blob/main/src/index.d.ts StoryProps is using Addon_BaseAnnotations from @storybook/types instead of BaseAnnotations from Storybook. Addon_BaseAnnotations does not have tags, so that's why the type error was happening. Adding tags as a key in StoryProps solved that error.
Tags still isn't working, so I think something has to change in the actual Story. https://github.com/storybookjs/addon-svelte-csf/blob/main/src/components/Story.svelte But I'm not sure what to change here. I tried logging tags and got nothing...

JReinhold commented 2 weeks ago

The includeStories and excludeStories is a separate feature, meant to allow users to export other properties than stories, ie. Storybook will not treat those exports as stories at all and ignore them. This means they won't be in the index at all, they won't be in the sidebar, nor in docs. This API is irrelevant when using this addon, because stories aren't exported at all but defined with <Story />

@xeho91 is correct that the feature you want to use is the tags feature. Based on this:

I only want to have stories for interaction testing purposes, but not for users to use

It seems like what you want is your stories to end up having ['!dev', '!autodocs', 'test'], which will hide them from the sidebar and docs but include them in tests (note that 'test' is enabled by default, so that can probably be omitted). I'm assuming you're then testing the stories by other means, with the test-runner or Chromatic.

Unfortunately story-level tags haven't been implemented in the stable version of this addon - only meta-level tags has. So you could set the tags on the meta level if you'd want the same behavior for all stories in the file, but I can understand if that doesn't completely work for you.

This should have worked, but won't:

<script context="module">
  import Button from './Button.svelte';

  export const meta = {
    title: 'MetaExport/MetaExport',
    component: Button,
    tags: ['autodocs', '!dev'], // 👈 this works today
  };
</script>

<script>
  import { Story, Template } from '@storybook/addon-svelte-csf';
</script>

<Template let:args>
  <Button {...args}>
    Click me
  </Button>
</Template>

<Story name="Default" tags={['!autodocs', '!dev', 'test']} />
<!--                  👆 this should work, but doesn't, they are ignored -->

In the end this is more a bug report of missing story-level tags.

To fix this:

Extracting tags should happen here, but it doesn't: https://github.com/storybookjs/addon-svelte-csf/blob/765f2a007966fa5c652d38b8b20ed2548ec42385/src/parser/extract-stories.ts#L180-L229 The getMetaTags function above is only used when parsing meta exports and <Meta /> components, it could probably be reused with some light modifications to work with <Story /> too.
The indexer would need to actually set those tags correctly in the index inputs: https://github.com/storybookjs/addon-svelte-csf/blob/765f2a007966fa5c652d38b8b20ed2548ec42385/src/preset/indexer.ts#L65
Update the StoryProps type similar to MetaProps
Add a story to stories/ that tests the behavior

shilman commented 1 week ago

:rocket: Issue was released in v4.1.7 :rocket:

storybookjs / addon-svelte-csf

[Bug]: Story-level `tags` are ignored #203