<img src="./docs/pedals@2x.png" width="250" alt="Pedals">

# TestBox Design System

The purpose of the design system is to enable the business to have consistent branding and UX across all facets of the application.

## Using the design system

To use the design system in your repo, simply...

```
yarn add @testboxlab/design-system

npm i @testboxlab/design-system
```

Then, you can import all necessary components like so...

```typescript
import { Button } from "@testboxlab/design-system";

function MyComponent() {
    return <Button />;
}
```

Make sure you have tree-shaking turned on so your bundle does not bloat with unnecessary component imports.

## Contributing to the design system

1. Clone this repository.
2. `cd design-system`
3. `yarn install`
4. `yarn storybook`

**Make sure you export the component in `index.ts`**

The design system will auto-release a new version on merges to the `main` branch.

In addition, _husky_ will enforce the usage of the [Conventional Commit Message](https://www.conventionalcommits.org/en/v1.0.0/). An example
commit message is:

```
feat(button): a new feature for the button
===
fix(button): a fix for the Button
===
docs: some random documentation unrelated to a single component
===
feat(input): new input box

I can also extend the commit message and put more detailed information as long as there is a blank line.
===
feat(input): new input box

BREAKING CHANGE: Something is different about your new input such that any existing implementations will break.
===
feat!(input): same thing as above, something breaks implementations
===
```

Once your PR is merged into `main`, a Github Action will detect the correct [SemVer](https://semver.org/) to bump the package to
and release it.
