namirasoft-site-react 1.2.0

package/src/components/NSInputString.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Styles from "./NSInputString.module.css";
+import IconInputString from '../assets/images/icon-input-string.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputString extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        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: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    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={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="text"
+                    className={Styles.ns_input}
+                    placeholder="12AB34cf"
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/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/src/components/NSInputText.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Styles from "./NSInputText.module.css";
+import IconInputText from '../assets/images/icon-input-text.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputText extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        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: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    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={IconInputText}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="text"
+                    className={Styles.ns_input}
+                    placeholder="Enter your Text"
+                />
+
+            </div>
+        );
+    }
+}
+
+

package/src/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/src/components/NSInputTime.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import Styles from "./NSInputTime.module.css";
+import IconInputTime from '../assets/images/icon-input-time.svg';
+
+interface IProps
+{
+    title: string;
+}
+
+interface IState
+{
+    value: string;
+}
+
+export default class NSInputTime extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        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: React.ChangeEvent<HTMLInputElement>): void
+    {
+        this.setState({ value: e.target.value });
+    }
+    setDefaultValue(value: string): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string
+    {
+        return this.state.value;
+    }
+    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={IconInputTime}
+                    alt="icon"
+                    width={24}
+                    height={24}
+                />
+                <input
+                    value={this.state.value}
+                    onChange={this.setValue}
+                    type="time"
+                    className={Styles.ns_input}
+                    placeholder="21:44:06"
+                    step="2"
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/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/src/components/NSSelectBox.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import Styles from "./NSSelectBox.module.css";
+import { Select, Space } from 'antd';
+import type { SelectProps } from 'antd';
+import {CaretDownOutlined } from '@ant-design/icons'
+
+interface IProps
+{
+    title: string;
+    options: SelectProps['options'];
+}
+
+interface IState
+{
+    value: string[];
+}
+
+export default class NSSelectBox extends React.Component<IProps, IState> {
+    constructor(props: IProps)
+    {
+        super(props);
+        this.state = {
+            value: [],
+        };
+        this.setValue = this.setValue.bind(this);
+    }
+    setValue(value: string[]): void
+    {
+        this.setState({ value });
+    }
+    getValue(): string[]
+    {
+        return this.state.value;
+    }
+    override render()
+    {
+
+        return (
+            <div className={`${Styles.ns_input_parent} p-2`}>
+                <Select
+                    suffixIcon={<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) => (
+                        <Space className={Styles.ns_input_select_option}>
+                            {option.data.desc}
+                        </Space>
+                    )}
+                />
+            </div>
+        );
+    }
+}
+
+

package/src/index.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #ccc !important;
+  background-image: url(./assets/images/background.svg);
+}

package/src/index.tsx

@@ -0,0 +1,8 @@
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(<App />);

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES6",
+    "module": "esnext",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": false,
+    "checkJs": false,
+    "strict": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitAny": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "isolatedModules": true,
+    "removeComments": true,
+    "noEmit": true,
+    "moduleResolution": "node",
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}