@pixelated-tech/components 3.2.14 → 3.3.1

package/dist/components/{pagebuilder → sitebuilder/page}/lib/pageStorageContentful.js

@@ -3,8 +3,8 @@
  *
  * Uses generic Contentful management functions with PageBuilder-specific logic
  */
-import { createEntry, updateEntry, deleteEntry, searchEntriesByField } from '../../cms/contentful.management';
-import { getContentfulEntriesByType } from '../../cms/contentful.delivery';
+import { createEntry, updateEntry, deleteEntry, searchEntriesByField } from '../../../cms/contentful.management';
+import { getContentfulEntriesByType } from '../../../cms/contentful.delivery';
 const CONTENT_TYPE = 'page';
 /**
  * Validate page name format

package/dist/components/sitebuilder/page/lib/pageStorageTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/components/structured/markdown.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { SmartImage } from "../cms/cloudinary.image";

package/dist/components/structured/recipe.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';

package/dist/components/structured/timeline.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { usePixelatedConfig } from '../config/config.client';

package/dist/css/pixelated.global.css

@@ -1,39 +1,4 @@
 
-/* ========================================
-========  DEFAULT COLOR STYLES   ==========
-======================================== */
-
-:root {
-  --primary-color: #369;
-  --secondary-color: #BCD;
-  --accent1-color: #CCC;
-  --accent2-color: #EEE;	
-  --bg-color: #fff;
-  --font-color: #000;
-}
-body{
-	background-color: var(--bg-color) !important;
-	color: var(--font-color);
-}
-
-
-/* ========================================
-========  DEFAULT FONT STYLES   ===========
-======================================== */
-
-:root {	
-	--header-font: "Montserrat", Verdana, sans-serif;
-	--body-font: "Roboto", Arial, sans-serif;
-}
-body { 
-	font-family: var(--body-font); 
-}
-h1, h2, h3, h4, h5, h6 {
-	line-height: 1.1;
-}
-html { font-size: 1.0rem; /* 16px; */ }
-
-
 /* ========================================
 ===========  DEFAULT STYLES   =============
 ======================================== */

package/dist/css/pixelated.grid.scss

@@ -1,4 +1,8 @@
 
+/* ========================================
+=============  GRID STYLES   ==============
+======================================== */
+
 @mixin rowBase {
     display: grid ;
     gap: 10px; /* Spacing between grid items */

package/dist/css/pixelated.visualdesign.scss

@@ -0,0 +1,88 @@
+/* ========================================
+========  DEFAULT COLOR STYLES   ==========
+======================================== */
+
+:root {
+  --primary-color: #369;
+  --secondary-color: #BCD;
+  --accent1-color: #CCC;
+  --accent2-color: #EEE;	
+  --bg-color: #fff;
+  --text-color: #000;
+}
+body{
+	background-color: var(--bg-color) !important;
+	color: var(--text-color);
+}
+
+/* ========================================
+======  DEFAULT FONT FACE STYLES   ========
+======================================== */
+
+:root {	
+	--header-font: "Montserrat", Verdana, sans-serif;
+	--body-font: "Roboto", Arial, sans-serif;
+}
+body { 
+	font-family: var(--body-font); 
+}
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1.1;
+}
+html { font-size: 1.0rem; /* 16px; */ }
+
+/* ========================================
+=======  DEFAULT FONT SIZE STYLES   =======
+======================================== */
+
+/* 
+https://hanjing.medium.com/font-sizing-4259801c04c1
+https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html 
+https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
+https://robertcelt95.medium.com/responsive-typography-that-actually-works-beyond-font-size-clamp-acf592b79774
+https://medium.com/better-web-type/the-state-of-fluid-web-typography-135cd26e0612
+*/
+
+/* --font-size1: font-size: 32px; 
+--font-size2: font-size: 24px; 
+--font-size3: font-size: 18.75px;
+--font-size4: font-size: 16px;
+--font-size5: font-size: 13.25px;
+--font-size6: font-size: 10.75px; */
+
+:root {
+  --font-size1-min: 2.00rem;
+  --font-size1-max: 3.00rem;
+
+  --font-size2-min: 1.35rem;
+  --font-size2-max: 1.75rem;
+
+  --font-size3-min: 1.17rem;
+  --font-size3-max: 1.35rem;
+
+  --font-size4-min: 1.00rem;
+  --font-size4-max: 1.25rem;
+
+  --font-size5-min: 0.83rem;
+  --font-size5-max: 1.00rem;
+
+  --font-size6-min: 0.67rem;
+  --font-size6-max: 0.85rem;
+
+  --font-min-screen: 375px;
+  --font-max-screen: 1440px;
+}
+
+$minScreen: var(--font-min-screen);
+$maxScreen: var(--font-max-screen);
+:root { 
+	@for $i from 1 through 6 {
+		$min: var(--font-size#{$i}-min); 
+		$max: var(--font-size#{$i}-max); 
+		$preferred: calc(#{$min} + ((#{$max} - #{$min}) * ((100vw - #{$minScreen}) / #{($maxScreen - $minScreen)})));
+		--font-size#{$i}: clamp(#{$min}, #{$preferred}, #{$max});
+	}
+}
+@for $i from 1 through 6 {
+   	h#{$i} { font-size: var(--font-size#{$i}); }
+}

package/dist/data/form.json

@@ -8,7 +8,7 @@
                 "defaultValue": "",
                 "autoComplete": "honorific-prefix",
                 "multiple": null,
-                "required": "required",
+                "required": true,
                 "display": "horizontal",
                 "label": "Title : ",
                 "options": [
@@ -31,7 +31,7 @@
                 "autoComplete": "given-name",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "First Name : ",
                 "tooltip": "Please type in your First Name"
             }
@@ -46,7 +46,7 @@
                 "autoComplete": "family-name",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Last Name : "
             }
         },
@@ -60,7 +60,7 @@
                 "autoComplete": "street-address",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Street Address : "
             }
         },
