@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

package/src/utils/rules/isMinLength/IsMinLength.stories.ts

@@ -0,0 +1,152 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { isMinLengthFn } from './index'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/isMinLength',
+	component: isMinLengthFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const min5 = isMinLengthFn(5)
+				return { min5 }
+			},
+			template: `
+				<VTextField
+					:rules="[min5]"
+					label="Min 5 caractères"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isMinLengthFn } from '@cnamts/synapse'
+
+					const min5 = isMinLengthFn(5)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[min5]"
+						label="Min 5 caractères"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const ignoreSpaces: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const min5 = isMinLengthFn(5, true)
+				return { min5 }
+			},
+			template: `
+				<VTextField
+					:rules="[min5]"
+					label="Min 5 caractères, ignore les espaces"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isMinLengthFn } from '@cnamts/synapse'
+
+					const min5 = isMinLengthFn(5, true)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[min5]"
+						label="Min 5 caractères, ignore les espaces"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const messages = {
+					default: min => `The text entered is too short, it must be ${min} characters or more`,
+				}
+				const min5 = isMinLengthFn(5, false, messages)
+				return { min5 }
+			},
+			template: `
+				<VTextField
+					:rules="[min5]"
+					label="Min 5 characters"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isMinLengthFn } from '@cnamts/synapse'
+
+					const messages = {
+						default: min => \`The text entered is too long, it must be \${min} characters or less\`,
+					}
+					const min5 = isMinLengthFn(5, false, messages)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[min5]"
+						label="Min 5 characters"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

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

@@ -0,0 +1,30 @@
+import { ruleMessage } from '@/utils/ruleMessage'
+import type {
+	ValidationRule,
+	ValidationResult,
+	ErrorMessages,
+	Value,
+} from '../types'
+
+import { defaultErrorMessages } from './locales'
+
+/** Check that the value is not shorter than the specified length */
+export function isMinLengthFn(
+	min: number,
+	ignoreSpaces = false,
+	errorMessages: ErrorMessages<number> = defaultErrorMessages,
+): ValidationRule {
+	return (value: Value): ValidationResult => {
+		if (!value) {
+			return true
+		}
+
+		if (ignoreSpaces) {
+			value = value.replace(/\s/g, '')
+		}
+
+		return (
+			value.length >= min || ruleMessage(errorMessages, 'default', [min])
+		)
+	}
+}

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

@@ -0,0 +1,6 @@
+import type { ErrorMessages } from '../types'
+
+export const defaultErrorMessages: ErrorMessages<number> = {
+	default: (min: number) =>
+		`La longueur minimale du champ doit être de ${min} caractères.`,
+}

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

@@ -0,0 +1,42 @@
+import { isMinLengthFn } from '..'
+import { describe, it, expect } from 'vitest'
+
+describe('isMinLengthFn', () => {
+	it('returns an error when the value is shorter than minimum', () => {
+		const rule = isMinLengthFn(10)
+
+		expect(typeof rule('0')).toBe('string')
+	})
+
+	it('returns true when the value is longer than the minimum', () => {
+		const rule = isMinLengthFn(10)
+
+		expect(rule('012345678910')).toBe(true)
+	})
+
+	it('returns true when the value equals the maximum', () => {
+		const rule = isMinLengthFn(10)
+
+		expect(rule('0123456789')).toBe(true)
+	})
+
+	it('returns true when the value is longer than the maximum without counting spaces', () => {
+		const rule = isMinLengthFn(10, true)
+
+		expect(rule('0 1 2 3 4 5 6 7 8 9 10')).toBe(true)
+	})
+
+	it('returns true if the value is falsy', () => {
+		const rule = isMinLengthFn(10)
+
+		expect(rule('')).toBe(true)
+	})
+
+	it('works with custom error messages', () => {
+		const rule = isMinLengthFn(10, false, {
+			default: 'test',
+		})
+
+		expect(rule('0')).toBe('test')
+	})
+})

package/src/utils/rules/isNotAfterDate/IsNotAfterDate.mdx

@@ -0,0 +1,68 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as IsNotAfterDateStories from './IsNotAfterDate.stories';
+
+<Meta of={IsNotAfterDateStories} />
+
+# Règle de validation `isNotAfterDate`
+
+La règle de validation `isNotAfterDate` permet de vérifier qu'une date n'est pas postérieure à une date de référence.
+
+## Usage
+
+Pour utiliser cette règle de validation, vous devez importer la fonction d'ordre supérieur `isNotAfterDateFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { isNotAfterDateFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction en lui passant en paramètre la date de référence.
+
+<Source dark code={`
+const notAfterToday = isNotAfterDateFn('01/01/2022');
+`} />
+
+Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isNotAfterDateFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const notAfter = isNotAfterDateFn('01/01/2022');
+
+</script>
+
+<template>
+	<VTextField
+		:rules="[notAfter]"
+		label="Date"
+	/>
+</template>
+`} />
+
+## API
+
+<Source dark code={`
+
+isNotAfterDateFn(
+	date: string,
+	errorMessages?: {
+		default: (date: string) => string;
+	}
+): (value: string) => true | string;
+
+`} />
+
+### Arguments
+
+- `date` : chaîne de caractères représentant la date de référence. La date doit être au format `JJ/MM/AAAA`.
+- `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 `{{ date }}` pour afficher la date de référence.
+
+### Valeurs de retour
+
+Retourne une fonction de validation qui vérifie si la date passée en paramètre n'est pas postérieure à la date de référence.
+
+## Exemples
+
+<Canvas of={IsNotAfterDateStories.Default} />

package/src/utils/rules/isNotAfterDate/IsNotAfterDate.stories.ts

@@ -0,0 +1,109 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { isNotAfterDateFn } from './index'
+import { ref } from 'vue'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/isNotAfterDate',
+	component: isNotAfterDateFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const date = isNotAfterDateFn('01/01/2022')
+				const model = ref('12/12/2023')
+
+				return { date, model }
+			},
+			template: `
+				<VTextField
+					v-model="model"
+					:rules="[date]"
+					label="Date"
+					variant="outlined"
+					validate-on="eager blur"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isNotAfterDateFn } from '@cnamts/synapse'
+
+					const date = isNotAfterDateFn('01/01/2022')
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[date]"
+						label="Date"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const date = isNotAfterDateFn('01/01/2022', {
+					default: (date: string) => `The date must not be after ${date}`,
+				})
+				return { date }
+			},
+			template: `
+				<VTextField
+					:rules="[date]"
+					label="Date"
+					variant="outlined"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isNotAfterDateFn } from '@cnamts/synapse'
+
+					const date = isNotAfterDateFn('01/01/2022', {
+						default: (date: string) => \`The date must not be after \${date}\`,
+					})
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[date]"
+						label="Date"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

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

@@ -0,0 +1,25 @@
+import { formatDate } from '@/utils/formatDate'
+import { parseDate } from '@/utils/parseDate'
+import { ruleMessage } from '@/utils/ruleMessage'
+import { isDateAfter } from '../../functions/validation/isDateAfter'
+import type { ValidationResult, ValidationRule, Value } from '../types'
+import { defaultErrorMessages } from './locales'
+
+/** Check that the value is not after the specified date (DD/MM/YYYY format) */
+export function isNotAfterDateFn(
+	date: string,
+	errorMessages = defaultErrorMessages,
+): ValidationRule {
+	return (value: Value): ValidationResult => {
+		if (!value) {
+			return true
+		}
+
+		const formattedValue = formatDate(parseDate(date))
+
+		return (
+			!isDateAfter(date, value)
+			|| ruleMessage(errorMessages, 'default', [formattedValue])
+		)
+	}
+}

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

@@ -0,0 +1,6 @@
+import type { ErrorMessages } from '../types'
+
+export const defaultErrorMessages: ErrorMessages = {
+	default: (date: string) =>
+		`La date doit être antérieure ou égale au ${date}.`,
+}

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

@@ -0,0 +1,25 @@
+import { isNotAfterDateFn } from '..'
+import { describe, it, expect } from 'vitest'
+
+import dayjs from 'dayjs'
+import { formatDate } from '@/utils/formatDate'
+
+describe('notAfterDate', () => {
+	const currentDate = formatDate(dayjs())
+	const pastDate = formatDate(dayjs().subtract(1, 'year'))
+	const futureDate = formatDate(dayjs().add(1, 'year'))
+
+	const rule = isNotAfterDateFn(currentDate)
+
+	it('returns true with a past date', () => {
+		expect(rule(pastDate)).toBe(true)
+	})
+
+	it('returns an error with a future date', () => {
+		expect(typeof rule(futureDate)).toBe('string')
+	})
+
+	it('returns true if the value is falsy', () => {
+		expect(rule('')).toBe(true)
+	})
+})

package/src/utils/rules/isNotAfterToday/IsNotAfterToday.mdx

@@ -0,0 +1,83 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as IsNotAfterTodayStories from './IsNotAfterToday.stories';
+
+<Meta of={IsNotAfterTodayStories} />
+
+# Règle de validation `isNotAfterToday`
+
+La règle de validation `isNotAfterToday` permet de vérifier qu'une date n'est pas postérieure à la date du jour.
+
+## Usage
+
+Pour utiliser cette règle de validation, vous devez importer la règle `isNotAfterToday` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { isNotAfterToday } from '@cnamts/synapse';
+`} />
+
+
+Vous pouvez ensuite utiliser la fonction comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isNotAfterToday } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+</script>
+
+<template>
+	<VTextField
+		:rules="[isNotAfterToday]"
+		label="Date"
+	/>
+</template>
+`} />
+
+## Customisation des messages d'erreur
+
+Vous pouvez personnaliser les messages d'erreur en passant un objet `errorMessages` en paramètre de la fonction `isNotAfterTodayFn`.
+Puis en utilisant la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isNotAfterTodayFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const notAfterToday = isNotAfterTodayFn({
+	default: \`The date must not be after today\`,
+});
+
+</script>
+
+<template>
+	<VTextField
+		:rules="[notAfterToday]"
+		label="Date"
+	/>
+</template>
+`} />
+
+## API
+
+<Source dark code={`
+
+isNotAfterTodayFn(
+	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 qui prend en paramètre une chaîne de caractères représentant une date et retourne `true` si la date n'est pas postérieure à la date du jour, sinon retourne un message d'erreur.
+
+## Exemples
+
+<Canvas of={IsNotAfterTodayStories.Default} />

package/src/utils/rules/isNotAfterToday/IsNotAfterToday.stories.ts

@@ -0,0 +1,110 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VTextField } from 'vuetify/components'
+import { isNotAfterToday, isNotAfterTodayFn } from './index'
+import { ref } from 'vue'
+
+export default {
+	title: 'Guide du dev/Règles De Validation/isNotAfterToday',
+	component: isNotAfterTodayFn,
+}
+
+export const Default: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const model = ref('12/12/2050')
+
+				return { model, isNotAfterToday }
+			},
+			template: `
+				<VTextField
+					v-model="model"
+					:rules="[isNotAfterToday]"
+					label="Date"
+					variant="outlined"
+					validate-on="eager blur"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isNotAfterToday } from '@cnamts/synapse'
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[isNotAfterToday]"
+						label="Date"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}
+
+export const CustomMessage: StoryObj<unknown> = {
+	render: () => {
+		return {
+			components: { VTextField },
+			setup() {
+				const messages = {
+					default: 'The date must not be after today.',
+				}
+				const dateRule = isNotAfterTodayFn(messages)
+
+				return { dateRule }
+			},
+			template: `
+				<VTextField
+					:rules="[dateRule]"
+					label="Date"
+					variant="outlined"
+					validate-on="eager blur"
+				/>
+			`,
+		}
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { VTextField } from 'vuetify/components'
+					import { isNotAfterTodayFn } from '@cnamts/synapse'
+				
+					const messages = {
+						default: 'The date must not be after today.',
+					}
+					const dateRule = isNotAfterTodayFn(messages)
+				</script>
+				`,
+			},
+			{
+				name: 'Template',
+				code: `
+				<template>
+					<VTextField
+						:rules="[dateRule]"
+						label="Date"
+						variant="outlined"
+					/>
+				</template>
+				`,
+			},
+		],
+	},
+}

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

@@ -0,0 +1,28 @@
+import { formatDate } from '@/utils/formatDate'
+import { ruleMessage } from '@/utils/ruleMessage'
+import dayjs from 'dayjs'
+import { isDateAfter } from '../../functions/validation/isDateAfter'
+import type {
+	ErrorMessages,
+	ValidationResult,
+	ValidationRule,
+	Value,
+} from '../types'
+import { defaultErrorMessages } from './locales'
+
+/** Check that the value is not after today (DD/MM/YYYY format) */
+export function isNotAfterTodayFn(
+	errorMessages: ErrorMessages = defaultErrorMessages,
+): ValidationRule {
+	return (value: Value): ValidationResult => {
+		if (!value) {
+			return true
+		}
+
+		return (
+			!isDateAfter(formatDate(dayjs()), value) || ruleMessage(errorMessages, 'default')
+		)
+	}
+}
+
+export const isNotAfterToday = isNotAfterTodayFn()

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

@@ -0,0 +1,5 @@
+import type { ErrorMessages } from '../types'
+
+export const defaultErrorMessages: ErrorMessages = {
+	default: 'La date doit être antérieure ou égale à aujourd’hui.',
+}