@pixelated-tech/components 3.2.14 → 3.3.1

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

@@ -0,0 +1,380 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { validateField } from "./formvalidator";
+import { useFormValidation } from "./formvalidator";
+import * as FVF from "./formfieldvalidations";
+import { FontSelector } from "../config/FontSelector";
+import { CompoundFontSelector } from "../config/CompoundFontSelector";
+import "./form.css";
+/*
+InferProps to generate Types
+https://amanhimself.dev/blog/prop-types-in-react-and-typescript/#inferring-proptypes-in-typescript
+*/
+// Shared helper to setup input props for form components
+const setupInputProps = (props, display) => {
+    // Clone props efficiently using destructuring instead of JSON.parse/stringify
+    let inputProps = { ...props };
+    // Remove props that shouldn't go to DOM
+    inputProps = Object.fromEntries(Object.entries(inputProps).filter(([key]) => !['display', 'label', 'listItems', 'validate', 'options', 'parent', 'text', 'checked'].includes(key)));
+    // Set className based on display mode
+    inputProps["className"] = (display == "vertical") ? "displayVertical" : "";
+    // Handle controlled vs uncontrolled inputs properly
+    // If value is provided, use it for controlled behavior
+    // Otherwise, use defaultValue for uncontrolled behavior
+    if (props.value !== undefined) {
+        inputProps["value"] = props.value;
+        // Remove defaultValue if value is present to avoid conflicts
+        delete inputProps["defaultValue"];
+    }
+    else if (props.defaultValue !== undefined) {
+        inputProps["defaultValue"] = props.defaultValue;
+    }
+    // For radio buttons, prioritize defaultChecked over checked to let browser handle state
+    // This prevents React's "both checked and defaultChecked" error
+    if (props.type === 'radio' || (props.parent && props.parent.type === 'radio')) {
+        if (props.checked !== undefined) {
+            delete inputProps["checked"];
+        }
+    }
+    return inputProps;
+};
+// Custom hook for common form component logic
+const useFormComponent = (props) => {
+    const [validationState, setValidationState] = useState({ isValid: true, errors: [] });
+    const { validateField: validateFormField } = useFormValidation();
+    // Handle onChange for immediate feedback
+    const handleChange = (event) => {
+        // Determine the value (checkbox vs other)
+        const value = event.target.type === 'checkbox' ? (event.target.checked ? event.target.value : '') : event.target.value;
+        // Call custom onChange handler synchronously so controlled inputs update immediately
+        const customOnChange = props.onChange || (props.parent && props.parent.onChange);
+        if (customOnChange) {
+            try {
+                customOnChange(value);
+            }
+            catch {
+                // swallow handler errors to avoid breaking validation flow
+            }
+        }
+    };
+    // Handle onBlur for full validation
+    const handleBlur = (event) => {
+        validateField(props, event).then(result => {
+            setValidationState(result);
+            if (props.id) {
+                validateFormField(props.id, result.isValid, result.errors);
+            }
+        });
+    };
+    const formValidate = _jsx(FormTooltip, { id: `${props.id}-validate`, mode: "validate", text: validationState.errors });
+    const inputProps = setupInputProps(props, props.display);
+    // Add validation event handlers
+    inputProps["onChange"] = handleChange;
+    inputProps["onBlur"] = handleBlur;
+    inputProps["onInput"] = handleChange; // Also handle onInput for tests
+    return { validationState, formValidate, inputProps, handleChange, handleBlur };
+};
+// Helper function for generating options (used by FormSelect, FormRadio, FormCheckbox)
+const generateOptions = (options, parentProps, prefix, optionComponent) => {
+    let result = [];
+    for (let option in options) {
+        let key = option;
+        let thisOption = options[key];
+        // Create parent object without options to avoid circular references
+        const parentWithoutOptions = Object.fromEntries(Object.entries(parentProps).filter(([key]) => key !== 'options'));
+        thisOption.parent = { ...parentWithoutOptions };
+        let thisKey = prefix + "-" + parentProps.id + "-" + thisOption.value;
+        let newOption = React.createElement(optionComponent, { key: thisKey, ...thisOption });
+        result.push(newOption);
+    }
+    return result;
+};
+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.arrayOf(PropTypes.string).isRequired,
+    className: PropTypes.string,
+    mode: PropTypes.oneOf(['tooltip', 'validate']),
+};
+FormTooltip.defaultProps = {
+    id: "",
+    mode: 'tooltip',
+};
+function FormTooltip(props) {
+    const mode = props.mode || 'tooltip';
+    if (mode === 'validate' && props.text.length <= 0) {
+        return null;
+    }
+    const [showTooltip, setShowTooltip] = useState(false);
+    const content = props.text.map((item, index) => (_jsx("div", { className: "tooltip-text-item", children: item }, index)));
+    const toggleTooltip = () => setShowTooltip(!showTooltip);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleTooltip();
+        }
+    };
+    const modeIcons = {
+        tooltip: 'ⓘ', // U+24D8
+        validate: '❌' // U+274C
+    };
+    let icon = modeIcons[mode];
+    let mouseEvents = {
+        onMouseEnter: () => setShowTooltip(true),
+        onMouseLeave: () => setShowTooltip(false),
+    };
+    let clickHandler = toggleTooltip;
+    return (_jsx(_Fragment, { children: _jsxs("div", { id: mode + "-" + props.id, className: `tooltip-container ${props.className || ''}`, children: [_jsx("span", { className: "tooltip-icon tooltip-icon-" + mode, ...mouseEvents, onClick: clickHandler, onKeyDown: handleKeyDown, "aria-label": "Show more info", "aria-expanded": showTooltip, "aria-describedby": showTooltip ? `${props.id}-tooltip` : undefined, tabIndex: 0, role: "button", children: icon }), showTooltip && _jsx("div", { className: "tooltip-text", role: "tooltip", id: `${props.id}-tooltip`, children: content })] }) }));
+}
+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,
+    onChange: PropTypes.func,
+};
+export function FormInput(props) {
+    const { formValidate, inputProps } = useFormComponent(props);
+    let formDataList = props.list && props.list in FVF
+        ? FVF[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,
+    onChange: PropTypes.func,
+};
+export function FormSelect(props) {
+    const { formValidate, inputProps } = useFormComponent(props);
+    const options = generateOptions(props.options || [], props, "select", FormSelectOption);
+    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: options }), props.display != "vertical" ? formValidate : ""] }));
+}
+FormSelectOption.propTypes = {
+    text: PropTypes.string,
+    value: PropTypes.string,
+    // flag attributes
+    disabled: PropTypes.bool,
+    // selected : PropTypes.string
+};
+function FormSelectOption(props) {
+    const { text, disabled, value, ...otherProps } = props;
+    const inputProps = {
+        ...otherProps,
+        ...(disabled !== null && disabled !== undefined ? { disabled } : {}),
+        ...(value !== null && value !== undefined ? { value } : {})
+    };
+    return (_jsx("option", { ...inputProps, children: 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,
+    onChange: PropTypes.func,
+};
+export function FormTextarea(props) {
+    const { formValidate, inputProps } = useFormComponent(props);
+    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,
+    onChange: PropTypes.func,
+};
+export function FormRadio(props) {
+    const { formValidate } = useFormComponent(props);
+    const options = generateOptions(props.options || [], props, "radio", FormRadioOption);
+    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 : "", options, props.display != "vertical" ? formValidate : ""] }));
+}
+FormRadioOption.propTypes = {
+    name: PropTypes.string,
+    text: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    // flag attributes
+    checked: PropTypes.string,
+    // ----- for calculations
+    parent: PropTypes.any,
+};
+function FormRadioOption(props) {
+    const inputProps = setupInputProps(props);
+    const isChecked = props.parent.checked === props.value;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const handleChange = (e) => {
+        if (props.parent.onChange) {
+            props.parent.onChange(props.value);
+        }
+    };
+    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, checked: isChecked, onChange: handleChange, required: !!props.parent.required, ...inputProps }), _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,
+    onChange: PropTypes.func,
+};
+export function FormCheckbox(props) {
+    const { formValidate } = useFormComponent(props);
+    const options = generateOptions(props.options || [], props, "checkbox", FormCheckboxOption);
+    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 : "", options, props.display != "vertical" ? formValidate : ""] }));
+}
+FormCheckboxOption.propTypes = {
+    text: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    // flag attributes
+    selected: PropTypes.string,
+    // ----- for calculations
+    parent: PropTypes.any,
+};
+function FormCheckboxOption(props) {
+    const inputProps = setupInputProps(props);
+    const isChecked = props.parent.checked ? props.parent.checked.includes(props.value) : false;
+    const handleChange = (e) => {
+        if (props.parent.onChange) {
+            const currentChecked = props.parent.checked || [];
+            let newChecked;
+            if (e.target.checked) {
+                newChecked = [...currentChecked, props.value];
+            }
+            else {
+                newChecked = currentChecked.filter((val) => val !== props.value);
+            }
+            props.parent.onChange(newChecked);
+        }
+    };
+    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, checked: isChecked, onChange: handleChange, ...inputProps }), _jsx("label", { htmlFor: props.parent.name + "_" + 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, {}));
+}
+// Re-export FontSelector for use in forms
+export { FontSelector, CompoundFontSelector };

package/dist/components/sitebuilder/form/formengine.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as FC from './formcomponents';
+import { generateKey } from './formutils';
+import { FormValidationProvider, useFormValidation } from './formvalidator';
+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
+};
+function FormEngineInner(props) {
+    const { validateAllFields } = useFormValidation();
+    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];
+                // Shallow clone props to preserve function handlers (JSON stringify drops functions)
+                const newProps = { ...thisField.props };
+                newProps.key = thisField.props.id || 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();
+        // Check if form is valid before submission
+        if (!validateAllFields()) {
+            // Form has validation errors, don't submit
+            return false;
+        }
+        if (props.onSubmitHandler)
+            props.onSubmitHandler(event);
+        return true;
+    }
+    return (_jsx("form", { ...generateFormProps(props), onSubmit: (event) => { handleSubmit(event); }, suppressHydrationWarning: true, children: generateNewFields(props) }));
+}
+export function FormEngine(props) {
+    return (_jsx(FormValidationProvider, { children: _jsx(FormEngineInner, { ...props }) }));
+}