namirasoft-site-react 1.3.347 → 1.3.349

package/dist/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iCAAiC,CAAC;AAChD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC"}

package/dist/pages/NSNotFoundPage.module.css

@@ -1,19 +1,19 @@
-.ns_not_found_page {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-image: url('../assets/images/404\ image_mobile.svg');
-	background-repeat: no-repeat;
-	background-size: contain;
-	background-position: center;
-	background-color: #fff;
-	width: 100%;
-	height: 80vh;
-	margin-bottom: 48px;
-}
-
-@media only screen and (min-width: 1024px) {
-	.ns_not_found_page {
-		background-image: url('../assets/images/404\ image.svg');
-	}
+.ns_not_found_page {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-image: url('../assets/images/404\ image_mobile.svg');
+	background-repeat: no-repeat;
+	background-size: contain;
+	background-position: center;
+	background-color: #fff;
+	width: 100%;
+	height: 80vh;
+	margin-bottom: 48px;
+}
+
+@media only screen and (min-width: 1024px) {
+	.ns_not_found_page {
+		background-image: url('../assets/images/404\ image.svg');
+	}
 }

package/package.json

@@ -1,68 +1,68 @@
-{
-    "name": "namirasoft-site-react",
-    "title": "Namirasoft Site React NPM Package",
-    "description": "Namira Software Corporation Site React NPM Package",
-    "icon": "logo.png",
-    "logo": "https://static.namirasoft.com/image/namirasoft/site/logo/base.png",
-    "language": "ts",
-    "framework": "npm",
-    "application": "package",
-    "private": false,
-    "version": "1.3.347",
-    "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
-    "license": "MIT",
-    "main": "./dist/main.js",
-    "types": "./dist/main.d.ts",
-    "scripts": {
-        "start": "react-app-rewired start",
-        "build": "npm run copy",
-        "test": "react-app-rewired test",
-        "eject": "react-app-rewired eject",
-        "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
-    },
-    "dependencies": {
-        "@types/node": "^20.14.11",
-        "@types/react": "^18.3.3",
-        "@types/react-bootstrap": "^0.32.37",
-        "@types/react-dom": "^18.3.0",
-        "antd": "^5.19.2",
-        "bootstrap": "^5.3.3",
-        "copyfiles": "^2.4.1",
-        "link-react": "^3.0.0",
-        "namirasoft-api-link": "^1.3.16",
-        "namirasoft-core": "^1.3.71",
-        "path-browserify": "^1.0.1",
-        "react": "^18.3.1",
-        "react-app-rewired": "^2.2.1",
-        "react-bootstrap": "^2.10.4",
-        "react-dom": "^18.3.1",
-        "react-phone-input-2": "^2.15.1",
-        "react-phone-number-input": "^3.4.3",
-        "react-router-dom": "^6.25.1",
-        "react-scripts": "5.0.1",
-        "xlsx": "^0.18.5"
-    },
-    "eslintConfig": {
-        "extends": [
-            "react-app",
-            "react-app/jest"
-        ]
-    },
-    "skip": {
-        "files": [
-            "/tsconfig.json"
-        ]
-    },
-    "browserslist": {
-        "production": [
-            ">0.2%",
-            "not dead",
-            "not op_mini all"
-        ],
-        "development": [
-            "last 1 chrome version",
-            "last 1 firefox version",
-            "last 1 safari version"
-        ]
-    }
+{
+    "name": "namirasoft-site-react",
+    "title": "Namirasoft Site React NPM Package",
+    "description": "Namira Software Corporation Site React NPM Package",
+    "icon": "logo.png",
+    "logo": "https://static.namirasoft.com/image/namirasoft/site/logo/base.png",
+    "language": "ts",
+    "framework": "npm",
+    "application": "package",
+    "private": false,
+    "version": "1.3.349",
+    "author": "Amir Abolhasani, Alireza Esmaeeli, Sepideh Mazloumi, Hooman Shashaeh",
+    "license": "MIT",
+    "main": "./dist/main.js",
+    "types": "./dist/main.d.ts",
+    "scripts": {
+        "start": "react-app-rewired start",
+        "build": "npm run copy",
+        "test": "react-app-rewired test",
+        "eject": "react-app-rewired eject",
+        "copy": "copyfiles -u 1 src/**/*.html src/**/*.css src/**/*.svg src/**/*.png src/**/*.jpg dist/"
+    },
+    "dependencies": {
+        "@types/node": "^20.14.11",
+        "@types/react": "^18.3.3",
+        "@types/react-bootstrap": "^0.32.37",
+        "@types/react-dom": "^18.3.0",
+        "antd": "^5.19.3",
+        "bootstrap": "^5.3.3",
+        "copyfiles": "^2.4.1",
+        "link-react": "^3.0.0",
+        "namirasoft-api-link": "^1.3.17",
+        "namirasoft-core": "^1.3.76",
+        "path-browserify": "^1.0.1",
+        "react": "^18.3.1",
+        "react-app-rewired": "^2.2.1",
+        "react-bootstrap": "^2.10.4",
+        "react-dom": "^18.3.1",
+        "react-phone-input-2": "^2.15.1",
+        "react-phone-number-input": "^3.4.3",
+        "react-router-dom": "^6.25.1",
+        "react-scripts": "5.0.1",
+        "xlsx": "^0.18.5"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "skip": {
+        "files": [
+            "/tsconfig.json"
+        ]
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
 }

package/public/index.html

@@ -1,39 +1,39 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-            Notice the use of %PUBLIC_URL% in the tags above.
-            It will be replaced with the URL of the `public` folder during the build.
-            Only files inside the `public` folder can be referenced from the HTML.
-
-            Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-            work correctly both with client-side routing and a non-root public URL.
-            Learn how to configure a non-root public URL by running `npm run build`.
-        -->
-    <title>React App</title>
-</head>
-
-<body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-
-    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
-        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
-        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
-        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
-        crossorigin="anonymous"></script> -->
-</body>
-
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+            Notice the use of %PUBLIC_URL% in the tags above.
+            It will be replaced with the URL of the `public` folder during the build.
+            Only files inside the `public` folder can be referenced from the HTML.
+
+            Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+            work correctly both with client-side routing and a non-root public URL.
+            Learn how to configure a non-root public URL by running `npm run build`.
+        -->
+    <title>React App</title>
+</head>
+
+<body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
+        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
+        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+        crossorigin="anonymous"></script> -->
+</body>
+
 </html>

package/src/App.css

@@ -1,17 +1,17 @@
-/*Start Input Tell*/
-.country-name {
-    color: #000 !important;
-}
-.country-list {
-    max-width: 206px;
-}
-.react-tel-input .flag-dropdown {
-    border: 1px solid #cacaca;
-    border-radius: 5px 0 0 5px;
-    border: 1px solid rgba(47, 0, 236, 0.6) !important;
-}
-/*End Input Tell*/
-.ns_font_16_bold{
-    font-size: 16px;
-    font-weight: 600;
+/*Start Input Tell*/
+.country-name {
+    color: #000 !important;
+}
+.country-list {
+    max-width: 206px;
+}
+.react-tel-input .flag-dropdown {
+    border: 1px solid #cacaca;
+    border-radius: 5px 0 0 5px;
+    border: 1px solid rgba(47, 0, 236, 0.6) !important;
+}
+/*End Input Tell*/
+.ns_font_16_bold{
+    font-size: 16px;
+    font-weight: 600;
 }

package/src/App.tsx

@@ -1,167 +1,167 @@
-import './App.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { NSBarAction, NSBoxBoolean, NSBoxEmail, NSBoxEnum, NSBoxSearch, NSBoxString, NSEntityBar, NSLayout, NSNoData, NSPagination, NSSpace, NSSpaceSizeType, NSTabPage, NSTable } from './main';
-import { NSBoxLabel } from './components/NSBoxLabel';
-import { NSRadioButton } from './components/NSRadioButton';
-import NSTag from './components/NSTag';
-import NSButton from './components/NSButton';
-import { useRef } from 'react';
-
-export interface INSBarActionState
-{
-	id: string;
-	menu_item: string;
-	handler: () => void;
-	isActive: () => boolean;
-}
-export function App()
-{
-	const onClicked = () =>
-	{
-		console.log("clicked")
-	}
-	let icons = [
-		{ src: "https://static.namirasoft.com/image/namirasoft/message/logo/base.png", alt: "", onClicked, count: 1 },
-		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
-		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
-		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
-		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
-		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
-		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
-	];
-	let content1 = () => <>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
-	</>;
-	let content2 = () => <div>Content for Tab2</div>;
-	let content3 = () => <div>Content for Tab3</div>;
-	const tabs = [
-		{ title: 'Information', getContent: content1 },
-		{ title: 'Price History', getContent: content2 },
-		{ title: 'Price Estimator', getContent: content3 }
-	];
-
-	const getColumns = (): { [key: string]: string } =>
-	{
-		return {
-			id: "ID",
-			name: "Name",
-			user_id: "User Id",
-			os: "OS"
-		};
-	};
-	let rows = [
-		{
-			id: 1,
-			name: "Accountant",
-			policy: "Lorem ipsum dolor sit amet, consetetur ",
-		},
-		{
-			id: 2,
-			name: "Accountant",
-			policy: "Lorem ipsum dolor sit amet, consetetur ",
-		},
-		{
-			id: 3,
-			name: "Accountant",
-			policy: "Lorem ipsum dolor sit amet, consetetur ",
-		},
-		{
-			id: 4,
-			name: "Accountant",
-			policy: "Lorem ipsum dolor sit amet, consetetur ",
-		},
-	]
-	let group: any = [
-		[
-			{
-				id: "1",
-				handler: () => { },
-				isActive: () => false,
-				menu_item: "1"
-			}, {
-				id: "2",
-				handler: () => { },
-				isActive: () => true,
-				menu_item: "2"
-			},
-			{
-				id: "2",
-				handler: () => { },
-				isActive: () => true,
-				menu_item: "3"
-			}
-		]
-	]
-	let table = useRef<NSTable<any>>(null);
-	function getCell(row: any, column: string): any
-	{
-		if (column === "check")
-		{
-			return <>
-				<input id={`checkbox_${row.id}`} type="checkbox" className="table_checkbox" />
-				<label htmlFor={`checkbox_${row.id}`}></label>
-			</>
-		} else
-		{
-			return (row as any)[column];
-		}
-	}
-	return (
-		<>
-			<NSLayout
-				header={{
-					title: "any",
-					icons: icons
-				}}
-				scope="Namirasoft Account Console"
-				logo="exampleLogoUrl"
-				notifications={[]}
-				background=""
-				isLoggedIn={() => false}
-			>
-				<>
-					<NSTabPage tabs={tabs} />
-					<NSSpace size={NSSpaceSizeType.SMALL} />
-					<NSPagination totalItems={100} onPageChange={() => { }} />
-				</>
-				<NSTable
-					ref={table}
-					columns={getColumns()}
-					getCell={getCell}
-					getRowKey={row => row.id.toString()}
-					getColumnAttributes={() => { return {} }}
-					getRows={async () => { return { rows, count: rows.length }; }}
-					checkbox={true}
-				/>
-				<NSBarAction title='' menus={group} />
-				<NSBoxEmail title='Email' required />
-				<NSBoxString title='String' required />
-				<NSRadioButton title={"Radio Button"} required={false} />
-				<NSSpace size={NSSpaceSizeType.LARGE} />
-				<NSBoxBoolean defaultValue={true} title='' required />
-				<NSButton title='Clear Filters' onClick={() => window.location.reload()} style={{ width: "136px", border: "2px solid #001664" }} />
-				<NSTag />
-				<NSNoData lable="No New Message" />
-				<div className="d-flex flex-row gap-2 w-100">
-					<NSBoxString title="Name" required />
-					<NSBoxEnum options={[]} required title='Notification_sender_topic_id' multiple />
-					<NSBoxEmail title="Name" required />
-					<NSBoxSearch title="Name" required />
-				</div>
-				<NSSpace size={NSSpaceSizeType.MEDUIM} />
-				<NSBoxBoolean title='CheckBox' required />
-				<NSEntityBar title='' description='' image={{ src: "" }} />
-			</NSLayout>
-		</>
-	);
+import './App.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { NSBarAction, NSBoxBoolean, NSBoxEmail, NSBoxEnum, NSBoxSearch, NSBoxString, NSEntityBar, NSLayout, NSNoData, NSPagination, NSSpace, NSSpaceSizeType, NSTabPage, NSTable } from './main';
+import { NSBoxLabel } from './components/NSBoxLabel';
+import { NSRadioButton } from './components/NSRadioButton';
+import NSTag from './components/NSTag';
+import NSButton from './components/NSButton';
+import { useRef } from 'react';
+
+export interface INSBarActionState
+{
+	id: string;
+	menu_item: string;
+	handler: () => void;
+	isActive: () => boolean;
+}
+export function App()
+{
+	const onClicked = () =>
+	{
+		console.log("clicked")
+	}
+	let icons = [
+		{ src: "https://static.namirasoft.com/image/namirasoft/message/logo/base.png", alt: "", onClicked, count: 1 },
+		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
+		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
+		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
+		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
+		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
+		{ src: "https://static.namirasoft.com/image/concept/logout/white.svg", alt: "", onClicked },
+	];
+	let content1 = () => <>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+		<NSBoxLabel title="URL"><p style={{ color: "#000" }}>http://URL.com</p></NSBoxLabel>
+	</>;
+	let content2 = () => <div>Content for Tab2</div>;
+	let content3 = () => <div>Content for Tab3</div>;
+	const tabs = [
+		{ title: 'Information', getContent: content1 },
+		{ title: 'Price History', getContent: content2 },
+		{ title: 'Price Estimator', getContent: content3 }
+	];
+
+	const getColumns = (): { [key: string]: string } =>
+	{
+		return {
+			id: "ID",
+			name: "Name",
+			user_id: "User Id",
+			os: "OS"
+		};
+	};
+	let rows = [
+		{
+			id: 1,
+			name: "Accountant",
+			policy: "Lorem ipsum dolor sit amet, consetetur ",
+		},
+		{
+			id: 2,
+			name: "Accountant",
+			policy: "Lorem ipsum dolor sit amet, consetetur ",
+		},
+		{
+			id: 3,
+			name: "Accountant",
+			policy: "Lorem ipsum dolor sit amet, consetetur ",
+		},
+		{
+			id: 4,
+			name: "Accountant",
+			policy: "Lorem ipsum dolor sit amet, consetetur ",
+		},
+	]
+	let group: any = [
+		[
+			{
+				id: "1",
+				handler: () => { },
+				isActive: () => false,
+				menu_item: "1"
+			}, {
+				id: "2",
+				handler: () => { },
+				isActive: () => true,
+				menu_item: "2"
+			},
+			{
+				id: "2",
+				handler: () => { },
+				isActive: () => true,
+				menu_item: "3"
+			}
+		]
+	]
+	let table = useRef<NSTable<any>>(null);
+	function getCell(row: any, column: string): any
+	{
+		if (column === "check")
+		{
+			return <>
+				<input id={`checkbox_${row.id}`} type="checkbox" className="table_checkbox" />
+				<label htmlFor={`checkbox_${row.id}`}></label>
+			</>
+		} else
+		{
+			return (row as any)[column];
+		}
+	}
+	return (
+		<>
+			<NSLayout
+				header={{
+					title: "any",
+					icons: icons
+				}}
+				scope="Namirasoft Account Console"
+				logo="exampleLogoUrl"
+				notifications={[]}
+				background=""
+				isLoggedIn={() => false}
+			>
+				<>
+					<NSTabPage tabs={tabs} />
+					<NSSpace size={NSSpaceSizeType.SMALL} />
+					<NSPagination totalItems={100} onPageChange={() => { }} />
+				</>
+				<NSTable
+					ref={table}
+					columns={getColumns()}
+					getCell={getCell}
+					getRowKey={row => row.id.toString()}
+					getColumnAttributes={() => { return {} }}
+					getRows={async () => { return { rows, count: rows.length }; }}
+					checkbox={true}
+				/>
+				<NSBarAction title='' menus={group} />
+				<NSBoxEmail title='Email' required />
+				<NSBoxString title='String' required />
+				<NSRadioButton title={"Radio Button"} required={false} />
+				<NSSpace size={NSSpaceSizeType.LARGE} />
+				<NSBoxBoolean defaultValue={true} title='' required />
+				<NSButton title='Clear Filters' onClick={() => window.location.reload()} style={{ width: "136px", border: "2px solid #001664" }} />
+				<NSTag />
+				<NSNoData lable="No New Message" />
+				<div className="d-flex flex-row gap-2 w-100">
+					<NSBoxString title="Name" required />
+					<NSBoxEnum options={[]} required title='Notification_sender_topic_id' multiple />
+					<NSBoxEmail title="Name" required />
+					<NSBoxSearch title="Name" required />
+				</div>
+				<NSSpace size={NSSpaceSizeType.MEDUIM} />
+				<NSBoxBoolean title='CheckBox' required />
+				<NSEntityBar title='' description='' image={{ src: "" }} />
+			</NSLayout>
+		</>
+	);
 }

package/src/CopyToClipboard.ts

@@ -1,7 +1,7 @@
-export default class CopyToClipboard
-{
-    static copyToClipboard(value: string): void
-    {
-        navigator.clipboard.writeText(value);
-    }
+export default class CopyToClipboard
+{
+    static copyToClipboard(value: string): void
+    {
+        navigator.clipboard.writeText(value);
+    }
 };