@cnamts/synapse 1.0.8 → 1.0.9

package/dist/stories/EcoConception/ecoDesignItems.d.ts

@@ -1,4 +0,0 @@
-export declare const ecoDesignItems: {
-    title: string;
-    description: string;
-}[];

package/src/components/DownloadBtn/tests/__snapshots__/DownloadBtn.spec.ts.snap

@@ -1,92 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`DownloadBtn > renders correctly 1`] = `
-<button
-  class="
-    bg-white
-    sy-download-btn
-    text-primary
-    text-wrap
-    v-btn
-    v-btn--density-default
-    v-btn--size-default
-    v-btn--variant-outlined
-    v-theme--light
-  "
-  style="
-    height: auto;
-    min-height: 36px;
-  "
-  type="button"
->
-  <span class="v-btn__overlay"></span>
-  <span class="v-btn__underlay"></span>
-  <!---->
-  <span
-    class="v-btn__content"
-    data-no-activator=""
-  >
-    <i
-      aria-hidden="true"
-      class="
-        M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z
-        mdi
-        mr-3
-        notranslate
-        text-primary
-        v-icon
-        v-icon--size-default
-        v-theme--light
-      "
-    ></i>
-  </span>
-  <!---->
-  <!---->
-</button>
-`;
-
-exports[`DownloadBtn > with slots 1`] = `
-<button
-  class="
-    bg-white
-    sy-download-btn
-    text-primary
-    text-wrap
-    v-btn
-    v-btn--density-default
-    v-btn--size-default
-    v-btn--variant-outlined
-    v-theme--light
-  "
-  style="
-    height: auto;
-    min-height: 36px;
-  "
-  type="button"
->
-  <span class="v-btn__overlay"></span>
-  <span class="v-btn__underlay"></span>
-  <!---->
-  <span
-    class="v-btn__content"
-    data-no-activator=""
-  >
-    <i
-      aria-hidden="true"
-      class="
-        M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z
-        mdi
-        mr-3
-        notranslate
-        text-primary
-        v-icon
-        v-icon--size-default
-        v-theme--light
-      "
-    ></i>
-    Download
-  </span>
-  <!---->
-  <!---->
-</button>
-`;

package/src/components/Tables/common/tableStorageUtils.ts

@@ -1,127 +0,0 @@
-import { computed, ref, type Ref } from 'vue'
-import type { DataOptions, DataTableHeaders } from './types'
-import { LocalStorageUtility } from '@/utils/localStorageUtility'
-
-/**
- * Interface for column width storage
- */
-export interface ColumnWidthsStorage {
-	[key: string]: number | string
-}
-
-/**
- * Utility function to manage table state persistence in local storage
- */
-export function useTableStorage({
-	prefix,
-	suffix,
-	serverItemsLength,
-	options,
-}: {
-	prefix: string
-	suffix?: string
-	serverItemsLength?: number
-	options: Ref<Partial<DataOptions>>
-}) {
-	const localStorageUtility = new LocalStorageUtility()
-	const localOptions = ref({})
-
-	const storageKey = computed(() => {
-		return suffix ? `${prefix}-${suffix}` : prefix
-	})
-
-	// Separate key for column widths
-	const columnWidthsKey = computed(() => {
-		return `${storageKey.value}-column-widths`
-	})
-
-	// Separate key for headers
-	const heardersKey = computed(() => {
-		return `${storageKey.value}-headers`
-	})
-
-	// Column widths storage
-	const columnWidths = ref<ColumnWidthsStorage>({})
-
-	// Headers storage
-	const headers = ref<DataTableHeaders[] | undefined>(undefined)
-
-	// Configuration of local storage synchronization
-	function setupLocalStorage() {
-		// Watch for option changes and update local storage
-		const watchOptions = () => {
-			const storageData = {
-				...(options.value as Record<string, unknown>),
-			}
-
-			// Add itemsLength only for server-side tables
-			if (serverItemsLength !== undefined) {
-				storageData.itemsLength = serverItemsLength
-			}
-
-			localStorageUtility.setItem(storageKey.value, storageData)
-			localOptions.value = options.value
-		}
-
-		// Initialize local options from storage or default values
-		const initFromStorage = (defaultOptions: Record<string, unknown>) => {
-			localOptions.value = localStorageUtility.getItem(storageKey.value) ?? defaultOptions
-
-			// Load column widths from storage
-			const storedColumnWidths = localStorageUtility.getItem<ColumnWidthsStorage>(columnWidthsKey.value)
-			if (storedColumnWidths) {
-				columnWidths.value = storedColumnWidths
-			}
-
-			// Load headers from storage
-			const storedHeaders = localStorageUtility.getItem<DataTableHeaders[]>(heardersKey.value)
-			if (storedHeaders) {
-				headers.value = storedHeaders
-			}
-		}
-
-		// Save column widths to localStorage
-		const saveColumnWidths = (widths: ColumnWidthsStorage) => {
-			columnWidths.value = widths
-			localStorageUtility.setItem(columnWidthsKey.value, widths)
-		}
-
-		// Update a single column width
-		const updateColumnWidth = (columnKey: string, width: number | string) => {
-			const updatedWidths = {
-				...columnWidths.value,
-				[columnKey]: width,
-			}
-			saveColumnWidths(updatedWidths)
-		}
-
-		// Save headers to localStorage
-		const saveHeaders = (headers: DataTableHeaders[] | undefined) => {
-			if (!headers) {
-				localStorageUtility.removeItem(heardersKey.value)
-				return
-			}
-
-			localStorageUtility.setItem(heardersKey.value, headers)
-		}
-
-		return { watchOptions, initFromStorage, saveColumnWidths, updateColumnWidth, saveHeaders }
-	}
-
-	return {
-		localOptions,
-		columnWidths,
-		headers,
-		storageKey,
-		columnWidthsKey,
-		setupLocalStorage,
-		updateColumnWidth: (key: string, width: number | string) => {
-			const updatedWidths = {
-				...columnWidths.value,
-				[key]: width,
-			}
-			columnWidths.value = updatedWidths
-			localStorageUtility.setItem(columnWidthsKey.value, updatedWidths)
-		},
-	}
-}

