namirasoft-site-react 1.3.60 → 1.3.62

package/src/components/NSLinkBlue.tsx

@@ -1,42 +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, BaseComponentProps
 {
 }
 
-export interface NSLinkBlueState extends LinkProps
+export function NSLinkBlue(props: NSLinkBlueProps)
 {
-}
-
-export class NSLinkBlue extends React.Component<NSLinkBlueProps, NSLinkBlueState> 
-{
-	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/NSLoading.tsx

@@ -1,27 +1,18 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSLoading.module.css';
 import { NSSection } from './NSSection';
-import { BackgroundProps } from '../props/BackgroundProps';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSLoadingProps extends BaseComponentProps
 {
-	background?: BackgroundProps;
 }
 
-export class NSLoading extends Component<NSLoadingProps>
+export function NSLoading(props: NSLoadingProps)
 {
-	override render()
-	{
-		return (
-			<NSSection background={this.props.background} >
-				<div className={Styles.ns_loading_parent}>
-					<div className={Styles.ns_loader}></div>
-				</div>
-			</NSSection>
-		);
-	}
+	return (
+		<NSSection {...props}>
+			<div className={Styles.ns_loading_parent}>
+				<div className={Styles.ns_loader}></div>
+			</div>
+		</NSSection>
+	);
 }
-

package/src/components/NSNotification.tsx

@@ -47,21 +47,26 @@ export class NSNotification extends React.Component<NSNotificationProps, NSNotif
 
     override render()
     {
-        let style = Styles["ns_" + this.props.type.toString().toLowerCase];
+        let className = Styles["ns_" + this.props.type.toString().toLowerCase];
         return <>
-            {this.state.show && (
-                <div className={`${Styles.ns_messenger} ${style}`}>
-                    <p className={`mb-0 ns-font-16-normal`}>{this.props.title}</p>
-                    <img
-                        className={Styles.ns_exit_icon}
-                        src={Exit}
-                        alt="exit"
-                        width={32}
-                        height={32}
-                        onClick={() => this.handleDestroy()}
-                    />
-                </div>
-            )}
+            {
+                this.state.show && (
+                    <div id={this.props.id}
+                        className={`${Styles.ns_messenger} ${className}`}
+                        style={this.props.style}
+                    >
+                        <p className={`mb-0 ns-font-16-normal`}>{this.props.title}</p>
+                        <img
+                            className={Styles.ns_exit_icon}
+                            src={Exit}
+                            alt="exit"
+                            width={32}
+                            height={32}
+                            onClick={() => this.handleDestroy()}
+                        />
+                    </div>
+                )
+            }
         </>
     }
 }

package/src/components/NSPagination.tsx

@@ -15,8 +15,7 @@ export interface NSPaginationState
     size: number;
     page: number;
 }
-
-export class NSPagination extends Component<NSPaginationState, NSPaginationProps>
+export class NSPagination extends Component<NSPaginationProps, NSPaginationState>
 {
     constructor(props: NSPaginationProps)
     {
@@ -88,7 +87,9 @@ export class NSPagination extends Component<NSPaginationState, NSPaginationProps
         );
 
         return (
-            <div className={`${Styles.ns_pagination_container}`}>
+            <div id={this.props.id}
+                className={`${Styles.ns_pagination_container} ${this.props.classList?.join(" ")}`}
+                style={this.props.style}>
                 {arr.map(x => (x))}
             </div>
         );

package/src/components/NSPanel.tsx

@@ -1,6 +1,4 @@
-"use client";
-
-import { Component, ReactNode } from "react";
+import { ReactNode } from "react";
 import Styles from './NSPanel.module.css';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
@@ -9,23 +7,14 @@ export interface NSSectionProps extends BaseComponentProps
     children: ReactNode;
     grid: boolean;
 }
