@cnamts/synapse 0.0.7-alpha → 0.0.9-alpha

package/src/components/PasswordField/PasswordField.stories.ts

@@ -0,0 +1,213 @@
+import type { StoryObj, Meta } from '@storybook/vue3'
+import PasswordField from './PasswordField.vue'
+
+const meta = {
+	title: 'Composants/Formulaires/PasswordField',
+	component: PasswordField,
+	decorators: [
+		() => ({
+			template: '<div style="padding: 20px;"><story/></div>',
+		}),
+	],
+	parameters: {
+		layout: 'fullscreen',
+	},
+	argTypes: {
+		modelValue: {
+			description: 'La valeur du modèle pour le champ.',
+			control: 'text',
+			default: null,
+			table: {
+				type: {
+					summary: 'string | null',
+				},
+			},
+		},
+		outlined: {
+			description: 'Définit la variante du champ (outlined ou underlined).',
+			control: 'boolean',
+			default: true,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		required: {
+			description: 'Indique si le champ est requis.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		isValidateOnBlur: {
+			description: 'Active ou non la validation lors du blur.',
+			control: 'boolean',
+			default: true,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
+		customRules: {
+			description: 'Règles de validation personnalisées.',
+			control: 'object',
+			table: {
+				type: {
+					summary: 'array',
+				},
+			},
+		},
+	},
+} satisfies Meta<typeof PasswordField>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Story par défaut
+ */
+export const Default: Story = {
+	args: {
+		modelValue: '',
+		outlined: true,
+		required: false,
+		isValidateOnBlur: true,
+		customRules: [],
+	},
+	render: (args) => {
+		return {
+			components: { PasswordField },
+			setup() {
+				return { args }
+			},
+			template: `
+                <PasswordField v-bind="args" v-model="args.modelValue"/>
+            `,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PasswordField
+    v-model="password"
+    :required="false"
+    :isValidateOnBlur="true"
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PasswordField from '@cnamts/synapse'
+
+const password = ref('')
+</script>
+        `,
+			},
+		],
+	},
+}
+
+/**
+ * Story avec champ requis
+ */
+export const Required: Story = {
+	args: {
+		...Default.args,
+		required: true,
+	},
+	parameters: {
+		...Default.parameters,
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PasswordField
+    v-model="password"
+    :required="true"
+    :isValidateOnBlur="true"
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PasswordField  from '@cnamts/synapse'
+
+const password = ref('')
+</script>
+        `,
+			},
+		],
+	},
+}
+
+export const WithCustomRules: Story = {
+	args: {
+		...Default.args,
+		customRules: [
+			{
+				type: 'minLength',
+				options: {
+					length: 8,
+					message: 'Le mot de passe doit comporter au moins 8 caractères.',
+					successMessage: 'Le mot de passe est suffisamment long.',
+				},
+			},
+		],
+	},
+	parameters: {
+		...Default.parameters,
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+<template>
+  <PasswordField
+    v-model="password"
+    :required="false"
+    :isValidateOnBlur="true"
+    :customRules="[
+      { 
+        type: 'minLength', 
+        options: { 
+          length: 8, 
+          message: 'Le mot de passe doit comporter au moins 8 caractères.', 
+          successMessage: 'Le mot de passe est suffisamment long.' 
+        } 
+      },
+    ]"
+  />
+</template>
+        `,
+			},
+			{
+				name: 'Script',
+				code: `
+<script setup lang="ts">
+import { ref } from 'vue'
+import PasswordField  from '@cnamts/synapse'
+
+const password = ref('')
+</script>
+        `,
+			},
+		],
+	},
+}

package/src/components/PasswordField/PasswordField.vue

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+	import { ref, computed, watch } from 'vue'
+	import { config } from './config'
+	import { locales } from './locales'
+	import { useFieldValidation } from '@/composables/rules/useFieldValidation'
+	import { mdiEye, mdiEyeOff } from '@mdi/js'
+	// import deepMerge from 'deepmerge'
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+
+	type Rule = (value: string | null) => { error?: string, success?: string }
+
+	const props = withDefaults(defineProps<{
+		modelValue?: string | null
+		outlined?: boolean
+		required?: boolean
+		isValidateOnBlur?: boolean
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+		customRules?: any
+	} & CustomizableOptions>(), {
+		modelValue: null,
+		outlined: true,
+		required: false,
+		isValidateOnBlur: true,
+		customRules: [],
+	})
+
+	const options = useCustomizableOptions(config, props)
+	const emit = defineEmits(['update:modelValue', 'submit'])
+
+	const eyeIcon = mdiEye
+	const eyeOffIcon = mdiEyeOff
+	const showEyeIcon = ref(false)
+
+	const btnLabel = computed(() => {
+		return showEyeIcon.value ? locales.hidePassword : locales.showPassword
+	})
+
+	const password = ref<string | null>(props.modelValue)
+	watch(
+		() => props.modelValue,
+		(newVal) => {
+			password.value = newVal
+		},
+	)
+
+	const { generateRules } = useFieldValidation()
+
+	const defaultRules = [
+		...(props.required
+			? [{
+				type: 'required',
+				options: { message: 'Le mot de passe est requis.', fieldIdentifier: 'password' },
+			}]
+			: []),
+	]
+
+	const rules = computed(() => {
+		const baseRules = (props.required ? defaultRules : [])
+		return props.customRules ? generateRules([...baseRules, ...props.customRules]) : generateRules(baseRules)
+	})
+
+	const errors = ref<string[]>([])
+	const successes = ref<string[]>([])
+
+	const isValidating = ref(false)
+
+	watch(() => password.value, () => {
+		validateFields()
+	}, { immediate: true })
+
+	watch(
+		() => props.isValidateOnBlur,
+		() => {
+			validateFields()
+		},
+		{ immediate: true },
+	)
+
+	watch(
+		() => props.required,
+		() => {
+			validateFields()
+		},
+		{ immediate: true },
+	)
+
+	function validateFieldSet(value: string | null, rules: Rule[]) {
+		rules.forEach((rule) => {
+			const { error, success } = rule(value)
+			if (error) errors.value.push(error)
+			if (success && success !== 'Le champ est valide.') successes.value.push(success)
+		})
+	}
+
+	function validateFields(onBlur = false): void {
+		errors.value = []
+		successes.value = []
+
+		const shouldValidate = onBlur || !props.isValidateOnBlur
+
+		if (!shouldValidate) return
+
+		validateFieldSet(password.value, rules.value)
+	}
+
+	function emitChangeEvent(value: string): void {
+		emit('update:modelValue', value)
+		validateFields()
+	}
+
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Enter') {
+			emit('submit')
+		}
+	}
+
+	function validateOnSubmit() {
+		isValidating.value = true
+		validateFields(true)
+		return errors.value.length === 0
+	}
+
+	defineExpose({
+		validateOnSubmit,
+	})
+</script>
+
+<template>
+	<VTextField
+		v-model="password"
+		:class="{
+			'v-messages__message--success': successes.length > 0
+		}"
+		:error-messages="errors"
+		:messages="successes"
+		:type="showEyeIcon ? 'text' : 'password'"
+		:variant="outlined ? 'outlined' : 'underlined'"
+		class="vd-password"
+		color="primary"
+		title="password"
+		validate-on="blur lazy"
+		@blur="validateFields(true)"
+		@keydown="handleKeydown"
+		@update:model-value="emitChangeEvent"
+	>
+		<template #append-inner>
+			<VBtn
+				:aria-label="btnLabel"
+				class="mx-auto"
+				v-bind="options.btn"
+				@click="showEyeIcon = !showEyeIcon"
+			>
+				<VIcon v-bind="options.icon">
+					{{ showEyeIcon ? eyeIcon : eyeOffIcon }}
+				</VIcon>
+			</VBtn>
+		</template>
+	</VTextField>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/tokens';
+
+.vd-password {
+	.v-btn--icon.v-btn--density-default {
+		width: var(--v-btn-height);
+		height: var(--v-btn-height);
+	}
+
+	:deep(.v-field.v-field--variant-underlined .v-field__append-inner) {
+		padding-top: 0;
+		padding-bottom: 0;
+		display: flex;
+		align-items: center;
+	}
+
+	:deep(.v-field.v-field--variant-underlined .v-field__input) {
+		padding-top: calc(var(--v-field-input-padding-top) - 15px);
+	}
+}
+
+.v-messages__message--success {
+	color: tokens.$colors-border-success !important;
+
+	.v-field--active & {
+		color: tokens.$colors-border-success !important;
+	}
+}
+</style>

package/src/components/PasswordField/config.ts

@@ -0,0 +1,11 @@
+import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors'
+
+export const config = {
+	btn: {
+		variant: 'text',
+		icon: true,
+	},
+	icon: {
+		color: cnamColorsTokens.grey.lighten20,
+	},
+} as const

package/src/components/PasswordField/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/PasswordField/locales.ts

@@ -0,0 +1,4 @@
+export const locales = {
+	hidePassword: 'Masquer le mot de passe',
+	showPassword: 'Afficher le mot de passe',
+}

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

@@ -0,0 +1,96 @@
+import { mount } from '@vue/test-utils'
+import PasswordField from '../PasswordField.vue'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createVuetify } from 'vuetify'
+
+// 1. Define an interface for the properties/methods you're testing
+interface PasswordFieldVM {
+	showEyeIcon: boolean
+	errors: string[]
+	isValidating: boolean
+	validateOnSubmit: () => boolean
+}
+
+describe('PasswordField.vue', () => {
+	let vuetify
+
+	beforeEach(() => {
+		vuetify = createVuetify()
+	})
+
+	it('renders the password field', () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		expect(wrapper.exists()).toBe(true)
+	})
+
+	it('toggles password visibility', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		// 2. Cast wrapper.vm as your interface
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+
+		const button = wrapper.find('button')
+		expect(vm.showEyeIcon).toBe(false) // from your interface
+		await button.trigger('click')
+		expect(vm.showEyeIcon).toBe(true)
+		await button.trigger('click')
+		expect(vm.showEyeIcon).toBe(false)
+	})
+
+	it('emits update:modelValue event on input', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+		})
+		const input = wrapper.find('input')
+		await input.setValue('new-password')
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['new-password'])
+	})
+
+	it('validates the password field on blur', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				required: true,
+			},
+		})
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+
+		const input = wrapper.find('input')
+		await input.trigger('blur')
+		expect(vm.errors).toContain('Le mot de passe est requis.')
+	})
+
+	it('validates fields on submit and sets validating flag', async () => {
+		const wrapper = mount(PasswordField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				modelValue: '',
+				outlined: false,
+				required: true,
+			},
+		})
+		const vm = wrapper.vm as unknown as PasswordFieldVM
+
+		const result = vm.validateOnSubmit()
+		expect(vm.isValidating).toBe(true)
+		expect(result).toBe(false)
+
+		// This awaits the Vue microtask queue to let any reactive data settle
+		await wrapper.vm.$nextTick()
+
+		expect(vm.errors).toContain('Le mot de passe est requis.')
+	})
+})

package/src/components/PhoneField/PhoneField.mdx

@@ -41,8 +41,6 @@ const customIndicatifs = ref([
         display-format="code-abbreviation"
         :custom-indicatifs="customIndicatifs"
         :use-custom-indicatifs-only="true"
-        outlined
-        outlined-indicatif
         @change="handleChange"
     />
 </template>