@pixelated-tech/components 3.7.3 → 3.7.5

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

@@ -12,6 +12,7 @@ import * as FC from '../form/formcomponents';
 import siteInfoForm from './siteinfo-form.json';
 import visualDesignForm from './visualdesignform.json';
 import routesForm from './routes-form.json';
+import servicesForm from './services-form.json';
 import defaultConfigData from '../../../data/routes.json';
 import './ConfigBuilder.css';
 const RoutePropTypes = {
@@ -49,6 +50,21 @@ const SiteInfoPropTypes = {
     priceRange: PropTypes.string,
     sameAs: PropTypes.arrayOf(PropTypes.string.isRequired),
     keywords: PropTypes.string,
+    openingHours: PropTypes.string,
+    publisherType: PropTypes.string,
+    copyrightYear: PropTypes.number,
+    potentialAction: PropTypes.shape({
+        '@type': PropTypes.string,
+        target: PropTypes.string.isRequired,
+        'query-input': PropTypes.string,
+        queryInput: PropTypes.string,
+    }),
+    services: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        description: PropTypes.string.isRequired,
+        url: PropTypes.string,
+        areaServed: PropTypes.arrayOf(PropTypes.string.isRequired),
+    })),
 };
 const VisualDesignVariable = {
     value: PropTypes.string.isRequired,
@@ -92,7 +108,10 @@ ConfigBuilder.propTypes = {
 export function ConfigBuilder(props) {
     const { initialConfig, onSave } = props;
     const defaultConfig = {
-        siteInfo: defaultConfigData.siteInfo,
+        siteInfo: {
+            ...defaultConfigData.siteInfo,
+            services: defaultConfigData.siteInfo.services || []
+        },
         routes: [], // Start with empty routes, the JSON structure is different
         visualdesign: defaultConfigData.visualdesign
     };
@@ -157,8 +176,21 @@ export function ConfigBuilder(props) {
                                 ? route.keywords.split(',').map((k) => k.trim()).filter((k) => k.length > 0)
                                 : [])
                     }));
+                    // Ensure services keywords/arrays are valid
+                    const normalizedServices = (parsedConfig.siteInfo.services || []).map((service) => ({
+                        ...service,
+                        areaServed: Array.isArray(service.areaServed)
+                            ? service.areaServed
+                            : (typeof service.areaServed === 'string'
+                                ? service.areaServed.split(',').map((s) => s.trim()).filter((s) => s.length > 0)
+                                : [])
+                    }));
                     setConfig({
                         ...parsedConfig,
+                        siteInfo: {
+                            ...parsedConfig.siteInfo,
+                            services: normalizedServices
+                        },
                         routes: normalizedRoutes
                     });
                     setSocialLinks(parsedConfig.siteInfo.sameAs || ['']);
@@ -195,13 +227,26 @@ export function ConfigBuilder(props) {
         }
     }, [initialConfig]);
     // Prepare form data for FormEngine with current values
+    const getNestedValue = (obj, path) => {
+        return path.split('.').reduce((current, key) => current?.[key], obj);
+    };
+    const setNestedValue = (obj, path, value) => {
+        const keys = path.split('.');
+        const lastKey = keys.pop();
+        const target = keys.reduce((current, key) => {
+            if (!current[key])
+                current[key] = {};
+            return current[key];
+        }, obj);
+        target[lastKey] = value;
+    };
     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 || '',
+                value: getNestedValue(config.siteInfo, field.props.name) || '',
+                defaultValue: getNestedValue(config.siteInfo, field.props.name) || field.props.defaultValue || '',
                 onChange: (value) => {
                     // Handle both direct values and event objects
                     let actualValue = value;
@@ -210,13 +255,14 @@ export function ConfigBuilder(props) {
                         const target = value.target;
                         actualValue = target.type === 'checkbox' ? (target.checked ? target.value : '') : target.value;
                     }
-                    setConfig((prev) => ({
-                        ...prev,
-                        siteInfo: {
-                            ...prev.siteInfo,
-                            [field.props.name]: actualValue
-                        }
-                    }));
+                    setConfig((prev) => {
+                        const newSiteInfo = { ...prev.siteInfo };
+                        setNestedValue(newSiteInfo, field.props.name, actualValue);
+                        return {
+                            ...prev,
+                            siteInfo: newSiteInfo
+                        };
+                    });
                 }
             }
         }))