-
-export interface NSSectionState
-{ }
-
-export class NSPanel extends Component<NSSectionProps, NSSectionState>
+export function NSPanel(props: NSSectionProps)
 {
-    constructor(props: NSSectionProps)
-    {
-        super(props);
-    }
-    override render()
-    {
-        return (
-            <section
-                className={this.props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} >
-                {this.props.children}
-            </section>
-        );
-    }
+    return (
+        <section id={props.id}
+            className={`${props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} ${props.classList?.join(" ")}`}
+            style={props.style}
+        >
+            {props.children}
+        </section>
+    );
 }

package/src/components/NSSection.tsx

@@ -1,50 +1,24 @@
-"use client";
-
-import { Component, ReactNode } from "react";
+import { ReactNode } from "react";
 import Styles from './NSSection.module.css'
-import { BackgroundProps } from "../props/BackgroundProps";
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionProps extends BaseComponentProps
 {
 	children: ReactNode;
-	background?: BackgroundProps;
 	center_items?: boolean;
 }
 
-export interface NSSectionState
-{
-	background?: BackgroundProps;
-}
-
-export class NSSection extends Component<NSSectionProps, NSSectionState>
+export function NSSection(props: NSSectionProps)
 {
-	constructor(props: NSSectionProps)
-	{
-		super(props);
-		this.state = {
-			background: {
-				image: `url(${props.background?.image})`,
-				color: props.background?.color,
-				position: props.background?.position
-			}
-		}
-	}
-	override render()
-	{
-		let styles = [Styles.ns_section];
-		if (this.props.center_items)
-			styles.push(Styles.ns_section_center);
-		return (
-			<section style=
-				{{
-					backgroundImage: this.state.background?.image,
-					backgroundColor: this.state.background?.color,
-					backgroundPosition: this.state.background?.position
-				}}
-				className={styles.join(" ")} >
-				{this.props.children}
-			</section>
-		);
-	}
+	let styles = [Styles.ns_section];
+	if (props.center_items)
+		styles.push(Styles.ns_section_center);
+	return (
+		<section id={props.id}
+			className={`${styles.join(" ")} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.children}
+		</section>
+	);
 }

package/src/components/NSSectionBars.tsx

@@ -1,35 +1,26 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSSectionBars.module.css';
 import { NSEntityBar, NSEntityBarProps } from './NSEntityBar';
 import { NSSection } from './NSSection';
-import { BackgroundProps } from '../props/BackgroundProps';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionBarsProps extends BaseComponentProps
 {
-	background?: BackgroundProps;
+	title?: string;
 	bars: NSEntityBarProps[]
 }
 
-export class NSSectionBars extends Component<NSSectionBarsProps>
+export function NSSectionBars(props: NSSectionBarsProps)
 {
-	override render()
-	{
-		return (
-			<>
-				<NSSection background={this.props.background} >
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
-						{
-							this.props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
-						}
-					</div>
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-				</NSSection>
-			</>
-		);
-	}
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_entity_bar_container}`}>
+				{
+					props.bars?.map((bar) => <NSEntityBar key={bar.id} {...bar} />)
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionCards.tsx

@@ -1,67 +1,52 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSSectionCards.module.css';
 import { NSTitle } from './NSTitle';
 import { NSCard, NSCardProps } from './NSCard';
 import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
-import { BackgroundProps } from '../props/BackgroundProps';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { LinkProps } from '../props/LinkProps';
 
 export interface NSSectionCardsProps extends BaseComponentProps
 {
-	title?: {
-		text: string,
-		color?: string
-	};
+	title?: string;
 	description?: {
 		text: string,
 		color?: string
 	};
-	background?: BackgroundProps
-	button?: {
-		href: string;
-		title: string;
-	};
+	button?: LinkProps;
 	cards: NSCardProps[];
 }
 
-export class NSSectionCards extends Component<NSSectionCardsProps>
+export function NSSectionCards(props: NSSectionCardsProps) 
 {
-	override render()
-	{
-		return (
-			<>
-				<NSSection background={this.props.background} >
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-					<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
-						{
-							this.props.title &&
-							<div className={Styles.ns_section_cards_title_container}>
-								<NSTitle color={this.props.title?.color} title={this.props.title?.text} />
-								{
-									this.props.description &&
-									<p style={{ color: this.props.description?.color }} className={Styles.ns_description}> {this.props.description.text} </p>
-								}
-							</div>
-						}
-						<div className={` ${Styles.ns_card_container}`}>
-							{
-								this.props.cards?.map((card) => <NSCard key={card.id} {...card} />)
-							}
-						</div>
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<div className={`container mx-auto px-4 lg:px-12 ${Styles.ns_section_cards_holder}`}>
+				{
+					props.title &&
+					<div className={Styles.ns_section_cards_title_container}>
+						<NSTitle title={props.title} />
 						{
-							this.props.button &&
-							<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
-								<NSLinkBlue href={this.props.button?.href} title={this.props.button?.title} />
-							</div>
+							props.description &&
+							<p style={{ color: props.description?.color }} className={Styles.ns_description}> {props.description.text} </p>
 						}
 					</div>
-					<NSSpace size={NSSpaceSizeType.NORMAL} />
-				</NSSection>
-			</>
-		);
-	}
+				}
+				<div className={` ${Styles.ns_card_container}`}>
+					{
+						props.cards?.map((card) => <NSCard key={card.id} {...card} />)
+					}
+				</div>
+				{
+					props.button &&
+					<div className={`mt-12 w-full- text-center ${Styles.ns_section_cards_link_container}`}>
+						<NSLinkBlue {...props.button} />
+					</div>
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+		</NSSection>
+	);
 }

package/src/components/NSSectionTitle.tsx

@@ -1,32 +1,22 @@
-"use client";
-
-import { Component, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { NSSection } from './NSSection';
 import { NSTitle } from './NSTitle';
-import { BackgroundProps } from '../props/BackgroundProps';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSSectionTitleProps extends BaseComponentProps
 {
-	title: {
-		text: string,
-		color?: string
-	};
-	background?: BackgroundProps
+	title: string;
 	children: ReactNode
 }
 
-export class NSSectionTitle extends Component<NSSectionTitleProps>
+export function NSSectionTitle(props: NSSectionTitleProps)
 {
-	override render()
-	{
-		return (
-			<NSSection background={this.props.background} >
-				<NSSpace size={NSSpaceSizeType.NORMAL} />
-				<NSTitle color={this.props.title.color} title={this.props.title.text} />
-				{this.props.children}
-			</NSSection>
-		);
-	}
+	return (
+		<NSSection {...props} >
+			<NSSpace size={NSSpaceSizeType.NORMAL} />
+			<NSTitle title={props.title} />
+			{props.children}
+		</NSSection>
+	);
 }

package/src/components/NSSelectBox.tsx

@@ -6,8 +6,11 @@ import { Select, Space } from 'antd';
 import type { SelectProps } from 'antd';
 import IconSelectBox from '../assets/images/icon-select-box.svg';
 import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { Validator } from "../Validator";
+import { NSInputErrorNotifier } from "./NSInputErrorNotifier";
 
-export interface NSSelectBoxProps extends BaseComponentProps
+export interface NSSelectBoxProps extends BaseComponentProps, ValidationProps
 {
     title: string;
     options: SelectProps['options'];
@@ -17,6 +20,7 @@ export interface NSSelectBoxState
 {
     value: string | null;
     values: string[];
+    error?: string;
 }
 
 export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxState>
@@ -31,43 +35,64 @@ export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxSt
         this.getValues = this.getValues.bind(this);
         this.setValues = this.setValues.bind(this);
     }
-    setValue(value: string | null): void
+    getError(): string | null
     {
-        this.setState({ value });
+        return (
+            Validator.getError(this.props.title, this.state.value, this.props)
+        );
     }
     getValue(): string | null
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
-    setValues(values: string[]): void
+    setValue(value: string | null): void
     {
-        this.setState({ values });
+        this.setState({ value });
     }
     getValues(): string[]
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.values;
     }
+    setValues(values: string[]): void
+    {
+        this.setState({ values });
+    }
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2`}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <Select
-                    mode="multiple"
-                    style={{ width: '100%' }}
-                    className={Styles.ns_input_select}
-                    placeholder="Combo Box"
-                    onChange={this.setValues}
-                    optionLabelProp="label"
-                    options={this.props.options}
-                    optionRender={(option) => (
-                        <Space className={Styles.ns_input_select_option}>
-                            {option.data.desc}
-                        </Space>
-                    )}
-                    suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
-                />
-            </div>
+            <>
+                <div className={`${Styles.ns_input_parent} p-2`}>
+                    <span className={Styles.ns_input_title}> {this.props.required && <span style={{ color: "red" }} >*</span>} {this.props.title} </span>
+                    <Select
+                        mode="multiple"
+                        style={{ width: '100%' }}
+                        className={Styles.ns_input_select}
+                        placeholder="Combo Box"
+                        onChange={this.setValues}
+                        optionLabelProp="label"
+                        options={this.props.options}
+                        optionRender={(option) => (
+                            <Space className={Styles.ns_input_select_option}>
+                                {option.data.desc}
+                            </Space>
+                        )}
+                        suffixIcon={<img src={IconSelectBox} alt="SelectBox Icon" />}
+                    />
+                </div>
+                <NSInputErrorNotifier error={this.state.error} />
+            </>
         );
     }
 }

package/src/components/NSSpace.tsx

@@ -22,6 +22,8 @@ export enum NSSpaceSizeType
 export function NSSpace(props: NSSpaceProps)
 {
     return (
-        <hr style={{ width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
+        <hr id={props.id}
+            className={props.classList?.join(" ")}
+            style={{ ...props.style, width: "100%", height: props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
     );
 }

package/src/components/NSTable.tsx

@@ -55,9 +55,11 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
             return (row as any)[column];
         }
         return (
-            <div className={`container ${Styles.ns_project_list_container}`}>
+            <div id={this.props.id}
+                className={`container ${Styles.ns_project_list_container} ${this.props.classList?.join(" ")}`}
+                style={this.props.style}>
                 <section className={Styles.ns_search_input}>
-                    <NSInputSearch />
+                    <NSInputSearch title='' required={false} />
                 </section>
                 <NSSpace size={NSSpaceSizeType.SMALL} />
                 <table className={Styles.ns_table} >
@@ -86,8 +88,8 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                     <NSPagination size={50} page={5} />
                     <NSSpace size={NSSpaceSizeType.SMALL} />
                     <div className={Styles.ns_button}>
-                        <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} border='1px solid rgba(255, 148, 50, 1)' />
-                        <NSButton title='Refresh' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} border='1px solid rgba(3, 119, 255, 1)' />
+                        <NSButton title='Export' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(255, 148, 50, 1)' }} />
+                        <NSButton title='Refresh' icon={{ src: "/assets/images/export-vector.png" }} onClick={() => { }} style={{ border: '1px solid rgba(3, 119, 255, 1)' }} />
                     </div>
                 </section>
                 <NSSpace size={NSSpaceSizeType.SMALL} />

package/src/components/NSTitle.tsx

@@ -1,25 +1,20 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSTitle.module.css';
 import { BaseComponentProps } from "../props/BaseComponentProps";
 
 export interface NSTitleProps extends BaseComponentProps
 {
 	title: string;
-	color?: string;
-	text_align?: string;
 }
 
-export class NSTitle extends Component<NSTitleProps>
+export function NSTitle(props: NSTitleProps)
 {
-	override render()
-	{
-		return (
-			//todo : fix text align
-			<h2 style={{ color: this.props.color, textAlign: this.props.text_align ? "start" : "center" }} className={`${Styles.ns_title}`}>
-				{this.props.title}
-			</h2>
-		);
-	}
+	return (
+		<h2
+			id={props.id}
+			className={`${Styles.ns_title} ${props.classList?.join(" ")}`}
+			style={props.style}
+		>
+			{props.title}
+		</h2>
+	);
 }

package/src/main.ts

@@ -1,5 +1,4 @@
 export * from "./components/NSButtonBlue";
-export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
 export * from "./components/NSButton";
 export * from "./components/NSButtonRed";