@cnamts/synapse 0.0.0-alpha.0

package/src/components/NotificationBar/NotificationBar.stories.ts

@@ -0,0 +1,366 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+import NotificationBar from './NotificationBar.vue'
+import { VBtn } from 'vuetify/components'
+import { ref, toRefs, watch } from 'vue'
+import { useNotificationService } from '@/services/NotificationService'
+import type { Notification } from '@/components/NotificationBar/types'
+
+interface StoryArgs {
+	closeBtnText: string
+	type: Notification['type']
+	bottom: boolean
+	rounded: string
+}
+
+const meta: Meta<typeof NotificationBar> = {
+	title: 'Components/NotificationBar',
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		closeBtnText: { control: 'text', type: 'string' },
+		bottom: { control: 'boolean', type: 'boolean' },
+		rounded: { control: 'text', type: 'string' },
+	},
+}
+
+export default meta
+
+type Story = StoryFn<StoryArgs>
+
+const Template: Story = args => ({
+	components: { NotificationBar, VBtn },
+	setup() {
+		const { addNotification } = useNotificationService()
+		const showNotification = ref(false)
+		const { closeBtnText, bottom, rounded } = toRefs(args)
+		const typeRef = ref(args.type)
+
+		watch(
+			() => args,
+			(newArgs) => {
+				typeRef.value = newArgs.type
+				closeBtnText.value = newArgs.closeBtnText
+				bottom.value = newArgs.bottom
+				rounded.value = newArgs.rounded
+			},
+			{ deep: true },
+		)
+
+		const envoyerNotification = (message: string) => {
+			const notification: Notification = {
+				id: Date.now().toString(),
+				message,
+				type: typeRef.value,
+				timeout: -1,
+			}
+			addNotification(notification)
+			showNotification.value = true
+		}
+
+		return {
+			showNotification,
+			typeRef,
+			closeBtnText,
+			bottom,
+			rounded,
+			envoyerNotification,
+		}
+	},
+	template: `
+		<div class="d-flex flex-wrap align-center justify-center">
+			<NotificationBar
+				v-model="showNotification"
+				:close-btn-text="closeBtnText"
+				:bottom="bottom"
+				:rounded="rounded"
+			>
+				<template #default>This is a {{ typeRef }} notification</template>
+			</NotificationBar>
+			<VBtn
+				color="primary"
+				@click="envoyerNotification('This is a ' + typeRef + ' notification')"
+				class="ma-6"
+			>
+				Afficher la notification
+			</VBtn>
+		</div>
+	`,
+})
+
+export const Success = Template.bind({})
+Success.args = { type: 'success', closeBtnText: 'Fermer', bottom: false, rounded: 'lg' }
+export const Info = Template.bind({})
+Info.args = { type: 'info', closeBtnText: 'Fermer', bottom: false, rounded: 'lg' }
+export const Warning = Template.bind({})
+Warning.args = { type: 'warning', closeBtnText: 'Fermer', bottom: false, rounded: 'lg' }
+export const Error = Template.bind({})
+Error.args = { type: 'error', closeBtnText: 'Fermer', bottom: false, rounded: 'lg' }
+
+export const WithAction: Story = args => ({
+	components: { NotificationBar, VBtn },
+	setup() {
+		const { addNotification } = useNotificationService()
+		const showNotification = ref(false)
+		const { type: typeRef, closeBtnText } = toRefs(args)
+
+		const envoyerNotification = (message: string) => {
+			const notification: Notification = {
+				id: Date.now().toString(),
+				message,
+				type: typeRef.value,
+				timeout: -1,
+			}
+			addNotification(notification)
+			showNotification.value = true
+		}
+
+		return {
+			showNotification,
+			typeRef,
+			closeBtnText,
+			envoyerNotification,
+		}
+	},
+	template: `
+    <div class="d-flex flex-wrap align-center justify-center">
+      <NotificationBar
+        v-model="showNotification"
+        :close-btn-text="closeBtnText"
+      >
+        <template #default>This is a {{ typeRef }} notification</template>
+        <template #action>
+          <VBtn variant="outlined">Action</VBtn>
+        </template>
+      </NotificationBar>
+      <VBtn
+        color="primary"
+        @click="envoyerNotification('This is a ' + typeRef + ' notification')"
+        class="ma-6"
+      >
+        Afficher la notification
+      </VBtn>
+    </div>
+  `,
+})
+WithAction.args = {
+	type: 'info',
+	closeBtnText: 'Fermer',
+}
+
+export const WithTimeout: Story = args => ({
+	components: { NotificationBar, VBtn },
+	setup() {
+		const { addNotification } = useNotificationService()
+		const showNotification = ref(false)
+
+		// Ajouter une valeur par défaut si `args.type` n'est pas défini
+		const typeRef = ref(args.type || 'info')
+		const { closeBtnText } = toRefs(args)
+
+		const envoyerNotification = (message: string) => {
+			const notification: Notification = {
+				id: Date.now().toString(),
+				message,
+				type: typeRef.value,
+				timeout: 5000, // Timeout de 5 secondes
+			}
+			addNotification(notification)
+			showNotification.value = true
+		}
+
+		return {
+			showNotification,
+			typeRef, // Utilisation de `typeRef`
+			closeBtnText,
+			envoyerNotification,
+		}
+	},
+	template: `
+		<div class="d-flex flex-wrap align-center justify-center">
+			<NotificationBar
+				v-model="showNotification"
+				:close-btn-text="closeBtnText"
+			>
+				<template #default>This is a {{ typeRef }} notification</template>
+			</NotificationBar>
+			<VBtn
+				color="primary"
+				@click="envoyerNotification('This is a ' + typeRef + ' notification')"
+				class="ma-6"
+			>
+				Afficher la notification
+			</VBtn>
+		</div>
+	`,
+})
+WithTimeout.args = {
+	type: 'info', // Valeur par défaut pour `type`
+	closeBtnText: 'Fermer',
+}
+
+export const WithLongText: Story = args => ({
+	components: { NotificationBar, VBtn },
+	setup() {
+		const { addNotification } = useNotificationService()
+		const showNotification = ref(false)
+
+		// Ajouter une valeur par défaut pour `type`
+		const typeRef = ref(args.type || 'info')
+		const { closeBtnText } = toRefs(args)
+
+		const envoyerNotification = (message: string) => {
+			const notification: Notification = {
+				id: Date.now().toString(),
+				message,
+				type: typeRef.value,
+				timeout: -1, // Notification persistante
+			}
+			addNotification(notification)
+			showNotification.value = true
+		}
+
+		return {
+			showNotification,
+			typeRef, // Utilisation de `typeRef`
+			closeBtnText,
+			envoyerNotification,
+		}
+	},
+	template: `
+		<div class="d-flex flex-wrap align-center justify-center">
+			<NotificationBar
+				v-model="showNotification"
+				:close-btn-text="closeBtnText"
+			>
+				<template #default>
+					<div>
+						<p>This is a {{ typeRef }} notification</p>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
+					</div>
+				</template>
+			</NotificationBar>
+			<VBtn
+				color="primary"
+				@click="envoyerNotification('This is a ' + typeRef + ' lorem ipsum dolor sit amet, consectetur adipiscing elit...')"
+				class="ma-6"
+			>
+				Afficher la notification
+			</VBtn>
+		</div>
+	`,
+})
+WithLongText.args = {
+	type: 'info',
+	closeBtnText: 'Fermer',
+}
+
+export const forMobile: Story = args => ({
+	components: { NotificationBar, VBtn },
+	setup() {
+		const { addNotification } = useNotificationService()
+		const showNotification = ref(false)
+
+		const typeRef = ref(args.type || 'info')
+		const { closeBtnText } = toRefs(args)
+
+		const envoyerNotification = (message: string) => {
+			const notification: Notification = {
+				id: Date.now().toString(),
+				message,
+				type: typeRef.value,
+				timeout: -1,
+			}
+			addNotification(notification)
+			showNotification.value = true
+		}
+
+		return {
+			showNotification,
+			typeRef,
+			closeBtnText,
+			envoyerNotification,
+		}
+	},
+	template: `
+		<div class="d-flex flex-wrap align-center justify-center">
+			<NotificationBar
+				v-model="showNotification"
+				:close-btn-text="closeBtnText"
+			>
+				<template #default>This is a {{ typeRef }} notification</template>
+			</NotificationBar>
+			<VBtn
+				color="primary"
+				@click="envoyerNotification('This is a ' + typeRef + ' notification ')"
+				class="ma-6"
+			>
+				Afficher la notification
+			</VBtn>
+		</div>
+	`,
+})
+forMobile.args = {
+	type: 'info',
+	closeBtnText: 'Fermer',
+}
+forMobile.parameters = {
+	viewport: {
+		defaultViewport: 'mobile2',
+	},
+}
+
+export const forMobileWithLongText: Story = args => ({
+	components: { NotificationBar, VBtn },
+	setup() {
+		const { addNotification } = useNotificationService()
+		const showNotification = ref(false)
+
+		const typeRef = ref(args.type || 'info')
+		const { closeBtnText } = toRefs(args)
+
+		const envoyerNotification = (message: string) => {
+			const notification: Notification = {
+				id: Date.now().toString(),
+				message,
+				type: typeRef.value,
+				timeout: -1,
+			}
+			addNotification(notification)
+			showNotification.value = true
+		}
+
+		return {
+			showNotification,
+			typeRef,
+			closeBtnText,
+			envoyerNotification,
+		}
+	},
+	template: `
+		<div class="d-flex flex-wrap align-center justify-center">
+			<NotificationBar
+				v-model="showNotification"
+				:close-btn-text="closeBtnText"
+			>
+				<template #default>This is a {{ typeRef }} notification</template>
+			</NotificationBar>
+			<VBtn
+				color="primary"
+				@click="envoyerNotification('This is a ' + typeRef + ' lorem ipsum dolor sit amet, consectetur adipiscing elit...')"
+				class="ma-6"
+			>
+				Afficher la notification
+			</VBtn>
+		</div>
+	`,
+})
+forMobileWithLongText.args = {
+	type: 'info',
+	closeBtnText: 'Fermer',
+}
+forMobileWithLongText.parameters = {
+	viewport: {
+		defaultViewport: 'mobile2',
+	},
+}

