@cnamts/synapse 0.0.0-alpha.0

package/src/components/Alert/Alert.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { VAlert, VIcon, VBtn } from 'vuetify/components'
+	import { locales } from './locales'
+	import {
+		mdiAlertOutline,
+		mdiAlertOctagonOutline,
+		mdiCheckCircleOutline,
+		mdiInformationOutline,
+		mdiClose,
+	} from '@mdi/js'
+
+	const show = defineModel<boolean>({
+		default: true,
+	})
+
+	const props = withDefaults(defineProps<{
+		type?: 'success' | 'info' | 'warning' | 'error'
+		closable?: boolean
+		variant?: 'tonal' | 'outlined'
+	}>(), {
+		type: 'info',
+		closable: false,
+		variant: 'tonal',
+	})
+
+	const prependIcon = computed(() => {
+		return {
+			info: mdiInformationOutline,
+			success: mdiCheckCircleOutline,
+			warning: mdiAlertOutline,
+			error: mdiAlertOctagonOutline,
+		}[props.type]
+	})
+
+	function dismissAlert() {
+		show.value = false
+	}
+
+	defineExpose({
+		prependIcon,
+		dismissAlert,
+	})
+</script>
+
+<template>
+	<VAlert
+		v-model="show"
+		:type
+		:closable
+		:variant
+		:class="`alert alert--${type}`"
+		:color="type"
+		:border="variant === 'tonal' ? 'start' : false"
+	>
+		<template #prepend>
+			<VIcon
+				class="alert-icon"
+				size="1.5rem"
+			>
+				<slot name="icon">
+					{{ prependIcon }}
+				</slot>
+			</VIcon>
+		</template>
+
+		<template #default>
+			<slot />
+		</template>
+
+		<template
+			v-if="closable"
+			#close
+		>
+			<VBtn
+				:color="variant === 'outlined' ? undefined : 'primary'"
+				:ripple="false"
+				variant="text"
+				width="auto"
+				height="100%"
+				class="alert-close-btn"
+				@click="dismissAlert"
+			>
+				<VIcon
+					size="small"
+				>
+					{{ mdiClose }}
+				</VIcon>
+
+				<span>
+					{{ locales.close }}
+				</span>
+			</VBtn>
+		</template>
+	</VAlert>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+
+.alert {
+	padding: tokens.$padding-4;
+}
+
+.alert-icon {
+	border-radius: 50%;
+}
+
+:deep(.v-alert__underlay) {
+	display: none;
+}
+
+:deep(.v-alert__close) {
+	align-self: center;
+}
+
+:deep(.v-btn--variant-text .v-btn__overlay) {
+  background: transparent !important;
+}
+
+.alert-icon :deep(.v-icon__svg) {
+	height: 1.5rem !important;
+}
+
+.alert-close-btn {
+	cursor: pointer;
+	line-height: 0;
+
+	.v-btn__overlay {
+		display: none;
+	}
+}
+
+@media screen and (max-width: 440px) {
+	.alert {
+		display: flex;
+		flex-direction: column;
+		background-color: tokens.$white-base;
+
+		:deep(.v-alert__content) {
+			align-self: flex-start !important;
+			margin-top: tokens.$padding-6;
+		}
+
+		:deep(.v-alert__close) {
+			margin-top: tokens.$padding-4;
+			align-self: flex-end;
+		}
+
+		.v-alert__prepend > .v-icon {
+			background: none !important;
+		}
+	}
+}
+
+@media screen and (min-width: 441px) {
+	.alert{
+		.alert-icon {
+			width: 3.5rem !important;
+			height: 3.5rem !important;
+			display: grid;
+			place-items: center;
+		}
+	}
+}
+
+@mixin redesign($type, $map) {
+	&.alert--#{$type}.v-alert--variant-tonal {
+		background: map-get($map, 'background') !important;
+		color: tokens.$colors-text-base !important;
+		:deep(.v-alert__border) {
+			border-color: map-get($map, 'border') !important;
+			opacity: 1 !important;
+			border-inline-start-width: 4px;
+		}
+	}
+
+	&.alert--#{$type}.v-alert--variant-outlined {
+		background: transparent !important;
+		:deep(.v-alert__border) {
+			border-color: map-get($map, 'border') !important;
+			opacity: 1 !important;
+		}
+	}
+
+	&.alert--#{$type},
+	&.text-#{$type} {
+		.v-alert__prepend > .v-icon {
+			background: map-get($map, 'icon-bg');
+			:deep(svg) {
+				fill: map-get($map, 'accent');
+			}
+		}
+	}
+
+	&.text-#{$type} {
+		color: map-get($map, 'accent') !important;
+		border-color: map-get($map, 'accent') !important;
+	}
+}
+
+.v-alert {
+	@include redesign(
+		'warning',
+		(
+			'background': tokens.$colors-background-warning,
+			'accent': tokens.$colors-border-warning,
+			'border': tokens.$colors-border-warning,
+			'icon':tokens.$colors-icon-warning,
+			'icon-bg': tokens.$colors-background-warning-subdued,
+		)
+	);
+
+	@include redesign(
+		'success',
+		(
+			'background': tokens.$colors-background-success,
+			'accent': tokens.$colors-border-success,
+			'border': tokens.$colors-border-success,
+			'icon':tokens.$colors-icon-success,
+			'icon-bg': tokens.$colors-background-success-subdued,
+		)
+	);
+
+	@include redesign(
+		'error',
+		(
+			'background': tokens.$colors-background-error,
+			'accent': tokens.$colors-border-error,
+			'border': tokens.$colors-border-error,
+			'icon':tokens.$colors-icon-error,
+			'icon-bg': tokens.$colors-background-error-subdued,
+		)
+	);
+
+	@include redesign(
+		'info',
+		(
+			'background': tokens.$colors-background-info,
+			'accent': tokens.$colors-border-info,
+			'border': tokens.$colors-border-info,
+			'icon':tokens.$colors-icon-info,
+			'icon-bg': tokens.$colors-background-info-subdued,
+		)
+	);
+}
+
+</style>

