namirasoft-site-react 1.3.59 → 1.3.60

package/src/components/NSEntityBar.tsx

@@ -2,8 +2,9 @@
 
 import { Component } from 'react';
 import Styles from './NSEntityBar.module.css'
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSEntityBarProps
+export interface NSEntityBarProps extends BaseComponentProps
 {
 	id?: string | number;
 	title: string;
@@ -14,7 +15,8 @@ export interface NSEntityBarProps
 	},
 }
 
-export class NSEntityBar extends Component<NSEntityBarProps> {
+export class NSEntityBar extends Component<NSEntityBarProps>
+{
 	override render()
 	{
 		return (

package/src/components/NSEntityCardBackground.tsx

@@ -5,9 +5,9 @@ import Styles from './NSEntityCardBackground.module.css'
 import { BackgroundProps } from '../props/BackgroundProps';
 import { NSLinkBlue } from './NSLinkBlue';
 import { LinkProps } from '../props/LinkProps';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-
-export interface NSEntityCardBackgroundProps
+export interface NSEntityCardBackgroundProps extends BaseComponentProps
 {
 	id?: string | number;
 	title: string;

package/src/components/NSFooter.tsx

@@ -3,8 +3,9 @@
 import React from "react";
 import Styles from "./NSFooter.module.css";
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSFooterProps
+export interface NSFooterProps extends BaseComponentProps
 {
     scope: string;
     name: string;
@@ -108,8 +109,8 @@ export class NSFooter extends React.Component<NSFooterProps, NSFooterState>
         else if (level === 0)
         {
             return (<>
-				<ul
-					key={filter.id}
+                <ul
+                    key={filter.id}
                     id={`dropdown_parent${filter.id}`}>
                     {filter.name}
                 </ul>
@@ -119,11 +120,11 @@ export class NSFooter extends React.Component<NSFooterProps, NSFooterState>
         else
         {
             return (
-				<li className="mb-2">
-					<a key={filter.id} href={filter.link?.url}>
-						{filter.name}
-					</a>
-				</li>
+                <li className="mb-2">
+                    <a key={filter.id} href={filter.link?.url}>
+                        {filter.name}
+                    </a>
+                </li>
             );
         }
     }

package/src/components/NSHeader.tsx

@@ -5,8 +5,9 @@ import Styles from "./NSHeader.module.css";
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
 import { BackgroundProps } from "../props/BackgroundProps";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSHeaderProps
+export interface NSHeaderProps extends BaseComponentProps
 {
     scope: string;
     name: string;
@@ -93,12 +94,12 @@ export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
                             }
                             <div className={Styles.ns_navbar_menu_icon} onClick={this.handleShowNavbar}>
                                 <img
-									src=
-									{
-										this.state.showNavbar ?
-											"https://static.namirasoft.com/icons/base/close-menu.svg"
-											: "https://static.namirasoft.com/icons/base/menu.svg"
-									}
+                                    src=
+                                    {
+                                        this.state.showNavbar ?
+                                            "https://static.namirasoft.com/icons/base/close-menu.svg"
+                                            : "https://static.namirasoft.com/icons/base/menu.svg"
+                                    }
                                     alt="Menu"
                                     width={19}
                                     height={17}
@@ -147,7 +148,7 @@ export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
         } else
         {
             return (
-				<a key={filter.id} className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
+                <a key={filter.id} className={`${Styles.ns_navbar_items_link} ${level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item}`} href={filter.link?.url}>{filter.name}</a>
             );
         }
     }

package/src/components/NSInputDate.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import Styles from "./NSInputDate.module.css";
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
 export interface NSInputDateProps extends BaseComponentProps
 {
@@ -15,14 +16,16 @@ export interface NSInputDateProps extends BaseComponentProps
 export interface NSInputDateState
 {
     value: string;
+    error?: string;
 }
 
-export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateState> {
+export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateState>
+{
     constructor(props: NSInputDateProps)
     {
         super(props);
         this.state = {
-            value: "",
+            value: ""
         };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
@@ -42,22 +45,24 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
         if (this.props.onChanged)
             this.props.onChanged(e);
     }
- 
     override render()
     {
         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>
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="date"
-                    className={Styles.ns_input}
-                    placeholder={this.props.placeholder}
-                    id="ns-input-date"
-                    onClick={()=>{}}
-                />
-            </div>
+            <>
+                <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>
+                    <input
+                        value={this.state.value}
+                        onChange={this.onChanged}
+                        type="date"
+                        className={Styles.ns_input}
+                        placeholder={this.props.placeholder}
+                        id="ns-input-date"
+                        onClick={() => { }}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSInputDuration.tsx

@@ -7,8 +7,8 @@ import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSInputDurationProps extends BaseComponentProps
 {
-	title: string;
-	defaultValue?: string;
+    title: string;
+    defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
 }
@@ -18,7 +18,8 @@ export interface NSInputDurationState
     value: string;
 }
 
-export class NSInputDuration extends React.Component<NSInputDurationProps, NSInputDurationState> {
+export class NSInputDuration extends React.Component<NSInputDurationProps, NSInputDurationState>
+{
     constructor(props: NSInputDurationProps)
     {
         super(props);
@@ -28,11 +29,11 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
         this.getValue = this.getValue.bind(this);
         this.setValue = this.setValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
-	}
-	getValue(): string
+    }
+    getValue(): string
     {
         return this.state.value;
-	}
+    }
     setValue(value: string): void
     {
         this.setState({ value });
@@ -42,8 +43,8 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
         this.setValue(e.target.value);
         if (this.props.onChanged)
             this.props.onChanged(e);
-	}
-	override render()
+    }
+    override render()
     {
         return (
             <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
@@ -57,7 +58,7 @@ export class NSInputDuration extends React.Component<NSInputDurationProps, NSInp
                 />
                 <input
                     value={this.state.value}
-					onChange={this.onChanged}
+                    onChange={this.onChanged}
                     type="time"
                     className={Styles.ns_input}
                     placeholder={this.props.placeholder}

package/src/components/NSInputEmail.tsx

@@ -7,6 +7,7 @@ import { Validator } from "../Validator";
 import { ValidationProps } from "../props/ValidationProps";
 import { ValidationStringProps } from "../props/ValidationStringProps";
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
 export interface NSInputEmailProps extends BaseComponentProps, ValidationProps, ValidationStringProps
 {
@@ -77,6 +78,7 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                         placeholder={this.props.placeholder}
                     />
                 </div>
+                <NSInputErrorNotifier error={this.state.error} />
             </>
         );
     }

package/src/components/NSInputErrorNotifier.tsx

@@ -0,0 +1,28 @@
+import Styles from "./NSInputErrorNotifier.module.css";
+import Danger from '../assets/images/danger.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
+
+export interface NSInputErrorNotifierProps extends BaseComponentProps
+{
+    error?: string;
+}
+
+export function NSInputErrorNotifier(props: NSInputErrorNotifierProps)
+{
+    return <>
+        {
+            props.error && (
+                <div className="d-flex justify-content-start align-items-center gap-2 ms-2">
+                    <img
+                        className={""}
+                        src={Danger}
+                        alt="Error Icon"
+                        width={13}
+                        height={13}
+                    />
+                    <span className={Styles.ns_input_error}>{props.error}</span>
+                </div >
+            )
+        }
+    </>;
+}

package/src/components/NSInputFloat.tsx

@@ -8,7 +8,7 @@ import { ValidationProps } from "../props/ValidationProps";
 import { ValidationNumberProps } from "../props/ValidationNumberProps";
 import { Validator } from "../Validator";
 
-export interface NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps
+export interface NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps 
 {
     title: string;
     defaultValue?: string;

package/src/components/NSInputIP.tsx

@@ -7,8 +7,8 @@ import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSInputIPProps extends BaseComponentProps
 {
-	title: string;
-	defaultValue?: string;
+    title: string;
+    defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
 }
@@ -18,7 +18,8 @@ export interface NSInputIPState
     value: string;
 }
 
-export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState> {
+export class NSInputIP extends React.Component<NSInputIPProps, NSInputIPState>
+{
     constructor(props: NSInputIPProps)
     {
         super(props);

package/src/components/NSInputInteger.tsx

@@ -18,7 +18,8 @@ export interface NSInputIntegerState
     value: string;
 }
 
-export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInputIntegerState> {
+export class NSInputInteger extends React.Component<NSInputIntegerProps, NSInputIntegerState>
+{
     constructor(props: NSInputIntegerProps)
     {
         super(props);

package/src/components/NSInputPhone.tsx

@@ -18,7 +18,8 @@ export interface NSInputPhoneState
     value: string;
 }
 
-export class NSInputPhone extends React.Component<NSInputPhoneProps, NSInputPhoneState> {
+export class NSInputPhone extends React.Component<NSInputPhoneProps, NSInputPhoneState>
+{
     constructor(props: NSInputPhoneProps)
     {
         super(props);

package/src/components/NSInputPrice.tsx

@@ -17,7 +17,8 @@ export interface NSInputPriceState
     value: number | undefined;
 }
 
-export class NSInputPrice extends React.Component<NSInputPriceProps, NSInputPriceState> {
+export class NSInputPrice extends React.Component<NSInputPriceProps, NSInputPriceState>
+{
     constructor(props: NSInputPriceProps)
     {
         super(props);

package/src/components/NSInputSearch.tsx

@@ -6,7 +6,7 @@ import IconInputSearch from '../assets/images/icon-input-search.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSInputSearchProps extends BaseComponentProps
-{ 
+{
     defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;
@@ -26,8 +26,8 @@ export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSe
             value: props.defaultValue ?? "",
         };
         this.getValue = this.getValue.bind(this);
-		this.setValue = this.setValue.bind(this);
-		this.onChanged = this.onChanged.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
     getValue(): string
     {

package/src/components/NSInputText.tsx

@@ -18,7 +18,8 @@ export interface NSInputTextState
     value: string;
 }
 
-export class NSInputText extends React.Component<NSInputTextProps, NSInputTextState> {
+export class NSInputText extends React.Component<NSInputTextProps, NSInputTextState>
+{
     constructor(props: NSInputTextProps)
     {
         super(props);

package/src/components/NSInputTime.tsx

@@ -18,7 +18,8 @@ export interface NSInputTimeState
     value: string;
 }
 
-export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeState> {
+export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeState>
+{
     constructor(props: NSInputTimeProps)
     {
         super(props);

package/src/components/NSLayout.tsx

@@ -4,12 +4,15 @@ import Styles from './NSLayout.module.css';
 import { ReactNode } from 'react';
 import { NSHeader } from './NSHeader';
 import { NSFooter } from './NSFooter';
+import { BaseComponentProps } from '../props/BaseComponentProps';
+import { NSNotification, NSNotificationProps } from './NSNotification';
 
-export interface NSLayoutProps
+export interface NSLayoutProps extends BaseComponentProps
 {
 	scope: string;
 	logo: string;
 	background?: string;
+	notifications: NSNotificationProps[];
 	children: ReactNode;
 }
 
@@ -18,6 +21,7 @@ export function NSLayout(props: NSLayoutProps)
 	return (
 		<div className={Styles.ns_container}>
 			<NSHeader scope={props.scope} name="Header" logo={props.logo} />
+			{props.notifications.map(props => <NSNotification {...props}></NSNotification>)}
 			<main className="d-flex flex-column text-white" style={{ background: props.background }}>
 				{props.children}
 			</main>

package/src/components/NSLayoutHeroBanner.tsx

@@ -1,15 +1,13 @@
 "use client";
 
 import { ReactNode } from 'react';
-import { NSLayout } from './NSLayout';
+import { NSLayout, NSLayoutProps } from './NSLayout';
 import Styles from './NSLayoutHeroBanner.module.css'
 import { Link } from 'react-router-dom';
-// import { NSHeader } from './NSHeader';
+import { BaseComponentProps } from '../props/BaseComponentProps';
 
-export interface NSLayoutHeroBannerProps
+export interface NSLayoutHeroBannerProps extends NSLayoutProps, BaseComponentProps
 {
-	scope: string;
-	logo: string;
 	title: string;
 	description?: string;
 	description_last?: string;
@@ -20,7 +18,7 @@ export interface NSLayoutHeroBannerProps
 export function NSLayoutHeroBanner(props: NSLayoutHeroBannerProps)
 {
 	return (
-		<NSLayout scope={props.scope} logo={props.logo} >
+		<NSLayout {...props} >
 			<div className={Styles.hero_holder}>
 				{/* <NSHeader name='Header' scope='Namira Software Corporation' logo='https://static.namirasoft.com/logo/namirasoft/base.png' /> */}
 				<section className={Styles.hero_wraper}>

package/src/components/NSLayoutTitle.tsx

@@ -3,14 +3,12 @@
 import Styles from './NSLayoutTitle.module.css';
 import { Component } from 'react';
 import { ReactNode } from 'react';
-import { NSLayout } from './NSLayout';
+import { NSLayout, NSLayoutProps } from './NSLayout';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { BaseComponentProps } from '../props/BaseComponentProps';
 
-export interface NSLayoutTitleProps
+export interface NSLayoutTitleProps extends NSLayoutProps, BaseComponentProps
 {
-	scope: string;
-	logo: string;
-	background?: string;
 	title: string;
 	description?: string;
 	children: ReactNode;
@@ -22,7 +20,7 @@ export class NSLayoutTitle extends Component<NSLayoutTitleProps>
 	{
 		let lines = (this.props.description ?? "").split(/(\n|\\n|<br>|<br\s*\/>)/gm);
 		return (
-			<NSLayout scope={this.props.scope} logo={this.props.logo} background={this.props.background}>
+			<NSLayout {...this.props}>
 				<NSSpace size={NSSpaceSizeType.SMALL}></NSSpace>
 				<div>
 					<h1 className={Styles.title}>{this.props.title}</h1>

package/src/components/NSLinkBlue.tsx

@@ -1,17 +1,16 @@
 "use client";
 
+import { BaseComponentProps } from "../props/BaseComponentProps";
 import { LinkProps } from "../props/LinkProps";
 import Styles from "./NSLinkBlue.module.css";
 import React from "react";
 
-export interface NSLinkBlueProps extends LinkProps
+export interface NSLinkBlueProps extends LinkProps, BaseComponentProps
 {
-	style?: React.CSSProperties;
 }
 
 export interface NSLinkBlueState extends LinkProps
 {
-
 }
 
 export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState> 

package/src/components/NSLinkGreen.tsx

@@ -3,8 +3,9 @@
 import Style from "./NSLinkGreen.module.css";
 import React from "react";
 import { Link } from "react-router-dom";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSLinkGreenProps
+export interface NSLinkGreenProps extends BaseComponentProps
 {
     title: string;
     href: string;

package/src/components/NSLinkRed.tsx

@@ -3,8 +3,9 @@
 import Style from "./NSLinkRed.module.css";
 import React from "react";
 import { Link } from "react-router-dom";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSLinkRedProps
+export interface NSLinkRedProps extends BaseComponentProps
 {
     title: string;
     href: string;

package/src/components/NSLoading.tsx

@@ -4,8 +4,9 @@ import { Component } from 'react';
 import Styles from './NSLoading.module.css';
 import { NSSection } from './NSSection';
 import { BackgroundProps } from '../props/BackgroundProps';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-interface NSLoadingProps
+export interface NSLoadingProps extends BaseComponentProps
 {
 	background?: BackgroundProps;
 }

package/src/components/NSNotification.module.css

@@ -0,0 +1,32 @@
+.ns_messenger {
+    background-color: #fff;
+    padding: 12px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.ns_gray {
+    border: 3px solid gray;
+    box-shadow: 1px 1px 8px 0px gray;
+}
+
+.ns_blue {
+    border: 3px solid blue;
+    box-shadow: 1px 1px 8px 0px blue;
+}
+
+.ns_green {
+    border: 3px solid rgba(112, 224, 0, 1);
+    box-shadow: 1px 1px 8px 0px rgba(112, 224, 0, 1);
+}
+
+.ns_yellow {
+    border: 3px solid yellow;
+    box-shadow: 1px 1px 8px 0px yellow;
+}
+
+.ns_red {
+    border: 3px solid red;
+    box-shadow: 1px 1px 8px 0px red;
+}

package/src/components/{NSMessenger.tsx → NSNotification.tsx}

@@ -2,22 +2,32 @@
 
 import React from "react";
 import Exit from '../assets/images/close-vector.png';
-import Styles from "./NSMessenger.module.css";
+import Styles from "./NSNotification.module.css";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSMessengerProps
+export interface NSNotificationProps extends BaseComponentProps
 {
     title: string;
-    success: boolean;
+    type: NSNotificationType;
 }
 
-export interface NSMessengerState
+export interface NSNotificationState
 {
     show: boolean;
 }
 
-export class NSMessenger extends React.Component<NSMessengerProps, NSMessengerState>
+export enum NSNotificationType
 {
-    constructor(props: NSMessengerProps)
+    GRAY = "GRAY",
+    BLUE = "BLUE",
+    GREEN = "GREEN",
+    YELLOW = "YELLOW",
+    RED = "RED",
+}
+
+export class NSNotification extends React.Component<NSNotificationProps, NSNotificationState>
+{
+    constructor(props: NSNotificationProps)
     {
         super(props);
         this.state = {
@@ -37,9 +47,10 @@ export class NSMessenger extends React.Component<NSMessengerProps, NSMessengerSt
 
     override render()
     {
+        let style = Styles["ns_" + this.props.type.toString().toLowerCase];
         return <>
             {this.state.show && (
-                <div className={`${Styles.ns_messenger} "" ${this.props.success == true ? Styles.ns_green : Styles.ns_red}`}>
+                <div className={`${Styles.ns_messenger} ${style}`}>
                     <p className={`mb-0 ns-font-16-normal`}>{this.props.title}</p>
                     <img
                         className={Styles.ns_exit_icon}

package/src/components/NSPagination.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { BaseComponentProps } from '../props/BaseComponentProps';
 import Styles from './NSPagination.module.css';
 import { Component } from 'react';
 
-export interface NSPaginationProps
+export interface NSPaginationProps extends BaseComponentProps
 {
     size: number;
     page: number;
@@ -48,12 +49,12 @@ export class NSPagination extends Component<NSPaginationState, NSPaginationProps
         arr.push(
             <div>
                 <a href='#'>
-					<img
-						src='https://static.namirasoft.com/icons/base/circle-chevron-left.png'
-						alt='left_vector'
-						width={32}
-						height={32}
-					/>
+                    <img
+                        src='https://static.namirasoft.com/icons/base/circle-chevron-left.png'
+                        alt='left_vector'
+                        width={32}
+                        height={32}
+                    />
                 </a>
             </div>
         );
@@ -76,12 +77,12 @@ export class NSPagination extends Component<NSPaginationState, NSPaginationProps
         arr.push(
             <div>
                 <a href='#'>
-					<img
-						src='https://static.namirasoft.com/icons/base/circle-chevron-right.png'
-						width={32}
-						height={32}
-						alt='right_vector'
-					/>
+                    <img
+                        src='https://static.namirasoft.com/icons/base/circle-chevron-right.png'
+                        width={32}
+                        height={32}
+                        alt='right_vector'
+                    />
                 </a>
             </div>
         );