Improve components structure in the web app

[nevendyulgerov]

📄 Context

Currently, components folder in the web app contains a flat list of components. The only way to add new components is vertically, by creating another file directly inside components folder.

As the application grows, if we continue to use this structure, we'll end up with a large vertical list of components. So, to prevent this, we'd like to have the ability to expand that folder vertically as well as horizontally to allow for better organisation of components via groups.

This means that we'd need to change the structure of components folder and introduce subfolders that would contain individual components. Suggested structure is:

- components
  - base
    - address.tsx
    - cartesiLogo.tsx
  - cards
    - inputCard.tsx
  - forms
    - connectionForm.tsx
  - layout
    - footer.tsx
    - shell.tsx
  - tables
    - inputsTable.tsx
    - inputRow.tsx
    - applicationRow.tsx

✔️ Solution

Implement the above described folder structure for components folder.

🎯 Definition of Done

• components folder contains subfolders (groups) instead of a flat vertical structure.

[nevendyulgerov]

Hey @brunomenezes , @tuler , please let me know if you agree for this to be implemented.

[tuler]

I usually prefer a separation using the semantics of the component instead of the element type. “Layout” is the semantics.

[brunomenezes]

I would use feature-based for better grouping. For example, Connections/ Inputs/. In the proposed structure, the Connection components would be scattered around. I would keep the generic ones in the components/ to avoid nesting too much or create a commons/.

[nevendyulgerov]

I'm ok with using feature-based grouping and having the base components directly inside components/. Let's proceed with this structure.