pmds-hub 20.1.0

package/libs/pmds-common/src/lib/utils/pmds-util-validators/index.ts

@@ -0,0 +1 @@
+export * from './pmds-util-validators.util';

package/libs/pmds-common/src/lib/utils/pmds-util-validators/pmds-util-validators.util.stories.ts

@@ -0,0 +1,65 @@
+////////Angular imports
+////////Component imports
+import {componentInfo} from "./story-helpers/pmds-util-validators-info-story";
+import {PmdsUtilValidatorsStoryComponent} from "./story-helpers/pmds-util-validators-story.component";
+
+export default {
+	title: 'Common/Utils/Validators',
+	tags: ['autodocs'],
+	component: PmdsUtilValidatorsStoryComponent,
+	argTypes: {
+		minTime: {
+			description: 'Min for PmdsUtilValidators.minTime',
+			control: {
+				type: 'text',
+			},
+		},
+		maxTime: {
+			description: 'Max for PmdsUtilValidators.maxTime',
+			control: {
+				type: 'text',
+			},
+		},
+		min: {
+			description: 'Min for PmdsUtilValidators.min',
+			control: {
+				type: 'number',
+			},
+		},
+		max: {
+			description: 'Max for PmdsUtilValidators.max',
+			control: {
+				type: 'number',
+			},
+		},
+		locale: {
+			description: 'Locale for PmdsUtilValidators.min and PmdsUtilValidators.max',
+			options: ['es-ES', 'en-EN'],
+			control: {
+				type: 'radio',
+			},
+		}
+	},
+	parameters: {
+		docs: {
+			subtitle: 'PmdsUtilValidators',
+			source: {type: "code"},
+			description: {
+				component: componentInfo,
+			},
+		},
+	},
+};
+
+export const Docs = {
+	args: {
+		minTime: '01:30',
+		maxTime: '12:30',
+		min: 5,
+		max: 5,
+		locale: 'es-ES',
+		minLengthArray: 2
+	},
+};
+
+

package/libs/pmds-common/src/lib/utils/pmds-util-validators/pmds-util-validators.util.ts

