Components structure

[flacial]

Problem

Our current components structure looks like the following:

• Component test under components/
• Component code under components/
• Component styles under styles/
• Component story under stories/

They're scattered into 3 directories. And within the components/ folder, there are two files, the component code, and the test. Having such a structure makes it cluttered and hard to work with. As our codebase isn't huge yet, it's better to fix this issue now than later.

Solution

Each component will have its folder. This folder will contain the component and its: test, story, and styles

The component entry point will be called index.tsx so it can be easily imported (or it could be used to export to [componentName].tsx, so we don't end up with all the file names being index.tsx). The folder will also contain the CSS, test file, and story.

components/
  CopyButton/
    index.tsx
    CopyButton.tsx
    CopyButton.module.scss
    CopyButton.stories.ts # Currently, it's not possible to include the story
    CopyButton.test.js

index.tsx will contain the following, so we can do import Component from '../components/ComponentFolder' instead of ./components/ComponentFolder/ComponentFolder

export { default } from './CopyButton.tsx'

[evo777]

Folders are good.

[scotthallock]

@flacial Is this something I can help out with? It would be nice to have everything in folders.

Also, I'm not sure I understand the problem with moving the *.stories.tsx files into the same folder as the component. Is it about the stories glob in ./storybook/main.js?

I played around with the glob on the Learn Storybook repo:

Example 1

stories: ["../src/components/*/*.stories.js"] matches the stories in the src/components/[ComponentName]/ folder but not elsewhere:

Example 2

stories: ["../src/**/*.stories.js"] matches stories anywhere in the src/ folder, at any level:

For c0d3 app

If we changed the glob to "../**/*.stories.tsx" - wouldn't that match all [ComponentName].stories.tsx files anywhere in our repo?

This will also allow us to keep the pages and MDX stories wherever we want. I can try this it out later to check.