@pixelated-tech/components 3.2.14 → 3.3.0

package/dist/components/sitebuilder/config/ConfigBuilder.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Tab } from '../../general/tab';
+import { FormEngine } from '../form/formengine';
+import siteInfoForm from '../../../data/siteinfo-form.json';
+import './ConfigBuilder.css';
+const SiteInfoPropTypes = {
+    name: PropTypes.string.isRequired,
+    author: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+    favicon: PropTypes.string.isRequired,
+    favicon_sizes: PropTypes.string.isRequired,
+    favicon_type: PropTypes.string.isRequired,
+    theme_color: PropTypes.string.isRequired,
+    background_color: PropTypes.string.isRequired,
+    default_locale: PropTypes.string.isRequired,
+    display: PropTypes.string.isRequired,
+    image: PropTypes.string,
+    image_height: PropTypes.string,
+    image_width: PropTypes.string,
+    telephone: PropTypes.string,
+    address: PropTypes.shape({
+        streetAddress: PropTypes.string.isRequired,
+        addressLocality: PropTypes.string.isRequired,
+        addressRegion: PropTypes.string.isRequired,
+        postalCode: PropTypes.string.isRequired,
+        addressCountry: PropTypes.string.isRequired,
+    }),
+    priceRange: PropTypes.string,
+    sameAs: PropTypes.arrayOf(PropTypes.string.isRequired),
+    keywords: PropTypes.string,
+};
+const RoutePropTypes = {
+    path: PropTypes.string.isRequired,
+    component: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    description: PropTypes.string,
+};
+const SiteConfigPropTypes = {
+    siteInfo: PropTypes.shape(SiteInfoPropTypes).isRequired,
+    routes: PropTypes.arrayOf(PropTypes.shape(RoutePropTypes).isRequired).isRequired,
+};
+const ConfigBuilderPropTypes = {
+    initialConfig: PropTypes.shape(SiteConfigPropTypes),
+    onSave: PropTypes.func,
+};
+export function ConfigBuilder({ initialConfig, onSave }) {
+    const [config, setConfig] = useState(initialConfig || {
+        siteInfo: {
+            name: '',
+            author: '',
+            description: '',
+            url: '',
+            email: '',
+            favicon: '/favicon.ico',
+            favicon_sizes: '64x64 32x32 24x24 16x16',
+            favicon_type: 'image/x-icon',
+            theme_color: '#ffffff',
+            background_color: '#ffffff',
+            default_locale: 'en',
+            display: 'standalone',
+            address: {
+                streetAddress: '',
+                addressLocality: '',
+                addressRegion: '',
+                postalCode: '',
+                addressCountry: ''
+            }
+        },
+        routes: []
+    });
+    const [socialLinks, setSocialLinks] = useState(initialConfig?.siteInfo?.sameAs || ['']);
+    const [isFormValid, setIsFormValid] = useState(false);
+    // Validate form whenever config changes
+    useEffect(() => {
+        const siteInfo = config.siteInfo || {};
+        const isValid = (siteInfo.name || '').trim() !== '' &&
+            (siteInfo.author || '').trim() !== '' &&
+            (siteInfo.description || '').trim() !== '' &&
+            (siteInfo.url || '').trim() !== '' &&
+            (siteInfo.email || '').trim() !== '' &&
+            // Basic email validation
+            /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(siteInfo.email || '');
+        setIsFormValid(isValid);
+    }, [config]);
+    const handleFileUpload = (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const jsonContent = e.target?.result;
+                const parsedConfig = JSON.parse(jsonContent);
+                // Validate the structure
+                if (parsedConfig.siteInfo && parsedConfig.routes) {
+                    setConfig(parsedConfig);
+                    setSocialLinks(parsedConfig.siteInfo.sameAs || ['']);
+                }
+                else {
+                    alert('Invalid configuration file. Expected siteInfo and routes properties.');
+                }
+            }
+            catch {
+                alert('Error parsing JSON file. Please ensure it contains valid JSON.');
+            }
+        };
+        reader.readAsText(file);
+        // Reset the input
+        event.target.value = '';
+    };
+    useEffect(() => {
+        if (initialConfig) {
+            setConfig(prev => ({
+                siteInfo: { ...prev.siteInfo, ...initialConfig.siteInfo },
+                routes: initialConfig.routes || []
+            }));
+            setSocialLinks(initialConfig.siteInfo?.sameAs || ['']);
+        }
+    }, [initialConfig]);
+    // Prepare form data for FormEngine with current values
+    const formData = {
+        fields: siteInfoForm.fields.map(field => ({
+            ...field,
+            props: {
+                ...field.props,
+                value: config.siteInfo[field.props.name] || '',
+                defaultValue: config.siteInfo[field.props.name] || field.props.defaultValue || '',
+                onChange: (value) => {
+                    setConfig(prev => ({
+                        ...prev,
+                        siteInfo: {
+                            ...prev.siteInfo,
+                            [field.props.name]: value
+                        }
+                    }));
+                }
+            }
+        }))
+    };
+    const handleFormSubmit = (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+        const siteInfoData = {};
+        // Extract form data
+        for (const [key, value] of formData.entries()) {
+            siteInfoData[key] = value;
+        }
+        // Update config with form data
+        setConfig(prev => ({
+            ...prev,
+            siteInfo: {
+                ...prev.siteInfo,
+                ...siteInfoData,
+                sameAs: socialLinks.filter(link => link.trim() !== '')
+            }
+        }));
+    };
+    const updateAddress = (field, value) => {
+        setConfig(prev => ({
+            ...prev,
+            siteInfo: {
+                ...prev.siteInfo,
+                address: {
+                    ...(prev.siteInfo.address || {}),
+                    [field]: value
+                }
+            }
+        }));
+    };
+    const addSocialLink = () => {
+        setSocialLinks(prev => [...prev, '']);
+    };
+    const updateSocialLink = (index, value) => {
+        setSocialLinks(prev => prev.map((link, i) => i === index ? value : link));
+    };
+    const removeSocialLink = (index) => {
+        setSocialLinks(prev => prev.filter((_, i) => i !== index));
+    };
+    const addRoute = () => {
+        setConfig(prev => ({
+            ...prev,
+            routes: [...prev.routes, { path: '', component: '', title: '', description: '' }]
+        }));
+    };
+    const updateRoute = (index, field, value) => {
+        setConfig(prev => ({
+            ...prev,
+            routes: prev.routes.map((route, i) => i === index ? { ...route, [field]: value } : route)
+        }));
+    };
+    const removeRoute = (index) => {
+        setConfig(prev => ({
+            ...prev,
+            routes: prev.routes.filter((_, i) => i !== index)
+        }));
+    };
+    const handleSave = () => {
+        if (!isFormValid) {
+            alert('Please fill in all required fields correctly before saving.');
+            return;
+        }
+        onSave?.(config);
+    };
+    return (_jsxs("div", { className: "config-builder", children: [_jsx("h2", { children: "Config Builder" }), _jsxs("div", { className: "file-upload-section", children: [_jsx("label", { htmlFor: "config-file-upload", className: "file-upload-label", children: "Load Configuration File:" }), _jsx("input", { id: "config-file-upload", type: "file", accept: ".json", onChange: handleFileUpload, className: "file-upload-input" })] }), _jsx(Tab, { tabs: [
+                    {
+                        id: 'siteinfo',
+                        label: 'Site Info',
+                        content: (_jsxs("div", { className: "site-info-section", children: [_jsx(FormEngine, { formData: formData, onSubmitHandler: handleFormSubmit, name: "siteinfo", id: "siteinfo" }), _jsxs("div", { className: "address-section", children: [_jsx("h4", { children: "Address" }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "street-address", children: "Street Address" }), _jsx("input", { id: "street-address", type: "text", placeholder: "Street Address", value: config.siteInfo.address?.streetAddress || '', onChange: (e) => updateAddress('streetAddress', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "city", children: "City" }), _jsx("input", { id: "city", type: "text", placeholder: "City", value: config.siteInfo.address?.addressLocality || '', onChange: (e) => updateAddress('addressLocality', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "state-region", children: "State/Region" }), _jsx("input", { id: "state-region", type: "text", placeholder: "State/Region", value: config.siteInfo.address?.addressRegion || '', onChange: (e) => updateAddress('addressRegion', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "postal-code", children: "Postal Code" }), _jsx("input", { id: "postal-code", type: "text", placeholder: "Postal Code", value: config.siteInfo.address?.postalCode || '', onChange: (e) => updateAddress('postalCode', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "country", children: "Country" }), _jsx("input", { id: "country", type: "text", placeholder: "Country", value: config.siteInfo.address?.addressCountry || '', onChange: (e) => updateAddress('addressCountry', e.target.value) })] })] }), _jsxs("div", { className: "social-links-section", children: [_jsx("h4", { children: "Social Links" }), socialLinks.map((link, index) => (_jsxs("div", { className: "field-group social-link-item", children: [_jsx("input", { type: "url", placeholder: "https://social-link.com", value: link, onChange: (e) => updateSocialLink(index, e.target.value) }), _jsx("button", { type: "button", onClick: () => removeSocialLink(index), children: "Remove" })] }, index))), _jsx("button", { type: "button", onClick: addSocialLink, children: "Add Social Link" })] })] }))
+                    },
+                    {
+                        id: 'routes',
+                        label: 'Routes',
+                        content: (_jsxs("div", { className: "routes-section", children: [_jsx("div", { className: "routes-list", children: config.routes.map((route, index) => (_jsxs("div", { className: "route-item", children: [_jsx("input", { type: "text", placeholder: "Path", value: route.path, onChange: (e) => updateRoute(index, 'path', e.target.value) }), _jsx("input", { type: "text", placeholder: "Component", value: route.component, onChange: (e) => updateRoute(index, 'component', e.target.value) }), _jsx("input", { type: "text", placeholder: "Title", value: route.title || '', onChange: (e) => updateRoute(index, 'title', e.target.value) }), _jsx("input", { type: "text", placeholder: "Description", value: route.description || '', onChange: (e) => updateRoute(index, 'description', e.target.value) }), _jsx("button", { onClick: () => removeRoute(index), children: "Remove" })] }, index))) }), _jsx("button", { onClick: addRoute, children: "Add Route" })] }))
+                    }
+                ], orientation: "top" }), _jsx("button", { onClick: handleSave, disabled: !isFormValid, className: isFormValid ? 'save-button-valid' : 'save-button-invalid', children: "Save Config" }), !isFormValid && (_jsx("div", { className: "validation-message", children: "Please fill in all required fields (marked with *) before saving." })), _jsx("pre", { children: JSON.stringify(config, null, 2) })] }));
+}
+ConfigBuilder.propTypes = ConfigBuilderPropTypes;

