frontend UI structure about community-platform HOT 7 CLOSED

styled-component seems to be an efficient & unified css workflow for react
https://github.com/styled-components/styled-components
https://material-ui.com/guides/interoperability/#styled-components

from community-platform.

It makes sense once/if we decide to build our own component library (likely based on material-ui). Suggest that as you work on the docs page component you try to move 'core' components into a shared library and include styled-components.

I don't think we need to explicitly have a 'new component' template, but components we create should follow a consistent pattern which others can then base new ones on.

As for naming conventions, I think prettify enforces some (like upper case) but agree we need some extra conventions. I suggest:

1. TS Classes should end with an identifier, namely their parent folder type e.g. the home page class falls within 'Pages' and should have class 'HomePage'. Similarly the login component which is a general component falls within 'components' and has class name 'LoginComponent'. This helps keep clear the naming where the login component also has a parent container (to handle global state binding) which is called 'LoginContainer'.

2. Ideally we want to avoid the situation where you will have multiple tabs open with the same name (i.e. Login and Login for both container and component), and as such components and pages can retain just their simple file name (e.g. components/Login.tsx and pages/Home.tsx) but everything else should have .[identifier], e.g. containers/Login.container.tsx or user model models/User.model.tsx

3. CSS classes should follow standard BEM naming - i.e. lower cases, hyphen spaces, double underscore child class and double-dash modifiers. See link for example stickMan element css of .stick-man, .stick-man__head and stick-man__head--big

If you're happy with this we can add it to the contribution guidelines, create a few example components and close

from community-platform.

Templates are currently being produced for general components, pages etc. (#72) It would be good to also populate with some styling info once we decide

from community-platform.

(I say decide, we've decided to go ahead with styled components so now just need to implement)

from community-platform.

Yep on my todo, I will implement it as soon as we release the documentation ✌️

from community-platform.

Now that styled-component is implemented with most our components, I would like to add a few things to this thread :

• For efficiency and clarity, styled-components needs to be the default tool used when building the interface, instead of scss. I'll make a example file in page/_Templates that shows how to use it easily in the project.
• There is still some components using scss : pages/common/Tags, pages/common/UploadedFiles, pages/Events. It's on purpose. They will be refactored later when the final design will be defined.
• When our design system will be defined, all the shared components will live in components/ like it's already the case for our Button and Form components.

from community-platform.

Frontend structure is now defined and explained in the dedicated wiki section

from community-platform.