@cnamts/synapse 0.0.7-alpha → 0.0.8-alpha

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/vue3'
 import NotificationBar from './NotificationBar.vue'
 import { VBtn } from 'vuetify/components'
-import { ref, toRefs, watch } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useNotificationService } from '@/services/NotificationService'
 import type { Notification } from '@/components/NotificationBar/types'
 
@@ -9,7 +9,7 @@ interface StoryArgs {
 	closeBtnText: string
 	type: Notification['type']
 	bottom: boolean
-	rounded: string
+	rounded: string | number | boolean
 }
 
 const meta: Meta<typeof NotificationBar> = {
@@ -17,10 +17,42 @@ const meta: Meta<typeof NotificationBar> = {
 	parameters: {
 		layout: 'fullscreen',
 	},
+	component: NotificationBar,
 	argTypes: {
-		closeBtnText: { control: 'text', type: 'string' },
-		bottom: { control: 'boolean', type: 'boolean' },
-		rounded: { control: 'text', type: 'string' },
+		closeBtnText: {
+			control: 'text',
+			table: {
+				type: {
+					summary: 'string',
+				},
+				defaultValue: {
+					summary: 'Fermer',
+				},
+			},
+		},
+		bottom: {
+			control: 'boolean',
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+				defaultValue: {
+					summary: 'false',
+				},
+			},
+		},
+		rounded: {
+			control: 'select',
+			options: [0, 1, 2, 3, 4, 'xs', 'sm', true, 'lg', 'xl', 'pill', 'circle', 'shaped'],
+			table: {
+				type: {
+					summary: '0, 1, 2, 3, 4, \'xs\', \'sm\', true, \'lg\', \'xl\', \'pill\', \'circle\', \'shaped\'',
+				},
+				defaultValue: {
+					summary: '4',
+				},
+			},
+		},
 	},
 }
 
@@ -28,339 +60,403 @@ 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)
+export const Default: Story = (args) => {
+	return {
+		components: { NotificationBar, VBtn },
+		setup() {
+			const { addNotification } = useNotificationService()
+			const showNotification = ref(false)
+			const { type, closeBtnText, bottom, rounded } = toRefs(args)
 
-		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,
+			const envoyerNotification = (message: string) => {
+				const notification: Notification = {
+					id: Date.now().toString(),
+					message,
+					type: type.value,
+					timeout: -1,
+				}
+				addNotification(notification)
+				showNotification.value = true
 			}
-			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,
+			return {
+				showNotification,
+				type,
+				closeBtnText,
+				bottom,
+				rounded,
+				envoyerNotification,
 			}
-			addNotification(notification)
-			showNotification.value = true
-		}
+		},
+		template: `
+          <div class="d-flex flex-wrap align-center justify-center">
+            <NotificationBar
+                v-model="showNotification"
+                :close-btn-text="closeBtnText"
+                :bottom="bottom"
+                :rounded="rounded"
+                :type="type"
+            >
+              <template #default>This is a {{ type }} notification</template>
+            </NotificationBar>
+            <VBtn
+                color="primary"
+                @click="envoyerNotification('This is a ' + type + ' notification')"
+                class="ma-6"
+            >
+              Afficher la notification
+            </VBtn>
+          </div>
+        `,
+	}
+}
 
-		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',
+Default.args = {
 	closeBtnText: 'Fermer',
+	type: 'info',
+	bottom: false,
+	rounded: 'rounded',
 }
 
