Design System for Axeptio 🍪

🔥 Developement

Launch Storybook

 npm run storybook

Launch Guidelines

 npm run dev

Launch the bundle analyzer

 npm run bundle-analyzer

Build the lib

 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

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

🧪 Tests

Install Playwright

npx playwright install --with-deps

Launch Playwright tests

npm run test-ct

Launch a specific test

npm run test "Button Component Tests"

👩🏻‍💻 Work locally with Gusto Design System

1. You need to install yalc globally on your machine:

npm i yalc -g

2. You need to publish design system:

cd ~/axeptio/design-system
yalc publish

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

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

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

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:

yalc publish --push

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

yalc remove @axeptio/design-system

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

yalc installations clean @axeptio/design-system

🖊️ Fonts

generate by gwfh

• source-serif-4
• source-sans-pro

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.