namirasoft-site-react 1.2.0 → 1.2.2

package/dist/components/NSInputText.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface IProps {
+    title: string;
+}
+interface IState {
+    value: string;
+}
+export default class NSInputText extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void;
+    setDefaultValue(value: string): void;
+    getValue(): string;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/NSInputText.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSInputText.module.css";
+import IconInputText from '../assets/images/icon-input-text.svg';
+export default class NSInputText extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e) {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value) {
+        this.setState({ value });
+    }
+    getValue() {
+        return this.state.value;
+    }
+    render() {
+        return (_jsxs("div", Object.assign({ className: `${Styles.ns_input_parent} p-2` }, { children: [_jsx("span", Object.assign({ className: Styles.ns_input_title }, { children: this.props.title })), _jsx("img", { className: Styles.ns_input_icon, src: IconInputText, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.setValue, type: "text", className: Styles.ns_input, placeholder: "Enter your Text" })] })));
+    }
+}
+//# sourceMappingURL=NSInputText.js.map

package/dist/components/NSInputText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSInputText.js","sourceRoot":"","sources":["../../src/components/NSInputText.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAYjE,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAyB;IACpE,YAAY,KAAa;QAErB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,EAAE;SACZ,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,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IACD,QAAQ,CAAC,CAAsC;QAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC7C,CAAC;IACD,eAAe,CAAC,KAAa;QAEzB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,iBAC3C,6BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,gBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,aAAa,EAClB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,iBAAiB,GAC/B,KAEA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSInputText.module.css

@@ -0,0 +1,25 @@
+.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;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/dist/components/NSInputTime.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface IProps {
+    title: string;
+}
+interface IState {
+    value: string;
+}
+export default class NSInputTime extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    setValue(e: React.ChangeEvent<HTMLInputElement>): void;
+    setDefaultValue(value: string): void;
+    getValue(): string;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/NSInputTime.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSInputTime.module.css";
+import IconInputTime from '../assets/images/icon-input-time.svg';
+export default class NSInputTime extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: "",
+        };
+        this.setValue = this.setValue.bind(this);
+        this.getValue = this.getValue.bind(this);
+        this.setDefaultValue = this.setDefaultValue.bind(this);
+    }
+    setValue(e) {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value) {
+        this.setState({ value });
+    }
+    getValue() {
+        return this.state.value;
+    }
+    render() {
+        return (_jsxs("div", Object.assign({ className: `${Styles.ns_input_parent} p-2` }, { children: [_jsx("span", Object.assign({ className: Styles.ns_input_title }, { children: this.props.title })), _jsx("img", { className: Styles.ns_input_icon, src: IconInputTime, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.setValue, type: "time", className: Styles.ns_input, placeholder: "21:44:06", step: "2" })] })));
+    }
+}
+//# sourceMappingURL=NSInputTime.js.map

package/dist/components/NSInputTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSInputTime.js","sourceRoot":"","sources":["../../src/components/NSInputTime.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAYjE,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAyB;IACpE,YAAY,KAAa;QAErB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,EAAE;SACZ,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,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IACD,QAAQ,CAAC,CAAsC;QAE3C,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC7C,CAAC;IACD,eAAe,CAAC,KAAa;QAEzB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,6BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,iBAC3C,6BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,gBAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAQ,EACjE,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,aAAa,EAClB,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,UAAU,EACtB,IAAI,EAAC,GAAG,GACV,KACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSInputTime.module.css

@@ -0,0 +1,24 @@
+.ns_input_parent{
+    display: flex;
+    flex-direction: column;
+    width: 326px;
+    color: #fff;
+    position: relative;
+    max-width: 100%;
+}
+.ns_input{
+    border-radius: 8px;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+}
+.ns_input_icon{
+    position: absolute;
+    right: 20px;
+    top: 51%;
+    z-index: 1;
+}
+.ns_input_title {
+    font-size: 16px;
+    font-weight: 400;
+}

package/dist/components/NSSelectBox.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import type { SelectProps } from 'antd';
+interface IProps {
+    title: string;
+    options: SelectProps['options'];
+}
+interface IState {
+    value: string[];
+}
+export default class NSSelectBox extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    setValue(value: string[]): void;
+    getValue(): string[];
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/NSSelectBox.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import Styles from "./NSSelectBox.module.css";
+import { Select, Space } from 'antd';
+import { CaretDownOutlined } from '@ant-design/icons';
+export default class NSSelectBox extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            value: [],
+        };
+        this.setValue = this.setValue.bind(this);
+    }
+    setValue(value) {
+        this.setState({ value });
+    }
+    getValue() {
+        return this.state.value;
+    }
+    render() {
+        return (_jsx("div", Object.assign({ className: `${Styles.ns_input_parent} p-2` }, { children: _jsx(Select, { suffixIcon: _jsx(CaretDownOutlined, {}), mode: "multiple", style: { width: '100%' }, className: Styles.ns_input_select, placeholder: "Combo Box", onChange: this.setValue, optionLabelProp: "label", options: this.props.options, optionRender: (option) => (_jsx(Space, Object.assign({ className: Styles.ns_input_select_option }, { children: option.data.desc }))) }) })));
+    }
+}
+//# sourceMappingURL=NSSelectBox.js.map

