@pixelated-tech/components 3.4.3 → 3.5.1

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

@@ -8,7 +8,8 @@
         "name": "name",
         "label": "Site Name",
         "required": true,
-        "placeholder": "Enter site name"
+        "placeholder": "Enter site name",
+        "size": "40"
       }
     },
     {
@@ -19,7 +20,8 @@
         "name": "author",
         "label": "Author",
         "required": true,
-        "placeholder": "Enter author name"
+        "placeholder": "Enter author name",
+        "size": "40"
       }
     },
     {
@@ -41,7 +43,8 @@
         "name": "url",
         "label": "Site URL",
         "required": true,
-        "placeholder": "https://example.com"
+        "placeholder": "https://example.com",
+        "size": "40"
       }
     },
     {
@@ -52,7 +55,8 @@
         "name": "email",
         "label": "Email",
         "required": true,
-        "placeholder": "contact@example.com"
+        "placeholder": "contact@example.com",
+        "size": "40"
       }
     },
     {
@@ -63,7 +67,8 @@
         "name": "favicon",
         "label": "Favicon",
         "required": true,
-        "placeholder": "/favicon.ico"
+        "placeholder": "/favicon.ico",
+        "size": "40"
       }
     },
     {
@@ -74,7 +79,8 @@
         "name": "favicon_sizes",
         "label": "Favicon Sizes",
         "required": true,
-        "placeholder": "64x64 32x32 24x24 16x16"
+        "placeholder": "64x64 32x32 24x24 16x16",
+        "size": "40"
       }
     },
     {
@@ -85,7 +91,8 @@
         "name": "favicon_type",
         "label": "Favicon Type",
         "required": true,
-        "placeholder": "image/x-icon"
+        "placeholder": "image/x-icon",
+        "size": "40"
       }
     },
     {
@@ -118,7 +125,8 @@
         "name": "default_locale",
         "label": "Default Locale",
         "required": true,
-        "placeholder": "en"
+        "placeholder": "en",
+        "size": "40"
       }
     },
     {
@@ -143,7 +151,8 @@
         "id": "image",
         "name": "image",
         "label": "Site Image",
-        "placeholder": "/images/site-image.jpg"
+        "placeholder": "/images/site-image.jpg",
+        "size": "40"
       }
     },
     {
@@ -153,7 +162,8 @@
         "id": "image_height",
         "name": "image_height",
         "label": "Image Height",
-        "placeholder": "512"
+        "placeholder": "512",
+        "size": "40"
       }
     },
     {
@@ -163,7 +173,8 @@
         "id": "image_width",
         "name": "image_width",
         "label": "Image Width",
-        "placeholder": "512"
+        "placeholder": "512",
+        "size": "40"
       }
     },
     {
@@ -173,7 +184,8 @@
         "id": "telephone",
         "name": "telephone",
         "label": "Telephone",
-        "placeholder": "+1-555-123-4567"
+        "placeholder": "+1-555-123-4567",
+        "size": "40"
       }
     },
     {
@@ -183,7 +195,8 @@
         "id": "priceRange",
         "name": "priceRange",
         "label": "Price Range",
-        "placeholder": "$$"
+        "placeholder": "$$",
+        "size": "40"
       }
     },
     {
@@ -193,7 +206,8 @@
         "id": "keywords",
         "name": "keywords",
         "label": "Keywords",
-        "placeholder": "web development, design, services"
+        "placeholder": "web development, design, services",
+        "size": "40"
       }
     }
   ]

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

@@ -8,7 +8,7 @@
 				"name": "primary-color",
 				"label": "Primary color",
 				"required": true,
