namirasoft-site-react 1.3.60 → 1.3.62

package/src/components/NSButtonRed.module.css

@@ -1,12 +1,4 @@
 .ns_button_red {
-    width: 358px;
-    max-width: 100%;
-    height: 48px;
-    border-radius: 8px;
     background-color: #FF3F3F;
-    color: #fff;
-    border: 0;
     box-shadow: inset 0 -4px 4px 0px rgb(0 0 0 / 25%);
-    font-size: 16px;
-    font-weight: 400;
 }

package/src/components/NSButtonRed.tsx

@@ -1,33 +1,12 @@
-"use client";
+import NSButton from "./NSButton";
+import Style from "./NSButtonGreen.module.css";
+import { NSButtonProps } from "./NSButton";
 
-import React from "react";
-import Style from "./NSButtonRed.module.css";
-import { BaseComponentProps } from "../props/BaseComponentProps";
-
-export interface NSButtonRedProps extends BaseComponentProps
-{
-    title: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export interface NSButtonRedState
-{
-    title: string;
-}
-
-export class NSButtonRed extends React.Component<NSButtonRedProps, NSButtonRedState>
+export function NSButtonRed(props: NSButtonProps) 
 {
-    constructor(props: NSButtonRedProps)
-    {
-        super(props);
-        this.state = { title: props.title };
-    }
-    setTitle(title: string)
-    {
-        this.setState({ title });
-    }
-    override render()
-    {
-        return <button onClick={e => this.props.onClick(e)} className={Style.ns_button_red}>{this.state.title}</button>;
-    }
+    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.tsx

@@ -1,75 +1,68 @@
-"use client";
-import { Component } from 'react';
 import Styles from './NSCard.module.css'
 import { NSLinkBlue } from './NSLinkBlue';
 import { LinkProps } from '../props/LinkProps';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ImageProps } from '../props/ImageProps';
 
 export interface NSCardProps extends BaseComponentProps
 {
-	id?: string | number;
 	title?: string;
 	headline?: {
 		color?: string;
 		text: string;
 	}
 	description?: string;
-	image: {
-		src: string;
-		alt: string;
-	};
-	link?: LinkProps
+	image: ImageProps;
+	link?: LinkProps;
 }
 
-export class NSCard extends Component<NSCardProps>
+export function NSCard(props: NSCardProps)
 {
-	override render()
-	{
-		return (
-			<>
-				<article className={Styles.ns_card}>
-					<div className={Styles.ns_card_detail_container}>
-						<div className={Styles.ns_card_title_img}
-							style={{
-								alignItems: this.props.description ? "flex-start" : "center",
-							}}
-						>
-							<img className={Styles.ns_card_img} src={this.props.image.src} alt={this.props.image.alt} />
-							<span className={Styles.ns_card_headline} style={{ color: this.props.headline?.color }}> {this.props.headline?.text} </span>
-							<h3 className={Styles.ns_card_title}>
-								{this.props.title && this.props.title}
-							</h3>
+	return (
+		<article id={props.id}
+			className={`${Styles.ns_card} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<div className={Styles.ns_card_detail_container}>
+				<div className={Styles.ns_card_title_img}
+					style={{
+						alignItems: props.description ? "flex-start" : "center",
+					}}
+				>
+					<img className={Styles.ns_card_img} {...props.image} />
+					<span className={Styles.ns_card_headline} style={{ color: props.headline?.color }}> {props.headline?.text} </span>
+					<h3 className={Styles.ns_card_title}>
+						{props.title}
+					</h3>
+				</div>
+				{
+					props.description &&
+					<p className={Styles.ns_card_description}>
+						{props.description}
+					</p>
+				}
+			</div>
+			{
+				props.link ?
+					props.link.title ?
+						<div className={Styles.ns_card_link_container}>
+							<NSLinkBlue
+								title={props.link.title}
+								href={props.link.href}
+								target={props.link.target}
+								style={{ marginTop: "24px" }}
+							/>
 						</div>
-
-						{this.props.description &&
-							<p className={Styles.ns_card_description}>
-								{this.props.description}
-							</p>
-						}
-
-					</div>
-					{this.props.link ?
-						this.props.link.title ?
-							<div className={Styles.ns_card_link_container}>
-								<NSLinkBlue
-									title={this.props.link.title}
-									href={this.props.link.href}
-									target={this.props.link.target}
-									style={{ marginTop: "24px" }}
-								/>
-							</div>
-							:
-							<div className={Styles.ns_card_link_container}>
-								<NSLinkBlue
-									href={this.props.link.href}
-									target={this.props.link.target}
-								/>
-							</div>
 						:
-						<></>
-					}
-				</article >
-			</>
-		);
-	}
+						<div className={Styles.ns_card_link_container}>
+							<NSLinkBlue
+								href={props.link.href}
+								target={props.link.target}
+							/>
+						</div>
+					:
+					<></>
+			}
+		</article >
+	);
 }

package/src/components/NSCopyToClipboard.module.css

@@ -27,7 +27,7 @@
 .ns_copy_to_clipboard_title {
     font-size: 24px;
     font-weight: 700;
-    color:rgba(20, 27, 92, 1);
+    color: rgba(20, 27, 92, 1);
     text-align: center;
     margin-bottom: 16px;
 }

package/src/components/NSCopyToClipboard.tsx

@@ -1,6 +1,3 @@
-"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";
@@ -11,41 +8,30 @@ export interface NSCopyToClipboardProps extends BaseComponentProps
     value: string;
 }
 
-export interface NSCopyToClipboardState
-{ }
-
-export class NSCopyToClipboard extends React.Component<NSCopyToClipboardProps, NSCopyToClipboardState>
+export function NSCopyToClipboard(props: NSCopyToClipboardProps)
 {
-    constructor(props: NSCopyToClipboardProps)
-    {
-        super(props);
-        this.copyToClipboard = this.copyToClipboard.bind(this);
-    }
-
-    copyToClipboard(): void
+    function copyToClipboard(): void
     {
         if (navigator.clipboard && navigator.clipboard.writeText)
-        {
-            navigator.clipboard.writeText(this.props.value);
-        }
+            navigator.clipboard.writeText(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>
+    return (
+        <div id={props.id}
+            className={`${Styles.ns_copy_to_clipboard} p-2 ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            <span className={Styles.ns_copy_to_clipboard_title}>{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={copyToClipboard}
+                />
+                <span>{props.value}</span>
             </div>
-        );
-    }
+        </div>
+    );
 }

package/src/components/NSEntityBar.module.css

@@ -65,7 +65,7 @@
 		width: 30%;
 		max-width: 310px;
 	}
-	
+
 	.ns_entity_bar_image_title {
 		font-size: 32px;
 		line-height: 32px;

package/src/components/NSEntityBar.tsx

@@ -1,34 +1,28 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSEntityBar.module.css'
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ImageProps } from '../props/ImageProps';
 
 export interface NSEntityBarProps extends BaseComponentProps
 {
-	id?: string | number;
 	title: string;
 	description: string;
-	image: {
-		src: string;
-		alt: string;
-	},
+	image: ImageProps;
 }
 
-export class NSEntityBar extends Component<NSEntityBarProps>
+export function NSEntityBar(props: NSEntityBarProps)
 {
-	override render()
-	{
-		return (
-			<article className={Styles.ns_entity_bar_item}>
-				<figure className={Styles.ns_entity_bar_image_container}>
-					<img className={Styles.ns_entity_bar_image} src={this.props.image.src} alt={this.props.image.alt} width={310} height={240} />
-				</figure>
-				<div className={Styles.ns_entity_bar_details_container}>
-					<h3 className={Styles.ns_entity_bar_image_title}> {this.props.title} </h3>
-					<p className={Styles.ns_entity_bar_image_description} > {this.props.description} </p>
-				</div>
-			</article>
-		);
-	}
+	return (
+		<article id={props.id}
+			className={`${Styles.ns_entity_bar_item} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			<figure className={Styles.ns_entity_bar_image_container}>
+				<img className={Styles.ns_entity_bar_image} {...props.image} width={256} height={256} />
+			</figure>
+			<div className={Styles.ns_entity_bar_details_container}>
+				<h3 className={Styles.ns_entity_bar_image_title}> {props.title} </h3>
+				<p className={Styles.ns_entity_bar_image_description} > {props.description} </p>
+			</div>
+		</article>
+	);
 }

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 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

@@ -46,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}`}>

package/src/components/NSHeader.tsx

@@ -4,7 +4,6 @@ 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 extends BaseComponentProps
@@ -13,7 +12,7 @@ export interface NSHeaderProps extends BaseComponentProps
     name: string;
     logo: string;
     account?: boolean;
-    background?: BackgroundProps;
+    nav?: BaseComponentProps
 }
 
 export interface NSHeaderState
@@ -62,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="/">

package/src/components/NSInput.module.css

@@ -0,0 +1,29 @@
+.ns_input_parent {
+	display: flex;
+	flex-direction: column;
+	width: 326px;
+	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;
 	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,15 +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="ns-input-date"
                         onClick={() => { }}
                     />
                 </div>
@@ -65,6 +86,4 @@ export class NSInputDate extends React.Component<NSInputDateProps, NSInputDateSt
             </>
         );
     }
-}
-
-
+}