namirasoft-site-react 1.3.59 → 1.3.61

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

@@ -1,26 +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";
 
-interface NSLoadingProps
+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.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/NSNotification.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import Exit from '../assets/images/close-vector.png';
+import Styles from "./NSNotification.module.css";
+import { BaseComponentProps } from "../props/BaseComponentProps";
+
+export interface NSNotificationProps extends BaseComponentProps
+{
+    title: string;
+    type: NSNotificationType;
+}
+
+export interface NSNotificationState
+{
+    show: boolean;
+}
+
+export enum NSNotificationType
+{
+    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 = {
+            show: true,
+        };
+    }
+
+    override componentDidMount(): void
+    {
+        setTimeout(() => { this.handleDestroy() }, 8000);
+    }
+
+    handleDestroy = () =>
+    {
+        this.setState({ show: false });
+    };
+
+    override render()
+    {
+        let className = Styles["ns_" + this.props.type.toString().toLowerCase];
+        return <>
+            {
+                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

@@ -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;
@@ -14,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)
     {
@@ -48,12 +48,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,18 +76,20 @@ 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>
         );
 
         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,29 +1,20 @@
-"use client";
+import { ReactNode } from "react";
+import Styles from './NSPanel.module.css';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-import { Component, ReactNode } from "react";
-import Styles from './NSPanel.module.css'
-
-export interface NSSectionProps
+export interface NSSectionProps extends BaseComponentProps
 {
     children: ReactNode;
     grid: boolean;
 }
-
-export interface NSSectionState
-{}
-
-export class NSPanel extends Component<NSSectionProps, NSSectionState> {
-    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>
-        );
-    }
+export function NSPanel(props: NSSectionProps)
+{
+    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,49 +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
+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,34 +1,25 @@
-"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
+export interface NSSectionBarsProps extends BaseComponentProps
 {
-	background?: BackgroundProps;
 	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,66 +1,52 @@
-"use client";
-
-import { Component } from 'react';
 import Styles from './NSSectionCards.module.css';
-import { NSTitle } from './NSTitle';
+import { NSTitle, NSTitleProps } 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
+export interface NSSectionCardsProps extends BaseComponentProps
 {
-	title?: {
-		text: string,
-		color?: string
-	};
+	title?: NSTitleProps;
 	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 {...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,31 +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 { NSTitle, NSTitleProps } from './NSTitle';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSSectionTitleProps
+export interface NSSectionTitleProps extends BaseComponentProps
 {
-	title: {
-		text: string,
-		color?: string
-	};
-	background?: BackgroundProps
+	title: NSTitleProps;
 	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 {...props.title} />
+			{props.children}
+		</NSSection>
+	);
 }

package/src/components/NSSelectBox.tsx

@@ -5,8 +5,9 @@ import Styles from "./NSSelectBox.module.css";
 import { Select, Space } from 'antd';
 import type { SelectProps } from 'antd';
 import IconSelectBox from '../assets/images/icon-select-box.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSSelectBoxProps
+export interface NSSelectBoxProps extends BaseComponentProps
 {
     title: string;
     options: SelectProps['options'];
@@ -14,26 +15,38 @@ export interface NSSelectBoxProps
 
 export interface NSSelectBoxState
 {
-    value: string[];
+    value: string | null;
+    values: string[];
 }
 
-export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxState> {
+export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxState>
+{
     constructor(props: NSSelectBoxProps)
     {
         super(props);
         this.state = {
-            value: [],
+            value: null,
+            values: [],
         };
-        this.setValue = this.setValue.bind(this);
+        this.getValues = this.getValues.bind(this);
+        this.setValues = this.setValues.bind(this);
     }
-    setValue(value: string[]): void
+    setValue(value: string | null): void
     {
         this.setState({ value });
     }
-    getValue(): string[]
+    getValue(): string | null
     {
         return this.state.value;
     }
+    setValues(values: string[]): void
+    {
+        this.setState({ values });
+    }
+    getValues(): string[]
+    {
+        return this.state.values;
+    }
     override render()
     {
         return (
@@ -44,7 +57,7 @@ export class NSSelectBox extends React.Component<NSSelectBoxProps, NSSelectBoxSt
                     style={{ width: '100%' }}
                     className={Styles.ns_input_select}
                     placeholder="Combo Box"
-                    onChange={this.setValue}
+                    onChange={this.setValues}
                     optionLabelProp="label"
                     options={this.props.options}
                     optionRender={(option) => (

package/src/components/NSSpace.tsx

@@ -1,4 +1,6 @@
-export interface NSSpaceProps
+import { BaseComponentProps } from "../props/BaseComponentProps";
+
+export interface NSSpaceProps extends BaseComponentProps
 {
     size: NSSpaceSizeType;
 }
@@ -20,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

@@ -6,8 +6,9 @@ import { NSPagination } from './NSPagination';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import Styles from './NSTable.module.css';
 import { Component } from 'react';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSTableProps<RowType>
+export interface NSTableProps<RowType> extends BaseComponentProps
 {
     columns: { [key: string]: string };
     rows: RowType[];
@@ -54,7 +55,9 @@ 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 />
                 </section>
@@ -85,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} />