@pixelated-tech/components 3.1.4

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

@@ -0,0 +1,359 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import { SmartImage } from "../../cms/cloudinary.image";
+import { usePixelatedConfig } from "../../config/config.client";
+import * as FV from "./formvalidations";
+import "./form.css";
+/*
+InferProps to generate Types
+https://amanhimself.dev/blog/prop-types-in-react-and-typescript/#inferring-proptypes-in-typescript
+*/
+const onChange = (me, event) => {
+    // TEST VALUES
+    let myValidate = (typeof me.props.validate === "string" && me.props.validate in FV)
+        ? FV[me.props.validate](event.target)
+        : true;
+    let myParentValidate = me.props.parent && me.props.parent.validate
+        ? FV[me.props.parent.validate](event.target)
+        : true;
+    let myRequired = me.props.required ? event.target.checkValidity() : true;
+    let myRequiredNotEmpty = (me.props.required && (!event.target.value)) ? false : true;
+    // RETURN VALUES
+    Promise.all([myValidate, myParentValidate, myRequired, myRequiredNotEmpty])
+        .then((result) => {
+        let myValid = (result[0] && result[1] && result[2] && result[3]) ? true : false;
+        if (me.props.setIsValid)
+            me.props.setIsValid(myValid);
+        if (me.props.parent && me.props.parent.setIsValid)
+            me.props.parent.setIsValid(myValid);
+        return true;
+    });
+};
+FormLabel.propTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+};
+FormLabel.defaultProps = {
+    id: "",
+    label: "",
+    tooltip: "",
+};
+function FormLabel(props) {
+    return (_jsxs(_Fragment, { children: [props.label && props.id
+                ? _jsx("label", { className: props.className || '', id: `lbl-${props.id}`, htmlFor: props.id, children: props.label })
+                : "", props.tooltip
+                ? _jsx(FormTooltip, { id: props.id, text: props.tooltip })
+                : ""] }));
+}
+FormTooltip.propTypes = {
+    id: PropTypes.string,
+    text: PropTypes.string,
+    className: PropTypes.string,
+};
+FormTooltip.defaultProps = {
+    id: "",
+    text: "",
+};
+function FormTooltip(props) {
+    function toggleTooltip(e) {
+        e.preventDefault();
+        const target = e.currentTarget;
+        const nextSibling = target.nextSibling;
+        if (nextSibling) {
+            if (nextSibling.style.display === "block") {
+                nextSibling.style.display = "none";
+            }
+            else {
+                nextSibling.style.display = "block";
+            }
+        }
+        return false;
+    }
+    // ℹ	8505	2139	 	INFORMATION SOURCE
+    // ⚠	9888	26A0	 	WARNING SIGN
+    // 				24BE		I IN CIRCLE
+    // {'\u2139'}
+    let thisID = "tooltip-" + props.id;
+    const config = usePixelatedConfig();
+    let tooltipImg = _jsx(SmartImage, { src: "/images/icons/tooltip-icon-2.png", title: props.id + " - " + props.text, alt: props.id + " - " + props.text, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined });
+    /* <img title={props.id + " - " + props.text}
+        alt={props.id + " - " + props.text}
+        src="/images/icons/tooltip-icon-2.png" /> */
+    return (_jsx(_Fragment, { children: props.text && props.id
+            ? _jsx(_Fragment, { children: _jsxs("div", { id: thisID, className: `tooltip ${props.className || ''}`, children: [_jsx("a", { href: "#", className: "tooltipIcon", onClick: toggleTooltip, children: tooltipImg }), _jsx("div", { className: "tooltipText", children: props.text })] }) })
+            : "" }));
+}
+FormValidate.propTypes = {
+    id: PropTypes.string.isRequired,
+    valid: PropTypes.bool,
+};
+function FormValidate(props) {
+    return (_jsx(_Fragment, { children: !props.valid ?
+            _jsx("span", { id: props.id, children: props.valid ? "\u2705" : "\u274C" }) : "" }));
+}
+FormInput.propTypes = {
+    type: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    defaultValue: PropTypes.string,
+    value: PropTypes.string,
+    list: PropTypes.string,
+    listItems: PropTypes.string, /* this one is mine */
+    size: PropTypes.string,
+    maxLength: PropTypes.string,
+    placeholder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    "aria-label": PropTypes.string,
+    min: PropTypes.string,
+    max: PropTypes.string,
+    step: PropTypes.string,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // className, 
+    // data-mapping, data-component-endpoint, data-testid
+    // aria-invalid, aria-describedby, 
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+};
+export function FormInput(props) {
+    const [isValid, setIsValid] = useState(true);
+    let formValidate = _jsx(FormValidate, { id: `${props.id}-validate`, valid: isValid });
+    // ----- Input Props
+    let inputProps = JSON.parse(JSON.stringify(props));
+    ["display", "label", "listItems", "validate"].forEach(e => delete inputProps[e]);
+    inputProps["onChange"] = (e) => onChange({ props: { ...props, isValid: isValid, setIsValid: setIsValid } }, e);
+    inputProps["className"] = (props.display == "vertical") ? "displayVertical" : "";
+    if (["submit", "button"].indexOf(props.type ?? "") > -1) {
+        inputProps["value"] = props.value;
+    }
+    ;
+    let formDataList = props.list && props.list in FV
+        ? FV[props.list]
+        : props.list && props.listItems
+            ? props.listItems.split(',')
+            : undefined;
+    return (_jsxs("div", { children: [props.type == "checkbox" ? _jsx("input", { ...inputProps }) : "", _jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: props.tooltip }) : "", props.display == "vertical" ? formValidate : "", props.type != "checkbox" ? _jsx("input", { ...inputProps }) : "", formDataList && Array.isArray(formDataList) ? _jsx(FormDataList, { id: props.list ?? '', items: formDataList }) : "", props.display != "vertical" ? formValidate : ""] }));
+}
+FormSelect.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    size: PropTypes.string,
+    autoComplete: PropTypes.string,
+    defaultValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.array
+    ]),
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    multiple: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // selected: PropTypes.string, // not used
+    // ----- for calculations
+    options: PropTypes.array,
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+};
+export function FormSelect(props) {
+    const [isValid, setIsValid] = useState(true);
+    function generateOptions() {
+        let options = [];
+        for (let option in props.options) {
+            let key = option;
+            let thisOption = props.options[key];
+            let thisKey = "select-" + props.id + "-" + thisOption.value;
+            let newOption = _jsx(FormSelectOption, { ...thisOption, parent: { isValid: isValid, setisValid: setIsValid } }, thisKey);
+            options.push(newOption);
+        }
+        return options;
+    }
+    let formValidate = _jsx(FormValidate, { id: `${props.id}-validate`, valid: isValid });
+    // ----- Input Props
+    let inputProps = JSON.parse(JSON.stringify(props));
+    ["options", "display", "label", "validate"].forEach(e => delete inputProps[e]);
+    inputProps["onChange"] = (e) => onChange({ props: { ...props, isValid: isValid, setIsValid: setIsValid } }, e);
+    inputProps["className"] = (props.display == "vertical") ? "displayVertical" : "";
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: props.tooltip }) : "", props.display == "vertical" ? formValidate : "", _jsx("select", { ...inputProps, suppressHydrationWarning: true, children: generateOptions() }), props.display != "vertical" ? formValidate : ""] }));
+}
+FormSelectOption.propTypes = {
+    text: PropTypes.string,
+    value: PropTypes.string,
+    // flag attributes
+    disabled: PropTypes.string,
+    // selected : PropTypes.string
+};
+function FormSelectOption(props) {
+    let inputProps = JSON.parse(JSON.stringify(props));
+    ["selected"].forEach(e => delete inputProps[e]);
+    return (_jsx("option", { ...inputProps, children: props.text }));
+}
+FormTextarea.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    rows: PropTypes.string,
+    cols: PropTypes.string,
+    defaultValue: PropTypes.string,
+    maxLength: PropTypes.number,
+    placeholder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+};
+export function FormTextarea(props) {
+    const [isValid, setIsValid] = useState(true);
+    let formValidate = _jsx(FormValidate, { id: `${props.id}-validate`, valid: isValid });
+    // ----- Input Props
+    let inputProps = JSON.parse(JSON.stringify(props));
+    ["display", "label", "validate"].forEach(e => delete inputProps[e]);
+    inputProps["onChange"] = (e) => onChange({ props: { ...props, isValid: isValid, setIsValid: setIsValid } }, e);
+    inputProps["className"] = (props.display == "vertical") ? "displayVertical" : "";
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: props.tooltip }) : "", props.display == "vertical" ? formValidate : "", _jsx("textarea", { ...inputProps }), props.display != "vertical" ? formValidate : ""] }));
+}
+FormRadio.propTypes = {
+    id: PropTypes.string.isRequired, // not using?
+    name: PropTypes.string.isRequired,
+    options: PropTypes.array,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // ? selected: PropTypes.string,
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    validate: PropTypes.string,
+};
+export function FormRadio(props) {
+    const [isValid, setIsValid] = useState(true);
+    function generateOptions() {
+        let options = [];
+        for (var option in props.options) {
+            let key = option;
+            let thisOption = props.options[key];
+            thisOption.setIsValid = setIsValid;
+            thisOption.parent = { ...props };
+            thisOption.parent.isValid = isValid;
+            thisOption.parent.setIsValid = setIsValid;
+            let thisKey = "radio-" + props.id + "-" + thisOption.value;
+            let newOption = _jsx(FormRadioOption, { ...thisOption }, thisKey);
+            options.push(newOption);
+        }
+        return options;
+    }
+    let formValidate = _jsx(FormValidate, { id: `${props.id}-validate`, valid: isValid });
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.name, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: props.tooltip }) : "", props.display == "vertical" ? formValidate : "", generateOptions(), props.display != "vertical" ? formValidate : ""] }));
+}
+FormRadioOption.propTypes = {
+    name: PropTypes.string,
+    text: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    // flag attributes
+    checked: PropTypes.string,
+    // ----- for calculations
+    parent: FormRadio,
+    setIsValid: PropTypes.func,
+};
+function FormRadioOption(props) {
+    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "radio", id: `${props.parent.name}-${props.value}`, name: props.parent.name, value: props.value, defaultChecked: !!props.checked, required: !!props.parent.required, onChange: (e) => onChange({ props }, e) }), _jsx("label", { htmlFor: `${props.parent.name}-${props.value}`, children: props.text })] }));
+}
+FormCheckbox.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    options: PropTypes.array,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+};
+export function FormCheckbox(props) {
+    const [isValid, setIsValid] = useState(true);
+    function generateOptions() {
+        let options = [];
+        for (var option in props.options) {
+            let key = option;
+            let thisOption = props.options[key];
+            thisOption.setIsValid = setIsValid;
+            thisOption.parent = { ...props };
+            thisOption.parent.isValid = isValid;
+            thisOption.parent.setIsValid = setIsValid;
+            let thisKey = "checkbox-" + props.name + "-" + thisOption.value;
+            let newOption = _jsx(FormCheckboxOption, { ...thisOption }, thisKey);
+            options.push(newOption);
+        }
+        return options;
+    }
+    let formValidate = _jsx(FormValidate, { id: `${props.id}-validate`, valid: isValid });
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.name, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: props.tooltip }) : "", props.display == "vertical" ? formValidate : "", generateOptions(), props.display != "vertical" ? formValidate : ""] }));
+}
+FormCheckboxOption.propTypes = {
+    text: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    // flag attributes
+    selected: PropTypes.string,
+    // ----- for calculations
+    parent: FormCheckbox,
+    setIsValid: PropTypes.func,
+};
+function FormCheckboxOption(props) {
+    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "checkbox", id: props.parent.name + "_" + props.text, name: props.text, value: props.value, onChange: (e) => onChange({ props }, e) }), _jsx("label", { htmlFor: props.text, children: props.text })] }));
+}
+FormButton.propTypes = {
+    type: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    text: PropTypes.string,
+    // ----- for calculations
+    className: PropTypes.string,
+    onClick: PropTypes.func.isRequired
+};
+export function FormButton(props) {
+    return (_jsx("div", { children: _jsx("button", { type: props.type, id: props.id, className: props.className || "", onClick: props.onClick, children: props.text }) }));
+}
+FormDataList.propTypes = {
+    id: PropTypes.string.isRequired,
+    items: PropTypes.array,
+};
+export function FormDataList(props) {
+    const options = [];
+    for (const item in props.items) {
+        let key = item;
+        const thisItem = props.items[key];
+        const newOption = _jsx("option", { value: thisItem }, props.id + '-' + thisItem);
+        options.push(newOption);
+    }
+    return (_jsx("datalist", { id: props.id, children: options }));
+}
+FormFieldset.propTypes = {};
+export function FormFieldset() {
+    return (_jsx(_Fragment, {}));
+}

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

