module-package-comp 1.1.0 → 1.2.1

package/dist/component/ComponentDisplayer.d.ts

@@ -1,9 +1,9 @@
 import { Component, DataJSON } from "../util/type";
 type ComponentDisplayerProps = {
-    components: Component[];
+    component: Component;
     data: DataJSON;
     setData: (data: DataJSON) => void;
     onSubmit: () => void;
 };
-export declare function ComponentDisplayer({ components, data, setData, onSubmit, }: ComponentDisplayerProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComponentDisplayer({ component, data, setData, onSubmit, }: ComponentDisplayerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/component/ComponentDisplayer.js

@@ -2,10 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { ShowAttr } from "./ShowAttr";
 import PrimaryBtn from "./PrimaryBtn";
-export function ComponentDisplayer({ components, data, setData, onSubmit, }) {
-    const [page, setPage] = useState(0);
-    return (_jsxs("form", { onSubmit: onSubmit, className: "min-w-72", children: [_jsx("h1", { className: "font-bold text-center text-blue-800 text-4xl mb-8", children: components[page].label }), _jsx("div", { className: "space-y-3", children: components[page].attributes.map((attr) => {
-                    if (canShow(attr, data, components[page].conditions || [])) {
+import ShowErrors from "./ShowErrors";
+export function ComponentDisplayer({ component, data, setData, onSubmit, }) {
+    const [errors, setErrors] = useState([]);
+    return (_jsxs("form", { onSubmit: (e) => {
+            e.preventDefault();
+            const errs = checkRequired(component.attributes, data);
+            if (errs.length === 0) {
+                onSubmit();
+            }
+            else {
+                setErrors(errs);
+            }
+        }, className: "min-w-72", children: [_jsx("h1", { className: "font-bold text-center text-blue-800 text-4xl mb-8", children: component.label }), _jsx("div", { className: "space-y-3", children: component.attributes.map((attr) => {
+                    if (canShow(attr, data, component.conditions || [])) {
                         return (_jsx(ShowAttr, { attribute: attr, value: data[attr.name] ? String(data[attr.name]) : "", setValue: (s) => {
                                 const temp = Object.assign({}, data);
                                 temp[attr.name] = s;
@@ -19,7 +29,18 @@ export function ComponentDisplayer({ components, data, setData, onSubmit, }) {
                             setData(temp);
                         }
                     }
-                }) }), _jsx("div", { className: "flex justify-center my-8", children: _jsx(PrimaryBtn, { clickFn: onSubmit, text: "Submit" }) })] }));
+                }) }), errors.length !== 0 && (_jsx("div", { className: "my-6", children: _jsx(ShowErrors, { errors: errors }) })), _jsx("div", { className: "flex justify-center my-8", children: _jsx(PrimaryBtn, { text: "Submit" }) })] }));
+}
+// check the required attributes and return array string of errors
+function checkRequired(attributes, data) {
+    const requiredAttributes = attributes.filter((attr) => { var _a; return (_a = attr.settings) === null || _a === void 0 ? void 0 : _a.required; });
+    const errors = [];
+    requiredAttributes.forEach((attr) => {
+        if (!data[attr.name]) {
+            errors.push(`${attr.label} is required`);
+        }
+    });
+    return errors;
 }
 function canShow(attr, data, conds) {
     const conditions = conds.filter((c) => c[c.length - 1].delimiter === attr.name);

package/dist/component/ComponentDisplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentDisplayer.js","sourceRoot":"","sources":["../../src/component/ComponentDisplayer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComponentDisplayer.js","sourceRoot":"","sources":["../../src/component/ComponentDisplayer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,UAAU,MAAM,cAAc,CAAC;AAStC,MAAM,UAAU,kBAAkB,CAAC,EACjC,SAAS,EACT,IAAI,EACJ,OAAO,EACP,QAAQ,GACgB;IACxB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACnD,OAAO,CACL,gBACE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,IAAI,GAAG,aAAa,CAAC,SAAS,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACvD,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACtB,QAAQ,EAAE,CAAC;YACb,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC;QACH,CAAC,EACD,SAAS,EAAC,UAAU,aAEpB,aAAI,SAAS,EAAC,mDAAmD,YAC9D,SAAS,CAAC,KAAK,GACb,EACL,cAAK,SAAS,EAAC,WAAW,YACvB,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBACjC,IAAI,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,CAAC;wBACpD,OAAO,CACL,KAAC,QAAQ,IAEP,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EACrD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACd,MAAM,IAAI,qBAAQ,IAAI,CAAE,CAAC;gCACzB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gCACpB,OAAO,CAAC,IAAI,CAAC,CAAC;4BAChB,CAAC,EACD,IAAI,EAAE,IAAI,IARL,IAAI,CAAC,IAAI,CASd,CACH,CAAC;oBACJ,CAAC;yBAAM,CAAC;wBACN,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;4BACpB,MAAM,IAAI,qBAAQ,IAAI,CAAE,CAAC;4BACzB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;4BACrB,OAAO,CAAC,IAAI,CAAC,CAAC;wBAChB,CAAC;oBACH,CAAC;gBACH,CAAC,CAAC,GACE,EACL,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CACtB,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,GAAI,GAC1B,CACP,EACD,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,GAAG,GACxB,IACD,CACR,CAAC;AACJ,CAAC;AAED,kEAAkE;AAClE,SAAS,aAAa,CAAC,UAAuB,EAAE,IAAc;IAC5D,MAAM,kBAAkB,GAAG,UAAU,CAAC,MAAM,CAC1C,CAAC,IAAI,EAAE,EAAE,WAAC,OAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,CAAA,EAAA,CAClC,CAAC;IACF,MAAM,MAAM,GAAa,EAAE,CAAC;IAC5B,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAClC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,cAAc,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,SAAS,OAAO,CACd,IAAe,EACf,IAAc,EACd,KAAoB;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAC7B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,IAAI,CAC/C,CAAC;IAEF,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,EAAE;QACtC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,WAAW,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YACpC,MAAM,MAAM,GAAG,iBAAiB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YACpD,IAAI,WAAW,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;gBACnC,IAAI,MAAM,EAAE,CAAC;oBACX,OAAO,IAAI,CAAC;gBACd,CAAC;YACH,CAAC;iBAAM,IAAI,WAAW,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;gBAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;oBACZ,OAAO,KAAK,CAAC;gBACf,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,OAAO,MAAM,CAAC;YAChB,CAAC;QACH,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC;AAED,SAAS,iBAAiB,CAAC,SAAoB,EAAE,IAAc;IAC7D,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,SAAS,CAAC;IAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC;IAElC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,IAAI;YACP,OAAO,KAAK,KAAK,SAAS,CAAC;QAC7B,KAAK,KAAK;YACR,OAAO,KAAK,GAAG,SAAS,CAAC;QAC3B,KAAK,KAAK;YACR,OAAO,KAAK,GAAG,SAAS,CAAC;QAC3B;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC"}

package/dist/component/PrimaryBtn.d.ts

@@ -1,8 +1,6 @@
 type props = {
     text: string;
-    clickFn: () => void;
-    className?: string;
     disabled?: boolean;
 };
-export default function PrimaryBtn({ text, clickFn, className, disabled, }: props): import("react/jsx-runtime").JSX.Element;
+export default function PrimaryBtn({ text, disabled }: props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/component/PrimaryBtn.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from "react";
-export default function PrimaryBtn({ text, clickFn, className, disabled, }) {
+export default function PrimaryBtn({ text, disabled }) {
     const btn = useRef(null);
-    return (_jsx("button", { type: "submit", ref: btn, onClick: clickFn, className: "rounded-2xl bg-[#0096DC] bg-opacity-85 px-8 py-2 font-bold text-white-shade hover:bg-opacity-100", disabled: disabled, children: text }));
+    return (_jsx("button", { type: "submit", ref: btn, className: "rounded-2xl bg-[#0096DC] bg-opacity-85 px-8 py-2 font-bold text-white-shade hover:bg-opacity-100", disabled: disabled, children: text }));
 }
 //# sourceMappingURL=PrimaryBtn.js.map

package/dist/component/PrimaryBtn.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryBtn.js","sourceRoot":"","sources":["../../src/component/PrimaryBtn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAS/B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,GACF;IACN,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5C,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EACP,kGAAkG,EAEpG,QAAQ,EAAE,QAAQ,YAEjB,IAAI,GACE,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PrimaryBtn.js","sourceRoot":"","sources":["../../src/component/PrimaryBtn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAO/B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS;IAC1D,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5C,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,SAAS,EACP,kGAAkG,EAEpG,QAAQ,EAAE,QAAQ,YAEjB,IAAI,GACE,CACV,CAAC;AACJ,CAAC"}

package/dist/component/ShowAttr.js

@@ -6,6 +6,7 @@ import LabeledMutliSelect from "./inputs/LabeledMutliSelect";
 import { useMemo } from "react";
 import { Parser } from "expr-eval";
 export function ShowAttr({ attribute, value, setValue, showLabel = true, data, }) {
+    var _a, _b, _c, _d;
     const label = useMemo(() => (showLabel ? attribute.label || "" : ""), [attribute.label]);
     const type = useMemo(() => {
         if (attribute.type)
@@ -13,9 +14,9 @@ export function ShowAttr({ attribute, value, setValue, showLabel = true, data, }
     }, [attribute.type]);
     switch (type) {
         case AttributeTypeEnum.NUMBER:
-            return (_jsx(LabeledInput, { label: label, value: value, setValue: setValue, type: "number" }));
+            return (_jsx(LabeledInput, { label: label, value: value, setValue: setValue, type: "number", max: Number((_a = attribute.settings) === null || _a === void 0 ? void 0 : _a.max), min: Number((_b = attribute.settings) === null || _b === void 0 ? void 0 : _b.min) }));
         case AttributeTypeEnum.TEXT:
-            return (_jsx(LabeledInput, { label: label, value: value, setValue: setValue, type: "text" }));
+            return (_jsx(LabeledInput, { label: label, value: value, setValue: setValue, type: "text", maxLength: (_c = attribute.settings) === null || _c === void 0 ? void 0 : _c.max, minLength: (_d = attribute.settings) === null || _d === void 0 ? void 0 : _d.min }));
         case AttributeTypeEnum.LIST:
             return (_jsx(LabeledSelect, { label: label, selected: value, setSelected: setValue, options: attribute.content || [] }));
         case AttributeTypeEnum.BOOLEAN:

package/dist/component/ShowAttr.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShowAttr.js","sourceRoot":"","sources":["../../src/component/ShowAttr.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ShowAttr.js","sourceRoot":"","sources":["../../src/component/ShowAttr.tsx"],"names":[],"mappings":"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"}

package/dist/component/ShowErrors.d.ts

@@ -0,0 +1,3 @@
+export default function ShowErrors({ errors }: {
+    errors: string[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/component/ShowErrors.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WrongIcon from "./icons/WrongIcon";
+export default function ShowErrors({ errors }) {
+    return (_jsxs("div", { className: "bg-red-50 border border-red-300 text-red-600 px-3 py-2 rounded-xl relative", role: "alert", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(WrongIcon, {}), _jsxs("span", { className: "font-semibold", children: [errors.length, " error found."] })] }), _jsx("ul", { className: "mt-2 ml-7 list-disc list-inside", children: errors.map((error) => (_jsx("li", { children: error }))) })] }));
+}
+//# sourceMappingURL=ShowErrors.js.map

package/dist/component/ShowErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowErrors.js","sourceRoot":"","sources":["../../src/component/ShowErrors.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAE1C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,MAAM,EAAwB;IACjE,OAAO,CACL,eACE,SAAS,EAAC,4EAA4E,EACtF,IAAI,EAAC,OAAO,aAEZ,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,SAAS,KAAG,EACb,gBAAM,SAAS,EAAC,eAAe,aAAE,MAAM,CAAC,MAAM,qBAAqB,IAC/D,EACN,aAAI,SAAS,EAAC,iCAAiC,YAC5C,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,uBAAK,KAAK,GAAM,CACjB,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC"}

package/dist/component/icons/WrongIcon.d.ts

@@ -0,0 +1 @@
+export default function WrongIcon(): import("react/jsx-runtime").JSX.Element;

package/dist/component/icons/WrongIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function WrongIcon() {
+    return (_jsxs("svg", { fill: "#c01c28", width: "22px", height: "22px", viewBox: "0 0 200 200", "data-name": "Layer 1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", stroke: "#c01c28", children: [_jsx("g", { id: "SVGRepo_bgCarrier", "stroke-width": "0" }), _jsx("g", { id: "SVGRepo_tracerCarrier", "stroke-linecap": "round", "stroke-linejoin": "round" }), _jsxs("g", { id: "SVGRepo_iconCarrier", children: [_jsx("title", {}), _jsx("path", { d: "M100,15a85,85,0,1,0,85,85A84.93,84.93,0,0,0,100,15Zm0,150a65,65,0,1,1,65-65A64.87,64.87,0,0,1,100,165Z" }), _jsx("path", { d: "M128.5,74a9.67,9.67,0,0,0-14,0L100,88.5l-14-14a9.9,9.9,0,0,0-14,14l14,14-14,14a9.9,9.9,0,0,0,14,14l14-14,14,14a9.9,9.9,0,0,0,14-14l-14-14,14-14A10.77,10.77,0,0,0,128.5,74Z" })] })] }));
+}
+//# sourceMappingURL=WrongIcon.js.map

package/dist/component/icons/WrongIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrongIcon.js","sourceRoot":"","sources":["../../../src/component/icons/WrongIcon.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,OAAO,CACL,eACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,aAAa,eACX,SAAS,EACnB,EAAE,EAAC,SAAS,EACZ,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAC,SAAS,aAEhB,YAAG,EAAE,EAAC,mBAAmB,kBAAc,GAAG,GAAG,EAE7C,YACE,EAAE,EAAC,uBAAuB,oBACX,OAAO,qBACN,OAAO,GACvB,EAEF,aAAG,EAAE,EAAC,qBAAqB,aACzB,iBAAS,EAET,eAAM,CAAC,EAAC,wGAAwG,GAAG,EAEnH,eAAM,CAAC,EAAC,6KAA6K,GAAG,IACtL,IACA,CACP,CAAC;AACJ,CAAC"}

package/dist/component/inputs/Error.d.ts

@@ -0,0 +1,3 @@
+export default function ShowErrors({ errors }: {
+    errors: string[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/component/inputs/Error.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WrongIcon from "../icons/WrongIcon";
+export default function ShowErrors({ errors }) {
+    return (_jsxs("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role: "alert", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(WrongIcon, {}), _jsx("span", { className: "font-bold", children: "There were 2 errors with your submission" })] }), _jsx("ul", { className: "mt-2 ml-6 list-disc list-inside", children: errors.map((error) => (_jsx("li", { children: error }))) })] }));
+}
+//# sourceMappingURL=Error.js.map

package/dist/component/inputs/Error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../src/component/inputs/Error.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,MAAM,EAAwB;IACjE,OAAO,CACL,eACE,SAAS,EAAC,0EAA0E,EACpF,IAAI,EAAC,OAAO,aAEZ,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,SAAS,KAAG,EACb,eAAM,SAAS,EAAC,WAAW,yDAEpB,IACH,EACN,aAAI,SAAS,EAAC,iCAAiC,YAC5C,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,uBAAK,KAAK,GAAM,CACjB,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC"}

package/dist/component/inputs/Input.d.ts

@@ -3,11 +3,13 @@ export type InputProps = {
     value?: string;
     setValue: (s: string) => void;
     type: HTMLInputTypeAttribute;
-    className?: string;
     onBlur?: () => void;
-    maxLength?: number;
+    maxLength?: string;
+    minLength?: string;
+    max?: number;
+    min?: number;
     placeholder?: string;
     disabled?: boolean;
     checked?: boolean;
 };
-export default function Input({ value, setValue, className, type, onBlur, maxLength, placeholder, disabled, checked, }: InputProps): import("react/jsx-runtime").JSX.Element;
+export default function Input({ value, setValue, type, onBlur, maxLength, minLength, max, min, placeholder, disabled, checked, }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/component/inputs/Input.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function Input({ value, setValue, className, type, onBlur, maxLength, placeholder, disabled, checked, }) {
-    return (_jsx("input", { type: type, className: "py-2 px-3 block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none", value: value, onChange: (e) => type === "checkbox"
+export default function Input({ value, setValue, type, onBlur, maxLength, minLength, max, min, placeholder, disabled, checked, }) {
+    console.log();
+    console.log(maxLength);
+    return (_jsx("input", { type: type, className: `py-1.5 px-3 ${type === "checkbox" ? "size-5" : "w-full"} border-2 border-gray-300 rounded-xl text-base focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none`, value: value, onChange: (e) => type === "checkbox"
             ? setValue(String(e.target.checked))
-            : setValue(e.target.value), disabled: disabled, onBlur: onBlur, maxLength: maxLength, placeholder: placeholder, checked: checked }));
+            : setValue(e.target.value), disabled: disabled, onBlur: onBlur, maxLength: maxLength && !isNaN(Number(maxLength)) ? Number(maxLength) : undefined, minLength: minLength && !isNaN(Number(minLength)) ? Number(minLength) : undefined, max: max, min: min, placeholder: placeholder, checked: checked }));
 }
 //# sourceMappingURL=Input.js.map

package/dist/component/inputs/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/component/inputs/Input.tsx"],"names":[],"mappings":";AAcA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,GACI;IACX,OAAO,CACL,gBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,+JAA+J,EACzK,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,IAAI,KAAK,UAAU;YACjB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAE9B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/component/inputs/Input.tsx"],"names":[],"mappings":";AAgBA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,SAAS,EACT,SAAS,EACT,GAAG,EACH,GAAG,EACH,WAAW,EACX,QAAQ,EACR,OAAO,GACI;IACX,OAAO,CAAC,GAAG,EAEV,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvB,OAAO,CACL,gBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,eAAe,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,2IAA2I,EAC9M,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,IAAI,KAAK,UAAU;YACjB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAE9B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EACP,SAAS,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAExE,SAAS,EACP,SAAS,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EAExE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC"}

package/dist/component/inputs/LableledInput.js

@@ -13,6 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Input from "./Input";
 export default function LabeledInput(_a) {
     var { label } = _a, inputProps = __rest(_a, ["label"]);
-    return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-bold mb-1", children: label }), _jsx(Input, Object.assign({}, inputProps))] }));
+    return (_jsxs("div", { className: "w-full flex gap-2 items-center", children: [_jsx("label", { className: "block text-base font-bold mb-1", children: label }), _jsx(Input, Object.assign({}, inputProps))] }));
 }
 //# sourceMappingURL=LableledInput.js.map

package/dist/component/inputs/LableledInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"LableledInput.js","sourceRoot":"","sources":["../../../src/component/inputs/LableledInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,SAAS,CAAC;AAM5C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAA+B;QAA/B,EAAE,KAAK,OAAwB,EAAnB,UAAU,cAAtB,SAAwB,CAAF;IACzD,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,gBAAO,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAS,EAC/D,KAAC,KAAK,oBAAK,UAAU,EAAI,IACrB,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"LableledInput.js","sourceRoot":"","sources":["../../../src/component/inputs/LableledInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,SAAS,CAAC;AAM5C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAA+B;QAA/B,EAAE,KAAK,OAAwB,EAAnB,UAAU,cAAtB,SAAwB,CAAF;IACzD,OAAO,CACL,eAAK,SAAS,EAAC,gCAAgC,aAC7C,gBAAO,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAS,EACjE,KAAC,KAAK,oBAAK,UAAU,EAAI,IACrB,CACP,CAAC;AACJ,CAAC"}

package/dist/component/inputs/MultiSelect.js

@@ -12,7 +12,6 @@ const MultiSelect = ({ options, selectedOptions, onChange, }) => {
             onChange([...selectedOptions, option]);
         }
     };
-    console.log(selectedOptions);
     const handleFilterChange = (e) => {
         setFilter(e.target.value);
     };

package/dist/component/inputs/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/component/inputs/MultiSelect.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQxC,MAAM,WAAW,GAA+B,CAAC,EAC/C,OAAO,EACP,eAAe,EACf,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAEhD,MAAM,iBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;QAC3C,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YACrC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC;QACtE,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,CAAC,GAAG,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7B,MAAM,kBAAkB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACpE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAChD,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CACpD,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC3C,cACE,SAAS,EAAC,wKAAwK,EAClL,OAAO,EAAE,cAAc,YAEtB,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC9D,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,eAEE,SAAS,EAAC,qFAAqF,YAE9F,MAAM,IAHF,MAAM,CAIN,CACR,CAAC,CACH,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,uBAAuB,+BAAsB,CAC9D,GACG,EACL,MAAM,IAAI,CACT,eAAK,SAAS,EAAC,0FAA0F,aACvG,gBACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,2CAA2C,EACrD,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,kBAAkB,GAC5B,EACF,cAAK,SAAS,EAAC,0BAA0B,YACtC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC/B,eAEE,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,aAExC,gBACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EACzC,QAAQ,QACR,SAAS,EAAC,MAAM,GAChB,EACF,eAAM,SAAS,EAAC,MAAM,YAAE,MAAM,GAAQ,KAVjC,MAAM,CAWP,CACP,CAAC,GACE,IACF,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/component/inputs/MultiSelect.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQxC,MAAM,WAAW,GAA+B,CAAC,EAC/C,OAAO,EACP,eAAe,EACf,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAEhD,MAAM,iBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;QAC3C,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YACrC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC;QACtE,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,CAAC,GAAG,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACpE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAChD,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CACpD,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC3C,cACE,SAAS,EAAC,wKAAwK,EAClL,OAAO,EAAE,cAAc,YAEtB,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC9D,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,eAEE,SAAS,EAAC,qFAAqF,YAE9F,MAAM,IAHF,MAAM,CAIN,CACR,CAAC,CACH,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,uBAAuB,+BAAsB,CAC9D,GACG,EACL,MAAM,IAAI,CACT,eAAK,SAAS,EAAC,0FAA0F,aACvG,gBACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,2CAA2C,EACrD,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,kBAAkB,GAC5B,EACF,cAAK,SAAS,EAAC,0BAA0B,YACtC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC/B,eAEE,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,aAExC,gBACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EACzC,QAAQ,QACR,SAAS,EAAC,MAAM,GAChB,EACF,eAAM,SAAS,EAAC,MAAM,YAAE,MAAM,GAAQ,KAVjC,MAAM,CAWP,CACP,CAAC,GACE,IACF,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/component/inputs/Select.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function Select({ options, selected, setSelected, canDefault, }) {
-    return (_jsxs("select", { value: selected || "", onChange: (e) => setSelected(e.target.value), className: "py-2 px-3 bg-white block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none", children: [_jsx("option", { value: "", disabled: !canDefault, hidden: !canDefault, children: "selection" }), options.map((opt) => (_jsx("option", { value: opt, children: opt })))] }));
+    return (_jsxs("select", { value: selected || "", onChange: (e) => setSelected(e.target.value), className: "py-2 px-3 bg-white block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none", children: [_jsx("option", { value: "", disabled: !canDefault, hidden: !canDefault, children: "selection" }), options.map((opt, i) => (_jsx("option", { value: opt, children: opt }, i)))] }));
 }
 //# sourceMappingURL=Select.js.map

package/dist/component/inputs/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/component/inputs/Select.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,WAAW,EACX,UAAU,GACE;IACZ,OAAO,CACL,kBACE,KAAK,EAAE,QAAQ,IAAI,EAAE,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,SAAS,EAAC,wKAAwK,aAElL,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC,UAAU,0BAElD,EACR,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAQ,KAAK,EAAE,GAAG,YAAG,GAAG,GAAU,CACnC,CAAC,IACK,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/component/inputs/Select.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,WAAW,EACX,UAAU,GACE;IACZ,OAAO,CACL,kBACE,KAAK,EAAE,QAAQ,IAAI,EAAE,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,SAAS,EAAC,wKAAwK,aAElL,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC,UAAU,0BAElD,EACR,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACvB,iBAAgB,KAAK,EAAE,GAAG,YACvB,GAAG,IADO,CAAC,CAEL,CACV,CAAC,IACK,CACV,CAAC;AACJ,CAAC"}

package/dist/component/inputs/ShowErrors.d.ts

@@ -0,0 +1,3 @@
+export default function ShowErrors({ errors }: {
+    errors: string[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/component/inputs/ShowErrors.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WrongIcon from "../icons/WrongIcon";
+export default function ShowErrors({ errors }) {
+    return (_jsxs("div", { className: "bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative", role: "alert", children: [_jsxs("div", { className: "flex items-center", children: [_jsx(WrongIcon, {}), _jsx("span", { className: "font-bold", children: "There were 2 errors with your submission" })] }), _jsx("ul", { className: "mt-2 ml-6 list-disc list-inside", children: errors.map((error) => (_jsx("li", { children: error }))) })] }));
+}
+//# sourceMappingURL=ShowErrors.js.map

package/dist/component/inputs/ShowErrors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShowErrors.js","sourceRoot":"","sources":["../../../src/component/inputs/ShowErrors.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,MAAM,EAAwB;IACjE,OAAO,CACL,eACE,SAAS,EAAC,0EAA0E,EACpF,IAAI,EAAC,OAAO,aAEZ,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,SAAS,KAAG,EACb,eAAM,SAAS,EAAC,WAAW,yDAEpB,IACH,EACN,aAAI,SAAS,EAAC,iCAAiC,YAC5C,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,uBAAK,KAAK,GAAM,CACjB,CAAC,GACC,IACD,CACP,CAAC;AACJ,CAAC"}

package/dist/index.css

@@ -574,6 +574,11 @@ video {
   z-index: 10;
 }
 
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -591,6 +596,10 @@ video {
   margin-left: 0.5rem;
 }
 
+.ml-7 {
+  margin-left: 1.75rem;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -619,6 +628,11 @@ video {
   display: none;
 }
 
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -639,10 +653,26 @@ video {
   cursor: pointer;
 }
 
+.list-inside {
+  list-style-position: inside;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.items-center {
+  align-items: center;
+}
+
 .justify-center {
   justify-content: center;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
@@ -669,6 +699,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -686,11 +720,26 @@ video {
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-red-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
 .bg-\[\#0096DC\] {
   --tw-bg-opacity: 1;
   background-color: rgb(0 150 220 / var(--tw-bg-opacity));
 }
 
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -724,6 +773,11 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -743,6 +797,11 @@ video {
   line-height: 2.5rem;
 }
 
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -761,6 +820,11 @@ video {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }

package/dist/util/type.d.ts

@@ -40,17 +40,19 @@ export interface Condition {
     value: string;
     delimiter: string;
 }
-export interface SettingsAttribute {
+export interface ISettingsAttribute {
     max?: string;
     min?: string;
     color?: string;
+    required?: boolean;
+    newValue?: boolean;
 }
 export interface Attribute {
     name: string;
     label?: string;
     type?: keyof typeof AttributeTypeEnum;
     content?: Content;
-    settings?: SettingsAttribute;
+    settings?: ISettingsAttribute;
 }
 export type Content = string | string[];
 export interface SettingsComponent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "module-package-comp",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/component/ComponentDisplayer.tsx

@@ -1,36 +1,42 @@
 import { useState } from "react";
-import {
-  Attribute,
-  Component,
-  Condition,
-  ConditionEnum,
-  DataJSON,
-} from "../util/type";
+import { Attribute, Component, Condition, DataJSON } from "../util/type";
 import { ShowAttr } from "./ShowAttr";
 import PrimaryBtn from "./PrimaryBtn";
+import ShowErrors from "./ShowErrors";
 
 type ComponentDisplayerProps = {
-  components: Component[];
+  component: Component;
   data: DataJSON;
   setData: (data: DataJSON) => void;
   onSubmit: () => void;
 };
 
 export function ComponentDisplayer({
-  components,
+  component,
   data,
   setData,
   onSubmit,
 }: ComponentDisplayerProps) {
-  const [page, setPage] = useState(0);
+  const [errors, setErrors] = useState<string[]>([]);
   return (
-    <form onSubmit={onSubmit} className="min-w-72">
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        const errs = checkRequired(component.attributes, data);
+        if (errs.length === 0) {
+          onSubmit();
+        } else {
+          setErrors(errs);
+        }
+      }}
+      className="min-w-72"
+    >
       <h1 className="font-bold text-center text-blue-800 text-4xl mb-8">
-        {components[page].label}
+        {component.label}
       </h1>
       <div className="space-y-3">
-        {components[page].attributes.map((attr) => {
-          if (canShow(attr, data, components[page].conditions || [])) {
+        {component.attributes.map((attr) => {
+          if (canShow(attr, data, component.conditions || [])) {
             return (
               <ShowAttr
                 key={attr.name}
@@ -53,13 +59,32 @@ export function ComponentDisplayer({
           }
         })}
       </div>
+      {errors.length !== 0 && (
+        <div className="my-6">
+          <ShowErrors errors={errors} />
+        </div>
+      )}
       <div className="flex justify-center my-8">
-        <PrimaryBtn clickFn={onSubmit} text="Submit" />
+        <PrimaryBtn text="Submit" />
       </div>
     </form>
   );
 }
 
+// check the required attributes and return array string of errors
+function checkRequired(attributes: Attribute[], data: DataJSON): string[] {
+  const requiredAttributes = attributes.filter(
+    (attr) => attr.settings?.required,
+  );
+  const errors: string[] = [];
+  requiredAttributes.forEach((attr) => {
+    if (!data[attr.name]) {
+      errors.push(`${attr.label} is required`);
+    }
+  });
+  return errors;
+}
+
 function canShow(
   attr: Attribute,
   data: DataJSON,

package/src/component/PrimaryBtn.tsx

@@ -2,23 +2,15 @@ import { useRef } from "react";
 
 type props = {
   text: string;
-  clickFn: () => void;
-  className?: string;
   disabled?: boolean;
 };
 
-export default function PrimaryBtn({
-  text,
-  clickFn,
-  className,
-  disabled,
-}: props) {
+export default function PrimaryBtn({ text, disabled }: props) {
   const btn = useRef<HTMLButtonElement>(null);
   return (
     <button
       type="submit"
       ref={btn}
-      onClick={clickFn}
       className={
         "rounded-2xl bg-[#0096DC] bg-opacity-85 px-8 py-2 font-bold text-white-shade hover:bg-opacity-100"
       }

package/src/component/ShowAttr.tsx

@@ -1,7 +1,6 @@
 import { Attribute, AttributeTypeEnum, Content, DataJSON } from "../util/type";
 import LabeledSelect from "./inputs/LableledSelect";
 import LabeledInput from "./inputs/LableledInput";
-import MultiSelect from "./inputs/MultiSelect";
 import LabeledMutliSelect from "./inputs/LabeledMutliSelect";
 import { useMemo } from "react";
 import { Parser } from "expr-eval";
@@ -36,6 +35,8 @@ export function ShowAttr({
           value={value}
           setValue={setValue}
           type="number"
+          max={Number(attribute.settings?.max)}
+          min={Number(attribute.settings?.min)}
         />
       );
     case AttributeTypeEnum.TEXT:
@@ -45,6 +46,8 @@ export function ShowAttr({
           value={value}
           setValue={setValue}
           type="text"
+          maxLength={attribute.settings?.max}
+          minLength={attribute.settings?.min}
         />
       );
     case AttributeTypeEnum.LIST:

package/src/component/ShowErrors.tsx

@@ -0,0 +1,20 @@
+import WrongIcon from "./icons/WrongIcon";
+
+export default function ShowErrors({ errors }: { errors: string[] }) {
+  return (
+    <div
+      className="bg-red-50 border border-red-300 text-red-600 px-3 py-2 rounded-xl relative"
+      role="alert"
+    >
+      <div className="flex items-center gap-2">
+        <WrongIcon />
+        <span className="font-semibold">{errors.length} error found.</span>
+      </div>
+      <ul className="mt-2 ml-7 list-disc list-inside">
+        {errors.map((error) => (
+          <li>{error}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/component/icons/WrongIcon.tsx

@@ -0,0 +1,30 @@
+export default function WrongIcon() {
+  return (
+    <svg
+      fill="#c01c28"
+      width="22px"
+      height="22px"
+      viewBox="0 0 200 200"
+      data-name="Layer 1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="#c01c28"
+    >
+      <g id="SVGRepo_bgCarrier" stroke-width="0" />
+
+      <g
+        id="SVGRepo_tracerCarrier"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+
+      <g id="SVGRepo_iconCarrier">
+        <title />
+
+        <path d="M100,15a85,85,0,1,0,85,85A84.93,84.93,0,0,0,100,15Zm0,150a65,65,0,1,1,65-65A64.87,64.87,0,0,1,100,165Z" />
+
+        <path d="M128.5,74a9.67,9.67,0,0,0-14,0L100,88.5l-14-14a9.9,9.9,0,0,0-14,14l14,14-14,14a9.9,9.9,0,0,0,14,14l14-14,14,14a9.9,9.9,0,0,0,14-14l-14-14,14-14A10.77,10.77,0,0,0,128.5,74Z" />
+      </g>
+    </svg>
+  );
+}

package/src/component/inputs/Input.tsx

@@ -4,9 +4,11 @@ export type InputProps = {
   value?: string;
   setValue: (s: string) => void;
   type: HTMLInputTypeAttribute;
-  className?: string;
   onBlur?: () => void;
-  maxLength?: number;
+  maxLength?: string;
+  minLength?: string;
+  max?: number;
+  min?: number;
   placeholder?: string;
   disabled?: boolean;
   checked?: boolean;
@@ -15,10 +17,12 @@ export type InputProps = {
 export default function Input({
   value,
   setValue,
-  className,
   type,
   onBlur,
   maxLength,
+  minLength,
+  max,
+  min,
   placeholder,
   disabled,
   checked,
@@ -26,7 +30,7 @@ export default function Input({
   return (
     <input
       type={type}
-      className="py-2 px-3 block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none"
+      className={`py-1.5 px-3 ${type === "checkbox" ? "size-5" : "w-full"} border-2 border-gray-300 rounded-xl text-base focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none`}
       value={value}
       onChange={(e) =>
         type === "checkbox"
@@ -35,7 +39,14 @@ export default function Input({
       }
       disabled={disabled}
       onBlur={onBlur}
-      maxLength={maxLength}
+      maxLength={
+        maxLength && !isNaN(Number(maxLength)) ? Number(maxLength) : undefined
+      }
+      minLength={
+        minLength && !isNaN(Number(minLength)) ? Number(minLength) : undefined
+      }
+      max={max}
+      min={min}
       placeholder={placeholder}
       checked={checked}
     />

package/src/component/inputs/LableledInput.tsx

@@ -6,8 +6,8 @@ type Props = {
 
 export default function LabeledInput({ label, ...inputProps }: Props) {
   return (
-    <div className="w-full">
-      <label className="block text-sm font-bold mb-1">{label}</label>
+    <div className="w-full flex gap-2 items-center">
+      <label className="block text-base font-bold mb-1">{label}</label>
       <Input {...inputProps} />
     </div>
   );

package/src/component/inputs/MultiSelect.tsx

@@ -23,7 +23,6 @@ const MultiSelect: React.FC<MultiSelectProps> = ({
       onChange([...selectedOptions, option]);
     }
   };
-  console.log(selectedOptions);
   const handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setFilter(e.target.value);
   };

package/src/component/inputs/Select.tsx

@@ -20,8 +20,10 @@ export default function Select({
       <option value="" disabled={!canDefault} hidden={!canDefault}>
         selection
       </option>
-      {options.map((opt) => (
-        <option value={opt}>{opt}</option>
+      {options.map((opt, i) => (
+        <option key={i} value={opt}>
+          {opt}
+        </option>
       ))}
     </select>
   );

package/src/util/type.ts

@@ -48,10 +48,12 @@ export interface Condition {
   delimiter: string;
 }
 
-export interface SettingsAttribute {
+export interface ISettingsAttribute {
   max?: string;
   min?: string;
   color?: string;
+  required?: boolean;
+  newValue?: boolean;
 }
 
 export interface Attribute {
@@ -59,7 +61,7 @@ export interface Attribute {
   label?: string;
   type?: keyof typeof AttributeTypeEnum;
   content?: Content;
-  settings?: SettingsAttribute;
+  settings?: ISettingsAttribute;
 }
 
 export type Content = string | string[];