@cnamts/synapse 0.0.3-alpha → 0.0.5-alpha

package/src/utils/rules/required/tests/rulesMessageHelper.spec.ts

@@ -0,0 +1,22 @@
+import { ruleMessage } from '../ruleMessageHelper'
+import { describe, it, expect } from 'vitest'
+
+describe('ruleMessage', () => {
+	it('returns the correct message for a string error message', () => {
+		const errorMessages = { required: 'This field is required' }
+		const result = ruleMessage(errorMessages, 'required')
+		expect(result).toBe('This field is required')
+	})
+
+	it('returns the correct message for a function error message', () => {
+		const errorMessages = { minLength: (min: number) => `Minimum length is ${min}` }
+		const result = ruleMessage(errorMessages, 'minLength', [5])
+		expect(result).toBe('Minimum length is 5')
+	})
+
+	it('handles multiple arguments for a function error message', () => {
+		const errorMessages = { range: (min: number, max: number) => `Value must be between ${min} and ${max}` }
+		const result = ruleMessage(errorMessages, 'range', [1, 10])
+		expect(result).toBe('Value must be between 1 and 10')
+	})
+})

package/src/utils/rules/types.d.ts

@@ -0,0 +1,15 @@
+export type Value = string | null
+export type ValidationResult = string | boolean
+export type ValidationRule<T = Value> = (value: T) => ValidationResult
+
+export interface ValidationRules {
+	[key: string]: ValidationRule
+}
+
+export type GenericFnOpt<T> = (arg?: T) => string
+export type GenericFn<T> = (arg: T) => string
+
+export interface ErrorMessages<T = string> {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
+	[key: string]: GenericFn<T> | GenericFnOpt<T> | any
+}

package/src/components/Beta/beta.mdx

@@ -1,5 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Components/Beta" />
-
-Folder with Beta components

package/src/components/Customs/CustomInputSelect/CustomInputSelect.mdx

@@ -1,42 +0,0 @@
-import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
-import * as CustomInputSelectStories from "./CustomInputSelect.stories.ts";
-
-<Meta of={CustomInputSelectStories} />
-
-# CustomSelect
-
-Le composant `CustomInputSelect` est utilisé pour proposer une alternative au `v-select` de Vuetify qui ne respecte pas les règles RGAA.
-
-<Canvas of={CustomInputSelectStories.Default} />
-
-<Story of={CustomInputSelectStories.Info} />
-
-# API
-
-<Controls of={CustomInputSelectStories.Default} />
-
-# Exemple d'utilisation
-
-<Source dark code={`
-<script setup lang="ts">
-	import CustomInputSelect from '@/components/Customs/CustomInputSelect/CustomInputSelect.vue'
-	import { ref } from 'vue'
-
-	const value = ref('fr')
-	const items = ['fr', 'en', 'co']
-	const ariaLabel = 'Choix de la langue'
-</script>
-
-<template>
-	<main>
-		<div class="mt-12 ml-12">
-			<CustomInputSelect
-				v-model="value"
-				:items="items"
-				:label="ariaLabel"
-				aria-label="Choix de la langue"
-			/>
-		</div>
-	</main>
-</template>
-`} />

