voc-lib-js 1.0.0

package/README.md

@@ -0,0 +1,19 @@
+# Vocphone JavaScript Library
+This is a JavaScript library for [VocPhone](https://vocphone.com).
+
+## Setup
+```bash
+npm install
+```
+
+## Usage
+### Installation
+```bash
+npm install voc-lib-js
+```
+
+### Import
+```javascript
+import { Vocphone } from "voc-lib-js";
+const vocphone = new Vocphone();
+```

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "voc-lib-js",
+  "version": "1.0.0",
+  "description": "A JavaScript library for VocPhone",
+  "main": "./dist/main.cjs",
+  "module": "./dist/main.mjs",
+  "types": "./dist/main.d.ts",
+  "scripts": {
+    "build": "tsup src/main.ts --format cjs,esm --dts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.vocphone.com/vocphone-voice/voc-lib-js.git"
+  },
+  "keywords": ["vocphone", "voice", "library", "javascript", "typescript"],
+  "author": "VocPhone Team",
+  "license": "ISC",
+  "devDependencies": {
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  }
+}

package/samples/sample.json

@@ -0,0 +1,115 @@
+{
+    "id": "SDFSD345634563456",
+    "code": "USER_REG_01",
+    "form_name": "User Registration",
+    "fields": [
+        {
+            "label": "Name", // optional show the label of the group if exists
+            "type": "row",
+            "items": [
+                {
+                    "label": "First Name",
+                    "key": "first_name",
+                    "type": "text",
+                    "required": true,
+                    "validation": {
+                        "max_length": 30,
+                        "min_length": 8,
+                        "regex": "^(?=.*[0-9])(?=.*[a-zA-Z]).*$"
+                    },
+                    "hint_text": "Your first name must be at least 8 characters long and contain both letters and numbers."
+                },
+                {
+                    "label": "Last Name",
+                    "key": "last_name",
+                    "type": "text",
+                    "required": true,
+                    "validation": {
+                        "min_length": 8
+                    }
+                }
+            ]
+        },
+        {
+            "label": "Username",
+            "key": "username",
+            "type": "text",
+            "required": true,
+            "validation": {
+                "min_length": 8
+            }
+        },
+        {
+            "label": "Password",
+            "key": "password",
+            "type": "password",
+            "required": true,
+            "validation": {
+                "min_length": 8,
+                "regex": "^(?=.*[0-9])(?=.*[a-zA-Z]).*$"
+            }
+        },
+        {
+            "label": "Text Area",
+            "key": "text_area",
+            "type": "textarea",
+            "required": true,
+            "validation": {
+                "min_length": 8
+            }
+        },
+        {
+            "label": "Email",
+            "key": "email",
+            "type": "email",
+            "required": false
+        },
+        {
+            "validation": {
+                "min_length": 8
+            }
+        },
+        {
+            "label": "Gender",
+            "type": "radio",
+            "key": "gender",
+            "required": false,
+            "direction": "horizontal",
+            "options": [
+                {
+                    "label": "Male",
+                    "value": "male"
+                },
+                {
+                    "label": "Female",
+                    "value": "female"
+                },
+                {
+                    "label": "Other",
+                    "value": "other"
+                }
+            ]
+        },
+        {
+            "label": "Country",
+            "type": "select",
+            "key": "country",
+            "default": "usa",
+            "required": false,
+            "options": [
+                {
+                    "label": "USA",
+                    "value": "usa"
+                },
+                {
+                    "label": "Canada",
+                    "value": "canada"
+                },
+                {
+                    "label": "UK",
+                    "value": "uk"
+                }
+            ]
+        }
+    ]
+}

package/src/forms-lib/form-render.ts

