namirasoft-site-react 1.3.47 → 1.3.48

package/dist/Validator.d.ts

@@ -0,0 +1,9 @@
+import { ValidationNumberProps } from "./props/ValidationNumberProps";
+import { ValidationProps } from "./props/ValidationProps";
+import { ValidationStringProps } from "./props/ValidationStringProps";
+export declare class Validator {
+    static getError(name: string, value: string | null | undefined, validator: ValidationProps): string | null;
+    static getErrorString(name: string, value: string | null | undefined, validator: ValidationStringProps): string | null;
+    static getErrorNumber(name: string, value: string | null | undefined, validator: ValidationNumberProps): string | null;
+    static getErrorEmail(name: string, value: string | null | undefined): string | null;
+}

package/dist/Validator.js

@@ -0,0 +1,52 @@
+export class Validator {
+    static getError(name, value, validator) {
+        if (validator.required)
+            if (!value)
+                return `${name} is required.`;
+        if (value)
+            if (validator.regex)
+                if (!validator.regex.regex.test(value))
+                    return `${name} is not a valid ${validator.regex.name}.`;
+        return null;
+    }
+    static getErrorString(name, value, validator) {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value) {
+            if (validator.max_length != null)
+                if (validator.max_length < value.length)
+                    return `Max length of ${name} should be ${validator.max_length} characters.`;
+            if (validator.min_length != null)
+                if (validator.min_length > value.length)
+                    return `Minlength of ${name} should be ${validator.min_length} characters.`;
+        }
+        return null;
+    }
+    static getErrorNumber(name, value, validator) {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value) {
+            let numValue = parseFloat(value);
+            if (isNaN(numValue))
+                return `${name} is not a number.`;
+            if (validator.max != null)
+                if (validator.max < numValue)
+                    return `Max value of ${name} should be ${validator.max} characters.`;
+            if (validator.min != null)
+                if (validator.min > numValue)
+                    return `Min value of ${name} should be ${validator.min} characters.`;
+        }
+        return null;
+    }
+    static getErrorEmail(name, value) {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Email",
+                regex: /^[\w]+@([\w]+\.)+\w{2,}$/gm
+            }
+        });
+    }
+}
+//# sourceMappingURL=Validator.js.map

package/dist/Validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Validator.js","sourceRoot":"","sources":["../src/Validator.ts"],"names":[],"mappings":"AAIA,MAAM,OAAO,SAAS;IAElB,MAAM,CAAC,QAAQ,CAAC,IAAY,EAAE,KAAgC,EAAE,SAA0B;QAEtF,IAAI,SAAS,CAAC,QAAQ;YAClB,IAAI,CAAC,KAAK;gBACN,OAAO,GAAG,IAAI,eAAe,CAAC;QACtC,IAAI,KAAK;YACL,IAAI,SAAS,CAAC,KAAK;gBACf,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;oBAClC,OAAO,GAAG,IAAI,mBAAmB,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC;QACrE,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,CAAC,cAAc,CAAC,IAAY,EAAE,KAAgC,EAAE,SAAgC;QAElG,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;QAClD,IAAI,KAAK;YACL,OAAO,KAAK,CAAC;QACjB,IAAI,KAAK,EACT,CAAC;YACG,IAAI,SAAS,CAAC,UAAU,IAAI,IAAI;gBAC5B,IAAI,SAAS,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;oBACnC,OAAO,iBAAiB,IAAI,cAAc,SAAS,CAAC,UAAU,cAAc,CAAC;YACrF,IAAI,SAAS,CAAC,UAAU,IAAI,IAAI;gBAC5B,IAAI,SAAS,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM;oBACnC,OAAO,gBAAgB,IAAI,cAAc,SAAS,CAAC,UAAU,cAAc,CAAC;QACxF,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,CAAC,cAAc,CAAC,IAAY,EAAE,KAAgC,EAAE,SAAgC;QAElG,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;QAClD,IAAI,KAAK;YACL,OAAO,KAAK,CAAC;QACjB,IAAI,KAAK,EACT,CAAC;YACG,IAAI,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,KAAK,CAAC,QAAQ,CAAC;gBACf,OAAO,GAAG,IAAI,mBAAmB,CAAC;YACtC,IAAI,SAAS,CAAC,GAAG,IAAI,IAAI;gBACrB,IAAI,SAAS,CAAC,GAAG,GAAG,QAAQ;oBACxB,OAAO,gBAAgB,IAAI,cAAc,SAAS,CAAC,GAAG,cAAc,CAAC;YAC7E,IAAI,SAAS,CAAC,GAAG,IAAI,IAAI;gBACrB,IAAI,SAAS,CAAC,GAAG,GAAG,QAAQ;oBACxB,OAAO,gBAAgB,IAAI,cAAc,SAAS,CAAC,GAAG,cAAc,CAAC;QACjF,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,CAAC,aAAa,CAAC,IAAY,EAAE,KAAgC;QAE/D,OAAO,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE;YACnC,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE;gBACnB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,4BAA4B;aACtC;SACJ,CAAC,CAAA;IACN,CAAC;CACJ"}

