namirasoft-site-react 1.3.58 → 1.3.60

package/src/components/NSButtonBlueVector.tsx

@@ -2,8 +2,9 @@
 
 import React from "react";
 import Style from "./NSButtonBlueVector.module.css";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSButtonBlueVectorProps
+export interface NSButtonBlueVectorProps extends BaseComponentProps
 {
     title: string;
     vector: string;

package/src/components/NSButtonGreen.tsx

@@ -2,8 +2,9 @@
 
 import React from "react";
 import Style from "./NSButtonGreen.module.css";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSButtonGreenProps
+export interface NSButtonGreenProps extends BaseComponentProps
 {
     title: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/src/components/NSButtonRed.tsx

@@ -2,8 +2,9 @@
 
 import React from "react";
 import Style from "./NSButtonRed.module.css";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSButtonRedProps
+export interface NSButtonRedProps extends BaseComponentProps
 {
     title: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/src/components/NSCard.tsx

@@ -3,8 +3,9 @@ import { Component } from 'react';
 import Styles from './NSCard.module.css'
 import { NSLinkBlue } from './NSLinkBlue';
 import { LinkProps } from '../props/LinkProps';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSCardProps
+export interface NSCardProps extends BaseComponentProps
 {
 	id?: string | number;
 	title?: string;

package/{dist/components/NSInputCopy.module.css → src/components/NSCopyToClipboard.module.css}

@@ -1,4 +1,4 @@
-.ns_input_parent {
+.ns_copy_to_clipboard {
     display: flex;
     flex-direction: column;
     width: 326px;
@@ -7,7 +7,7 @@
     max-width: 100%;
 }
 
-.ns_input {
+.ns_copy_to_clipboard_value {
     border-radius: 8px;
     padding: 10px 12px;
     font-size: 16px;
@@ -17,14 +17,14 @@
     border: 1px solid rgba(20, 27, 92, 1);
 }
 
-.ns_input_icon {
+.ns_copy_to_clipboard_icon {
     position: absolute;
     right: 20px;
     top: 67%;
     z-index: 1;
 }
 
-.ns_input_title {
+.ns_copy_to_clipboard_title {
     font-size: 24px;
     font-weight: 700;
     color:rgba(20, 27, 92, 1);

package/src/components/NSCopyToClipboard.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import React from "react";
+import Styles from "./NSCopyToClipboard.module.css";
+import IconInputString from '../assets/images/icon-input-copy.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
+
+export interface NSCopyToClipboardProps extends BaseComponentProps
+{
+    title: string;
+    value: string;
+}
+
+export interface NSCopyToClipboardState
+{ }
+
+export class NSCopyToClipboard extends React.Component<NSCopyToClipboardProps, NSCopyToClipboardState>
+{
+    constructor(props: NSCopyToClipboardProps)
+    {
+        super(props);
+        this.copyToClipboard = this.copyToClipboard.bind(this);
+    }
+
+    copyToClipboard(): void
+    {
+        if (navigator.clipboard && navigator.clipboard.writeText)
+        {
+            navigator.clipboard.writeText(this.props.value);
+        }
+    }
+    override render()
+    {
+        return (
+            <div className={`${Styles.ns_copy_to_clipboard} p-2`}>
+                <span className={Styles.ns_copy_to_clipboard_title}>{this.props.title}</span>
+                <div className={Styles.ns_copy_to_clipboard_value}>
+                    <img
+                        className={Styles.ns_copy_to_clipboard_icon}
+                        src={IconInputString}
+                        alt="icon"
+                        width={16}
+                        height={16}
+                        onClick={this.copyToClipboard}
+                    />
+                    <span>{this.props.value}</span>
+                </div>
+            </div>
+        );
+    }
+}

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.module.css

@@ -25,3 +25,12 @@
 	font-weight: 400;
 }
 
+.ns_input::-webkit-calendar-picker-indicator {
+	display: block;
+	background: url(../assets/images/icon-input-date.svg) no-repeat;
+	width: 24px;
+	height: 24px;
+	position: relative;
+	top: 3px;
+	left: 4px;
+}

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);
@@ -45,17 +48,21 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
     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"
-                />
-            </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

@@ -3,11 +3,11 @@
 import React from "react";
 import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
-import Danger from '../assets/images/danger.svg';
 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
 {
@@ -78,22 +78,7 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                         placeholder={this.props.placeholder}
                     />
                 </div>
-                {
-                    // todo make it a component
-                    this.state.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}>{this.state.error}</span>
-                            </div>
-                        </>)
-                }
+                <NSInputErrorNotifier error={this.state.error} />
             </>
         );
     }

package/src/components/NSInputErrorNotifier.module.css

@@ -0,0 +1,3 @@
+.ns_input_error {
+    color: #FF3F3F !important;
+}

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>