@cnamts/synapse 0.0.0-alpha.0

package/src/stories/Guidelines/Introduction.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Guidelines/Introduction" />
+
+Principes de design
+===================
+
+Les principes éthiques de construction de notre Design System.
+
+Être au service des usagers de la santé publique
+------------------------------------------------
+
+En tant que Design System pour l'Assurance Maladie, notre devoir est de **répondre avec efficacité et intelligence aux besoins** de nos différents profils d'utilisateur citoyen.
+
+Nous recommandons pour chaque utilisation de notre Design System de **favoriser l'écoute et l'empathie auprès des utilisateurs finaux** en récoltant dès que le projet le permet un ou plusieurs retours d'expériences. En suivant ce principe, c'est depuis 2017 plus de 20 produits et services numériques qui ont permis d'affiner et de structurer les choix ergonomiques de notre Design System.
+
+Afin d'accompagner les équipes de l'Assurance Maladie, **nous pouvons aider à la mise en place de tests utilisateurs, au passage et à l'analyse des résultats**. En cohérence avec les besoins ou les contraintes des projets, nous vous conseillerons sur la typologie de test à adopter afin de répondre avec performance à vos besoins.
+
+Assurer l'accessibilité pour tous
+---------------------------------
+
+**L'accès aux produits numériques doit être permis à tous**. Pour cela, nous favorisons dans notre démarche de design le respect des [critères d'accessibilité](https://digital-design-system.netlify.app/fondamentaux/accessibilite) définis par le Référentiel Général d'Amélioration de l'Accessibilité.
+
+Nous recommandons pour chaque utilisation de notre Design System de ne pas transformer les composants. La conception des composants vise à respecter quatre indices de performance. **Nos composants et leurs contenus informationnels sont perceptibles (1), manipulables (2), compréhensibles (3) et robustes (4) dans l'usage**. En complément, nous recommandons de proposer de la redondance informationnelle par un ou plusieurs moyens alternatifs lorsqu'une information est complexe à comprendre ou à atteindre sur l'interface.
+
+Afin d'accompagner les équipes de l'Assurance Maladie, **nous pouvons aider à l'élaboration de vos interfaces pour qu'elles respectent les normes d'accessibilité**. Dans le cas où nos composants ne correspondent pas à vos exigences, nous pouvons collaborer avec vous à leurs adaptations.
+
+Rendre évident ce qui est complexe
+----------------------------------
+
+Malgré la complexité des projets, notre Design System doit permettre **la construction d'interfaces fluides et simples d'utilisation** pour assurer aux utilisateurs finaux une bonne expérience numérique.
+
+Nous recommandons pour chaque utilisation de notre Design System de favoriser des **compositions graphiques d'interfaces peu chargées avec des espaces vierges et une hiérarchisation des informations**. Afin de permettre le responsive design, les interfaces doivent être structurées en utilisant des grilles et permettre ainsi l'affichage multi-support. En complément, nous recommandons de favoriser des parcours utilisateurs courts et de les concevoir en respectant pour chaque étape [la théorie de l'action proposée par Don Norman](https://fr.wikipedia.org/wiki/Th%C3%A9orie_de_l%27action_(Norman)).
+
+Afin d'accompagner les équipes de l'Assurance Maladie, nous pouvons aider à structurer les interfaces. En proposant par exemple des ateliers de cadrage participatifs dont l'objectif est de relever auprès de vos besoins et des besoins des utilisateurs finaux les informations pertinentes (insights) à afficher. C'est une étape importante pour l'organisation graphique des interfaces.

package/src/stories/Guidelines/Typo.mdx

@@ -0,0 +1,53 @@
+import { Meta, Typeset } from '@storybook/addon-docs';
+
+<Meta title="Guidelines/Typographie" />
+
+export const typography = {
+    type: {
+        primary: 'Arial',
+    },
+    weight: {
+        regular: '400',
+        bold: '700',
+        extrabold: '800',
+        black: '900',
+    },
+    size: {
+        s1: 12,
+        s2: 14,
+        s3: 16,
+        m1: 18,
+        m2: 20,
+        m3: 24,
+        l1: 28,
+        l2: 30,
+        l3: 32,
+        l4:40,
+    },
+};
+
+export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+
+# Typography
+
+**Font:** Arial
+
+**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
+
+<Typeset
+fontSizes={[
+        Number(typography.size.s1),
+    Number(typography.size.s2),
+Number(typography.size.s3),
+    Number(typography.size.m1),
+    Number(typography.size.m2),
+    Number(typography.size.m3),
+    Number(typography.size.l1),
+    Number(typography.size.l2),
+    Number(typography.size.l3),
+    Number(typography.size.l4),
+]}
+fontWeight={typography.weight.black}
+sampleText={SampleText}
+fontFamily={typography.type.primary}
+/>

package/src/stories/Home/Accueil.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs';
+import synapse from './synapse.webp';
+
+<Meta title="Home/Accueil" />
+
+<img src={synapse} alt="photo de presentation du design system" style={{ maxWidth: '100%' }} />
+

package/src/stories/Home/PolitiqueDeConfidentialite.mdx

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Home/Politique de Confidentialité" />
+# Politique de Confidentialité

package/src/temp/TestA11y.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+	<div>
+		<img
+			src="image.jpg"
+			alt="img"
+		>
+		<button>Click me</button>
+	</div>
+</template>
+
+<style lang="scss" scoped></style>

package/src/temp/TestComponent.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { VBtn } from 'vuetify/components/VBtn'
+
+	const props = withDefaults(defineProps<{
+		prop1?: string
+		number1: number
+		number2: number
+	}>(), {
+
+		prop1: 'default value',
+	})
+
+	defineEmits([
+		'click',
+	])
+
+	const value = defineModel< string >()
+	const result = computed(() => {
+		return props.number1 + props.number2
+	})
+</script>
+
+<template>
+	<div>
+		{{ prop1 }}
+	</div>
+	<v-btn @click="$emit('click', result)">
+		click me
+	</v-btn>
+	<div>
+		Result : {{ result }}
+	</div>
+	<div>{{ value }}</div>
+</template>
+
+<style lang="scss" scoped></style>

package/src/temp/TestDTComponent.vue

@@ -0,0 +1,93 @@
+<template>
+	<v-col
+		cols="2"
+		class="d-flex flex-column ga-3 mx-auto"
+	>
+		<h1 class="text-center">
+			Test Heading
+		</h1>
+		<VBtn color="primary">
+			Primary Button
+		</VBtn>
+		<VBtn color="secondary">
+			Secondary Button
+		</VBtn>
+		<VBtn color="accent">
+			Accent Button
+		</VBtn>
+		<VBtn color="warning">
+			Warning Button
+		</VBtn>
+		<VBtn color="success">
+			Success Button
+		</VBtn>
+		<VBtn color="error">
+			Error Button
+		</VBtn>
+		<VBtn color="info">
+			Info Button
+		</VBtn>
+		<VBtn color="risquePro">
+			RisquePro Button
+		</VBtn>
+		<VBtn color="backgroundAssure">
+			Assure Button
+		</VBtn>
+		<VBtn color="transparentBlue18">
+			TransparentBlue18 Button
+		</VBtn>
+		<VBtn color="transparentBlue8">
+			TransparentBlue8 Button
+		</VBtn>
+		<VBtn color="transparentBlue0">
+			TransparentBlue0 Button
+		</VBtn>
+		<VBtn color="toto">
+			Toto Button
+		</VBtn>
+		<div>
+			<div
+				class="border-xl"
+				style="height: 64px; width: 64px;"
+			>
+				<div class="text-caption">
+					border-xl
+				</div>
+			</div>
+		</div>
+		<div>
+			<v-card-title class="title">
+				Titre
+			</v-card-title>
+			<v-card-title class="alt-title">
+				Titre Alternatif
+			</v-card-title>
+			<v-card-text class="body-text">
+				Ceci est un corps de texte.
+			</v-card-text>
+			<v-btn class="link-label">
+				Lien ou libellé
+			</v-btn>
+		</div>
+	</v-col>
+	<div />
+</template>
+
+<style lang="scss" scoped>
+<<<<<<<< HEAD:src/temp/TestDTComponent.vue
+@import '../assets/tokens';
+========
+@import '../../../assets/tokens';
+>>>>>>>> 82f4bcd (chore(deps): update dependency vue to v3.5.2 (#66)):src/components/Temp/TestDesignTokensComponent/TestDTComponent.vue
+
+h1 {
+  color: $orange-base;
+}
+
+button {
+  background-color: $blue-base;
+  color: $white-base;
+  border-radius: $radius-rounded;
+  //padding: $padding-10 $padding-4;
+}
+</style>

package/src/temp/customizableOptions.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import defaultOptions from './options.json'
+
+	const props = defineProps<CustomizableOptions & {
+		title: string
+	}>()
+
+	const options = useCustomizableOptions(defaultOptions, props)
+</script>
+
+<template>
+	<div>
+		<VBtn v-bind="options.btn">
+			{{ title }}
+		</VBtn>
+	</div>
+</template>

package/src/temp/gridsTests.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+	import { reactive, ref, onMounted } from 'vue'
+	const state = reactive({
+		screenWidth: 0,
+		gridColumns: 1,
+	})
+	const calculateColumns = (width: number) => {
+		state.screenWidth = width
+		if (width >= 1200) {
+			state.gridColumns = 12
+		}
+		else if (width >= 900) {
+			state.gridColumns = 3
+		}
+		else if (width >= 600) {
+			state.gridColumns = 2
+		}
+		else {
+			state.gridColumns = 1
+		}
+	}
+	const targetElement = ref<HTMLElement | null>(null)
+
+	onMounted(() => {
+		targetElement.value = document.body
+		calculateColumns(targetElement.value.clientWidth)
+	})
+</script>
+
+<template>
+	<v-container>
+		<v-col>
+			<div class="bg-blue-accent-4 top-0 text-center">
+				Menu
+			</div>
+			<div class="page-container">
+				<v-col
+					v-for="n in 12"
+					:key="n"
+					class="bg-amber-darken-4"
+				>
+					{{ n }}
+				</v-col>
+			</div>
+			<div class="bg-blue-accent-4 top-0 text-center">
+				Footer
+			</div>
+		</v-col>
+	</v-container>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/tokens';
+</style>

package/src/temp/options.json

@@ -0,0 +1,5 @@
+{
+    "btn": {
+        "color": "primary"
+    }
+}

package/src/types/vuetifyTypes.ts

@@ -0,0 +1,3 @@
+export type VariantType = 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+export type DensityType = 'comfortable' | 'compact'
+export type locationType = 'start' | 'end' | 'top' | 'bottom' | 'start center' | 'end center' | 'top center' | 'bottom center'

package/src/utils/convertToUnit/index.ts

@@ -0,0 +1,16 @@
+/** Convert a value to CSS unit */
+export function convertToUnit(
+	str: string | number | null | undefined,
+	unit = 'px',
+): string | undefined {
+	if (str === undefined || str === null || str === '') {
+		return undefined
+	}
+	else if (isNaN(+str)) {
+		// If NaN, it's a string with unit, use as is
+		return String(str)
+	}
+	else {
+		return `${Number(str)}${unit}`
+	}
+}

package/src/utils/convertToUnit/test/convertToUnit.spec.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import { convertToUnit } from '../'
+
+describe('convertToUnit', () => {
+	it('returns undefined when the value is null', () => {
+		expect(convertToUnit(null)).toBeUndefined()
+	})
+
+	it('returns undefined when the value is undefined', () => {
+		expect(convertToUnit(undefined)).toBeUndefined()
+	})
+
+	it('returns undefined when the value is an empty string', () => {
+		expect(convertToUnit('')).toBeUndefined()
+	})
+
+	it('returns the value when it is a string with unit', () => {
+		expect(convertToUnit('16px')).toBe('16px')
+	})
+
+	it('converts the value when it is a string without unit', () => {
+		expect(convertToUnit('16')).toBe('16px')
+	})
+
+	it('converts the value to a string when it is a number', () => {
+		expect(convertToUnit(16)).toBe('16px')
+	})
+
+	it('converts the value to a string with custom unit when it is a number', () => {
+		expect(convertToUnit(1, 'rem')).toBe('1rem')
+	})
+})

package/src/utils/functions/copyToClipboard/index.ts

@@ -0,0 +1,38 @@
+/** Copy text to the clipboard */
+export function copyToClipboard(textToCopy: string): void {
+	// Use a textarea, so we can use execCommand
+	const el = document.createElement('textarea')
+
+	el.value = textToCopy
+	el.setAttribute('readonly', '')
+	el.style.position = 'absolute'
+	el.style.left = '-9999px'
+
+	document.body.appendChild(el)
+
+	const selection = document.getSelection()
+
+	let selected: Range | false = false
+
+	if (selection) {
+		// Store previous selection (or false) to restore it after
+		selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false
+	}
+
+	el.select()
+
+	if (navigator.clipboard) {
+		navigator.clipboard.writeText(textToCopy)
+	}
+	else {
+		document.execCommand('copy')
+	}
+
+	document.body.removeChild(el)
+
+	// If a selection existed before copying
+	if (selection && selected) {
+		selection.removeAllRanges() // Unselect everything on the HTML document
+		selection.addRange(selected) // Restore the original selection
+	}
+}

package/src/utils/functions/copyToClipboard/tests/copyToClipboard.spec.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { copyToClipboard } from '../'
+
+interface TSelection {
+	rangeCount?: number
+	getRangeAt?: (index: number) => string | null
+	removeAllRanges?: () => null
+	addRange?: () => null
+}
+
+// Custom document type
+interface TDocument {
+	getSelection: () => TSelection | null
+	execCommand: () => boolean
+}
+
+// Override default type
+declare let document: TDocument
+
+/** Mock functions on document */
+function mockDocument(options: TSelection) {
+	document.getSelection = () => {
+		return options
+	}
+
+	document.execCommand = vi.fn()
+}
+
+const txt = 'test'
+
+describe('copyToClipboard', () => {
+	it('copies text to the clipboard', () => {
+		mockDocument({
+			rangeCount: 0,
+			getRangeAt: () => null,
+			removeAllRanges: () => null,
+		})
+
+		const writeTextMock = vi.fn()
+
+		Object.defineProperty(navigator, 'clipboard', {
+			value: {
+				writeText: writeTextMock,
+			},
+			writable: true,
+		})
+
+		copyToClipboard(txt)
+
+		expect(writeTextMock).toHaveBeenCalledWith(txt)
+		expect(document.execCommand).not.toHaveBeenCalled()
+	})
+
+	it('copies text to the clipboard when text is already selected', () => {
+		mockDocument({
+			rangeCount: 2,
+			getRangeAt: (index: number) => ['a', 'b'][index],
+			removeAllRanges: () => null,
+			addRange: () => null,
+		})
+
+		const writeTextMock = vi.fn()
+
+		Object.defineProperty(navigator, 'clipboard', {
+			value: {
+				writeText: writeTextMock,
+			},
+			writable: true,
+		})
+
+		copyToClipboard(txt)
+
+		expect(writeTextMock).toHaveBeenCalledWith(txt)
+		expect(document.execCommand).not.toHaveBeenCalled()
+	})
+
+	it('copies text to the clipboard when text is already selected and navigator.clipboard is unavailable', () => {
+		mockDocument({
+			rangeCount: 2,
+			getRangeAt: (index: number) => ['a', 'b'][index],
+			removeAllRanges: () => null,
+			addRange: () => null,
+		})
+
+		Object.defineProperty(navigator, 'clipboard', {
+			value: null,
+			writable: true,
+		})
+
+		copyToClipboard(txt)
+
+		expect(document.execCommand).toHaveBeenCalledWith('copy')
+	})
+
+	it('does not copies text when getSelection is unavailable', () => {
+		document.getSelection = vi.fn(() => null)
+
+		expect(copyToClipboard(txt)).toBeUndefined()
+	})
+
+	afterEach(() => {
+		vi.clearAllMocks()
+	})
+})

package/src/utils/functions/downloadFile/index.ts

@@ -0,0 +1,37 @@
+import type { BufferSource } from './types'
+
+/** Download a file */
+export function downloadFile(
+	content: BufferSource | Blob | string,
+	filename: string,
+	type: string,
+	utf8Bom = false, // UTF-8 header for Excel files
+): void {
+	/**
+	 * \ufeff = UTF-8 encoding
+	 * @see https://stackoverflow.com/a/18925211
+	 */
+	const blobContent: BlobPart[] = utf8Bom ? ['\ufeff', content] : [content]
+	// https://stackoverflow.com/questions/69552023/after-update-typescript-3-7-2-to-latest-typescript-4-4-4-error-ts2339
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const nav = window.navigator as any
+
+	const blob = new Blob(blobContent, { type })
+
+	if (nav.msSaveOrOpenBlob) {
+		nav.msSaveOrOpenBlob(blob, filename)
+	}
+	else {
+		const link = document.createElement('a')
+
+		link.target = '_blank'
+		link.style.display = 'none'
+		link.rel = 'noopener noreferrer'
+		link.href = window.URL.createObjectURL(blob)
+		link.download = filename
+		document.body.appendChild(link)
+		link.click()
+		document.body.removeChild(link)
+		window.URL.revokeObjectURL(link.href)
+	}
+}

package/src/utils/functions/downloadFile/tests/downloadFile.spec.ts

@@ -0,0 +1,69 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+
+import { downloadFile } from '../'
+
+describe('downloadFile', () => {
+	// https://stackoverflow.com/questions/69552023/after-update-typescript-3-7-2-to-latest-typescript-4-4-4-error-ts2339
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- mock IE navigator
+	const nav = window.navigator as any
+	const mockCreateObjectURL = vi.fn(() => 'mockObjectURL')
+	const mockRevokeObjectURL = vi.fn()
+
+	const file = new File(['test'], 'attestation.txt', {
+		type: 'text/plain',
+	})
+
+	beforeEach(() => {
+		global.URL.createObjectURL = mockCreateObjectURL
+		global.URL.revokeObjectURL = mockRevokeObjectURL
+	})
+	afterEach(() => {
+		vi.resetAllMocks()
+		document.body.innerHTML = ''
+	})
+
+	it('download a file', () => {
+		mockCreateObjectURL.mockReturnValue('http://exemple.com/')
+		downloadFile(file, file.name, file.type)
+		expect(mockCreateObjectURL).toHaveBeenCalledWith(
+			new Blob([file], { type: file.type }),
+		)
+		expect(mockRevokeObjectURL).toHaveBeenCalledWith('http://exemple.com/')
+	})
+
+	it('download a file with utf8Bom', () => {
+		mockCreateObjectURL.mockReturnValue('http://exemple.com/')
+		downloadFile(file, file.name, file.type, true)
+		expect(mockCreateObjectURL).toHaveBeenCalled()
+		expect(mockRevokeObjectURL).toHaveBeenCalledWith('http://exemple.com/')
+	})
+
+	it('download a file with content type BufferSource', () => {
+		const buffer = new ArrayBuffer(8)
+		mockCreateObjectURL.mockReturnValue('http://exemple.com/')
+		downloadFile(buffer, file.name, file.type)
+		expect(mockCreateObjectURL).toHaveBeenCalledWith(
+			new Blob([buffer], { type: file.type }),
+		)
+		expect(mockRevokeObjectURL).toHaveBeenCalledWith('http://exemple.com/')
+	})
+
+	it('download a file with content type String', () => {
+		mockCreateObjectURL.mockReturnValue('http://exemple.com/')
+		downloadFile('test', file.name, file.type)
+		expect(mockCreateObjectURL).toHaveBeenCalledWith(
+			new Blob(['test'], { type: file.type }),
+		)
+		expect(mockRevokeObjectURL).toHaveBeenCalledWith('http://exemple.com/')
+	})
+
+	it('download a file on Internet Explorer', () => {
+		const mockSaveOrOpenBlob = vi.fn()
+		nav.msSaveOrOpenBlob = mockSaveOrOpenBlob
+		downloadFile(file, file.name, file.type)
+		expect(mockSaveOrOpenBlob).toHaveBeenCalledWith(
+			new Blob([file], { type: file.type }),
+			file.name,
+		)
+	})
+})

package/src/utils/functions/downloadFile/types.ts

@@ -0,0 +1 @@
+export type BufferSource = ArrayBufferView | ArrayBuffer