package/dist/components/NSInputEmail.d.ts

@@ -1,15 +1,19 @@
 import React from "react";
-export interface NSInputEmailProps {
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
+export interface NSInputEmailProps extends ValidationProps, ValidationStringProps {
     title: string;
     defaultValue?: string;
+    placeholder?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface NSInputEmailState {
     value: string;
-    error: boolean;
+    error?: string;
 }
 export declare class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmailState> {
     constructor(props: NSInputEmailProps);
+    getError(): string | null;
     getValue(): string;
     setValue(value: string): void;
     private onChanged;

package/dist/components/NSInputEmail.js

@@ -4,30 +4,29 @@ import React from "react";
 import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
 import Danger from '../assets/images/danger.svg';
+import { Validator } from "../Validator";
 export class NSInputEmail extends React.Component {
     constructor(props) {
         var _a;
         super(props);
-        this.state = {
-            value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "",
-            error: false,
-        };
+        this.state = { value: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : "" };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError() {
+        return Validator.getErrorString(this.props.title, this.state.value, this.props) && Validator.getErrorEmail(this.props.title, this.state.value);
+    }
     getValue() {
+        let error = this.getError();
+        if (error) {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value) {
-        let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        debugger;
-        if (!email.test(value)) {
-            this.setState({ error: true, value });
-        }
-        else {
-            this.setState({ error: false, value });
-        }
+        this.setState({ value });
     }
     onChanged(e) {
         this.setValue(e.target.value);
@@ -35,7 +34,7 @@ export class NSInputEmail extends React.Component {
             this.props.onChanged(e);
     }
     render() {
-        return (_jsxs(_Fragment, { children: [_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: IconInputEmail, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "email", className: `${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`, placeholder: "Sample@gmail.com" })] }), this.state.error === true ? (_jsx(_Fragment, { children: _jsxs("div", { className: "d-flex justify-content-start align-items-center gap-2 ms-2 ", children: [_jsx("img", { className: "", src: Danger, alt: "icon", width: 13, height: 13 }), _jsx("span", { className: Styles.ns_input_error, children: "Enter a valid email." })] }) })) : null] }));
+        return (_jsxs(_Fragment, { children: [_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: IconInputEmail, alt: "Email Icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "email", className: `${this.state.error ? Styles.ns_input_red : ""} ${Styles.ns_input}`, placeholder: this.props.placeholder })] }), this.state.error && (_jsx(_Fragment, { children: _jsxs("div", { className: "d-flex justify-content-start align-items-center gap-2 ms-2", children: [_jsx("img", { className: "", src: Danger, alt: "Error Icon", width: 13, height: 13 }), _jsx("span", { className: Styles.ns_input_error, children: this.state.error })] }) }))] }));
     }
 }
 //# sourceMappingURL=NSInputEmail.js.map

package/dist/components/NSInputEmail.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSInputEmail.js","sourceRoot":"","sources":["../../src/components/NSInputEmail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AAejD,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IACnF,YAAY,KAAwB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG;YAClB,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE;YACtB,KAAK,EAAE,KAAK;SACf,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;QAC/C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5C,CAAC;IACE,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/B,CAAC;IACE,QAAQ,CAAC,KAAa;QAExB,IAAI,KAAK,GAAG,mJAAmJ,CAAC;QAChK,QAAQ,CAAA;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EACtB,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAC1C,CAAC;aAED,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QAC3C,CAAC;IACR,CAAC;IACU,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;IACQ,MAAM;QAEX,OAAO,CACH,8BACI,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,cAAc,EACnB,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,SAAS,EACxB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE,EACvF,WAAW,EAAC,kBAAkB,GAChC,IACA,EAEF,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,CACxB,4BACI,eAAK,SAAS,EAAC,6DAA6D,aACxE,cACI,SAAS,EAAE,EAAE,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,qCAA6B,IACjE,GACP,CAAC,CAAC,CAAC,CAAC,IAAI,IAEpB,CACN,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSInputEmail.js","sourceRoot":"","sources":["../../src/components/NSInputEmail.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBzC,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IAEnF,YAAY,KAAwB;;QAEhC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,EAAE,EAAE,CAAC;QACjD,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;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACnJ,CAAC;IACD,QAAQ;QAEJ,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,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;IACQ,MAAM;QAEX,OAAO,CACH,8BACI,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,cAAc,EACnB,GAAG,EAAC,YAAY,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,gBACI,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,EAAE,EAC9E,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,GACrC,IACA,EAGF,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,CAChB,4BACI,eAAK,SAAS,EAAC,4DAA4D,aACvE,cACI,SAAS,EAAE,EAAE,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAC,YAAY,EAChB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACZ,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,cAAc,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAQ,IAC/D,GACP,CAAC,IAEb,CACN,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSInputFloat.d.ts

@@ -1,14 +1,19 @@
 import React from "react";
-export interface NSInputFloatProps {
+import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+export interface NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps {
     title: string;
     defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export interface NSInputFloatState {
     value: string;
+    error?: string;
 }
 export declare class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloatState> {
     constructor(props: NSInputFloatProps);
+    getError(): string | null;
     getValue(): string;
     setValue(value: string): void;
     private onChanged;

package/dist/components/NSInputFloat.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Styles from "./NSInputFloat.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';
+import { Validator } from "../Validator";
 export class NSInputFloat extends React.Component {
     constructor(props) {
         var _a;
@@ -14,7 +15,15 @@ export class NSInputFloat extends React.Component {
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError() {
+        return Validator.getErrorNumber(this.props.title, this.state.value, this.props);
+    }
     getValue() {
+        let error = this.getError();
+        if (error) {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
     }
     setValue(value) {
@@ -26,7 +35,8 @@ export class NSInputFloat extends React.Component {
             this.props.onChanged(e);
     }
     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: IconInputFloat, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "number", className: Styles.ns_input, placeholder: "1.2" })] }));
+        var _a;
+        return (_jsxs("div", { className: `${Styles.ns_input_parent} p-2 ${(_a = this.props.classList) === null || _a === void 0 ? void 0 : _a.join(" ")}`, style: this.props.style, children: [_jsxs("span", { className: Styles.ns_input_title, children: [this.props.required && _jsx("span", { children: "*" }), this.props.title] }), _jsx("img", { className: Styles.ns_input_icon, src: IconInputFloat, alt: "icon", width: 24, height: 24 }), _jsx("input", { value: this.state.value, onChange: this.onChanged, type: "number", className: Styles.ns_input, placeholder: "1.2" })] }));
     }
 }
 //# sourceMappingURL=NSInputFloat.js.map

package/dist/components/NSInputFloat.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSInputFloat.js","sourceRoot":"","sources":["../../src/components/NSInputFloat.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAcnE,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IACnF,YAAY,KAAwB;;QAEhC,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;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IAC/B,CAAC;IACE,QAAQ,CAAC,KAAa;QAElB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAChC,CAAC;IAEU,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;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,cAAc,EACnB,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,SAAS,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,KAAK,GACnB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSInputFloat.js","sourceRoot":"","sources":["../../src/components/NSInputFloat.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAInE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAezC,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAA+C;IAEnF,YAAY,KAAwB;;QAEhC,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;IAC/C,CAAC;IACD,QAAQ;QAEJ,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACpF,CAAC;IACD,QAAQ;QAEJ,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC5B,IAAI,KAAK,EACT,CAAC;YACG,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;YACzB,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,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;IACQ,MAAM;;QAEX,OAAO,CACH,eAAK,SAAS,EAAE,GAAG,MAAM,CAAC,eAAe,QAAQ,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,0CAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aACvG,gBAAM,SAAS,EAAE,MAAM,CAAC,cAAc,aAE9B,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,+BAAc,EAExC,IAAI,CAAC,KAAK,CAAC,KAAK,IACd,EACP,cACI,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,GAAG,EAAE,cAAc,EACnB,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,SAAS,EACxB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,QAAQ,EAC1B,WAAW,EAAC,KAAK,GACnB,IACA,CACT,CAAC;IACN,CAAC;CACJ"}

package/dist/components/NSSpace.d.ts

@@ -15,11 +15,7 @@ export declare enum NSSpaceSizeType {
     XXXLARGE = "128px"
 }
 export interface NSSpaceState {
-    size: NSSpaceSizeType;
 }
 export declare class NSSpace extends React.Component<NSSpaceProps, NSSpaceState> {
-    constructor(props: NSSpaceProps);
-    setValue(size: NSSpaceSizeType): void;
-    getValue(): NSSpaceSizeType;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/components/NSSpace.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 export var NSSpaceSizeType;
@@ -15,20 +14,8 @@ export var NSSpaceSizeType;
     NSSpaceSizeType["XXXLARGE"] = "128px";
 })(NSSpaceSizeType || (NSSpaceSizeType = {}));
 export class NSSpace extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { size: props.size };
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-    }
-    setValue(size) {
-        this.setState({ size });
-    }
-    getValue() {
-        return this.state.size;
-    }
     render() {
-        return (_jsx("hr", { style: { width: "100%", height: this.state.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 } }));
+        return (_jsx("hr", { style: { width: "100%", height: this.props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 } }));
     }
 }
 //# sourceMappingURL=NSSpace.js.map

package/dist/components/NSSpace.js.map

@@ -1 +1 @@
-{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAOD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IAEpE,YAAY,KAAmB;QAE3B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC;QAClC,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;IAC7C,CAAC;IACD,QAAQ,CAAC,IAAqB;QAE1B,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5B,CAAC;IACD,QAAQ;QAEJ,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;IAC3B,CAAC;IACQ,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,EAAE,GAAI,CACvJ,CAAC;IACN,CAAC;CACJ"}
+{"version":3,"file":"NSSpace.js","sourceRoot":"","sources":["../../src/components/NSSpace.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,CAAN,IAAY,eAYX;AAZD,WAAY,eAAe;IAEvB,+BAAY,CAAA;IACZ,gCAAa,CAAA;IACb,gCAAa,CAAA;IACb,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,kCAAe,CAAA;IACf,iCAAc,CAAA;IACd,kCAAe,CAAA;IACf,mCAAgB,CAAA;IAChB,qCAAkB,CAAA;AACtB,CAAC,EAZW,eAAe,KAAf,eAAe,QAY1B;AAMD,MAAM,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAqC;IAE3D,MAAM;QAEX,OAAO,CACH,aAAI,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,EAAE,GAAI,CACvJ,CAAC;IACN,CAAC;CACJ"}

package/dist/props/BaseComponentProps.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface BaseComponentProps {
+    classList?: string[];
+    style?: React.CSSProperties;
+}

package/dist/props/BaseComponentProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BaseComponentProps.js.map

package/dist/props/BaseComponentProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseComponentProps.js","sourceRoot":"","sources":["../../src/props/BaseComponentProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationNumberProps.d.ts

@@ -0,0 +1,5 @@
+import { ValidationProps } from "./ValidationProps";
+export interface ValidationNumberProps extends ValidationProps {
+    min?: number;
+    max?: number;
+}

package/dist/props/ValidationNumberProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationNumberProps.js.map

package/dist/props/ValidationNumberProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationNumberProps.js","sourceRoot":"","sources":["../../src/props/ValidationNumberProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationProps.d.ts

@@ -0,0 +1,5 @@
+import { ValidationRegexProps } from "./ValidationRegexProps";
+export interface ValidationProps {
+    required: boolean;
+    regex?: ValidationRegexProps;
+}

package/dist/props/ValidationProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationProps.js.map

package/dist/props/ValidationProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationProps.js","sourceRoot":"","sources":["../../src/props/ValidationProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationRegexProps.d.ts

@@ -0,0 +1,4 @@
+export interface ValidationRegexProps {
+    name: string;
+    regex: RegExp;
+}

package/dist/props/ValidationRegexProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationRegexProps.js.map

package/dist/props/ValidationRegexProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationRegexProps.js","sourceRoot":"","sources":["../../src/props/ValidationRegexProps.ts"],"names":[],"mappings":""}

package/dist/props/ValidationStringProps.d.ts

@@ -0,0 +1,5 @@
+import { ValidationProps } from "./ValidationProps";
+export interface ValidationStringProps extends ValidationProps {
+    min_length?: number;
+    max_length?: number;
+}

package/dist/props/ValidationStringProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ValidationStringProps.js.map

package/dist/props/ValidationStringProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationStringProps.js","sourceRoot":"","sources":["../../src/props/ValidationStringProps.ts"],"names":[],"mappings":""}

package/package.json

@@ -8,7 +8,7 @@
     "framework": "npm",
     "application": "package",
     "private": false,
-    "version": "1.3.47",
+    "version": "1.3.48",
     "author": "Amir Abolhasani, Alireza Esmaeeli, Hooman Shashaeh",
     "license": "MIT",
     "main": "./dist/main.js",
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@types/node": "^20.12.7",
-        "@types/react": "^18.2.78",
+        "@types/react": "^18.2.79",
         "@types/react-dom": "^18.2.25",
         "antd": "^5.16.2",
         "bootstrap": "^5.3.3",

package/src/App.tsx

@@ -47,7 +47,7 @@ export function App()
 				account={false}
 				background={{ color: "transparent !important" }}
 			/>
-			
+
 			<div className="container">
 				<NSTable<Row> columns={columns} rows={rows} getRowKey={row => row.id.toString()} />
 			</div>

package/src/Validator.ts

@@ -0,0 +1,62 @@
+import { ValidationNumberProps } from "./props/ValidationNumberProps";
+import { ValidationProps } from "./props/ValidationProps";
+import { ValidationStringProps } from "./props/ValidationStringProps";
+
+export class Validator
+{
+    static getError(name: string, value: string | null | undefined, validator: ValidationProps): string | null
+    {
+        if (validator.required)
+            if (!value)
+                return `${name} is required.`;
+        if (value)
+            if (validator.regex)
+                if (!validator.regex.regex.test(value))
+                    return `${name} is not a valid ${validator.regex.name}.`;
+        return null;
+    }
+    static getErrorString(name: string, value: string | null | undefined, validator: ValidationStringProps): string | null
+    {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value)
+        {
+            if (validator.max_length != null)
+                if (validator.max_length < value.length)
+                    return `Max length of ${name} should be ${validator.max_length} characters.`;
+            if (validator.min_length != null)
+                if (validator.min_length > value.length)
+                    return `Minlength of ${name} should be ${validator.min_length} characters.`;
+        }
+        return null;
+    }
+    static getErrorNumber(name: string, value: string | null | undefined, validator: ValidationNumberProps): string | null
+    {
+        let error = this.getError(name, value, validator);
+        if (error)
+            return error;
+        if (value)
+        {
+            let numValue = parseFloat(value);
+            if (isNaN(numValue))
+                return `${name} is not a number.`;
+            if (validator.max != null)
+                if (validator.max < numValue)
+                    return `Max value of ${name} should be ${validator.max} characters.`;
+            if (validator.min != null)
+                if (validator.min > numValue)
+                    return `Min value of ${name} should be ${validator.min} characters.`;
+        }
+        return null;
+    }
+    static getErrorEmail(name: string, value: string | null | undefined): string | null
+    {
+        return Validator.getError(name, value, {
+            required: true, regex: {
+                name: "Email",
+                regex: /^[\w]+@([\w]+\.)+\w{2,}$/gm
+            }
+        })
+    }
+}

package/src/components/NSInputEmail.tsx

@@ -4,49 +4,52 @@ import React from "react";
 import Styles from "./NSInputEmail.module.css";
 import IconInputEmail from '../assets/images/icon-input-email.svg';
 import Danger from '../assets/images/danger.svg';
+import { Validator } from "../Validator";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationStringProps } from "../props/ValidationStringProps";
 
-export interface NSInputEmailProps
+export interface NSInputEmailProps extends ValidationProps, ValidationStringProps
 {
     title: string;
-	defaultValue?: string;
+    defaultValue?: string;
+    placeholder?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputEmailState
 {
     value: string;
-    error: boolean;
+    error?: string;
 }
 
-export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmailState> {
+export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmailState>
+{
     constructor(props: NSInputEmailProps)
     {
         super(props);
-        this.state = {
-			value: props.defaultValue ?? "",
-            error: false,
-        };
+        this.state = { value: props.defaultValue ?? "" };
         this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-		this.onChanged = this.onChanged.bind(this);
-	}
+        this.onChanged = this.onChanged.bind(this);
+    }
+    getError(): string | null
+    {
+        return Validator.getErrorString(this.props.title, this.state.value, this.props) && Validator.getErrorEmail(this.props.title, this.state.value);
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
-	}
+    }
     setValue(value: string): void
     {
-		let email = /^(([^<>()[]\\.,;:\s@"]+(\.[^<>()[]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-		debugger
-        if (!email.test(value))
-        {
-            this.setState({ error: true, value });
-        }
-        else
-        {
-            this.setState({ error: false, value });
-        }
-	}
+        this.setState({ value });
+    }
     private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
         this.setValue(e.target.value);
@@ -62,7 +65,7 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                     <img
                         className={Styles.ns_input_icon}
                         src={IconInputEmail}
-                        alt="icon"
+                        alt="Email Icon"
                         width={24}
                         height={24}
                     />
@@ -70,24 +73,25 @@ export class NSInputEmail extends React.Component<NSInputEmailProps, NSInputEmai
                         value={this.state.value}
                         onChange={this.onChanged}
                         type="email"
-                        className={`${this.state.error === true ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
-                        placeholder="Sample@gmail.com"
+                        className={`${this.state.error ? Styles.ns_input_red : ""} ${Styles.ns_input}`}
+                        placeholder={this.props.placeholder}
                     />
                 </div>
                 {
-                    this.state.error === true ? (
+                    // todo make it a component
+                    this.state.error && (
                         <>
-                            <div className="d-flex justify-content-start align-items-center gap-2 ms-2 ">
+                            <div className="d-flex justify-content-start align-items-center gap-2 ms-2">
                                 <img
                                     className={""}
                                     src={Danger}
-                                    alt="icon"
+                                    alt="Error Icon"
                                     width={13}
                                     height={13}
                                 />
-                                <span className={Styles.ns_input_error}>Enter a valid email.</span>
+                                <span className={Styles.ns_input_error}>{this.state.error}</span>
                             </div>
-                        </>) : null
+                        </>)
                 }
             </>
         );

package/src/components/NSInputFloat.tsx

@@ -3,20 +3,26 @@
 import React from "react";
 import Styles from "./NSInputFloat.module.css";
 import IconInputFloat from '../assets/images/icon-input-float.svg';
+import { BaseComponentProps } from "../props/BaseComponentProps";
+import { ValidationProps } from "../props/ValidationProps";
+import { ValidationNumberProps } from "../props/ValidationNumberProps";
+import { Validator } from "../Validator";
 
-export interface NSInputFloatProps
+export interface NSInputFloatProps extends BaseComponentProps, ValidationProps, ValidationNumberProps
 {
-	title: string;
-	defaultValue?: string;
+    title: string;
+    defaultValue?: string;
     onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputFloatState
 {
     value: string;
+    error?: string;
 }
 
-export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloatState> {
+export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloatState>
+{
     constructor(props: NSInputFloatProps)
     {
         super(props);
@@ -27,15 +33,24 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
         this.getValue = this.getValue.bind(this);
         this.onChanged = this.onChanged.bind(this);
     }
+    getError(): string | null
+    {
+        return Validator.getErrorNumber(this.props.title, this.state.value, this.props);
+    }
     getValue(): string
     {
+        let error = this.getError();
+        if (error)
+        {
+            this.setState({ error });
+            throw new Error(error);
+        }
         return this.state.value;
-	}
+    }
     setValue(value: string): void
     {
         this.setState({ value });
-	}
-	
+    }
     private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
         this.setValue(e.target.value);
@@ -45,8 +60,13 @@ export class NSInputFloat extends React.Component<NSInputFloatProps, NSInputFloa
     override render()
     {
         return (
-            <div className={`${Styles.ns_input_parent} p-2`}>
-                <span className={Styles.ns_input_title}>{this.props.title}</span>
+            <div className={`${Styles.ns_input_parent} p-2 ${this.props.classList?.join(" ")}`} style={this.props.style}>
+                <span className={Styles.ns_input_title}>
+                    {
+                        this.props.required && <span>*</span>
+                    }
+                    {this.props.title}
+                </span>
                 <img
                     className={Styles.ns_input_icon}
                     src={IconInputFloat}

package/src/components/NSSpace.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 export interface NSSpaceProps
@@ -23,30 +21,14 @@ export enum NSSpaceSizeType
 
 export interface NSSpaceState
 {
-    size: NSSpaceSizeType;
 }
 
 export class NSSpace extends React.Component<NSSpaceProps, NSSpaceState>
 {
-    constructor(props: NSSpaceProps)
-    {
-        super(props);
-        this.state = { size: props.size };
-        this.setValue = this.setValue.bind(this);
-        this.getValue = this.getValue.bind(this);
-    }
-    setValue(size: NSSpaceSizeType): void
-    {
-        this.setState({ size });
-    }
-    getValue(): NSSpaceSizeType
-    {
-        return this.state.size;
-    }
     override render()
     {
         return (
-            <hr style={{ width: "100%", height: this.state.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
+            <hr style={{ width: "100%", height: this.props.size, margin: "0px", padding: "0px", background: "transparent", color: "transparent", border: 0 }} />
         );
     }
 }

package/src/props/BaseComponentProps.ts

@@ -0,0 +1,7 @@
+import React from "react";
+
+export interface BaseComponentProps
+{
+    classList?: string[]
+    style?: React.CSSProperties
+}

package/src/props/ValidationNumberProps.ts

@@ -0,0 +1,7 @@
+import { ValidationProps } from "./ValidationProps";
+
+export interface ValidationNumberProps extends ValidationProps
+{
+    min?: number;
+    max?: number;
+}

package/src/props/ValidationProps.ts

@@ -0,0 +1,7 @@
+import { ValidationRegexProps } from "./ValidationRegexProps";
+
+export interface ValidationProps
+{
+    required: boolean;
+    regex?: ValidationRegexProps;
+}

package/src/props/ValidationRegexProps.ts

@@ -0,0 +1,5 @@
+export interface ValidationRegexProps
+{
+    name: string
+    regex: RegExp;
+}

package/src/props/ValidationStringProps.ts

@@ -0,0 +1,7 @@
+import { ValidationProps } from "./ValidationProps";
+
+export interface ValidationStringProps extends ValidationProps
+{
+    min_length?: number;
+    max_length?: number;
+}