Design System

This project is the design system used on Claude Bernard tools

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

Import CSS utilities

The design system provides a set of CSS utility classes (similar to Bootstrap) for spacing, display, flexbox, text, and gap. Import the standalone stylesheet:

import '@claudebernard/design-system/style/utilities.css';

The utilities are also automatically available inside design system components.

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 your svg icon in src/icons/svg folder
2. Complete the src/icons/index.ts file with the new icon information

How to add new theme ?

1. Add your new theme in src/themes folder with the name of your theme (e.g. src/themes/${your-theme-name}.scss)
2. Add your theme in package.json to allow import unique theme (e.g. "./style/${your-theme-name}": "./dist/style/${your-theme-name}.css")
3. Add your theme in vite.config.ts to allow vite to build your theme
4. Add your theme in storybook preview.js to allow storybook to use your theme

Versioning, releasing, publishing

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

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