package/src/components/Alert/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	close: 'Fermer',
+}

package/src/components/Alert/tests/Alert.spec.ts

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import Alert from '../Alert.vue'
+import { VBtn } from 'vuetify/components'
+
+describe('Alert', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(Alert, {
+			props: {
+				title: 'title',
+				message: 'message',
+				type: 'success',
+			},
+			slots: {
+				default: 'slot content',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('show and hide correctly when modelValue is updated', async () => {
+		const wrapper = mount(Alert, {
+			props: {
+				title: 'title',
+				message: 'message',
+				type: 'success',
+			},
+			slots: {
+				default: 'slot content',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.text()).toContain('title')
+		expect(wrapper.text()).toContain('slot content')
+
+		await wrapper.setProps({
+			modelValue: false,
+		})
+
+		expect(wrapper.html()).toBeFalsy()
+
+		await wrapper.setProps({
+			modelValue: true,
+		})
+
+		expect(wrapper.text()).toContain('title')
+		expect(wrapper.text()).toContain('slot content')
+	})
+
+	it('hide when the close btn is clicked', async () => {
+		const wrapper = mount(Alert, {
+			props: {
+				title: 'title',
+				message: 'message',
+				type: 'warning',
+				variant: 'outlined',
+				closable: true,
+			},
+			slots: {
+				default: 'slot content',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.html()).not.toBeFalsy()
+
+		const closeBtn = wrapper.findComponent(VBtn)
+
+		await closeBtn.element.click()
+
+		expect(wrapper.html()).toBeFalsy()
+		expect(wrapper.emitted('update:modelValue')![0]![0]).toBe(false)
+	})
+
+	it('prependIcon computed property', async () => {
+		const wrapper = mount(Alert, {
+			props: {
+				title: 'title',
+				message: 'message',
+				type: 'warning',
+				variant: 'outlined',
+				closable: true,
+			},
+			slots: {
+				default: 'slot content',
+			},
+			global: {
+				plugins: [vuetify],
+			},
+		})
+
+		expect(wrapper.vm.prependIcon).toBe('M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16')
+	})
+})

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

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Alert > render correctly 1`] = `
+"<div data-v-284427ba="" class="v-alert v-alert--border v-alert--border-start v-theme--light text-success v-alert--density-default v-alert--variant-tonal alert alert--success" role="alert" message="message">
+  <!----><span class="v-alert__underlay"></span>
+  <div class="v-alert__border"></div>
+  <div class="v-alert__prepend"><i data-v-284427ba="" class="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z mdi v-icon notranslate v-theme--light alert-icon" style="font-size: 1.5rem; height: 1.5rem; width: 1.5rem;" aria-hidden="true"></i></div>
+  <div class="v-alert__content">
+    <div class="v-alert-title">title</div>
+    <!---->slot content
+  </div>
+  <!---->
+  <!---->
+</div>"
+`;

package/src/components/BackBtn/BackBtn.mdx

@@ -0,0 +1,26 @@
+import {Controls, Canvas, Meta, Source, Story} from '@storybook/blocks';
+import * as BackBtnStories from './BackBtn.stories';
+
+<Meta of={BackBtnStories} />
+
+# BackBtn
+
+L’élément `BackBtn` est utilisé pour permettre à l’utilisateur de revenir à la page précédente.
+
+<Story of={BackBtnStories.Info} />
+
+<Canvas of={BackBtnStories.Default}  />
+
+# API
+
+<Controls of={BackBtnStories.Default} />
+
+<Source dark code={`
+<script setup lang="ts">
+import BackBtn from '@/components/BackBtn/BackBtn.vue'
+</script>
+
+<template>
+    <BackBtn/>
+</template>
+`} />

package/src/components/BackBtn/BackBtn.stories.ts

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import BackBtn from './BackBtn.vue'
+import Alert from '../Alert/Alert.vue'
+
+import { VSheet } from 'vuetify/components'
+
+const meta = {
+	title: 'Components/BackBtn',
+	component: BackBtn,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		dark: {
+			control: 'boolean',
+		},
+		hideBackIcon: {
+			control: 'boolean',
+		},
+	},
+} as Meta<typeof BackBtn>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		dark: false,
+	},
+	render: (args) => {
+		return {
+			components: { BackBtn, VSheet },
+			setup() {
+				return { args }
+			},
+			template: `
+				<VSheet
+					v-if="args.dark"
+					color="primary"
+					class="pa-4"
+				>
+				<BackBtn v-bind="args" />
+				</VSheet>
+				<VSheet
+					v-else
+					class="pa-4"
+				>
+					<BackBtn v-bind="args" />
+				</VSheet>
+			`,
+		}
+	},
+}
+
+export const Dark: Story = {
+	args: {
+		dark: true,
+	},
+	render: (args) => {
+		return {
+			components: { BackBtn, VSheet },
+			setup() {
+				return { args }
+			},
+			template: `
+				<VSheet
+					color="primary"
+					class="pa-4"
+				>
+				<BackBtn v-bind="args" />
+				</VSheet>
+			`,
+		}
+	},
+}
+
+export const HideBackIcon: Story = {
+	args: {
+		hideBackIcon: true,
+	},
+	render: (args) => {
+		return {
+			components: { BackBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<VSheet class="pa-4">
+					<BackBtn v-bind="args" />
+				</VSheet>
+			`,
+		}
+	},
+}
+
+export const DarkAndHideBackIcon: Story = {
+	args: {
+		dark: true,
+		hideBackIcon: true,
+	},
+	render: (args) => {
+		return {
+			components: { BackBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<VSheet
+					color="primary"
+					class="pa-4"
+				>
+				<BackBtn v-bind="args" />
+				</VSheet>
+			`,
+		}
+	},
+}
+
+export const Info: Story = {
+	render: (args) => {
+		return {
+			components: { Alert },
+			setup() {
+				return { args }
+			},
+			template: `
+				<Alert v-model="args.modelValue" :type="args.type" :variant="tonal" :closable="false">
+					<template #default>Par défaut, le composant BackBtn n'effectue aucune action, vous devez
+						implémenter une redirection ou une action lors du clic sur le bouton.
+					</template>
+				</Alert>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/components/BackBtn/BackBtn.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+	import { ref, computed } from 'vue'
+	import { VIcon, VBtn } from 'vuetify/components'
+	import { mdiArrowLeft } from '@mdi/js'
+	import { locales } from './locales'
+
+	const props = defineProps<{
+		hideBackIcon?: boolean
+		dark?: boolean
+	}>()
+
+	const backIcon = ref(mdiArrowLeft)
+	const isDark = computed(() => props.dark ?? false)
+	const iconColor = computed(() => isDark.value ? 'white' : 'primary')
+	const buttonVariant = computed(() => isDark.value ? 'outlined' : 'text')
+	const buttonTheme = computed(() => isDark.value ? 'dark' : 'light')
+	const buttonColor = computed(() => isDark.value ? 'white' : 'primary')
+
+	const buttonClasses = computed(() => ({
+		'px-0': !isDark.value,
+		'pr-1': !isDark.value && !props.hideBackIcon,
+	}))
+
+</script>
+
+<template>
+	<VBtn
+		v-bind="$attrs"
+		:variant="buttonVariant"
+		:theme="buttonTheme"
+		:color="buttonColor"
+		:outlined="isDark"
+		:class="['vd-back-btn', 'text-none', buttonClasses]"
+	>
+		<slot name="icon">
+			<VIcon
+				v-if="!props.hideBackIcon"
+				:color="iconColor"
+				:class="{ 'ml-n1': isDark }"
+				class="mr-1"
+			>
+				{{ backIcon }}
+			</VIcon>
+		</slot>
+
+		<slot>
+			{{ locales.label }}
+		</slot>
+	</VBtn>
+</template>
+
+<style lang="scss" scoped>
+// Désactiver l'état de hover sur le thème clair
+.v-btn.v-theme--light:deep() {
+  .v-btn__underlay,
+  .v-btn__overlay {
+    display: none;
+  }
+}
+</style>

package/src/components/BackBtn/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	label: 'Retour',
+}

package/src/components/BackBtn/tests/BackBtn.spec.ts

@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import BackBtn from '../BackBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+import { VIcon, VBtn } from 'vuetify/components'
+
+describe('BackBtn', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(BackBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			component: {
+				VIcon,
+				VBtn,
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('hides back icon when hideBackIcon is true', () => {
+		const wrapper = mount(BackBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			component: {
+				VIcon,
+				VBtn,
+			},
+			props: { hideBackIcon: true },
+		})
+		expect(wrapper.find('VIcon').exists()).toBe(false)
+	})
+
+	it('applies correct button classes based on props', () => {
+		const wrapper = mount(BackBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			component: {
+				VIcon,
+				VBtn,
+			},
+			props: { dark: false, hideBackIcon: false },
+		})
+		expect(wrapper.find('.vd-back-btn').classes()).toContain('pr-1')
+	})
+
+	it('applies correct button classes when dark is true and hideBackIcon is false', () => {
+		const wrapper = mount(BackBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			component: {
+				VIcon,
+				VBtn,
+			},
+			props: { dark: true, hideBackIcon: false },
+		})
+		expect(wrapper.find('.vd-back-btn').classes()).not.toContain('pr-1')
+	})
+	it('returns false when dark prop is not provided', () => {
+		const wrapper = mount(BackBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			component: {
+				VIcon,
+				VBtn,
+			},
+		})
+		expect(wrapper.vm.dark).toBe(false)
+	})
+
+	it('returns true when dark prop is true', () => {
+		const wrapper = mount(BackBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			component: {
+				VIcon,
+				VBtn,
+			},
+			props: { dark: true },
+		})
+		expect(wrapper.vm.dark).toBe(true)
+	})
+
+	it('returns false when dark prop is false', () => {
+		const wrapper = mount(BackBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			component: {
+				VIcon,
+				VBtn,
+			},
+			props: { dark: false },
+		})
+		expect(wrapper.vm.dark).toBe(false)
+	})
+})

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

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BackBtn > render correctly 1`] = `
+"<button data-v-efb74141="" type="button" class="v-btn v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-text vd-back-btn text-none px-0 pr-1" outlined="false"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+  <!----><span class="v-btn__content" data-no-activator=""><i data-v-efb74141="" class="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z mdi v-icon notranslate v-theme--light v-icon--size-default text-primary mr-1" aria-hidden="true"></i>Retour</span>
+  <!---->
+  <!---->
+</button>"
+`;