@@ -0,0 +1,188 @@
+////////Angular imports
+import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
+////////Component imports
+import { PmdsUtilNumberParser } from './utils/pmds-util-validators-number-parser';
+
+export class PmdsUtilValidators {
+	static validChars =
+		'a-zA-ZàèìòùÀÈÌÒÙáéíóúýÁÉÍÓÚÝâêîôûÂÊÎÔÛãñõÃÑÕäëïöüÿÄËÏÖÜŸçÇßØøÅåÆæœ';
+
+	static minTime(min: string): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			if (
+				PmdsUtilValidators.isEmptyValue(control.value) ||
+				PmdsUtilValidators.isEmptyValue(min)
+			) {
+				return null;
+			}
+			const hours: number = control.value.split(':')[0];
+			const minutes: number = control.value.split(':')[1];
+			const hoursMin: number = min.split(':')[0] as unknown as number;
+			const minutesMin: number = min.split(':')[1] as unknown as number;
+
+			return hours < hoursMin ||
+				(hours === hoursMin && minutes < minutesMin)
+				? { min: { min: min, actual: control.value } }
+				: null;
+		};
+	}
+
+	static maxTime(max: string): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			if (
+				PmdsUtilValidators.isEmptyValue(control.value) ||
+				PmdsUtilValidators.isEmptyValue(max)
+			) {
+				return null;
+			}
+			const hours: number = control.value.split(':')[0];
+			const minutes: number = control.value.split(':')[1];
+			const hoursMax: number = max.split(':')[0] as unknown as number;
+			const minutesMax: number = max.split(':')[1] as unknown as number;
+
+			return hours > hoursMax ||
+				(hours === hoursMax && minutes > minutesMax)
+				? { max: { max: max, actual: control.value } }
+				: null;
+		};
+	}
+
+	static min(min: number, locale: string = 'es-ES'): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			if (
+				PmdsUtilValidators.isEmptyValue(control.value) ||
+				PmdsUtilValidators.isEmptyValue(min)
+			) {
+				return null;
+			}
+			const value: number = new PmdsUtilNumberParser(locale).parse(
+				control.value
+			);
+			return !isNaN(value) && value < min
+				? { min: { min: min, actual: control.value } }
+				: null;
+		};
+	}
+
+	static max(max: number, locale: string = 'es-ES'): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			if (
+				PmdsUtilValidators.isEmptyValue(control.value) ||
+				PmdsUtilValidators.isEmptyValue(max)
+			) {
+				return null;
+			}
+			const value: number = new PmdsUtilNumberParser(locale).parse(
+				control.value
+			);
+			return !isNaN(value) && value > max
+				? { max: { max: max, actual: control.value } }
+				: null;
+		};
+	}
+
+	static nameRegex(
+		control: AbstractControl
+	): { [key: string]: unknown } | null {
+		if (control.value === null || control.value === undefined) {
+			return null;
+		}
+		if (control.value.length > 50) {
+			return {
+				maxlength: {
+					requiredLength: 50,
+					actualLength: control.value.length,
+				},
+			};
+		}
+		const value = control.value;
+		if (value.charAt(0) === ' ' || value.charAt(value.length - 1) === ' ') {
+			return { pattern: true };
+		}
+		const regex = new RegExp(`^(?:['_.,&\\-\\sa-zA-ZÁ-ÿ0-9])+$`);
+		const words: string[] = value.split(' ');
+		let isValid = true;
+		words.forEach((word) => {
+			!regex.test(word) && (isValid = false);
+		});
+		return isValid ? null : { pattern: true };
+	}
+
+	static emailRegex(
+		control: AbstractControl
+	): { [key: string]: unknown } | null {
+		const regex = new RegExp(
+			`^[${PmdsUtilValidators.validChars}0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-z]{2,}$`
+		);
+		if (control.value !== null) {
+			return regex.test(control.value) ? null : { pattern: true };
+		}
+		return null;
+	}
+
+	static noSpaces(
+		control: AbstractControl
+	): { [key: string]: unknown } | null {
+		if (control.value === null || control.value === undefined) {
+			return null;
+		}
+		return (control.value as string).indexOf(' ') >= 0
+			? { pattern: true }
+			: null;
+	}
+
+	static noWhitespace(
+		control: AbstractControl
+	): { [key: string]: unknown } | null {
+		return PmdsUtilValidators.isEmptyValue(control.value)
+			? { required: true }
+			: null;
+	}
+
+	static isEmptyValue(value?: unknown): boolean {
+		return (
+			value === null ||
+			value === undefined ||
+			(typeof value === 'string' &&
+				value.replace(/\s/g, '').length === 0) ||
+			(Array.isArray(value) && value.length === 0)
+		);
+	}
+
+	static studentId(control: AbstractControl): { [key: string]: any } | null {
+		if (control.value === null || control.value === undefined) {
+			return null;
+		}
+		const regex = new RegExp(`^[a-zA-ZÄ-ü0-9-_@.+]*$`);
+		return regex.test(control.value) ? null : { pattern: true };
+	}
+
+	static minLengthArray(min: number): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			if (control.value?.length >= min) return null;
+
+			return { min: { min: min, actual: control.value.length } };
+		};
+	}
+
+	static maxAmount(
+		max: number,
+		decimalCharacter: ',' | '.' = ','
+	): ValidatorFn {
+		return (control: AbstractControl): ValidationErrors | null => {
+			if (control.value) {
+				const parseValue =
+					decimalCharacter === ','
+						? Number(
+								control.value.toString().replace('.', '').replace(',', '.')
+						  )
+						: Number(control.value.toString().replace(',', ''));
+				if (parseValue < max) {
+					return null;
+				}
+				return { max: { max: max, actual: control.value } };
+			}
+			return null;
+		};
+	}
+}

package/libs/pmds-common/src/lib/utils/pmds-util-validators/story-helpers/pmds-util-validators-info-story.ts

@@ -0,0 +1,21 @@
+export const componentInfo = `
+Use this util to add custom validators to reactive forms
+
+Import in your component the **PmdsUtilValidators** from **@pmhub/pmds-common**
+
+~~~
+import {
+  PmdsUtilValidators
+} from '@pmhub/pmds-common';
+~~~
+
+Add in your reactive form control
+
+~~~
+this.fb.group({
+  control: ['', PmdsUtilValidators.{{validator name}}]
+})
+~~~
+
+Test it
+`

package/libs/pmds-common/src/lib/utils/pmds-util-validators/story-helpers/pmds-util-validators-story.component.ts

