Design Sytem

This project is the design system used on Claude Bernard tools

Link of the storybook

How to install it via NPM ?

Install the package

npm install @claudebernard/design-system

Import components

There are two ways to import components:

• You can import all components at once, this means you will import all design system in your project.

import '@claudebernard/design-system';

• You can import only the components you need, example:

import '@claudebernard/design-system/button';

Then you can use components in your project

Development

Development server

Run npm run storybook to run Storybook. Navigate to http://localhost:6006/. The app will automatically reload if you change any of the source files.

Lint project

Run npm run lint to run Eslint.

How to create a new component ?

1. Create a new folder in src/components with the name of your component
2. Create three files: src/components/your-component/your-component.ts, src/components/your-component/your-component.spec.ts and src/components/your-component/your-component.scss in this folder
3. Create a new file src/components/your-component/index.ts in this folder that will export your component
4. Add export of your component in src/index.ts to allow import unique component
5. Create a new entrypoint of your component in vite.config.ts
6. Add export of your component in package.json to allow import unique component

How to create a new story ?

1. Create a new file src/components/your-component/your-component.stories.ts with the stories of your component, and it will be automatically imported in Storybook

How to add new icon ?

1. Add yout svg icon in src/icons/svg folder
2. Complete the src/icons/index.ts file with the new icon information

Versionning, releasing, publishing

Versioning and releasing is managed in CI with semantic-release.

To start a release candidate (pre-releases), work on alpha or beta branch, and a version will be published (e.g. if you're working on beta branch and next version will be 2.0.0, first version will be 2.0.0-beta.1)

To make a release, merge your commits on master branch.