@@ -257,7 +303,7 @@ export function ConfigBuilder(props) {
         const siteInfoData = {};
         // Extract form data
         for (const [key, value] of formData.entries()) {
-            siteInfoData[key] = value;
+            setNestedValue(siteInfoData, key, value);
         }
         // Update config with form data
         setConfig(prev => ({
@@ -297,14 +343,9 @@ export function ConfigBuilder(props) {
         }));
     };
     const updateRoute = (index, field, value) => {
-        // Special handling for keywords field - convert comma-separated string to array
-        let processedValue = value;
-        if (field === 'keywords' && typeof value === 'string') {
-            processedValue = value.split(',').map((k) => k.trim()).filter((k) => k.length > 0);
-        }
         setConfig(prev => ({
             ...prev,
-            routes: prev.routes.map((route, i) => i === index ? { ...route, [field]: processedValue } : route)
+            routes: prev.routes.map((route, i) => i === index ? { ...route, [field]: value } : route)
         }));
     };
     const removeRoute = (index) => {
@@ -313,12 +354,63 @@ export function ConfigBuilder(props) {
             routes: prev.routes.filter((_, i) => i !== index)
         }));
     };
+    const addService = () => {
+        setConfig(prev => ({
+            ...prev,
+            siteInfo: {
+                ...prev.siteInfo,
+                services: [...(prev.siteInfo.services || []), { name: '', description: '', url: '', areaServed: '' }]
+            }
+        }));
+    };
+    const updateService = (index, field, value) => {
+        setConfig(prev => ({
+            ...prev,
+            siteInfo: {
+                ...prev.siteInfo,
+                services: (prev.siteInfo.services || []).map((service, i) => i === index ? { ...service, [field]: value } : service)
+            }
+        }));
+    };
+    const removeService = (index) => {
+        setConfig(prev => ({
+            ...prev,
+            siteInfo: {
+                ...prev.siteInfo,
+                services: (prev.siteInfo.services || []).filter((_, i) => i !== index)
+            }
+        }));
+    };
+    // Helper to convert comma-separated strings back to arrays for output
+    const getProcessedConfig = (rawConfig) => {
+        // Use a simple spread/map to avoid full deep clone where unnecessary, 
+        // but enough to safely modify for output
+        const processed = {
+            ...rawConfig,
+            siteInfo: {
+                ...rawConfig.siteInfo,
+                services: (rawConfig.siteInfo.services || []).map((service) => ({
+                    ...service,
+                    areaServed: typeof service.areaServed === 'string'
+                        ? service.areaServed.split(',').map((s) => s.trim()).filter((s) => s.length > 0)
+                        : service.areaServed
+                }))
+            },
+            routes: (rawConfig.routes || []).map((route) => ({
+                ...route,
+                keywords: typeof route.keywords === 'string'
+                    ? route.keywords.split(',').map((k) => k.trim()).filter((k) => k.length > 0)
+                    : route.keywords
+            }))
+        };
+        return processed;
+    };
     const handleSave = () => {
         if (!isFormValid) {
             alert('Please fill in all required fields correctly before saving.');
             return;
         }
-        onSave?.(config);
+        onSave?.(getProcessedConfig(config));
     };
     const handleAiRecommendations = async (routeIndex) => {
         console.log('handleAiRecommendations called with routeIndex:', routeIndex);
@@ -401,14 +493,13 @@ export function ConfigBuilder(props) {
                                                                 : { value: fieldValue || '' }),
                                                         onChange: (e) => {
                                                             let value;
-                                                            if (field.props.type === 'checkbox') {
-                                                                value = e.target.checked;
-                                                            }
-                                                            else if (field.props.name === 'keywords') {
-                                                                value = e.target.value.split(',').map((s) => s.trim()).filter((s) => s);
+                                                            // Handle both direct values and event objects
+                                                            const actualValue = (e && typeof e === 'object' && e.target) ? (e.target.type === 'checkbox' ? e.target.checked : e.target.value) : e;
+                                                            if (field.props.name === 'keywords' && typeof actualValue === 'string') {
+                                                                value = actualValue.split(',').map((s) => s.trim()).filter((s) => s);
                                                             }
                                                             else {
-                                                                value = e.target.value;
+                                                                value = actualValue;
                                                             }
                                                             updateRoute(index, field.props.name, value);
                                                         }
@@ -419,6 +510,32 @@ export function ConfigBuilder(props) {
                                                                 handleAiRecommendations(index);
                                                             }, className: "route-button ai-recommend", children: [_jsx("span", { className: "ai-icon", children: "\u2728" }), " Recommend"] }), _jsx("button", { onClick: () => removeRoute(index), className: "route-button remove", children: "Remove" })] })] }, index))) }), _jsx("button", { onClick: addRoute, children: "Add Route" })] }) }))
                     },
