Storybook: Ability to exclude some directories/files from stories

[pelotom]

The new main.js format for specifying stories requires specifying an array of globs, e.g.

module.exports = {
  stories: ['../../src/**/*.@(story|stories).tsx'],
};

With this approach it's not clear how I can exclude certain things from being included. When the stories were configured within the browser environment I was able to use require.context with a regex, e.g.

configure(
  require.context('../../src', true, /(?<!\/some\/forbidden\/directory.*)\.(story|stories)\.tsx?$/),
  module,
);

I could walk the directory structure in node and just provide a large array of fully resolved file paths, but it'd be nice to just be able to provide a regex instead of a glob. Or is there a way to do this with globs that I'm missing?

[shilman]

Haven't tried this, but possible solution here:
https://github.com/prettier/prettier/issues/1358#issuecomment-295669193

[pelotom]

I can't seem to make that work, it ends up excluding all files.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[DHedgecock]

Is there anyway to pass options for glob in main.js? From the glob docs:

Previously, this module let you mark a pattern as a "comment" if it started with a # character, or a "negated" pattern if it started with a ! character.

These options were deprecated in version 5, and removed in version 6.

To specify things that should not match, use the ignore option.

[shilman]

cc @yannbf @ndelangen

[yannbf]

I don't think there's a mechanism in place for that, and I tried tweaking a little here but it seems like passing a ignore option to micromatch doesn't alter the resulting regex. Would be nice to have an exclude property like tsconfig has for instance, but unfortunately we don't have that.

@pelotom I'm not sure about your use case, but the use case I see about using exclude would be maybe if I'm developing CheckoutFeature and I only want Storybook to bring those stories because maybe the project has like 500 stories. But in this scenario, rather than excluding, I would make my glob more specific and I would achieve that with the existing implementation of Storybook. Does that help somehow?

[pelotom]

@pelotom I'm not sure about your use case, but the use case I see about using exclude would be maybe if I'm developing CheckoutFeature and I only want Storybook to bring those stories because maybe the project has like 500 stories. But in this scenario, rather than excluding, I would make my glob more specific and I would achieve that with the existing implementation of Storybook. Does that help somehow?

My use case is that I have one particular directory of stories nested deep within my repo which I want to exclude during visual regression testing in CI. It's not practical to positively specify all the things I do want to include while omitting this one particular deeply-nested directory, if that makes sense. My short term workaround is just to delete the directory in the CI script before building the storybook, but it'd be nice to have an exclude option.

[shilman]

@pelotom One workaround might be to specify the disable parameter for the components in that directory. This is available for both Storyshots and Chromatic, and may be available for whatever tool you're using.

export default {
  title: 'path/to/MyComponent',
  component: MyComponent,
  parameters: {
    chromatic: { disable: true },
  }
}
// stories here ...

[pelotom]

Ah, I am using Chromatic, thanks for the tip!

[artaommahe]

Faced same issue. We have a big library with a lot of submodules and their stories. Some submodules have their own storybook configuration due to specific code/environment. We need to exclude these submodules stories from the main storybook and cant find a way to do it with the new pattern format 😕

[shilman]

@artaommahe have you looked at storybook composition? https://medium.com/storybookjs/storybook-composition-af0da9084fba

[artaommahe]

how does it exclude dirs from specific storybook? e.x. this folders structure

.storybook/
layout/
lesson/
user/
widgets/
  chat/
    .storybook/
  switcher/
    .storybook/

we need layout/lesson/user stories, but not widgets one for the main storybook

[shilman]

you could just include layout, lesson, user and then compose the storybooks from chat & switcher if you wanted a unified view including storybooks with different configurations

[artaommahe]

hm, yu're right, just list all folders.. so there is no other way, no excluding in current glob implementation?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ndelangen]

You're not required to specify globs!
You can specify an array of files.

module.exports = {
  stories: async (list) => [...list, ...findFilesUsingWhateverMethodYouLikeAndReturnAnArray()],
};

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!