@activecollab/components

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.

ByeBye!