/css-architectture-workshop-js

Primary LanguageJavaScript

CSS Architecture workshop repository

This repository holds the implementation of some React components (Notification, Button and CollapsiblePanel) in an imaginary Design System named Nebula.

These components are implemented with different approaches explained in the workshop:

  1. Vanilla: Own React components styled with CSS modules. We just use the classnames library to help applying conditional styles.
  2. CSS-in-JS: Own React components styles with macaron library. Styles live in the Javasript context.
  3. Ay11 components: Third party components (from RaduxUI) styles with an Atomic CSS library (tailwindcss) using the tailwind-variants library for better styles management.

Running locally

This repo was developed with this versions:

  • NodeJS: 16.13.0
  • NPM: 9.6.7

After cloning this repository you'll need to install its dependencies:

# npm install

Bear in mind we're using Storybook in this repo to develop and check the components locally so, after installing the dependencies, you need to start it with this command:

# npm run storybook

A new browser tab should automatically be opened with this URL: http://localhost:6006

Use the sidebar navigation on the left to access the different versions of the components (they all look and behave the same).

Source code structure

Inside the /src/components directory you will find three sub-directories with the implementation of the three mentioned components with the different approaches: