@cnamts/synapse 1.0.7 → 1.0.9

package/src/stories/Accessibilite/Avancement/Avancement.stories.ts

@@ -1,24 +1,182 @@
 import type { StoryObj } from '@storybook/vue3'
 import { computed, ref } from 'vue'
-import { mdiCheckCircle, mdiClockOutline, mdiProgressClock } from '@mdi/js'
+
+type AuditStatus = 'Audité' | 'En cours' | 'Non audité'
+type AuditItem = { composant: string, status: AuditStatus, lastUpdate?: string }
+
+const STATUS = {
+	AUDITED: 'Audité' as AuditStatus,
+	IN_PROGRESS: 'En cours' as AuditStatus,
+	NOT_AUDITED: 'Non audité' as AuditStatus,
+}
+
+const ITEMS: AuditItem[] = [
+	{ composant: 'PageContainer', status: STATUS.AUDITED },
+	{ composant: 'SkipLink', status: STATUS.AUDITED },
+	{ composant: 'Alerts', status: STATUS.AUDITED },
+	{ composant: 'NotificationBar', status: STATUS.NOT_AUDITED },
+	{ composant: 'BackBtn', status: STATUS.AUDITED },
+	{ composant: 'BackToTopBtn', status: STATUS.AUDITED },
+	{ composant: 'CopyBtn', status: STATUS.AUDITED },
+	{ composant: 'LangBtn', status: STATUS.AUDITED },
+	{ composant: 'DownloadBtn', status: STATUS.AUDITED },
+	{ composant: 'FranceConnectBtn', status: STATUS.AUDITED },
+	{ composant: 'SyTextField', status: STATUS.AUDITED },
+	{ composant: 'HeaderBar', status: STATUS.AUDITED },
+	{ composant: 'HeaderNavigationBar', status: STATUS.AUDITED },
+	{ composant: 'LogoBrandSection', status: STATUS.AUDITED },
+	{ composant: 'SubHeader', status: STATUS.AUDITED },
+	{ composant: 'HeaderLoading', status: STATUS.AUDITED },
+	{ composant: 'HeaderToolbar', status: STATUS.IN_PROGRESS },
+	{ composant: 'Footer', status: STATUS.AUDITED },
+	{ composant: 'SySelect', status: STATUS.AUDITED },
+	{ composant: 'SyInputSelect', status: STATUS.NOT_AUDITED },
+	{ composant: 'Logo', status: STATUS.AUDITED },
+	{ composant: 'DataListGroup', status: STATUS.AUDITED },
+	{ composant: 'DataList', status: STATUS.AUDITED },
+	{ composant: 'DataListItem', status: STATUS.AUDITED },
+	{ composant: 'DataListLoading', status: STATUS.AUDITED },
+	{ composant: 'ErrorPage', status: STATUS.AUDITED },
+	{ composant: 'CookieBanner', status: STATUS.AUDITED },
+	{ composant: 'ContextualMenu', status: STATUS.AUDITED },
+	{ composant: 'DialogBox', status: STATUS.NOT_AUDITED },
+	{ composant: 'PasswordField', status: STATUS.IN_PROGRESS },
+	{ composant: 'PhoneField', status: STATUS.AUDITED },
+	{ composant: 'UserMenuBtn', status: STATUS.NOT_AUDITED },
+	{ composant: 'SyBtnSelect', status: STATUS.NOT_AUDITED },
+	{ composant: 'NirField', status: STATUS.IN_PROGRESS },
+	{ composant: 'PeriodField', status: STATUS.NOT_AUDITED },
+	{ composant: 'RangeField', status: STATUS.NOT_AUDITED },
+	{ composant: 'SearchListField', status: STATUS.NOT_AUDITED },
+	{ composant: 'SelectBtnField', status: STATUS.NOT_AUDITED },
+	{ composant: 'RatingPicker', status: STATUS.NOT_AUDITED },
+	{ composant: 'DatePicker', status: STATUS.NOT_AUDITED },
+	{ composant: 'FileUpload', status: STATUS.NOT_AUDITED },
+	{ composant: 'FilePreview', status: STATUS.NOT_AUDITED },
+	{ composant: 'FileList', status: STATUS.NOT_AUDITED },
+	{ composant: 'UploadWorkflow', status: STATUS.NOT_AUDITED },
+	{ composant: 'ChipList', status: STATUS.AUDITED },
+	{ composant: 'FilterInline', status: STATUS.NOT_AUDITED },
+	{ composant: 'FilterSideBar', status: STATUS.NOT_AUDITED },
+	{ composant: 'PaginatedTable', status: STATUS.NOT_AUDITED },
+	{ composant: 'TableToolbar', status: STATUS.NOT_AUDITED },
+	{ composant: 'NotFoundPage', status: STATUS.AUDITED },
+	{ composant: 'MaintenancePage', status: STATUS.AUDITED },
+	{ composant: 'ExternalLinks', status: STATUS.AUDITED },
+	{ composant: 'SyIcon', status: STATUS.NOT_AUDITED },
+	{ composant: 'SocialMediaLinks', status: STATUS.AUDITED },
+	{ composant: 'CollapsibleList', status: STATUS.AUDITED },
+	{ composant: 'Accordion', status: STATUS.NOT_AUDITED },
+	{ composant: 'ToolbarContainer', status: STATUS.NOT_AUDITED },
+	{ composant: 'SyTable', status: STATUS.NOT_AUDITED },
+	{ composant: 'SyTableServer', status: STATUS.NOT_AUDITED },
+	{ composant: 'Diacritic', status: STATUS.NOT_AUDITED },
+	{ composant: 'SyCheckBox', status: STATUS.NOT_AUDITED },
+	{ composant: 'SyTabs', status: STATUS.NOT_AUDITED },
+]
+
+function countByStatus(items: AuditItem[]) {
+	const audited = items.filter(i => i.status === STATUS.AUDITED).length
+	const inProgress = items.filter(i => i.status === STATUS.IN_PROGRESS).length
+	const notAudited = items.filter(i => i.status === STATUS.NOT_AUDITED).length
+	return { audited, inProgress, notAudited, total: items.length }
+}
+
+function useAuditFilters(source: AuditItem[]) {
+	const search = ref('')
+	const statusFilter = ref<'all' | 'audited' | 'in-progress' | 'not-audited'>('all')
+	const page = ref(1)
+	const itemsPerPage = 20
+
+	const filteredItems = computed(() => {
+		let result = [...source]
+		if (statusFilter.value !== 'all') {
+			result = result.filter((item) => {
+				switch (statusFilter.value) {
+					case 'audited':
+						return item.status === STATUS.AUDITED
+					case 'in-progress':
+						return item.status === STATUS.IN_PROGRESS
+					case 'not-audited':
+						return item.status === STATUS.NOT_AUDITED
+				}
+			})
+		}
+		if (search.value) {
+			const q = search.value.toLowerCase()
+			result = result.filter(i => i.composant.toLowerCase().includes(q))
+		}
+		return result
+	})
+
+	const paginatedItems = computed(() => {
+		const start = (page.value - 1) * itemsPerPage
+		return filteredItems.value.slice(start, start + itemsPerPage)
+	})
+
+	return {
+		search,
+		statusFilter,
+		page,
+		itemsPerPage,
+		filteredItems,
+		paginatedItems,
+	}
+}
 
 export default {
 	title: 'Accessibilité/Design System/Avancement',
 }
 
