Group the files for each component in the same directory?

[severo]

Currently, the code related to a single component is spread in three different places, eg:

src/components/Component.tsx
src/styles/Component.module.css
test/Component.test.tsx

The proposal is to create a subdirectory in components that contains all the files:

src/components/Component/Component.tsx
src/components/Component/Component.module.css
src/components/Component/Component.test.tsx

---

More details, from #188:

I think we could reorganize the files a bit, like I did in hightable, loosely following https://www.joshwcomeau.com/react/file-structure/:

• move the files from components/viewers to components/ (no semantic hierarchy)
• move every component file to its own subdirectory (App.tsx -> App/App.tsx)
• move the styles (CSS modules) to these subdirectories (styles/Json.module.css => components/Json/Json.module.css)
• (maybe) move the tests to these subdirectories (test/Layout.test.tsx => components/Layout/Layout.test.tsx) - it requires tweaking the build process to ignore these files.

It would help find the files quickly, and it would group the styles and components together

[platypii]

Yea sounds good to me. Navigating around to find "adjacent" style files was always annoying. Let's try it.

My only question is why get rid of the viewers folder hierarchy? Seems like you could still have a semantic hierarchy even with combined component-style folders? My reason for the viewers folder was that we had a lot of components so viewers seemed like a logical grouping. Open to suggestions though, I don't feel that strongly about it.

[severo]

re viewers subdirectory: it's a suggestion seen here: https://www.joshwcomeau.com/react/file-structure/ (and that I also saw in other big codebases): instead of categorizing, put all the components in the same flat namespace. One benefit is that we ensure all the components have different names. And also: we directly know where to look at, it's a single list to parse when looking for some component. If needed, we can use prefix/suffix where needed for the component to be easier to find.