# Design System for Axeptio 🍪

![workflow](https://github.com/axeptio/design-system/actions/workflows/release.yml/badge.svg)
[![NPM](https://nodei.co/npm/@axeptio/design-system.png?mini=true)](https://nodei.co/npm/@axeptio/design-system/)

## 🔥 Developement

### Launch Storybook

```sh
 npm run storybook
```

### Launch Guidelines

```sh
 npm run dev
```

### Launch the bundle analyzer

```sh
 npm run bundle-analyzer
```

### Build the lib

```sh
 npm run build
```

### Declare DTS file and map file for a new component

DTS file and map file help developer to know props that are available

```sh
npx -p typescript tsc [your component file path] --declaration --skipLibCheck --allowJs --emitDeclarationOnly --declarationMap --jsx react
```

## 🧪 Tests

### Install Playwright

```sh
npx playwright install --with-deps
```

### Launch Playwright tests

```sh
npm run test-ct
```

### Launch a specific test

```sh
npm run test "Button Component Tests"
```

## 👩🏻‍💻 Work locally with Gusto Design System

1. You need to install yalc globally on your machine:
```sh
npm i yalc -g
```

2. You need to publish design system:

```sh
cd ~/axeptio/design-system
yalc publish
```

3. To add the design system package to your awesome project:

```sh
cd my-awesome-project
yalc add @axeptio/design-system
```

4. To update the design system, you can do it with an update:

```sh
yalc update @axeptio/design-system
```

But if you have the same dependency on several dependent packages, you can push the changes to all of them in one command:

```sh
yalc publish --push
```

5. To finally remove the dependency from yalc in the dependent project:

```sh
yalc remove @axeptio/design-system
```

6. You can unpublish the library published on the second step with:

```sh
yalc installations clean @axeptio/design-system
```

## 🖊️ Fonts

generate by [gwfh](https://gwfh.mranftl.com/fonts/)

- [source-serif-4](https://gwfh.mranftl.com/fonts/source-serif-4?subsets=latin-ext)
- [source-sans-pro](https://gwfh.mranftl.com/fonts/source-sans-pro?subsets=latin-ext)

## Release & contributions

### Create a pull request

You have to create a Pull request targeting main.

### Create a release

When you want to publish the package you have to create a new release in github.

### Update Changelog.md

When you introduce a new components/workflows/tests/release you have to update the changelog.