@pixelated-tech/components 3.1.4

package/dist/components/pagebuilder/form/form.css

@@ -0,0 +1,101 @@
+/* ========================================
+===============    FORMS    ===============
+======================================== */
+   
+label, 
+input,
+textarea,
+select,
+form button {
+    font-size: 1.1em;
+	font-family: Verdana, Geneva, sans-serif;
+    padding: 2px 5px;
+    margin: 5px !important;
+    vertical-align: middle;
+    outline: none;
+    border: 1px solid #CCC;
+    border-radius: 5px;
+}
+
+.displayVertical,
+span.displayVertical:last-child,
+span.displayVertical:last-of-type {
+    display:block;
+	margin: 1px 5px 20px 20px !important;
+}
+
+span.displayVertical {
+    display:block;
+	margin: 1px 5px 1px 20px !important;
+}
+
+label {
+	border: none;
+}
+ 
+input:focus,
+textarea:focus,
+select:focus,
+form button:hover {
+    outline: none;
+	border: 1px solid #0C0;
+	-webkit-box-shadow: 0 0 5px 2px #CCC;
+	-moz-box-shadow: 0 0 5px 2px #CCC;
+    box-shadow: 0 0 5px 2px #CCC;
+}
+
+form button, 
+form input[type = button], 
+form input[type = submit], 
+form input[type = reset] {
+	padding: 5px 20px;
+	-webkit-box-shadow: 0 0 5px 2px #CCC;
+	-moz-box-shadow: 0 0 5px 2px #CCC;
+    box-shadow: 0 0 5px 2px #CCC;
+}
+
+form span {
+	font-size: 1.1em;
+	vertical-align: middle;
+}
+
+.tooltip {
+	display: inline;
+	margin-right: 10px;
+	position: relative;
+}
+
+.tooltipIcon {
+  	/* display: inline;
+	color: white !important;
+    background-color: #369;
+    border-radius: 20px;
+    padding: 0 3px; */
+    vertical-align: middle;
+}
+
+.tooltipIcon img {
+  	width: 20px;
+	margin: 5px 0 0 -10px;
+	background-color: #DDD;
+    border-radius: 5px;
+}
+
+.tooltipText {
+  	display: none;
+	position: absolute;
+	top: -25px;
+    left: 25px;
+	width: 200px;
+	padding: 3px 8px;
+	color: #fff;
+	text-align: center;
+	background-color: #666;
+    border: 1px solid white;
+    border-radius: 4px;
+    box-shadow: -3px 0 10px #369, 0 3px 10px #369, 3px 0 10px #369, 0 -3px 10px #369;
+}
+.tooltip a {
+	/* pointer-events: none; */
+	text-decoration: none;
+}

package/dist/components/pagebuilder/form/form.js

