@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/components/UserMenuBtn/UserMenuBtn.stories.ts

@@ -0,0 +1,438 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import UserMenuBtn from './UserMenuBtn.vue'
+
+const meta = {
+	title: 'Composants/Boutons/UserMenuBtn',
+	component: UserMenuBtn,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['modelValue', 'label', 'icon', 'logoutIcon'] },
+	},
+	argTypes: {
+		hideLogoutBtn: { control: 'boolean' },
+		hideUserIcon: { control: 'boolean' },
+		isMobileView: { control: 'boolean' },
+		fullName: { control: 'text' },
+		additionalInformation: { control: 'text' },
+	},
+} satisfies Meta<typeof UserMenuBtn>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+</script>`,
+			},
+		],
+	},
+	args: {
+		menuItems: [
+			{ text: 'Administration', value: 'Administration' },
+			{ text: 'Profil', value: 'Profil' },
+			{ text: 'Paramètres', value: 'Paramètres' },
+		],
+		modelValue: null,
+		hideLogoutBtn: false,
+		hideUserIcon: false,
+		isMobileView: false,
+		vuetifyOptions: undefined,
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+export const HideLogoutButton: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+  :hide-logout-btn="hideLogOut"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const hideLogOut = ref(true)
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		hideLogoutBtn: true,
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
+export const HideUserIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+  :hide-user-icon="hideUserIcon"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const hideUserIcon = ref(true)
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		hideUserIcon: true,
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
+export const MobileVersion: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+  :is-mobile-view="isMobileVersion"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const isMobileVersion = ref(true)
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		isMobileView: true,
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
+export const CustomFullName: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+  :fullName="fullName"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const fullName = ref('John Doe')
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		fullName: 'John Doe',
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
+export const CustomAdditionalInformation: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+  :additionalInformation="additionalInformation"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const additionalInformation = ref('Custom Information')
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		additionalInformation: 'Custom Information',
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
+export const WithVuetifyOptions: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+  :vuetify-options="vuetifyOptions"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const handleLogout = () => {
+  alert('User logged out')
+ }
+
+ const vuetifyOptions = ref({
+  menu: { minWidth: '250px' },
+  btn: { variant: 'outlined' },
+  icon: { color: 'warning' },
+  logoutListItem: { class: 'text-warning' },
+  logoutIcon: { color: 'warning' },
+ })
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+		vuetifyOptions: {
+			menu: { minWidth: '250px' },
+			btn: { variant: 'outlined' },
+			icon: { color: 'warning' },
+			logoutListItem: { class: 'text-warning' },
+			logoutIcon: { color: 'warning' },
+		},
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args"/>
+</div>`,
+		}
+	},
+}
+
+export const LogoutEvent: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+ <UserMenuBtn
+  v-model="selected"
+  :menuItems="menuItems"
+  @logout="handleLogout"
+/>
+</template>`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+ import { ref } from 'vue'
+ import UserMenuBtn from '@cnamts/synapse'
+
+ const selected = ref(null)
+ const menuItems = ref([
+  { text: 'Administration', value: 'Administration' },
+  { text: 'Profil', value: 'Profil' },
+  { text: 'Paramètres', value: 'Paramètres' },
+ ])
+
+ const handleLogout = () => {
+  alert('Logout event triggered')
+ }
+</script>`,
+			},
+		],
+	},
+	args: {
+		...Default.args,
+	},
+	render: (args) => {
+		return {
+			components: { UserMenuBtn },
+			setup() {
+				const handleLogout = () => {
+					alert('Logout event triggered')
+				}
+				return { args, handleLogout }
+			},
+			template: `
+<div class="pa-4">
+	<UserMenuBtn v-bind="args" @logout="handleLogout"/>
+</div>`,
+		}
+	},
+}

