@cnamts/synapse 1.0.0 → 1.0.2

package/dist/utils/rules/isRequired/index.d.ts

@@ -1,4 +1,4 @@
 import { ValidationRule, ErrorMessages } from '../types';
-export type Value = string | string[] | null;
+export type Value = string | any[] | null;
 export declare function isRequiredFn(errorMessages?: ErrorMessages): ValidationRule<Value>;
 export declare const isRequired: ValidationRule<Value>;

package/dist/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMeta {
+	readonly env: {
+		readonly VITEST?: boolean
+		readonly MODE: string
+		readonly BASE_URL: string
+		readonly PROD: boolean
+		readonly DEV: boolean
+		[key: string]: string | boolean | undefined
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -13,9 +13,9 @@
   "types": "./dist/main.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/main.d.ts",
       "import": "./dist/design-system-v3.js",
-      "require": "./dist/design-system-v3.umd.cjs",
-      "types": "./dist/main.d.ts"
+      "require": "./dist/design-system-v3.umd.cjs"
     },
     "./style.css": "./dist/style.css",
     "./*": "./src/*"

package/src/assets/_spacers.scss

@@ -142,8 +142,44 @@ $pa-spacers: (
 @include generate-side-spacing-classes(margin, mb, bottom);
 @include generate-side-spacing-classes(margin, ml, left);
 
+// Définir les points de rupture
+$breakpoints: (
+	'sm': 600px,
+	'md': 960px,
+	'lg': 1280px,
+	'xl': 1920px,
+);
+
+// Mixin pour générer les classes de marges et de paddings avec les points de rupture
+@mixin generate-breakpoint-spacing-classes($property, $prefix) {
+	@each $breakpoint, $value in $breakpoints {
+		@for $i from 0 through 64 {
+			.#{$prefix}-#{$breakpoint}-#{$i} {
+				@media (min-width: #{$value}) {
+					#{$property}: var(--spacing-#{$i}) !important;
+				}
+			}
+		}
+	}
+}
+
+// Générer les classes de marges et de paddings avec les points de rupture
+@include generate-breakpoint-spacing-classes(margin-right, mr);
+@include generate-breakpoint-spacing-classes(padding-right, pr);
+@include generate-breakpoint-spacing-classes(margin-left, ml);
+@include generate-breakpoint-spacing-classes(padding-left, pl);
+@include generate-breakpoint-spacing-classes(margin-top, mt);
+@include generate-breakpoint-spacing-classes(padding-top, pt);
+@include generate-breakpoint-spacing-classes(margin-bottom, mb);
+@include generate-breakpoint-spacing-classes(padding-bottom, pb);
+@include generate-breakpoint-spacing-classes(margin, mx);
+@include generate-breakpoint-spacing-classes(padding, px);
+@include generate-breakpoint-spacing-classes(margin, my);
+@include generate-breakpoint-spacing-classes(padding, py);
+
 // Additional classes for specific spacing
 
-.v-btn {
+.theme-cnam .v-btn,
+.theme-pa .v-btn {
 	padding: 0 var(--spacing-4) !important;
 }

package/src/assets/_typography.scss

@@ -0,0 +1,158 @@
+/* Typography styles for CNAM and PA themes */
+
+/* Theme Typography */
+.v-theme--cnam,
+.v-theme--pa {
+	/* Headings with Vuetify classes */
+	.text-h1 {
+		font-size: var(--v-typography-h1-font-size) !important;
+		font-weight: var(--v-typography-h1-font-weight) !important;
+		line-height: var(--v-typography-h1-line-height) !important;
+		letter-spacing: var(--v-typography-h1-letter-spacing) !important;
+	}
+
+	.text-h2 {
+		font-size: var(--v-typography-h2-font-size) !important;
+		font-weight: var(--v-typography-h2-font-weight) !important;
+		line-height: var(--v-typography-h2-line-height) !important;
+		letter-spacing: var(--v-typography-h2-letter-spacing) !important;
+	}
+
+	.text-h3 {
+		font-size: var(--v-typography-h3-font-size) !important;
+		font-weight: var(--v-typography-h3-font-weight) !important;
+		line-height: var(--v-typography-h3-line-height) !important;
+		letter-spacing: var(--v-typography-h3-letter-spacing) !important;
+	}
+
+	.text-h4 {
+		font-size: var(--v-typography-h4-font-size) !important;
+		font-weight: var(--v-typography-h4-font-weight) !important;
+		line-height: var(--v-typography-h4-line-height) !important;
+		letter-spacing: var(--v-typography-h4-letter-spacing) !important;
+	}
+
+	.text-h5 {
+		font-size: var(--v-typography-h5-font-size) !important;
+		font-weight: var(--v-typography-h5-font-weight) !important;
+		line-height: var(--v-typography-h5-line-height) !important;
+		letter-spacing: var(--v-typography-h5-letter-spacing) !important;
+	}
+
+	.text-h6 {
+		font-size: var(--v-typography-h6-font-size) !important;
+		font-weight: var(--v-typography-h6-font-weight) !important;
+		line-height: var(--v-typography-h6-line-height) !important;
+		letter-spacing: var(--v-typography-h6-letter-spacing) !important;
+	}
+
+	/* Native HTML heading elements */
+	h1 {
+		font-size: var(--v-typography-h1-font-size) !important;
+		font-weight: var(--v-typography-h1-font-weight) !important;
+		line-height: var(--v-typography-h1-line-height) !important;
+		letter-spacing: var(--v-typography-h1-letter-spacing) !important;
+		margin-bottom: 0.5rem;
+	}
+
+	h2 {
+		font-size: var(--v-typography-h2-font-size) !important;
+		font-weight: var(--v-typography-h2-font-weight) !important;
+		line-height: var(--v-typography-h2-line-height) !important;
+		letter-spacing: var(--v-typography-h2-letter-spacing) !important;
+		margin-bottom: 0.5rem;
+	}
+
+	h3 {
+		font-size: var(--v-typography-h3-font-size) !important;
+		font-weight: var(--v-typography-h3-font-weight) !important;
+		line-height: var(--v-typography-h3-line-height) !important;
+		letter-spacing: var(--v-typography-h3-letter-spacing) !important;
+		margin-bottom: 0.5rem;
+	}
+
+	h4 {
+		font-size: var(--v-typography-h4-font-size) !important;
+		font-weight: var(--v-typography-h4-font-weight) !important;
+		line-height: var(--v-typography-h4-line-height) !important;
+		letter-spacing: var(--v-typography-h4-letter-spacing) !important;
+		margin-bottom: 0.5rem;
+	}
+
+	h5 {
+		font-size: var(--v-typography-h5-font-size) !important;
+		font-weight: var(--v-typography-h5-font-weight) !important;
+		line-height: var(--v-typography-h5-line-height) !important;
+		letter-spacing: var(--v-typography-h5-letter-spacing) !important;
+		margin-bottom: 0.5rem;
+	}
+
+	h6 {
+		font-size: var(--v-typography-h6-font-size) !important;
+		font-weight: var(--v-typography-h6-font-weight) !important;
+		line-height: var(--v-typography-h6-line-height) !important;
+		letter-spacing: var(--v-typography-h6-letter-spacing) !important;
+		margin-bottom: 0.5rem;
+	}
+
+	/* Body text */
+	.text-body-1 {
+		font-size: var(--v-typography-body1-font-size) !important;
+		font-weight: var(--v-typography-body1-font-weight) !important;
+		line-height: var(--v-typography-body1-line-height) !important;
+		letter-spacing: var(--v-typography-body1-letter-spacing) !important;
+	}
+
+	.text-body-2 {
+		font-size: var(--v-typography-body2-font-size) !important;
+		font-weight: var(--v-typography-body2-font-weight) !important;
+		line-height: var(--v-typography-body2-line-height) !important;
+		letter-spacing: var(--v-typography-body2-letter-spacing) !important;
+	}
+
+	/* Subtitle text */
+	.text-subtitle-1 {
+		font-size: var(--v-typography-subtitle1-font-size) !important;
+		font-weight: var(--v-typography-subtitle1-font-weight) !important;
+		line-height: var(--v-typography-subtitle1-line-height) !important;
+		letter-spacing: var(--v-typography-subtitle1-letter-spacing) !important;
+	}
+
+	.text-subtitle-2 {
+		font-size: var(--v-typography-subtitle2-font-size) !important;
+		font-weight: var(--v-typography-subtitle2-font-weight) !important;
+		line-height: var(--v-typography-subtitle2-line-height) !important;
+		letter-spacing: var(--v-typography-subtitle2-letter-spacing) !important;
+	}
+
+	/* Other typography */
+	.text-caption {
+		font-size: var(--v-typography-caption-font-size) !important;
+		font-weight: var(--v-typography-caption-font-weight) !important;
+		line-height: var(--v-typography-caption-line-height) !important;
+		letter-spacing: var(--v-typography-caption-letter-spacing) !important;
+	}
+
+	.text-overline {
+		font-size: var(--v-typography-overline-font-size) !important;
+		font-weight: var(--v-typography-overline-font-weight) !important;
+		line-height: var(--v-typography-overline-line-height) !important;
+		letter-spacing: var(--v-typography-overline-letter-spacing) !important;
+		text-transform: var(--v-typography-overline-text-transform, uppercase) !important;
+	}
+
+	/* Display text */
+	.text-display-1 {
+		font-size: var(--v-typography-display1-font-size) !important;
+		font-weight: var(--v-typography-display1-font-weight) !important;
+		line-height: var(--v-typography-display1-line-height) !important;
+		letter-spacing: var(--v-typography-display1-letter-spacing) !important;
+	}
+
+	.text-display-2 {
+		font-size: var(--v-typography-display2-font-size) !important;
+		font-weight: var(--v-typography-display2-font-weight) !important;
+		line-height: var(--v-typography-display2-line-height) !important;
+		letter-spacing: var(--v-typography-display2-letter-spacing) !important;
+	}
+}

package/src/assets/settings.scss

@@ -26,6 +26,13 @@
 	}
 }
 
