@pixelated-tech/components 3.2.13 → 3.3.0

package/dist/components/seo/schema-localbusiness.js

@@ -1,5 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function LocalBusinessSchema({ name, streetAddress, addressLocality, addressRegion, postalCode, addressCountry = 'United States', telephone, url, logo, image, openingHours, description, email, priceRange, sameAs }) {
+import PropTypes from "prop-types";
+/**
+ * LocalBusiness Schema Component
+ * Generates JSON-LD structured data for SEO
+ * https://schema.org/LocalBusiness
+ *
+ * This component uses siteInfo passed as props to generate schema data.
+ * It does not use client-side hooks and can be rendered on the server.
+ */
+LocalBusinessSchema.propTypes = {
+    name: PropTypes.string,
+    streetAddress: PropTypes.string,
+    addressLocality: PropTypes.string,
+    addressRegion: PropTypes.string,
+    postalCode: PropTypes.string,
+    addressCountry: PropTypes.string,
+    telephone: PropTypes.string,
+    url: PropTypes.string,
+    logo: PropTypes.string,
+    image: PropTypes.string,
+    openingHours: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+    description: PropTypes.string,
+    email: PropTypes.string,
+    priceRange: PropTypes.string,
+    sameAs: PropTypes.arrayOf(PropTypes.string), // Social media profiles
+    siteInfo: PropTypes.object // Required siteinfo from parent component
+};
+export function LocalBusinessSchema(props) {
+    // const config = usePixelatedConfig();
+    const siteInfo = props.siteInfo;
+    // Use props if provided, otherwise fall back to siteInfo
+    const name = props.name || siteInfo?.name;
+    const streetAddress = props.streetAddress || siteInfo?.address?.streetAddress;
+    const addressLocality = props.addressLocality || siteInfo?.address?.addressLocality;
+    const addressRegion = props.addressRegion || siteInfo?.address?.addressRegion;
+    const postalCode = props.postalCode || siteInfo?.address?.postalCode;
+    const addressCountry = props.addressCountry || siteInfo?.address?.addressCountry || 'United States';
+    const telephone = props.telephone || siteInfo?.telephone;
+    const url = props.url || siteInfo?.url;
+    const logo = props.logo || siteInfo?.image;
+    const image = props.image || siteInfo?.image;
+    const openingHours = props.openingHours;
+    const description = props.description || siteInfo?.description;
+    const email = props.email || siteInfo?.email;
+    const priceRange = props.priceRange || siteInfo?.priceRange;
+    const sameAs = props.sameAs || siteInfo?.sameAs;
     const schemaData = {
         '@context': 'https://schema.org',
         '@type': 'LocalBusiness',
@@ -24,4 +69,3 @@ export function LocalBusinessSchema({ name, streetAddress, addressLocality, addr
     };
     return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schemaData) } }));
 }
-export default LocalBusinessSchema;

package/dist/components/seo/schema-website.js

@@ -1,5 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function WebsiteSchema({ name, url, description, potentialAction }) {
+import PropTypes from "prop-types";
+/**
+ * Website Schema Component
+ * Generates JSON-LD structured data for websites
+ * https://schema.org/WebSite
+ *
+ * This component uses siteInfo passed as props to generate schema data.
+ * It does not use client-side hooks and can be rendered on the server.
+ */
+WebsiteSchema.propTypes = {
+    name: PropTypes.string,
+    url: PropTypes.string,
+    description: PropTypes.string,
+    potentialAction: PropTypes.shape({
+        '@type': PropTypes.string,
+        target: PropTypes.shape({
+            '@type': PropTypes.string,
+            urlTemplate: PropTypes.string
+        }),
+        query: PropTypes.string
+    }),
+    siteInfo: PropTypes.object // Required siteinfo from parent component
+};
+export function WebsiteSchema(props) {
+    // const config = usePixelatedConfig();
+    const siteInfo = props.siteInfo;
+    // Use props if provided, otherwise fall back to siteInfo
+    const name = props.name || siteInfo?.name;
+    const url = props.url || siteInfo?.url;
+    const description = props.description || siteInfo?.description;
+    const potentialAction = props.potentialAction;
     const schemaData = {
         '@context': 'https://schema.org',
         '@type': 'WebSite',
@@ -10,4 +40,3 @@ export function WebsiteSchema({ name, url, description, potentialAction }) {
     };
     return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(schemaData) } }));
 }
-export default WebsiteSchema;

