@pixelated-tech/components 3.2.14 → 3.3.1

package/dist/components/sitebuilder/config/google-fonts.js

@@ -0,0 +1,112 @@
+/**
+ * Google Fonts Integration
+ * Fetches and caches Google Fonts data for use in visual design forms
+ */
+// Cache for Google Fonts data
+let fontsCache = null;
+let cacheTimestamp = 0;
+const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
+// Fallback Google fonts for when API is unavailable (sorted alphabetically)
+const FALLBACK_GOOGLE_FONTS = [
+    { family: 'Cairo', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Crimson Text', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Fira Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Inter', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Lato', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Libre Baskerville', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Lora', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Merriweather', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Montserrat', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Nunito', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Open Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Oswald', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Playfair Display', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Poppins', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'PT Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Raleway', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Roboto', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Source Sans Pro', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Ubuntu', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Work Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+];
+/**
+ * Fetch Google Fonts list from API
+ * Note: Requires GOOGLE_FONTS_API_KEY environment variable
+ */
+export async function fetchGoogleFonts() {
+    // Check cache first
+    if (fontsCache && (Date.now() - cacheTimestamp) < CACHE_DURATION) {
+        return fontsCache;
+    }
+    const apiKey = process.env.GOOGLE_FONTS_API_KEY;
+    if (!apiKey) {
+        console.warn('GOOGLE_FONTS_API_KEY not set, returning empty fonts list');
+        return [];
+    }
+    try {
+        const response = await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`);
+        if (!response.ok) {
+            throw new Error(`Google Fonts API error: ${response.status}`);
+        }
+        const data = await response.json();
+        // Cache the results
+        fontsCache = data.items;
+        cacheTimestamp = Date.now();
+        return data.items;
+    }
+    catch (error) {
+        console.error('Failed to fetch Google Fonts:', error);
+        return [];
+    }
+}
+/**
+ * Get font options for form dropdowns
+ */
+export async function getFontOptions() {
+    const fonts = await fetchGoogleFonts();
+    // If no fonts loaded from API, use fallback popular fonts
+    if (!fonts || fonts.length === 0) {
+        return FALLBACK_GOOGLE_FONTS
+            .sort((a, b) => a.family.localeCompare(b.family))
+            .map((font) => ({
+            value: font.family,
+            label: `${font.family} (${font.category})`,
+            category: font.category
+        }));
+    }
+    return fonts
+        .sort((a, b) => a.family.localeCompare(b.family))
+        .map((font) => ({
+        value: font.family,
+        label: `${font.family} (${font.category})`,
+        category: font.category
+    }));
+}
+/**
+ * Generate Google Fonts CSS import URL for given fonts
+ */
+export function generateGoogleFontsUrl(fonts) {
+    if (!fonts.length)
+        return '';
+    // Clean font names and create URL
+    const cleanFonts = fonts
+        .map(font => font.replace(/['"]/g, '').trim())
+        .filter(font => font.length > 0);
+    if (!cleanFonts.length)
+        return '';
+    const fontParam = cleanFonts
+        .map(font => font.replace(/\s+/g, '+'))
+        .join('|');
+    return `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
+}
+/**
+ * Generate HTML link tag for Google Fonts
+ */
+export function generateGoogleFontsLink(fonts) {
+    const url = generateGoogleFontsUrl(fonts);
+    if (!url)
+        return '';
+    return `<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="${url}" rel="stylesheet">`;
+}

package/dist/components/{pagebuilder → sitebuilder}/form/form.css

@@ -59,47 +59,68 @@ form span {
 	vertical-align: middle;
 }
 
-.tooltip {
-	display: inline;
-	margin-right: 10px;
+
+/* ========================================
+==============    TOOLTIP    ==============
+======================================== */
+   
+.tooltip-container {
+	display: inline-block;
 	position: relative;
+	margin-left: 5px;
+	vertical-align: middle;
 }
 
-.tooltipIcon {
-  	/* display: inline;
-	color: white !important;
-    background-color: #369;
-    border-radius: 20px;
-    padding: 0 3px; */
-    vertical-align: middle;
-	padding: 5px;
-    box-shadow: none;
-    background-color: transparent;
-    border: none;
+.tooltip-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.0rem;
+	font-weight: bold;
+	cursor: pointer;
+	padding: 0 3px;
+	line-height: 1;
+	color: #00F;
 }
 
-.tooltipIcon img {
-  	width: 20px;
-	/* margin: 5px 0 0 -10px; */
-	background-color: #DDD;
-    border-radius: 5px;
+.tooltip-icon-validate {
+	color: #d00;
 }
 
-.tooltipText {
-  	display: none;
+.tooltip-text {
 	position: absolute;
-	top: -25px;
-    left: 25px;
-	width: 200px;
-	padding: 3px 8px;
-	color: #fff;
-	text-align: center;
-	background-color: #666;
-    border: 1px solid white;
-    border-radius: 4px;
-    box-shadow: -3px 0 10px #369, 0 3px 10px #369, 3px 0 10px #369, 0 -3px 10px #369;
+	top: -15px;
+	left: 35px;
+	min-width: 200px;
+	max-width: 300px;
+	padding: 8px 12px;
+	background-color: #333;
+	color: white;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+	z-index: 1000;
+	font-size: 0.9em;
+	white-space: normal;
 }
-.tooltip a {
-	/* pointer-events: none; */
-	text-decoration: none;
+
+.tooltip-text::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: -8px;
+	transform: translateY(-50%);
+	width: 0;
+	height: 0;
+	border-top: 8px solid transparent;
+	border-bottom: 8px solid transparent;
+	border-right: 8px solid #333;
+	z-index: 1001;
+}
+
+.tooltip-text-item {
+	margin-bottom: 4px;
+}
+
+.tooltip-text-item:last-child {
+	margin-bottom: 0;
 }

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

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import * as FC from './formcomponents';
+import { mapTypeToComponent, generateTypeField, debug } from './formutils';
+import { FormEngine } from './formengine';
+/* =====  FORM BUILDER =====
+Display all the components for a Form Builder -
+Element Buttons, Element Details, and the Form */
+export function FormBuilder() {
+    const [formData, setFormData] = useState({ fields: [] });
+    const [fieldFormData, setFieldFormData] = useState({ fields: [] });
+    function appendFormData(event) {
+        // APPEND JSON FOR NEW FIELD TO EXISTING JSON CONFIG OBJECT - EXPOSED EXTERNAL
+        if (debug)
+            console.log("Appending form Data...");
+        const props = {};
+        const target = event.target;
+        for (const prop in target) {
+            const thisProp = target[prop];
+            if (thisProp && thisProp.value && (thisProp.value !== Object(thisProp.value))) {
+                props[thisProp.name] = thisProp.value;
+            }
+        }
+        const field = {};
+        field.props = props;
+        field.component = mapTypeToComponent(field.props.type);
+        let fields = [];
+        if (Object.keys(formData).length > 0) {
+            fields = JSON.parse(JSON.stringify(formData.fields));
+        }
+        fields[fields.length] = field;
+        setFormData({ fields: fields });
+        setFieldFormData({ fields: [] });
+        return (field);
+    }
+    /* function getCircularReplacer() {
+        const seen = new WeakSet();
+        return (key, value) => {
+            if (typeof value === 'object' && value !== null) {
+                if (seen.has(value)) {
+                    return ; // return undefined ;
+                }
+                seen.add(value);
+            }
+            return value;
+        };
+    } */
+    return (_jsxs("div", { className: "section-container", children: [_jsxs("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: [_jsx(FormBuild, { setFormData: setFieldFormData }), _jsx("div", {}), _jsx(FormEngine, { name: "field_props", id: "field_props", onSubmitHandler: appendFormData, formData: fieldFormData })] }), _jsx("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: _jsx("pre", { style: { width: '100%' }, children: JSON.stringify(formData, null, 2) }) }), _jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {})] }), _jsx("div", { style: { display: 'block', verticalAlign: 'top' }, children: _jsx(FormEngine, { formData: formData || {} }) })] }));
+}
+/*
+===== FORM BUILD =====
+Dynamically generate, component by component, and prop by prop,
+the JSON to create a form via FormEngine
+*/
+FormBuild.propTypes = {
+    setFormData: PropTypes.func.isRequired,
+};
+export function FormBuild(props) {
+    function generateFieldJSON(component, type) {
+        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - INTERNAL
+        if (debug)
+            console.log("Generating Form JSON for ", component, " Type : ", type);
+        const form = { fields: [] };
+        let i = 0;
+        for (const prop in FC[component].propTypes) {
+            const field = {};
+            field.component = 'FormInput';
+            const props = {};
+            props.label = prop;
+            props.name = prop;
+            props.id = prop;
+            props.type = 'text';
+            if (prop === 'type') {
+                props.disabled = true;
+                props.value = type;
+                props.list = 'inputTypes';
+            }
+            field.props = props;
+            form.fields[i] = field;
+            i++;
+        }
+        const addButton = {
+            component: 'FormButton',
+            props: {
+                label: 'Add ' + component,
+                type: 'submit',
+                id: 'Add ' + component,
+                text: 'Add ' + component
+            }
+        };
+        form.fields[i] = addButton;
+        return (form);
+    }
+    function handlePhaseOneSubmit(event) {
+        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - EXTERNAL
+        const target = event.target;
+        const typeElement = target.elements.namedItem('type');
+        const myType = typeElement ? typeElement.value : '';
+        const myComponent = mapTypeToComponent(myType);
+        const fieldJSON = generateFieldJSON(myComponent, myType);
+        props.setFormData(fieldJSON);
+        return true;
+    }
+    return (_jsx(_Fragment, { children: _jsx(FormEngine, { formData: generateTypeField(), onSubmitHandler: event => { handlePhaseOneSubmit(event); }, name: "build", id: "build", method: "post" }) }));
+}