1829420 - Update main.js in Storybook to search for stories in more locations

Status: NEW

(Toolkit :: UI Widgets, enhancement, P3)

Description

[Tim Giles [:tgiles]]

Currently, Storybook will only display stories if they appear in the following locations:

• browser/components/storybook/
• toolkit/content/widgets/
  based on our glob patterns in main.js file (https://searchfox.org/mozilla-central/rev/26790fecfcda622dab234b28859da721b80f3a35/browser/components/storybook/.storybook/main.js#36-45).

While we have a note describing how to update the stories array if you want to create stories next to your existing code, it would probably be more beneficial if we modified our stories array to search for more potential locations. It also looks like we could simplify our stories array by doing the previous.

As a proof of concept, I went ahead and added the following lines to the beginning of the stories array:

• ${projectRoot}/toolkit/**/*.stories.@(js|jsx|mjs|ts|tsx|md)
• ${projectRoot}/browser/**/*.stories.@(js|jsx|mjs|ts|tsx|md)

but this resulted in a ton of errors about "Field 'browser' doesn't contain a valid alias configuration". I haven't worked in Storybook configs enough to understand this error, but this seems like the big hurdle in getting this change to land.

We should also ensure the stories located outside of toolkit/content/widgets get the "Domain-Specific UI Widgets" designation if the story file happens to be a Markdown file. I'm not sure of a way to get the export default { title: "" } functionality in a Markdown file, might need to be another bug to determine how to get the markdown files to adjust accordingly.