[](https://resip.gitlab-pages.cegedim-sante.net/pim/web-components/design-system/?path=/docs/introduction-getting-started--docs&globals=customTheme:BCB)
npm install @claudebernard/design-system
This project is the design system used on Claude Bernard tools
``bash`
npm install @claudebernard/design-system
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
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.
Run npm run lint to run Eslint.
1. Create a new folder in src/components with the name of your componentsrc/components/your-component/your-component.ts
2. Create three files: , src/components/your-component/your-component.spec.ts and src/components/your-component/your-component.scss in this foldersrc/components/your-component/index.ts
3. Create a new file in this folder that will export your componentsrc/index.ts
4. Add export of your component in to allow import unique componentvite.config.ts
5. Create a new entrypoint of your component in package.json
6. Add export of your component in to allow import unique component
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
1. Add your svg icon in src/icons/svg foldersrc/icons/index.ts
2. Complete the file with the new icon information
1. Add your new theme in src/themes folder with the name of your theme (e.g. src/themes/${your-theme-name}.scss)package.json
2. Add your theme in to allow import unique theme (e.g. "./style/${your-theme-name}": "./dist/style/${your-theme-name}.css")vite.config.ts
3. Add your theme in to allow vite to build your themepreview.js
4. Add your theme in storybook to allow storybook to use your theme
Versioning and releasing is managed in CI with semantic-release.
To make a release, merge your commits on master` branch.