In #326 we identified the need for some refactorings because we are having duplicate components with different stylings. Besides that, the code style diverged as the development of the Nabla UI happened in parallel to the development of the core portal features.
We should clean this up and unify the components and structure again.
Guidelines
Functional components
Do we want to declare functional components as function MyCompenent(props: Props) or as const MyComponent = (props:Props) => ()? At the moment we have a mixture of both notations.
We should remove the folders models, shared, config, and constants and move the contained files somewhere else. We should add a new folder contexts and move all the useContext components inside.
We need to agree on where to put components. Currently, some components live in src/components and some live in src/pages/xxx. This isn't very clear because it is unclear when and where a component is created.
Two options:
1) We move all the components out of the src/pages/xxx paths and into the components folder. The files in pages should only import components to display them, not define them.
2) We move all the page-specific/non-reusable components into the respective pages directory.
Component file structure
Each component should live in a separate file. (Components that are tightly coupled can live in the same file). Component file names should be in Pascal case. When a component has a related styles.css file or test, it should live in an extra directory as follows:
If neither a styles.css nor test file is relevant for the component, it doesn't need to live in a separate directory and can just be called MyComponent.tsx.
TODO
Use the same number input component throughout the app. Done in #483. To be confirmed whether changes still required
@Sharqiewicz I started fleshing the description of this ticket out a bit more. Do you have thoughts/suggestions on how we should structure the code, what to refactor/align, etc?
Context
In #326 we identified the need for some refactorings because we are having duplicate components with different stylings. Besides that, the code style diverged as the development of the Nabla UI happened in parallel to the development of the core portal features.
We should clean this up and unify the components and structure again.
Guidelines
Functional components
Do we want to declare functional components as
function MyCompenent(props: Props)
or asconst MyComponent = (props:Props) => ()
? At the moment we have a mixture of both notations.Folder structure
The ideal folder structure is roughly as follows:
We should remove the folders
models
,shared
,config
, andconstants
and move the contained files somewhere else. We should add a new foldercontexts
and move all theuseContext
components inside.We need to agree on where to put components. Currently, some components live in
src/components
and some live insrc/pages/xxx
. This isn't very clear because it is unclear when and where a component is created. Two options: 1) We move all the components out of thesrc/pages/xxx
paths and into thecomponents
folder. The files inpages
should only import components to display them, not define them. 2) We move all the page-specific/non-reusable components into the respectivepages
directory.Component file structure
Each component should live in a separate file. (Components that are tightly coupled can live in the same file). Component file names should be in Pascal case. When a component has a related
styles.css
file or test, it should live in an extra directory as follows:If neither a
styles.css
nor test file is relevant for the component, it doesn't need to live in a separate directory and can just be calledMyComponent.tsx
.TODO