package/src/components/Customs/CustomInputSelect/CustomInputSelect.stories.ts

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import CustomInputSelect from './CustomInputSelect.vue'
-import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
-import { ref } from 'vue'
-import Alert from '../../Alert/Alert.vue'
-
-const meta = {
-	title: 'Components/CustomInputSelect',
-	component: CustomInputSelect,
-	parameters: {
-		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue'] },
-	},
-	argTypes: {
-		selectedValue: { control: 'text' },
-		items: { control: 'object' },
-		errorMessages: { control: 'object' },
-	},
-} as Meta<typeof CustomInputSelect>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-export const Default: Story = {
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
-						v-bind="args"
-					/>
-				</div>
-				<br/><br/><br/><br/>
-			`,
-		}
-	},
-}
-
-export const Outlined: Story = {
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
-						v-bind="args"
-						outlined
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
-export const withError: Story = {
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				const errorMessages = ref([])
-				const triggerError = () => {
-					// @ts-expect-error test error message
-					errorMessages.value = ['This is a test error message']
-				}
-				return { args, errorMessages, triggerError }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
-						v-bind="args"
-						:error-messages="errorMessages"
-					/>
-					<VBtn @click="triggerError">
-						Trigger Error
-					</VBtn>
-				</div>
-			`,
-		}
-	},
-}
-
-export const withCustomKey: Story = {
-	args: {
-		items: [
-			{ customKey: 'Option 1', value: '1' },
-			{ customKey: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomInputSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomInputSelect
-						v-bind="args"
-						outlined
-						text-key="customKey"
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
-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>
-						<b>Format des items :</b>
-						<ul>
-							<li>- Si les items passés en props sont des objets, le composant les utilisera directement.</li>
-							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
-						</ul>
-					</template>
-				</Alert>
-			`,
-		}
-	},
-	tags: ['!dev'],
-}

package/src/components/Customs/CustomSelect/CustomSelect.stories.ts

@@ -1,182 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import CustomSelect from '@/components/Customs/CustomSelect/CustomSelect.vue'
-import { VBtn, VMenu, VList, VListItem, VListItemTitle } from 'vuetify/components'
-import { ref } from 'vue'
-import Alert from '../../Alert/Alert.vue'
-
-const meta = {
-	title: 'Components/CustomSelect',
-	component: CustomSelect,
-	parameters: {
-		layout: 'fullscreen',
-		controls: { exclude: ['selectedValue'] },
-	},
-	argTypes: {
-		selectedValue: { control: 'text' },
-		items: { control: 'object' },
-		errorMessages: { control: 'object' },
-		required: { control: 'boolean' },
-	},
-} as Meta<typeof CustomSelect>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-export const Default: Story = {
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
-						v-bind="args"
-					/>
-				</div>
-				<br/><br/><br/><br/>
-			`,
-		}
-	},
-}
-
-export const Outlined: Story = {
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4" style="z-index: 99999">
-					<CustomSelect
-						v-bind="args"
-						outlined
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
-export const Required: Story = {
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomSelect },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
-						v-bind="args"
-						required
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
-export const withCustomError: Story = {
-	args: {
-		items: [
-			{ text: 'Option 1', value: '1' },
-			{ text: 'Option 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				const errorMessages = ref([])
-				const triggerError = () => {
-					// @ts-expect-error test error message
-					errorMessages.value = ['This is a test error message']
-				}
-				return { args, errorMessages, triggerError }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
-						v-bind="args"
-						:error-messages="errorMessages"
-					/>
-				</div>
-				<div class="d-flex flex-wrap align-center px-4">
-					<VBtn @click="triggerError">
-						Trigger Error
-					</VBtn>
-				</div>
-			`,
-		}
-	},
-}
-
-export const withCustomKey: Story = {
-	args: {
-		items: [
-			{ customKey: 'Choix 1', value: '1' },
-			{ customKey: 'Choix 2', value: '2' },
-		],
-	},
-	render: (args) => {
-		return {
-			components: { CustomSelect, VBtn, VMenu, VList, VListItem, VListItemTitle },
-			setup() {
-				return { args }
-			},
-			template: `
-				<div class="d-flex flex-wrap align-center pa-4">
-					<CustomSelect
-						v-bind="args"
-						outlined
-						text-key="customKey"
-					/>
-				</div>
-			`,
-		}
-	},
-}
-
-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>
-						<b>Format des items :</b>
-						<ul>
-							<li>- Si les items passés en props sont des objets, le composant les utilisera directement.</li>
-							<li>- Si les items sont un tableau de string, le composant les utilisera directement.</li>
-						</ul>
-					</template>
-				</Alert>
-			`,
-		}
-	},
-	tags: ['!dev'],
-}

package/src/components/Customs/CustomSelect/tests/CustomSelect.spec.ts

@@ -1,236 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { expect, describe, it } from 'vitest'
-import CustomSelect from '../CustomSelect.vue'
-import { vuetify } from '@tests/unit/setup'
-
-describe('customSelect.vue', () => {
-	it('renders the component with default props', () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.exists()).toBe(true)
-		expect(wrapper.find('.custom-select').text()).toBe('')
-	})
-
-	it('toggles the menu when clicked', async () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		expect(wrapper.find('.v-list').exists()).toBe(true)
-		await wrapper.find('.custom-select').trigger('click')
-		expect(wrapper.find('.v-list').exists()).toBe(false)
-	})
-
-	it('selects an item when clicked', async () => {
-		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
-			props: { items },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		const firstItem = wrapper.findAll('.v-list-item').at(0)
-		if (firstItem) {
-			await firstItem.trigger('click')
-		}
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
-	})
-
-	it('closes the menu when an item is selected', async () => {
-		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
-			props: { items },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		const firstItem = wrapper.findAll('.v-list-item').at(0)
-		if (firstItem) {
-			await firstItem.trigger('click')
-		}
-		expect(wrapper.find('.v-list').exists()).toBe(false)
-	})
-
-	it('displays the selected item text', async () => {
-		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
-			props: { items, modelValue: { text: 'Option 1', value: '1' } },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		const firstItem = wrapper.findAll('.v-list-item').at(0)
-		if (firstItem) {
-			await firstItem.trigger('click')
-		}
-		expect(wrapper.find('input').element.value).toBe('Option 1')
-	})
-
-	it('closes the menu on escape key press', async () => {
-		const items = [{ text: 'Option 1', value: '1' }, { text: 'Option 2', value: '2' }]
-		const wrapper = mount(CustomSelect, {
-			props: { items },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		await wrapper.find('.v-list').trigger('keydown.esc')
-		expect(wrapper.find('.v-list').exists()).toBe(false)
-	})
-
-	it('renders error messages when provided', () => {
-		const errorMessages = ['Error 1']
-		const wrapper = mount(CustomSelect, {
-			props: { errorMessages },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.find('.v-messages__message').text()).toContain('Error 1')
-	})
-
-	it('does not render error messages when not provided', () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.find('.v-messages__message').exists()).toBe(false)
-	})
-
-	it('does not render the label when not provided', () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.find('.v-label').text()).toBe('')
-	})
-
-	it('returns the correct item text using getItemText', () => {
-		const wrapper = mount(CustomSelect, {
-			props: { textKey: 'text' },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		const item = { text: 'Option 1', value: '1' }
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const instance = wrapper.vm as any
-		expect(instance.getItemText(item)).toBe('Option 1')
-	})
-
-	it('returns default text when selectedItem is null', () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const instance = wrapper.vm as any
-		expect(instance.selectedItemText).toBe('Sélectionnez une option')
-	})
-
-	it('returns the correct text when selectedItem is an object', async () => {
-		const wrapper = mount(CustomSelect, {
-			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const instance = wrapper.vm as any
-		await wrapper.setProps({ modelValue: { text: 'Option 1', value: '1' } })
-		expect(instance.selectedItemText).toBe('Option 1')
-	})
-
-	it('formats items correctly', () => {
-		const items = ['Option 1', 'Option 2']
-		const wrapper = mount(CustomSelect, {
-			props: { items, textKey: 'text', valueKey: 'value' },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const formattedItems = (wrapper.vm as any).formattedItems
-		expect(formattedItems).toEqual([
-			{ text: 'Option 1', value: 'Option 1' },
-			{ text: 'Option 2', value: 'Option 2' },
-		])
-	})
-
-	it('applies the correct button class when outlined is true', () => {
-		const wrapper = mount(CustomSelect, {
-			props: { outlined: true },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.find('.v-field--variant-outlined').exists()).toBe(true)
-	})
-
-	it('does not apply the outlined button class when outlined is false', () => {
-		const wrapper = mount(CustomSelect, {
-			props: { outlined: false },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		expect(wrapper.find('.custom-select').classes()).not.toContain('v-btn--variant-outlined')
-	})
-
-	it('updates selectedItem when v-model changes', async () => {
-		const wrapper = mount(CustomSelect, {
-			props: { modelValue: { text: 'Option 1', value: '1' }, textKey: 'text' },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const instance = wrapper.vm as any
-		expect(instance.selectedItem).toEqual({ text: 'Option 1', value: '1' })
-
-		await wrapper.setProps({ modelValue: { text: 'Option 2', value: '2' } })
-		expect(instance.selectedItem).toEqual({ text: 'Option 2', value: '2' })
-	})
-
-	it('emits update:modelValue when selectedItem changes', async () => {
-		const wrapper = mount(CustomSelect, {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-			props: { modelValue: null as any, textKey: 'text' },
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any -- This is a generic type
-		const instance = wrapper.vm as any
-		instance.selectItem({ text: 'Option 1', value: '1' })
-		await wrapper.vm.$nextTick()
-		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([{ text: 'Option 1', value: '1' }])
-	})
-
-	it('closes the menu when v-click-outside directive is called', async () => {
-		const wrapper = mount(CustomSelect, {
-			global: {
-				plugins: [vuetify],
-			},
-		})
-		await wrapper.find('.custom-select').trigger('click')
-		expect(wrapper.find('.v-list').exists()).toBe(true)
-		await wrapper.find('.custom-select').trigger('mouseleave')
-		await wrapper.find('.custom-select').trigger('click')
-		await wrapper.vm.$nextTick()
-
-		expect(wrapper.find('.v-list').exists()).toBe(false)
-	})
-})

package/src/components/Deprecated/deprecated.mdx

@@ -1,5 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Components/Deprecated" />
-
-Folder with Deprecated components