@cnamts/synapse 0.0.11-alpha → 0.0.13-alpha

package/src/utils/functions/validation/isDateValid/tests/isDateValid.spec.ts

@@ -0,0 +1,46 @@
+import { isDateValid } from '../index'
+import { describe, it, expect } from 'vitest'
+
+describe('isDateValid', () => {
+	it('returns an error when the date is not valid', () => {
+		const date = '99/99/9999'
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when the format is invalid', () => {
+		const date = '2020-04-16'
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when the day does not match the month', () => {
+		const date = '31/11/2019' // Only 30 days in November
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when it is february (not leap year) and the day does not match the month', () => {
+		const date = '29/02/2019' // Not a leap year, only 28 days
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns an error when it is february (leap year) and the day does not match the month', () => {
+		const date = '30/02/2020' // Leap year, 29 days
+
+		expect(typeof isDateValid(date)).toBe('string')
+	})
+
+	it('returns true when it is february and the date is valid', () => {
+		const date = '15/02/2019'
+
+		expect(isDateValid(date)).toBe(true)
+	})
+
+	it('returns true when the date is valid', () => {
+		const date = '14/09/2019'
+
+		expect(isDateValid(date)).toBe(true)
+	})
+})

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

@@ -0,0 +1,9 @@
+/** From https://emailregex.com/ */
+export const EMAIL_REGEXP
+	// eslint-disable-next-line no-control-regex
+	= /^(?:[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/functions/validation/isWeekend/index.ts

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs'
+
+export const WEEKEND_DAYS = ['Saturday', 'Sunday']
+
+/** Check if a date is Saturday or Sunday */
+export function isWeekend(date: string): boolean {
+	const day = dayjs(date).format('dddd')
+
+	return WEEKEND_DAYS.includes(day)
+}

package/src/utils/functions/validation/isWeekend/tests/isWeekend.spec.ts

@@ -0,0 +1,16 @@
+import { isWeekend } from '../'
+import { describe, it, expect } from 'vitest'
+
+describe('isWeekend', () => {
+	it('returns true if the day is in a weekend', () => {
+		const date = '2019-10-26' // Saturday
+
+		expect(isWeekend(date)).toBe(true)
+	})
+
+	it('returns false if the day is not in a weekend', () => {
+		const date = '2019-10-21' // Monday
+
+		expect(isWeekend(date)).toBe(false)
+	})
+})

package/src/utils/parseDate/index.ts

@@ -0,0 +1,29 @@
+import dayjs from 'dayjs'
+
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+
+/** Parse a date with dayjs */
+export function parseDate(value: string, format = 'DD/MM/YYYY'): dayjs.Dayjs {
+	// Currently dayjs doesn't work well with timezone offsets and parsing
+	// To fix this, we set the hour based on timezone offset
+	// so we don't go back or forward multiple hours
+
+	/** Timezone offset in minutes */
+	const timezoneOffset = (new Date()).getTimezoneOffset()
+
+	let offset = '00'
+
+	if (timezoneOffset > 0) {
+		offset = '14'
+	}
+	else {
+		offset = '04'
+	}
+
+	const dateWithTime = `${value} ${offset}:00:00`
+	const formatWithTime = `${format} HH:mm:ss`
+
+	return dayjs(dateWithTime, formatWithTime, true)
+}

package/src/utils/parseDate/tests/parseDate.spec.ts

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs'
+import { describe, it, expect } from 'vitest'
+
+import { parseDate } from '../index'
+
+const RESULT_DATE_FORMAT = 'YYYY-MM-DD'
+
+describe('parseDate', () => {
+	it('returns a working dayjs instance', () => {
+		const date = dayjs().format('DD/MM/YYYY')
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		expect(parseDate(date).format(RESULT_DATE_FORMAT)).toBe(parsedDate)
+	})
+
+	it('returns a working dayjs instance with custom date format', () => {
+		const DATE_FORMAT = 'DD MM YYYY'
+
+		const date = dayjs().format(DATE_FORMAT)
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		expect(parseDate(date, DATE_FORMAT).format(RESULT_DATE_FORMAT)).toBe(
+			parsedDate,
+		)
+	})
+
+	it('returns a working dayjs instance with a positive timezone offset', () => {
+		const date = dayjs().format('DD/MM/YYYY')
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		// Mock getTimezoneOffset
+		const originalGetTimezoneOffset = Date.prototype.getTimezoneOffset
+		Date.prototype.getTimezoneOffset = () => 160
+
+		expect(parseDate(date).format(RESULT_DATE_FORMAT)).toBe(parsedDate)
+
+		Date.prototype.getTimezoneOffset = originalGetTimezoneOffset
+	})
+
+	it('returns a working dayjs instance with a neutral timezone offset', () => {
+		const date = dayjs().format('DD/MM/YYYY')
+		const parsedDate = dayjs().format(RESULT_DATE_FORMAT)
+
+		// Mock getTimezoneOffset
+		const originalGetTimezoneOffset = Date.prototype.getTimezoneOffset
+		Date.prototype.getTimezoneOffset = () => 0
+
+		expect(parseDate(date).format(RESULT_DATE_FORMAT)).toBe(parsedDate)
+
+		Date.prototype.getTimezoneOffset = originalGetTimezoneOffset
+	})
+})

package/src/utils/rules/Rules.mdx

@@ -0,0 +1,16 @@
+import {Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="Guide Du Dev/Règles De Validation/Les règles de validation" />
+
+# Les règles de validation
+
+Les règles de validation permettent de vérifier la validité des données saisies dans un formulaire. Elles peuvent être utilisées en combinaison d'autres règles de `synapse` ou de personnalisées.
+
+Pour plus d'informations sur les règles de validation, consultez la [documentation de `Vuetify`](https://vuetifyjs.com/en/components/forms/#rules).
+
+## Détails d'utilisation
+
+Les règles de validation sont des fonctions qui prennent en paramètre la valeur du champ de formulaire à valider. Elles retournent un `boolean` ou une `string` en fonction de la validité de la valeur.
+
+Ce package fournie des fonctions d'ordre supérieur pour faciliter la création de règles de validation personnalisées. le nom de ces fonctions se termine par `Fn`.
+Elles prennent en paramètre des données de configuration et retournent une fonction de validation. Cette fonction de validation peut être utilisée comme règle d'un champ de formulaire.

package/src/utils/rules/doMatchPattern/DoMachPattern.mdx

@@ -0,0 +1,66 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as DoMatchPatternStories from './DoMatchPattern.stories';
+
+<Meta of={DoMatchPatternStories} />
+
+# Règle de validation `doMatchPattern`
+
+La règle de validation `doMatchPattern` permet de vérifier qu'une chaîne de caractères correspond à un motif donné.
+
+## Usage
+
+Pour utiliser cette règle de validation, vous devez importer la fonction d'ordre supérieur `doMatchPatternFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { doMatchPatternFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction en lui passant en paramètre le motif que vous souhaitez vérifier.
+
+<Source dark code={`
+const isEmail = doMatchPatternFn(/^[\w-]+@([\w-]+\.)+[\w-]+$/);
+`} />
+
+Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { doMatchPatternFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const isEmail = doMatchPatternFn(/^[\w-]+@([\w-]+\.)+[\w-]+$/);
+</script>
+
+<template>
+	<VTextField
+		:rules="[isEmail]"
+		label="Email"
+	/>
+</template>
+`} />
+
+## API
+
+<Source dark code={`
+doMatchPatternFn(
+	pattern: RegExp,
+	errorMessages?: {
+		default: string;
+	}
+): (value: string) => true | string;
+`} />
+
+### Arguments
+
+- `pattern` : expression régulière à utiliser pour vérifier la chaîne de caractères.
+- `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={DoMatchPatternStories.Default} />
+

package/src/utils/rules/doMatchPattern/DoMatchPattern.stories.ts

@@ -0,0 +1,106 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { doMatchPatternFn } from './index'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/doMatchPattern',
+	component: doMatchPatternFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const matchTwoDigits = doMatchPatternFn(/^[0-9]{2}$/)
+				return { matchTwoDigits }
+			},
+			template: `
+				<VTextField
+					:rules="[matchTwoDigits]"
+					label="Deux chiffres"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { doMatchPatternFn } from '@cnamts/synapse'
+
+					const matchTwoDigits = doMatchPatternFn(/^[0-9]{2}$/)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[matchTwoDigits]"
+						label="Deux chiffres"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const twoDigits = doMatchPatternFn(
+					/^[0-9]{2}$/,
+					{ default: 'Veuillez saisir deux chiffres.' },
+				)
+				return { twoDigits }
+			},
+			template: `
+				<VTextField
+					:rules="[twoDigits]"
+					label="Deux chiffres"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { doMatchPatternFn } from '@cnamts/synapse'
+
+					const twoDigits = doMatchPatternFn(
+						/^[0-9]{2}$/,
+						{ default: 'Veuillez saisir deux chiffres.' },
+					)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[twoDigits]"
+						label="Deux chiffres"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

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.',
+}