major refactor

- move common components to own folder
- add tsconfig for common reference and build
- update configuration files for global JSX support
- modify checkbox creation with specific required option

common/src/ElixFormsElement.tsx

@@ -0,0 +1,30 @@
+import React, { type JSX } from "react";
+
+// Class to encapsulate the label and input elements
+export class ElixFormsElement {
+    label: JSX.Element;
+    input: JSX.Element;
+    separator: string;
+    constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = "")
+    {
+        if (!labelElement || !inputElement) {
+            throw new Error("labelElement and inputElement are required.");
+        }
+
+        this.label = labelElement;
+        this.input = inputElement;
+        this.separator = separator;
+    }
+
+    // Optional: render both elements together
+    render() : JSX.Element {
+        return (<><div className="iuFieldContainer">
+                <div className="attrDisplay_left attrDisplay_label"><div className="iuLabelContainer"><div className="attrDisplay_center"><div className="attrDisplay_middle">
+                    {this.label}{this.separator}
+                </div></div><div className="iuClearContainer">&nbsp;</div></div></div>
+                <div className="attrDisplay_right attrDisplay_input"><div className="iuInputContainer iuTypeString"><div className="attrDisplay_center"><div className="attrDisplay_middle">
+                    {this.input}
+                </div></div><div className="iuClearContainer">&nbsp;</div></div></div>
+        </div></>);
+    }
+}