@cnamts/synapse 1.0.0 → 1.0.1

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.1",
   "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/components/BackBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/BackToTopBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/ChipList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/CollapsibleList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/ContextualMenu/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/CookieBanner/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/CopyBtn/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/Customs/SyBtnSelect/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/Customs/SyInputSelect/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/Customs/SySelect/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 

package/src/components/Customs/SySelect/SySelect.vue

@@ -170,7 +170,7 @@
 	})
 
 	const isRequired = computed(() => {
-		if (props.disableErrorHandling || props.hideMessages) return false
+		if (props.disableErrorHandling) return false
 		if (props.readonly) return
 		return (props.required || props.errorMessages.length > 0) && !selectedItem.value
 	})
@@ -218,13 +218,6 @@
 		}
 		window.addEventListener('scroll', updateListPosition, true)
 		window.addEventListener('resize', updateListPosition)
-
-		if (props.hideMessages) {
-			const message = document.querySelector('.v-input__details')
-			if (message) {
-				message.classList.add('d-sr-only')
-			}
-		}
 	})
 
 	onUnmounted(() => {
@@ -253,11 +246,12 @@
 			:aria-label="labelWithAsterisk"
 			:error-messages="props.disableErrorHandling ? [] : errorMessages"
 			:variant="outlined ? 'outlined' : 'underlined'"
-			:rules="isRequired && !props.disableErrorHandling && !props.hideMessages ? ['Le champ est requis.'] : []"
+			:rules="isRequired && !props.disableErrorHandling ? ['Le champ est requis.'] : []"
 			:display-asterisk="displayAsterisk"
 			:bg-color="props.bgColor"
 			:density="props.density"
 			readonly
+			:hide-details="props.hideMessages"
 			class="sy-select"
 			:width="calculatedWidth"
 			:style="hasError ? { minWidth: `${labelWidth + 18}px`} : {minWidth: `${labelWidth}px`}"

package/src/components/Customs/SySelect/tests/SySelect.spec.ts

@@ -50,12 +50,14 @@ describe('SySelect.vue', () => {
 	it('renders error messages when provided', () => {
 		const errorMessages = ['Error 1']
 		const wrapper = mount(SySelect, {
-			props: { errorMessages },
+			props: { errorMessages, hideMessages: false },
 			global: {
 				plugins: [vuetify],
 			},
 		})
-		expect(wrapper.find('.v-messages__message').text()).toContain('Error 1')
+		const message = wrapper.find('.v-messages__message')
+		expect(message.exists()).toBe(true)
+		expect(message.text()).toContain('Error 1')
 	})
 
 	it('does not render error messages when not provided', () => {

package/src/components/Customs/SyTextField/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/DataList/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/DataListGroup/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/DatePicker/AccessibiliteItems.ts

@@ -1,4 +1,4 @@
-import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
+import { ExpertiseLevelEnum } from '@/common/constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
 	{

package/src/components/DatePicker/ComplexDatePicker/ComplexDatePicker.mdx

@@ -0,0 +1,212 @@
+import {Meta, Canvas, Controls, Source} from '@storybook/blocks';
+import * as DatePickerStories from "./ComplexDatePicker.stories.ts";
+
+<Meta of={DatePickerStories}/>
+
+# DatePicker - Mode combiné
+
+Le DatePicker en mode combiné (`useCombinedMode: true`) permet d'utiliser à la fois le calendrier interactif et la saisie manuelle avec formatage automatique.
+
+## Description
+
+Cette variante du DatePicker est particulièrement utile lorsque :
+- Vous souhaitez offrir plusieurs méthodes de saisie de date aux utilisateurs
+- Vous avez besoin du formatage automatique intelligent des dates pendant la saisie
+- Vous voulez conserver l'interaction avec le calendrier pour une meilleure expérience utilisateur
+
+Le formatage automatique intelligent ajoute les séparateurs (/, -, etc.) pendant la saisie en fonction du format spécifié.
+
+<Canvas story={{height: '550px'}} of={DatePickerStories.Default}/>
+
+## Propriétés spécifiques
+
+Propriétés applicables pour le mode combiné :
+
+<Controls of={DatePickerStories.Default}/>
+
+
+# Fonctionnalités spécifiques
+
+## Formatage automatique des dates
+
+Le composant ComplexDatePicker offre un formatage automatique intelligent des dates pendant la saisie. Les séparateurs sont automatiquement ajoutés lors de la saisie des chiffres, en s'adaptant au format spécifié (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, etc.).
+
+<Canvas of={DatePickerStories.AutoFormattingInput}/>
+
+## Désactivation de l'interaction avec le calendrier
+
+La propriété `disablePickerInteraction` permet d'utiliser le champ de saisie avec formatage automatique sans que le calendrier n'apparaisse au clic sur l'input ou sur l'icône. Cette option est utile pour les cas où on souhaite uniquement la saisie manuelle.
+
+<Canvas of={DatePickerStories.DisablePickerInteraction}/>
+
+## Formats de date personnalisés
+
+Le composant supporte différents formats de date et détecte automatiquement le séparateur utilisé dans le format (/, -, ., etc.) pour l'appliquer lors de la saisie.
+
+<Canvas of={DatePickerStories.CustomDateFormat}/>
+
+## Mode lecture seule
+
+Le composant peut être configuré en mode lecture seule, ce qui empêche toute modification de la valeur.
+
+<Canvas of={DatePickerStories.ReadonlyMode}/>
+
+## Plages de dates
+
+Le composant permet la sélection de plages de dates avec validation automatique.
+
+<Canvas of={DatePickerStories.DateRange}/>
+
+### DatePicker avec période personnalisée
+
+
+<div
+    style={{
+        border: '2px solid #FF0000',
+        padding: '1rem',
+        borderRadius: '4px',
+        marginBottom: '1rem',
+    }}
+>
+    <strong>Note importante</strong>
+    <ul>
+        <li>La prop <code>period</code> permet de définir une période de dates valides. Les dates en dehors de cette période ne seront pas visibles dans le calendrier.</li>
+        <li>Le format de la prop <code>period</code> est <code>MM/DD/YYYY</code>.</li>
+    </ul>
+</div>
+
+<Canvas of={DatePickerStories.WithCustomPeriod}/>
+
+## Personnalisation des icônes
+
+Vous pouvez personnaliser la position de l'icône du calendrier (au début ou à la fin du champ).
+
+<Canvas of={DatePickerStories.WithCustomIcons}/>
+
+## Activation par le champ de texte
+
+La propriété `textFieldActivator` permet d'ouvrir le calendrier en cliquant n'importe où sur le champ de texte.
+
+<Canvas of={DatePickerStories.WithTextFieldActivator}/>
+
+
+# Validation et règles personnalisées
+
+Le composant prend en charge des règles de validation personnalisées pour vérifier les dates saisies.
+
+<Canvas of={DatePickerStories.WithValidation}/>
+
+## Formats de retour différents
+
+Vous pouvez spécifier un format différent pour la valeur de retour avec la propriété `dateFormatReturn`.
+
+<Canvas of={DatePickerStories.WithDateFormatReturn}/>
+
+## Intégration dans un formulaire
+
+Le composant s'intègre facilement dans un formulaire avec validation à la soumission.
+
+<Canvas of={DatePickerStories.WithFormSubmission}/>
+
+# Méthodes exposées
+
+Le composant expose plusieurs méthodes qui peuvent être utilisées via une référence :
+
+### validateOnSubmit
+- **Description** : Valide le champ lors de la soumission d'un formulaire
+- **Retour** : `boolean` - Indique si la validation a réussi
+
+### clearValidation
+- **Description** : Efface les messages de validation
+
+### validateDates
+- **Description** : Valide les dates sélectionnées
+
+### openDatePicker
+- **Description** : Ouvre le calendrier programmatiquement
+
+### toggleDatePicker
+- **Description** : Bascule l'état d'ouverture du calendrier
+
+### Exemple d'utilisation
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const date = ref('')
+	const datePicker = ref(null)
+
+	const submitForm = () => {
+		const isValid = datePicker.value.validateOnSubmit()
+		if (isValid) {
+			// Traitement du formulaire
+		}
+	}
+</script>
+
+<template>
+	<form @submit.prevent="submitForm">
+		<DatePicker
+			ref="datePicker"
+			v-model="date"
+			placeholder="Date requise"
+			format="DD/MM/YYYY"
+            useCombinedMode
+			required
+		/>
+		<button type="submit">Soumettre</button>
+	</form>
+</template>
+`}
+/>
+
+### Exemple avec période personnalisée
+
+<Source
+    dark code={`
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { DatePicker } from '@cnamts/synapse'
+
+	const date = ref('')
+</script>
+
+<template>
+	<DatePicker
+		v-model="date"
+		placeholder="Sélectionner une date (1995-2005)"
+		format="DD/MM/YYYY"
+		useCombinedMode
+		:period="{
+			min: '01/01/1995',
+			max: '31/12/2005'
+		}"
+	/>
+</template>
+`}
+/>
+
+# Événements
+
+Le composant émet plusieurs événements :
+
+### update:modelValue
+- **Payload** : `string | string[]` - La nouvelle valeur du champ
+
+### closed
+- **Description** : Émis lorsque le calendrier est fermé
+
+### focus
+- **Description** : Émis lorsque le champ reçoit le focus
+
+### blur
+- **Description** : Émis lorsque le champ perd le focus
+
+### input
+- **Payload** : `string` - La valeur saisie dans le champ
+
+### date-selected
+- **Payload** : `Date | Date[] | null` - La date ou les dates sélectionnées