package/src/components/Tables/common/tableUtils.ts

@@ -1,102 +0,0 @@
-import { computed, watch, type Ref } from 'vue'
-import type { DataOptions, TableDensityType } from './types'
-import { useTableAccessibility } from './tableAccessibilityUtils'
-import { useTableStorage } from './tableStorageUtils'
-
-/**
- * Crée et renvoie des fonctionnalités communes pour les tableaux
- */
-export function useTableUtils({
-	tableId,
-	prefix,
-	suffix,
-	serverItemsLength,
-	componentAttributes,
-	options,
-}: {
-	tableId: string
-	prefix: string
-	suffix?: string
-	caption?: string
-	serverItemsLength?: number
-	componentAttributes: Record<string, unknown>
-	options: Ref<Partial<DataOptions>>
-	density?: TableDensityType
-}) {
-	// Use the separated storage utility
-	const { localOptions, columnWidths, headers, storageKey, setupLocalStorage, updateColumnWidth } = useTableStorage({
-		prefix,
-		suffix,
-		serverItemsLength,
-		options,
-	})
-
-	// Use the separated accessibility utility
-	const { setupAccessibility } = useTableAccessibility({
-		tableId,
-	})
-
-	const optionsFacade = computed(() => {
-		return {
-			page: options.value.page || componentAttributes['page'],
-			itemsPerPage: options.value.itemsPerPage || 10,
-			sortBy: options.value.sortBy,
-			groupBy: options.value.groupBy,
-			multiSort: options.value.multiSort,
-			mustSort: options.value.mustSort,
-		}
-	})
-
-	const propsFacade = computed(() => {
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		const { 'onUpdate:options': _, ...attrs } = componentAttributes
-
-		const props = {
-			...attrs,
-			...localOptions.value,
-			...(serverItemsLength !== undefined ? { itemsLength: serverItemsLength } : {}),
-		}
-
-		// Ajoute itemsLength uniquement pour les tableaux côté serveur
-		if (serverItemsLength !== undefined) {
-			props.itemsLength = serverItemsLength
-		}
-
-		return props
-	})
-
-	function updateOptions(tableOptions: Partial<DataOptions>): void {
-		options.value = {
-			...options.value,
-			...tableOptions,
-		}
-	}
-
-	// Accessibility setup is now handled by the imported utility
-
-	// Storage setup is now handled by the imported utility
-	const { watchOptions, initFromStorage } = setupLocalStorage()
-
-	// Initialize local options from storage or default values
-	initFromStorage(optionsFacade.value)
-
-	// Watch for options changes
-	watch(
-		() => options.value,
-		watchOptions,
-		{ deep: true },
-	)
-
-	return {
-		localOptions,
-		columnWidths,
-		storageKey,
-		optionsFacade,
-		propsFacade,
-		updateOptions,
-		setupAccessibility,
-		setupLocalStorage,
-		updateColumnWidth,
-		headers,
-	}
-}

package/src/stories/EcoConception/ecoDesignItems.ts

