@cnamts/synapse 0.0.12-alpha → 0.0.13-alpha

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')
+	})
+})

package/src/utils/rules/isMaxLength/IsMaxLength.mdx

@@ -0,0 +1,68 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as IsMaxLengthStories from './IsMaxLength.stories';
+
+<Meta of={IsMaxLengthStories} />
+
+# Règle de validation `isMaxLength`
+
+La règle de validation `isMaxLength` permet de limiter la longueur d'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 `isMaxLengthFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { isMaxLengthFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction en lui passant en paramètre la longueur maximale que vous souhaitez imposer.
+
+<Source dark code={`
+const max10 = isMaxLengthFn(10);
+`} />
+
+Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isMaxLengthFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const max10 = isMaxLengthFn(10);
+
+</script>
+
+<template>
+	<VTextField
+		:rules="[max10]"
+		label="Max 10 characters"
+	/>
+</template>
+`} />
+
+## API
+
+<Source dark code={`
+isMaxLengthFn(
+	maxLength: number,
+	ignoreSpaces?: boolean,
+	errorMessages?: {
+		default?: (length: number) => string;
+	}
+): (value: string) => true | string;
+`} />
+
+### Arguments
+
+- `maxLength` : nombre entier positif représentant la longueur maximale à 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 maximale 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={IsMaxLengthStories.Default} />

package/src/utils/rules/isMaxLength/IsMaxLength.stories.ts

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

package/src/utils/rules/isMaxLength/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 does not exceeds the specified length */
+export function isMaxLengthFn(
+	max: 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 <= max || ruleMessage(errorMessages, 'default', [max])
+		)
+	}
+}

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

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

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

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

package/src/utils/rules/isMinLength/IsMinLength.mdx

@@ -0,0 +1,68 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import * as IsMinLengthStories from './IsMinLength.stories';
+
+<Meta of={IsMinLengthStories} />
+
+# Règle de validation `isMinLength`
+
+La règle de validation `isMinLength` permet de limiter la longueur d'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 `isMinLengthFn` depuis le package `@cnamts/synapse`.
+
+<Source dark code={`
+import { isMinLengthFn } from '@cnamts/synapse';
+`} />
+
+Vous devez ensuite faire appel à cette fonction en lui passant en paramètre la longueur minimale que vous souhaitez imposer.
+
+<Source dark code={`
+const min10 = isMinLengthFn(10);
+`} />
+
+Vous pouvez ensuite utiliser la fonction retournée comme règle d'un champs de formulaire.
+
+<Source dark code={`
+<script setup lang="ts">
+import { isMinLengthFn } from '@cnamts/synapse';
+import { VTextField } from 'vuetify/components';
+
+const min10 = isMinLengthFn(10);
+
+</script>
+
+<template>
+	<VTextField
+		:rules="[min10]"
+		label="Min 10 characters"
+	/>
+</template>
+`} />
+
+## API
+
+<Source dark code={`
+isMinLengthFn(
+	minLength: number,
+	ignoreSpaces?: boolean,
+	errorMessages?: {
+		default?: (length: number) => string;
+	}
+): (value: string) => true | string;
+`} />
+
+### Arguments
+
+- `minLength` : nombre entier positif représentant la longueur minimale à 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 minimale 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={IsMinLengthStories.Default} />