@@ -74,7 +74,7 @@
                 "autoComplete": "address-level2",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "City : "
             }
         },
@@ -87,7 +87,7 @@
                 "defaultValue": ["NJ", "SC"],
                 "autoComplete": "address-level1",
                 "multiple": "multiple",
-                "required": "required",
+                "required": true,
                 "display": "horizontal",
                 "label": "State : ",
                 "tooltip": "Please select your State",
@@ -156,7 +156,7 @@
                 "autoComplete": "postal-code",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Zip Code : ",
                 "validate": "isValidUSZipCode"
             }
@@ -171,7 +171,7 @@
                 "autoComplete": "tel",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Phone Number : ",
                 "validate": "isValidUSPhoneNumber"
             }
@@ -186,7 +186,7 @@
                 "autoComplete": "bday",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Birthday : ",
                 "validate": "isValidDate"
             }
@@ -198,7 +198,7 @@
                 "name": "age",
                 "defaultValue": "",
                 "multiple": null,
-                "required": "required",
+                "required": true,
                 "display": "horizontal",
                 "label": "Age : ",
                 "options": [
@@ -223,7 +223,7 @@
                 "name": "generation",
                 "defaultValue": null,
                 "multiple": null,
-                "required": "required",
+                "required": true,
                 "display": "horizontal",
                 "label": "Generation : ",
                 "options": [
@@ -248,7 +248,7 @@
                 "autoComplete": "email",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Email Address : ",
                 "validate": "isValidEmailAddress"
             }
@@ -261,7 +261,7 @@
                 "autoComplete": "sex",
                 "label": "Gender : ",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "validate": "isOneRadioSelected",
                 "tooltip": "Please select your gender",
                 "options": [
@@ -296,7 +296,7 @@
                 "autoComplete": "organization-title",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Job Title : "
             }
         },
@@ -310,7 +310,7 @@
                 "autoComplete": "organization",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Company : "
             }
         },
@@ -326,7 +326,7 @@
                 "min": "10000",
                 "max": "1000000",
                 "step": "1000",
-                "required": "required",
+                "required": true,
                 "label": "Salary : "
             }
         },
@@ -339,7 +339,7 @@
                 "defaultValue": null,
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "LinkedIn URL : ",
                 "validate": "isValidUrl"
             }
@@ -353,7 +353,7 @@
                 "cols": "40",
                 "defaultValue": null,
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Comments : ",
                 "tooltip": "Please enter your comments"
             }

package/dist/data/routes.json

