@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/utils/rules/isRequired/IsRequired.stories.ts

@@ -0,0 +1,101 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { isRequired, isRequiredFn } from '.'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/isRequired',
+	component: isRequiredFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				return { isRequired }
+			},
+			template: `
+				<VTextField
+					:rules="[isRequired]"
+					label="Champ requis"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isRequired } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[isRequired]"
+						label="Champ requis"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const isRequiredCustom = isRequiredFn({
+					default: 'This field is required',
+				})
+				return { isRequiredCustom }
+			},
+			template: `
+				<VTextField
+					:rules="[isRequiredCustom]"
+					label="Required"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isRequiredFn } from '@cnamts/synapse'
+
+					const required = isRequiredFn({
+						default: 'This field is required',
+					})
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[required]"
+						label="Required"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

package/src/utils/rules/{required → isRequired}/index.ts

@@ -1,11 +1,11 @@
-import { ruleMessage } from './ruleMessageHelper'
+import { ruleMessage } from '../../ruleMessage'
 import type { ValidationRule, ValidationResult, ErrorMessages } from '../types'
 
 import { defaultErrorMessages } from './locales'
 
 export type Value = string | string[] | null
 
-export function requiredFn(
+export function isRequiredFn(
 	errorMessages: ErrorMessages = defaultErrorMessages,
 ): ValidationRule<Value> {
 	return (value: Value): ValidationResult => {
@@ -22,4 +22,4 @@ export function requiredFn(
 	}
 }
 
-export const required = requiredFn()
+export const isRequired = isRequiredFn()

package/src/utils/rules/{required/tests/index.spec.ts → isRequired/tests/isRequred.spec.ts}

@@ -1,46 +1,46 @@
-import { requiredFn } from '../index'
+import { isRequiredFn } from '../index'
 import { describe, it, expect } from 'vitest'
 
-describe('requiredFn', () => {
+describe('isRequiredFn', () => {
 	it('returns true for non-empty string', () => {
-		const rule = requiredFn()
+		const rule = isRequiredFn()
 		const result = rule('non-empty')
 		expect(result).toBe(true)
 	})
 
 	it('returns false for empty string', () => {
-		const rule = requiredFn()
+		const rule = isRequiredFn()
 		const result = rule('')
 		expect(result).toBe('Le champ est requis.')
 	})
 
 	it('returns true for non-empty array', () => {
-		const rule = requiredFn()
+		const rule = isRequiredFn()
 		const result = rule(['item'])
 		expect(result).toBe(true)
 	})
 
 	it('returns false for empty array', () => {
-		const rule = requiredFn()
+		const rule = isRequiredFn()
 		const result = rule([])
 		expect(result).toBe('Le champ est requis.')
 	})
 
 	it('returns true for non-null value', () => {
-		const rule = requiredFn()
+		const rule = isRequiredFn()
 		const result = rule('value')
 		expect(result).toBe(true)
 	})
 
 	it('returns false for null value', () => {
-		const rule = requiredFn()
+		const rule = isRequiredFn()
 		const result = rule(null)
 		expect(result).toBe('Le champ est requis.')
 	})
 
 	it('returns custom error message for empty string', () => {
 		const customMessages = { default: 'Custom required message' }
-		const rule = requiredFn(customMessages)
+		const rule = isRequiredFn(customMessages)
 		const result = rule('')
 		expect(result).toBe('Custom required message')
 	})

package/src/utils/rules/isValidEmail/IsValidEmail.mdx

@@ -0,0 +1,81 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as IsValidEmailStories from './IsValidEmail.stories';
+
+<Meta of={IsValidEmailStories} />
+
+# Règle de validation `isValidEmail`
+
+La règle de validation `isValidEmail` permet de vérifier si une chaîne de caractère est une adresse email valide.
+
+## Usage
+
+Pour utiliser cette règle de validation, vous devez importer la fonction d'ordre supérieur `isValidEmailFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { isValidEmailFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction pour obtenir la règle de validation.
+
+<Source dark code={`
+const isValidEmail = isValidEmailFn(/* optionals options */);
+`} />
+
+Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isValidEmailFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const isValidEmail = isValidEmailFn();
+</script>
+
+<template>
+	<VTextField
+		:rules="[isValidEmail]"
+		label="Email"
+	/>
+</template>
+
+`} />
+
+Si vous n'utilisez cette règle sans options, vous pouvez faire appel à la fonction `isValidEmail`.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isValidEmail } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+</script>
+
+<template>
+	<VTextField
+		:rules="[isValidEmail]"
+		label="Email"
+	/>
+</template>
+
+`} />
+
+## API
+
+<Source dark code={`
+isValidEmailFn(
+	errorMessages?: {
+		default: string;
+	}
+): (value: string) => true | string;
+`} />
+
+### Arguments
+
+- `errorMessages` : objet optionnel permettant de personnaliser les messages d'erreur. Les clés disponibles sont :
+	- `default` : message d'erreur par défaut.
+
+### Valeurs de retour
+
+Retourne une fonction pouvant être utilisée comme règle de validation pour un champs de formulaire Vuetify.
+
+## Exemples
+
+<Canvas of={IsValidEmailStories.Default} />

package/src/utils/rules/isValidEmail/IsValidEmail.stories.ts

@@ -0,0 +1,101 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { isValidEmail, isValidEmailFn } from './index'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/isValidEmail',
+	component: isValidEmailFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				return { isValidEmail }
+			},
+			template: `
+				<VTextField
+					:rules="[isValidEmail]"
+					label="Email"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isValidEmail } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[isValidEmail]"
+						label="Email"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const email = isValidEmailFn({
+					default: '请输入有效的电子邮件地址。',
+				})
+				return { email }
+			},
+			template: `
+				<VTextField
+					:rules="[email]"
+					label="电子邮件"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isValidEmailFn } from '@cnamts/synapse'
+
+					const email = isValidEmailFn({
+						default: '请输入有效的电子邮件地址。',
+					})
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[email]"
+						label="电子邮件"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

package/src/utils/rules/{email → isValidEmail}/index.ts

@@ -5,13 +5,11 @@ import type {
 	ErrorMessages,
 	Value,
 } from '@/utils/rules/types'
-
-import { isEmailValid } from '../../functions/isEmailValid'
-
 import { defaultErrorMessages } from './locales'
+import { isEmailValid } from '@/utils/functions/validation/isEmailValid'
 
 /** Check that the value is a valid email */
-export function emailFn(
+export function isValidEmailFn(
 	errorMessages: ErrorMessages = defaultErrorMessages,
 ): ValidationRule {
 	return (value: Value): ValidationResult => {
@@ -23,4 +21,4 @@ export function emailFn(
 	}
 }
 
-export const email = emailFn()
+export const isValidEmail = isValidEmailFn()

package/src/utils/rules/{email/tests/email.spec.ts → isValidEmail/tests/isValidEmail.spec.ts}

@@ -1,21 +1,21 @@
-import { email, emailFn } from '../'
+import { isValidEmail, isValidEmailFn } from '..'
 import { describe, it, expect } from 'vitest'
 
 describe('email', () => {
 	it('returns an error when the email is invalid', () => {
-		expect(typeof email('test')).toBe('string')
+		expect(typeof isValidEmail('test')).toBe('string')
 	})
 
 	it('returns true when the email is valid', () => {
-		expect(email('test@example.com')).toBe(true)
+		expect(isValidEmail('test@example.com')).toBe(true)
 	})
 
 	it('returns true if the value is falsy', () => {
-		expect(email('')).toBe(true)
+		expect(isValidEmail('')).toBe(true)
 	})
 
 	it('works with custom error messages', () => {
-		const rule = emailFn({
+		const rule = isValidEmailFn({
 			default: 'test',
 		})
 

package/src/vuetifyConfig.ts

@@ -0,0 +1,61 @@
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+import {
+	cnamColorsTokens,
+	cnamContextualTokens,
+	cnamLightTheme,
+	cnamDarkTheme,
+	paColorsTokens,
+	paContextualTokens,
+	paLightTheme,
+	paDarkTheme,
+} from './designTokens'
+import { createFlattenTheme } from './designTokens/utils'
+import { fr } from 'vuetify/locale'
+
+export const createVuetifyInstance = () => createVuetify({
+	components,
+	directives,
+	locale: {
+		locale: 'fr',
+		messages: { fr },
+	},
+	theme: {
+		defaultTheme: 'cnam',
+		themes: {
+			cnam: {
+				dark: false,
+				colors: {
+					...cnamLightTheme,
+					...cnamDarkTheme,
+				},
+				variables: {
+					'border-color': cnamColorsTokens.grey.base,
+					'font-family': '"Arial", sans-serif',
+					...createFlattenTheme(cnamContextualTokens),
+				},
+			},
+			pa: {
+				dark: false,
+				colors: {
+					...paLightTheme,
+					...paDarkTheme,
+				},
+				variables: {
+					'border-color': paColorsTokens.grey.base,
+					'font-family': '"Roboto", sans-serif',
+					...createFlattenTheme(paContextualTokens),
+				},
+			},
+		},
+	},
+	icons: {
+		defaultSet: 'mdi',
+		aliases,
+		sets: {
+			mdi,
+		},
+	},
+})

package/dist/src/utils/rules/email/index.d.ts

@@ -1,4 +0,0 @@
-import { ValidationRule, ErrorMessages } from '../types';
-/** Check that the value is a valid email */
-export declare function emailFn(errorMessages?: ErrorMessages): ValidationRule;
-export declare const email: ValidationRule;

package/dist/src/utils/rules/exactLength/index.d.ts

@@ -1,4 +0,0 @@
-import { ValidationRule, ErrorMessages } from '../types';
-/** Check that the value does not exceeds the specified length */
-export declare function exactLengthFn(lengthValue: number, ignoreSpaces?: boolean, errorMessages?: ErrorMessages<number>): ValidationRule;
-export declare const exactLength: typeof exactLengthFn;

package/dist/src/utils/rules/required/index.d.ts

@@ -1,4 +0,0 @@
-import { ValidationRule, ErrorMessages } from '../types';
-export type Value = string | string[] | null;
-export declare function requiredFn(errorMessages?: ErrorMessages): ValidationRule<Value>;
-export declare const required: ValidationRule<Value>;

package/dist/src/utils/rules/required/ruleMessageHelper.d.ts

@@ -1,3 +0,0 @@
-import { ErrorMessages } from '../types';
-/** Get the value of an error message */
-export declare function ruleMessage<T>(errorMessages: ErrorMessages<T>, key: string, args?: T[]): string;

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

@@ -1,58 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`SyTextField > matches snapshot 1`] = `
-"<div data-v-8f0b2baf="" class="v-input v-input--horizontal v-input--center-affix v-input--density-default v-theme--light v-locale--is-ltr v-input--error v-text-field error-field">
-  <!---->
-  <div class="v-input__control">
-    <div class="v-field v-field--appended v-field--center-affix v-field--error v-field--prepended v-field--variant-outlined 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 bg-error" style="opacity: NaN;"></div>
-          <div class="v-progress-linear__buffer bg-error" 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 bg-error"></div>
-              <div class="v-progress-linear__indeterminate short bg-error"></div>
-            </div>
-          </transition-stub>
-          <!---->
-        </div>
-      </div>
-      <div class="v-field__prepend-inner">
-        <!---->
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <div class="v-field__field" data-no-activator="">
-        <!----><label class="v-label v-field-label" for="input-0">
-          <!---->custom label
-        </label>
-        <!----><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" aria-label="custom label" display-asterisk="false" no-icon="false" class="v-field__input" value="">
-        <!---->
-      </div>
-      <!---->
-      <div class="v-field__append-inner"><i data-v-8f0b2baf="" 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" aria-hidden="true"></i>
-        <!--v-if-->
-        <!---->
-      </div>
-      <div class="v-field__outline">
-        <div class="v-field__outline__start"></div>
-        <div class="v-field__outline__notch"><label class="v-label v-field-label v-field-label--floating" aria-hidden="true" for="input-0">
-            <!---->custom label
-          </label></div>
-        <div class="v-field__outline__end"></div>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <!---->
-  <div id="input-0-messages" class="v-input__details" role="alert" aria-live="polite">
-    <transition-group-stub name="slide-y-transition" tag="div" appear="false" persisted="false" css="true" class="v-messages">
-      <div class="v-messages__message">Test error message</div>
-    </transition-group-stub>
-    <!---->
-  </div>
-</div>"
-`;

package/src/composables/useFilterable/__snapshots__/useFilterable.spec.ts.snap

@@ -1,3 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`useFilterable > should render correctly 1`] = `"<div modelvalue=""></div>"`;

package/src/utils/functions/isEmailValid/index.ts

@@ -1,8 +0,0 @@
-/** From https://emailregex.com/ */
-// eslint-disable-next-line no-control-regex
-export const EMAIL_REGEXP = /^(?:[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/
-
-/** Check if an email is valid */
-export function isEmailValid(email: string): boolean {
-	return Boolean(EMAIL_REGEXP.exec(email))
-}

package/src/utils/rules/required/ruleMessageHelper.ts

@@ -1,14 +0,0 @@
-import type { ErrorMessages, GenericFnOpt } from '../types'
-
-/** Get the value of an error message */
-export function ruleMessage<T>(
-	errorMessages: ErrorMessages<T>,
-	key: string,
-	args: T[] = [],
-): string {
-	if (typeof errorMessages[key] === 'function') {
-		return (errorMessages[key] as GenericFnOpt<T>)(...args)
-	}
-
-	return errorMessages[key] as string
-}

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

@@ -1,22 +0,0 @@
-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')
-	})
-})