namirasoft-site-react 1.3.61 → 1.3.63

package/src/components/NSButton.module.css

@@ -10,5 +10,5 @@
     justify-content: center;
     text-decoration: none;
     max-width: 100%;
-    width: 128px;
+    width: 304px;
 }

package/src/components/NSButtonBlue.tsx

@@ -4,8 +4,10 @@ import { NSButtonProps } from "./NSButton";
 
 export function NSButtonBlue(props: NSButtonProps) 
 {
-    if (!props.classList)
-        props.classList = [];
-    props.classList.push(Style.ns_button_blue);
-    return <NSButton {...props} />;
+    let classList = []
+    if (props.classList)
+        classList.push(...props.classList);
+    classList.push(Style.ns_button_blue);
+
+    return <NSButton title={props.title} icon={props.icon} onClick={props.onClick} id={props.id} classList={classList} style={props.style} />;
 }

package/src/components/NSButtonGreen.tsx

@@ -4,8 +4,9 @@ import { NSButtonProps } from "./NSButton";
 
 export function NSButtonGreen(props: NSButtonProps) 
 {
-    if (!props.classList)
-        props.classList = [];
-    props.classList.push(Style.ns_button_green);
-    return <NSButton {...props} />;
+    let classList = []
+    if (props.classList)
+        classList.push(...props.classList);
+    classList.push(Style.ns_button_green);
+    return <NSButton title={props.title} icon={props.icon} onClick={props.onClick} id={props.id} classList={classList} style={props.style} />;
 }

package/src/components/NSButtonRed.tsx

@@ -4,8 +4,9 @@ import { NSButtonProps } from "./NSButton";
 
 export function NSButtonRed(props: NSButtonProps) 
 {
-    if (!props.classList)
-        props.classList = [];
-    props.classList.push(Style.ns_button_red);
-    return <NSButton {...props} />;
+    let classList = []
+    if (props.classList)
+        classList.push(...props.classList);
+    classList.push(Style.ns_button_red);
+    return <NSButton title={props.title} icon={props.icon} onClick={props.onClick} id={props.id} classList={classList} style={props.style} />;
 }

package/src/components/NSCard.module.css

@@ -9,8 +9,7 @@
 	box-shadow: 0 2px 10px 4px #00000040;
 	padding: 24px;
 	border-radius: 24px;
-	width: 100%;
-	max-width: 358px;
+	max-width: 272px;
 	position: relative;
 }
 
@@ -82,7 +81,7 @@
 	line-height: normal;
 	border-radius: 24px;
 	width: 100%;
-	max-width: 310px;
+	max-width: 272px;
 	margin-top: 24px;
 }
 

package/src/components/NSCopyToClipboard.module.css

@@ -1,7 +1,7 @@
 .ns_copy_to_clipboard {
     display: flex;
     flex-direction: column;
-    width: 326px;
+    width: 272px;
     color: #fff;
     position: relative;
     max-width: 100%;

package/src/components/NSCopyToClipboard.tsx

@@ -25,9 +25,9 @@ export function NSCopyToClipboard(props: NSCopyToClipboardProps)
                 <img
                     className={Styles.ns_copy_to_clipboard_icon}
                     src={IconInputString}
-                    alt="icon"
-                    width={16}
-                    height={16}
+                    alt="Copy Icon"
+                    width={24}
+                    height={24}
                     onClick={copyToClipboard}
                 />
                 <span>{props.value}</span>

package/src/components/NSEntityBar.module.css

@@ -7,7 +7,7 @@
 	padding: 24px;
 	box-shadow: 0 2px 10px 4px #00000040;
 	width: 100%;
-	max-width: 358px;
+	max-width: 304px;
 	border-radius: 24px;
 }
 
@@ -63,7 +63,7 @@
 
 	.ns_entity_bar_image_container {
 		width: 30%;
-		max-width: 310px;
+		max-width: 304px;
 	}
 
 	.ns_entity_bar_image_title {

package/src/components/NSEntityCardBackground.module.css

@@ -7,7 +7,7 @@
 	padding: 24px;
 	border-radius: 24px;
 	width: 100%;
-	max-width: 358px;
+	max-width: 304px;
 	position: relative;
 	color: #fff;
 	background-repeat: no-repeat;
@@ -25,4 +25,4 @@
 
 .ns_card_link_container {
 	width: 100%;
-}
+}

