@cnamts/synapse 0.0.12-alpha → 0.0.14-alpha

package/src/utils/rules/doMatchPattern/index.ts

@@ -0,0 +1,28 @@
+import { ruleMessage } from '@/utils/ruleMessage'
+import type {
+	ValidationRule,
+	ValidationResult,
+	ErrorMessages,
+	Value,
+} from '../types'
+
+import { defaultErrorMessages } from './locales'
+
+/** Check that the value match the specified pattern */
+export function doMatchPatternFn(
+	pattern: RegExp,
+	errorMessages: ErrorMessages<number> = defaultErrorMessages,
+): ValidationRule {
+	return (value: Value): ValidationResult => {
+		if (!value) {
+			return true
+		}
+
+		const matches = value.match(pattern)
+
+		return (
+			(matches && matches.length > 0)
+			|| ruleMessage(errorMessages, 'default')
+		)
+	}
+}

package/src/utils/rules/doMatchPattern/locales.ts

@@ -0,0 +1,5 @@
+import type { ErrorMessages } from '../types'
+
+export const defaultErrorMessages: ErrorMessages<number> = {
+	default: 'Le format saisi ne correspond pas au format attendu.',
+}

package/src/utils/rules/doMatchPattern/tests/matchPattern.spec.ts

@@ -0,0 +1,38 @@
+import { doMatchPatternFn } from '..'
+import { describe, it, expect } from 'vitest'
+
+describe('doMatchPatternFn', () => {
+	it('should return true if the value is empty', () => {
+		const rule = doMatchPatternFn(/^[A-Z]+$/)
+
+		expect(rule('')).toBe(true)
+	})
+
+	it('should return true if the value matches the pattern', () => {
+		const rule = doMatchPatternFn(/^[A-Z]+$/)
+
+		expect(rule('ABC')).toBe(true)
+	})
+
+	it('should return an error if the value does not match the pattern', () => {
+		const rule = doMatchPatternFn(/^[A-Z]+$/)
+
+		expect(typeof rule('abc')).toBe('string')
+	})
+
+	it('should return a custom error message if the validation fails', () => {
+		const rule = doMatchPatternFn(/^[A-Z]+$/, {
+			default: 'test',
+		})
+
+		expect(rule('abc')).toBe('test')
+	})
+
+	it('should not return a custom error message if the validation fails', () => {
+		const rule = doMatchPatternFn(/^[A-Z]+$/, {
+			default: 'test',
+		})
+
+		expect(rule('ABC')).toBe(true)
+	})
+})

package/src/utils/rules/index.ts

@@ -0,0 +1,11 @@
+export * from './doMatchPattern/index'
+export * from './isDateValid/index'
+export * from './isExactLength/index'
+export * from './isMaxLength/index'
+export * from './isMinLength/index'
+export * from './isNotAfterDate/index'
+export * from './isNotBeforeDate/index'
+export * from './isNotBeforeToday/index'
+export * from './isNotAfterToday/index'
+export * from './isRequired/index'
+export * from './isValidEmail/index'

package/src/utils/rules/isDateValid/IsDateValid.mdx

@@ -0,0 +1,87 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as IsDateValidStories from './IsDateValid.stories';
+
+<Meta of={IsDateValidStories} />
+
+# Règle de validation `isDateValid`
+
+La règle de validation `isDateValid` permet de vérifier si une chaîne de caractères est une date au format *DD/MM/YYYY*.
+
+## Usage
+
+Pour utiliser cette règle de validation, vous devez importer la fonction d'ordre supérieur `isDateValidFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { isDateValidFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction pour obtenir la règle de validation.
+
+<Source dark code={`
+const isDateValid = isDateValidFn(/* 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 { isDateValidFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const dateValid = isDateValidFn(/* options */);
+
+</script>
+
+<template>
+	<VTextField
+		:rules="[dateValid]"
+		label="Date"
+	/>
+</template>
+`} />
+
+Si vous n'utilisez cette règle sans options, vous pouvez faire appel à la fonction `isDateValid`.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isDateValid } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+</script>
+
+<template>
+	<VTextField
+		:rules="[isDateValid]"
+		label="Date"
+	/>
+</template>
+
+`} />
+
+## API
+
+<Source dark code={`
+isDateValidFn(
+	errorMessages?: {
+		default: string;
+		wrongFormat: string;
+		monthNotMatch: string;
+		notALeapYear: 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.
+	- `wrongFormat` : message d'erreur si le format de la date n'est pas respecté.
+	- `monthNotMatch` : message d'erreur si le mois n'est pas valide.
+	- `notALeapYear` : message d'erreur si l'année n'est pas bissextile.
+
+### Valeurs de retour
+
+Retourne une fonction pouvant être utilisée comme règle de validation pour un champs de formulaire Vuetify.
+
+## Exemples
+
+<Canvas of={IsDateValidStories.Default} />.

package/src/utils/rules/isDateValid/IsDateValid.stories.ts

@@ -0,0 +1,113 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { isDateValid, isDateValidFn } from './index'
+import { ref } from 'vue'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/isDateValid',
+	component: isDateValid,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const date = ref('31/11/1993')
+				return { date, isDateValid }
+			},
+			template: `
+				<VTextField
+					v-model="date"
+					:rules="[isDateValid]"
+					label="Date valide"
+					validate-on="eager blur"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isDateValid } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[isDateValid]"
+						label="Date valide"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const dateValid = isDateValidFn({
+					default: 'The date you entered is invalid',
+					wrongFormat: 'The format you entered is invalid',
+					monthNotMatch: 'The day you entered exceeds the number of days in the corresponding month',
+					notALeapYear: 'The day you entered is invalid because the corresponding year is not a leap year',
+				})
+				return { dateValid }
+			},
+			template: `
+				<VTextField
+					:rules="[dateValid]"
+					label="Date"
+					validate-on="blur"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isDateValidFn } from '@cnamts/synapse'
+					
+					const isDateValidCustom = isDateValid({
+						default: 'The date you entered is invalid',
+						wrongFormat: 'The format you entered is invalid',
+						monthNotMatch: 'The day you entered exceeds the number of days in the corresponding month',
+						notALeapYear: 'The day you entered is invalid because the corresponding year is not a leap year',
+					})
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[isDateValidCustom]"
+						label="Date"
+						validate-on="blur"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

