namirasoft-site-react 1.3.59 → 1.3.61

package/src/components/NSEntityCardBackground.tsx

@@ -1,69 +1,35 @@
-"use client";
-
-import { Component } from 'react';
 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;
 	link?: LinkProps
-
-	background?: BackgroundProps;
-}
-
-export interface NSEntityCardBackgroundState
-{
-	background?: BackgroundProps;
 }
 
-export class NSEntityCardBackground extends Component<NSEntityCardBackgroundProps, NSEntityCardBackgroundState>
+export function NSEntityCardBackground(props: NSEntityCardBackgroundProps)
 {
-
-	constructor(props: NSEntityCardBackgroundProps)
-	{
-		super(props);
-		this.state = {
-			background: {
-				image: `url(${props.background?.image})`,
-				color: props.background?.color,
-				position: props.background?.position
-			}
-		}
-	}
-
-	override render()
-	{
-		return (
-			<>
-				<article className={Styles.card_background}
-					style=
-					{{
-						backgroundImage: this.state.background?.image,
-						backgroundColor: this.state.background?.color,
-						backgroundPosition: this.state.background?.position
-					}}
-				>
-
-					<p className={Styles.card_background_text}>
-						{this.props.title}
-					</p>
-
-
-					{this.props.link &&
-						<div className={Styles.ns_card_link_container}>
-							<NSLinkBlue
-								href={this.props.link.href}
-								target={this.props.link.target}
-							/>
-						</div>
-					}
-				</article >
-			</>
-		);
-	}
+	return (
+		<>
+			<article id={props.id}
+				className={`${Styles.card_background} ${props.classList?.join(" ")}`}
+				style={props.style}
+			>
+				<p className={Styles.card_background_text}>
+					{props.title}
+				</p>
+				{
+					props.link &&
+					<div className={Styles.ns_card_link_container}>
+						<NSLinkBlue
+							href={props.link.href}
+							target={props.link.target}
+						/>
+					</div>
+				}
+			</article >
+		</>
+	);
 }

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;
@@ -45,7 +46,10 @@ export class NSFooter extends React.Component<NSFooterProps, NSFooterState>
     override render()
     {
         return (
-            <footer className={Styles.ns_footer}>
+            <footer id={this.props.id}
+                className={`${Styles.ns_footer} ${this.props.classList?.join(" ")}`}
+                style={this.props.style}
+            >
                 <div className={`container ${Styles.ns_package_footer}`}>
                     <div className={`${Styles.ns_footer_parent_items}`}>
                         <div className={`${Styles.ns_footer_project_logo_tablet}`}>
@@ -108,8 +112,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 +123,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

@@ -4,15 +4,15 @@ import React from "react";
 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;
     logo: string;
     account?: boolean;
-    background?: BackgroundProps;
+    nav?: BaseComponentProps
 }
 
 export interface NSHeaderState
@@ -61,12 +61,22 @@ export class NSHeader extends React.Component<NSHeaderProps, NSHeaderState>
     }
     override render()
     {
+        let nav: BaseComponentProps | undefined = this.props.nav;
+        if (!nav)
+            nav = { style: {} };
+        if (!nav.style)
+            nav.style = {};
+        if (!nav.style?.backgroundColor)
+            nav.style.backgroundColor = "rgba(20, 27, 92, 1)";
         return (
-            <header className={Styles.ns_header}>
-                <nav className={Styles.ns_navbar}
-                    style={{
-                        backgroundColor: this.props.background?.color ? this.props.background?.color : "rgba(20, 27, 92, 1)"
-                    }}
+            <header id={this.props.id}
+                className={`${Styles.ns_header} ${this.props.classList?.join(" ")}`}
+                style={this.props.style}
+            >
+                <nav
+                    id={this.props.nav?.id}
+                    className={`${Styles.ns_navbar} ${this.props.nav?.classList?.join(" ")}`}
+                    style={nav?.style}
                 >
                     <div className={`${Styles.ns_navbar_parent_content} container`}>
                         <a href="/">
@@ -93,12 +103,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 +157,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,26 @@ 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={this.props.id}
+                        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

@@ -1,23 +1,27 @@
-"use client";
-
 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;
 }
 
 export function NSLayout(props: NSLayoutProps)
 {
 	return (
-		<div className={Styles.ns_container}>
+		<div id={props.id}
+			className={`${Styles.ns_container} ${props.classList?.join(" ")}`}
+			style={props.style}>
 			<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,9 +18,8 @@ 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}>
 					<div className="container mx-auto px-4 lg:px-12">
 						<div className="flex flex-wrap lg:flex-nowrap justify-center lg:justify-between">

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,43 +1,22 @@
-"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
-{
-	style?: React.CSSProperties;
-}
 
-export interface NSLinkBlueState extends LinkProps
+export interface NSLinkBlueProps extends LinkProps, BaseComponentProps
 {
-
 }
 
-export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState> 
+export function NSLinkBlue(props: NSLinkBlueProps)
 {
-	constructor(props: NSLinkBlueProps)
-	{
-		super(props);
-		this.state = { title: props.title, href: props.href, target: props.target };
-	}
-	setTitle(title: string)
-	{
-		this.setState({ title });
-	}
-	setHRef(href: string)
-	{
-		this.setState({ href });
-	}
-	override render()
-	{
-		return (
-
-			<div className={Styles.ns_link_parent} style={this.props.style}>
-				<a className={`text-white text-decoration-none ${this.props.title ? Styles.ns_link : Styles.ns_link_absolute}`} href={this.state.href} target={this.state?.target ?? "_self"} >
-					{this.state.title}
-				</a>
-			</div>
-		)
-	}
+	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>
+	)
 }

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;