Improve folder structure

[aganglada]

Summary 💡

As the project grows, the components folder is getting bigger and bigger, I suggest a different approach to structure it where every component is in its own folder allowing the set of components to grow and follow clearly.
Also adding a pages folder for every view on the router. And leaving App and Router outside.

Examples 🌈

components/
   Preview/
      __tests__
      Preview.js
      index.js
   ...
pages/
   Playground/
      __tests__
      Playground.js
      index.js
   ...
App.js
Router.js

Where Preview.js is the actual component and index just export it to do a clean import from the outside.

Motivation 🔦

Improve the maintainability of the project

cc/ @smeijer

[smeijer]

I do agree that we must reorganize a bit. Maybe more in the scope of #34. I'm not a big fan of the 1 component per folder principle. I believe in clear names for component files, and just have them in the same directory. Unless something becomes so big that it deserves to be a separate folder or even a separate package.

I don't see the benefit of having:

components/
   Markup/
      __tests__
      Markup.js
      index.js
   Preview/
      __tests__
      Preview.js
      index.js
   Query/
      __tests__
      Query.js
      index.js

over:

components/
   Markup.js
   Markup.tests.js
   Preview.js
   Preview.tests.js
   Query.js
   Query.tests.js

In case I need a component file, I just hit ctrl+p and start typing the name. I almost never use the file navigator. I realize that doesn't change. What does change, is the maintenance of all these index.js files. And once you'll open multiple of those, it's hard to distinguish them.

[aganglada]

Make sense, maybe we could take out pages as they are a complete view? And take out App to the root as it's the main entry point? What do you think?

[aganglada]

What I see as a benefit is that if you are working on Preview for instance, you don't need to have other components open and well as having a clear view of what you are working on, and you still get the benefit of ctrl+p lookup.

I do not use myself index.js pattern myself on my other projects because I don't mind doing import Preview from '../components/Preview/Preview', but I know some people have that preference.

[smeijer]

Separating pages sounds good to me. Even though we only have one.

[delca85]

I agree with both of you. I think this will make the project structure more readable.