# ActiveCollab Design System

Visual language written in Storybook/React.

### Installation

Use the package manager [npm](https://www.npmjs.com/) 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](https://system.activecollab.com/?path=/story/components-icons--icon).

```
<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!