search

DEVxNetwork / devx.network

7 stars 4 forks source link

Implement Design System #14

Open tomatrow opened 3 months ago

tomatrow commented 3 months ago

We want a dedicated design system for our components.

samholmes commented 3 months ago

I opt for styled-components for the design system tooling. I prefer that over class names and tailwind. This way we can make a ui directory with all the primitive UI components.

samholmes commented 1 month ago

@tomatrow What do you think of using styled components (https://styled-components.com/)? I'm largely in favor of the styled component approach when working with react.

I'm not particularly sold on Tailwind, and I think we should remove it.

tomatrow commented 1 month ago

@samholmes I haven't used styled components, and would be interested to try it out. I cede to your preferences regarding tailwind.

samholmes commented 1 month ago

@tomatrow styled components is the way. It is awesome because each style declaration creates a component which can be imported and used in multiple places. It really lends itself nicely to breaking up a component into multiple localized components which can be migrated to higher scopes as they're needed.

tomatrow commented 1 month ago

Acceptance. Have you used it before? If so, I could bumble about with It in a pr, and then bring in your wisdom for the final touch. I'd like the experience of trying a new styling framework.

samholmes commented 1 month ago

I have used it before and I really liked it. I'd be happy to review your work and give you the chance to get the experience with it.

Additionally, here's some inspiration for how you can organize your component structure (as in semantics; html) and presentation (as in styling; css) all in one file, keeping the relevant code co-located in one file and organized such that the main exported component is first scene (close to the top of the file) and then all of it's children (not exported) are below:

https://github.com/EdgeApp/edge-react-gui/blob/4eb81560d2b3cd848d887e581fb3f1816606d9d8/src/components/scenes/GettingStartedScene.tsx#L84

Note: This is in the react native environment and uses a different styling library, but still uses styled components in concept.

tomatrow commented 4 weeks ago

Started work on this in #30