ActiveCollab Design System
Visual language written in Storybook/React.
Installation
Use the package manager npm to install storybook and all dependencies.
npm install
Start Development Environment
npm run start
Build Storybook for Production
npm run build:story
Build Stories for Production
npm run build:dist
Build SVG icons
When including new SVG icons to Storybook run command below and include new generated files/icons in commit.
npm run build:icons
Usage
Icon is same as included svg name.
people.svg is just people.
Check more on Icon Component.
<Icon name="name" />
Run Tests
npm run test
Update Tests
npm run test -- -u
Generate Code Coverage
npm run test:cov
Clean all dist folders (If needed)
npm run clean
Naming conventions
Components:
Upper Camel case, with upper first letter.
Example: DateStepper
Props:
Camel case.
Example: shouldDisplay
Tests:
With test suffix.
Example: DateStepper.test
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.