namirasoft-site-react 1.3.61 → 1.3.63

package/src/components/NSInputText.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputText.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputText from '../assets/images/icon-input-text.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputTextProps extends BaseComponentProps
+export interface NSInputTextProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +20,7 @@ export interface NSInputTextProps extends BaseComponentProps
 export interface NSInputTextState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputText extends React.Component<NSInputTextProps, NSInputTextState>
@@ -23,15 +28,26 @@ export class NSInputText extends React.Component<NSInputTextProps, NSInputTextSt
     constructor(props: NSInputTextProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props)
+        );
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value: string): void
@@ -47,24 +63,27 @@ export class NSInputText extends React.Component<NSInputTextProps, NSInputTextSt
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputText}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="text"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                />
-
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+                    <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputText}
+                        alt="Text Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="text"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputTime.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputTime.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputTime from '../assets/images/icon-input-time.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputTimeProps extends BaseComponentProps
+export interface NSInputTimeProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +20,7 @@ export interface NSInputTimeProps extends BaseComponentProps
 export interface NSInputTimeState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeState>
@@ -23,15 +28,27 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
     constructor(props: NSInputTimeProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorTime(this.props.title, this.state.value)
+        );
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value: string): void
@@ -47,24 +64,28 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputTime}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="time"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                    step="2"
-                />
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+                    <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+                    <img
+                        className={Styles.ns_input_icon}
+                        src={IconInputTime}
+                        alt="Time Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="time"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                        step="2"
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSLayoutTitle.tsx

@@ -1,7 +1,4 @@
-"use client";
-
 import Styles from './NSLayoutTitle.module.css';
-import { Component } from 'react';
 import { ReactNode } from 'react';
 import { NSLayout, NSLayoutProps } from './NSLayout';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
@@ -14,32 +11,29 @@ export interface NSLayoutTitleProps extends NSLayoutProps, BaseComponentProps
 	children: ReactNode;
 }
 
-export class NSLayoutTitle extends Component<NSLayoutTitleProps>
+export function NSLayoutTitle(props: NSLayoutTitleProps)
 {
-	override render()
-	{
-		let lines = (this.props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
-		return (
-			<NSLayout {...this.props}>
-				<NSSpace size={NSSpaceSizeType.SMALL}></NSSpace>
-				<div>
-					<h1 className={Styles.title}>{this.props.title}</h1>
-					{
-						this.props.description && lines &&
-						<p className={Styles.description}>{
-							lines.map((line, index) =>
-							{
-								return <>
-									{line.trim()}
-									{index != lines.length - 1 && <br />}
-								</>;
-							})
-						}</p>
-					}
-					<NSSpace size={NSSpaceSizeType.NORMAL}></NSSpace>
-				</div>
-				{this.props.children}
-			</NSLayout>
-		);
-	}
+	let lines = (props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
+	return (
+		<NSLayout {...props}>
+			<NSSpace size={NSSpaceSizeType.SMALL}></NSSpace>
+			<div>
+				<h1 className={Styles.title}>{props.title}</h1>
+				{
+					props.description && lines &&
+					<p className={Styles.description}>{
+						lines.map((line, index) =>
+						{
+							return <>
+								{line.trim()}
+								{index != lines.length - 1 && <br />}
+							</>;
+						})
+					}</p>
+				}
+				<NSSpace size={NSSpaceSizeType.NORMAL}></NSSpace>
+			</div>
+			{props.children}
+		</NSLayout>
+	);
 }

package/src/components/{NSLinkBlue.module.css → NSLink.module.css}

@@ -9,8 +9,8 @@
 
 .ns_link {
 	text-decoration: none;
-	background-color: #366EFF;
-	box-shadow: inset 2px 2px 2px 0 #1754F3;
+	/* box-shadow: inset 2px 2px 2px 0 #1754F3; */
+	box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
 	color: #fff;
 	font-size: 16px;
 	font-weight: 600;
@@ -20,7 +20,7 @@
 	align-items: center;
 	padding: 16px 32px;
 	border-radius: 24px;
-	max-width: 358px;
+	max-width: 272px;
 	width: 100%;
 }
 

package/src/components/NSLink.tsx

@@ -0,0 +1,22 @@
+import { BaseComponentProps } from "../props/BaseComponentProps";
+import { LinkProps } from "../props/LinkProps";
+import Styles from "./NSLink.module.css";
+
+export interface NSLinkProps extends LinkProps, BaseComponentProps
+{
+}
+
+export function NSLink(props: NSLinkProps)
+{
+	return (
+		<div
+			id={props.id}
+			className={`${Styles.ns_link_parent} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<a className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`} href={props.href} target={props?.target ?? "_self"} >
+				{props.title}
+			</a>
+		</div>
+	);
+}

package/src/components/NSLinkBlue.tsx

@@ -1,22 +1,6 @@
-import { BaseComponentProps } from "../props/BaseComponentProps";
-import { LinkProps } from "../props/LinkProps";
-import Styles from "./NSLinkBlue.module.css";
+import { NSLink, NSLinkProps } from "./NSLink";
 
-export interface NSLinkBlueProps extends LinkProps, BaseComponentProps
+export function NSLinkBlue(props: NSLinkProps)
 {
-}
-
-export function NSLinkBlue(props: NSLinkBlueProps)
-{
-	return (
-		<div
-			id={props.id}
-			className={Styles.ns_link_parent}
-			style={props.style}
-		>
-			<a className={`text-white text-decoration-none ${props.title ? Styles.ns_link : Styles.ns_link_absolute}`} href={props.href} target={props?.target ?? "_self"} >
-				{props.title}
-			</a>
-		</div>
-	)
+	return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "#366EFF" }} title={props.title} href={props.href} target={props.target} />;
 }

