@cnamts/synapse 1.0.16 → 1.0.17

package/src/stories/GuideDuDev/ClassesUtilitaires/FormattingUtilities.mdx

@@ -15,7 +15,7 @@ Cette fonction convertit une taille en octets en une chaîne de caractères lisi
 
 ### Importation
 
-<Source dark code={`import { calcHumanFileSize } from '@cnamts/synpase'
+<Source dark code={`import { calcHumanFileSize } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation
@@ -43,7 +43,7 @@ calcHumanFileSize(1099511627776) // '1 To'
 
 <script>
 import { ref } from 'vue'
-import { calcHumanFileSize } from '@cnamts/synpase'
+import { calcHumanFileSize } from '@cnamts/synapse'
 
 export default {
   setup() {
@@ -74,7 +74,7 @@ Cette fonction convertit une valeur en unité CSS (px, em, rem, etc.).
 
 ### Importation
 
-<Source dark code={`import { convertToUnit } from '@cnamts/synpase'
+<Source dark code={`import { convertToUnit } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation
@@ -103,7 +103,7 @@ convertToUnit(undefined) // undefined
 
 <script>
 import { ref, computed } from 'vue'
-import { convertToUnit } from '@cnamts/synpase'
+import { convertToUnit } from '@cnamts/synapse'
 
 export default {
   props: {
@@ -129,7 +129,7 @@ Cette fonction formate une date selon un format spécifique, en utilisant la bib
 
 ### Importation
 
-<Source dark code={`import { formatDate } from '@cnamts/synpase'
+<Source dark code={`import { formatDate } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation
@@ -159,7 +159,7 @@ formatDate(undefined) // ''
 
 <script>
 import { computed } from 'vue'
-import { formatDate } from '@cnamts/synpase'
+import { formatDate } from '@cnamts/synapse'
 
 export default {
   props: {
@@ -196,7 +196,7 @@ Cette fonction parse une chaîne de caractères en objet Date, en prenant en cha
 
 ### Importation
 
-<Source dark code={`import { parseDate } from '@cnamts/synpase'
+<Source dark code={`import { parseDate } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation
@@ -232,7 +232,7 @@ parseDate('date invalide') // null
 <script>
 import { ref, computed } from 'vue'
 import { parseDate, isDateValidUtil } from '
-import '../../styles/shared.css';@cnamts/synpase'
+import '../../styles/shared.css';@cnamts/synapse'
 
 export default {
   setup() {
@@ -288,7 +288,7 @@ Cette fonction formate un numéro de sécurité sociale (NIR) pour le rendre plu
 
 ### Importation
 
-<Source dark code={`import { formatNir } from '@cnamts/synpase'
+<Source dark code={`import { formatNir } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation

package/src/stories/GuideDuDev/ClassesUtilitaires/StorageUtilities.mdx

@@ -18,7 +18,7 @@ import '../../styles/shared.css';
 
 ### Importation
 
-<Source dark code={`import { LocalStorageUtility } from '@cnamts/synpase'
+<Source dark code={`import { LocalStorageUtility } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation
@@ -107,7 +107,7 @@ storage.clear()
 
 ### Exemple complet
 
-<Source dark code={`import { LocalStorageUtility } from '@cnamts/synpase'
+<Source dark code={`import { LocalStorageUtility } from '@cnamts/synapse'
 
 // Création d'une instance pour notre application
 const appStorage = new LocalStorageUtility('my-app')

package/src/stories/GuideDuDev/ClassesUtilitaires/ValidationRules.mdx

@@ -24,7 +24,7 @@ import '../../styles/shared.css';
   isNotBeforeToday,
   isRequired,
   isValidEmail
-} from '@cnamts/synpase'
+} from '@cnamts/synapse'
 `}/>
 
 ## Règles disponibles
@@ -246,7 +246,7 @@ import {
   isValidEmail,
   isMinLength,
   doMatchPattern
-} from '@cnamts/synpase'
+} from '@cnamts/synapse'
 
 export default {
   setup() {
@@ -339,7 +339,7 @@ import {
   isNotBeforeToday,
   isNotAfterDate,
   isHolidayDay
-} from '@cnamts/synpase'
+} from '@cnamts/synapse'
 
 export default {
   setup() {

package/src/stories/GuideDuDev/ClassesUtilitaires/ValidationUtilities.mdx

@@ -15,7 +15,7 @@ Cette fonction facilite la validation des props dans les composants Vue.
 
 ### Importation
 
-<Source dark code={`import { propValidator } from '@cnamts/synpase'
+<Source dark code={`import { propValidator } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation
@@ -46,7 +46,7 @@ Cette fonction facilite la validation des props dans les composants Vue.
 </template>
 
 <script>
-import { propValidator } from '@cnamts/synpase'
+import { propValidator } from '@cnamts/synapse'
 
 export default {
   name: 'CustomButton',
@@ -72,7 +72,7 @@ Cette fonction génère un message d'erreur formaté pour les règles de validat
 
 ### Importation
 
-<Source dark code={`import { ruleMessage } from '@cnamts/synpase'
+<Source dark code={`import { ruleMessage } from '@cnamts/synapse'
 `}/>
 
 ### Utilisation
@@ -104,7 +104,7 @@ ruleMessage('Ce champ est requis', 'Email') // 'Email : Ce champ est requis'
 
 <script>
 import { ref } from 'vue'
-import { ruleMessage } from '@cnamts/synpase'
+import { ruleMessage } from '@cnamts/synapse'
 
 export default {
   setup() {
@@ -140,7 +140,7 @@ Vérifie si une date est postérieure à une autre date.
 
 #### Importation
 
-<Source dark code={`import { isDateAfter } from '@cnamts/synpase'
+<Source dark code={`import { isDateAfter } from '@cnamts/synapse'
 `}/>
 
 #### Utilisation
@@ -160,7 +160,7 @@ Vérifie si une date est antérieure à une autre date.
 
 #### Importation
 
-<Source dark code={`import { isDateBefore } from '@cnamts/synpase'
+<Source dark code={`import { isDateBefore } from '@cnamts/synapse'
 `}/>
 
 #### Utilisation
@@ -179,7 +179,7 @@ Vérifie si une date est comprise dans une plage de dates.
 
 #### Importation
 
-<Source dark code={`import { isDateInRange } from '@cnamts/synpase'
+<Source dark code={`import { isDateInRange } from '@cnamts/synapse'
 `}/>
 
 #### Utilisation
@@ -202,7 +202,7 @@ Vérifie si une chaîne de date est valide.
 
 #### Importation
 
-<Source dark code={`import { isDateValidUtil } from '@cnamts/synpase'
+<Source dark code={`import { isDateValidUtil } from '@cnamts/synapse'
 `}/>
 
 #### Utilisation
@@ -222,7 +222,7 @@ Vérifie si une date correspond à un jour de week-end (samedi ou dimanche).
 
 #### Importation
 
-<Source dark code={`import { isWeekend } from '@cnamts/synpase'
+<Source dark code={`import { isWeekend } from '@cnamts/synapse'
 `}/>
 
 #### Utilisation
@@ -244,7 +244,7 @@ Vérifie si une chaîne est un email valide.
 
 #### Importation
 
-<Source dark code={`import { isEmailValid } from '@cnamts/synpase'
+<Source dark code={`import { isEmailValid } from '@cnamts/synapse'
 `}/>
 
 #### Utilisation
@@ -303,7 +303,7 @@ import {
   isDateAfter,
   isWeekend,
   ruleMessage
-} from '@cnamts/synpase'
+} from '@cnamts/synapse'
 
 export default {
   setup() {

package/src/stories/GuideDuDev/ClassesUtilitaires/index.mdx

@@ -24,7 +24,7 @@ import '../../styles/shared.css';
 
 Classe utilitaire pour manipuler le localStorage avec gestion des préfixes et de la sérialisation.
 
-<Source dark code={`import { LocalStorageUtility } from '@cnamts/synpase'
+<Source dark code={`import { LocalStorageUtility } from '@cnamts/synapse'
 
 // Création d'une instance avec un préfixe
 const storage = new LocalStorageUtility('my-app')
@@ -53,7 +53,7 @@ storage.clear()
 
 Convertit une taille en octets en une chaîne de caractères lisible par un humain.
 
-<Source dark code={`import { calcHumanFileSize } from '@cnamts/synpase'
+<Source dark code={`import { calcHumanFileSize } from '@cnamts/synapse'
 
 console.log(calcHumanFileSize(1024)) // '1 Ko'
 console.log(calcHumanFileSize(1048576)) // '1 Mo'
@@ -64,7 +64,7 @@ console.log(calcHumanFileSize(1073741824)) // '1 Go'
 
 Convertit une valeur en unité CSS (px, em, rem, etc.).
 
-<Source dark code={`import { convertToUnit } from '@cnamts/synpase'
+<Source dark code={`import { convertToUnit } from '@cnamts/synapse'
 
 console.log(convertToUnit(16)) // '16px'
 console.log(convertToUnit('16')) // '16px'
@@ -77,7 +77,7 @@ console.log(convertToUnit(null)) // undefined
 
 Formate une date selon un format spécifique.
 
-<Source dark code={`import { formatDate } from '@cnamts/synpase'
+<Source dark code={`import { formatDate } from '@cnamts/synapse'
 
 const date = new Date('2023-01-15')
 
@@ -90,7 +90,7 @@ console.log(formatDate('2023-01-15')) // '15/01/2023'
 
 Parse une chaîne de caractères en objet Date.
 
-<Source dark code={`import { parseDate } from '@cnamts/synpase'
+<Source dark code={`import { parseDate } from '@cnamts/synapse'
 
 console.log(parseDate('15/01/2023').toISOString()) // '2023-01-15T00:00:00.000Z'
 console.log(parseDate('2023-01-15').toISOString()) // '2023-01-15T00:00:00.000Z'
@@ -100,7 +100,7 @@ console.log(parseDate('2023-01-15').toISOString()) // '2023-01-15T00:00:00.000Z'
 
 Formate un numéro de sécurité sociale (NIR) pour le rendre plus lisible en ajoutant des espaces à des positions fixes.
 
-<Source dark code={`import { formatNir } from '@cnamts/synpase'
+<Source dark code={`import { formatNir } from '@cnamts/synapse'
 
 console.log(formatNir('1234567890123'))   // '1 23 45 67 890 123'
 console.log(formatNir('123456789012345')) // '1 23 45 67 890 123 45'
@@ -112,7 +112,7 @@ console.log(formatNir('123456789012345')) // '1 23 45 67 890 123 45'
 
 Valide les props d'un composant Vue.
 
-<Source dark code={`import { propValidator } from '@cnamts/synpase'
+<Source dark code={`import { propValidator } from '@cnamts/synapse'
 
 export default {
   props: {
@@ -128,7 +128,7 @@ export default {
 
 Génère un message d'erreur pour les règles de validation.
 
-<Source dark code={`import { ruleMessage } from '@cnamts/synpase'
+<Source dark code={`import { ruleMessage } from '@cnamts/synapse'
 
 const message = ruleMessage('Ce champ est requis')
 console.log(message) // 'Ce champ est requis'
@@ -146,7 +146,7 @@ console.log(fieldMessage) // 'Email : Ce champ est requis'
   isDateInRange,
   isDateValidUtil,
   isWeekend
-} from '@cnamts/synpase'
+} from '@cnamts/synapse'
 
 // Vérifier si une date est après une autre
 console.log(isDateAfter('15/02/2023', '10/02/2023')) // true
@@ -169,7 +169,7 @@ console.log(isWeekend(new Date('2023-02-20'))) // false (lundi)
 
 ### Validation d'email
 
-<Source dark code={`import { isEmailValid } from '@cnamts/synpase'
+<Source dark code={`import { isEmailValid } from '@cnamts/synapse'
 
 console.log(isEmailValid('user@example.com')) // true
 console.log(isEmailValid('invalid-email')) // false
@@ -181,7 +181,7 @@ console.log(isEmailValid('invalid-email')) // false
 
 Copie un texte dans le presse-papier.
 
-<Source dark code={`import { copyToClipboard } from '@cnamts/synpase'
+<Source dark code={`import { copyToClipboard } from '@cnamts/synapse'
 
 // Copier un texte dans le presse-papier
 copyToClipboard('Texte à copier')
@@ -193,7 +193,7 @@ copyToClipboard('Texte à copier')
 
 Télécharge un fichier à partir d'une URL ou d'un Blob.
 
-<Source dark code={`import { downloadFile } from '@cnamts/synpase'
+<Source dark code={`import { downloadFile } from '@cnamts/synapse'
 
 // Télécharger un fichier à partir d'une URL
 downloadFile('https://example.com/document.pdf', 'mon-document.pdf')
@@ -207,7 +207,7 @@ downloadFile(blob, 'mon-fichier.txt')
 
 Limite le nombre d'appels à une fonction d'affichage pour améliorer les performances.
 
-<Source dark code={`import { throttleDisplayFn } from '@cnamts/synpase'
+<Source dark code={`import { throttleDisplayFn } from '@cnamts/synapse'
 
 // Fonction originale qui pourrait être appelée trop fréquemment
 const updateUI = () => {
@@ -227,7 +227,7 @@ window.addEventListener('scroll', throttledUpdateUI)
 
 Crée une copie profonde d'un objet.
 
-<Source dark code={`import { deepCopy } from '@cnamts/synpase'
+<Source dark code={`import { deepCopy } from '@cnamts/synapse'
 
 const originalObject = {
   user: {
@@ -263,7 +263,7 @@ Le Design System fournit également un ensemble de règles de validation prêtes
   isNotBeforeToday,
   isRequired,
   isValidEmail
-} from '@cnamts/synpase'
+} from '@cnamts/synapse'
 
 export default {
   setup() {

package/src/stories/GuideDuDev/MigrationDepuisBridge.mdx

@@ -15,7 +15,7 @@ import '../styles/shared.css';
 - Transférez les pages de votre projet du Starter Kit Bridge dans le dossier pages du projet Starter Kit Synapse, les composants peuvent être placés dans le dossier components.
 
 - Identifier les dépendances à conserver dans la nouvelle version.
-Le package `@cnamts/synpase-bridge` a été remplacé par `@cnamts/synapse`.
+Le package `@cnamts/synapse-bridge` a été remplacé par `@cnamts/synapse`.
 
 - Dans le fichier nuxt.config.ts, ajouter le lien vers votre fichier de style global.
 

package/src/stories/GuideDuDev/moduleDeNotification.mdx

@@ -14,7 +14,7 @@ import '../styles/shared.css';
 
 <Source dark code={`
 import { useNotificationService } from '
-import '../styles/shared.css';@cnamts/synpase'
+import '../styles/shared.css';@cnamts/synapse'
 
 const { notificationQueue, addNotification, removeNotification, clearQueue } = useNotificationService()
 `} />

package/src/stories/accessibility/AccessibilityGuideLayout.mdx

@@ -0,0 +1,87 @@
+import { Meta } from '@storybook/blocks';
+import '../styles/shared.css';
+import '../styles/accessibility-guide.css';
+
+<Meta isTemplate />
+
+export const AccessibilityGuideLayout = ({ componentName, iconSrc, apgHref, apgLabel, children }) => (
+  <div className="accessibility-guide">
+    <div className="header">
+      <h1>Guide d'Accessibilité du Composant {componentName}</h1>
+    </div>
+
+    <div className="intro-section">
+      {iconSrc && (
+        <img
+          src={iconSrc}
+          alt="Icône d'accessibilité"
+          className="accessibility-icon"
+        />
+      )}
+      <p className="intro-text">
+        Le composant {componentName} a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C
+        {apgHref && (
+          <>
+            , notamment le modèle{' '}
+            <a href={apgHref} target="_blank" rel="noopener noreferrer">
+              {apgLabel || 'WAI-ARIA Authoring Practices'}
+            </a>
+          </>
+        )}
+        . Ce guide détaille comment notre implémentation respecte ces standards et garantit une expérience
+        utilisateur inclusive.
+      </p>
+    </div>
+
+    {children}
+  </div>
+);
+
+export const CriteriaSection = ({ title = "Critères d'accessibilité respectés", children }) => (
+  <div className="criteria-section">
+    <h2>{title}</h2>
+    {children}
+  </div>
+);
+
+export const CriteriaCard = ({ icon, title, children }) => (
+  <div className="criteria-card">
+    <div className="criteria-header">
+      {icon && <span className="criteria-icon">{icon}</span>}
+      <h3>{title}</h3>
+    </div>
+    {children}
+  </div>
+);
+
+export const DemoSection = ({ componentName, children }) => (
+  <div className="demo-section">
+    <h2>Démonstration interactive</h2>
+    <p>
+      Explorez ci-dessous un exemple de {componentName} entièrement accessible. Essayez de naviguer en utilisant
+      uniquement votre clavier pour tester l'accessibilité.
+    </p>
+    {children}
+  </div>
+);
+
+export const BestPracticesSection = ({ title = "Bonnes pratiques d'utilisation", children }) => (
+  <div className="best-practices">
+    <h2>{title}</h2>
+    {children}
+  </div>
+);
+
+export const ResourcesSection = ({ title = 'Ressources supplémentaires', children }) => (
+  <div className="resources-section">
+    <h2>{title}</h2>
+    {children}
+  </div>
+);
+
+export const AuditSection = ({ title = 'Rapports d\'audit', children }) => (
+  <div className="audit-section">
+    <h2>{title}</h2>
+    {children}
+  </div>
+);

package/src/stories/styles/accessibility-guide.css

@@ -0,0 +1,153 @@
+.accessibility-guide {
+	font-family:
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		'Open Sans',
+		'Helvetica Neue',
+		sans-serif;
+	max-width: 1200px;
+	margin-top: 10px;
+	padding: 2rem;
+	color: #333;
+	line-height: 1.6;
+}
+
+.intro-section {
+	display: flex;
+	align-items: center;
+	gap: 2rem;
+	margin: 2rem 0 !important;
+	padding: 1.5rem;
+	background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+	border-radius: 12px;
+}
+
+.accessibility-icon {
+	width: 80px;
+	height: 80px;
+	object-fit: contain;
+}
+
+.intro-text {
+	font-size: 1.1rem;
+	margin: 0;
+}
+
+.criteria-section {
+	margin: 3rem 0;
+}
+
+.criteria-section h2 {
+	font-size: 1.8rem;
+	margin-bottom: 1.5rem;
+	color: #2c3e50;
+	border-bottom: 2px solid #e0e0e0;
+	padding-bottom: 0.5rem;
+}
+
+.criteria-card {
+	background-color: #fff;
+	border-radius: 8px;
+	box-shadow: 0 4px 6px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 10%);
+	padding: 1.5rem;
+	margin-top: 1.5rem !important;
+	margin-bottom: 1.5rem !important;
+	transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.criteria-header {
+	display: flex;
+	align-items: center;
+	margin-bottom: 1rem;
+}
+
+.criteria-icon {
+	font-size: 1.8rem;
+	margin-right: 0.5rem !important;
+	margin-left: 0.5rem !important;
+}
+
+.criteria-header h3 {
+	margin: 0;
+	font-size: 1.4rem;
+	color: #1976d2;
+	margin-top: 0.5rem !important;
+	margin-bottom: 0.5rem !important;
+}
+
+.criteria-card ul {
+	margin: 0;
+	padding-left: 1.5rem;
+}
+
+.criteria-card li {
+	margin-bottom: 0.5rem;
+}
+
+.criteria-card strong {
+	color: #455a64;
+}
+
+.criteria-card code {
+	background-color: #f5f5f5;
+	padding: 0.2rem 0.4rem;
+	border-radius: 4px;
+	font-size: 0.9rem;
+	color: #e91e63;
+}
+
+.demo-section {
+	margin: 3rem 0;
+	padding: 2rem;
+	background-color: #f9f9f9;
+	border-radius: 8px;
+	margin-top: 1.5rem !important;
+	margin-bottom: 1.5rem !important;
+}
+
+.best-practices {
+	margin: 3rem 0;
+	padding: 1.5rem;
+	background-color: #e8f5e9;
+	border-left: 4px solid #4caf50;
+	border-radius: 4px;
+	margin-top: 1.5rem !important;
+	margin-bottom: 1.5rem !important;
+}
+
+.best-practices h2 {
+	color: #2e7d32;
+	margin-top: 0;
+}
+
+.resources-section {
+	margin: 3rem 0;
+}
+
+.resources-section a {
+	color: #1976d2;
+	text-decoration: none;
+	border-bottom: 1px dotted;
+	transition: color 0.2s ease;
+}
+
+.resources-section a:hover {
+	color: #0d47a1;
+}
+
+@media (width <= 768px) {
+	.intro-section {
+		flex-direction: column;
+		text-align: center;
+	}
+
+	.accessibility-icon {
+		margin-bottom: 1rem;
+	}
+}

package/dist/components/DatePicker/composables/useIconState.d.ts

@@ -1,17 +0,0 @@
-import { Ref } from 'vue';
-/**
- * Composable pour déterminer l'icône à afficher en fonction de l'état de validation
- *
- * @param options - Options de configuration
- * @returns Fonction pour obtenir l'icône appropriée
- */
-export declare const useIconState: (options: {
-    noCalendar?: boolean;
-    disableErrorHandling?: boolean;
-    errorMessages: Ref<string[]>;
-    warningMessages: Ref<string[]>;
-    successMessages: Ref<string[]>;
-}) => {
-    getIcon: import('vue').ComputedRef<"success" | "error" | "warning" | undefined>;
-    getIconValue: import('vue').ComputedRef<"success" | "error" | "warning" | undefined>;
-};