package/dist/components/NSSelectBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NSSelectBox.js","sourceRoot":"","sources":["../../src/components/NSSelectBox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,MAAM,CAAC;AAErC,OAAO,EAAC,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAapD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAyB;IACpE,YAAY,KAAa;QAErB,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YACT,KAAK,EAAE,EAAE;SACZ,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,CAAC;IACD,QAAQ,CAAC,KAAe;QAEpB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC7B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC5B,CAAC;IACQ,MAAM;QAGX,OAAO,CACH,4BAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,MAAM,gBAC3C,KAAC,MAAM,IACH,UAAU,EAAE,KAAC,iBAAiB,KAAG,EACjC,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EACxB,SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,WAAW,EAAC,WAAW,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,eAAe,EAAC,OAAO,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,CACtB,KAAC,KAAK,kBAAC,SAAS,EAAE,MAAM,CAAC,sBAAsB,gBAC1C,MAAM,CAAC,IAAI,CAAC,IAAI,IACb,CACX,GACH,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSSelectBox.module.css

@@ -0,0 +1,25 @@
+.ns_input_parent {
+    width: 326px;
+    max-width: 100%;
+}
+
+.ns_input_select {
+    height: 48px;
+    width: 304px !important;
+}
+.ns_input_select span span svg path{
+    height: 24px !important;
+    width: 24px !important;
+}
+.ns_input_select span span svg {
+    height: 24px !important;
+    width: 24px !important;
+}
+.ns_input_select span span span svg path{
+    height: 12px !important;
+    width: 12px !important;
+}
+.ns_input_select span span span svg {
+    height: 12px !important;
+    width: 12px !important;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+import './index.css';

package/dist/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(_jsx(App, {}));
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,aAAa,CAAC;AACrB,OAAO,GAAG,MAAM,OAAO,CAAC;AAExB,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAC9B,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAgB,CAC/C,CAAC;AACF,IAAI,CAAC,MAAM,CAAC,KAAC,GAAG,KAAG,CAAC,CAAC"}

package/dist/main.d.ts

@@ -0,0 +1,17 @@
+export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonRed";
+export * from "./components/NSFooter";
+export * from "./components/NSHeader";
+export * from "./components/NSInputDate";
+export * from "./components/NSInputDuration";
+export * from "./components/NSInputEmail";
+export * from "./components/NSInputFloat";
+export * from "./components/NSInputIP";
+export * from "./components/NSInputInteger";
+export * from "./components/NSInputPhone";
+export * from "./components/NSInputPrice";
+export * from "./components/NSInputSearch";
+export * from "./components/NSInputString";
+export * from "./components/NSInputText";
+export * from "./components/NSInputTime";
+export * from "./components/NSSelectBox";

package/dist/main.js

@@ -0,0 +1,18 @@
+export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonRed";
+export * from "./components/NSFooter";
+export * from "./components/NSHeader";
+export * from "./components/NSInputDate";
+export * from "./components/NSInputDuration";
+export * from "./components/NSInputEmail";
+export * from "./components/NSInputFloat";
+export * from "./components/NSInputIP";
+export * from "./components/NSInputInteger";
+export * from "./components/NSInputPhone";
+export * from "./components/NSInputPrice";
+export * from "./components/NSInputSearch";
+export * from "./components/NSInputString";
+export * from "./components/NSInputText";
+export * from "./components/NSInputTime";
+export * from "./components/NSSelectBox";
+//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC"}

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "namirasoft-site-react",
-  "version": "1.2.0",
+  "version": "1.2.2",
+  "main": "./dist/main.js",
+  "types": "./dist/main.d.ts",
   "dependencies": {
-    "@types/node": "^20.10.3",
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
-    "antd": "^5.12.1",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "antd": "^5.12.5",
     "bootstrap": "^5.3.2",
-    "namirasoft-api-link": "^1.2.2",
+    "namirasoft-api-link": "^1.2.3",
     "namirasoft-core": "^1.2.4",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-app-rewired": "^2.2.1",
-    "react-bootstrap": "^2.9.1",
+    "react-bootstrap": "^2.9.2",
     "react-dom": "^18.2.0",
     "react-phone-input-2": "^2.15.1",
     "react-phone-number-input": "^3.3.7",
@@ -20,9 +22,11 @@
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "build": "npm run clean && tsc && npm run copy",
     "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject"
+    "eject": "react-app-rewired eject",
+    "clean": "rimraf dist/",
+    "copy": "copyfiles -u 1 src/**/*.html src/**/*.css dist/"
   },
   "eslintConfig": {
     "extends": [
@@ -41,5 +45,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "copyfiles": "^2.4.1",
+    "rimraf": "^5.0.5"
   }
-}
+}