+                    {
+                        id: 'services',
+                        label: 'Services',
+                        content: (_jsx(FormValidationProvider, { children: _jsxs("div", { className: "routes-section", children: [_jsx("div", { className: "routes-list", children: (config.siteInfo.services || []).map((service, index) => (_jsxs("div", { className: "route-item", children: [servicesForm.fields.map((field) => {
+                                                    const Component = FC[field.component];
+                                                    if (!Component)
+                                                        return null;
+                                                    let fieldValue = service[field.props.name];
+                                                    if (field.props.name === 'areaServed' && Array.isArray(fieldValue)) {
+                                                        fieldValue = fieldValue.join(', ');
+                                                    }
+                                                    const fieldProps = {
+                                                        ...field.props,
+                                                        id: `${field.props.id}-${index}`,
+                                                        ...(field.component === 'FormTextarea'
+                                                            ? { defaultValue: fieldValue || '' }
+                                                            : { value: fieldValue || '' }),
+                                                        onChange: (e) => {
+                                                            // Handle both direct values and event objects
+                                                            const actualValue = (e && typeof e === 'object' && e.target) ? e.target.value : e;
+                                                            updateService(index, field.props.name, actualValue);
+                                                        }
+                                                    };
+                                                    return _jsx(Component, { ...fieldProps }, fieldProps.id);
+                                                }), _jsx("div", { className: "route-buttons", children: _jsx("button", { onClick: () => removeService(index), className: "route-button remove", children: "Remove" }) })] }, index))) }), _jsx("button", { onClick: addService, children: "Add Service" })] }) }))
+                    },
                     {
                         id: 'visualdesign',
                         label: 'Visual Design',
@@ -429,7 +546,7 @@ export function ConfigBuilder(props) {
                         title: 'Configuration Preview',
                         content: _jsx("pre", { children: (() => {
                                 try {
-                                    return JSON.stringify(config, null, 2);
+                                    return JSON.stringify(getProcessedConfig(config), null, 2);
                                 }
                                 catch (e) {
                                     // Simple fallback that doesn't try to analyze the object deeply

package/dist/components/sitebuilder/config/services-form.json

@@ -0,0 +1,51 @@
+{
+  "fields": [
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "name",
+        "name": "name",
+        "label": "Service Name",
+        "required": true,
+        "placeholder": "e.g. Web Development",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormTextarea",
+      "props": {
+        "id": "description",
+        "name": "description",
+        "label": "Description",
+        "required": true,
+        "placeholder": "Detailed description of the service...",
+        "rows": "3"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "url",
+        "id": "url",
+        "name": "url",
+        "label": "Service URL",
+        "required": false,
+        "placeholder": "https://pixelated.tech/services/web-dev",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "areaServed",
+        "name": "areaServed",
+        "label": "Area Served",
+        "required": false,
+        "placeholder": "New Jersey, South Carolina",
+        "size": "40"
+      }
+    }
+  ]
+}

package/dist/components/sitebuilder/config/siteinfo-form.json

@@ -188,6 +188,17 @@
         "size": "40"
       }
     },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "openingHours",
+        "name": "openingHours",
+        "label": "Opening Hours",
+        "placeholder": "Mo-Fr 09:00-17:00",
+        "size": "40"
+      }
+    },
     {
       "component": "FormInput",
       "props": {
@@ -209,6 +220,63 @@
         "placeholder": "web development, design, services",
         "size": "40"
       }
+    },
+    {
+      "component": "FormSelect",
+      "props": {
+        "id": "publisherType",
+        "name": "publisherType",
+        "label": "Publisher Type",
+        "options": [
+          { "value": "Organization", "label": "Organization" },
+          { "value": "LocalBusiness", "label": "Local Business" },
+          { "value": "Person", "label": "Person" }
+        ]
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "number",
+        "id": "copyrightYear",
+        "name": "copyrightYear",
+        "label": "Copyright Year",
+        "placeholder": "2024",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "potentialAction.@type",
+        "name": "potentialAction.@type",
+        "label": "Search Action Type",
+        "placeholder": "SearchAction",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "potentialAction.target",
+        "name": "potentialAction.target",
+        "label": "Search Target URL",
+        "placeholder": "https://example.com/search?q={search_term_string}",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "potentialAction.query-input",
+        "name": "potentialAction.query-input",
+        "label": "Query Input",
+        "placeholder": "required name=search_term_string",
+        "size": "40"
+      }
     }
   ]
 }