@@ -0,0 +1,80 @@
+import { validateDiscountCode } from '../../shoppingcart/shoppingcart.functions';
+export const inputTypes = [
+    'button', 'checkbox', 'color', 'date', 'datetime-local', 'email',
+    'file', 'hidden', 'image', 'month', 'number', 'password', 'radio',
+    'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week'
+];
+export const booleans = ['true', 'false'];
+export const formURLs = [
+    'https://www.marriott.com/loyalty/createAccount/createAccountPage1.mi',
+    'https://stackoverflow.com/users/signup',
+    'https://www.google.com',
+    'https://www.hilton.com/en/hilton-honors/join/',
+    'https://www.oakleyforum.com/register/?accountType=1',
+    'https://www.microfocus.com/selfreg/jsp/createAccount.jsp',
+    'https://www.michaels.com/on/demandware.store/Sites-MichaelsUS-Site/default/Account-NewRegistration',
+    'https://reg.usps.com/register'
+];
+export function getAllInvalidFields() {
+    const invalids = [];
+    for (const field of document.querySelectorAll('[required]')) {
+        const inputField = field;
+        if (typeof inputField.reportValidity === 'function' && !inputField.reportValidity()) {
+            invalids.push(inputField.id);
+        }
+    }
+    return invalids;
+}
+export function isOneChecked(field) {
+    const name = field.id.substring(0, field.id.indexOf('_') + 1);
+    const boxes = document.querySelectorAll("[id^='" + name + "']");
+    for (const box of Array.from(boxes)) {
+        const thisBox = box;
+        if (thisBox.checked)
+            return true;
+    }
+    return false;
+}
+export function isOneRadioSelected(field) {
+    const radios = document.getElementsByName(field.name);
+    let isValid = false;
+    for (let i = 0; i < radios.length; i++) {
+        const radioElem = radios[i];
+        if (radioElem.checked)
+            isValid = true;
+    }
+    return isValid;
+}
+export function isValidUSZipCode(field) {
+    const regexStr = /^\d{5}(-\d{4})?$/;
+    const regex = new RegExp(regexStr);
+    return regex.test(field.value); // was match
+}
+export function isValidUSPhoneNumber(field) {
+    const regexStr = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s.]{0,1}[0-9]{3}[-\s.]{0,1}[0-9]{4}$/;
+    const regex = new RegExp(regexStr);
+    return regex.test(field.value); // was match
+}
+export function isValidEmailAddress(field) {
+    // let regex1 = /^(([^<>()[\]\\.,;:\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,}))$/ ;
+    const regexStr = /^\S+@\S+\.\S+$/;
+    const regex = new RegExp(regexStr);
+    const str = String(field.value).toLowerCase();
+    return regex.test(str); // was match
+}
+export function isValidDate(field) {
+    const date = new Date(field.value);
+    return date instanceof Date && !isNaN(date.valueOf());
+}
+export function isValidUrl(field) {
+    try {
+        return Boolean(new URL(field.value));
+    }
+    catch (e) {
+        console.log(e);
+        return false;
+    }
+}
+export function isValidDiscountCode(field) {
+    return validateDiscountCode(field);
+}