@@ -0,0 +1,214 @@
+////////Angular imports
+import { Component, inject, Input, OnInit } from '@angular/core';
+import {
+	FormBuilder,
+	FormGroup,
+	FormsModule,
+	ReactiveFormsModule,
+} from '@angular/forms';
+import { NgClass, NgFor } from '@angular/common';
+////////Component imports
+import { PmdsUtilValidators } from '../pmds-util-validators.util';
+import { PmdsCdkTimeInputComponent } from '@pmhub/pmds-cdk';
+import { PmdsCdkDropdownComponent } from '@pmhub/pmds-cdk';
+
+@Component({
+	selector: 'pmds-util-validators-story',
+	standalone: true,
+	imports: [
+		ReactiveFormsModule,
+		FormsModule,
+		NgClass,
+		NgFor,
+		PmdsCdkTimeInputComponent,
+		PmdsCdkDropdownComponent,
+	],
+	template: `
+		<form [formGroup]="form" class="flex flex-col">
+			<span>PmdsUtilValidators.minTime</span>
+			<span class="text-slate-400"
+				>(Validates that the time exceed the one indicated:
+				{{ this.minTime }})</span
+			>
+			<pmds-cdk-time-input
+				formControlName="timeMin"
+				[placeholder]="'placeholder'"
+				[options]="timeOptions"
+			></pmds-cdk-time-input>
+			<br />
+			<span>PmdsUtilValidators.maxTime</span>
+			<span class="text-slate-400"
+				>(Validates that the time does not exceed the one indicated:
+				{{ this.maxTime }})</span
+			>
+			<pmds-cdk-time-input
+				formControlName="timeMax"
+				[placeholder]="'placeholder'"
+				[options]="timeOptions"
+			></pmds-cdk-time-input>
+			<br />
+			<span>PmdsUtilValidators.minLengthArray</span>
+			<span class="text-slate-400"
+				>(Validates that is selected, at least, the indicated number of
+				items: {{ this.minLengthArray }})</span
+			>
+			<pmds-cdk-dropdown
+				formControlName="minLengthArray"
+				[placeholder]="'placeholder'"
+				[options]="options"
+				[multi]="true"
+				[literals]="dropdownLiterals"
+			></pmds-cdk-dropdown>
+			<br />
+			@for (control of controls; track control) {			  
+				<span>{{ control.name }}</span>
+				<span class="text-slate-400">({{ control.info }})</span>
+				<input
+					class="border rounded p-2 outline-none"
+					[type]="control.type"
+					[formControlName]="control.formControlName"
+					[ngClass]="{
+						'border-red-500': form.get(control.formControlName)
+							?.invalid
+					}"
+				/>
+				<br />
+			}
+			
+		</form>
+	`,
+})
+export class PmdsUtilValidatorsStoryComponent implements OnInit {
+	private formBuilder = inject(FormBuilder);
+
+	@Input() min!: number;
+	@Input() max!: number;
+	@Input() locale!: string;
+	@Input() minTime = '01:30';
+	@Input() maxTime = '12:30';
+	@Input() minLengthArray = 2;
+
+	form!: FormGroup;
+	controls: {
+		type: string;
+		formControlName: string;
+		name: string;
+		info: string;
+	}[] = [];
+	timeOptions = [
+		{
+			label: '07:00',
+			value: '07:00',
+		},
+		{
+			label: '08:00',
+			value: '08:00',
+		},
+		{
+			label: '15:00',
+			value: '15:00',
+		},
+		{
+			label: '16:00',
+			value: '16:00',
+		},
+		{
+			label: '23:59',
+			value: '23:59',
+		},
+	];
+	options = [
+		{
+			label: '1',
+			value: '1',
+		},
+		{
+			label: '2',
+			value: '2',
+		},
+		{
+			label: '3',
+			value: '3',
+		},
+		{
+			label: '4',
+			value: '4',
+		},
+	];
+	dropdownLiterals = {
+		accept: 'accept',
+	};
+	amountInputDoubleLiterals = {
+		titleFrom: 'Title',
+		titleTo: 'Title',
+		indicativeRate: 'Indicative rate 00:00',
+		aliasFrom: 'From [Source Account Alias]',
+		aliasTo: 'To [Source Account Alias]',
+		updatedAtFrom: 'Updated at 00/00/00 00:00',
+		updatedAtTo: 'Updated at 00/00/00 00:00',
+	};
+
+	ngOnInit(): void {
+		this.form = this.formBuilder.group({
+			min: ['', PmdsUtilValidators.min(this.min, this.locale)],
+			max: ['', PmdsUtilValidators.max(this.max, this.locale)],
+			noWhitespace: ['', PmdsUtilValidators.noWhitespace],
+			nameRegex: ['', PmdsUtilValidators.nameRegex],
+			noSpaces: ['', PmdsUtilValidators.noSpaces],
+			emailRegex: ['', PmdsUtilValidators.emailRegex],
+			studentId: ['', PmdsUtilValidators.studentId],
+			minLengthArray: [
+				'',
+				PmdsUtilValidators.minLengthArray(this.minLengthArray),
+			],
+			timeMin: ['', PmdsUtilValidators.minTime(this.minTime)],
+			timeMax: ['', PmdsUtilValidators.maxTime(this.maxTime)],
+			maxAmountFrom: ['', PmdsUtilValidators.maxAmount(1400000, ',')],
+			maxAmountTo: ['', PmdsUtilValidators.maxAmount(1400000, ',')],
+		});
+		this.controls = [
+			{
+				type: 'number',
+				formControlName: 'min',
+				name: 'PmdsUtilValidators.min',
+				info: `Validates that the number exceed the one indicated(${this.min}), if locale is diferent that 'es-ES' need add as second param(${this.locale})`,
+			},
+			{
+				type: 'number',
+				formControlName: 'max',
+				name: 'PmdsUtilValidators.max',
+				info: `validates that the number does not exceed the one indicated(${this.max}), if locale is diferent that 'es-ES' need add as second param(${this.locale})`,
+			},
+			{
+				type: 'text',
+				formControlName: 'noWhitespace',
+				name: 'PmdsUtilValidators.noWhitespace',
+				info: 'validates that the value is not just spaces',
+			},
+			{
+				type: 'text',
+				formControlName: 'nameRegex',
+				name: 'PmdsUtilValidators.nameRegex',
+				info: 'validates that there are no strange characters and only capital words',
+			},
+			{
+				type: 'text',
+				formControlName: 'noSpaces',
+				name: 'PmdsUtilValidators.noSpaces',
+				info: 'validates that that there are no spaces',
+			},
+			{
+				type: 'text',
+				formControlName: 'emailRegex',
+				name: 'PmdsUtilValidators.emailRegex',
+				info: 'validates email format',
+			},
+			{
+				type: 'text',
+				formControlName: 'studentId',
+				name: 'PmdsUtilValidators.studentId',
+				info: 'validates student ID',
+			},
+		];
+	}
+}

