@pixelated-tech/components 3.2.14 → 3.3.0

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

@@ -0,0 +1,206 @@
+// Shared utility functions for form components
+import { generateKey, capitalize, attributeMap } from '../../utilities/functions';
+export const debug = false;
+/**
+ * Maps input type to form component name
+ */
+export function mapTypeToComponent(myType) {
+    if (debug)
+        console.log("Mapping Type Field to Component");
+    let myComponent = (["button"].includes(myType)) ? 'FormButton' :
+        (["checkbox"].includes(myType)) ? 'FormCheckbox' :
+            (["datalist"].includes(myType)) ? 'FormDataList' :
+                (["radio"].includes(myType)) ? 'FormRadio' :
+                    (["select"].includes(myType)) ? 'FormSelect' :
+                        (["textarea"].includes(myType)) ? 'FormTextarea' :
+                            "FormInput";
+    return myComponent;
+}
+/**
+ * Generates field JSON for form building
+ */
+export function generateFieldJSON(component, type) {
+    const form = {};
+    form.fields = [];
+    // Common fields for all components
+    const commonFields = [
+        {
+            component: 'FormInput',
+            props: {
+                label: 'ID : ',
+                name: 'id',
+                id: 'id',
+                type: 'text',
+                required: true
+            }
+        },
+        {
+            component: 'FormInput',
+            props: {
+                label: 'Label : ',
+                name: 'label',
+                id: 'label',
+                type: 'text'
+            }
+        }
+    ];
+    // Type-specific fields
+    let typeSpecificFields = [];
+    if (component === 'FormSelect') {
+        typeSpecificFields = [
+            {
+                component: 'FormTextarea',
+                props: {
+                    label: 'Options (JSON) : ',
+                    name: 'options',
+                    id: 'options',
+                    rows: 5,
+                    placeholder: '[{"value": "option1", "text": "Option 1"}, {"value": "option2", "text": "Option 2"}]'
+                }
+            }
+        ];
+    }
+    else if (component === 'FormRadio' || component === 'FormCheckbox') {
+        typeSpecificFields = [
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Value : ',
+                    name: 'value',
+                    id: 'value',
+                    type: 'text'
+                }
+            },
+            {
+                component: 'FormTextarea',
+                props: {
+                    label: 'Options (JSON) : ',
+                    name: 'options',
+                    id: 'options',
+                    rows: 5,
+                    placeholder: '[{"value": "option1", "text": "Option 1"}, {"value": "option2", "text": "Option 2"}]'
+                }
+            }
+        ];
+    }
+    else {
+        typeSpecificFields = [
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Type : ',
+                    name: 'type',
+                    id: 'type',
+                    type: 'text',
+                    value: type,
+                    list: 'inputTypes'
+                }
+            },
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Placeholder : ',
+                    name: 'placeholder',
+                    id: 'placeholder',
+                    type: 'text'
+                }
+            },
+            {
+                component: 'FormInput',
+                props: {
+                    label: 'Value : ',
+                    name: 'value',
+                    id: 'value',
+                    type: 'text'
+                }
+            }
+        ];
+    }
+    // Add required field
+    const requiredField = {
+        component: 'FormCheckbox',
+        props: {
+            label: 'Required : ',
+            name: 'required',
+            id: 'required',
+            value: 'required'
+        }
+    };
+    // Add validation field
+    const validationField = {
+        component: 'FormInput',
+        props: {
+            label: 'Validate : ',
+            name: 'validate',
+            id: 'validate',
+            type: 'text',
+            list: 'validationTypes',
+            placeholder: 'isValidEmailAddress, isValidUrl, etc.'
+        }
+    };
+    // Combine all fields
+    let i = 0;
+    [...commonFields, ...typeSpecificFields, requiredField, validationField].forEach(field => {
+        form.fields[i] = field;
+        i++;
+    });
+    // Add submit button
+    const addButton = {
+        component: 'FormButton',
+        props: {
+            label: 'Add ' + component,
+            type: 'submit',
+            id: 'Add ' + component,
+            text: 'Add ' + component
+        }
+    };
+    form.fields[i] = addButton;
+    return form;
+}
+/**
+ * Generates type selection field for form builder
+ */
+export function generateTypeField() {
+    const form = {};
+    const typeField = {
+        component: 'FormInput',
+        props: {
+            label: 'Type : ',
+            name: 'type',
+            id: 'type',
+            type: 'text',
+            list: 'inputTypes'
+        }
+    };
+    const addButton = {
+        component: 'FormButton',
+        props: {
+            label: 'Build',
+            type: 'submit',
+            id: 'build',
+            text: '===  Build  ==='
+        }
+    };
+    form.fields = [typeField, addButton];
+    return form;
+}
+/**
+ * Converts numeric string props to numbers
+ */
+export function convertNumericProps(props) {
+    const numericProps = ['maxLength', 'minLength', 'rows', 'cols', 'size', 'step'];
+    numericProps.forEach(prop => {
+        if (props[prop] !== undefined &&
+            props[prop] !== null &&
+            props[prop] !== '') {
+            if (typeof props[prop] === 'string') {
+                const num = Number(props[prop]);
+                if (!isNaN(num)) {
+                    props[prop] = num;
+                }
+            }
+        }
+    });
+}
+// Re-export utilities from main utilities file for convenience
+export { generateKey, capitalize, attributeMap };

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

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback } from 'react';
+import * as FVF from './formfieldvalidations';
+/**
+ * Centralized field validation service
+ */
+export async function validateField(fieldProps, event) {
+    const errors = [];
+    let isValid = true;
+    // 1. Field-specific validation (e.g., isValidEmailAddress, isValidUrl, etc.)
+    if (fieldProps.validate && typeof fieldProps.validate === "string" && fieldProps.validate in FVF) {
+        const fieldValid = FVF[fieldProps.validate](event.target);
+        if (!fieldValid) {
+            isValid = false;
+            errors.push(`${fieldProps.validate} validation failed`);
+        }
+    }
+    // 2. Parent validation (for grouped/nested fields)
+    if (fieldProps.parent?.validate && typeof fieldProps.parent.validate === "string" && fieldProps.parent.validate in FVF) {
+        const parentValid = FVF[fieldProps.parent.validate](event.target);
+        if (!parentValid) {
+            isValid = false;
+            errors.push(`Parent ${fieldProps.parent.validate} validation failed`);
+        }
+    }
+    // 3. HTML5 required validation
+    if (fieldProps.required) {
+        const requiredValid = event.target.checkValidity();
+        if (!requiredValid) {
+            isValid = false;
+            errors.push('Required field validation failed');
+        }
+    }
+    // 4. Required not empty check
+    if (fieldProps.required && !event.target.value) {
+        isValid = false;
+        errors.push('Field cannot be empty');
+    }
+    // 5. Custom validation rules can be added here
+    // Example: minimum length, maximum length, pattern matching, etc.
+    return { isValid, errors };
+}
+/**
+ * Form validation context for managing form-wide validation state
+ */
+const FormValidationContext = createContext(null);
+export function useFormValidation() {
+    const context = useContext(FormValidationContext);
+    if (!context) {
+        throw new Error('useFormValidation must be used within FormValidationProvider');
+    }
+    return context;
+}
+export function FormValidationProvider({ children }) {
+    const [fieldValidity, setFieldValidity] = useState({});
+    const [fieldErrors, setFieldErrors] = useState({});
+    const validateField = useCallback((fieldId, isValid, errors) => {
+        setFieldValidity(prev => ({ ...prev, [fieldId]: isValid }));
+        setFieldErrors(prev => ({ ...prev, [fieldId]: errors }));
+    }, []);
+    const validateAllFields = useCallback(() => {
+        return Object.values(fieldValidity).every(valid => valid === true);
+    }, [fieldValidity]);
+    const resetValidation = useCallback(() => {
+        setFieldValidity({});
+        setFieldErrors({});
+    }, []);
+    const isFormValid = Object.values(fieldValidity).every(valid => valid === true);
+    const value = {
+        fieldValidity,
+        fieldErrors,
+        isFormValid,
+        validateField,
+        validateAllFields,
+        resetValidation
+    };
+    return (_jsx(FormValidationContext.Provider, { value: value, children: children }));
+}
+/**
+ * Cross-field validation functions
+ */
+export function validatePasswordMatch(formData) {
+    const password = formData.password?.value;
+    const confirm = formData.passwordConfirm?.value;
+    if (!password || !confirm) {
+        return { isValid: true, errors: [] }; // Not required fields
+    }
+    const isValid = password === confirm;
+    return {
+        isValid,
+        errors: isValid ? [] : ['Passwords do not match']
+    };
+}
+export function validateAgeRestriction(formData) {
+    const age = parseInt(formData.age?.value);
+    const hasParentalConsent = formData.parentalConsent?.value === 'yes';
+    if (isNaN(age) || age >= 13) {
+        return { isValid: true, errors: [] };
+    }
+    const isValid = hasParentalConsent;
+    return {
+        isValid,
+        errors: isValid ? [] : ['Parental consent required for users under 13']
+    };
+}
+/**
+ * Form-level validation orchestrator
+ */
+export function validateFormLevel(formData, customValidators = []) {
+    const allErrors = [];
+    let isValid = true;
+    // Run custom cross-field validations
+    const defaultValidators = [validatePasswordMatch, validateAgeRestriction];
+    const allValidators = [...defaultValidators, ...customValidators];
+    for (const validator of allValidators) {
+        const result = validator(formData);
+        if (!result.isValid) {
+            isValid = false;
+            allErrors.push(...result.errors);
+        }
+    }
+    return { isValid, errors: allErrors };
+}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from 'prop-types';
 // import { PageSectionHeader } from '../../general/pixelated.headers';
