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.