Is there a way to hide stories from local dev, but show them when hosted & in Chromatic?

[pulsar ore]

The issue: Let's say I have a table component that has 5 different sizes and 5 different intents - when working locally, I don't really care about those, I'd like my development storybook to be as minimalistic as possible so I only care about the defaults, if I need I can change the size / intent using controls. When I publish (chromatic or node env is prod) I would like to see all sizes / intents. Is there any way I could do this?

Related to this - it would be super useful to be able to define these different stories in one story:

Instead of

export const Info = { args: { intent: 'info' }, play: () => { } };
export const Warning = { args: { intent: 'warning' }, play: () => { } };
export const Danger = { args: { intent: 'danger' }, play: () => { } };
export const Small = { args: { size: 'small' }, play: () => { } };

something like (Intents & Sizes would be headers and the respective stories would show underneath)

export const Intents = { args: [{ intent: 'info' }, { intent: 'danger' }, { intent: 'warning' }], play: () => { // this tests runs on all } };
export const Sizes = { args: [{ size: 'small' }, { intent: 'normal' }, { intent: 'big' }], play: () => { // this tests runs on all } };

Maybe there is already something similar but I haven't found it 🙂

Thanks!

PS: the screenshot is just a changed element in the dev tools to illustrate what I mean 🙂

[glacial bough]

I want to say yes but I think that it's the other way around 🤔

[pulsar ore]

You mean I can set disableSnapshots: true to not have them appear in Chromatic, yeah… It would really be awesome to have it vice versa too

[glacial bough]

Maybe you can do it with env variables and story indexers? 🤔

Ideally we could do it with tags

https://storybook.js.org/docs/react/configure/sidebar-and-urls#story-indexers

[glacial bough]

Okay, I dug around the source code a bunch but we don't currently have an API to do it easily... but we should and I know a few other people that are looking to do something like that

I'm away next week but I want to bug the core team about that

I think that you could add an excludeStories pattern to your component files based on an env var

import { MyComp } from './MyComp';

const meta = {
  title: 'Components/SomeComp',
  component: MyComp,
}

if (process.env.MODE === 'dev') {
  meta.excludeStories = ['SomeStory', 'OtherStory'];
}

export default meta;

IDK if Storybook would be happy with that but hey... worth a shot

Okay... that's enough of me! See you next week 👋

[pulsar ore]

@glacial bough Hi Shaun, thanks and enjoy your time off! 🙂

[glacial bough]

No problem! Thank you, I will 🙂 already off to a good cozy start