-import { FormEngine } from '../form/form';
+import { FormEngine } from '../../form/formengine';
 /**
  * ComponentPropertiesForm - Displays the component properties form
  * Shows FormEngine when component is selected, placeholder otherwise

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

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { PageSectionHeader } from '../../general/semantic';
+import { PageSectionHeader } from '../../../general/semantic';
 import { usePageBuilder } from '../lib/usePageBuilder';
 import { ComponentSelector } from '../components/ComponentSelector';
 import { ComponentPropertiesForm } from '../components/ComponentPropertiesForm';
 import { PageEngine } from '../components/PageEngine';
 import { SaveLoadSection } from '../components/SaveLoadSection';
-import "../../../css/pixelated.global.css";
+import "../../../../css/pixelated.global.css";
 import './pagebuilder.scss';
 /**
  * PageBuilderUI - Main orchestrator component

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

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { generateKey } from '../../utilities/functions';
+import { generateKey } from '../../../utilities/functions';
 import { componentMap, layoutComponents } from '../lib/componentMap';
 import './pagebuilder.scss';
 /**

package/dist/components/sitebuilder/page/documentation/api-examples/save-route-example.js

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+// Choose ONE of these imports:
+// Option 1: File-based storage
+import { savePage } from '../../lib/pageStorageLocal';
+// Option 2: Contentful storage
+// import { savePage } from '@pixelated-tech/components/server';
+// import type { ContentfulConfig } from '@pixelated-tech/components/server';
+export async function POST(request) {
+    try {
+        const body = await request.json();
+        const { name, data } = body;
+        if (!name || !data) {
+            return NextResponse.json({
+                success: false,
+                message: 'Name and data are required'
+            }, { status: 400 });
+        }
+        // ===== OPTION 1: File-based storage =====
+        const result = await savePage(name, data);
+        // ===== OPTION 2: Contentful storage =====
+        // ===== OPTION 2: Contentful storage (recommended when using the unified PIXELATED config blob) =====
+        // The app reads the unified config on the server via `getFullPixelatedConfig()` which
+        // sources values from `PIXELATED_CONFIG_JSON` or `PIXELATED_CONFIG_B64`.
+        // Example (server-side):
+        // import { getFullPixelatedConfig } from '@pixelated-tech/components/server';
+        // const cfg = getFullPixelatedConfig();
+        // const contentfulConfig = cfg.contentful;
+        // const result = await savePage(name, data, contentfulConfig);
+        return NextResponse.json(result);
+    }
+    catch (error) {
+        return NextResponse.json({
+            success: false,
+            message: `Invalid request: ${error}`
+        }, { status: 400 });
+    }
+}

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

@@ -1,6 +1,6 @@
-import { PageTitleHeader, PageSectionHeader } from "../../general/semantic";
-import { Callout } from "../../callout/callout";
-import { PageSection, PageGridItem, PageFlexItem } from "../../general/semantic";
+import { PageTitleHeader, PageSectionHeader } from "../../../general/semantic";
+import { Callout } from "../../../callout/callout";
+import { PageSection, PageGridItem, PageFlexItem } from "../../../general/semantic";
 /**
  * Component registry and constants
  */

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

@@ -6,8 +6,8 @@
  * used in PropTypes, generate TypeScript types via InferProps, and provide
  * runtime values for form generation.
  */
-import { variants, shapes, layouts, directions } from "../../callout/callout";
-import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../general/semantic";
+import { variants, shapes, layouts, directions } from "../../../callout/callout";
+import { layoutTypes, autoFlowValues, flexDirections, flexWraps, justifyContentValues, alignItemsValues } from "../../../general/semantic";
 export const componentMetadata = {
     'Callout': {
         variant: {

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/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/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": [