@cnamts/synapse 1.0.2 → 1.0.3

package/src/stories/GuideDuDev/PortailAgent.stories.ts

@@ -1,4 +1,4 @@
-import { VExpansionPanel, VExpansionPanels, VExpansionPanelText, VExpansionPanelTitle } from 'vuetify/components'
+import { VDivider, VExpansionPanel, VExpansionPanels, VExpansionPanelText, VExpansionPanelTitle } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
 
 export default {
@@ -13,6 +13,7 @@ export const PAgComponents: StoryObj = {
 				VExpansionPanel,
 				VExpansionPanelTitle,
 				VExpansionPanelText,
+				VDivider,
 			},
 			setup() {
 				return {}
@@ -27,11 +28,12 @@ export const PAgComponents: StoryObj = {
 							<p>
 								Le composant Portail <span class="component-name">Accordéon</span> est remplacé par le composant <span class="component-name">Accordion</span> de Synapse.
 								<br>
-								<a href="/docs/composants-donn%C3%A9es-accordion--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-donn%C3%A9es-accordion--docs" target="_blank" rel="noopener noreferrer">
 									Documentation du composant Synapse Accordion
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-accordeon.htm">
 									Documentation du composant Portail Accordéon correspondant
 								</a>
@@ -47,11 +49,12 @@ export const PAgComponents: StoryObj = {
 							<p>
 								Le composant Portail <span class="component-name">Alerts</span> est remplacé par le composant <span class="component-name">SyAlert</span> de Synapse.
 								<br>
-								<a href="/docs/composants-feedback-syalert--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-feedback-syalert--docs" target="_blank" rel="noopener noreferrer">
 									Documentation du composant Synapse SyAlert
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-alert.htm">
 									Documentation du composant Portail Alert correspondant
 								</a>
@@ -69,6 +72,7 @@ export const PAgComponents: StoryObj = {
 								<br> Si un seul élément doit être affiché le composant <span class="component-name">Vchip</span> de Vuetify peut lui être préféré : <a href="https://vuetifyjs.com/components/chips" target="_blank" rel="noopener noreferrer">Documentation du composant Vuetify Chip</a>.
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-badge.htm">
 									Documentation du composant Portail Badge correspondant
 								</a>
@@ -99,11 +103,12 @@ export const PAgComponents: StoryObj = {
 							<p class="mt-4">
 								Le composant <span class="component-name">ToolbarContainer</span> de Synapse peut également être utilisé en complément pour améliorer l’expérience utilisateur lors de la navigation clavier.
 								<br>
-								<a href="https://synapse-dev.netlify.app/?path=//docs/composants-layout-toolbarcontainer--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-layout-toolbarcontainer--docs" target="_blank" rel="noopener noreferrer">
 									Documentation du composant Synapse ToolbarContainer
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-barreactions.htm">
 									Documentation du composant Portail Barre d'actions correspondant
 								</a>
@@ -137,6 +142,7 @@ export const PAgComponents: StoryObj = {
 								</li>
 							</ul>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-barre-taches.htm">
 									Documentation du composant Portail Barre de tâches correspondant
 								</a>
@@ -175,6 +181,7 @@ export const PAgComponents: StoryObj = {
 								</a>
 							</p>
 							<p class="mt-6">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-buttons.htm">
 									Documentation du composant Portail Buttons correspondant
 								</a>
@@ -190,11 +197,12 @@ export const PAgComponents: StoryObj = {
 							<p>
 								Le composant Portail <span class="component-name">Fenêtre modale</span> est remplacé par le composant <span class="component-name">DialogBox</span> de Synapse.
 								<br>
-								<a href="https://synapse-dev.netlify.app/?path=//docs/composants-feedback-dialogbox--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-feedback-dialogbox--docs" target="_blank" rel="noopener noreferrer">
 									Documentation du composant Synapse DialogBox
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-modal.htm">
 									Documentation du composant Portail Fenêtre modales correspondant
 								</a>
@@ -210,11 +218,12 @@ export const PAgComponents: StoryObj = {
 							<p>
 								Le composant Portail <span class="component-name">Fiche de travail</span> est remplacé par le composant <span class="component-name">DataListGroup</span> Synapse.
 								<br>
-								<a href="https://synapse-dev.netlify.app/?path=//docs/composants-donn%C3%A9es-datalistgroup--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-donn%C3%A9es-datalistgroup--docs" target="_blank" rel="noopener noreferrer">
 									Documentation du composant Synapse DataListGroup
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-fichetravail.htm">
 									Documentation du composant Portail Fiche de travail correspondant
 								</a>
@@ -229,23 +238,24 @@ export const PAgComponents: StoryObj = {
 						<VExpansionPanelText>
 							<p>
 								Pour constituer des formulaires, Synapse met a disposition les composants 
-								<a href="/docs/composants-formulaires-sytextfield--docs">SyTextField</a>, 
-								<a href="/docs/composants-formulaires-syselect--docs">SySelect</a>, 
-								<a href="/docs/composants-formulaires-syinputselect--docs">SyInputSelect</a>, 
-								<a href="/docs/composants-formulaires-sybtnselect--docs">SyBtnSelect</a>, 
-								<a href="/docs/composants-formulaires-sytextarea--docs">SyTextArea</a>, 
-								<a href="/docs/composants-formulaires-datepicker-introduction--docs">DatePicker</a>, 
-								<a href="/docs/composants-formulaires-diacriticpicker--docs">DiacriticPicker</a>, 
-								<a href="/docs/composants-formulaires-fileupload--docs">FileUpload</a>, 
-								<a href="/docs/composants-formulaires-nirfield--docs">NirField</a>, 
-								<a href="/docs/composants-formulaires-passwordfield--docs">PasswordField</a>, 
-								<a href="/docs/composants-formulaires-periodfield--docs">PeriodField</a>, 
-								<a href="/docs/composants-formulaires-phonefield--docs">PhoneField</a>, 
-								<a href="/docs/composants-formulaires-rangefield--docs">RangeField</a>, 
-								<a href="/docs/composants-formulaires-searchlistfield--docs">SearchListField</a> et
-								<a href="/docs/composants-formulaires-selectbtnfield--docs">SelectBtnField</a>
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-sytextfield--docs">SyTextField</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-syselect--docs">SySelect</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-syinputselect--docs">SyInputSelect</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-sybtnselect--docs">SyBtnSelect</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-sytextarea--docs">SyTextArea</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-datepicker-introduction--docs">DatePicker</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-diacriticpicker--docs">DiacriticPicker</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-fileupload--docs">FileUpload</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-nirfield--docs">NirField</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-passwordfield--docs">PasswordField</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-periodfield--docs">PeriodField</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-phonefield--docs">PhoneField</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-rangefield--docs">RangeField</a>, 
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-searchlistfield--docs">SearchListField</a> et
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-formulaires-selectbtnfield--docs">SelectBtnField</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-forms.htm">
 									Documentation des composants Portail formulaires correspondant
 								</a>
@@ -266,6 +276,7 @@ export const PAgComponents: StoryObj = {
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-breadcrumbs.htm">
 									Documentation du composant Portail Fil d'ariane correspondant
 								</a>
@@ -289,6 +300,7 @@ export const PAgComponents: StoryObj = {
 							
 							<p class="mt-4">Pour plus d'informations sur l'intégration des icons materials <a href="https://vuetifyjs.com/en/features/icon-fonts/#mdi-js-svg">https://vuetifyjs.com/en/features/icon-fonts/#mdi-js-svg</a>.</p>
 							<p class="mt-6">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-icones.htm">
 									Documentation des icones Portail
 								</a>
@@ -306,6 +318,7 @@ export const PAgComponents: StoryObj = {
 								 peuvent être mise en formes avec les classes utilitaires Vuetify <a href="https://vuetifyjs.com/styles/text-and-typography">https://vuetifyjs.com/styles/text-and-typography</a> et êtres ajointes d’une icône (voir section Icones) Si le lien ne contient qu’une icône, il doit alors posséder un attribut <span class="component-name">title</span>.
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-liens.htm">
 									Documentation du composant Portail Liens correspondant
 								</a>
@@ -326,6 +339,7 @@ export const PAgComponents: StoryObj = {
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-dropdown.htm">
 									Documentation du composant Portail Menus déroulants correspondant
 								</a>
@@ -341,11 +355,12 @@ export const PAgComponents: StoryObj = {
 							<p>
 								Le composant Portail <span class="component-name">Notfications</span> est remplacé par le composant <span class="component-name">NotificationBar</span> Synapse.
 								<br>
-								<a href="/docs/composants-feedback-notificationbar--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-feedback-notificationbar--docs" target="_blank" rel="noopener noreferrer">
 									Documentation du composant Synapse NotificationBar
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-notification.htm">
 									Documentation du composant Portail Notification correspondant
 								</a>
@@ -366,6 +381,7 @@ export const PAgComponents: StoryObj = {
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-tabs.htm">
 									Documentation du composant Portail Onglets correspondant
 								</a>
@@ -391,6 +407,7 @@ export const PAgComponents: StoryObj = {
 								</a>
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-popover.htm">
 									Documentation du composants Portail Popovers et tooltips correspondants
 								</a>
@@ -405,10 +422,10 @@ export const PAgComponents: StoryObj = {
 						<VExpansionPanelText>
 							<p>
 								Le composant <span class="component-name">Tableau</span> est remplacé par deux composants Synapse 
-								<a href="/docs/composants-tableaux-sytable--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-tableaux-sytable--docs" target="_blank" rel="noopener noreferrer">
 									SyTable
 								</a> et 
-								<a href="/docs/composants-tableaux-syservertable--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-tableaux-syservertable--docs" target="_blank" rel="noopener noreferrer">
 									SyServerTable
 								</a>.
 							</p>
@@ -417,6 +434,7 @@ export const PAgComponents: StoryObj = {
 								<li class="mt-4"><span class="component-name">SyServerTable</span> doit être utilisée quand le volume de données est trop gros pour les chargés intégralement sur le client. Le composants émets des événements quand l’utilisateur fait appel a la paginations ou aux filtres, Le développeur a la charge de récupérer ces événements pour faire un requête au serveur et mettre à jours les données affichées par le tableau.</li>
 							</ul>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-accordeon.htm">
 									Documentation du composant Portail Accordéon correspondant
 								</a>
@@ -454,6 +472,7 @@ export const PAgComponents: StoryObj = {
 </pre>
 							</div>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-titre.htm">
 									Documentation du composant Portail Titres de page et de tableau correspondant
 								</a>
@@ -468,7 +487,7 @@ export const PAgComponents: StoryObj = {
 						<VExpansionPanelText>
 							<p>
 								Le composant Synapse
-								<a href="/docs/composants-layout-panel--docs" target="_blank" rel="noopener noreferrer">
+								<a href="https://cnam-design-system.netlify.app/?path=/docs/composants-layout-panel--docs" target="_blank" rel="noopener noreferrer">
 									Accordion
 								</a>
 								permet d’organiser sa page en différents panels. 
@@ -492,6 +511,7 @@ export const PAgComponents: StoryObj = {
 								https://vuetifyjs.com/components/grids
 							</p>
 							<p class="mt-4">
+								<VDivider class="pb-2"/>
 								<a href="https://maloron.net/am/cnamuipav2/cnamui-panels.htm">
 									Documentation du composant Portail Panel correspondant
 								</a>

package/src/stories/GuideDuDev/Theme.mdx

@@ -1,6 +1,6 @@
 import {Meta, Source} from '@storybook/blocks';
 
-<Meta title="Guide Du Dev/Gestion du thème" />
+<Meta title="Guide Du Dev/Configuration du thème" />
 
 # Configuration du thème
 
@@ -15,6 +15,7 @@ Si votre projet dépend du Portail Agent, il vous faudra modifier la configurati
 2. Remplacez la valeur de `defaultTheme` par le thème qui correspond à votre projet :
 - `cnam` : CNAM
 - `pa` : Portail Agent
+- `ap` : Amelipro
 
 <Source dark code={`
 import { createApp } from 'vue';

package/src/utils/amelipro/dateHelper/dateHelper.ts

@@ -0,0 +1,97 @@
+/**
+ * Regular expression to match the ISO 8601 basic date format (YYYY-MM-DD).
+ * @type {RegExp}
+ */
+const ISO_8601_BASIC = /^\d{4}-\d\d-\d\d$/i
+const FRENCH_FORMAT_ISO = /^\d\d\/\d\d\/\d{4}$/i
+
+/**
+ * Formats a single-digit number as a two-digit string with a leading zero.
+ * @param {number} num - The number to format.
+ * @returns {string} The formatted two-digit string.
+ */
+export const padTo2Digits = (num: number): string => num.toString().padStart(2, '0')
+
+/**
+ * Checks if a given string matches the ISO 8601 basic date format (YYYY-MM-DD).
+ * @param {string | null | undefined} date - The date string to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export const dateMatchIso = (date: string | null | undefined): boolean => {
+	if (typeof date !== 'string') {
+		return false
+	}
+	return ISO_8601_BASIC.test(date)
+}
+
+/**
+ * Checks if a given string matches the French date format (DD/MM/YYYY).
+ * @param {string | null | undefined} date - The date string to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export const dateMatchFrIso = (date: string | null | undefined): boolean => {
+	if (typeof date !== 'string') {
+		return false
+	}
+	return FRENCH_FORMAT_ISO.test(date)
+}
+
+/**
+ * Parses a string in the format 'YYYY-MM-DD' into an array of year, month, and day strings.
+ * @param {string} date - The date string to parse.
+ * @returns {string[]} An array containing [year, month, day].
+ */
+export const parseDate = (date: string): string[] => {
+	const [year, month, day] = date.split('-')
+	return [year, month, day]
+}
+
+/**
+ * Parses a string in the format 'DD/MM/YYYY' into an array of year, month, and day strings.
+ * @param {string} date - The date string to parse.
+ * @returns {string[]} An array containing [day, month, year].
+ */
+export const parseDateToFr = (date: string): string[] => {
+	const [day, month, year] = date.split('/')
+	return [day, month, year]
+}
+
+/**
+ * Formats a date string in the ISO 8601 basic format (YYYY-MM-DD) to the French format (DD/MM/YYYY).
+ * @param {string} date - The date string to format.
+ * @returns {string} The formatted date string in French format, or an empty string if invalid input is provided.
+ */
+export const dateToFormatFr = (date: string): string => {
+	if (typeof date !== 'string' || date === '') {
+		return ''
+	}
+	const [year, month, day] = parseDate(date)
+	return `${padTo2Digits(parseInt(day))}/${padTo2Digits(parseInt(month))}/${year.toString()}`
+}
+
+/**
+ * Formats a date string in the French format (DD/MM/YYYY) to the ISO 8601 basic format (YYYY-MM-DD).
+ * @param {string} date - The date string to format.
+ * @returns {string} The formatted date string in French format, or an empty string if invalid input is provided.
+ */
+export const dateToBasicFormat = (date: string): string => {
+	if (typeof date !== 'string' || date === '') {
+		return ''
+	}
+	const [day, month, year] = parseDateToFr(date)
+	return `${padTo2Digits(parseInt(year))}-${padTo2Digits(parseInt(month))}-${day.toString()}`
+}
+
+/**
+ * Converts a string value in the ISO 8601 basic format (YYYY-MM-DD) to a JavaScript Date object.
+ * @param {string} value - The string value to convert.
+ * @returns {Date | undefined} A Date object representing the date, or undefined if the string is not in valid format.
+ */
+export const stringToDate = (value: string): Date | undefined => {
+	if (!dateMatchIso(value)) {
+		return undefined
+	}
+	const [year, month, day] = parseDate(value)
+	// Adjust for JavaScript month indexing starting at 0
+	return new Date(parseInt(year), parseInt(month) - 1, parseInt(day), 0, 0, 0, 0)
+}

package/src/utils/amelipro/dateHelper/tests/dateHelper.spec.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { padTo2Digits, dateMatchFrIso, dateMatchIso, parseDate, dateToFormatFr, stringToDate, parseDateToFr, dateToBasicFormat } from '../dateHelper'
+
+describe('dateHelper', () => {
+	it('padTo2digits adds a "0" before a single number and make it a string', () => {
+		const value = 2
+		expect(padTo2Digits(value)).toEqual('02')
+	})
+
+	it('wrong value does not match the date ISO', () => {
+		const value = '20/04/1976'
+		expect(dateMatchIso(value)).toBeFalsy()
+	})
+
+	it('value matches the date FR ISO', () => {
+		const value = '20/04/1976'
+		expect(dateMatchFrIso(value)).toBeTruthy()
+	})
+
+	it('good value matches the date ISO', () => {
+		const value = '1976-04-20'
+		expect(dateMatchIso(value)).toBeTruthy()
+	})
+
+	it('transform a string into an array of [year, month, day]', () => {
+		const value = '1976-04-20'
+		expect(parseDate(value)).toEqual(['1976', '04', '20'])
+	})
+
+	it('transform a string into an array of [day, month, year]', () => {
+		const value = '20/04/1976'
+		expect(parseDateToFr(value)).toEqual(['20', '04', '1976'])
+	})
+
+	it('dateToFormatFr transform a "yyyy-mm-dd" date into a "dd/mm/yyyy" date', () => {
+		const value = '1976-04-20'
+		expect(dateToFormatFr(value)).toEqual('20/04/1976')
+	})
+
+	it('dateToFormatFr transform a "dd/mm/yyyy" date into a "yyyy-mm-dd" date', () => {
+		const value = '20/04/1976'
+		expect(dateToBasicFormat(value)).toEqual('1976-04-20')
+	})
+
+	it('stringToDate transform a string "yyyy-mm-dd" date into a object Date"', () => {
+		const value = '1976-04-20'
+		expect(stringToDate(value)).toBeInstanceOf(Date)
+	})
+})

package/src/utils/amelipro/numberHelper/numberHelper.ts

@@ -0,0 +1,20 @@
+/**
+ * Regular expression to match number format.
+ * @type {RegExp}
+ */
+const NUMBER_REGEX = /^(-)?\d*([,.]\d+)?$/i
+
+/**
+ * Checks if a given string matches the regex.
+ * @param {number | string | null | undefined} value - The value to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export const numberMatchRegex = (value: number | string | null | undefined): boolean => {
+	if (typeof value !== 'string' && typeof value !== 'number') {
+		return false
+	}
+	return NUMBER_REGEX.test(String(value))
+}
+
+export const parseToNumber = (value: number | string): number => Number((String(value)).replace(',', '.'))
+export const parseToFrNumberFormat = (value: number | string): string => (String(value)).replace('.', ',')

package/src/utils/amelipro/numberHelper/tests/numberHelper.spec.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import { numberMatchRegex, parseToNumber, parseToFrNumberFormat } from '../numberHelper'
+
+describe('numberHelper', () => {
+	it('wrong value does not match the number regex', () => {
+		const value = numberMatchRegex('abcd')
+		expect(value).toBeFalsy()
+	})
+
+	it('good value matches the number regex', () => {
+		const value = numberMatchRegex('325.76')
+		expect(value).toBeTruthy()
+	})
+
+	it('transform "," into "." and make it a number', () => {
+		const value = '1230,723'
+		expect(parseToNumber(value)).toEqual(1230.723)
+	})
+
+	it('transform "." into "," and make it a string', () => {
+		const value = 1230.723
+		expect(parseToFrNumberFormat(value)).toEqual('1230,723')
+	})
+})

package/src/utils/amelipro/rules/maxNumber/index.ts

@@ -0,0 +1,24 @@
+import type { ValidationResult, ValidationRule } from '@/utils/rules/types'
+import { numberMatchRegex, parseToFrNumberFormat, parseToNumber } from '../../numberHelper/numberHelper'
+import { ref } from 'vue'
+
+// On a besoin de tester si le nombre reçu est inférieur ou égal au nombre maximal autorisé
+export type Value = string
+
+export function maxNumberRule(maxNumber: string | number): ValidationRule<Value> {
+	return (value: Value): ValidationResult => {
+		if (value === '' || value === undefined || value === null) {
+			return true
+		}
+		const valueHasGoodFormat = numberMatchRegex(value)
+		const maxDateHasGoodFormat = numberMatchRegex(maxNumber)
+		const valid = ref(false)
+		if (valueHasGoodFormat && maxDateHasGoodFormat) {
+			const numberToTest = parseToNumber(value)
+			const maxNumberAsNumber = parseToNumber(maxNumber)
+			valid.value = Boolean(numberToTest <= maxNumberAsNumber)
+		}
+
+		return valid.value || `Le nombre saisi doit être inférieur ou égal à ${parseToFrNumberFormat(maxNumber)}.`
+	}
+}

package/src/utils/amelipro/rules/maxNumber/tests/maxNumber.spec.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { maxNumberRule } from '..'
+
+describe('dateHelper', () => {
+	const limitNumber = '123'
+	const underNumber = '122,99'
+	const overNumber = '123.01'
+
+	const rule = maxNumberRule(limitNumber)
+
+	it('number over the limit returns string', () => {
+		expect(rule(overNumber)).toEqual('Le nombre saisi doit être inférieur ou égal à 123.')
+	})
+
+	it('number under the limit returns true', () => {
+		expect(rule(underNumber)).toEqual(true)
+	})
+
+	it('returns true if value is an empty string', () => {
+		expect(rule('')).toEqual(true)
+	})
+})

package/src/utils/amelipro/rules/minNumber/index.ts

@@ -0,0 +1,24 @@
+import type { ValidationResult, ValidationRule } from '@/utils/rules/types'
+import { numberMatchRegex, parseToFrNumberFormat, parseToNumber } from '../../numberHelper/numberHelper'
+import { ref } from 'vue'
+
+// On a besoin de tester si le nombre reçu est supérieur ou égal au nombre  minimal autorisé
+export type Value = string
+
+export function minNumberRule(minNumber: string | number): ValidationRule<Value> {
+	return (value: Value): ValidationResult => {
+		if (value === '' || value === undefined || value === null) {
+			return true
+		}
+		const valueHasGoodFormat = numberMatchRegex(value)
+		const minDateHasGoodFormat = numberMatchRegex(minNumber)
+		const valid = ref(false)
+		if (valueHasGoodFormat && minDateHasGoodFormat) {
+			const numberToTest = parseToNumber(value)
+			const minNumberAsNumber = parseToNumber(minNumber)
+			valid.value = Boolean(numberToTest >= minNumberAsNumber)
+		}
+
+		return valid.value || `Le nombre saisi doit être supérieur ou égal à ${parseToFrNumberFormat(minNumber)}.`
+	}
+}

package/src/utils/amelipro/rules/minNumber/tests/minNumber.spec.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { minNumberRule } from '..'
+
+describe('dateHelper', () => {
+	const limitNumber = '123'
+	const underNumber = '122,99'
+	const overNumber = '123.01'
+
+	const rule = minNumberRule(limitNumber)
+
+	it('number under the limit returns string', () => {
+		expect(rule(underNumber)).toEqual('Le nombre saisi doit être supérieur ou égal à 123.')
+	})
+
+	it('number over the limit returns true', () => {
+		expect(rule(overNumber)).toEqual(true)
+	})
+
+	it('returns true if value is an empty string', () => {
+		expect(rule('')).toEqual(true)
+	})
+})

package/src/utils/amelipro/rules/notAfterDate/index.ts

@@ -0,0 +1,33 @@
+import type { ValidationResult, ValidationRule } from '@/utils/rules/types'
+import { dateMatchFrIso, dateMatchIso, dateToBasicFormat, dateToFormatFr, stringToDate } from '../../dateHelper/dateHelper'
+import { ref } from 'vue'
+
+// On a besoin de tester si la date reçue est inférieure ou égale à la date maximale autorisée
+export type Value = string
+
+export function notAfterDate(maxDate: string, fieldType: string): ValidationRule<Value> {
+	return (value: Value): ValidationResult => {
+		if (value === '' || value === undefined || value === null) {
+			return true
+		}
+
+		const currentValue = ref(value)
+		if (fieldType === 'text' && dateMatchFrIso(value)) {
+			currentValue.value = dateToBasicFormat(value)
+		}
+
+		const valueHasGoodFormat = dateMatchIso(currentValue.value)
+		const maxDateHasGoodFormat = dateMatchIso(maxDate)
+		let valid = false
+		if (valueHasGoodFormat && maxDateHasGoodFormat) {
+			const dateToTest = stringToDate(currentValue.value)
+			const maxDateAsDate = stringToDate(maxDate)
+
+			if (dateToTest && maxDateAsDate) {
+				valid = Boolean(dateToTest <= maxDateAsDate)
+			}
+		}
+
+		return valid || `La date saisie doit être antérieure ou égale au ${dateToFormatFr(maxDate)}.`
+	}
+}

package/src/utils/amelipro/rules/notAfterDate/tests/notAfterDate.spec.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import { notAfterDate } from '..'
+import { dateToFormatFr } from '@/utils/amelipro/dateHelper/dateHelper'
+
+describe('notAfterDate', () => {
+	const currentDate = '2025-03-05'
+	const pastDate = '2025-03-04'
+	const futureDate = '2025-03-06'
+
+	const rule = notAfterDate(currentDate, 'date')
+	const ruleTextField = notAfterDate(currentDate, 'text')
+
+	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)
+	})
+
+	it('rule for text type returns true with a past date', () => {
+		expect(ruleTextField(dateToFormatFr(pastDate))).toBe(true)
+	})
+
+	it('rule for text type returns an error with a future date', () => {
+		expect(typeof ruleTextField(dateToFormatFr(futureDate))).toBe('string')
+	})
+})