@@ -1,55 +0,0 @@
-export const ecoDesignItems = [
-	{
-		title: 'Catégorie 1: Design',
-		description: `Privilégier un design épuré. Un bon design n’a pas besoin d’être chargé pour être agréable, au contraire.
-
-Certains composants ne sont souvent pas utiles, et ne servent qu’à habiller une page.<br>
-Le carrousel est un bon exemple\xa0: c’est un composant lourd, comportant à la fois du JavaScript et des images de grandes tailles.
-Il est pourtant rarement indispensable à la navigation et fait souvent doublon avec le menu.`,
-	},
-	{
-		title: 'Catégorie 2: Couleurs',
-		description: 'Le fond d’écran noir permet d’économiser de l’énergie sur les écrans OLED. Il est donc important de prévoir le mode sombre sur les nouveaux composants.',
-	},
-	{
-		title: 'Catégorie 3: Images',
-		description: `Le choix des images est important.
-Pour les formats standards JPEG et PNG, il faudra trouver le bon taux de compression pour ne pas dégrader l’expérience utilisateur.
-Une bonne alternative est de les remplacer par des images au format WEBP, en gardant les autres formats pour les navigateurs ne supportant pas ce format.
-
-La taille est également importante. Pour économiser encore plus d’espace, les images doivent être rognées aux bonnes dimensions.
-Le format vectoriel SVG est nettement plus léger: il doit être privilégié pour chaque image graphique compatible avec ce format.`,
-	},
-	{
-		title: 'Catégorie 4: Vidéos',
-		description: `La première chose à faire avant d’ajouter une vidéo est de se demander si elle est vraiment nécessaire.
-En effet, les vidéos demandent beaucoup de ressources: elles ne doivent donc pas être ajoutées juste pour illustrer ou pour remplir de l’espace.
-
-Dans le cas où elles sont nécessaires, la lecture automatique doit être désactivée, surtout s’il y a du son dans la vidéo, et vous devez également mettre en place le chargement différé sur chaque vidéo.
-
-L’utilisation de vidéos doit être privilégiée à la place des GIF.`,
-	},
-	{
-		title: 'Catégorie 5: Animations',
-		description: `Comme pour les vidéos, la première chose concernant les animations est de se demander si elles sont vraiment nécessaires\xa0: servent-elles le design ou sont-elles seulement décoratives\xa0?
-Si elles n’ont pas de réel intérêt, il vaut mieux ne pas les ajouter.
-Le JavaScript est une technologie énergivore, il est donc important de le réserver aux tâches qui nécessitent vraiment de la logique.
-
-Autant que possible, il vaut mieux privilégier les effets en CSS plutôt qu’en JavaScript.`,
-	},
-	{
-		title: 'Catégorie 6: Librairies',
-		description: `L’accumulation de librairies est une cause récurrente de ralentissement des applications Web, et donc de consommation excessive d’énergie.
-Le Design System est basé sur le framework Vuetify: il embarque donc la plupart des outils qui seront nécessaires au développement des applications.
-
-Si toutefois vous ne trouvez pas ce dont vous avez besoin dans les librairies présentes dans le projet, l’installation d’une nouvelle librairie doit se faire avec beaucoup de prudence.
-Il faudra trouver la librairie la plus légère et adaptée possible, l’outil [Bundlephobia](https://bundlephobia.com) permet d’évaluer rapidement la taille d’une librairie.`,
-	},
-	{
-		title: 'Catégorie 7: Fonctionnalités',
-		description: `Comme toujours, la première question à se poser est\xa0: est-ce que ma fonctionnalité est vraiment nécessaire\xa0? Ne fait-elle pas doublon avec une déjà existante\xa0?
-
-Dans le cas où elle est bien nécessaire, votre nouvelle fonctionnalité doit faire une chose précise. Moins elle enclenchera d’action, moins elle nécessitera d’énergie.
-Il faut aussi faire attention à la façon de développer la fonctionnalité\xa0: les boucles inutiles ou les requêtes intempestives nécessitent là encore beaucoup de ressources, il faut donc veiller à le faire à bon escient.`,
-	},
-]

package/src/stories/EcoConception/econception.stories.ts

@@ -1,30 +0,0 @@
-import { VExpansionPanels, VExpansionPanel } from 'vuetify/components'
-import type { StoryObj } from '@storybook/vue3'
-import { ecoDesignItems } from '@/stories/EcoConception/ecoDesignItems'
-
-export default {
-	title: 'Éco-conception/Introduction',
-}
-
-export const EcoPanel: StoryObj = {
-	render: () => {
-		return {
-			components: { VExpansionPanels, VExpansionPanel },
-			setup() {
-				return { ecoDesignItems }
-			},
-			template: `
-				<v-expansion-panels>
-					<v-expansion-panel
-						v-for="(item, index) in ecoDesignItems"
-						:key="index"
-						:text="item.description"
-						:title="item.title"
-						variant="accordion"
-					></v-expansion-panel>
-				</v-expansion-panels>
-			`,
-		}
-	},
-	tags: ['!dev'],
-}