Closed thomasvaeth closed 1 week 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"]} />
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 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 usetags
onStory
.
I see. Could you also help me determine how much work there could be to fix it?
I need the following information:
"!dev"
tag will work only for v8
and above.v8
... then does it work at runtime, despite the typing issue?[ '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.
So I dug a little more into this today and noticed some things.
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
and got nothing...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
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
I am able to do:
But this does not prevent it from still be selectable in the sidebar.