import { Meta, Source } from '@storybook/addon-docs/blocks';
import '../styles/shared.css';

<Meta title="Guide Du Dev/Migration/Breaking changes"/>



<div className="header">
  <h1>Les breakings changes</h1>
</div>

## Stores

Les librairies `vue-dot` et `synapse-bridge` utilisaient en interne la librairie `vuex`. Cette dépendance a été supprimée dans `synapse`. Plus aucune librairie de gestion d'état n'est donc imposée par le design system.

## Form builder

Le form builder n'est plus maintenu par le design system dans sa version synapse. Vous pouvez trouvez le code source dans sa version vue2 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder) et sa version vue3 [ici](https://github.com/assurance-maladie-digital/design-system/tree/v2/packages/form-builder).

## Les composants Synapse

### CustomIcon

Le composant `CustomIcon` a été retiré du design system.

Vous devez désormais utiliser le composant [VIcon](https://vuetifyjs.com/en/components/icons/) de Vuetify avec les icônes material du package[ @mdi/js](https://www.npmjs.com/package/@mdi/js). Pour des icônes personnalisés, importez les sous forme de composant.

<Source dark code={`
<script setup>
	import { VIcon } from 'vuetify/components'
	import { mdiAccount } from '@mdi/js'
</script>

<template>
	<VIcon> {{ mdiAccount }} </VIcon>
</template>
`} />

### FilterModule

Le composant `FilterModule` n'était pas optimisé du point de vue expérience utilisateur, le nombre de clics pour accéder à un filtre était trop important. Il a été remplacé par le composant [FilterSideBar](/docs/composants-filtres-filterssidebar--docs) et [FilterInline](/docs/composants-filtres-filterinline--docs).

### FilePreview

La props `locales` a été ajoutée afin de gérer la localisation des messages d'erreurs.

[Voir l'API du composant](https://cnam-design-system.netlify.app/?path=/docs/composants-donn%C3%A9es-filepreview--docs)

### NirField

 - Le variant utilisé par défaut est maintenant 'outlined'.
 - La props `nir-length` a été renomée en `displayKey`.
 - La props `tooltip` a été supprimée au profit des props `nirTooltip` et `keyTooltip`, ainsi que `nirTooltipPosition` et `keyTooltipPosition`.
 - Ajout de nouvelles props pour la gestion des erreurs: `disableErrorHandling`, `customNumberRules` et `customKeyRules`

[Voir l'API du composant](https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-nirfield--docs#api)

### DatePicker

Des changements sont encore susceptibles d'avoir lieu sur ce composant.

 - Le variant utilisé par défaut est maintenant 'outlined'.
 - Les props `no-prepend-icon` et `append-icon` ont été remplacés par les props `displayIcon` et `displayAppendIcon`.
 - La props `mask` a été retirée.
 - Les slots `prepend` et `append` ont été retirées.

[Voir l'API du composant](https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-nirfield--docs#api)