refactor: update validateUsername function to use ValidateFunctions type and enhance documentation

Author: gabriel-logan

src/app/[locale]/(doc-session)/documentation/js/functions/validateUsername/page.tsx

@@ -54,11 +54,21 @@ export default async function ValidateUsername({
 
 				<h2 className="subtitle">{t("Function Signature")}</h2>
 
-				<SyntaxHighlighter language="javascript" style={a11yDark}>
-					{`interface OptionsParams {
+				<SyntaxHighlighter language="typescript" style={a11yDark}>
+					{`type ValidateFunctions =
+	| {
+			isValid: true;
+			errorMsg: null;
+	  }
+	| {
+			isValid: false;
+			errorMsg: string;
+	  };
+
+interface OptionsParams {
 	minLength?: number;
 	maxLength?: number;
-	cbValidate?: (username: string) => boolean;
+	cbValidate?: (username: string) => ValidateFunctions;
 	errorMsg?: (string | null)[];
 }
 
@@ -77,7 +87,7 @@ function validateUsername(
 		cbValidate,
 		errorMsg,
 	}: OptionsParams = defaultOptionsParams,
-): { isValid: boolean, errorMsg: string | null };`}
+): ValidateFunctions {}`}
 				</SyntaxHighlighter>
 
 				<h2 className="subtitle">{t("Parameters")}</h2>
@@ -99,9 +109,9 @@ function validateUsername(
 						)}
 					</li>
 					<li>
-						<code>cbValidate</code> ((username: string) -&gt; boolean){" "}
+						<code>cbValidate</code> ((username: string) -&gt; ValidateFunctions){" "}
 						[optional] - A custom validation function that takes the username as
-						an argument and returns a boolean. Default is undefined.
+						an argument and returns a ValidateFunctions. Default is undefined.
 					</li>
 					<li>
 						<code>errorMsg</code> (string[]){" "}
@@ -118,7 +128,6 @@ function validateUsername(
 	"Username cannot be empty",
 	"Username too short",
 	"This username is too long",
-	"Invalid username",
 ];`}
 				</SyntaxHighlighter>
 
@@ -145,7 +154,19 @@ console.log(validateUsername('user123', { minLength: 5, maxLength: 10 }));
 // Output: { isValid: true, errorMsg: null }
 
 console.log(validateUsername('user1', { 
-    cbValidate: (value) => value.length > 5 
+	cbValidate: (username: string) => {
+		if (username !== "User123") {
+			return {
+				isValid: false,
+				errorMsg: "Invalid username",
+			};
+		}
+
+		return {
+			isValid: true,
+			errorMsg: null,
+		};
+	},
 })); // Output: { isValid: false, errorMsg: 'Invalid username' }`}
 				</SyntaxHighlighter>
 			</div>

src/app/[locale]/(doc-session)/documentation/js/subComponents/MainPageSyntexHightlighter.tsx

@@ -68,7 +68,7 @@ export function UsageCDNExample() {
 	return (
 		<SyntaxHighlighter language="html" style={a11yDark}>
 			{`<script type="module">
-	import { isEmail, cpfIsValid } from "https://cdn.jsdelivr.net/npm/multiform-validator@2.3.1/+esm";
+	import { isEmail, cpfIsValid } from "https://cdn.jsdelivr.net/npm/multiform-validator@2.4.0/+esm";
 	const emailResult = isEmail("123456");
 	const cpfResult = cpfIsValid("123456");
 
@@ -85,21 +85,21 @@ export function Cdns() {
 			<div className="mb-4">
 				<h3 className="mb-2">jsDelivr</h3>
 				<SyntaxHighlighter language="bash" style={a11yDark}>
-					https://cdn.jsdelivr.net/npm/multiform-validator@2.3.1/+esm
+					https://cdn.jsdelivr.net/npm/multiform-validator@2.4.0/+esm
 				</SyntaxHighlighter>
 				<SyntaxHighlighter language="html" style={a11yDark}>
 					{`<script type="module">
-	import multiformValidator from "https://cdn.jsdelivr.net/npm/multiform-validator@2.3.1/+esm"
+	import multiformValidator from "https://cdn.jsdelivr.net/npm/multiform-validator@2.4.0/+esm"
 </script>`}
 				</SyntaxHighlighter>
 			</div>
 			<div className="mb-4">
 				<h3 className="mb-2">unpkg</h3>
 				<SyntaxHighlighter language="bash" style={a11yDark}>
-					https://unpkg.com/multiform-validator@2.3.1/dist/cjs/index.cjs
+					https://unpkg.com/multiform-validator@2.4.0/dist/cjs/index.cjs
 				</SyntaxHighlighter>
 				<SyntaxHighlighter language="html" style={a11yDark}>
-					{`<script src="https://unpkg.com/multiform-validator@2.3.1/dist/cjs/index.cjs"></script>`}
+					{`<script src="https://unpkg.com/multiform-validator@2.4.0/dist/cjs/index.cjs"></script>`}
 				</SyntaxHighlighter>
 			</div>
 		</>