package/dist/components/pagebuilder/lib/componentGeneration.js

@@ -0,0 +1,105 @@
+import { componentMap } from './componentMap';
+import { generateFormFieldFromPropType } from './propTypeIntrospection';
+/**
+ * Component Generation Logic
+ * Handles form data extraction and component object creation
+ */
+/**
+ * Extracts component data from form submission event
+ */
+export function generateComponentObject(event) {
+    const props = {};
+    const target = event.target;
+    for (const prop in target) {
+        const thisProp = target[prop];
+        if (thisProp && thisProp.value && (thisProp.value !== Object(thisProp.value))) {
+            let value = thisProp.value;
+            // Try to parse JSON objects
+            if (thisProp.name !== 'type' && value.startsWith('{')) {
+                try {
+                    value = JSON.parse(value);
+                }
+                catch (err) {
+                    console.log('Invalid JSON for prop:', err, thisProp.name, value);
+                    // Keep as string if not valid JSON
+                }
+            }
+            // Convert number strings to numbers
+            if (thisProp.type === 'number') {
+                value = parseFloat(value) || value;
+            }
+            // Convert checkbox values to boolean
+            if (thisProp.type === 'checkbox') {
+                value = thisProp.checked;
+            }
+            props[thisProp.name] = value;
+        }
+    }
+    const parentPath = props.__parentPath;
+    delete props.__parentPath;
+    const newComponent = {
+        component: props.type,
+        props: props,
+        children: [] // Initialize children array for layout components
+    };
+    // Add path for tracking nested structure
+    newComponent.path = parentPath
+        ? `${parentPath}.children[${Date.now()}]`
+        : `root[${Date.now()}]`;
+    return { component: newComponent, parentPath };
+}
+/**
+ * Generates form field configuration for a component
+ */
+export function generateFieldJSON(component, existingProps, parentPath) {
+    const form = { fields: [] };
+    // ADD COMPONENT TYPE FIELD (disabled in phase 2)
+    form.fields.push({
+        component: 'FormInput',
+        props: {
+            label: 'Type:',
+            name: 'type',
+            id: 'type',
+            type: 'text',
+            disabled: true,
+            value: component
+        }
+    });
+    // ADD PARENT PATH (hidden field for nested components)
+    if (parentPath) {
+        form.fields.push({
+            component: 'FormInput',
+            props: {
+                name: '__parentPath',
+                id: '__parentPath',
+                type: 'hidden',
+                value: parentPath
+            }
+        });
+    }
+    // INTROSPECT PROPTYPES TO GENERATE APPROPRIATE FIELDS
+    const componentPropTypes = componentMap[component].propTypes;
+    if (componentPropTypes) {
+        for (const prop in componentPropTypes) {
+            // Skip children as we'll handle that separately for layout components
+            if (prop === 'children')
+                continue;
+            const propType = componentPropTypes[prop];
+            const existingValue = existingProps ? existingProps[prop] : undefined;
+            const field = generateFormFieldFromPropType(prop, propType, existingValue, component);
+            form.fields.push(field);
+        }
+    }
+    // ADD SUBMIT BUTTON
+    const buttonText = existingProps ? 'Update ' + component : 'Add ' + component;
+    form.fields.push({
+        component: 'FormButton',
+        props: {
+            label: buttonText,
+            type: 'submit',
+            id: buttonText,
+            text: buttonText
+        }
+    });
+    return form;
+}

package/dist/components/pagebuilder/lib/componentMap.js

@@ -0,0 +1,32 @@
+import { PageHeader, PageSectionHeader } from "../../general/headers";
+import { Callout } from "../../callout/callout";
+import { PageSection, GridItem, FlexItem } from "../../general/layout";
+/**
+ * Component registry and constants
+ */
+export const componentMap = {
+    "Page Header": PageHeader,
+    "Page Section Header": PageSectionHeader,
+    "Callout": Callout,
+    "Page Section": PageSection,
+    "Grid Item": GridItem,
+    "Flex Item": FlexItem,
+};
+export const layoutComponents = [
+    'Page Section',
+    'Grid Item',
+    'Flex Item'
+];
+export const componentTypes = Object.keys(componentMap).toString();
+/**
+ * Check if a component is a layout component (can have children)
+ */
+export function isLayoutComponent(componentName) {
+    return layoutComponents.includes(componentName);
+}
+/**
+ * Get component type from the registry
+ */
+export function getComponentType(componentName) {
+    return componentMap[componentName];
+}