RFC: New folder structure for web-styles

[gfellerph]

There are many approaches when it comes to organizing the file and folder structure of a project. With the introduction of storybook and future testing approaches, new files are being added to the web-styles package.

Currently, we're following a themed folder structure where files are organized by variables, mixins, placeholders, functions and components.

Storybook and cypress will introduce new themes (stories, tests) with sometimes more than one file belongig to one component.

Themed approach:

src
├─ components
| ├─ button.scss
├─ variables
| ├─ _button.scss
...
├─ stories
| ├─ button.stories.js
| ├─ button-overview.stories.mdx
├─ tests
| ├─ button.tests.ts

Files belonging to one component get more and more cluttered. A new approach is being proposed that would move files belonging to one component into a component folder. Files in the component folder can be further grouped for overview.

Component based approach:

src
├─ components
| ├─ button
| | ├─ stories
| | | ├─ button.stories.js
| | | ├─ button-overview.stories.mdx
| | ├─ tests
| | | ├─ button.tests.ts
| | ├─ button.mixins.scss
| | ├─ button.variables.scss
| | ├─ index.scss                  <- main component file
├─ utilities
| ├─ some-general-style-files.scss
├─ themes
| ├─ bootstrap
| | ├─ ...

Benefits:

• When working on a component, less searching for the right file is required
• When a new tool is added, clustering of new files is less heavy than with a themed approach
• When the main component file is named index.scss, it would not be a breaking change since the import path for one component would not change - functions, mixins and variables are exposed in the cwf.scss

Drawbacks:

• Would change all file names and locations, internal imports need to be updated

[gfellerph]

Issue has been created #359