@pixelated-tech/components 3.3.6 → 3.4.1

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

@@ -14,7 +14,7 @@ import { Table } from "../general/table";
 import { getCart, getShippingInfo, SetShippingInfo, setDiscountCodes, getRemoteDiscountCodes, getCheckoutData, RemoveFromShoppingCart, ClearShoppingCart, formatAsUSD, getCartItemCount } from "./shoppingcart.functions";
 import { usePixelatedConfig } from '../config/config.client';
 import { SmartImage } from '../cms/smartimage';
-import shippingToData from "../../data/shipping.to.json";
+import shippingToData from "./shipping.to.json";
 import "./shoppingcart.css";
 const debug = false;
 /* ================================================ */
@@ -136,7 +136,8 @@ export function ShoppingCart(props) {
             'orderData': JSON.stringify(orderData, null, 2),
         };
         const sendMailResponse = emailJSON(json);
-        console.log("SendMail Response:", sendMailResponse);
+        if (debug)
+            console.log("SendMail Response:", sendMailResponse);
         // ========== THANK YOU ==========
         const pmt = orderData.purchase_units[0].payments.captures[0];
         return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" }), _jsxs("div", { children: [_jsx("h3", { children: "Thank you for your payment!" }), "Payment ID : ", pmt.id, " ", _jsx("br", {}), "Status : ", pmt.status, " ", _jsx("br", {}), "Amount : $", pmt.amount.value + " " + pmt.amount.currency_code, " ", _jsx("br", {}), "Created : ", pmt.create_time, " ", _jsx("br", {})] })] }));

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

@@ -5,10 +5,16 @@ import PropTypes from 'prop-types';
 import { Tab } from '../../general/tab';
 import { Accordion } from '../../general/accordion';
 import { FormEngine } from '../form/formengine';
-import siteInfoForm from '../../../data/siteinfo-form.json';
-import visualDesignForm from '../../../data/visualdesignform.json';
+import siteInfoForm from './siteinfo-form.json';
+import visualDesignForm from './visualdesignform.json';
 import defaultConfigData from '../../../data/routes.json';
 import './ConfigBuilder.css';
