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...

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. 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 to bump the package to and release it.