namirasoft-site-react 1.3.58 → 1.3.60

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;

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

@@ -4,8 +4,9 @@ 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;
 }

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/{NSMessenger.tsx → NSNotification.tsx}

@@ -2,22 +2,32 @@
 
 import React from "react";
 import Exit from '../assets/images/close-vector.png';
-import Styles from "./NSMessenger.module.css";
+import Styles from "./NSNotification.module.css";
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSMessengerProps
+export interface NSNotificationProps extends BaseComponentProps
 {
     title: string;
-    success: boolean;
+    type: NSNotificationType;
 }
 
-export interface NSMessengerState
+export interface NSNotificationState
 {
     show: boolean;
 }
 
-export class NSMessenger extends React.Component<NSMessengerProps, NSMessengerState>
+export enum NSNotificationType
 {
-    constructor(props: NSMessengerProps)
+    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 = {
@@ -37,9 +47,10 @@ export class NSMessenger extends React.Component<NSMessengerProps, NSMessengerSt
 
     override render()
     {
+        let style = Styles["ns_" + this.props.type.toString().toLowerCase];
         return <>
             {this.state.show && (
-                <div className={`${Styles.ns_messenger} "" ${this.props.success == true ? Styles.ns_green : Styles.ns_red}`}>
+                <div className={`${Styles.ns_messenger} ${style}`}>
                     <p className={`mb-0 ns-font-16-normal`}>{this.props.title}</p>
                     <img
                         className={Styles.ns_exit_icon}

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;
@@ -48,12 +49,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,12 +77,12 @@ 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>
         );

package/src/components/NSPanel.tsx

@@ -1,18 +1,20 @@
 "use client";
 
 import { Component, ReactNode } from "react";
-import Styles from './NSPanel.module.css'
+import Styles from './NSPanel.module.css';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSSectionProps
+export interface NSSectionProps extends BaseComponentProps
 {
     children: ReactNode;
     grid: boolean;
 }
 
 export interface NSSectionState
-{}
+{ }
 
-export class NSPanel extends Component<NSSectionProps, NSSectionState> {
+export class NSPanel extends Component<NSSectionProps, NSSectionState>
+{
     constructor(props: NSSectionProps)
     {
         super(props);
@@ -21,7 +23,7 @@ export class NSPanel extends Component<NSSectionProps, NSSectionState> {
     {
         return (
             <section
-                className={this.props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column  } >
+                className={this.props.grid ? Styles.ns_panel_grid : Styles.ns_panel_column} >
                 {this.props.children}
             </section>
         );

package/src/components/NSSection.tsx

@@ -3,8 +3,9 @@
 import { Component, 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;

package/src/components/NSSectionBars.tsx

@@ -6,8 +6,9 @@ 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[]

package/src/components/NSSectionCards.tsx

@@ -8,8 +8,9 @@ import { NSSection } from './NSSection';
 import { NSLinkBlue } from './NSLinkBlue';
 import { BackgroundProps } from '../props/BackgroundProps';
 import { NSSpace, NSSpaceSizeType } from './NSSpace';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSSectionCardsProps
+export interface NSSectionCardsProps extends BaseComponentProps
 {
 	title?: {
 		text: string,
@@ -39,7 +40,7 @@ export class NSSectionCards extends Component<NSSectionCardsProps>
 						{
 							this.props.title &&
 							<div className={Styles.ns_section_cards_title_container}>
-									<NSTitle color={this.props.title?.color} title={this.props.title?.text} />
+								<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>

package/src/components/NSSectionTitle.tsx

@@ -5,8 +5,9 @@ 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
+export interface NSSectionTitleProps extends BaseComponentProps
 {
 	title: {
 		text: string,

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

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[];

package/src/components/NSTitle.tsx

@@ -2,8 +2,9 @@
 
 import { Component } from 'react';
 import Styles from './NSTitle.module.css';
+import { BaseComponentProps } from "../props/BaseComponentProps";
 
-export interface NSTitleProps
+export interface NSTitleProps extends BaseComponentProps
 {
 	title: string;
 	color?: string;

package/src/main.ts

@@ -6,9 +6,10 @@ export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";
 export * from "./components/NSEntityBar";
+export * from "./components/NSInputErrorNotifier";
 export * from "./components/NSFooter";
 export * from "./components/NSHeader";
-export * from "./components/NSInputCopy";
+export * from "./components/NSCopyToClipboard";
 export * from "./components/NSInputDate";
 export * from "./components/NSInputDuration";
 export * from "./components/NSInputEmail";
@@ -26,7 +27,7 @@ export * from "./components/NSLayout";
 export * from "./components/NSLayoutHeroBanner";
 export * from "./components/NSLayoutTitle";
 export * from "./components/NSLoading";
-export * from "./components/NSMessenger";
+export * from "./components/NSNotification";
 export * from "./components/NSSelectBox";
 export * from "./components/NSSpace";
 export * from "./components/NSSection";

package/src/props/NSButtonProps.ts

@@ -1,7 +1,8 @@
 import { BackgroundProps } from "./BackgroundProps";
+import { BaseComponentProps } from "./BaseComponentProps";
 import { ImageProps } from "./ImageProps";
 
-export interface NSButtonProps
+export interface NSButtonProps extends BaseComponentProps // todo
 {
     title: string;
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

package/dist/components/NSInputCopy.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-export interface NSNSInputCopyProps {
-    title: string;
-    defaultValue?: string;
-    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export interface NSNSInputCopyState {
-    value: string;
-}
-export declare class NSInputCopy extends React.Component<NSNSInputCopyProps, NSNSInputCopyState> {
-    constructor(props: NSNSInputCopyProps);
-    getValue(): string;
-    setValue(value: string): void;
-    private onChanged;
-    copyToClipboard(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}

package/dist/components/NSInputCopy.js

@@ -1,38 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import Styles from "./NSInputCopy.module.css";
-import IconInputString from '../assets/images/icon-input-copy.svg';
-export class NSInputCopy extends React.Component {
-    constructor(props) {
-        var _a;
-        super(props);
-        this.state = {
-            value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "",
-        };
-        this.getValue = this.getValue.bind(this);
-        this.setValue = this.setValue.bind(this);
-        this.onChanged = this.onChanged.bind(this);
-        this.copyToClipboard = this.copyToClipboard.bind(this);
-    }
-    getValue() {
-        return this.state.value;
-    }
-    setValue(value) {
-        this.setState({ value });
-    }
-    onChanged(e) {
-        this.setValue(e.target.value);
-        if (this.props.onChanged)
-            this.props.onChanged(e);
-    }
-    copyToClipboard() {
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-            navigator.clipboard.writeText(this.getValue());
-        }
-    }
-    render() {
-        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2`, children: [_jsx("span", { className: Styles.ns_input_title, children: this.props.title }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputString, alt: "icon", width: 16, height: 16, onClick: this.copyToClipboard }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "text", className: Styles.ns_input, placeholder: "12AB34cf" })] }));
-    }
-}
-//# sourceMappingURL=NSInputCopy.js.map

package/dist/components/NSInputCopy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSInputCopy.js","sourceRoot":"","sources":["../../src/components/NSInputCopy.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,eAAe,MAAM,sCAAsC,CAAC;AAenE,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAiD;IAEpF,YAAY,KAAyB;;QAEjC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;SAClC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACD,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACO,SAAS,CAAC,CAAsC;QAEpD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC;IACD,eAAe;QAEX,IAAI,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,SAAS,CAAC,SAAS,EACxD,CAAC;YACG,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnD,CAAC;IACL,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,aAC3C,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,IAAI,CAAC,eAAe,GAC/B,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,UAAU,GACxB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSMessenger.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-export interface NSMessengerProps {
-    title: string;
-    success: boolean;
-}
-export interface NSMessengerState {
-    show: boolean;
-}
-export declare class NSMessenger extends React.Component<NSMessengerProps, NSMessengerState> {
-    constructor(props: NSMessengerProps);
-    componentDidMount(): void;
-    handleDestroy: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}

package/dist/components/NSMessenger.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from "react";
-import Exit from '../assets/images/close-vector.png';
-import Styles from "./NSMessenger.module.css";
-export class NSMessenger extends React.Component {
-    constructor(props) {
-        super(props);
-        this.handleDestroy = () => {
-            this.setState({ show: false });
-        };
-        this.state = {
-            show: true,
-        };
-    }
-    componentDidMount() {
-        setTimeout(() => { this.handleDestroy(); }, 8000);
-    }
-    render() {
-        return _jsx(_Fragment, { children: this.state.show && (_jsxs("div", { className: `${Styles.ns_messenger} "" ${this.props.success == true ? Styles.ns_green : Styles.ns_red}`, children: [_jsx("p", { className: `mb-0 ns-font-16-normal`, children: this.props.title }), _jsx("img", { className: Styles.ns_exit_icon, src: Exit, alt: "exit", width: 32, height: 32, onClick: () => this.handleDestroy() })] })) });
-    }
-}
-//# sourceMappingURL=NSMessenger.js.map

package/dist/components/NSMessenger.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NSMessenger.js","sourceRoot":"","sources":["../../src/components/NSMessenger.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,mCAAmC,CAAC;AACrD,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAa9C,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,SAA6C;IAEhF,YAAY,KAAuB;QAE/B,KAAK,CAAC,KAAK,CAAC,CAAC;QAWjB,kBAAa,GAAG,GAAG,EAAE;YAEjB,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC;QAbE,IAAI,CAAC,KAAK,GAAG;YACT,IAAI,EAAE,IAAI;SACb,CAAC;IACN,CAAC;IAEQ,iBAAiB;QAEtB,UAAU,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,CAAA,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IACrD,CAAC;IAOQ,MAAM;QAEX,OAAO,4BACF,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAChB,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,YAAY,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,aACvG,YAAG,SAAS,EAAE,wBAAwB,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAK,EAC9D,cACI,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,GAAG,EAAE,IAAI,EACT,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,GACrC,IACA,CACT,GACF,CAAA;IACP,CAAC;CACJ"}

package/dist/components/NSMessenger.module.css

@@ -1,16 +0,0 @@
-.ns_messenger {
-    background-color: #fff;
-    padding: 12px 15px;
-    display: flex;
-        justify-content: space-between;
-        align-items: center;
-}
-
-.ns_green {
-    border: 3px solid rgba(112, 224, 0, 1);
-    box-shadow: 1px 1px 8px 0px rgba(112, 224, 0, 1);
-}
-.ns_red {
-    border: 3px solid red;
-    box-shadow: 1px 1px 8px 0px red;
-}

package/src/components/NSInputCopy.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import React from "react";
-import Styles from "./NSInputCopy.module.css";
-import IconInputString from '../assets/images/icon-input-copy.svg';
-
-
-export interface NSNSInputCopyProps
-{
-    title: string;
-    defaultValue?: string;
-    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export interface NSNSInputCopyState
-{
-    value: string;
-}
-
-export class NSInputCopy extends React.Component<NSNSInputCopyProps, NSNSInputCopyState>
-{
-    constructor(props: NSNSInputCopyProps)
-    {
-        super(props);
-        this.state = {
-            value: props.defaultValue ?? "",
-        };
-        this.getValue = this.getValue.bind(this);
-        this.setValue = this.setValue.bind(this);
-        this.onChanged = this.onChanged.bind(this);
-        this.copyToClipboard = this.copyToClipboard.bind(this);
-    }
-    getValue(): string
-    {
-        return this.state.value;
-    }
-    setValue(value: string): void
-    {
-        this.setState({ value });
-    }
-    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
-    {
-        this.setValue(e.target.value);
-        if (this.props.onChanged)
-            this.props.onChanged(e);
-    }
-    copyToClipboard(): void
-    {
-        if (navigator.clipboard && navigator.clipboard.writeText)
-        {
-            navigator.clipboard.writeText(this.getValue());
-        } 
-    }
-    override render()
-    {
-        return (
-            <div className={`${Styles.ns_input_parent} p-2`}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
-                <img
-                    className={Styles.ns_input_icon}
-                    src={IconInputString}
-                    alt="icon"
-                    width={16}
-                    height={16}
-                    onClick={this.copyToClipboard}
-                />
-                <input
-                    value={this.state.value}
-                    onChange={this.onChanged}
-                    type="text"
-                    className={Styles.ns_input}
-                    placeholder="12AB34cf"
-                />
-            </div>
-        );
-    }
-}

package/src/components/NSMessenger.module.css

@@ -1,16 +0,0 @@
-.ns_messenger {
-    background-color: #fff;
-    padding: 12px 15px;
-    display: flex;
-        justify-content: space-between;
-        align-items: center;
-}
-
-.ns_green {
-    border: 3px solid rgba(112, 224, 0, 1);
-    box-shadow: 1px 1px 8px 0px rgba(112, 224, 0, 1);
-}
-.ns_red {
-    border: 3px solid red;
-    box-shadow: 1px 1px 8px 0px red;
-}