package/src/components/NSHeader.tsx

@@ -109,9 +109,9 @@ export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
                                             "https://static.namirasoft.com/icons/base/close-menu.svg"
                                             : "https://static.namirasoft.com/icons/base/menu.svg"
                                     }
-                                    alt="Menu"
-                                    width={19}
-                                    height={17}
+                                    alt="Menu Icon"
+                                    width={24}
+                                    height={24}
                                 />
                             </div>
 

package/src/components/NSInput.module.css

@@ -0,0 +1,29 @@
+.ns_input_parent {
+	display: flex;
+	flex-direction: column;
+	width: 272px;
+	color: #fff;
+	position: relative;
+	max-width: 100%;
+	padding: 8px;
+}
+
+.ns_input {
+	border-radius: 8px;
+	padding: 10px 12px;
+	font-size: 16px;
+	font-weight: 400;
+	border: 1px solid rgba(47, 0, 236, 0.6);
+}
+
+.ns_input_icon {
+	position: absolute;
+	right: 20px;
+	top: 51%;
+	z-index: 1;
+}
+
+.ns_input_title {
+	font-size: 16px;
+	font-weight: 400;
+}

package/src/components/NSInputDate.module.css

@@ -1,10 +1,11 @@
-.ns_parent_input {
+.ns_input_parent {
 	display: flex;
 	flex-direction: column;
-	width: 326px;
+	width: 272px;
 	color: #fff;
 	position: relative;
 	max-width: 100%;
+	padding: 8px;
 }
 
 .ns_input {
@@ -12,12 +13,14 @@
 	padding: 10px 12px;
 	font-size: 16px;
 	font-weight: 400;
+	border: 1px solid rgba(47, 0, 236, 0.6);
 }
 
 .ns_input_icon {
 	position: absolute;
 	right: 20px;
 	top: 51%;
+	z-index: 1;
 }
 
 .ns_input_title {

package/src/components/NSInputDate.tsx

@@ -2,10 +2,13 @@
 
 import React from "react";
 import Styles from "./NSInputDate.module.css";
+import IconInputDate from '../assets/images/icon-input-date.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
+import { ValidationProps } from "../props/ValidationProps";
+import { Validator } from "../Validator";
 
-export interface NSInputDateProps extends BaseComponentProps
+export interface NSInputDateProps extends BaseComponentProps, ValidationProps
 {
     title: string;
     defaultValue?: string;
@@ -24,15 +27,26 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
     constructor(props: NSInputDateProps)
     {
         super(props);
-        this.state = {
-            value: ""
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorDate(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
@@ -49,17 +63,22 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
     {
         return (
             <>
-                <div className={`${Styles.ns_parent_input} p-2 ${this.props.classList?.join(" ")}`}
-                    style={this.props.style}
-                >
-                    <span className={Styles.ns_input_title}>{this.props.title}</span>
+                <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={IconInputDate}
+                        alt="Date Icon"
+                        width={24}
+                        height={24}
+                    />
                     <input
+                        id={this.props.id}
                         value={this.state.value}
                         onChange={this.onChanged}
                         type="date"
                         className={Styles.ns_input}
                         placeholder={this.props.placeholder}
-                        id={this.props.id}
                         onClick={() => { }}
                     />
                 </div>
@@ -67,6 +86,4 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
             </>
         );
     }
-}
-
-
+}

package/src/components/NSInputDuration.tsx

@@ -1,11 +1,16 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputDuration.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputDuration from '../assets/images/icon-input-duration.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSInputDurationProps extends BaseComponentProps
+export interface NSInputDurationProps extends BaseComponentProps, ValidationProps, ValidationStringProps, ValidationNumberProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +21,7 @@ export interface NSInputDurationProps extends BaseComponentProps
 export interface NSInputDurationState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputDuration extends React.Component<NSInputDurationProps, NSInputDurationState>
@@ -23,15 +29,26 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
     constructor(props: NSInputDurationProps)
     {
         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.getErrorDuration(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 NSInputDuration extends React.Component<NSInputDurationProps, NSInp
     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={IconInputDuration}
-                    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={IconInputDuration}
+                        alt="Duration 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/NSInputEmail.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputEmail.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
 import { Validator } from "../Validator";
 import { ValidationProps } from "../props/ValidationProps";
@@ -13,8 +13,8 @@ export interface NSInputEmailProps extends BaseComponentProps, ValidationProps,
 {
     title: string;
     defaultValue?: string;
-    placeholder?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
 }
 
 export interface NSInputEmailState
@@ -35,7 +35,11 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
     }
     getError(): string | null
     {
-        return Validator.getErrorString(this.props.title, this.state.value, this.props) && Validator.getErrorEmail(this.props.title, this.state.value);
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorString(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorEmail(this.props.title, this.state.value)
+        );
     }
     getValue(): string
     {
@@ -62,7 +66,7 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
         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>
+                    <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={IconInputEmail}
@@ -71,10 +75,11 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                         height={24}
                     />
                     <input
+                        id={this.props.id}
                         value={this.state.value}
                         onChange={this.onChanged}
                         type="email"
-                        className={`${this.state.error ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
+                        className={Styles.ns_input}
                         placeholder={this.props.placeholder}
                     />
                 </div>

package/src/components/NSInputFloat.tsx

@@ -1,24 +1,25 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputFloat.module.css";
+import Styles from "./NSInput.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 import { ValidationProps } from "../props/ValidationProps";
 import { ValidationNumberProps } from "../props/ValidationNumberProps";
 import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
 export interface NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps 
 {
     title: string;
-    defaultValue?: string;
+    defaultValue?: number;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
 }
 
 export interface NSInputFloatState
 {
-    value: string;
+    value?: number;
     error?: string;
 }
 
@@ -27,18 +28,19 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
     constructor(props: NSInputFloatProps)
     {
         super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
+        this.state = { value: props.defaultValue };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
     getError(): string | null
     {
-        return Validator.getErrorNumber(this.props.title, this.state.value, this.props);
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props) &&
+            Validator.getErrorNumber(this.props.title, this.state.value, this.props)
+        );
     }
-    getValue(): string
+    getValue(): number | undefined
     {
         let error = this.getError();
         if (error)
@@ -48,41 +50,40 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
         }
         return this.state.value;
     }
-    setValue(value: string): void
+    setValue(value: number | undefined): void
     {
         this.setState({ value });
     }
     private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        this.setValue(e.target.value);
+        this.setValue(parseFloat(e.target.value));
         if (this.props.onChanged)
             this.props.onChanged(e);
     }
     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.required && <span>*</span>
-                    }
-                    {this.props.title}
-                </span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputFloat}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="number"
-                    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={IconInputFloat}
+                        alt="Flaot Icon"
+                        width={24}
+                        height={24}
+                    />
+                    <input
+                        id={this.props.id}
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="number"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputIP.tsx

@@ -1,11 +1,15 @@
 "use client";
 
 import React from "react";
-import Styles from "./NSInputIP.module.css";
-import IconInputId from '../assets/images/icon-input-id.svg';
+import Styles from "./NSInput.module.css";
+import IconInputIP from '../assets/images/icon-input-ip.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 NSInputIPProps extends BaseComponentProps
+export interface NSInputIPProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
     title: string;
     defaultValue?: string;
@@ -16,6 +20,7 @@ export interface NSInputIPProps extends BaseComponentProps
 export interface NSInputIPState
 {
     value: string;
+    error?: string;
 }
 
 export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState>
@@ -23,15 +28,27 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState>
     constructor(props: NSInputIPProps)
     {
         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.getErrorIP(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,27 @@ export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState>
     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={IconInputId}
-                    alt="icon"
-                    width={24}
-                    height={24}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="number"
-                    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={IconInputIP}
+                        alt="IP 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} />
+            </>
         );
     }
 }