# Design System

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://resip.gitlab-pages.cegedim-sante.net/pim/web-components/design-system/?path=/docs/introduction-getting-started--docs&globals=customTheme:BCB)

This project is the design system used on Claude Bernard tools

## How to install it via NPM ?

### Install the package

```bash
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.
```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

### 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:

```javascript
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.