Skip to content

Commit

Permalink
chore: complete all texts pass to json en.json file
Browse files Browse the repository at this point in the history
  • Loading branch information
gabriel-logan committed May 28, 2024
1 parent 42b4539 commit 4d9396c
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 112 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,51 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";

import DrawerComponent from "@/components/Drawer";
import translation from "@/components/Internationalization";

export default function ValidatePhoneNumber() {
const t = (text: string) =>
translation({ text, subject: "DocumentationJsFunctions" });

return (
<div id="page-content-wrapper">
<div className="relative mr-10 flex justify-end p-4">
<DrawerComponent />
</div>
<div className="container-fluid container">
<h1 className="title">
Phone Number Validation Function Documentation
Phone Number Validation {t("Function Documentation")}
</h1>
<p>
The <code>validatePhoneNumber</code> function is used to validate
phone numbers. It returns an object with two properties:
&apos;isValid&apos; (boolean) and &apos;errorMsg&apos; (string). The
&apos;isValid&apos; property will be true if the phone number meets
the specified criteria, and &apos;errorMsg&apos; will contain the
error message if the phone number is invalid, or it will be null if
the phone number is valid.
{t("The")} <code>validatePhoneNumber</code>{" "}
{t(
'Function is used to validate phone numbers. It returns an object with two properties: "isValid" (boolean) and "errorMsg" (string). The "isValid" property will be true if the phone number meets the specified criteria, and "errorMsg" will contain the error message if the phone number is invalid, or it will be null if the phone number is valid.',
)}
</p>

<h2 className="subtitle">Function Signature</h2>
<h2 className="subtitle">{t("Function Signature")}</h2>
<SyntaxHighlighter language="javascript" style={a11yDark}>
{`function validatePhoneNumber(
phoneNumber: string,
errorMsg?: string[]
): { isValid: boolean, errorMsg: string | null };`}
</SyntaxHighlighter>

<h2 className="subtitle">Parameters</h2>
<h2 className="subtitle">{t("Parameters")}</h2>
<ul>
<li>
<code>phoneNumber</code> (string) - The phone number to be
validated.
<code>phoneNumber</code> (string) -{" "}
{t("The phone number to be validated.")}
</li>
<li>
<code>errorMsg</code> (string[]) [optional] - An array of error
messages to customize the response. If not provided, the function
will use default error messages.
<code>errorMsg</code> (string[]) {t("[optional]")} -{" "}
{t(
"An array of error messages to customize the response. If not provided, the function will use default error messages.",
)}
</li>
</ul>

<h2 className="subtitle">Default Error Messages</h2>
<h2 className="subtitle">{t("Default Error Messages")}</h2>
<SyntaxHighlighter language="javascript" style={a11yDark}>
{`[
'Invalid value passed',
Expand All @@ -55,7 +57,7 @@ export default function ValidatePhoneNumber() {
]`}
</SyntaxHighlighter>

<h2 className="subtitle">Examples</h2>
<h2 className="subtitle">{t("Examples")}</h2>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`const result1 = validatePhoneNumber('555-123-4567');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,29 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";

import DrawerComponent from "@/components/Drawer";
import translation from "@/components/Internationalization";

export default function ValidateSurname() {
const t = (text: string) =>
translation({ text, subject: "DocumentationJsFunctions" });

return (
<div id="page-content-wrapper">
<div className="relative mr-10 flex justify-end p-4">
<DrawerComponent />
</div>
<div className="container-fluid container">
<h1 className="title">Surname Validation Function Documentation</h1>
<h1 className="title">
Surname Validation {t("Function Documentation")}
</h1>
<p>
The <code>validateSurname</code> function is used to validate
surnames. It returns an object with two properties:
&apos;isValid&apos; (boolean) and &apos;errorMsg&apos; (string). The
&apos;isValid&apos; property will be true if the surname meets the
specified criteria, and &apos;errorMsg&apos; will contain the error
message if the surname is invalid, or it will be null if the surname
is valid.
{t("The")} <code>validateSurname</code>{" "}
{t(
"function is used to validate surnames. It returns an object with two properties: 'isValid' (boolean) and 'errorMsg' (string). The 'isValid' property will be true if the surname meets the specified criteria, and 'errorMsg' will contain the error message if the surname is invalid, or it will be null if the surname is valid.",
)}
</p>

<h2 className="subtitle">Function Signature</h2>
<h2 className="subtitle">{t("Function Signature")}</h2>
<SyntaxHighlighter language="javascript" style={a11yDark}>
{`function validateSurname(
surname: string,
Expand All @@ -35,27 +38,28 @@ export default function ValidateSurname() {
): { isValid: boolean, errorMsg: string | null };`}
</SyntaxHighlighter>

<h2 className="subtitle">Parameters</h2>
<h2 className="subtitle">{t("Parameters")}</h2>
<ul>
<li>
<code>surname</code> (string) - The surname to be validated.
<code>surname</code> (string) - {t("The surname to be validated.")}
</li>
<li>
<code>minLength</code> (number) [optional] - The minimum length of
the surname. Default is 1.
<code>minLength</code> (number) {t("[optional]")} -{" "}
{t("The minimum length of the surname. Default is 1.")}
</li>
<li>
<code>maxLength</code> (number) [optional] - The maximum length of
the surname. Default is 25.
<code>maxLength</code> (number) {t("[optional]")} -{" "}
{t("The maximum length of the surname. Default is 25.")}
</li>
<li>
<code>errorMsg</code> (string[]) [optional] - An array of error
messages to customize the response. If not provided, the function
will use default error messages.
<code>errorMsg</code> (string[]) {t("[optional]")} -{" "}
{t(
"An array of error messages to customize the response. If not provided, the function will use default error messages.",
)}
</li>
</ul>

<h2 className="subtitle">Default Error Messages</h2>
<h2 className="subtitle">{t("Default Error Messages")}</h2>
<SyntaxHighlighter language="javascript" style={a11yDark}>
{`[
'Invalid value passed',
Expand All @@ -67,7 +71,7 @@ export default function ValidateSurname() {
]`}
</SyntaxHighlighter>

<h2 className="subtitle">Examples</h2>
<h2 className="subtitle">{t("Examples")}</h2>
<SyntaxHighlighter language="javascript" style={a11yDark}>
{`const result1 = validateSurname("Jackson", {
minLength: 3,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,26 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";

import DrawerComponent from "@/components/Drawer";
import translation from "@/components/Internationalization";

export default function ValidateTextarea() {
const t = (text: string) =>
translation({ text, subject: "DocumentationJsFunctions" });

return (
<div id="page-content-wrapper">
<div className="relative mr-10 flex justify-end p-4">
<DrawerComponent />
</div>
<div className="container-fluid container">
<h1>validateTextarea Function</h1>
<h1>validateTextarea {t("Function Documentation")}</h1>
<p>
This function is a text area validation utility that checks the
validity of a given textarea string based on certain criteria.
{t(
"This function is a text area validation utility that checks the validity of a given textarea string based on certain criteria.",
)}
</p>

<h2>Function Signature</h2>
<h2>{t("Function Signature")}</h2>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`/**
Expand All @@ -36,51 +41,54 @@ export default function ValidateTextarea() {
*/`}
</SyntaxHighlighter>

<h2>Parameters</h2>
<h2>{t("Parameters")}</h2>
<ul>
<li>
<strong>textarea</strong> (string): The input textarea string to be
validated.
<strong>textarea</strong> (string):{" "}
{t("The input textarea string to be validated.")}
</li>
<li>
<strong>isRequired</strong> (boolean, optional, default: false): A
flag to determine if the textarea is required.
<strong>isRequired</strong> (boolean, optional, default: false):{" "}
{t("A flag to determine if the textarea is required.")}
</li>
<li>
<strong>maxLength</strong> (number, optional, default: 50): The
maximum allowed length for the textarea.
<strong>maxLength</strong> (number, optional, default: 50):{" "}
{t("The maximum allowed length for the textarea.")}
</li>
<li>
<strong>errorMsg</strong> (string array, optional, default:
predefined messages): An array of custom error messages for
different validation conditions. The array should contain three
elements corresponding to different error scenarios. If not
provided, default error messages will be used. Default Error
Messages:
predefined messages):{" "}
{t(
"An array of custom error messages for different validation conditions. The array should contain three elements corresponding to different error scenarios. If not provided, default error messages will be used. Default Error Messages:",
)}
<ul>
<li>Index 0: &apos;This textarea is too big&apos;</li>
<li>Index 1: &apos;Can not be empty&apos;</li>
<li>Index 2: &apos;Unknown error&apos;</li>
<li>{t('Index 0: "This textarea is too big"')}</li>
<li>{t('Index 1: "Can not be empty"')}</li>
<li>{t('Index 2: "Unknown error"')}</li>
</ul>
</li>
</ul>

<h2>Return Value</h2>
<h2>{t("Return Value")}</h2>
<p>
The function returns an object with two properties:
{t("The function returns an object with two properties:")}
<ul>
<li>
<strong>isValid</strong> (boolean): Indicates if the textarea is
valid based on the given criteria.
<strong>isValid</strong> (boolean):{" "}
{t(
"Indicates if the textarea is valid based on the given criteria.",
)}
</li>
<li>
<strong>errorMsg</strong> (string): Contains the corresponding
error message, if any, based on the validation result.
<strong>errorMsg</strong> (string):{" "}
{t(
"Contains the corresponding error message, if any, based on the validation result.",
)}
</li>
</ul>
</p>

<h2>Usage Examples</h2>
<h2>{t("Usage Examples")}</h2>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`validateTextarea("Some text content"); // Example 1
Expand All @@ -94,9 +102,10 @@ validateTextarea("Very long text...", { isRequired: false, maxLength: 10 }); //
</SyntaxHighlighter>

<p>
<strong>Note:</strong> The examples provided demonstrate how to use
the function with different parameters and show the expected return
values.
<strong>{t("Note:")}</strong>{" "}
{t(
"The examples provided demonstrate how to use the function with different parameters and show the expected return values.",
)}
</p>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,51 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";

import DrawerComponent from "@/components/Drawer";
import translation from "@/components/Internationalization";

export default function validateUSPhoneNumber() {
const t = (text: string) =>
translation({ text, subject: "DocumentationJsFunctions" });

return (
<div id="page-content-wrapper">
<div className="relative mr-10 flex justify-end p-4">
<DrawerComponent />
</div>
<div className="container-fluid container">
<h1 className="title">
US Phone Number Validation Function Documentation
US Phone Number Validation {t("Function Documentation")}
</h1>
<p>
The <code>validateUSPhoneNumber</code> function is used to validate US
phone numbers. It supports various formats, including
&quot;XXX-XXX-XXXX&quot;, &quot;(XXX) XXX-XXXX&quot;, and &quot;1
(XXX) XXX-XXXX&quot;. It returns an object with two properties:
&quot;isValid&quot; (boolean) and &quot;errorMsg&quot; (string). The
&quot;isValid&quot; property will be true if the phone number is
valid, and &quot;errorMsg&quot; will contain the error message if the
phone number is invalid, or it will be null if the phone number is
valid.
{t("The")} <code>validateUSPhoneNumber</code>{" "}
{t(
'function is used to validate US phone numbers. It supports various formats, including "XXX-XXX-XXXX", "(XXX) XXX-XXXX", and "1 (XXX) XXX-XXXX". It returns an object with two properties: "isValid" (boolean) and "errorMsg" (string). The "isValid" property will be true if the phone number is valid, and "errorMsg" will contain the error message if the phone number is invalid, or it will be null if the phone number is valid.',
)}
</p>

<h2 className="subtitle">Import</h2>
<p>
The function can be imported using ES6 syntax from the
&quot;multiform-validator&quot; package:
{t(
'The function can be imported using ES6 syntax from the "multiform-validator" package:',
)}
</p>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`import { validateUSPhoneNumber } from 'multiform-validator';`}
</SyntaxHighlighter>

<p>
Alternatively, you can import the function using CommonJS syntax with{" "}
{t(
"Alternatively, you can import the function using CommonJS syntax with",
)}{" "}
<code>require</code> (Node.js):
</p>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`const { validateUSPhoneNumber } = require('multiform-validator');`}
</SyntaxHighlighter>

<h2 className="subtitle">Function Signature</h2>
<h2 className="subtitle">{t("Function Signature")}</h2>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`function validateUSPhoneNumber(
Expand All @@ -55,20 +57,21 @@ export default function validateUSPhoneNumber() {
): { isValid: boolean, errorMsg: string | null };`}
</SyntaxHighlighter>

<h2 className="subtitle">Parameters</h2>
<h2 className="subtitle">{t("Parameters")}</h2>
<ul>
<li>
<code>phoneNumber</code> (string) - The US phone number to be
validated.
<code>phoneNumber</code> (string) -{" "}
{t("The US phone number to be validated.")}
</li>
<li>
<code>errorMsg</code> (string[]) [optional] - An array of error
messages to customize the response. If not provided, the function
will use default error messages.
<code>errorMsg</code> (string[]){" "}
{t(
"[optional] - An array of error messages to customize the response. If not provided, the function will use default error messages.",
)}
</li>
</ul>

<h2 className="subtitle">Default Error Messages</h2>
<h2 className="subtitle">{t("Default Error Messages")}</h2>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`[
Expand All @@ -78,7 +81,7 @@ export default function validateUSPhoneNumber() {
]`}
</SyntaxHighlighter>

<h2 className="subtitle">Examples</h2>
<h2 className="subtitle">{t("Examples")}</h2>

<SyntaxHighlighter language="javascript" style={a11yDark}>
{`const result1 = validateUSPhoneNumber('555-123-4567');
Expand Down
Loading

0 comments on commit 4d9396c

Please sign in to comment.