@@ -0,0 +1,455 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import * as FC from './formcomponents';
+import * as FV from './formvalidations';
+import { generateKey, capitalize, attributeMap } from '../../utilities/functions';
+import './form.css';
+const debug = false;
+/* ===== FORM ENGINE =====
+Generate all the elements to display a form */
+FormEngine.propTypes = {
+    name: PropTypes.string,
+    id: PropTypes.string,
+    method: PropTypes.string,
+    onSubmitHandler: PropTypes.func,
+    formData: PropTypes.object.isRequired
+};
+export function FormEngine(props) {
+    function generateFormProps(props) {
+        // GENERATE PROPS TO RENDER THE FORM CONTAINER, INTERNAL FUNCTION
+        if (debug)
+            console.log("Generating Form Props");
+        const formProps = JSON.parse(JSON.stringify(props));
+        ['formData', 'onSubmitHandler'].forEach(e => delete formProps[e]);
+        return formProps;
+    }
+    generateNewFields.propTypes = {
+        formData: PropTypes.any.isRequired,
+    };
+    function generateNewFields(props) {
+        // CORE OF THE FORM ENGINE - CONVERT JSON TO COMPONENTS - INTERNAL
+        if (debug)
+            console.log("Generating Form Fields");
+        const newFields = [];
+        const formFields = props.formData.fields;
+        if (props.formData && formFields) {
+            // const thisFields = formFields;
+            for (let field = 0; field < formFields.length; field++) {
+                const thisField = formFields[field];
+                const newProps = JSON.parse(JSON.stringify(thisField.props));
+                newProps.key = generateKey();
+                // Convert string numeric props to numbers where needed
+                const numericProps = ['maxLength', 'minLength', 'rows', 'cols', 'size', 'step'];
+                numericProps.forEach(prop => {
+                    if (newProps[prop] !== undefined &&
+                        newProps[prop] !== null &&
+                        newProps[prop] !== '') {
+                        // Only convert if the value is not already a number
+                        if (typeof newProps[prop] === 'string') {
+                            const num = Number(newProps[prop]);
+                            if (!isNaN(num)) {
+                                newProps[prop] = num;
+                            }
+                        }
+                    }
+                });
+                const componentName = thisField.component;
+                const newElementType = FC[componentName];
+                const newElement = React.createElement(newElementType, newProps);
+                newFields.push(newElement);
+            }
+        }
+        return newFields;
+    }
+    function handleSubmit(event) {
+        // HANDLES THE FORM ACTION / FORM SUBMIT - EXPOSED EXTERNAL
+        event.preventDefault();
+        if (props.onSubmitHandler)
+            props.onSubmitHandler(event);
+        return true;
+    }
+    return (_jsx("form", { ...generateFormProps(props), onSubmit: (event) => { handleSubmit(event); }, suppressHydrationWarning: true, children: generateNewFields(props) }));
+}
+/* =====  FORM BUILDER =====
+Display all the components for a Form Builder -
+Element Buttons, Element Details, and the Form */
+function mapTypeToComponent(myType) {
+    if (debug)
+        console.log("Mapping Type Field to Component");
+    let myComponent = (["button"].includes(myType)) ? 'FormButton' :
+        (["checkbox"].includes(myType)) ? 'FormCheckbox' :
+            (["datalist"].includes(myType)) ? 'FormDataList' :
+                (["radio"].includes(myType)) ? 'FormRadio' :
+                    (["select"].includes(myType)) ? 'FormSelect' :
+                        (["textarea"].includes(myType)) ? 'FormTextarea' :
+                            "FormInput";
+    return myComponent;
+}
+export function FormBuilder() {
+    const [formData, setFormData] = useState({});
+    const [fieldFormData, setFieldFormData] = useState({});
+    function appendFormData(event) {
+        // APPEND JSON FOR NEW FIELD TO EXISTING JSON CONFIG OBJECT - EXPOSED EXTERNAL
+        if (debug)
+            console.log("Appending form Data...");
+        const props = {};
+        const target = event.target;
+        for (const prop in target) {
+            const thisProp = target[prop];
+            if (thisProp && thisProp.value && (thisProp.value !== Object(thisProp.value))) {
+                props[thisProp.name] = thisProp.value;
+            }
+        }
+        const field = {};
+        field.props = props;
+        field.component = mapTypeToComponent(field.props.type);
+        let fields = [];
+        if (Object.keys(formData).length > 0) {
+            fields = JSON.parse(JSON.stringify(formData.fields));
+        }
+        fields[fields.length] = field;
+        setFormData({ fields: fields });
+        setFieldFormData({});
+        return (field);
+    }
+    /* function getCircularReplacer() {
+        const seen = new WeakSet();
+        return (key, value) => {
+            if (typeof value === 'object' && value !== null) {
+                if (seen.has(value)) {
+                    return ; // return undefined ;
+                }
+                seen.add(value);
+            }
+            return value;
+        };
+    } */
+    return (_jsxs("div", { className: "section-container", children: [_jsxs("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: [_jsx(FormBuild, { setFormData: setFieldFormData }), _jsx("div", {}), _jsx(FormEngine, { name: "field_props", id: "field_props", onSubmitHandler: appendFormData, formData: fieldFormData })] }), _jsx("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: _jsx("pre", { style: { width: '100%' }, children: JSON.stringify(formData, null, 2) }) }), _jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {})] }), _jsx("div", { style: { display: 'block', verticalAlign: 'top' }, children: _jsx(FormEngine, { formData: formData || {} }) })] }));
+}
+/*
+===== FORM BUILD =====
+Dynamically generate, component by component, and prop by prop,
+the JSON to create a form via FormEngine
+*/
+FormBuild.propTypes = {
+    setFormData: PropTypes.func.isRequired,
+};
+export function FormBuild(props) {
+    function generateFieldJSON(component, type) {
+        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - INTERNAL
+        if (debug)
+            console.log("Generating Form JSON for ", component, " Type : ", type);
+        const form = { fields: [] };
+        let i = 0;
+        for (const prop in FC[component].propTypes) {
+            const field = {};
+            field.component = 'FormInput';
+            const props = {};
+            props.label = prop;
+            props.name = prop;
+            props.id = prop;
+            props.type = 'text';
+            if (prop === 'type') {
+                props.disabled = true;
+                props.value = type;
+                props.list = 'inputTypes';
+            }
+            field.props = props;
+            form.fields[i] = field;
+            i++;
+        }
+        const addButton = {
+            component: 'FormButton',
+            props: {
+                label: 'Add ' + component,
+                type: 'submit',
+                id: 'Add ' + component,
+                text: 'Add ' + component
+            }
+        };
+        form.fields[i] = addButton;
+        return (form);
+    }
+    function handlePhaseOneSubmit(event) {
+        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - EXTERNAL
+        const target = event.target;
+        const myType = target.type.value;
+        const myComponent = mapTypeToComponent(myType);
+        const fieldJSON = generateFieldJSON(myComponent, myType);
+        props.setFormData(fieldJSON);
+        return true;
+    }
+    function generateTypeField() {
+        const form = {};
+        const typeField = {
+            component: 'FormInput',
+            props: {
+                label: 'Type : ',
+                name: 'type',
+                id: 'type',
+                type: 'text',
+                list: 'inputTypes'
+            }
+        };
+        const addButton = {
+            component: 'FormButton',
+            props: {
+                label: 'Build',
+                type: 'submit',
+                id: 'build',
+                text: '===  Build  ==='
+            }
+        };
+        form.fields = [typeField, addButton];
+        return (form);
+    }
+    return (_jsx(_Fragment, { children: _jsx(FormEngine, { formData: generateTypeField(), onSubmitHandler: event => { handlePhaseOneSubmit(event); }, name: "build", id: "build", method: "post" }) }));
+}
+/*
+===== FORM EXTRACT =====
+Submit a page URL of a form to extract all form elements and
+convert them to JSON to create a form via FormEngine
+*/
+FormExtractor.propTypes = {
+    url: PropTypes.string
+};
+export function FormExtractor(props) {
+    const [url, setURL] = useState(props.url || "");
+    const [htmlPaste, setHtmlPaste] = useState();
+    const [formData, setFormData] = useState({});
+    setParentState.propTypes = {
+        url: PropTypes.string.isRequired,
+        htmlPaste: PropTypes.string.isRequired,
+    };
+    function setParentState(childState) {
+        // SET STATE FROM PARENT VALUES - EXPOSED EXTERNAL
+        if (debug)
+            console.log("Setting Parent State...");
+        setURL(childState.url);
+        setHtmlPaste(childState.htmlPaste);
+    }
+    return (_jsxs("div", { children: [_jsx("div", { className: "section-container", children: _jsx(FormExtractUI, { setParentState: setParentState }) }), _jsxs("div", { className: "section-container", children: [_jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {})] }), _jsx("div", { className: "section-container", children: _jsx(FormExtractEngine, { url: url, htmlPaste: htmlPaste, setFormData: setFormData }) }), _jsxs("div", { className: "section-container", children: [_jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {})] }), _jsx("div", { className: "section-container", children: _jsx(FormEngine, { formData: formData }) })] }));
+}
+FormExtractUI.propTypes = {
+    setParentState: PropTypes.func.isRequired
+};
+export function FormExtractUI(props) {
+    const [url, setURL] = useState();
+    const [htmlPaste, setHtmlPaste] = useState();
+    function onChange(event) {
+        // UPDATE URL OR HTML_PASTE ON CHANGE - EXTERNAL
+        if (debug)
+            console.log("Element Changed...");
+        const target = event.target;
+        if (target.name == "url") {
+            setURL(target.value);
+        }
+        else if (target.name == "htmlPaste") {
+            setHtmlPaste(target.value);
+        }
+    }
+    function onSubmit() {
+        // SET PARENT STATE WITH URL OR HTML PASTE - EXTERNAL
+        if (debug)
+            console.log("Form Submitted...");
+        props.setParentState({ url: url, htmlPaste: htmlPaste });
+    }
+    return (_jsxs("form", { onSubmit: e => { e.preventDefault(); }, method: "post", name: "extract", children: [_jsx("label", { htmlFor: "url", children: "URL : " }), _jsx("input", { type: "text", list: "form_urls", id: "url", name: "url", size: 100, onChange: onChange }), _jsx(FC.FormDataList, { id: 'form_urls', items: FV.formURLs }), _jsx("div", { style: { width: '100%', textAlign: 'center' }, children: "OR" }), _jsx("label", { htmlFor: "htmlPaste", children: "HTML : " }), _jsx("textarea", { id: "htmlPaste", name: "htmlPaste", rows: 10, cols: 80, onChange: onChange }), _jsx("br", {}), _jsxs("div", { style: { width: '100%', textAlign: 'center' }, children: [_jsx("button", { type: "button", onClick: onSubmit, children: "Extract" }), _jsx("input", { type: "reset" })] })] }));
+}
+FormExtractEngine.propTypes = {
+    url: PropTypes.string,
+    htmlPaste: PropTypes.string,
+    setFormData: PropTypes.func.isRequired
+};
+export function FormExtractEngine(props) {
+    const proxy = 'https://proxy.pixelated.tech/prod/proxy?url=';
+    // const proxy = "https://x3cf4kv0nk.execute-api.us-east-2.amazonaws.com/prod/proxy?url=";
+    // const proxy = "https://thingproxy.freeboard.io/fetch/";
+    const [url, setURL] = useState(props.url);
+    const [htmlPaste, setHtmlPaste] = useState(props.htmlPaste);
+    const [formJson, setFormJson] = useState();
+    function extractOptions(thisElement) {
+        // GENERATE OPTIONS FOR SELECT FIELD - INTERNAL
+        if (debug)
+            console.log("Extracting Options...");
+        if (thisElement.tagName.toLowerCase() === 'select' && thisElement.options && thisElement.options.length) {
+            const options = [];
+            for (let option = 0; option < thisElement.options.length; option++) {
+                const thisOption = thisElement.options[option];
+                const attribs = {};
+                for (let attrib = 0; attrib < thisOption.attributes.length; attrib++) {
+                    const thisAttrib = thisOption.attributes[attrib];
+                    attribs[attributeMap(thisAttrib.name)] = thisAttrib.value;
+                }
+                if (thisOption.innerText)
+                    attribs.text = thisOption.innerText;
+                if (Object.keys(attribs).length > 0)
+                    options.push(attribs); // not empty then add
+            }
+            if (options.length > 0)
+                return options;
+        }
+        return false;
+    }
+    function extractSelectedOptions(thisOptions) {
+        if (debug)
+            console.log("Extracting Selected Options...");
+        // GENERATE LIST OF SELECTED OPTIONS FOR SELECT FIELD - INTERNAL
+        if (thisOptions && thisOptions.length) {
+            const selected = [];
+            for (let option = 0; option < thisOptions.length; option++) {
+                const thisOption = thisOptions[option];
+                if (Object.prototype.hasOwnProperty.call(thisOption, 'selected')) {
+                    selected.push(thisOption.value);
+                    delete thisOptions[option].selected;
+                }
+            }
+            // MULTIPLE - Return array
+            if (selected.length > 1)
+                return selected;
+            // Not Multiple = return string
+            if (selected.length === 1)
+                return selected.toString();
+        }
+        return false;
+    }
+    function extractAttribs(thisElement) {
+        if (debug)
+            console.log("Extracting Attributes...");
+        // EXTRACT ALL ATTRIBUTES FOR A FORM ELEMENT - INTERNAL
+        // LOOK AT THAT - JAVASCRIPT REFLECTION!
+        if (thisElement && thisElement.attributes && thisElement.attributes.length) {
+            const props = {};
+            for (let attrib = 0; attrib < thisElement.attributes.length; attrib++) {
+                const thisAttrib = thisElement.attributes[attrib];
+                if (thisAttrib.name === 'style') {
+                    // Do not gather styles
+                }
+                else if (['disabled', 'multiple', 'readonly', 'required', 'selected'].indexOf(thisAttrib.name.toLowerCase()) > -1) {
+                    // Flag type Attributes
+                    props[attributeMap(thisAttrib.name)] = attributeMap(thisAttrib.name);
+                }
+                else if (thisAttrib && thisAttrib.name && thisAttrib.value) {
+                    // use attributeMap to map html props to React props
+                    props[attributeMap(thisAttrib.name)] = thisAttrib.value;
+                }
+            }
+            if (Object.keys(props).length > 0)
+                return props;
+        }
+        return false;
+    }
+    function extractLabel(html, thisElement) {
+        // IDENTIFY AND EXTRACT LABEL PROPERTIES FOR A SPECIFIC FIELD - INTERNAL
+        if (debug)
+            console.log("Extracting Label...");
+        const myElement = thisElement.attributes.getNamedItem('id');
+        if (myElement && myElement.value) {
+            const thisID = myElement.value;
+            const thisLabel = html.querySelector("label[for='" + thisID + "']");
+            if (thisLabel)
+                return thisLabel;
+        }
+        return false;
+    }
+    function formToJSON(html) {
+        // CONVERT HTML TO CONFIG JSON - INTERNAL
+        if (debug)
+            console.log("Converting Form to JSON...");
+        const json = {};
+        json.fields = [];
+        const forms = html.getElementsByTagName('form');
+        // ----- FORMS
+        for (let form = 0; form < forms.length; form++) {
+            const thisForm = forms[form];
+            if (Object.keys(thisForm).length > 0) {
+                // ----- ELEMENTS
+                for (let element = 0; element < thisForm.elements.length; element++) {
+                    const thisElement = thisForm[element];
+                    const elem = {};
+                    if (thisElement && thisElement.attributes && thisElement.tagName) {
+                        // ----- COMPONENT
+                        elem.component = 'Form' + capitalize(thisElement.tagName);
+                        let props = {};
+                        // ----- ELEMENT ATTRIBUTES
+                        const thisProps = extractAttribs(thisElement);
+                        if (thisProps)
+                            props = thisProps;
+                        // ----- ELEMENT OPTIONS
+                        const thisOptions = extractOptions(thisElement);
+                        if (thisOptions) {
+                            // only true for SELECT elements
+                            const thisSelected = extractSelectedOptions(thisOptions);
+                            if (thisSelected)
+                                props.defaultValue = thisSelected;
+                            props.options = thisOptions;
+                        }
+                        else {
+                            // get innerText on all but SELECT elements
+                            if (thisElement.innerText)
+                                props.text = thisElement.innerText;
+                        }
+                        elem.props = props;
+                        // ----- LABEL
+                        const thisLabel = extractLabel(html, thisElement);
+                        if (thisLabel) {
+                            elem.props.label = (thisLabel.innerText || thisLabel.textContent);
+                        }
+                    }
+                    if (Object.keys(elem).length > 0)
+                        json.fields.push(elem);
+                }
+            }
+        }
+        return json;
+    }
+    function getHTML(url, callback) {
+        // GET SERVER SIDE HTML THROUGH XMLHTTPREQUEST - INTERNAL
+        if (debug)
+            console.log("Getting HTML From URL...");
+        const xhr = new XMLHttpRequest();
+        // xhr.onreadystatechange = (e) => {
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                const json = callback(xhr.responseXML);
+                setFormJson(json);
+                props.setFormData(json);
+            }
+        };
+        xhr.open('GET', url);
+        xhr.responseType = 'document';
+        xhr.send(null);
+    }
+    useEffect(() => {
+        if (debug)
+            console.log("Component Is Mounted...");
+        if (props.url) {
+            const newURL = proxy + props.url;
+            if (!url || (props.url !== url)) {
+                setURL(props.url);
+                getHTML(newURL, formToJSON);
+            }
+            else if (url && !formJson) {
+                getHTML(newURL, formToJSON);
+            }
+        }
+        else if (props.htmlPaste) {
+            let json = {};
+            if (!htmlPaste || (props.htmlPaste !== htmlPaste)) {
+                setHtmlPaste(props.htmlPaste);
+                const thisHTML = new DOMParser().parseFromString(props.htmlPaste, 'text/html');
+                json = formToJSON(thisHTML);
+                setFormJson(json);
+                props.setFormData(json);
+            }
+            else if (htmlPaste && !formJson) {
+                const thisHTML = new DOMParser().parseFromString(htmlPaste, 'text/html');
+                json = formToJSON(thisHTML);
+                setFormJson(json);
+                props.setFormData(json);
+            }
+        }
+    }); // no dependencies = run on every render
+    return (_jsx("div", { children: _jsx("pre", { id: 'formJson', children: JSON.stringify(formJson, null, 2) }) }));
+}