+// Common table styles
+.v-data-table thead th .v-data-table-header__content {
+	opacity: 0.65;
+	font-size: 0.875rem;
+	font-weight: 700 !important;
+}
+
 .v-data-table-progress {
 	.v-progress-linear {
 		height: 4px !important;

package/src/common/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,7 @@
+/**
+ * Enum définissant les niveaux d'expertise pour les composants
+ */
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/common/imgs/accessibility-svgrepo-com.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM9.25 3.75C9.25 4.44036 8.69036 5 8 5C7.30964 5 6.75 4.44036 6.75 3.75C6.75 3.05964 7.30964 2.5 8 2.5C8.69036 2.5 9.25 3.05964 9.25 3.75ZM12 8H9.41901L11.2047 13H9.081L8 9.97321L6.91901 13H4.79528L6.581 8H4V6H12V8Z" fill="#000000"/>
+</svg>

package/src/components/Accordion/Accessibilite/AccessibilityGuide.mdx

@@ -0,0 +1,249 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import * as AccordionStories from '../Accordion.stories';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+
+<Meta of={AccordionStories} />
+
+<div className="accessibility-guide">
+  <Title>Guide d'Accessibilité du Composant Accordion</Title>
+  
+  <div className="intro-section">
+    <img 
+      src={AccessibilityIcon} 
+      alt="Icône d'accessibilité" 
+      className="accessibility-icon"
+    />
+    <p className="intro-text">
+      Le composant Accordion a été conçu en suivant rigoureusement les recommandations d'accessibilité du W3C, 
+      notamment le modèle <a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/" target="_blank" rel="noopener noreferrer">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>
+
+  <div className="criteria-section">
+    <h2>Critères d'accessibilité respectés</h2>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🔍</span>
+        <h3>Structure sémantique</h3>
+      </div>
+      <ul>
+        <li><strong>Rôles ARIA appropriés</strong> : <code>role="button"</code> pour les en-têtes et <code>role="region"</code> pour les panneaux de contenu</li>
+        <li><strong>Niveaux de titres personnalisables</strong> : Utilisation dynamique des balises <code>h1</code> à <code>h6</code> selon le contexte</li>
+        <li><strong>Relations entre éléments</strong> : Connexion entre en-têtes et panneaux via <code>aria-controls</code> et <code>aria-labelledby</code></li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">⌨️</span>
+        <h3>Navigation clavier complète</h3>
+      </div>
+      <ul>
+        <li><strong>Touches Espace et Entrée</strong> : Pour activer/désactiver les panneaux</li>
+        <li><strong>Touches fléchées</strong> : Navigation entre les en-têtes (↑ et ↓)</li>
+        <li><strong>Touches Home/End</strong> : Accès rapide au premier/dernier en-tête</li>
+        <li><strong>Gestion intelligente</strong> : Contournement automatique des éléments désactivés</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">📱</span>
+        <h3>États et retours d'information</h3>
+      </div>
+      <ul>
+        <li><strong>État d'expansion</strong> : <code>aria-expanded</code> indique si un panneau est ouvert ou fermé</li>
+        <li><strong>État de désactivation</strong> : <code>aria-disabled</code> signale les éléments non disponibles</li>
+        <li><strong>Indication visuelle</strong> : Rotation de l'icône et changements de couleur pour indiquer l'état</li>
+        <li><strong>Focus visible</strong> : Indication claire de l'élément actuellement focalisé</li>
+      </ul>
+    </div>
+    
+    <div className="criteria-card">
+      <div className="criteria-header">
+        <span className="criteria-icon">🎨</span>
+        <h3>Personnalisation accessible</h3>
+      </div>
+      <ul>
+        <li><strong>Contraste configurable</strong> : Options de couleurs pour garantir un contraste suffisant</li>
+        <li><strong>Taille et espacement</strong> : Dimensions adaptées pour faciliter l'interaction</li>
+        <li><strong>Cohérence visuelle</strong> : Comportement prévisible dans différents contextes</li>
+      </ul>
+    </div>
+  </div>
+
+  <div className="demo-section">
+    <h2>Démonstration interactive</h2>
+    <p>
+      Explorez ci-dessous un exemple d'Accordion entièrement accessible. 
+      Essayez de naviguer en utilisant uniquement votre clavier pour tester l'accessibilité.
+    </p>
+    <Primary />
+  </div>
+
+  <div className="best-practices">
+    <h2>Bonnes pratiques d'utilisation</h2>
+    <ul>
+      <li>Utilisez des titres concis et descriptifs pour les en-têtes</li>
+      <li>Évitez de placer des éléments interactifs complexes à l'intérieur du contenu des panneaux</li>
+      <li>Maintenez une cohérence dans l'utilisation des niveaux de titres</li>
+      <li>Limitez le nombre d'accordéons sur une même page pour éviter la surcharge cognitive</li>
+    </ul>
+  </div>
+
+  <div className="resources-section">
+    <h2>Ressources supplémentaires</h2>
+    <ul>
+      <li><a href="https://www.w3.org/WAI/ARIA/apg/patterns/accordion/" target="_blank" rel="noopener noreferrer">Guide des pratiques d'auteur WAI-ARIA pour les accordéons</a></li>
+      <li><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noopener noreferrer">Référence rapide WCAG 2.1</a></li>
+      <li><a href="https://inclusive-components.design/collapsible-sections/" target="_blank" rel="noopener noreferrer">Inclusive Components: Collapsible Sections</a></li>
+    </ul>
+  </div>
+</div>
+
+<style>
+{`
+  .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: 0 auto;
+    padding: 2rem;
+    color: #333;
+    line-height: 1.6;
+  }
+  
+  .intro-section {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+    margin: 2rem 0;
+    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: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  
+  .criteria-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.12);
+  }
+  
+  .criteria-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  
+  .criteria-icon {
+    font-size: 1.8rem;
+    margin-right: 1rem;
+  }
+  
+  .criteria-header h3 {
+    margin: 0;
+    font-size: 1.4rem;
+    color: #1976d2;
+  }
+  
+  .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;
+  }
+  
+  .best-practices {
+    margin: 3rem 0;
+    padding: 1.5rem;
+    background-color: #e8f5e9;
+    border-left: 4px solid #4caf50;
+    border-radius: 4px;
+  }
+  
+  .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 (max-width: 768px) {
+    .intro-section {
+      flex-direction: column;
+      text-align: center;
+    }
+    
+    .accessibility-icon {
+      margin-bottom: 1rem;
+    }
+  }
+`}
+</style>
+