package/libs/pmds-common/src/lib/utils/pmds-util-validators/utils/pmds-util-validators-number-parser.ts

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export class PmdsUtilNumberParser {
+  private group: RegExp;
+  private decimal: RegExp;
+  private numeral: RegExp;
+  private index: unknown;
+
+  constructor(public locale: string) {
+    const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
+    const numerals = [
+      ...new Intl.NumberFormat(locale, { useGrouping: false }).format(
+        9876543210
+      ),
+    ].reverse();
+    const index = new Map(numerals.map((d, i) => [d, i]));
+    this.group = new RegExp(
+      `[${parts.find((d: any) => d.type === 'group')?.value}]`,
+      'g'
+    );
+    this.decimal = new RegExp(
+      `[${parts.find((d: any) => d.type === 'decimal')?.value}]`
+    );
+    this.numeral = new RegExp(`[${numerals.join('')}]`, 'g');
+    this.index = (d: string) => index.get(d);
+  }
+
+  parse(value: any): number {
+    value = value
+    .toString()
+    .trim()
+    .replace(this.group, '')
+    .replace(this.decimal, '.')
+    .replace(this.numeral, this.index)
+    return value
+      ? +value
+      : NaN;
+  }
+}

package/libs/pmds-common/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

package/libs/pmds-common/tailwind.config.js

@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+const { tailwindBaseConfig } = require('../../tailwind.base.config');
+const { libContent, ...rest } = tailwindBaseConfig;
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: [
+		join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+		...createGlobPatternsForDependencies(__dirname),
+		...libContent,
+	],
+	...rest,
+};

package/libs/pmds-common/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/libs/pmds-common/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "**/*.stories.ts",
+    "**/*.stories.js"
+  ],
+  "include": ["src/**/*.ts"]
+}

package/libs/pmds-common/tsconfig.lib.prod.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "outDir": "../../dist/out-tsc",
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "declaration": true,
+    "declarationMap": false,
+    "inlineSources": true,
+    "types": []
+  },
+  "files": [],
+  "exclude": [
+    "src/test-setup.ts",
+    "src/**/*.spec.ts",
+    "jest.config.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["src/**/*.ts"],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.prod.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    "compilationMode": "partial"
+  }
+}

package/libs/pmds-common/tsconfig.spec.json

@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}