@axeptio/design-system

Design System for Axeptio 🍪

⚙️ Publish package with NPM

Step 1 : Commit your changes

Use GIT to commit your changes. The workspace need to be clean before updating the version.

Step 2 : Build lib

Build the lib with the webpack config

npm run build

Step 3 : change version of the package

npm version patch

Step 4 : Publish the package on npm

npm publish

🔥 Developement

Launch Storybook

 npm run storybook

Launch Guidelines

 npm run dev

Launch the bundle analyzer

 npm run bundle-analyzer

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

Launch Playwright tests

npm run test-ct

Launch a specific test

npm run test "Button Component Tests"

👩🏻‍💻 Work locally with Gusto Design System

• You need to install yalc globally on your machine:

npm i yalc -g

• You need to publish design system:

cd ~/axeptio/design-system
yalc publish

• To add the design system package to your awesome project:

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

• 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

• To finally remove the dependency from yalc in the dependent project:

yalc remove @axeptio/design-system

• 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

You have to create a Pull request targeting main. When you want to publish the package you have to create a new release in github.