@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

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

@@ -0,0 +1,403 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CustomTextField from '@/components/Customs/CustomTextField/CustomTextField.vue'
+import { VIcon } from 'vuetify/components'
+import { ref } from 'vue'
+import { mdiAccountBox } from '@mdi/js'
+
+const meta = {
+	title: 'Composants/Formulaires/CustomTextField',
+	component: CustomTextField,
+	parameters: {
+		layout: 'fullscreen',
+		controls: { exclude: ['modelValue', 'appendInnerIconColor'] },
+	},
+	argTypes: {
+		modelValue: { control: 'text' },
+		label: { control: 'text' },
+		prependIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		appendIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		prependInnerIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		appendInnerIcon: {
+			control: 'select',
+			options: ['info', 'success', 'warning', 'error', 'close'],
+		},
+		variantStyle: {
+			control: 'select',
+			options: ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled'],
+		},
+		color: {
+			control: 'select',
+			options: ['primary', 'secondary', 'success', 'error', 'warning'],
+		},
+	},
+} as Meta<typeof CustomTextField>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+export const Default: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomTextField v-model="value" />
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		showDivider: false,
+		variantStyle: 'outlined',
+		color: 'primary',
+		isClearable: true,
+		label: 'Label',
+	},
+	render: (args) => {
+		return {
+			components: { CustomTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomTextField v-bind="args" />
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotPrepend: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomTextField 
+						v-model="value" 
+						prepend-icon="info"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+		prependIcon: 'info',
+	},
+	render: (args) => {
+		return {
+			components: { CustomTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomTextField
+						v-bind="args"
+						:label="args.label"
+						:prepend-icon="args.prependIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotAppend: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomTextField 
+						v-model="value" 
+						append-icon="success"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'champs de text',
+		color: 'primary',
+		appendIcon: 'success',
+	},
+	render: (args) => {
+		return {
+			components: { CustomTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomTextField
+						v-bind="args"
+						:append-icon="args.appendIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotPrependInner: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomTextField 
+						v-model="value" 
+						prepend-inner-icon="info"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+		prependInnerIcon: 'info',
+	},
+	render: (args) => {
+		return {
+			components: { CustomTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomTextField
+						v-bind="args"
+						:prepend-inner-icon="args.prependInnerIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotPrependInnerDivider: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomTextField 
+						v-model="value" 
+						prepend-inner-icon="info"
+						show-divider
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: true,
+		label: 'Label',
+		color: 'primary',
+		prependInnerIcon: 'info',
+	},
+	render: (args) => {
+		return {
+			components: { CustomTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomTextField
+						v-bind="args"
+						:prepend-inner-icon="args.prependInnerIcon"
+						:show-divider="args.showDivider"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotAppendInner: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomTextField 
+						v-model="value" 
+						append-inner-icon="success"
+					/>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomTextField from '@cnamts/synapse'
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+		appendInnerIcon: 'success',
+	},
+	render: (args) => {
+		return {
+			components: { CustomTextField, VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomTextField
+						v-bind="args"
+						:append-inner-icon="args.appendInnerIcon"
+					/>
+				</div>
+			`,
+		}
+	},
+}
+
+export const SlotCustomIcon: Story = {
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<CustomTextField  v-model="value">
+						<template #append-inner>
+							<VIcon>
+								{{ iconName }}
+							</VIcon>
+						</template>
+					</CustomTextField>
+				</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import CustomTextField from '@cnamts/synapse'
+					import { mdiAccountBox } from '@mdi/js'
+					
+					const iconName = mdiAccountBox
+				</script>
+				`,
+			},
+		],
+	},
+	args: {
+		variantStyle: 'outlined',
+		isClearable: true,
+		showDivider: false,
+		label: 'Label',
+		color: 'primary',
+	},
+	render: (args) => {
+		return {
+			components: { CustomTextField, VIcon },
+			setup() {
+				const iconName = ref(mdiAccountBox)
+
+				return { args, iconName }
+			},
+			template: `
+				<div class="d-flex flex-wrap align-center pa-4">
+					<CustomTextField
+						v-bind="args"
+					>
+						<template #append-inner>
+							<VIcon>
+								{{ iconName }}
+							</VIcon>
+						</template>
+					</CustomTextField>
+				</div>
+			`,
+		}
+	},
+}

package/src/components/Customs/CustomTextField/CustomTextField.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import type { IconType, VariantStyle, ColorType } from './types'
+	import {
+		mdiAlertOutline,
+		mdiCheck,
+		mdiInformationOutline,
+		mdiClose,
+		mdiInformation,
+	} from '@mdi/js'
+
+	// only variantStyle need a default value
+	/* eslint-disable vue/require-default-prop */
+	const props = withDefaults(
+		defineProps<{
+			prependIcon?: IconType
+			appendIcon?: IconType
+			prependInnerIcon?: IconType
+			appendInnerIcon?: IconType
+			variantStyle?: VariantStyle
+			color?: ColorType
+			isClearable?: boolean
+			showDivider?: boolean
+			label?: string
+		}>(),
+		{
+			variantStyle: 'outlined', // Remplacez par la valeur par défaut souhaitée
+		},
+	)
+
+	const ICONS: Record<IconType, string> = {
+		info: mdiInformationOutline,
+		success: mdiCheck,
+		warning: mdiAlertOutline,
+		error: mdiInformation,
+		close: mdiClose,
+	}
+
+	const model = ref('')
+
+	const appendInnerIconColor = computed(() => {
+		return props.appendInnerIcon === 'error' || props.appendInnerIcon === 'success'
+			? props.appendInnerIcon
+			: 'black'
+	})
+
+	const dividerProps = {
+		thickness: 2,
+		length: '25px',
+		color: 'primary',
+		opacity: '1',
+	}
+
+	defineExpose({
+		appendInnerIconColor,
+	})
+</script>
+
+<template>
+	<VTextField
+		v-model="model"
+		:variant="props.variantStyle"
+		:color="props.color"
+		:clearable="props.isClearable"
+		:clear-icon="ICONS.close"
+		:aria-label="props.label"
+		:label="props.label"
+	>
+		<template #prepend>
+			<slot name="prepend">
+				<VIcon
+					v-if="props.prependIcon"
+					:icon="ICONS[props.prependIcon]"
+				/>
+			</slot>
+		</template>
+		<template #append>
+			<slot name="append">
+				<VIcon
+					v-if="props.appendIcon"
+					:icon="ICONS[props.appendIcon]"
+				/>
+			</slot>
+		</template>
+		<template #prepend-inner>
+			<slot name="prepend-inner">
+				<VIcon
+					v-if="props.prependInnerIcon"
+					:icon="ICONS[props.prependInnerIcon]"
+				/>
+			</slot>
+			<VDivider
+				v-if="props.showDivider"
+				v-bind="dividerProps"
+				class="mt-4 pa-1"
+				vertical
+			/>
+		</template>
+		<template #append-inner>
+			<slot name="append-inner">
+				<VIcon
+					v-if="props.appendInnerIcon"
+					:icon="ICONS[props.appendInnerIcon]"
+					:class="{ 'error-icon': props.appendInnerIcon === 'error' }"
+					:color="appendInnerIconColor"
+				/>
+			</slot>
+		</template>
+	</VTextField>
+</template>

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

@@ -0,0 +1,93 @@
+import { mount } from '@vue/test-utils'
+import CustomTextField from '../CustomTextField.vue'
+import { expect, describe, it } from 'vitest'
+import { VIcon } from 'vuetify/components'
+import { vuetify } from '@tests/unit/setup'
+
+describe('CustomTextField', () => {
+	const factory = (props = {}, slots = {}) => {
+		return mount(CustomTextField, {
+			props,
+			slots,
+			global: {
+				plugins: [vuetify],
+			},
+		})
+	}
+
+	it('renders correctly with default props', () => {
+		const wrapper = factory()
+		expect(wrapper.exists()).toBe(true)
+		expect(wrapper.findComponent(VIcon).exists()).toBe(false) // No icons by default
+	})
+
+	it('applies the correct variant style', () => {
+		const wrapper = factory({ variantStyle: 'filled' })
+		const textField = wrapper.findComponent({ name: 'VTextField' })
+		expect(textField.props('variant')).toBe('filled')
+	})
+
+	it('renders default slots correctly', () => {
+		const wrapper = factory({}, {
+			prepend: '<div data-testid="prepend-slot">Prepend Slot Content</div>',
+			append: '<div data-testid="append-slot">Append Slot Content</div>',
+		})
+
+		const prependSlot = wrapper.find('[data-testid="prepend-slot"]')
+		const appendSlot = wrapper.find('[data-testid="append-slot"]')
+
+		expect(prependSlot.exists()).toBe(true)
+		expect(prependSlot.text()).toBe('Prepend Slot Content')
+		expect(appendSlot.exists()).toBe(true)
+		expect(appendSlot.text()).toBe('Append Slot Content')
+	})
+
+	it('renders inner slots correctly', () => {
+		const wrapper = factory({}, {
+			'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner Slot Content</div>',
+			'append-inner': '<div data-testid="append-inner-slot">Append Inner Slot Content</div>',
+		})
+
+		const prependInnerSlot = wrapper.find('[data-testid="prepend-inner-slot"]')
+		const appendInnerSlot = wrapper.find('[data-testid="append-inner-slot"]')
+
+		expect(prependInnerSlot.exists()).toBe(true)
+		expect(prependInnerSlot.text()).toBe('Prepend Inner Slot Content')
+		expect(appendInnerSlot.exists()).toBe(true)
+		expect(appendInnerSlot.text()).toBe('Append Inner Slot Content')
+	})
+
+	it('matches snapshot', () => {
+		const wrapper = factory({
+			prependIcon: 'info',
+			appendIcon: 'success',
+			prependInnerIcon: 'warning',
+			appendInnerIcon: 'error',
+			variantStyle: 'filled',
+			isClearable: true,
+			showDivider: true,
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+
+	it('returns error color for appendInnerIcon when value is error', () => {
+		const wrapper = factory({ appendInnerIcon: 'error' })
+		expect(wrapper.vm.appendInnerIconColor).toBe('error')
+	})
+
+	it('returns success color for appendInnerIcon when value is success', () => {
+		const wrapper = factory({ appendInnerIcon: 'success' })
+		expect(wrapper.vm.appendInnerIconColor).toBe('success')
+	})
+
+	it('returns default color for appendInnerIcon when value is info', () => {
+		const wrapper = factory({ appendInnerIcon: 'info' })
+		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	})
+
+	it('returns default color for appendInnerIcon when value is undefined', () => {
+		const wrapper = factory({ appendInnerIcon: undefined })
+		expect(wrapper.vm.appendInnerIconColor).toBe('black')
+	})
+})

package/src/components/Customs/CustomTextField/tests/__snapshots__/CustomTextField.spec.ts.snap

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CustomTextField > matches snapshot 1`] = `
+"<div class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-text-field">
+  <div class="v-input__prepend"><i class="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+    <!---->
+  </div>
+  <div class="v-input__control">
+    <div class="v-field v-field--appended v-field--center-affix v-field--prepended v-field--no-label v-field--variant-filled v-theme--light v-locale--is-ltr">
+      <div class="v-field__overlay"></div>
+      <div class="v-field__loader">
+        <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+          <!---->
+          <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+          <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+          <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+            <div class="v-progress-linear__indeterminate">
+              <div class="v-progress-linear__indeterminate long"></div>
+              <div class="v-progress-linear__indeterminate short"></div>
+            </div>
+          </transition-stub>
+          <!---->
+        </div>
+      </div>
+      <div class="v-field__prepend-inner">
+        <!----><i class="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16 mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+        <hr class="v-divider v-divider--vertical v-theme--light text-primary mt-4 pa-1" style="height: 25px; border-right-width: 2px; --v-border-opacity: 1;" aria-orientation="vertical" role="separator">
+      </div>
+      <div class="v-field__field" data-no-activator="">
+        <!----><label class="v-label v-field-label" for="input-0">
+          <!---->
+          <!---->
+        </label>
+        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" class="v-field__input" value="">
+        <!---->
+      </div>
+      <transition-stub name="expand-x-transition" appear="false" persisted="false" css="true">
+        <div class="v-field__clearable" style="display: none;"><i class="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z mdi v-icon notranslate v-theme--light v-icon--size-default v-icon--clickable" role="button" aria-hidden="false" tabindex="0" aria-label="Clear "></i></div>
+      </transition-stub>
+      <div class="v-field__append-inner"><i class="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z mdi v-icon notranslate v-theme--light v-icon--size-default text-error error-icon" aria-hidden="true"></i>
+        <!---->
+      </div>
+      <div class="v-field__outline">
+        <!---->
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="v-input__append">
+    <!----><i class="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i>
+  </div>
+  <div class="v-input__details">
+    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages" role="alert" aria-live="polite" id="input-0-messages">
+      <!---->
+    </transition-group-stub>
+    <!---->
+  </div>
+</div>"
+`;

package/src/components/Customs/CustomTextField/types.d.ts

@@ -0,0 +1,3 @@
+export type IconType = 'info' | 'success' | 'warning' | 'error' | 'close'
+export type VariantStyle = 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled'
+export type ColorType = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'