package/src/components/NotificationBar/NotificationBar.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts">
+	import { ref, computed, getCurrentInstance, watch } from 'vue'
+	import { mdiClose, mdiInformationOutline, mdiCheckCircleOutline, mdiAlertCircleOutline, mdiAlertOctagonOutline } from '@mdi/js'
+	import { useDisplay } from 'vuetify'
+	import { useNotificationService } from '@/services/NotificationService'
+	import { type Notification } from './types'
+	import { VSnackbar, VIcon, VBtn } from 'vuetify/components'
+
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import defaultOptions from './options'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		closeBtnText?: string
+		rounded?: 0 | 1 | 2 | 3 | 4 | 'xs' | 'sm' | true | 'lg' | 'xl' | 'pill' | 'circle' | 'shaped'
+		bottom?: true | false
+	}>(), {
+		closeBtnText: 'Fermer',
+		rounded: 4,
+		bottom: false,
+	})
+
+	const options = useCustomizableOptions(defaultOptions, props)
+
+	const display = useDisplay()
+
+	const { notificationQueue, removeNotification } = useNotificationService()
+
+	const instance = getCurrentInstance()
+
+	const currentNotification = ref<Notification>()
+	const isNotificationVisible = ref(false)
+
+	const isProcessingNotifications = ref(false) // Nouvelle variable pour suivre le traitement
+
+	const hasActionSlot = computed(() => !!instance?.slots.action)
+	const isMobileVersion = computed(() => display.name.value === 'xs')
+	const isTabletVersion = computed(() => display.name.value === 'sm')
+	const hasLongContent = computed(() => (currentNotification.value?.message?.length ?? 0) > 50)
+
+	const iconMapping: Record<string, string> = {
+		info: mdiInformationOutline,
+		success: mdiCheckCircleOutline,
+		warning: mdiAlertCircleOutline,
+		error: mdiAlertOctagonOutline,
+	}
+
+	const icon = computed(() => {
+		return currentNotification.value ? iconMapping[currentNotification.value.type] : null
+	})
+
+	const color = computed(() => {
+		if (currentNotification.value) {
+			const typeColor: Record<string, string> = {
+				info: 'info',
+				success: 'success',
+				warning: 'warning',
+				error: 'error',
+			}
+			return typeColor[currentNotification.value.type] || 'info'
+		}
+		return 'info'
+	})
+
+	const contentStyle = computed(() => {
+		if (currentNotification.value) {
+			const isDarkText = currentNotification.value.type === 'success' || currentNotification.value.type === 'warning'
+			return {
+				contentColor: isDarkText ? 'grey-darken-80' : 'white',
+			}
+		}
+		return {
+			contentColor: 'white',
+		}
+	})
+
+	const smallCloseBtn = computed(() => isMobileVersion.value && !hasLongContent.value && !hasActionSlot.value)
+
+	const setNotification = (notification: Notification) => {
+		currentNotification.value = { ...notification }
+	}
+
+	const processNotificationQueue = async () => {
+		isProcessingNotifications.value = true
+
+		while (notificationQueue.value.length > 0) {
+			const nextNotification = notificationQueue.value[0]
+			setNotification(nextNotification)
+			isNotificationVisible.value = true
+
+			let timeout = nextNotification.timeout ?? -1
+
+			if (timeout <= 0) {
+				// Attend que la notification soit fermée manuellement car pas de timeout
+				await new Promise<void>((resolve) => {
+					const stopWatch = watch(isNotificationVisible, (visible) => {
+						if (!visible) {
+							stopWatch()
+							resolve()
+						}
+					})
+				})
+			}
+			else {
+				// Attend la fin du délai du timeout avant de fermer la notification automatiquement
+				await new Promise<void>((resolve) => {
+					const timeoutId = setTimeout(() => {
+						handleClearNotification()
+						resolve()
+					}, timeout)
+
+					const stopWatch = watch(isNotificationVisible, (visible) => {
+						if (!visible) {
+							clearTimeout(timeoutId)
+							stopWatch()
+							resolve()
+						}
+					})
+				})
+			}
+
+			// Retire la notification de la file
+			removeNotification(nextNotification.id)
+		}
+
+		isProcessingNotifications.value = false
+	}
+
+	const handleClearNotification = () => {
+		isNotificationVisible.value = false
+		if (currentNotification.value) {
+			removeNotification(currentNotification.value.id)
+			currentNotification.value = undefined
+		}
+	}
+
+	const openNotification = (notification: Notification) => {
+		setNotification(notification)
+		isNotificationVisible.value = true
+	}
+
+	const showNextNotification = () => {
+		if (notificationQueue.value.length > 0) {
+			const nextNotification = notificationQueue.value[0]
+			setNotification(nextNotification)
+			isNotificationVisible.value = true
+		}
+	}
+
+	watch(
+		() => notificationQueue.value.length,
+		(newLength) => {
+			if (newLength > 0 && !isProcessingNotifications.value) {
+				processNotificationQueue()
+			}
+		},
+	)
+
+	defineExpose({
+		openNotification,
+		handleClearNotification,
+		showNextNotification,
+		processNotificationQueue,
+		currentNotification,
+		isNotificationVisible,
+		hasActionSlot,
+		isMobileVersion,
+		hasLongContent,
+		color,
+		icon,
+		contentStyle,
+		smallCloseBtn,
+		isVertical: computed(() => hasLongContent.value && isMobileVersion.value),
+	})
+
+</script>
+
+<template>
+	<div v-if="currentNotification">
+		<VSnackbar
+			v-bind="options.snackbar"
+			v-model="isNotificationVisible"
+			role="status"
+			:color="color"
+			:location="props.bottom ? 'bottom' : 'top'"
+			:vertical="hasLongContent"
+			:multi-line="hasLongContent"
+			:timeout="currentNotification?.timeout ?? -1"
+			:width="isMobileVersion || isTabletVersion ? 'auto' : '960px'"
+			:rounded="props.rounded"
+			:class="[{ 'long-text': hasLongContent }]"
+		>
+			<div class="d-flex align-center ga-2">
+				<VIcon
+					v-if="!isMobileVersion && icon"
+					v-bind="options.icon"
+					:icon="icon"
+					size="24"
+					aria-hidden="true"
+				/>
+				<p :class="'text-' + contentStyle.contentColor">
+					{{ currentNotification?.message }}
+				</p>
+			</div>
+
+			<template #actions>
+				<div
+					class="d-flex ga-2"
+					style="width:100%"
+					:class="hasLongContent ? 'action-section-longText' : 'action-section-shortText'"
+				>
+					<slot name="action" />
+					<VBtn
+						class="notification-bar__close"
+						:class="{ 'ma-0': smallCloseBtn }"
+						aria-label="Fermer la notification"
+						v-bind="options.btn"
+						@click="handleClearNotification"
+					>
+						<template v-if="!smallCloseBtn">
+							{{ closeBtnText }}
+						</template>
+						<template v-else>
+							<VIcon :icon="mdiClose" />
+						</template>
+					</VBtn>
+				</div>
+			</template>
+		</VSnackbar>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens.scss';
+
+.vd-notification-content {
+  display: flex;
+  align-items: center;
+}
+
+.vd-notification-bar :deep(.v-snack__wrapper) {
+  padding: 16px;
+  min-width: 0;
+  max-width: none;
+}
+
+:deep(.v-snackbar__content) {
+  padding: tokens.$padding-4 !important;
+}
+:deep(.v-snackbar__actions) {
+  margin-inline-end: 10px;
+}
+
+.vd-notification-bar.v-snackbar--vertical :deep() {
+  .v-snackbar--vertical .v-snackbar__wrapper .v-snackbar__actions {
+    width: 100% !important;
+    align-self: auto;
+  }
+  .v-snack__wrapper {
+    align-items: stretch;
+    flex-direction: row;
+  }
+
+  .v-snack__action {
+    align-self: stretch;
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .v-snackbar__content {
+    margin: 0;
+    width: 100%;
+    display: flex;
+  }
+
+  .vd-notification-content {
+    flex-direction: column;
+    display: flex;
+  }
+}
+
+.long-text :deep(.v-snackbar__actions) {
+  width: 98% !important;
+}
+
+.short-text :deep(.v-snackbar__actions) {
+  width: 48% !important;
+}
+
+.action-section-longText {
+  justify-content: space-around;
+}
+
+.action-section-shortText {
+  justify-content: end !important;
+}
+</style>

package/src/components/NotificationBar/options.ts

@@ -0,0 +1,15 @@
+type VariantType = 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'
+
+const defaultOptions = {
+	snackBar: {
+		timeout: -1,
+	},
+	icon: {
+		class: 'mr-2',
+	},
+	btn: {
+		variant: 'text' as VariantType,
+	},
+}
+
+export default defaultOptions