(Documentation) glob pattern support for stories config option

[matthias-ccri]

Hi folks! Thanks for the awesome product.

TLDR: This issue is a request to document the fact that storybook uses glob for the stories config.

It seems like the stories option in .storybook/main.js is being parsed by glob, but I don't think this is documented.

In the React Guide, it hints at some pattern matching support but doesn't exactly say what's supported:

Under "Step 3: Create the main file", it uses a pattern:

module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
};

P.S. My use case is that I wanted to match all of these file extensions: js, jsx, ts, tsx. I was able to do it with this pattern: ../src/**/*.stories.{js,ts,jsx,tsx}

[ndelangen]

It seems this page is the right place to place this info:
https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/overview/index.md

I think the page is missing on current docs and also on next docs
https://storybook.js.org/docs/basics/introduction/
https://deploy-preview-93--storybook-frontpage.netlify.com/docs/basics/introduction/

We should fix that. @matthias-ccri would you be able to assist?

[matthias-ccri]

Sure thing — here's a PR: #10196

[ndelangen]

Thank you!

[Domiii]

This information from this issue is outdated, and at the same time, one of the top google results. If you (like me) are confused about Storybook's glob resolution algorithm:

1. The official documentation on this is now here
2. As explained on that page, the glob syntax is that of micromatch -> picomatch (and not that of glob).
3. Here is the storybook code that parses and resolves stories: https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/utils/to-require-context.ts#5

Hope this helps! (it took me a bit of digging to find all of that out)

Update [12/2021]

The story match glob algorithm keeps evolving. A recent change (I'm on 6.4.9) introduced a new bug, where things that worked before stopped working. If you come across such problems, check out my related issue.

To debug it, I opened ./node_modules/storybook/core-common/dist/cjs/utils/to-require-context.js and printed out the matches it found, using below code. Then I fiddled with stories until something good came up:

  console.trace(`story matcher: ${JSON.stringify(result, null, 2)}`);