@cnamts/synapse 0.0.4-alpha → 0.0.6-alpha

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

@@ -1,40 +0,0 @@
-import { Canvas, Meta, Controls, Story, Source } from '@storybook/blocks';
-import * as CustomInputSelectStories from "./CustomInputSelect.stories.ts";
-
-<Meta of={CustomInputSelectStories} />
-
-# CustomInputSelect
-
-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 '@cnamts/synapse'
-
-	const items = [
-        { text: 'Option 1', value: '1' },
-        { text: 'Option 2', value: '2' },
-    ],
-</script>
-
-<template>
-	<main>
-		<div class="mt-12 ml-12">
-			<CustomInputSelect
-				v-model="value"
-				:items="items"
-			/>
-		</div>
-	</main>
-</template>
-`} />

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/Customs/CustomTextField/CustomTextField.mdx

@@ -1,44 +0,0 @@
-import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
-import * as CustomTextFieldStories from "./CustomTextField.stories";
-
-<Meta of={CustomTextFieldStories} />
-
-# CustomTextField
-
-Le composant `CustomTextField` est utilisé pour proposer une alternative au `TextField` de Vuetify, conforme au style du design-system et qui  respecte les règles d'accessibilité RGAA.
-
-<Canvas of={CustomTextFieldStories.Default} />
-
-
-# API
-
-<Controls of={CustomTextFieldStories.Default} />
-
-
-# Exemple d'utilisation
-
-<Source
-    dark code={`
-<script setup lang="ts">
-	import { ref } from 'vue'
-	import CustomSelect from '@cnamts/synapse'
-
-	const model = ref('')
-
-</script>
-
-<template>
-	<main class="ma-12">
-		Text saisie: {{ model }}
-		<div class="d-flex flex-wrap align-center">
-        <CustomTextField
-				v-model="model"
-				label="Label"
-				color="primary"
-				is-clearable
-			/>
-		</div>
-	</main>
-</template>
-`}
-/>

package/src/stories/Guidelines/CustomisationEtThemes.mdx

@@ -1,3 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Guidelines/Customisation et thèmes" />

package/src/stories/Guidelines/Typo.mdx

@@ -1,53 +0,0 @@
-import { Meta, Typeset } from '@storybook/addon-docs';
-
-<Meta title="Guidelines/Typographie" />
-
-export const typography = {
-    type: {
-        primary: 'Arial',
-    },
-    weight: {
-        regular: '400',
-        bold: '700',
-        extrabold: '800',
-        black: '900',
-    },
-    size: {
-        s1: 12,
-        s2: 14,
-        s3: 16,
-        m1: 18,
-        m2: 20,
-        m3: 24,
-        l1: 28,
-        l2: 30,
-        l3: 32,
-        l4:40,
-    },
-};
-
-export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-# Typography
-
-**Font:** Arial
-
-**Weights:** 400(regular), 700(bold), 800(extrabold), 900(black)
-
-<Typeset
-fontSizes={[
-        Number(typography.size.s1),
-    Number(typography.size.s2),
-Number(typography.size.s3),
-    Number(typography.size.m1),
-    Number(typography.size.m2),
-    Number(typography.size.m3),
-    Number(typography.size.l1),
-    Number(typography.size.l2),
-    Number(typography.size.l3),
-    Number(typography.size.l4),
-]}
-fontWeight={typography.weight.black}
-sampleText={SampleText}
-fontFamily={typography.type.primary}
-/>