@pixelated-tech/components 3.2.14 → 3.3.1

package/dist/components/seo/metadata.functions.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function descriptionToKeywords(descriptionText, numKeywords = 5, customStopWords = []) {
+    if (!descriptionText) {
+        return [];
+    }
+    // Define a default list of common English stop words
+    const defaultStopWords = new Set([
+        'a', 'an', 'and', 'are', 'as', 'at', 'be', 'but', 'by', 'for', 'if', 'in', 'into',
+        'is', 'it', 'no', 'not', 'of', 'on', 'or', 'such', 'that', 'the', 'their',
+        'then', 'there', 'these', 'they', 'this', 'to', 'was', 'will', 'with'
+    ]);
+    const allStopWords = new Set([...defaultStopWords, ...customStopWords]);
+    // Pre-process the text: make lowercase and remove punctuation
+    const cleanedText = descriptionText.toLowerCase().replace(/[.,/#!$%^&*;:{}=\-_`~()]/g, '');
+    // Tokenize the text into individual words
+    const words = cleanedText.split(/\s+/);
+    // Count word frequencies, excluding stop words
+    const wordFrequency = words.reduce((counts, word) => {
+        if (word.length > 2 && !allStopWords.has(word)) {
+            counts[word] = (counts[word] || 0) + 1;
+        }
+        return counts;
+    }, {});
+    // Sort words by frequency and get the top N keywords
+    const sortedKeywords = Object.keys(wordFrequency).sort((a, b) => wordFrequency[b] - wordFrequency[a]);
+    // Return the top N keywords
+    return sortedKeywords.slice(0, numKeywords);
+}
+export function getRouteByKey(obj, key, value) {
+    if (typeof obj !== 'object' || obj === null) {
+        return null;
+    }
+    if (obj[key] && obj[key] === value) {
+        return obj;
+    }
+    for (const prop in obj) {
+        if (obj[prop] && typeof obj[prop] === 'object') {
+            const result = getRouteByKey(obj[prop], key, value);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+}
+export function getAllRoutes(routes, key) {
+    const result = [];
+    function traverse(obj) {
+        if (typeof obj !== 'object' || obj === null) {
+            return;
+        }
+        if (Array.isArray(obj)) {
+            obj.forEach(item => traverse(item));
+        }
+        else {
+            if (obj[key]) {
+                traverse(obj[key]);
+            }
+            else {
+                result.push(obj);
+            }
+        }
+    }
+    traverse(routes);
+    return result;
+}
+export const getMetadata = (routes, key = "name", value = "Home") => {
+    const foundObject = getRouteByKey(routes, key, value);
+    if (foundObject) {
+        const metadata = {
+            title: foundObject.title,
+            description: foundObject.description,
+            keywords: foundObject.keywords,
+        };
+        return metadata;
+    }
+    else {
+        const metadata = {
+            title: "",
+            description: "",
+            keywords: "",
+        };
+        return metadata;
+    }
+};
+export function getAccordionMenuData(myRoutes) {
+    const menuItems = myRoutes.map((thisRoute) => (thisRoute.routes
+        ? { [thisRoute.name]: thisRoute.routes.map((subRoute) => ({ [subRoute.name]: subRoute.path })) }
+        : { [thisRoute.name]: thisRoute.path })).reduce((obj, item) => {
+        if (typeof Object.values(item)[0] == "object") {
+            // Nested Object
+            const subitems = Object.values(item)[0];
+            const newSubitems = subitems.reduce((obj2, item2) => {
+                Object.assign(obj2, item2);
+                return obj2;
+            });
+            Object.assign(obj, { [Object.keys(item)[0]]: newSubitems });
+            return obj;
+        }
+        else {
+            // String
+            Object.assign(obj, item);
+            return obj;
+        }
+    });
+    return menuItems;
+}
+export function generateMetaTags(props) {
+    const { title, description, keywords, site_name, email, origin, url, image, image_height, image_width, favicon } = props;
+    return (_jsxs(_Fragment, { children: [_jsx("title", { children: title }), _jsx("meta", { charSet: "UTF-8" }), _jsx("meta", { httpEquiv: "content-type", content: "text/html; charset=UTF-8" }), _jsx("meta", { httpEquiv: 'Expires', content: '0' }), _jsx("meta", { httpEquiv: 'Pragma', content: 'no-cache' }), _jsx("meta", { httpEquiv: 'Cache-Control', content: 'no-cache' }), _jsx("meta", { name: "application-name", content: site_name }), _jsx("meta", { name: "author", content: site_name + ", " + email }), _jsx("meta", { name: 'copyright', content: site_name }), _jsx("meta", { name: "creator", content: site_name }), _jsx("meta", { name: "description", content: description }), _jsx("meta", { name: "keywords", content: keywords }), _jsx("meta", { name: 'language', content: 'EN' }), _jsx("meta", { name: 'owner', content: site_name }), _jsx("meta", { name: "publisher", content: site_name }), _jsx("meta", { name: 'rating', content: 'General' }), _jsx("meta", { name: 'reply-to', content: email }), _jsx("meta", { name: "robots", content: "index, follow" }), _jsx("meta", { name: 'url', content: url }), _jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1.0, shrink-to-fit=no" }), _jsx("meta", { property: "og:description", content: description }), _jsx("meta", { property: 'og:email', content: email }), _jsx("meta", { property: "og:image", content: image }), _jsx("meta", { property: "og:image:height", content: image_height }), _jsx("meta", { property: "og:image:width", content: image_width }), _jsx("meta", { property: "og:locale", content: "en_US" }), _jsx("meta", { property: "og:site_name", content: site_name }), _jsx("meta", { property: "og:title", content: title }), _jsx("meta", { property: "og:type", content: "website" }), _jsx("meta", { property: "og:url", content: url }), _jsx("meta", { itemProp: "name", content: site_name }), _jsx("meta", { itemProp: "url", content: url }), _jsx("meta", { itemProp: "description", content: description }), _jsx("meta", { itemProp: "thumbnailUrl", content: image }), _jsx("meta", { property: "twitter:domain", content: new URL(origin).hostname }), _jsx("meta", { property: "twitter:url", content: url }), _jsx("meta", { name: "twitter:card", content: "summary_large_image" }), _jsx("meta", { name: "twitter:creator", content: site_name }), _jsx("meta", { name: "twitter:description", content: description }), _jsx("meta", { name: "twitter:image", content: image }), _jsx("meta", { name: "twitter:image:height", content: image_height }), _jsx("meta", { name: "twitter:image:width", content: image_width }), _jsx("meta", { name: "twitter:title", content: title }), _jsx("link", { rel: "author", href: origin }), _jsx("link", { rel: "canonical", href: url }), _jsx("link", { rel: "icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "shortcut icon", type: "image/x-icon", href: favicon }), _jsx("link", { rel: "manifest", href: "/manifest.webmanifest" }), _jsx("link", { rel: "preconnect", href: "https://images.ctfassets.net/" }), _jsx("link", { rel: "preconnect", href: "https://res.cloudinary.com/" }), _jsx("link", { rel: "preconnect", href: "https://farm2.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm6.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm8.static.flickr.com" }), _jsx("link", { rel: "preconnect", href: "https://farm66.static.flickr.com" })] }));
+}

package/dist/components/seo/schema-blogposting.functions.js

@@ -0,0 +1,42 @@
+import { decode } from 'html-entities';
+/**
+ * Converts WordPress REST API blog post to schema.org BlogPosting format
+ * @param post WordPress blog post
+ * @param includeFullContent Whether to include articleBody (true) or just description (false)
+ */
+export function mapWordPressToBlogPosting(post, includeFullContent = false) {
+    const cleanContent = (content) => {
+        if (!content)
+            return '';
+        // Strip HTML tags and decode all HTML entities
+        const stripped = content.replace(/<[^>]*>/g, '');
+        return decode(stripped).replace(/\[…\]/g, '').trim();
+    };
+    const description = cleanContent(post.excerpt);
+    const articleBody = includeFullContent ? cleanContent(post.content || '') : undefined;
+    const schema = {
+        '@context': 'https://schema.org',
+        '@type': 'BlogPosting',
+        headline: decode(post.title.replace(/<[^>]*>/g, '')),
+        description: description || decode(post.title.replace(/<[^>]*>/g, '')),
+        datePublished: post.date,
+        image: post.featured_image || post.post_thumbnail?.URL,
+        articleSection: Array.isArray(post.categories) && post.categories.length > 0
+            ? post.categories[0]
+            : 'Blog',
+        keywords: Array.isArray(post.categories) ? post.categories : [],
+    };
+    if (articleBody) {
+        schema.articleBody = articleBody;
+    }
+    if (post.modified) {
+        schema.dateModified = post.modified;
+    }
+    if (post.author) {
+        schema.author = {
+            '@type': 'Person',
+            name: post.author,
+        };
+    }
+    return schema;
+}

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

@@ -1,50 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Converts WordPress REST API blog post to schema.org BlogPosting format
- * @param post WordPress blog post
- * @param includeFullContent Whether to include articleBody (true) or just description (false)
- */
-export function mapWordPressToBlogPosting(post, includeFullContent = false) {
-    const decodeString = (s) => {
-        if (typeof document === 'undefined')
-            return s;
-        const temp = document.createElement('p');
-        temp.innerHTML = s;
-        return temp.textContent || temp.innerText || s;
-    };
-    const cleanContent = (content) => {
-        if (!content)
-            return '';
-        return decodeString(content).replace(/\[…\]/g, '').trim();
-    };
-    const description = cleanContent(post.excerpt);
-    const articleBody = includeFullContent ? cleanContent(post.content || '') : undefined;
-    const schema = {
-        '@context': 'https://schema.org',
-        '@type': 'BlogPosting',
-        headline: decodeString(post.title),
-        description: description || decodeString(post.title),
-        datePublished: post.date,
-        image: post.featured_image || post.post_thumbnail?.URL,
-        articleSection: Array.isArray(post.categories) && post.categories.length > 0
-            ? post.categories[0]
-            : 'Blog',
-        keywords: Array.isArray(post.categories) ? post.categories : [],
-    };
-    if (articleBody) {
-        schema.articleBody = articleBody;
-    }
-    if (post.modified) {
-        schema.dateModified = post.modified;
-    }
-    if (post.author) {
-        schema.author = {
-            '@type': 'Person',
-            name: post.author,
-        };
-    }
-    return schema;
-}
 export function SchemaBlogPosting({ post }) {
     return (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: {
             __html: JSON.stringify(post),

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";

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/CompoundFontSelector.css

@@ -0,0 +1,25 @@
+.compound-font-selector {
+  margin-bottom: 1rem;
+}
+
+.compound-font-selector label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.compound-container {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.compound-container > .font-selector {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+.compound-container > .font-selector label {
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FontSelector } from './FontSelector';
+import './CompoundFontSelector.css';
+export function CompoundFontSelector({ id, name, label, required = false, value = '', onChange }) {
+    // Parse the compound value into primary, fallback, generic parts
+    const parseCompoundValue = (val) => {
+        const parts = val.split(',').map(s => s.trim());
+        return {
+            primary: parts[0] || '',
+            fallback: parts[1] || '',
+            generic: parts[2] || ''
+        };
+    };
+    const [fonts, setFonts] = useState(parseCompoundValue(value));
+    // Update fonts when value changes externally
+    useEffect(() => {
+        setFonts(parseCompoundValue(value));
+    }, [value]);
+    // Combine fonts into a single font stack value
+    const combineFonts = (fontParts) => {
+        return [fontParts.primary, fontParts.fallback, fontParts.generic].filter(Boolean).join(', ');
+    };
+    // Handle changes from individual font selectors
+    const handleFontChange = (type, newValue) => {
+        const updatedFonts = { ...fonts, [type]: newValue };
+        setFonts(updatedFonts);
+        const combinedValue = combineFonts(updatedFonts);
+        onChange?.(combinedValue);
+    };
+    return (_jsxs("div", { className: "compound-font-selector", children: [_jsx("label", { children: label }), _jsxs("div", { className: "compound-container", children: [_jsx(FontSelector, { id: `${id}-primary`, name: `${name}-primary`, label: "Primary Font", fontType: "google", required: required, placeholder: "Select Google Font", value: fonts.primary, onChange: (val) => handleFontChange('primary', val) }), _jsx(FontSelector, { id: `${id}-fallback`, name: `${name}-fallback`, label: "Fallback Font", fontType: "websafe", required: false, placeholder: "Select web-safe font", value: fonts.fallback, onChange: (val) => handleFontChange('fallback', val) }), _jsx(FontSelector, { id: `${id}-generic`, name: `${name}-generic`, label: "Generic Family", fontType: "generic", required: false, placeholder: "Select generic family", value: fonts.generic, onChange: (val) => handleFontChange('generic', val) })] })] }));
+}
+CompoundFontSelector.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    required: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};

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

@@ -0,0 +1,277 @@
+.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-headers {
+  display: grid;
+  grid-template-columns: 2fr 2fr 2fr 2fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.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;
+}