package/src/utils/rules/isDateValid/index.ts

@@ -0,0 +1,32 @@
+import { ruleMessage } from '@/utils/ruleMessage'
+import type {
+	ValidationRule,
+	ValidationResult,
+	ErrorMessages,
+	Value,
+} from '../types'
+
+import { defaultErrorMessages } from './locales'
+
+import { isDateValid as checkIfDateValid } from '@/utils/functions/validation/isDateValid'
+
+/** Check that the value is a valid date (DD/MM/YYYY format) */
+export function isDateValidFn(
+	errorMessages: ErrorMessages = defaultErrorMessages,
+): ValidationRule {
+	return (value: Value): ValidationResult => {
+		if (!value) {
+			return true
+		}
+
+		const validationResult = checkIfDateValid(value)
+		const errorMessage
+			= typeof validationResult === 'string'
+				? ruleMessage(errorMessages, validationResult)
+				: true
+
+		return errorMessage || ruleMessage(errorMessages, 'default')
+	}
+}
+
+export const isDateValid = isDateValidFn()

package/src/utils/rules/isDateValid/locales.ts

@@ -0,0 +1,10 @@
+import type { ErrorMessages } from '../types'
+
+export const defaultErrorMessages: ErrorMessages = {
+	default: 'La date saisie n’est pas valide.',
+	wrongFormat: 'Le format de la date n’est pas valide.',
+	monthNotMatch:
+		'Le jour saisi dépasse le nombre de jours dans le mois correspondant.',
+	notALeapYear:
+		'Le jour saisi est invalide car l’année correspondante n’est pas une année bissextile.',
+}

package/src/utils/rules/isDateValid/tests/isDateValid.spec.ts

@@ -0,0 +1,27 @@
+import { isDateValid, isDateValidFn } from '../'
+import { describe, it, expect } from 'vitest'
+
+const validDate = '14/09/2019'
+const invalidDate = '99/99/9999'
+
+describe('isDateValid', () => {
+	it('returns an error when the date is not valid', () => {
+		expect(typeof isDateValid(invalidDate)).toBe('string')
+	})
+
+	it('returns true when the date is valid', () => {
+		expect(isDateValid(validDate)).toBe(true)
+	})
+
+	it('returns true if the value is falsy', () => {
+		expect(isDateValid('')).toBe(true)
+	})
+
+	it('works with custom error messages', () => {
+		const rule = isDateValidFn({
+			default: 'test',
+		})
+
+		expect(rule(invalidDate)).toBe('test')
+	})
+})

package/src/utils/rules/isExactLength/IsExactLenght.mdx