package/src/App.tsx

@@ -14,58 +14,57 @@ import NSInputIP from './components/NSInputIP';
 import NSInputEmail from './components/NSInputEmail';
 import NSInputSearch from './components/NSInputSearch';
 import NSInputPhone from './components/NSInputPhone';
-import NSButtonGreen from './components/NSButtonGreen';
-import NSButtonRed from './components/NSButtonRed';
+import { NSButtonGreen } from './components/NSButtonGreen';
+import { NSButtonRed } from './components/NSButtonRed';
 import NSSelectBox from './components/NSSelectBox';
 import type { SelectProps } from 'antd';
 
-function App()
-{
-  const options: SelectProps['options'] = [
-    {
-      label: 'Test1',
-      value: 'test1',
-      desc: 'Test1',
-    },
-    {
-      label: 'Test2',
-      value: 'test2',
-      desc: 'Test2',
-    },
-    {
-      label: 'Test3',
-      value: 'test3',
-      desc: 'Test3',
-    },
-    {
-      label: 'Test4',
-      value: 'test4',
-      desc: 'Test4',
-    },
-  ];
-  return (
-    <div className="App">
-      <NSHeader scope='test' name='test' />
-      <div className='my-4'>
-        <NSInputText title='Text' />
-        <NSInputInteger title='Integer' />
-        <NSInputFloat title='Floating Point' />
-        <NSInputPrice title='Price' />
-        <NSInputDate title='Date' />
-        <NSInputTime title='Time' />
-        <NSInputDuration title='Duration' />
-        <NSInputString title='String' />
-        <NSInputIP title='IP' />
-        <NSInputEmail title='Email' />
-        <NSInputSearch title='Search' />
-        <NSInputPhone title='Phone' />
-        <NSSelectBox title="t" options={options} />
-        <NSButtonGreen title='Save' onClick={() => { }} />
-        <NSButtonRed title='Delete' onClick={() => { }} />
-      </div>
-      <NSFooter scope='test' name='test' />
-    </div>
-  );
+function App() {
+    const options: SelectProps['options'] = [
+        {
+            label: 'Test1',
+            value: 'test1',
+            desc: 'Test1',
+        },
+        {
+            label: 'Test2',
+            value: 'test2',
+            desc: 'Test2',
+        },
+        {
+            label: 'Test3',
+            value: 'test3',
+            desc: 'Test3',
+        },
+        {
+            label: 'Test4',
+            value: 'test4',
+            desc: 'Test4',
+        },
+    ];
+    return (
+        <div className="App">
+            <NSHeader scope='test' name='test' />
+            <div className='my-4'>
+                <NSInputText title='Text' />
+                <NSInputInteger title='Integer' />
+                <NSInputFloat title='Floating Point' />
+                <NSInputPrice title='Price' />
+                <NSInputDate title='Date' />
+                <NSInputTime title='Time' />
+                <NSInputDuration title='Duration' />
+                <NSInputString title='String' />
+                <NSInputIP title='IP' />
+                <NSInputEmail title='Email' />
+                <NSInputSearch title='Search' />
+                <NSInputPhone title='Phone' />
+                <NSSelectBox title="t" options={options} />
+                <NSButtonGreen title='Save' onClick={() => { }} />
+                <NSButtonRed title='Delete' onClick={() => { }} />
+            </div>
+            <NSFooter scope='test' name='test' />
+        </div>
+    );
 }
 
 export default App;

package/src/components/NSButtonGreen.tsx

@@ -1,18 +1,15 @@
 import React from "react";
 import Style from "./NSButtonGreen.module.css";
 
-interface IProps
-{
+interface IProps {
     title: string;
     onClick: () => void;
 }
-
 interface IState { }
 
-export default class NSButtonGreen extends React.Component<IProps, IState>
+export class NSButtonGreen extends React.Component<IProps, IState>
 {
-    override  render()
-    {
+    override render() {
         return <button onClick={this.props.onClick} className={Style.ns_button_green}>{this.props.title}</button>;
     }
 }

package/src/components/NSButtonRed.tsx

@@ -1,18 +1,15 @@
 import React from "react";
 import Style from "./NSButtonRed.module.css";
 
-interface IProps
-{
+interface IProps {
     title: string;
     onClick: () => void;
 }
-
 interface IState { }
 
-export default class NSButtonRed extends React.Component<IProps, IState>
+export class NSButtonRed extends React.Component<IProps, IState>
 {
-    override  render()
-    {
+    override render() {
         return <button onClick={this.props.onClick} className={Style.ns_button_red}>{this.props.title}</button>;
     }
 }

package/src/components/NSHeader.tsx

@@ -6,22 +6,19 @@ import Exit from '../assets/images/exit.svg';
 import NavDropdown from 'react-bootstrap/NavDropdown';
 import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
 
-interface IProps
-{
+interface IProps {
     scope: string;
     name: string;
 }
 
-interface IState
-{
+interface IState {
     filters: FilterLinkRow[];
     selected: FilterLinkRow | null;
     showNavbar: boolean;
 }
 
 export default class NSHeader extends React.Component<IProps, IState> {
-    constructor(props: IProps)
-    {
+    constructor(props: IProps) {
         super(props);
         this.state = {
             filters: [],
@@ -34,29 +31,23 @@ export default class NSHeader extends React.Component<IProps, IState> {
         this.render_menuItem = this.render_menuItem.bind(this);
         this.handleShowNavbar = this.handleShowNavbar.bind(this);
     }
-    override componentDidMount(): void
-    {
+    override componentDidMount(): void {
         let server = new NamirasoftAPILinkServer(console.error);
-        server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
-        {
+        server.filter.GetFilters(this.props.scope, this.props.name).then(filters => {
             this.setState({ filters });
         });
     }
-    private onMenuItemToggled(checked: boolean, selected: FilterLinkRow)
-    {
+    private onMenuItemToggled(checked: boolean, selected: FilterLinkRow) {
         if (checked)
             this.setState({ selected });
     }
-    private hasChild(id: number): boolean
-    {
+    private hasChild(id: number): boolean {
         return this.state.filters.filter(f => f.parent_id === id).length > 0;
     }
-    handleShowNavbar(): void
-    {
+    handleShowNavbar(): void {
         this.setState({ showNavbar: !this.state.showNavbar });
     }
-    override render()
-    {
+    override render() {
         return (
             <nav className={Styles.ns_navbar}>
                 <div className={`${Styles.ns_navbar_parent_content} container`}>
@@ -91,8 +82,7 @@ export default class NSHeader extends React.Component<IProps, IState> {
             </nav>
         );
     }
-    private render_menu(level: number, parent_id: number | null)
-    {
+    private render_menu(level: number, parent_id: number | null) {
         let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
         return (
             <Nav className="me-auto" >
@@ -100,14 +90,11 @@ export default class NSHeader extends React.Component<IProps, IState> {
             </Nav>
         );
     }
-    private render_menuItem(level: number, filter: FilterLinkRow)
-    {
-        if (this.hasChild(filter.id))
-        {
+    private render_menuItem(level: number, filter: FilterLinkRow) {
+        if (this.hasChild(filter.id)) {
             let sub_menus = <></>;
             if (level === 0)
-                if (this.state.selected)
-                {
+                if (this.state.selected) {
                     sub_menus =
                         <div
                             id={`dropdown_items${filter.id}`}>
@@ -124,8 +111,7 @@ export default class NSHeader extends React.Component<IProps, IState> {
                 </NavDropdown >
             </>
             );
-        } else
-        {
+        } else {
             return (
                 <Nav.Link className={level === 0 ? Styles.ns_navbar_first_level_item : Styles.ns_navbar_second_level_item} href={filter.link?.url}>{filter.name}li</Nav.Link>
             );

package/src/main.ts

@@ -0,0 +1,17 @@
+export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonRed";
+export * from "./components/NSFooter";
+export * from "./components/NSHeader";
+export * from "./components/NSInputDate";
+export * from "./components/NSInputDuration";
+export * from "./components/NSInputEmail";
+export * from "./components/NSInputFloat";
+export * from "./components/NSInputIP";
+export * from "./components/NSInputInteger";
+export * from "./components/NSInputPhone";
+export * from "./components/NSInputPrice";
+export * from "./components/NSInputSearch";
+export * from "./components/NSInputString";
+export * from "./components/NSInputText";
+export * from "./components/NSInputTime";
+export * from "./components/NSSelectBox";