Design System


This project is the design system used on Claude Bernard tools

How to install it via NPM ?

$3

``bash
npm install @claudebernard/design-system
`

$3

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.
`javascript
import '@claudebernard/design-system';
`

* You can import only the components you need, example:
`javascript
import '@claudebernard/design-system/button';
`

Then you can use components in your project


Development

$3

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.

$3

Run npm run lint to run Eslint.

$3

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

$3

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

$3

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

$3

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.