@@ -0,0 +1,68 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as IsExactLengthStories from './IsExactLength.stories';
+
+<Meta of={IsExactLengthStories} />
+
+# Règle de validation `isExactLength`
+
+La règle de validation `isExactLength` permet d'imposer une longueur exacte à une chaîne de caractères dans un champs de formulaire.
+
+## Usage
+
+Pour utiliser cette règle de validation, vous devez importer la fonction d'ordre supérieur `isExactLengthFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { isExactLengthFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction en lui passant en paramètre la longueur exacte que vous souhaitez imposer.
+
+<Source dark code={`
+const length15 = isExactLengthFn(15);
+`} />
+
+Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isExactLengthFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const length15 = isExactLengthFn(15);
+
+</script>
+
+<template>
+	<VTextField
+		:rules="[length15]"
+		label="Max 15 characters"
+	/>
+</template>
+`} />
+
+## API
+
+`} />typescript
+isExactLengthFn(
+	lengthValue: number,
+	ignoreSpaces?: boolean
+	errorMessages?: {
+		default?: (length: number) => string;
+	}
+): (value: string) => true | string;
+`} />
+
+### Arguments
+
+- `lengthValue` : nombre entier positif représentant la longueur exacte à imposer.
+- `ignoreSpaces` : booléen optionnel permettant d'ignorer les espaces dans le calcul de la longueur. Par défaut, la valeur est `false`.
+- `errorMessages` : objet optionnel permettant de personnaliser les messages d'erreur. Les clés disponibles sont :
+	- `default` : message d'erreur par défaut. Vous pouvez utiliser la variable `{{ length }}` pour afficher la longueur attendue.
+
+### Valeurs de retour
+
+Retourne une fonction pouvant être utilisée comme règle de validation pour un champs de formulaire Vuetify.
+
+## Exemples
+
+<Canvas of={IsExactLengthStories.Default} />

package/src/utils/rules/isExactLength/IsExactLength.stories.ts

@@ -0,0 +1,151 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { isExactLengthFn } from './index'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/isExactLength',
+	component: isExactLengthFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const length10 = isExactLengthFn(10)
+				return { length10 }
+			},
+			template: `
+				<VTextField
+					:rules="[length10]"
+					label="Max 10 characters"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isExactLengthFn } from '@cnamts/synapse'
+
+					const length10 = isExactLengthFn(10)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[length10]"
+						label="Max 10 characters"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const DoNotCountSpaces: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const length10 = isExactLengthFn(10, true)
+				return { length10 }
+			},
+			template: `
+				<VTextField
+					:rules="[length10]"
+					label="Max 10 characters"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isExactLengthFn } from '@cnamts/synapse'
+
+					const length10 = isExactLengthFn(10, true)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[length10]"
+						label="Max 10 characters"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const messages = {
+					default: (length: number) => `The length of this field must be exactly ${length} characters.`,
+				}
+				const length10 = isExactLengthFn(10, false, messages)
+				return { length10 }
+			},
+			template: `
+				<VTextField
+					:rules="[length10]"
+					label="This field must be 10 characters long."
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isExactLengthFn } from '@cnamts/synapse'
+
+					const messages = {
+						default: (length: number) => \`The length of this field must be exactly \${length} characters.\`,
+					}
+					const length10 = isExactLengthFn(10, false, messages)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[length10]"
+						label="This field must be 10 characters long."
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

package/src/utils/rules/{exactLength → isExactLength}/index.ts

@@ -1,4 +1,4 @@
-import { ruleMessage } from '../required/ruleMessageHelper'
+import { ruleMessage } from '@/utils/ruleMessage'
 import type {
 	ValidationRule,
 	ValidationResult,
@@ -9,7 +9,7 @@ import type {
 import { defaultErrorMessages } from './locales'
 
 /** Check that the value does not exceeds the specified length */
-export function exactLengthFn(
+export function isExactLengthFn(
 	lengthValue: number,
 	ignoreSpaces = false,
 	errorMessages: ErrorMessages<number> = defaultErrorMessages,
@@ -29,5 +29,3 @@ export function exactLengthFn(
 		)
 	}
 }
-
-export const exactLength = exactLengthFn

package/src/utils/rules/isExactLength/tests/exactLength.spec.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { isExactLengthFn } from '../'
+
+describe('exactLength', () => {
+	it('returns an error when the value is longer than the exact length', () => {
+		const rule = isExactLengthFn(2)
+
+		expect(typeof rule('0 1')).toBe('string')
+	})
+
+	it('returns an error when the value is smaller than the exact length', () => {
+		const rule = isExactLengthFn(2)
+
+		expect(typeof rule('s')).toBe('string')
+	})
+
+	it('returns true when the value is the exact length without counting spaces', () => {
+		const rule = isExactLengthFn(2, true)
+
+		expect(rule('x x')).toBe(true)
+	})
+
+	it('returns true when the value is equal than the exact length', () => {
+		const rule = isExactLengthFn(2)
+
+		expect(rule('01')).toBe(true)
+	})
+
+	it('returns true if the value is empty', () => {
+		const rule = isExactLengthFn(10)
+
+		expect(rule('')).toBe(true)
+	})
+
+	it('returns true if the value is null', () => {
+		const rule = isExactLengthFn(10)
+
+		expect(rule(null)).toBe(true)
+	})
+
+	it('works with custom error messages', () => {
+		const rule = isExactLengthFn(1, false, {
+			default: 'test',
+		})
+
+		expect(rule('01')).toBe('test')
+	})
+})