-				"placeholder": "#369"
+				"placeholder": "#336699"
 			}
 		},
 		{
@@ -19,7 +19,7 @@
 				"name": "secondary-color",
 				"label": "Secondary color",
 				"required": true,
-				"placeholder": "#BCD"
+				"placeholder": "#BBCCDD"
 			}
 		},
 		{
@@ -30,7 +30,7 @@
 				"name": "accent1-color",
 				"label": "Accent color 1",
 				"required": true,
-				"placeholder": "#CCC"
+				"placeholder": "#CCCCCC"
 			}
 		},
 		{
@@ -41,7 +41,7 @@
 				"name": "accent2-color",
 				"label": "Accent color 2",
 				"required": true,
-				"placeholder": "#EEE"
+				"placeholder": "#EEEEEE"
 			}
 		},
 		{

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

@@ -8,6 +8,7 @@ import { FormEngine } from './formengine';
 /* =====  FORM BUILDER =====
 Display all the components for a Form Builder -
 Element Buttons, Element Details, and the Form */
+FormBuilder.propTypes = {};
 export function FormBuilder() {
     const [formData, setFormData] = useState({ fields: [] });
     const [fieldFormData, setFieldFormData] = useState({ fields: [] });

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

@@ -53,7 +53,7 @@ const useFormComponent = (props) => {
         const customOnChange = props.onChange || (props.parent && props.parent.onChange);
         if (customOnChange) {
             try {
-                customOnChange(value);
+                customOnChange(event);
             }
             catch {
                 // swallow handler errors to avoid breaking validation flow
@@ -293,7 +293,6 @@ FormRadioOption.propTypes = {
 function FormRadioOption(props) {
     const inputProps = setupInputProps(props);
     const isChecked = props.parent.checked === props.value;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleChange = (e) => {
         if (props.parent.onChange) {
             props.parent.onChange(props.value);
@@ -374,7 +373,7 @@ export function FormDataList(props) {
     return (_jsx("datalist", { id: props.id, children: options }));
 }
 FormFieldset.propTypes = {};
-export function FormFieldset() {
+export function FormFieldset(props) {
     return (_jsx(_Fragment, {}));
 }
 // Re-export FontSelector for use in forms

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -14,14 +15,17 @@ FormEngine.propTypes = {
     onSubmitHandler: PropTypes.func,
     formData: PropTypes.object.isRequired
 };
+export function FormEngine(props) {
+    return (_jsx(FormValidationProvider, { children: _jsx(FormEngineInner, { ...props }) }));
+}
 function FormEngineInner(props) {
     const { validateAllFields } = useFormValidation();
     function generateFormProps(props) {
         // GENERATE PROPS TO RENDER THE FORM CONTAINER, INTERNAL FUNCTION
         if (debug)
             console.log("Generating Form Props");
-        const formProps = JSON.parse(JSON.stringify(props));
-        ['formData', 'onSubmitHandler'].forEach(e => delete formProps[e]);
+        // Create a clean copy without non-serializable properties
+        const { formData, onSubmitHandler, ...formProps } = props;
         return formProps;
     }
     generateNewFields.propTypes = {
@@ -77,6 +81,3 @@ function FormEngineInner(props) {
     }
     return (_jsx("form", { ...generateFormProps(props), onSubmit: (event) => { handleSubmit(event); }, suppressHydrationWarning: true, children: generateNewFields(props) }));
 }
-export function FormEngine(props) {
-    return (_jsx(FormValidationProvider, { children: _jsx(FormEngineInner, { ...props }) }));
-}

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

@@ -1,5 +1,7 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import * as FVF from './formfieldvalidations';
 /**
  * Centralized field validation service
@@ -51,6 +53,9 @@ export function useFormValidation() {
     }
     return context;
 }
+FormValidationProvider.propTypes = {
+    children: PropTypes.node.isRequired
+};
 export function FormValidationProvider({ children }) {
     const [fieldValidity, setFieldValidity] = useState({});
     const [fieldErrors, setFieldErrors] = useState({});

package/dist/components/sitebuilder/page/components/PageBuilderUI.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import PropTypes from 'prop-types';
 import { PageSectionHeader } from '../../../general/semantic';
 import { usePageBuilder } from '../lib/usePageBuilder';
 import { ComponentSelector } from '../components/ComponentSelector';
@@ -13,7 +14,10 @@ import './pagebuilder.scss';
  * PageBuilderUI - Main orchestrator component
  * Composes all sub-components and manages layout with inline editing
  */
-export function PageBuilderUI({ apiEndpoint = '/api/pagebuilder' } = {}) {
+PageBuilderUI.propTypes = {
+    apiEndpoint: PropTypes.string,
+};
+export function PageBuilderUI({ apiEndpoint = '/api/pagebuilder' }) {
     const { pageJSON, setPageJSON, editableComponent, selectedPath, editMode, setEditableComponent, setSelectedPath, setEditMode, handleAddNewComponent, handleSelectComponent, handleEditComponent, cancelEdit, handleDeleteComponent, handleMoveUp, handleMoveDown, } = usePageBuilder();
     const [selectorKey, setSelectorKey] = React.useState(0);
     // Handle loading a saved page

package/dist/components/structured/buzzwordbingo.css

@@ -33,7 +33,6 @@
 	}
 
 	.bingoBoxFreeSpace {
-		background-color: #EEE;
 		font-size: 1.1em;
 		font-weight: bold;
 	}

package/dist/components/structured/recipe.js

@@ -61,7 +61,6 @@ RecipeBook.propTypes = {
     }).isRequired,
     recipeCategories: PropTypes.array.isRequired
 };
-// export type RecipeBookType = InferProps<typeof RecipeBook.propTypes>;
 export function RecipeBook(props) {
     const [recipeElems] = useState(generateMyElems());
     const [outputElems, setOutputElems] = useState([]);
@@ -205,6 +204,7 @@ export function RecipePickList(props) {
     return (_jsx("form", { children: _jsx("select", { id: "recipe-list", name: "recipe-list", onChange: recipeListChanged, children: recipeOptions }) }));
 }
 /* ========== RECIPE BACK TO TOP ========== */
+BackToTop.propTypes = {};
 export function BackToTop() {
     function scrollToTop() {
         window.scroll({

package/dist/components/structured/socialcard.js

@@ -30,10 +30,10 @@ function removeDeadHrefs(element) {
     });
     return doc.body.innerHTML;
 }
+/* ========== SOCIALCARD ========== */
 SocialCards.propTypes = {
     sources: PropTypes.object.isRequired
 };
-/* ========== SOCIALCARDS ========== */
 export function SocialCards(props) {
     const debug = false;
     const [state, setState] = useState({
@@ -306,12 +306,12 @@ SocialCard.propTypes = {
     iconSrcAlt: PropTypes.string.isRequired,
     card: PropTypes.any.isRequired
 };
-/* ========== SOCIALCARD ========== */
 export function SocialCard(props) {
     const config = usePixelatedConfig();
     return (_jsx("div", { className: "masonryItem", children: _jsxs("div", { className: "card", children: [_jsx("div", { className: "cardTitle", children: _jsxs("a", { href: props.card.link, target: "_blank", rel: "noopener noreferrer", children: [_jsx(SmartImage, { className: "cardIcon", src: props.iconSrc, title: props.iconSrcAlt, alt: props.iconSrcAlt, cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), props.card.title] }) }), _jsx("div", { className: "cardBody", dangerouslySetInnerHTML: { __html: removeDeadHrefs(props.card.description) } }), _jsx("div", { className: "cardDate", children: props.card.pubDate })] }) }, props.card.guid));
 }
 /* ========== SPINNER ========== */
+SocialCardsLoading.propTypes = {};
 export function SocialCardsLoading() {
     return (_jsx("div", { className: "cardsLoading", children: _jsx("div", { children: "Loading..." }) }));
 }

package/dist/components/utilities/functions.js

@@ -9,7 +9,6 @@ export function html2dom(str) {
     dom.innerHTML = str;
     return dom;
 }
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function mergeDeep(a, b) {
     // first is default vals, all other objects overwrite
     const extended = {};
@@ -125,3 +124,85 @@ export function logAllChange() {
 }
 // Call the function to activate the listeners once the script is loaded
 // logChangeToAllElements();
+/* ===== CLIENT COMPONENT DETECTION ===== */
+/**
+ * Regex patterns that identify client-only code requiring browser execution
+ * Used by both ESLint rules and build scripts to determine client vs server components
+ */
+export const CLIENT_ONLY_PATTERNS = [
+    /\baddEventListener\b/,
+    /\bcreateContext\b/,
+    /\bdocument\./,
+    /\blocalStorage\b/,
+    /\bnavigator\./,
+    /\bonBlur\b/,
+    /\bonChange\b/,
+    /\bonClick\b/,
+    /\bonFocus\b/,
+    /\bonInput\b/,
+    /\bonKey\b/,
+    /\bonMouse\b/,
+    /\bonSubmit\b/,
+    /\bremoveEventListener\b/,
+    /\bsessionStorage\b/,
+    /\buseCallback\b/,
+    /\buseContext\b/,
+    /\buseEffect\b/,
+    /\buseLayoutEffect\b/,
+    /\buseMemo\b/,
+    /\buseReducer\b/,
+    /\buseRef\b/,
+    /\buseState\b/,
+    /\bwindow\./,
+    /["']use client["']/ // Client directive
+];
+/**
+ * Determines if a component file contains client-only code that requires browser execution
+ * @param fileContent - The source code content of the file
+ * @returns true if the file contains client-only patterns
+ */
+export function isClientComponent(fileContent) {
+    return CLIENT_ONLY_PATTERNS.some(pattern => pattern.test(fileContent));
+}
+/* ===== COMPONENT FILE DETECTION ===== */
+/**
+ * Glob patterns for finding component files
+ */
+export const TS_FILE_IGNORE_PATTERNS = [
+    '**/*.d.ts',
+    '**/*.test.ts',
+    '**/*.spec.ts',
+    '**/*.stories.ts',
+    '**/documentation/**',
+    '**/examples/**',
+    '**/*.example.*'
+];
+export const TSX_FILE_IGNORE_PATTERNS = [
+    '**/*.test.tsx',
+    '**/*.spec.tsx',
+    '**/*.stories.tsx',
+    '**/documentation/**',
+    '**/examples/**',
+    '**/*.example.*'
+];
+/* ===== SERVER COMPONENT DETECTION ===== */
+/**
+ * Regex patterns that identify server-only code that should not run on client
+ */
+export const SERVER_ONLY_PATTERNS = [
+    /["']use server["']/, // Server directive
+    /\b__dirname\b/,
+    /\b__filename\b/,
+    /@aws-sdk/,
+    /\bchild_process\b/,
+    /\bexec\b/,
+    /\bexecAsync\b/,
+    /\bfs\b/,
+    /\bfs\.readFileSync\b/,
+    /\bfs\.existsSync\b/,
+    /\bimport.*googleapis\b|\brequire.*googleapis\b/, // Actual import of googleapis
+    /\bimport.*path\b|\brequire.*path\b/, // Actual import of path module
+    /\bprocess\.cwd\(\)/,
+    /\brequire\.resolve\b/,
+    /\butil\b/
+];

package/dist/components/utilities/gemini-api.client.js

@@ -0,0 +1,76 @@
+'use client';
+/**
+ * Service for integrating with Google Gemini API for SEO recommendations
+ */
+export class GeminiApiService {
+    apiKey;
+    baseUrl;
+    constructor(apiKey, baseUrl = 'https://generativelanguage.googleapis.com') {
+        this.apiKey = apiKey;
+        this.baseUrl = baseUrl;
+    }
+    /**
+   * Generate SEO recommendations for a route
+   */
+    async generateRouteRecommendations(request) {
+        try {
+            // Use the proxy API route instead of direct Google API call
+            const response = await fetch('/api/ai/recommendations', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(request)
+            });
+            if (!response.ok) {
+                const errorText = await response.text();
+                console.error('AI API Error Response:', errorText);
+                throw new Error(`AI API error: ${response.status} ${response.statusText}`);
+            }
+            const data = await response.json();
+            if (!data.success) {
+                throw new Error(data.error || 'AI API request failed');
+            }
+            return {
+                success: true,
+                data: data.data
+            };
+        }
+        catch (error) {
+            console.error('AI API error:', error);
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : 'Unknown error occurred'
+            };
+        }
+    }
+    /**
+   * List available models to debug API issues
+   */
+    async listModels() {
+        try {
+            const response = await fetch(`${this.baseUrl}/v1/models?key=${this.apiKey}`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to list models: ${response.status} ${response.statusText}`);
+            }
+            const data = await response.json();
+            console.log('Available models:', data);
+            return data;
+        }
+        catch (error) {
+            console.error('Error listing models:', error);
+            return null;
+        }
+    }
+}
+/**
+ * Create a Gemini API service instance
+ */
+export function createGeminiApiService(apiKey) {
+    return new GeminiApiService(apiKey);
+}