@@ -0,0 +1,249 @@
+import { submitForm } from "./form-submit";
+
+// ---- Types ----
+type Validation = {
+    max_length?: number;
+    min_length?: number;
+    regex?: string;
+};
+
+type Option = {
+    label: string;
+    value: string;
+};
+
+type BaseField = {
+    label?: string;
+    key?: string;
+    type?: string;
+    required?: boolean;
+    validation?: Validation;
+    hint_text?: string;
+    direction?: "horizontal" | "vertical";
+    options?: Option[];
+    default?: string;
+};
+
+type RowField = {
+    label?: string; // optional group label
+    type: "row";
+    items: BaseField[];
+};
+
+type Field = BaseField | RowField;
+
+export type FormData = {
+    id: string;
+    code: string;
+    form_name: string;
+    fields: Field[];
+};
+
+// ---- Main return type ----
+export interface RenderedForm {
+    element: HTMLFormElement;
+    validate: () => Array<{ element: HTMLElement, message: string }>;
+    submitForm: () => void;
+    getValues: () => { [key: string]: FormDataEntryValue | FormDataEntryValue[] };
+}
+
+// ---- Implementation ----
+export function renderForm(element: string | HTMLElement, data: FormData): RenderedForm | null {
+    let containers: HTMLElement[] = [];
+
+    if (typeof element === "string") {
+        containers = Array.from(document.querySelectorAll<HTMLElement>(element));
+    } else {
+        containers = [element];
+    }
+
+    if (containers.length === 0) return null;
+
+    function buildForm(): HTMLFormElement {
+        const form = document.createElement("form");
+        form.id = data.id;
+
+        const title = document.createElement("h2");
+        title.textContent = data.form_name;
+        form.appendChild(title);
+
+        function applyValidation(
+            el: HTMLInputElement | HTMLTextAreaElement,
+            validation?: Validation
+        ) {
+            if (!validation) return;
+
+            if (validation.min_length !== undefined) {
+                el.minLength = validation.min_length;
+            }
+
+            if (validation.max_length !== undefined) {
+                el.maxLength = validation.max_length;
+            }
+
+            if (validation.regex) {
+                if (el instanceof HTMLInputElement) {
+                    // pattern only works on inputs
+                    el.pattern = validation.regex;
+                } else {
+                    // fallback for textarea → use dataset
+                    el.dataset.pattern = validation.regex;
+                }
+            }
+        }
+
+        function renderField(field: BaseField): HTMLElement | null {
+            if (!field.key && !field.label) return null;
+
+            const wrapper = document.createElement("div");
+            wrapper.className = "form-group";
+
+            if (field.label) {
+                const label = document.createElement("label");
+                label.htmlFor = field.key || "";
+                label.textContent = field.label + (field.required ? " *" : "");
+                wrapper.appendChild(label);
+            }
+
+            let input: HTMLElement | null = null;
+
+            switch (field.type) {
+                case "textarea": {
+                    const textarea = document.createElement("textarea");
+                    if (field.key) textarea.name = field.key;
+                    if (field.required) textarea.required = true;
+                    applyValidation(textarea, field.validation);
+                    input = textarea;
+                    break;
+                }
+                case "select": {
+                    const select = document.createElement("select");
+                    if (field.key) select.name = field.key;
+                    if (field.required) select.required = true;
+                    if (field.options) {
+                        field.options.forEach((opt) => {
+                            const option = document.createElement("option");
+                            option.value = opt.value;
+                            option.textContent = opt.label;
+                            if (field.default === opt.value) option.selected = true;
+                            select.appendChild(option);
+                        });
+                    }
+                    input = select;
+                    break;
+                }
+                case "radio": {
+                    const radioGroup = document.createElement("div");
+                    radioGroup.className =
+                        "radio-group " + (field.direction || "vertical");
+                    if (field.options) {
+                        field.options.forEach((opt) => {
+                            const radioWrapper = document.createElement("label");
+                            radioWrapper.style.display =
+                                field.direction === "horizontal"
+                                    ? "inline-block"
+                                    : "block";
+
+                            const radio = document.createElement("input");
+                            radio.type = "radio";
+                            radio.name = field.key || "";
+                            radio.value = opt.value;
+
+                            radioWrapper.appendChild(radio);
+                            radioWrapper.appendChild(
+                                document.createTextNode(opt.label)
+                            );
+                            radioGroup.appendChild(radioWrapper);
+                        });
+                    }
+                    input = radioGroup;
+                    break;
+                }
+                default: {
+                    const inp = document.createElement("input");
+                    inp.type = field.type || "text";
+                    if (field.key) inp.name = field.key;
+                    if (field.required) inp.required = true;
+                    applyValidation(inp, field.validation);
+                    input = inp;
+                    break;
+                }
+            }
+
+            if (input) wrapper.appendChild(input);
+
+            if (field.hint_text) {
+                const hint = document.createElement("small");
+                hint.className = "hint";
+                hint.textContent = field.hint_text;
+                wrapper.appendChild(hint);
+            }
+
+            return wrapper;
+        }
+
+        data.fields.forEach((field) => {
+            if (field.type === "row") {
+                const rowWrapper = document.createElement("div");
+                rowWrapper.className = "form-row";
+
+                if (field.label) {
+                    const rowLabel = document.createElement("h3");
+                    rowLabel.textContent = field.label;
+                    rowWrapper.appendChild(rowLabel);
+                }
+
+                //@ts-ignore
+                field.items.forEach((item) => {
+                    const rendered = renderField(item);
+                    if (rendered) rowWrapper.appendChild(rendered);
+                });
+
+                form.appendChild(rowWrapper);
+            } else {
+                const rendered = renderField(field as BaseField);
+                if (rendered) form.appendChild(rendered);
+            }
+        });
+
+        // Add a default submit button
+        const submitBtn = document.createElement("button");
+        submitBtn.type = "submit";
+        submitBtn.textContent = "Submit";
+        form.appendChild(submitBtn);
+
+        return form;
+    }
+
+    // Attach form to the first container
+    const formElement = buildForm();
+    containers[0].appendChild(formElement);
+
+    // ---- API to return ----
+    return {
+        element: formElement,
+        // this method validates the form and returns an array of errors
+        validate: () => {
+            const errors: Array<{ element: HTMLElement, message: string }> = [];
+            const invalidElements = formElement.querySelectorAll(":invalid");
+            invalidElements.forEach((element) => {
+                const message = (element as HTMLInputElement | HTMLTextAreaElement).validationMessage;
+                errors.push({ element: element as HTMLElement, message });
+            });
+            return errors;
+        },
+        // this method submits the form to the portal vocphone server
+        submitForm: () => {
+            submitForm(formElement);
+        },
+        // This method gets the data from the form.
+        getValues: () => {
+            const formData = new FormData(formElement);
+            const values: { [key: string]: FormDataEntryValue | FormDataEntryValue[] } = {};
+            formData.forEach((value, key) => {
+                values[key] = value;
+            });
+            return values;
+        }
+    };
+}