package/dist/components/{pagebuilder → sitebuilder}/form/form.css

@@ -59,47 +59,68 @@ form span {
 	vertical-align: middle;
 }
 
-.tooltip {
-	display: inline;
-	margin-right: 10px;
+
+/* ========================================
+==============    TOOLTIP    ==============
+======================================== */
+   
+.tooltip-container {
+	display: inline-block;
 	position: relative;
+	margin-left: 5px;
+	vertical-align: middle;
 }
 
-.tooltipIcon {
-  	/* display: inline;
-	color: white !important;
-    background-color: #369;
-    border-radius: 20px;
-    padding: 0 3px; */
-    vertical-align: middle;
-	padding: 5px;
-    box-shadow: none;
-    background-color: transparent;
-    border: none;
+.tooltip-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.0rem;
+	font-weight: bold;
+	cursor: pointer;
+	padding: 0 3px;
+	line-height: 1;
+	color: #00F;
 }
 
-.tooltipIcon img {
-  	width: 20px;
-	/* margin: 5px 0 0 -10px; */
-	background-color: #DDD;
-    border-radius: 5px;
+.tooltip-icon-validate {
+	color: #d00;
 }
 
-.tooltipText {
-  	display: none;
+.tooltip-text {
 	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;
+	top: -15px;
+	left: 35px;
+	min-width: 200px;
+	max-width: 300px;
+	padding: 8px 12px;
+	background-color: #333;
+	color: white;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+	z-index: 1000;
+	font-size: 0.9em;
+	white-space: normal;
 }
-.tooltip a {
-	/* pointer-events: none; */
-	text-decoration: none;
+
+.tooltip-text::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: -8px;
+	transform: translateY(-50%);
+	width: 0;
+	height: 0;
+	border-top: 8px solid transparent;
+	border-bottom: 8px solid transparent;
+	border-right: 8px solid #333;
+	z-index: 1001;
+}
+
+.tooltip-text-item {
+	margin-bottom: 4px;
+}
+
+.tooltip-text-item:last-child {
+	margin-bottom: 0;
 }

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import * as FC from './formcomponents';
+import { mapTypeToComponent, generateTypeField, debug } from './formutils';
+import { FormEngine } from './formengine';
+/* =====  FORM BUILDER =====
+Display all the components for a Form Builder -
+Element Buttons, Element Details, and the Form */
+export function FormBuilder() {
+    const [formData, setFormData] = useState({ fields: [] });
+    const [fieldFormData, setFieldFormData] = useState({ fields: [] });
+    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({ fields: [] });
+        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 typeElement = target.elements.namedItem('type');
+        const myType = typeElement ? typeElement.value : '';
+        const myComponent = mapTypeToComponent(myType);
+        const fieldJSON = generateFieldJSON(myComponent, myType);
+        props.setFormData(fieldJSON);
+        return true;
+    }
+    return (_jsx(_Fragment, { children: _jsx(FormEngine, { formData: generateTypeField(), onSubmitHandler: event => { handlePhaseOneSubmit(event); }, name: "build", id: "build", method: "post" }) }));
+}