package/src/components/UserMenuBtn/UserMenuBtn.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+	import { defineProps, defineEmits, withDefaults, computed } from 'vue'
+	import SyBtnSelect from '../Customs/SyBtnSelect/SyBtnSelect.vue'
+	import { useDisplay } from 'vuetify'
+	import { mdiAccount, mdiLoginVariant } from '@mdi/js'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { defaultOptions } from './config'
+
+	const props = withDefaults(defineProps<CustomizableOptions & {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		modelValue: string | Record<string, any> | null | undefined
+		menuItems?: { text: string, value: string }[]
+		additionalInformation?: string
+		fullName?: string
+		hideLogoutBtn?: boolean
+		logoutIcon?: string
+		isMobileView?: boolean
+		hideUserIcon?: boolean
+	}>(), {
+		modelValue: null,
+		menuItems: () => [],
+		additionalInformation: 'Information supplémentaire',
+		fullName: 'Prénom Nom',
+		hideLogoutBtn: false,
+		logoutIcon: 'mdiLoginVariant',
+		isMobileView: false,
+		hideUserIcon: false,
+	})
+
+	const emit = defineEmits(['update:modelValue', 'logout'])
+	const { smAndDown } = useDisplay()
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	const options = useCustomizableOptions(defaultOptions, props) as any
+
+	const isMobileView = computed(() => {
+		return props.isMobileView || smAndDown.value
+	})
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	function updateModelValue(value: any) {
+		emit('update:modelValue', value)
+	}
+</script>
+
+<template>
+	<SyBtnSelect
+		:is-mobile-view="isMobileView"
+		:icon-only="isMobileView"
+		:menu-items="menuItems"
+		:model-value="props.modelValue ?? undefined"
+		:options="options"
+		:primary-info="fullName"
+		:secondary-info="additionalInformation"
+		:hide-icon="hideUserIcon"
+		class="user-menu-btn"
+		@update:model-value="updateModelValue"
+	>
+		<template #append-icon>
+			<VIcon
+				v-if="!hideUserIcon"
+				:size="isMobileView ? 'x-large' : 'default'"
+				class="vd-user-icon mr-0 pa-2"
+				v-bind="options['icon']"
+			>
+				{{ mdiAccount }}
+			</VIcon>
+		</template>
+		<template #footer-list-item>
+			<VListItem
+				v-if="!hideLogoutBtn"
+				class="logout"
+				v-bind="options['logoutListItem']"
+				@click="$emit('logout')"
+			>
+				<div class="d-flex">
+					<VIcon
+						:icon="mdiLoginVariant"
+						class="mr-4"
+						v-bind="options['logoutIcon']"
+					/>
+					<VListItemTitle>
+						Logout
+					</VListItemTitle>
+				</div>
+			</VListItem>
+		</template>
+	</SyBtnSelect>
+</template>
+
+<style scoped>
+@use '@/assets/tokens.scss';
+.vd-user-icon {
+  width: 40px;
+  height: 40px;
+  background: tokens.$grey-lighten-90;
+  border-radius: 50%;
+
+  svg,
+  .v-icon__svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+</style>

package/src/components/UserMenuBtn/config.ts

@@ -0,0 +1,24 @@
+export const defaultOptions = {
+	menu: {
+		offsetY: true,
+		zIndex: 4,
+		minWidth: '198px',
+		maxWidth: 'auto',
+		nudgeRight: 0,
+	},
+	btn: {
+		variant: 'text',
+		height: 'auto',
+	},
+	icon: {
+		color: 'avatar',
+	},
+	logoutListItem: {
+		class: 'text-primary',
+		minWidth: '198px',
+	},
+	logoutIcon: {
+		color: 'primary',
+		class: 'mr-4',
+	},
+}

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

@@ -0,0 +1,125 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import UserMenuBtn from '../UserMenuBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+import { nextTick } from 'vue'
+
+describe('UserMenuBtn', () => {
+	it('renders the component', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+				additionalInformation: 'Additional Info',
+				fullName: 'John Doe',
+				hideLogoutBtn: false,
+				isMobileView: false,
+				hideUserIcon: false,
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('displays the full name', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				fullName: 'John Doe',
+			},
+		})
+		expect(wrapper.text()).toContain('John Doe')
+	})
+
+	it('does not render logout button when hidden', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideLogoutBtn: true,
+			},
+		})
+		expect(wrapper.find('.logout').exists()).toBe(false)
+	})
+
+	it('renders user icon when not hidden', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideUserIcon: false,
+			},
+		})
+		expect(wrapper.find('.vd-user-icon').exists()).toBe(true)
+	})
+
+	it('does not render user icon when hidden', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				hideUserIcon: true,
+			},
+		})
+		expect(wrapper.find('.vd-user-icon').exists()).toBe(false)
+	})
+
+	it('emits "update:modelValue" when selected changes', async () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+			},
+		})
+		wrapper.vm.$emit('update:modelValue', 'item1')
+		await nextTick()
+		const emitted = wrapper.emitted('update:modelValue')
+		expect(emitted).toBeTruthy()
+		if (emitted && emitted[0]) {
+			expect(emitted[0]).toEqual(['item1'])
+		}
+	})
+
+	it('computes mobile view correctly based on props and display', () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				isMobileView: true,
+			},
+		})
+		expect(wrapper.vm.isMobileView).toBe(true)
+	})
+	it('emits "update:modelValue" when updateModelValue is called via event', async () => {
+		const wrapper = mount(UserMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: null,
+				menuItems: [{ text: 'Item 1', value: 'item1' }],
+			},
+		})
+
+		const SyBtnSelect = wrapper.findComponent({ name: 'SyBtnSelect' })
+		await SyBtnSelect.vm.$emit('update:model-value', 'test-value')
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['test-value'])
+	})
+})