package/dist/components/sitebuilder/form/form.css

@@ -123,4 +123,85 @@ form span {
 
 .tooltip-text-item:last-child {
 	margin-bottom: 0;
+}
+
+/* ========================================
+=============    TAG INPUT    ============
+======================================== */
+
+.form-tag-input {
+	margin: 5px 0;
+}
+
+.tag-container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	min-height: 40px;
+	padding: 5px;
+	border: 1px solid #CCC;
+	border-radius: 5px;
+	background-color: #FFF;
+	gap: 5px;
+}
+
+.tag-container:focus-within {
+	border-color: #0C0;
+	box-shadow: 0 0 5px 2px #CCC;
+}
+
+.tag-chip {
+	display: inline-flex;
+	align-items: center;
+	background-color: #eee;
+	padding: 4px 8px;
+	border-radius: 10px;
+	border: 1px solid #bbb;
+	white-space: nowrap;
+}
+
+.tag-remove {
+	background: none;
+	border: none;
+	color: #1565c0;
+	cursor: pointer;
+	font-size: 1.2em;
+	line-height: 1;
+	padding: 0;
+	margin-left: 4px;
+	border-radius: 50%;
+	width: 16px;
+	height: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: background-color 0.2s;
+}
+
+.tag-remove:hover {
+	background-color: rgba(21, 101, 192, 0.1);
+}
+
+.tag-remove:disabled {
+	cursor: not-allowed;
+	opacity: 0.5;
+}
+
+.tag-input {
+	flex: 1;
+	min-width: 120px;
+	border: none;
+	outline: none;
+	padding: 4px 8px;
+	font-size: 1.1em;
+	font-family: Verdana, Geneva, sans-serif;
+	background: transparent;
+}
+
+.tag-input:focus {
+	outline: none;
+}
+
+.tag-input::placeholder {
+	color: #999;
 }

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

@@ -372,6 +372,92 @@ export function FormDataList(props) {
     }
     return (_jsx("datalist", { id: props.id, children: options }));
 }
+FormTagInput.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    defaultValue: PropTypes.arrayOf(PropTypes.string),
+    value: PropTypes.arrayOf(PropTypes.string),
+    placeholder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    // flag attributes
+    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 FormTagInput(props) {
+    const [inputValue, setInputValue] = useState('');
+    const [internalTags, setInternalTags] = useState(Array.isArray(props.defaultValue) ? props.defaultValue.filter((tag) => tag != null) : []);
+    const { formValidate, handleBlur } = useFormComponent(props);
+    const { validateField } = useFormValidation();
+    // Determine if component is controlled or uncontrolled
+    const isControlled = props.value !== undefined;
+    // Get current tags array - use props.value if controlled, otherwise internal state
+    const currentTags = isControlled
+        ? (Array.isArray(props.value) ? props.value.filter((tag) => tag != null) : [])
+        : internalTags;
+    // Handle adding a new tag
+    const addTag = (tag) => {
+        const trimmedTag = tag.trim();
+        if (trimmedTag && !currentTags.includes(trimmedTag)) {
+            const newTags = [...currentTags, trimmedTag];
+            // Always call onChange if provided (for external updates)
+            if (props.onChange) {
+                props.onChange(newTags);
+            }
+            if (!isControlled) {
+                // Uncontrolled mode: update internal state
+                setInternalTags(newTags);
+            }
+            // Trigger form validation
+            if (props.id) {
+                validateField(props.id, true, []);
+            }
+        }
+        setInputValue('');
+    };
+    // Handle removing a tag
+    const removeTag = (tagToRemove) => {
+        const newTags = currentTags.filter(tag => tag !== tagToRemove);
+        // Always call onChange if provided (for external updates)
+        if (props.onChange) {
+            props.onChange(newTags);
+        }
+        if (!isControlled) {
+            // Uncontrolled mode: update internal state
+            setInternalTags(newTags);
+        }
+        // Trigger form validation
+        if (props.id) {
+            validateField(props.id, true, []);
+        }
+    };
+    // Handle input key events
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault();
+            addTag(inputValue);
+        }
+        else if (event.key === 'Backspace' && inputValue === '' && currentTags.length > 0) {
+            // Remove last tag on backspace when input is empty
+            const lastTag = currentTags[currentTags.length - 1];
+            if (lastTag) {
+                removeTag(lastTag);
+            }
+        }
+    };
+    // Handle input change
+    const handleInputChange = (event) => {
+        setInputValue(event.target.value);
+    };
+    return (_jsxs("div", { className: `form-tag-input ${props.className || ''}`, 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 : "", _jsxs("div", { className: "tag-container", children: [currentTags.map((tag, index) => (_jsxs("span", { className: "tag-chip", children: [tag, _jsx("button", { type: "button", className: "tag-remove", onClick: () => removeTag(tag), "aria-label": `Remove ${tag}`, disabled: props.disabled === 'disabled', children: "\u00D7" })] }, index))), _jsx("input", { type: "text", id: props.id, name: props.name || undefined, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: props.placeholder || "Add tag...", autoComplete: props.autoComplete || undefined, disabled: props.disabled === 'disabled', readOnly: props.readOnly === 'readOnly', required: props.required === 'required', className: "tag-input", "aria-label": "Add new tag" })] }), props.display !== "vertical" ? formValidate : ""] }));
+}
 FormFieldset.propTypes = {};
 export function FormFieldset(props) {
     return (_jsx(_Fragment, {}));

package/dist/data/form.json

@@ -358,6 +358,18 @@
 				"tooltip": "Please enter your comments"
 			}
 		},