+const RoutePropTypes = {
+    path: PropTypes.string.isRequired,
+    component: PropTypes.string.isRequired,
+    title: PropTypes.string,
+    description: PropTypes.string,
+};
 const SiteInfoPropTypes = {
     name: PropTypes.string.isRequired,
     author: PropTypes.string.isRequired,
@@ -37,150 +43,40 @@ const SiteInfoPropTypes = {
     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 VisualDesignVariable = {
+    value: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
+    group: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired
 };
 const VisualDesignPropTypes = {
-    'primary-color': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'secondary-color': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'accent1-color': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'accent2-color': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'bg-color': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'text-color': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'header-font': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'body-font': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size1-min': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size1-max': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size2-min': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size2-max': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size3-min': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size3-max': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size4-min': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size4-max': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size5-min': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size5-max': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size6-min': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-size6-max': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-min-screen': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
-    'font-max-screen': PropTypes.shape({
-        value: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
-        group: PropTypes.string.isRequired,
-        label: PropTypes.string.isRequired
-    }).isRequired,
+    'primary-color': PropTypes.shape(VisualDesignVariable).isRequired,
+    'secondary-color': PropTypes.shape(VisualDesignVariable).isRequired,
+    'accent1-color': PropTypes.shape(VisualDesignVariable).isRequired,
+    'accent2-color': PropTypes.shape(VisualDesignVariable).isRequired,
+    'bg-color': PropTypes.shape(VisualDesignVariable).isRequired,
+    'text-color': PropTypes.shape(VisualDesignVariable).isRequired,
+    'header-font': PropTypes.shape(VisualDesignVariable).isRequired,
+    'body-font': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size1-min': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size1-max': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size2-min': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size2-max': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size3-min': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size3-max': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size4-min': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size4-max': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size5-min': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size5-max': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size6-min': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-size6-max': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-min-screen': PropTypes.shape(VisualDesignVariable).isRequired,
+    'font-max-screen': PropTypes.shape(VisualDesignVariable).isRequired,
 };
 const SiteConfigPropTypes = {
     siteInfo: PropTypes.shape(SiteInfoPropTypes).isRequired,
     routes: PropTypes.arrayOf(PropTypes.shape(RoutePropTypes).isRequired).isRequired,
-    visualdesign: PropTypes.shape(VisualDesignPropTypes),
+    visualdesign: PropTypes.shape(VisualDesignPropTypes).isRequired,
 };
 const ConfigBuilderPropTypes = {
     initialConfig: PropTypes.shape(SiteConfigPropTypes),

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

@@ -0,0 +1,200 @@
+{
+  "fields": [
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "name",
+        "name": "name",
+        "label": "Site Name",
+        "required": true,
+        "placeholder": "Enter site name"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "author",
+        "name": "author",
+        "label": "Author",
+        "required": true,
+        "placeholder": "Enter author name"
+      }
+    },
+    {
+      "component": "FormTextarea",
+      "props": {
+        "id": "description",
+        "name": "description",
+        "label": "Site Description",
+        "required": true,
+        "placeholder": "Enter site description",
+        "rows": "3"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "url",
+        "id": "url",
+        "name": "url",
+        "label": "Site URL",
+        "required": true,
+        "placeholder": "https://example.com"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "email",
+        "id": "email",
+        "name": "email",
+        "label": "Email",
+        "required": true,
+        "placeholder": "contact@example.com"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "favicon",
+        "name": "favicon",
+        "label": "Favicon",
+        "required": true,
+        "placeholder": "/favicon.ico"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "favicon_sizes",
+        "name": "favicon_sizes",
+        "label": "Favicon Sizes",
+        "required": true,
+        "placeholder": "64x64 32x32 24x24 16x16"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "favicon_type",
+        "name": "favicon_type",
+        "label": "Favicon Type",
+        "required": true,
+        "placeholder": "image/x-icon"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "color",
+        "id": "theme_color",
+        "name": "theme_color",
+        "label": "Theme Color",
+        "required": true,
+        "placeholder": "#ffffff"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "color",
+        "id": "background_color",
+        "name": "background_color",
+        "label": "Background Color",
+        "required": true,
+        "placeholder": "#ffffff"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "default_locale",
+        "name": "default_locale",
+        "label": "Default Locale",
+        "required": true,
+        "placeholder": "en"
+      }
+    },
+    {
+      "component": "FormSelect",
+      "props": {
+        "id": "display",
+        "name": "display",
+        "label": "Display Mode",
+        "required": true,
+        "options": [
+          { "value": "standalone", "label": "Standalone" },
+          { "value": "fullscreen", "label": "Fullscreen" },
+          { "value": "minimal-ui", "label": "Minimal UI" },
+          { "value": "browser", "label": "Browser" }
+        ]
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "image",
+        "name": "image",
+        "label": "Site Image",
+        "placeholder": "/images/site-image.jpg"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "image_height",
+        "name": "image_height",
+        "label": "Image Height",
+        "placeholder": "512"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "image_width",
+        "name": "image_width",
+        "label": "Image Width",
+        "placeholder": "512"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "tel",
+        "id": "telephone",
+        "name": "telephone",
+        "label": "Telephone",
+        "placeholder": "+1-555-123-4567"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "priceRange",
+        "name": "priceRange",
+        "label": "Price Range",
+        "placeholder": "$$"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "keywords",
+        "name": "keywords",
+        "label": "Keywords",
+        "placeholder": "web development, design, services"
+      }
+    }
+  ]
+}

package/dist/components/sitebuilder/config/visualdesignform.json

@@ -0,0 +1,244 @@
+{
+	"fields": [
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "color",
+				"id": "primary-color",
+				"name": "primary-color",
+				"label": "Primary color",
+				"required": true,
+				"placeholder": "#369"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "color",
+				"id": "secondary-color",
+				"name": "secondary-color",
+				"label": "Secondary color",
+				"required": true,
+				"placeholder": "#BCD"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "color",
+				"id": "accent1-color",
+				"name": "accent1-color",
+				"label": "Accent color 1",
+				"required": true,
+				"placeholder": "#CCC"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "color",
+				"id": "accent2-color",
+				"name": "accent2-color",
+				"label": "Accent color 2",
+				"required": true,
+				"placeholder": "#EEE"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "color",
+				"id": "bg-color",
+				"name": "bg-color",
+				"label": "Background color",
+				"required": true,
+				"placeholder": "#ffffff"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "color",
+				"id": "text-color",
+				"name": "text-color",
+				"label": "Font color",
+				"required": true,
+				"placeholder": "#000000"
+			}
+		},
+		{
+			"component": "CompoundFontSelector",
+			"props": {
+				"id": "header-font",
+				"name": "header-font",
+				"label": "Header Font Stack",
+				"required": true,
+				"value": "\"Montserrat\", Arial, sans-serif"
+			}
+		},
+		{
+			"component": "CompoundFontSelector",
+			"props": {
+				"id": "body-font",
+				"name": "body-font",
+				"label": "Body Font Stack",
+				"required": true,
+				"value": "\"Roboto\", Helvetica, sans-serif"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size1-min",
+				"name": "font-size1-min",
+				"label": "Font size 1 min",
+				"required": true,
+				"placeholder": "2.00rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size1-max",
+				"name": "font-size1-max",
+				"label": "Font size 1 max",
+				"required": true,
+				"placeholder": "3.00rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size2-min",
+				"name": "font-size2-min",
+				"label": "Font size 2 min",
+				"required": true,
+				"placeholder": "1.35rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size2-max",
+				"name": "font-size2-max",
+				"label": "Font size 2 max",
+				"required": true,
+				"placeholder": "1.75rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size3-min",
+				"name": "font-size3-min",
+				"label": "Font size 3 min",
+				"required": true,
+				"placeholder": "1.17rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size3-max",
+				"name": "font-size3-max",
+				"label": "Font size 3 max",
+				"required": true,
+				"placeholder": "1.35rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size4-min",
+				"name": "font-size4-min",
+				"label": "Font size 4 min",
+				"required": true,
+				"placeholder": "1.00rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size4-max",
+				"name": "font-size4-max",
+				"label": "Font size 4 max",
+				"required": true,
+				"placeholder": "1.25rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size5-min",
+				"name": "font-size5-min",
+				"label": "Font size 5 min",
+				"required": true,
+				"placeholder": "0.83rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size5-max",
+				"name": "font-size5-max",
+				"label": "Font size 5 max",
+				"required": true,
+				"placeholder": "1.00rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size6-min",
+				"name": "font-size6-min",
+				"label": "Font size 6 min",
+				"required": true,
+				"placeholder": "0.67rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-size6-max",
+				"name": "font-size6-max",
+				"label": "Font size 6 max",
+				"required": true,
+				"placeholder": "0.85rem"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-min-screen",
+				"name": "font-min-screen",
+				"label": "Font min screen",
+				"required": true,
+				"placeholder": "375px"
+			}
+		},
+		{
+			"component": "FormInput",
+			"props": {
+				"type": "text",
+				"id": "font-max-screen",
+				"name": "font-max-screen",
+				"label": "Font max screen",
+				"required": true,
+				"placeholder": "1440px"
+			}
+		}
+	]
+}

package/dist/components/structured/buzzwordbingo.js

@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import "../../css/pixelated.grid.scss";
 import './buzzwordbingo.css';
+import { buzzwords as defaultBuzzwords } from './buzzwordbingo.words';
 function getBingoWords(arr, x) {
     var myBingoWords = [...arr].sort(() => Math.random() - 0.5); // Shuffle the array
     myBingoWords = myBingoWords.slice(0, x); // Return the first x elements
@@ -10,10 +11,10 @@ function getBingoWords(arr, x) {
     return myBingoWords;
 }
 BuzzwordBingo.propTypes = {
-    buzzwords: PropTypes.array.isRequired,
+    buzzwords: PropTypes.array,
 };
 export function BuzzwordBingo(props) {
-    const buzzwords = props.buzzwords;
+    const buzzwords = props.buzzwords || defaultBuzzwords;
     const myBingoHeaders = ["B", "I", "N", "G", "O"];
     const [bingoWords, setBingoWords] = useState([]);
     useEffect(() => {