package/dist/components/seo/sitemap.js

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import { getAllRoutes } from "./metadata";
+import { getAllRoutes } from "./metadata.functions";
 import { getWordPressItems, getWordPressItemImages } from "../cms/wordpress.functions";
 import { getContentfulFieldValues, getContentfulAssetURLs } from "../cms/contentful.delivery";
 import { getEbayAppToken, getEbayItemsSearch } from "../shoppingcart/ebay.functions";
@@ -173,9 +173,9 @@ export async function createImageURLsFromJSON(origin, jsonPath = 'public/site-im
             images: newImages,
         });
     }
-    catch (e) {
-        if (typeof console !== 'undefined')
-            console.warn('createImageURLsFromJSON failed', e);
+    catch /* (e) */ {
+        // During build time, fetch will fail - suppress the error to avoid build noise
+        // The function returns an empty array, which is acceptable
     }
     return sitemap;
 }

package/dist/components/shoppingcart/shoppingcart.components.js

@@ -4,10 +4,10 @@ import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { PayPal } from "./paypal";
 import { CalloutHeader } from "../callout/callout";
-import { FormEngine } from "../pagebuilder/form/form";
-import { FormButton } from '../pagebuilder/form/formcomponents';
-import { emailJSON } from "../pagebuilder/form/form.submit";
-import '../pagebuilder/form/form.css';
+import { FormEngine } from "../sitebuilder/form/formengine";
+import { FormButton } from '../sitebuilder/form/formcomponents';
+import { emailJSON } from "../sitebuilder/form/formemailer";
+import '../sitebuilder/form/form.css';
 import { MicroInteractions } from '../general/microinteractions';
 import { Modal, handleModalOpen } from '../general/modal';
 import { Table } from "../general/table";

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

@@ -0,0 +1,266 @@
+.config-builder {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.config-builder h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+.file-upload-section {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border: 1px solid #e9ecef;
+}
+
+.file-upload-label {
+  font-weight: 600;
+  color: #495057;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.file-upload-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: #fff;
+}
+
+.file-upload-input:focus {
+  outline: none;
+  border-color: #007acc;
+  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
+}
+
+.site-info-section {
+  padding: 20px 0;
+}
+
+.site-info-fields {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.field-group label {
+  font-weight: 600;
+  margin-bottom: 5px;
+  color: #555;
+  font-size: 14px;
+}
+
+.field-group input,
+.field-group select {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: border-color 0.2s;
+}
+
+.field-group input:focus,
+.field-group select:focus {
+  outline: none;
+  border-color: #007acc;
+  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
+}
+
+.field-group input[type="color"] {
+  height: 40px;
+  cursor: pointer;
+}
+
+.address-section {
+  grid-column: 1 / -1;
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
+.social-links-section {
+  grid-column: 1 / -1;
+  margin-top: 20px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 6px;
+  border: 1px solid #e0e0e0;
+}
+
+.social-links-section h4 {
+  margin: 0 0 15px 0;
+  color: #333;
+  font-size: 16px;
+}
+
+.social-link-item {
+  display: flex !important;
+  flex-direction: row !important;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.social-link-item input {
+  flex: 2;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.social-link-item button {
+  flex-shrink: 0;
+  padding: 8px 12px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.2s;
+}
+
+.social-link-item button:hover {
+  background-color: #c82333;
+}
+
+.routes-section {
+  padding: 20px 0;
+}
+
+.routes-list {
+  margin-bottom: 15px;
+}
+
+.route-item {
+  display: grid;
+  grid-template-columns: 2fr 2fr 2fr 2fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.route-item input {
+  padding: 6px 8px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  font-size: 14px;
+}
+
+.route-item button {
+  padding: 6px 12px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.2s;
+}
+
+.route-item button:hover {
+  background-color: #c82333;
+}
+
+.config-builder button[type="button"] {
+  padding: 10px 20px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: background-color 0.2s;
+  margin-top: 20px;
+}
+
+.config-builder button[type="button"]:hover {
+  background-color: #218838;
+}
+
+.config-builder pre {
+  background-color: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 4px;
+  padding: 15px;
+  margin-top: 20px;
+  font-size: 12px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+  .site-info-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .address-section .site-info-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .route-item {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+}
+
+/* Save Button Validation Styles */
+.save-button-valid {
+  background-color: #28a745;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  margin: 20px 0;
+}
+
+.save-button-valid:hover {
+  background-color: #218838;
+}
+
+.save-button-invalid {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: not-allowed;
+  opacity: 0.6;
+  margin: 20px 0;
+}
+
+.validation-message {
+  color: #dc3545;
+  font-size: 14px;
+  margin-top: 8px;
+  font-weight: 500;
+}

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;