-export const WithTimeout: Story = args => ({
-	components: { NotificationBar, VBtn },
-	setup() {
-		const { addNotification } = useNotificationService()
-		const showNotification = ref(false)
+Default.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="bottom"
+					:rounded="rounded"
+					:type="type"
+				>
+					<template #default>This is a {{ type }} notification</template>
+				</NotificationBar>
+				<VBtn
+					color="primary"
+					@click="envoyerNotification('This is a ' + type + ' notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@/services/NotificationService'
 
-		// 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 { addNotification } = useNotificationService()
+				const showNotification = ref(false)
 
-		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',
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'info',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
 }
 
-export const WithLongText: Story = args => ({
-	components: { NotificationBar, VBtn },
-	setup() {
-		const { addNotification } = useNotificationService()
-		const showNotification = ref(false)
+export const Success: Story = Default.bind({})
+Success.args = {
+	...Default.args,
+	type: 'success',
+}
+Success.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="bottom"
+					:rounded="rounded"
+					type="success"
+				>
+					<template #default>This is a success notification</template>
+				</NotificationBar>
+				<VBtn
+					color="success"
+					@click="envoyerNotification('This is a success notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@/services/NotificationService'
 
-		// Ajouter une valeur par défaut pour `type`
-		const typeRef = ref(args.type || 'info')
-		const { closeBtnText } = toRefs(args)
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
 
-		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',
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'success',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
 }
 
-export const forMobile: Story = args => ({
-	components: { NotificationBar, VBtn },
-	setup() {
-		const { addNotification } = useNotificationService()
-		const showNotification = ref(false)
+export const Warning: Story = Default.bind({})
+Warning.args = {
+	...Default.args,
+	type: 'warning',
+}
+Warning.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="bottom"
+					:rounded="rounded"
+					type="warning"
+				>
+					<template #default>This is a warning notification</template>
+				</NotificationBar>
+				<VBtn
+					color="warning"
+					@click="envoyerNotification('This is a warning notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@/services/NotificationService'
 
-		const typeRef = ref(args.type || 'info')
-		const { closeBtnText } = toRefs(args)
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
 
-		const envoyerNotification = (message: string) => {
-			const notification: Notification = {
-				id: Date.now().toString(),
-				message,
-				type: typeRef.value,
-				timeout: -1,
-			}
-			addNotification(notification)
-			showNotification.value = true
-		}
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'warning',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
+}
 
-		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',
+export const Error: Story = Default.bind({})
+Error.args = {
+	...Default.args,
+	type: 'error',
 }
-forMobile.parameters = {
-	viewport: {
-		defaultViewport: 'mobile2',
-	},
+Error.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="bottom"
+					:rounded="rounded"
+					type="error"
+				>
+					<template #default>This is an error notification</template>
+				</NotificationBar>
+				<VBtn
+					color="error"
+					@click="envoyerNotification('This is an error notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@/services/NotificationService'
+
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
+
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'error',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
 }
 
-export const forMobileWithLongText: Story = args => ({
-	components: { NotificationBar, VBtn },
-	setup() {
-		const { addNotification } = useNotificationService()
-		const showNotification = ref(false)
+export const Bottom: Story = Default.bind({})
+Bottom.args = {
+	...Default.args,
+	bottom: true,
+}
+Bottom.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					:close-btn-text="closeBtnText"
+					:bottom="true"
+					:rounded="rounded"
+					:type="type"
+				>
+					<template #default>This is a bottom-positioned notification</template>
+				</NotificationBar>
+				<VBtn
+					color="primary"
+					@click="envoyerNotification('This is a bottom-positioned notification')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@/services/NotificationService'
 
-		const typeRef = ref(args.type || 'info')
-		const { closeBtnText } = toRefs(args)
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
 
-		const envoyerNotification = (message: string) => {
-			const notification: Notification = {
-				id: Date.now().toString(),
-				message,
-				type: typeRef.value,
-				timeout: -1,
-			}
-			addNotification(notification)
-			showNotification.value = true
-		}
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'info',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
+}
 
-		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',
+export const CustomCloseBtnText: Story = Default.bind({})
+CustomCloseBtnText.args = {
+	...Default.args,
+	closeBtnText: 'Masquer',
 }
-forMobileWithLongText.parameters = {
-	viewport: {
-		defaultViewport: 'mobile2',
-	},
+CustomCloseBtnText.parameters = {
+	sourceCode: [
+		{
+			name: 'Template',
+			code: `
+			<div class="d-flex flex-wrap align-center justify-center">
+				<NotificationBar
+					v-model="showNotification"
+					close-btn-text="Masquer"
+					:bottom="bottom"
+					:rounded="rounded"
+					:type="type"
+				>
+					<template #default>This is a notification with custom close button text</template>
+				</NotificationBar>
+				<VBtn
+					color="primary"
+					@click="envoyerNotification('This is a notification with custom close button text')"
+					class="ma-6"
+				>
+					Afficher la notification
+				</VBtn>
+			</div>
+			`,
+		},
+		{
+			name: 'Script',
+			code: `
+			<script setup lang="ts">
+				import { VBtn } from 'vuetify/components'
+				import { NotificationBar } from '@cnamts/synapse'
+				import { ref } from 'vue'
+				import { useNotificationService } from '@/services/NotificationService'
+
+				const { addNotification } = useNotificationService()
+				const showNotification = ref(false)
+
+				const envoyerNotification = (message: string) => {
+					const notification = {
+						id: Date.now().toString(),
+						message,
+						type: 'info',
+						timeout: -1,
+					}
+					addNotification(notification)
+					showNotification.value = true
+				}
+			</script>
+			`,
+		},
+	],
 }