+		{
+			"component" : "FormTagInput",
+			"props" : {
+				"id" : "tags",
+				"name" : "tags",
+				"defaultValue" : ["react", "javascript"],
+				"display" : "horizontal",
+				"label" : "Tags : ",
+				"placeholder" : "Add tags...",
+				"tooltip" : "Add tags by typing and pressing Enter or comma"
+			}
+		},
 		{
 			"component" : "FormButton",
 			"props" : {

package/dist/index.js

@@ -28,7 +28,9 @@ export * from './components/general/hubspot.components';
 export * from './components/general/image';
 export * from './components/general/instagram.components';
 export * from './components/general/instagram.functions';
+export * from './components/general/intersection-observer';
 export * from './components/general/loading';
+export * from './components/general/splitscroll';
 export * from './components/general/manifest';
 export * from './components/general/markdown';
 export * from './components/general/menu-accordion';

package/dist/scripts/setup-remotes.sh

@@ -0,0 +1,69 @@
+#!/bin/bash
+
+# Setup remotes for all Pixelated projects
+# This script configures consistent Git remotes across all repositories
+
+set -e  # Exit on any error
+
+# Base directory (parent of all repos)
+BASE_DIR="$(pwd)"
+echo "Base directory: $BASE_DIR"
+
+# List of repositories to configure
+REPOS=(
+    "brianwhaley"
+    "informationfocus"
+    "oaktreelandscaping"
+    "palmetto-epoxy"
+    "pixelated"
+    "pixelated-admin"
+    "pixelated-components"
+    "pixelated-template"
+    "pixelvivid"
+)
+
+# GitHub username/organization
+GITHUB_USER="brianwhaley"
+
+echo "Setting up Git remotes for Pixelated projects..."
+echo "================================================="
+
+# First, clean up any global remotes that might interfere
+echo "Cleaning up global remotes..."
+for repo in "${REPOS[@]}"; do
+    git config --global --unset-all remote."$repo".url 2>/dev/null || true
+    git config --global --unset remote."$repo".fetch 2>/dev/null || true
+done
+echo "✓ Global remotes cleaned up"
+
+for repo in "${REPOS[@]}"; do
+    repo_path="$BASE_DIR/$repo"
+
+    if [ -d "$repo_path/.git" ]; then
+        echo "Configuring remotes for: $repo"
+        cd "$repo_path"
+
+        # Add remotes for all repositories
+        for target_repo in "${REPOS[@]}"; do
+            echo "  - Setting up $target_repo remote"
+            remote_url="https://github.com/$GITHUB_USER/$target_repo.git"
+            # Remove remote if it exists, then add fresh
+            git remote remove "$target_repo" 2>/dev/null || true
+            git remote add "$target_repo" "$remote_url"
+        done
+        
+        echo "  ✓ All remotes configured for $repo"
+    else
+        echo "⚠️  Skipping $repo (not a Git repository or doesn't exist)"
+    fi
+    echo ""
+done
+
+echo "================================================="
+echo "Remote setup complete!"
+echo ""
+echo "Each repository now has remotes named after all Pixelated projects."
+echo "Example usage:"
+echo "  git remote -v                    # List all remotes"
+echo "  git fetch pixelated-components   # Fetch from pixelated-components"
+echo "  git push pixelated-components main  # Push to pixelated-components"