CWUI Design System: A Living Components/Pattern Library for Comfort Works.

Platform-Agnostic CSS UI Framework Library/Design System based on Atomic Design with Storybook and SCSS. (design.comfort-works.com)

cwui/
└── dist/
    ├── main.css/
    ├── main.min.css/
    ├── storybook.css/
    └── storybook.min.css/
└── docs/
    ├── .storybook/
    ├── stories/
└── src/
    ├── scss/
    │   ├── cwui/
    │   │   ├── atoms/*
    │   │   │── helpers/*
    │   │   │── tokens/*
    │   │   │── patterns/*
    │   │── storybook.scss
    └───└── main.scss
    
     

Get Started

Installation

Clone this repository to your local machine. Use Docker to ease up development workflow.

1. Docker

1.1 Using docker build

1. Run docker build:

docker build -t cwui ./

2. Run docker

docker run -dp <port number>:<port number> cwui

1.2 Using docker compose

To start container, run docker-compose up.

docker-compose up

Development Workflow

1. Running on the development mode locally

The easiest way to run the development mode is to run docker-compose up, which will run both the CSS watcher as well as development mode for Storybook.

If you like to run it without docker, you would have to follow this instruction:

To run with it on your local machine, you need to follow this steps:

1. Install the node modules

npm install

2. Set PORT to the ENVIRONMENT VARIABLES

3. Run dev script to watch css changes and storybook:

npm run dev

Usage

Creating new version of the package

1. Make any changes to SCSS in the src folder as needed

2. Compile new CSS by running

npm run watch-css

3. Commit all changes including the recompiled CSS in the dist folder to Bitbucket. Not strictly enforced, but please take a look on Conventional Commit (check documentation on Confluence). This will help on automatic semantic versioning.

4. When you are ready to update the version of the module, run npm run release.

5. Merge/push changes to your branch, and create PR to master branch.

6. All the publishing to design.comfort-works.com and to NPM registry will be handled by the pipeline in Bitbucket.

Integrating CWUI Design module to the project.

Please refer to this guide: https://comfortworks.atlassian.net/wiki/spaces/CW/pages/1864269844/Development+Workflow+for+CW+UI+Design+System#Integrating-CW-UI-Design-System-to-other-projects.