+export const Stats: StoryObj = {
+	render: () => {
+		return {
+			setup() {
+				const { audited, inProgress, notAudited, total } = countByStatus(ITEMS)
+				return {
+					auditedCount: audited,
+					inProgressCount: inProgress,
+					notAuditedCount: notAudited,
+					totalCount: total,
+				}
+			},
+			template: `
+        <div class="progress-stats">
+          <div class="stat-item">
+            <span class="stat-value stat-success">{{ auditedCount }}</span>
+            <span class="stat-label">Composants audités</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-value stat-wip">{{ inProgressCount }}</span>
+            <span class="stat-label">En cours</span>
+          </div>
+          <div class="stat-item">
+            <span class="stat-value stat-info">{{ totalCount }}</span>
+            <span class="stat-label">Total des composants</span>
+          </div>
+        </div>
+      `,
+		}
+	},
+	tags: ['!dev'],
+}
+
 export const PreAudit: StoryObj = {
 	render: () => {
 		return {
-			setup() {},
+			setup() {
+				const totalCount = ITEMS.length
+				return { totalCount }
+			},
 			template: `
-				<v-chip
-					class="ma-2"
-					color="success"
-					variant="elevated"
-				>
-					60/60 Composants
-				</v-chip>
-			`,
+        <v-chip
+          class="ma-2"
+          color="success"
+          variant="elevated"
+        >
+          {{ totalCount }}/{{ totalCount }} Composants
+        </v-chip>
+      `,
 		}
 	},
 	tags: ['!dev'],
@@ -28,77 +186,12 @@ export const Manuel: StoryObj = {
 	render: () => {
 		return {
 			setup() {
-				const search = ref('')
-				const statusFilter = ref('all')
-				const page = ref(1)
-				const itemsPerPage = 20
 				const headers = [
 					{ text: 'Composant', value: 'composant' },
 					{ text: 'Statut', value: 'status' },
 					{ text: 'Dernière mise à jour', value: 'lastUpdate' },
 				]
 
-				const items = [
-					{ composant: 'PageContainer', status: 'Audité' },
-					{ composant: 'SkipLink', status: 'Audité' },
-					{ composant: 'Alerts', status: 'Audité' },
-					{ composant: 'NotificationBar', status: 'Non audité' },
-					{ composant: 'BackBtn', status: 'Audité' },
-					{ composant: 'BackToTopBtn', status: 'Audité' },
-					{ composant: 'CopyBtn', status: 'Audité' },
-					{ composant: 'LangBtn', status: 'Audité' },
-					{ composant: 'DownloadBtn', status: 'Audité' },
-					{ composant: 'FranceConnectBtn', status: 'Audité' },
-					{ composant: 'SyTextField', status: 'Audité' },
-					{ composant: 'HeaderBar', status: 'Non audité' },
-					{ composant: 'HeaderNavigationBar', status: 'Non audité' },
-					{ composant: 'LogoBrandSection', status: 'En cours' },
-					{ composant: 'SubHeader', status: 'Non audité' },
-					{ composant: 'HeaderLoading', status: 'Non audité' },
-					{ composant: 'HeaderToolbar', status: 'Non audité' },
-					{ composant: 'Footer', status: 'En cours' },
-					{ composant: 'SySelect', status: 'En cours' },
-					{ composant: 'SyInputSelect', status: 'Non audité' },
-					{ composant: 'Logo', status: 'Audité' },
-					{ composant: 'DataListGroup', status: 'Non audité' },
-					{ composant: 'DataList', status: 'Non audité' },
-					{ composant: 'DataListItem', status: 'Non audité' },
-					{ composant: 'DataListLoading', status: 'Non audité' },
-					{ composant: 'ErrorPage', status: 'Audité' },
-					{ composant: 'CookieBanner', status: 'Audité' },
-					{ composant: 'ContextualMenu', status: 'Audité' },
-					{ composant: 'DialogBox', status: 'Non audité' },
-					{ composant: 'PasswordField', status: 'Non audité' },
-					{ composant: 'PhoneField', status: 'Non audité' },
-					{ composant: 'UserMenuBtn', status: 'Non audité' },
-					{ composant: 'SyBtnSelect', status: 'Non audité' },
-					{ composant: 'NirField', status: 'Non audité' },
-					{ composant: 'PeriodField', status: 'Non audité' },
-					{ composant: 'RangeField', status: 'Non audité' },
-					{ composant: 'SearchListField', status: 'Non audité' },
-					{ composant: 'SelectBtnField', status: 'Non audité' },
-					{ composant: 'RatingPicker', status: 'Non audité' },
-					{ composant: 'DatePicker', status: 'Non audité' },
-					{ composant: 'FileUpload', status: 'Non audité' },
-					{ composant: 'FilePreview', status: 'Non audité' },
-					{ composant: 'FileList', status: 'Non audité' },
-					{ composant: 'UploadWorkflow', status: 'Non audité' },
-					{ composant: 'ChipList', status: 'Non audité' },
-					{ composant: 'FilterInline', status: 'Non audité' },
-					{ composant: 'FilterSideBar', status: 'Non audité' },
-					{ composant: 'PaginatedTable', status: 'Non audité' },
-					{ composant: 'TableToolbar', status: 'Non audité' },
-					{ composant: 'ErrorPage', status: 'Audité' },
-					{ composant: 'NotFoundPage', status: 'Audité' },
-					{ composant: 'MaintenancePage', status: 'Audité' },
-					{ composant: 'ContextualMenu', status: 'Audité' },
-					{ composant: 'ExternalLinks', status: 'Audité' },
-					{ composant: 'SyIcon', status: 'Non audité' },
-					{ composant: 'SocialMediaLinks', status: 'Audité' },
-					{ composant: 'CollapsibleList', status: 'Audité' },
-				]
-
-				// Options de filtrage par statut
 				const statusOptions = [
 					{ title: 'Tous les composants', value: 'all' },
 					{ title: 'Audités', value: 'audited' },
@@ -106,131 +199,107 @@ export const Manuel: StoryObj = {
 					{ title: 'Non audités', value: 'not-audited' },
 				]
 
-				// Filtrer les items en fonction de la recherche et du statut
-				const filteredItems = computed(() => {
-					let result = [...items]
-
-					// Filtrage par statut
-					if (statusFilter.value !== 'all') {
-						result = result.filter((item) => {
-							// Filtrer selon le statut sélectionné
-							switch (statusFilter.value) {
-								case 'audited':
-									return item.status === 'Audité'
-								case 'in-progress':
-									return item.status === 'En cours'
-								case 'not-audited':
-									return item.status === 'Non audité'
-								default:
-									return true
-							}
-						})
-					}
-
-					// Filtrage par recherche
-					if (search.value) {
-						const searchTerm = search.value.toLowerCase()
-						result = result.filter(item => item.composant.toLowerCase().includes(searchTerm))
-					}
-
-					return result
-				})
-
-				const totalItems = computed(() => items.length)
-
-				const checkedItems = computed(() => {
-					return items.filter(item => item.status === 'Audité').length
-				})
-
-				// Calcul des éléments paginés
-				const paginatedItems = computed(() => {
-					const start = (page.value - 1) * itemsPerPage
-					const end = start + itemsPerPage
-					return filteredItems.value.slice(start, end)
-				})
-
-				return { headers, items, filteredItems, totalItems, checkedItems, search, statusFilter, statusOptions, page, itemsPerPage, paginatedItems, mdiCheckCircle, mdiClockOutline, mdiProgressClock }
+				const { search, statusFilter, page, itemsPerPage, filteredItems, paginatedItems } = useAuditFilters(ITEMS)
+
+				const totalItems = computed(() => ITEMS.length)
+				const checkedItems = computed(() => ITEMS.filter(i => i.status === STATUS.AUDITED).length)
+
+				return {
+					headers,
+					items: ITEMS,
+					filteredItems,
+					totalItems,
+					checkedItems,
+					search,
+					statusFilter,
+					statusOptions,
+					page,
+					itemsPerPage,
+					// couleurs de statut pour les puces
+					statusColor: (s: AuditStatus) =>
+						s === STATUS.AUDITED ? '#56c271' : s === STATUS.IN_PROGRESS ? '#a05bb6' : '#f0b323',
+					paginatedItems,
+				}
 			},
 			template: `
-				<div class="audit-dashboard pa-4">
-					<div class="d-flex flex-wrap align-center justify-space-between mb-6">
-						<div class="d-flex flex-wrap">
-							<v-select
-								v-model="statusFilter"
-								:items="statusOptions"
-								item-title="title"
-								item-value="value"
-								label="Filtrer par statut"
-								hide-details
-								class="mr-2 mb-2"
-								style="max-width: 250px; min-width: 250px"
-								density="comfortable"
-								variant="outlined"
-							></v-select>
-							
-							<v-text-field
-								v-model="search"
-								label="Rechercher un composant"
-								append-inner-icon="mdi-magnify"
-								single-line
-								hide-details
-								class="mb-2"
-								style="max-width: 250px; min-width: 250px"
-								density="comfortable"
-								variant="outlined"
-							></v-text-field>
-						</div>
-					</div>
-
-					<div class="component-grid mb-6">
-
-						<v-row>
-							<v-col
-								v-for="item in paginatedItems"
-								:key="item.composant"
-								cols="12"
-								sm="6"
-								md="4"
-								lg="3"
-							>
-								<v-card
-									class="component-card"
-									:class="{ 'audited': item.status === 'Audité', 'in-progress': item.status === 'En cours', 'not-audited': item.status === 'Non audité' }"
-									elevation="2"
-									height="100%"
-								>
-									<v-card-item>
-										<v-card-title class="text-truncate">{{ item.composant }}</v-card-title>
-									</v-card-item>
-									
-									<v-card-text>
-										<v-chip
-											:color="item.status === 'Audité' ? '#56c271' : (item.status === 'En cours' ? '#a05bb6' : '#f0b323')"
-											variant="flat"
-											class="mb-2"
-										>
-											{{ item.status }}
-										</v-chip>
-									</v-card-text>
-								</v-card>
-							</v-col>
-						</v-row>
-
-						<div class="d-flex justify-center mt-4">
-							<v-pagination
-								v-model="page"
-								:length="Math.ceil(filteredItems.length / itemsPerPage)"
-								total-visible="7"
-								rounded
-							></v-pagination>
-						</div>
-
-						<div class="pa-2 text-caption text-right">
-							Dernière mise à jour: 18/07/2025
-						</div>
-					</div>
-				</div>
-			`,
+        <div class="audit-dashboard pa-4">
+          <div class="d-flex flex-wrap align-center justify-space-between mb-6">
+            <div class="d-flex flex-wrap">
+              <v-select
+                v-model="statusFilter"
+                :items="statusOptions"
+                item-title="title"
+                item-value="value"
+                label="Filtrer par statut"
+                hide-details
+                class="mr-2 mb-2"
+                style="max-width: 250px; min-width: 250px"
+                density="comfortable"
+                variant="outlined"
+              />
+              
+              <v-text-field
+                v-model="search"
+                label="Rechercher un composant"
+                append-inner-icon="mdi-magnify"
+                single-line
+                hide-details
+                class="mb-2"
+                style="max-width: 250px; min-width: 250px"
+                density="comfortable"
+                variant="outlined"
+              />
+            </div>
+          </div>
+
+          <div class="component-grid mb-6">
+            <v-row>
+              <v-col
+                v-for="item in paginatedItems"
+                :key="item.composant"
+                cols="12"
+                sm="6"
+                md="4"
+                lg="3"
+              >
+                <v-card
+                  class="component-card"
+                  :class="{ 'audited': item.status === 'Audité', 'in-progress': item.status === 'En cours', 'not-audited': item.status === 'Non audité' }"
+                  elevation="2"
+                  height="100%"
+                >
+                  <v-card-item>
+                    <v-card-title class="text-truncate">{{ item.composant }}</v-card-title>
+                  </v-card-item>
+                  
+                  <v-card-text>
+                    <v-chip
+                      :color="statusColor(item.status)"
+                      variant="flat"
+                      class="mb-2"
+                    >
+                      {{ item.status }}
+                    </v-chip>
+                  </v-card-text>
+                </v-card>
+              </v-col>
+            </v-row>
+
+            <div class="d-flex justify-center mt-4">
+              <v-pagination
+                v-model="page"
+                :length="Math.ceil(filteredItems.length / itemsPerPage)"
+                total-visible="7"
+                rounded
+              />
+            </div>
+
+            <div class="pa-2 text-caption text-right">
+              Dernière mise à jour: 10/09/2025
+            </div>
+          </div>
+        </div>
+      `,
 		}
 	},
 	tags: ['!dev'],

package/src/stories/Accessibilite/Introduction.mdx

@@ -1,31 +1,13 @@
 import {Meta} from '@storybook/blocks';
+import '../styles/shared.css';
 
 <Meta title="Accessibilité/Introduction"/>
 
-
 <style>
 {
   /* Styles globaux pour améliorer l'apparence */
   `
-    .accessibility-header {
-      color: white;
-      padding: 2rem;
-      border-radius: 8px;
-      margin-bottom: 2rem;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    }
     
-    .accessibility-header h1 {
-      margin-top: 0;
-      font-size: 2.5rem;
-      font-weight: 700;
-    }
-    
-    .accessibility-header p {
-      font-size: 1.1rem;
-      margin-bottom: 0;
-      opacity: 0.9;
-    }
     
     .key-element {
       background-color: #f8f9fa;
@@ -176,7 +158,7 @@ import {Meta} from '@storybook/blocks';
 }
 </style>
 
-<div className="accessibility-header">
+<div className="header">
   <h1>Accessibilité numérique</h1>
   <p>Construire des interfaces inclusives et conformes aux normes réglementaires</p>
 </div>

package/src/stories/Accessibilite/KitDePreAudit/Echantillonnage.mdx

@@ -1,29 +1,12 @@
 import {Meta} from '@storybook/blocks';
+import '../../styles/shared.css';
 
 <Meta title="Accessibilité/Kit de pré-audit/Échantillonnage"/>
 
 <style>
 {
 `
-  .header-container {
-    color: white;
-    padding: 2rem;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-  
-  .header-container h1 {
-    margin-top: 0;
-    font-size: 2.5rem;
-    font-weight: 700;
-  }
-  
-  .header-container p {
-    font-size: 1.1rem;
-    margin-bottom: 0;
-    opacity: 0.9;
-  }
+      
   
   .info-card {
     background-color: #f8f9fa;
@@ -142,8 +125,8 @@ import {Meta} from '@storybook/blocks';
 }
 </style>
 
-<div className="header-container">
-  <h1>📊 Échantillonnage</h1>
+<div className="header">
+  <h1>Échantillonnage</h1>
   <p>Définir un périmètre représentatif pour votre audit d'accessibilité</p>
 </div>
 

package/src/stories/Accessibilite/KitDePreAudit/Introduction.mdx

@@ -1,29 +1,12 @@
 import { Meta } from '@storybook/blocks';
+import '../../styles/shared.css';
 
 <Meta title="Accessibilité/Kit de pré-audit/Introduction" />
 
 <style>
 {
 `
-  .preaudit-header {
-    color: white;
-    padding: 2rem;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  }
-  
-  .preaudit-header h1 {
-    margin-top: 0;
-    font-size: 2.5rem;
-    font-weight: 700;
-  }
-  
-  .preaudit-header p {
-    font-size: 1.1rem;
-    margin-bottom: 0;
-    opacity: 0.9;
-  }
+      
   
   .key-element {
     background-color: #f8f9fa;
@@ -142,7 +125,7 @@ import { Meta } from '@storybook/blocks';
 }
 </style>
 
-<div className="preaudit-header">
+<div className="header">
   <h1>Pré-audit web conformité à l'accessibilité</h1>
   <p>Vérifiez la conformité de votre service web avant l'audit officiel</p>
 </div>