package/src/forms-lib/form-submit.ts

@@ -0,0 +1,3 @@
+export function submitForm(form: HTMLFormElement) {
+    console.log("Form submitted:", form);
+}

package/src/forms-lib/index.ts

@@ -0,0 +1,5 @@
+import { renderForm } from "./form-render";
+
+export default {
+    renderForm
+};

package/src/main.ts

@@ -0,0 +1,3 @@
+import formsLib from "./forms-lib/index";
+
+export const FormsLib = formsLib;

package/tests/vanilla/index.html

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div id="the-form"></div>
+
+    <script type="module">
+        import { FormsLib } from '../../../dist/main.mjs';
+
+        const form = FormsLib.renderForm('#the-form', {
+            "id": "SDFSD345634563456",
+            "code": "USER_REG_01",
+            "form_name": "User Registration",
+            "fields": [
+                {
+                    "label": "Name", // optional show the label of the group if exists
+                    "type": "row",
+                    "items": [
+                        {
+                            "label": "First Name",
+                            "key": "first_name",
+                            "type": "text",
+                            "required": true,
+                            "validation": {
+                                "max_length": 30,
+                                "min_length": 8,
+                            },
+                            "hint_text": "Your first name must be at least 8 characters long and contain both letters and numbers."
+                        },
+                        {
+                            "label": "Last Name",
+                            "key": "last_name",
+                            "type": "text",
+                            "required": true,
+                            "validation": {
+                                "min_length": 8
+                            }
+                        }
+                    ]
+                },
+                {
+                    "label": "Username",
+                    "key": "username",
+                    "type": "text",
+                    "required": true,
+                    "validation": {
+                        "min_length": 8
+                    }
+                },
+                {
+                    "label": "Password",
+                    "key": "password",
+                    "type": "password",
+                    "required": true,
+                    "validation": {
+                        "min_length": 8
+                    }
+                },
+                {
+                    "label": "Text Area",
+                    "key": "text_area",
+                    "type": "textarea",
+                    "required": true,
+                    "validation": {
+                        "min_length": 8
+                    }
+                },
+                {
+                    "label": "Email",
+                    "key": "email",
+                    "type": "email",
+                    "required": false
+                },
+                {
+                    "validation": {
+                        "min_length": 8
+                    }
+                },
+                {
+                    "label": "Gender",
+                    "type": "radio",
+                    "key": "gender",
+                    "required": false,
+                    "direction": "horizontal",
+                    "options": [
+                        {
+                            "label": "Male",
+                            "value": "male"
+                        },
+                        {
+                            "label": "Female",
+                            "value": "female"
+                        },
+                        {
+                            "label": "Other",
+                            "value": "other"
+                        }
+                    ]
+                },
+                {
+                    "label": "Country",
+                    "type": "select",
+                    "key": "country",
+                    "default": "usa",
+                    "required": false,
+                    "options": [
+                        {
+                            "label": "USA",
+                            "value": "usa"
+                        },
+                        {
+                            "label": "Canada",
+                            "value": "canada"
+                        },
+                        {
+                            "label": "UK",
+                            "value": "uk"
+                        }
+                    ]
+                }
+            ]
+        });
+
+        const validate = form.validate();
+        console.log(validate);
+
+
+        form.submitForm();
+
+        const values = form.getValues();
+        console.log('Form values:', values);
+    </script>
+</body>
+
+</html>

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "declaration": true,
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}