@@ -1,13 +1,20 @@
 {
     "siteInfo": {
         "name": "Pixelated Technologies",
+        "author": "Brian Whaley",
         "description": "Custom web development and digital design agency specializing in React, Next.js, and modern web technologies",
         "url": "https://pixelated.tech",
         "email": "info@pixelated.tech",
+        "favicon": "/favicon.ico",
+        "favicon_sizes": "64x64 32x32 24x24 16x16",
+        "favicon_type": "image/x-icon",
+        "theme_color": "#369",
+        "background_color": "#ffffff",
+        "default_locale": "en",
+        "display": "standalone",
         "image": "/images/pix/pix-bg-512.gif",
         "image_height": "512",
         "image_width": "512",
-        "favicon": "/favicon.ico",
         "telephone": "+1-973-710-8008",
         "address": {
             "streetAddress": "10 Jade Circle",
@@ -24,6 +31,30 @@
         ],
         "keywords": "pixelated, web development, react, next.js, custom websites, digital design, small business"
     },
+    "visualdesign": {
+        "primary-color": { "value": "#369", "type": "color", "group": "palette", "label": "Primary color" },
+        "secondary-color": { "value": "#BCD", "type": "color", "group": "palette", "label": "Secondary color" },
+        "accent1-color": { "value": "#CCC", "type": "color", "group": "palette", "label": "Accent color 1" },
+        "accent2-color": { "value": "#EEE", "type": "color", "group": "palette", "label": "Accent color 2" },
+        "bg-color": { "value": "#ffffff", "type": "color", "group": "palette", "label": "Background color" },
+        "text-color": { "value": "#000000", "type": "color", "group": "palette", "label": "Font color" },
+        "header-font": { "value": "\"Montserrat\", Verdana, sans-serif", "type": "font", "group": "typography", "label": "Header font" },
+        "body-font": { "value": "\"Roboto\", Arial, sans-serif", "type": "font", "group": "typography", "label": "Body font" },
+        "font-size1-min": { "value": "2.00rem", "type": "size", "group": "typography", "label": "Font size 1 min" },
+        "font-size1-max": { "value": "3.00rem", "type": "size", "group": "typography", "label": "Font size 1 max" },
+        "font-size2-min": { "value": "1.35rem", "type": "size", "group": "typography", "label": "Font size 2 min" },
+        "font-size2-max": { "value": "1.75rem", "type": "size", "group": "typography", "label": "Font size 2 max" },
+        "font-size3-min": { "value": "1.17rem", "type": "size", "group": "typography", "label": "Font size 3 min" },
+        "font-size3-max": { "value": "1.35rem", "type": "size", "group": "typography", "label": "Font size 3 max" },
+        "font-size4-min": { "value": "1.00rem", "type": "size", "group": "typography", "label": "Font size 4 min" },
+        "font-size4-max": { "value": "1.25rem", "type": "size", "group": "typography", "label": "Font size 4 max" },
+        "font-size5-min": { "value": "0.83rem", "type": "size", "group": "typography", "label": "Font size 5 min" },
+        "font-size5-max": { "value": "1.00rem", "type": "size", "group": "typography", "label": "Font size 5 max" },
+        "font-size6-min": { "value": "0.67rem", "type": "size", "group": "typography", "label": "Font size 6 min" },
+        "font-size6-max": { "value": "0.85rem", "type": "size", "group": "typography", "label": "Font size 6 max" },
+        "font-min-screen": { "value": "375px", "type": "size", "group": "typography", "label": "Font min screen" },
+        "font-max-screen": { "value": "1440px", "type": "size", "group": "typography", "label": "Font max screen" }
+    },
     "routes": [
         {
             "name": "Home",

package/dist/data/shipping.to.json

@@ -11,7 +11,7 @@
                 "autoComplete": "name",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Name : ",
                 "tooltip": "Please enter your First and Last Name"
             }
@@ -26,7 +26,7 @@
                 "autoComplete": "street-address",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Street Address : ",
                 "tooltip": "Please enter your Street Address"
             }
@@ -41,7 +41,7 @@
                 "autoComplete": "address-level2",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "City : ",
                 "tooltip": "Please enter your City"
             }
@@ -55,7 +55,7 @@
                 "placeholder": "State",
                 "autoComplete": "address-level1",
                 "multiple": null,
-                "required": "required",
+                "required": true,
                 "display": "horizontal",
                 "label": "State : ",
                 "tooltip": "Please select your State",
@@ -124,7 +124,7 @@
                 "autoComplete": "postal-code",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Zip Code : ",
                 "tooltip": "Please enter your Zip Code",
                 "validate": "isValidUSZipCode"
@@ -139,7 +139,7 @@
                 "placeholder": "Country",
                 "autoComplete": "country",
                 "multiple": null,
-                "required": "required",
+                "required": true,
                 "display": "horizontal",
                 "label": "Country : ",
                 "tooltip": "Please select your Country",
@@ -353,7 +353,7 @@
                 "autoComplete": "tel",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Phone Number : ",
                 "tooltip": "Please enter your Phone Number",
                 "validate": "isValidUSPhoneNumber"
@@ -369,7 +369,7 @@
                 "autoComplete": "email",
                 "size": "40",
                 "display": "horizontal",
-                "required": "required",
+                "required": true,
                 "label": "Email Address : ",
                 "tooltip": "Please enter your Email Address",
                 "validate": "isValidEmailAddress"
@@ -397,7 +397,7 @@
                 "name": "shippingMethod",
                 "label": "Shipping Method : ",
                 "display": "vertical",
-                "required": "required",
+                "required": true,
                 "validate": "isOneRadioSelected",
                 "tooltip": "Please select your Shipping Method",
                 "options": [

package/dist/data/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"
+            }
+        }
+    ]
+}