package/src/components/NSLinkGreen.tsx

@@ -1,45 +1,6 @@
-"use client";
+import { NSLink, NSLinkProps } from "./NSLink";
 
-import Style from "./NSLinkGreen.module.css";
-import React from "react";
-import { Link } from "react-router-dom";
-import { BaseComponentProps } from "../props/BaseComponentProps";
-
-export interface NSLinkGreenProps extends BaseComponentProps
-{
-    title: string;
-    href: string;
-}
-
-export interface NSLinkGreenState
-{
-    title: string;
-    href: string;
-}
-
-export class NSLinkGreen extends React.Component<NSLinkGreenProps, NSLinkGreenState>
+export function NSLinkGreen(props: NSLinkProps)
 {
-    constructor(props: NSLinkGreenProps)
-    {
-        super(props);
-        this.state = { title: props.title, href: props.href };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    setHRef(href: string)
-    {
-        this.setState({ href });
-    }
-    override render()
-    {
-        return (
-            <Link className="text-white text-decoration-none" to={this.state.href}>
-                <div className={Style.ns_link_green}>
-                    {this.state.title}
-                </div>
-            </Link>
-        )
-    }
+    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "#06D182" }} title={props.title} href={props.href} target={props.target} />;
 }

package/src/components/NSLinkRed.tsx

@@ -1,45 +1,6 @@
-"use client";
+import { NSLink, NSLinkProps } from "./NSLink";
 
-import Style from "./NSLinkRed.module.css";
-import React from "react";
-import { Link } from "react-router-dom";
-import { BaseComponentProps } from "../props/BaseComponentProps";
-
-export interface NSLinkRedProps extends BaseComponentProps
-{
-    title: string;
-    href: string;
-}
-
-export interface NSLinkRedState
-{
-    title: string;
-    href: string;
-}
-
-export class NSLinkRed extends React.Component<NSLinkRedProps, NSLinkRedState>
+export function NSLinkRed(props: NSLinkProps)
 {
-    constructor(props: NSLinkRedProps)
-    {
-        super(props);
-        this.state = { title: props.title, href: props.href };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    setHRef(href: string)
-    {
-        this.setState({ href });
-    }
-    override render()
-    {
-        return (
-            <Link className="text-white text-decoration-none" to={this.state.href}>
-                <div className={Style.ns_link_red}>
-                    {this.state.title}
-                </div>
-            </Link>
-        )
-    }
+    return <NSLink id={props.id} classList={props.classList} style={{ ...props.style, backgroundColor: "rgb(265, 63, 63, 1)" }} title={props.title} href={props.href} target={props.target} />;
 }

package/src/components/NSNotification.tsx

@@ -1,6 +1,3 @@
-"use client";
-
-import React from "react";
 import Exit from '../assets/images/close-vector.png';
 import Styles from "./NSNotification.module.css";
 import { BaseComponentProps } from "../props/BaseComponentProps";
@@ -9,11 +6,7 @@ export interface NSNotificationProps extends BaseComponentProps
 {
     title: string;
     type: NSNotificationType;
-}
-
-export interface NSNotificationState
-{
-    show: boolean;
+    onClose: () => void;
 }
 
 export enum NSNotificationType
@@ -25,48 +18,23 @@ export enum NSNotificationType
     RED = "RED",
 }
 
-export class NSNotification extends React.Component<NSNotificationProps, NSNotificationState>
+export function NSNotification(props: NSNotificationProps)
 {
-    constructor(props: NSNotificationProps)
-    {
-        super(props);
-        this.state = {
-            show: true,
-        };
-    }
-
-    override componentDidMount(): void
-    {
-        setTimeout(() => { this.handleDestroy() }, 8000);
-    }
-
-    handleDestroy = () =>
-    {
-        this.setState({ show: false });
-    };
-
-    override render()
-    {
-        let className = Styles["ns_" + this.props.type.toString().toLowerCase];
-        return <>
-            {
-                this.state.show && (
-                    <div id={this.props.id}
-                        className={`${Styles.ns_messenger} ${className}`}
-                        style={this.props.style}
-                    >
-                        <p className={`mb-0 ns-font-16-normal`}>{this.props.title}</p>
-                        <img
-                            className={Styles.ns_exit_icon}
-                            src={Exit}
-                            alt="exit"
-                            width={32}
-                            height={32}
-                            onClick={() => this.handleDestroy()}
-                        />
-                    </div>
-                )
-            }
-        </>
-    }
+    let className = Styles["ns_" + props.type.toString().toLowerCase];
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_messenger} ${className}`}
+            style={props.style}
+        >
+            <p className={`mb-0 ns-font-16-normal`}>{props.title}</p>
+            <img
+                className={Styles.ns_exit_icon}
+                src={Exit}
+                alt="exit"
+                width={32}
+                height={32}
+                onClick={props.onClose}
+            />
+        </div>
+    );
 }