package/dist/components/pagebuilder/form/form.submit.js

@@ -0,0 +1,65 @@
+/*
+event.target.id = form id
+event.body : {
+to: "",
+from: "",
+subject: ""
+}
+*/
+export async function emailFormData(e, callback) {
+    // const sendmail_api = "https://nlbqdrixmj.execute-api.us-east-2.amazonaws.com/default/sendmail";
+    const sendmail_api = "https://sendmail.pixelated.tech/default/sendmail";
+    const target = e.target;
+    const myform = document.getElementById(target.id);
+    e.preventDefault();
+    const myFormData = {};
+    const formData = new FormData(myform);
+    for (const [key, value] of formData.entries()) {
+        myFormData[key] = value;
+    }
+    myFormData.Date = new Date().toLocaleDateString();
+    myFormData.Status = "Submitted";
+    await fetch(sendmail_api, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(myFormData),
+    })
+        .then((response) => {
+        if (response.status !== 200) {
+            throw new Error(response.statusText);
+        }
+        return response.json();
+    });
+    callback(e);
+}
+export async function emailJSON(jsonData, callback) {
+    // const sendmail_api = "https://nlbqdrixmj.execute-api.us-east-2.amazonaws.com/default/sendmail";
+    const sendmail_api = "https://sendmail.pixelated.tech/default/sendmail";
+    const myJsonData = {};
+    for (const [key, value] of Object.entries(jsonData)) {
+        myJsonData[key] = value;
+    }
+    myJsonData.Date = new Date().toLocaleDateString();
+    myJsonData.Status = "Submitted";
+    await fetch(sendmail_api, {
+        method: 'POST',
+        mode: 'cors',
+        headers: {
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(myJsonData),
+    })
+        .then(async (response) => {
+        if (response.status !== 200) {
+            throw new Error(response.statusText);
+        }
+        return await response.json();
+    });
+    if (callback)
+        callback();
+}