@pixelated-tech/components 3.1.4

package/dist/components/pagebuilder/lib/componentMetadata.js

@@ -0,0 +1,146 @@
+/**
+ * Component metadata for form generation
+ *
+ * Imports const arrays from component files that are used in PropTypes.
+ * This ensures single source of truth - arrays are defined once in the component,
+ * 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/layout";
+export const componentMetadata = {
+    'Callout': {
+        variant: {
+            type: 'select',
+            options: variants,
+            default: 'default',
+        },
+        boxShape: {
+            type: 'select',
+            options: shapes,
+            default: 'squircle',
+        },
+        layout: {
+            type: 'select',
+            options: layouts,
+            default: 'horizontal',
+        },
+        direction: {
+            type: 'select',
+            options: directions,
+            default: 'left',
+        },
+        url: {
+            type: 'text',
+        },
+        img: {
+            type: 'text',
+        },
+        imgAlt: {
+            type: 'text',
+        },
+        imgShape: {
+            type: 'select',
+            options: shapes,
+            default: 'square',
+        },
+        title: {
+            type: 'text',
+        },
+        subtitle: {
+            type: 'text',
+        },
+        content: {
+            type: 'text',
+        },
+        buttonText: {
+            type: 'text',
+        },
+    },
+    'Page Section': {
+        layoutType: {
+            type: 'select',
+            options: layoutTypes,
+            default: 'grid',
+        },
+        columns: {
+            type: 'number',
+        },
+        gap: {
+            type: 'text',
+        },
+        direction: {
+            type: 'select',
+            options: flexDirections,
+        },
+        wrap: {
+            type: 'select',
+            options: flexWraps,
+        },
+        justifyContent: {
+            type: 'select',
+            options: justifyContentValues,
+        },
+        alignItems: {
+            type: 'select',
+            options: alignItemsValues,
+        },
+        autoFlow: {
+            type: 'select',
+            options: autoFlowValues,
+        },
+        responsive: {
+            type: 'checkbox',
+        },
+    },
+    'Grid Item': {
+        columnSpan: {
+            type: 'number',
+        },
+        rowSpan: {
+            type: 'number',
+        },
+        columnStart: {
+            type: 'number',
+        },
+        columnEnd: {
+            type: 'number',
+        },
+        rowStart: {
+            type: 'number',
+        },
+        rowEnd: {
+            type: 'number',
+        },
+    },
+    'Flex Item': {
+        flex: {
+            type: 'text',
+        },
+        order: {
+            type: 'number',
+        },
+        alignSelf: {
+            type: 'select',
+            options: ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+        },
+    },
+    'Page Header': {
+        title: {
+            type: 'text',
+            required: true,
+        },
+        subtitle: {
+            type: 'text',
+        },
+    },
+    'Page Section Header': {
+        title: {
+            type: 'text',
+            required: true,
+        },
+        subtitle: {
+            type: 'text',
+        },
+    },
+};

package/dist/components/pagebuilder/lib/pageStorageContentful.js

@@ -0,0 +1,142 @@
+/**
+ * PageBuilder-specific Contentful storage implementation
+ *
+ * Uses generic Contentful management functions with PageBuilder-specific logic
+ */
+import { createEntry, updateEntry, deleteEntry, searchEntriesByField } from '../../cms/contentful.management';
+import { getContentfulEntriesByType } from '../../cms/contentful.delivery';
+const CONTENT_TYPE = 'page';
+/**
+ * Validate page name format
+ */
+function validatePageName(name) {
+    return /^[a-zA-Z0-9-_]+$/.test(name);
+}
+/**
+ * List all saved pages
+ */
+export async function listContentfulPages(config) {
+    // Map management-style config to delivery apiProps for the CDN-based read helper
+    const apiProps = {
+        base_url: 'https://cdn.contentful.com',
+        space_id: config.spaceId,
+        environment: config.environment || 'master',
+        delivery_access_token: config.accessToken,
+    };
+    const result = await getContentfulEntriesByType({ apiProps, contentType: CONTENT_TYPE });
+    if (!result || !Array.isArray(result.items)) {
+        return { success: true, pages: [] };
+    }
+    const pages = result.items
+        .map((entry) => (entry && entry.fields && entry.fields.pageName) ? (entry.fields.pageName['en-US'] || entry.fields.pageName) : undefined)
+        .filter((name) => typeof name === 'string')
+        .sort();
+    return { success: true, pages };
+}
+/**
+ * Load a page by name
+ */
+export async function loadContentfulPage(name, config) {
+    if (!validatePageName(name)) {
+        return {
+            success: false,
+            message: 'Invalid page name. Use only letters, numbers, dashes, and underscores.',
+        };
+    }
+    // Use delivery API for reads
+    const apiProps = {
+        base_url: 'https://cdn.contentful.com',
+        space_id: config.spaceId,
+        environment: config.environment || 'master',
+        delivery_access_token: config.accessToken,
+    };
+    const result = await getContentfulEntriesByType({ apiProps, contentType: CONTENT_TYPE });
+    if (!result || !Array.isArray(result.items) || result.items.length === 0) {
+        return { success: false, message: `Page "${name}" not found.` };
+    }
+    const entry = result.items.find((item) => {
+        const val = item && item.fields && item.fields.pageName;
+        const pageName = Array.isArray(val) ? val[0] : val;
+        const nameStr = typeof pageName === 'object' ? pageName['en-US'] : pageName;
+        return nameStr === name;
+    });
+    if (!entry)
+        return { success: false, message: `Page "${name}" not found.` };
+    const pageData = entry.fields.pageData?.['en-US'] || entry.fields.pageData;
+    return { success: true, data: pageData };
+}
+/**
+ * Save a page (create or update)
+ */
+export async function saveContentfulPage(name, data, config) {
+    if (!validatePageName(name)) {
+        return {
+            success: false,
+            message: 'Invalid page name. Use only letters, numbers, dashes, and underscores.',
+        };
+    }
+    // Check if page exists
+    const searchResult = await searchEntriesByField(CONTENT_TYPE, 'pageName', name, config);
+    if (!searchResult.success) {
+        return {
+            success: false,
+            message: searchResult.message || 'Failed to check existing page.',
+        };
+    }
+    const fields = {
+        pageName: name,
+        pageData: data,
+        title: name,
+        status: 'published',
+    };
+    if (searchResult.entries.length > 0) {
+        // Update existing entry
+        const entryId = searchResult.entries[0].sys.id;
+        const result = await updateEntry(entryId, fields, config, true);
+        return {
+            success: result.success,
+            message: result.success ? `Page "${name}" updated successfully.` : result.message,
+            filename: name,
+        };
+    }
+    else {
+        // Create new entry
+        const result = await createEntry(CONTENT_TYPE, fields, config, true);
+        return {
+            success: result.success,
+            message: result.success ? `Page "${name}" created successfully.` : result.message,
+            filename: name,
+        };
+    }
+}
+/**
+ * Delete a page by name
+ */
+export async function deleteContentfulPage(name, config) {
+    if (!validatePageName(name)) {
+        return {
+            success: false,
+            message: 'Invalid page name.',
+        };
+    }
+    // Find the entry
+    const searchResult = await searchEntriesByField(CONTENT_TYPE, 'pageName', name, config);
+    if (!searchResult.success) {
+        return {
+            success: false,
+            message: searchResult.message || 'Failed to find page.',
+        };
+    }
+    if (searchResult.entries.length === 0) {
+        return {
+            success: false,
+            message: `Page "${name}" not found.`,
+        };
+    }
+    const entryId = searchResult.entries[0].sys.id;
+    const result = await deleteEntry(entryId, config);
+    return {
+        success: result.success,
+        message: result.success ? `Page "${name}" deleted successfully.` : result.message,
+    };
+}

package/dist/components/pagebuilder/lib/pageStorageLocal.js

@@ -0,0 +1,143 @@
+import fs from 'fs';
+import path from 'path';
+const PAGES_DIR = process.env.PAGES_DIR || 'public/data/pages';
+/**
+ * Get absolute path to pages directory
+ */
+function getPagesDir() {
+    return path.join(process.cwd(), PAGES_DIR);
+}
+/**
+ * Ensure pages directory exists
+ */
+function ensurePagesDir() {
+    const dir = getPagesDir();
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+}
+/**
+ * Validate page name (alphanumeric, dashes, underscores only)
+ */
+export function validatePageName(name) {
+    const validPattern = /^[a-zA-Z0-9_-]+$/;
+    return validPattern.test(name) && name.length > 0 && name.length <= 100;
+}
+/**
+ * List all saved pages
+ */
+export async function listPages() {
+    try {
+        ensurePagesDir();
+        const dir = getPagesDir();
+        const files = fs.readdirSync(dir);
+        const jsonFiles = files
+            .filter((f) => f.endsWith('.json'))
+            .map((f) => f.replace('.json', ''));
+        return {
+            success: true,
+            pages: jsonFiles.sort()
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            pages: [],
+            message: `Failed to list pages: ${error}`
+        };
+    }
+}
+/**
+ * Load a page by name
+ */
+export async function loadPage(name) {
+    try {
+        if (!validatePageName(name)) {
+            return {
+                success: false,
+                message: 'Invalid page name. Use only letters, numbers, dashes, and underscores.'
+            };
+        }
+        const dir = getPagesDir();
+        const filepath = path.join(dir, `${name}.json`);
+        if (!fs.existsSync(filepath)) {
+            return {
+                success: false,
+                message: `Page "${name}" not found.`
+            };
+        }
+        const content = fs.readFileSync(filepath, 'utf-8');
+        const data = JSON.parse(content);
+        return {
+            success: true,
+            data
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            message: `Failed to load page: ${error}`
+        };
+    }
+}
+/**
+ * Save a page
+ */
+export async function savePage(name, data) {
+    try {
+        if (!validatePageName(name)) {
+            return {
+                success: false,
+                message: 'Invalid page name. Use only letters, numbers, dashes, and underscores.'
+            };
+        }
+        ensurePagesDir();
+        const dir = getPagesDir();
+        const filepath = path.join(dir, `${name}.json`);
+        // Write file with pretty formatting
+        fs.writeFileSync(filepath, JSON.stringify(data, null, 2), 'utf-8');
+        return {
+            success: true,
+            message: `Page "${name}" saved successfully.`,
+            filename: `${name}.json`
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            message: `Failed to save page: ${error}`
+        };
+    }
+}
+/**
+ * Delete a page
+ */
+export async function deletePage(name) {
+    try {
+        if (!validatePageName(name)) {
+            return {
+                success: false,
+                message: 'Invalid page name.'
+            };
+        }
+        const dir = getPagesDir();
+        const filepath = path.join(dir, `${name}.json`);
+        if (!fs.existsSync(filepath)) {
+            return {
+                success: false,
+                message: `Page "${name}" not found.`
+            };
+        }
+        fs.unlinkSync(filepath);
+        return {
+            success: true,
+            message: `Page "${name}" deleted successfully.`
+        };
+    }
+    catch (error) {
+        return {
+            success: false,
+            message: `Failed to delete page: ${error}`
+        };
+    }
+}

package/dist/components/pagebuilder/lib/pageStorageTypes.js

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

package/dist/components/pagebuilder/lib/propTypeIntrospection.js

@@ -0,0 +1,177 @@
+import { componentMetadata } from './componentMetadata';
+/**
+ * PropTypes Introspection Utilities
+ * Analyzes PropTypes to generate appropriate form fields
+ *
+ * Strategy:
+ * 1. Components define const arrays for enum values (e.g., CALLOUT_STYLES)
+ * 2. These arrays are used in PropTypes: PropTypes.oneOf([...CALLOUT_STYLES])
+ * 3. InferProps generates TypeScript types from PropTypes
+ * 4. componentMetadata imports the same const arrays for form generation
+ *
+ * This ensures single source of truth:
+ * - const array → PropTypes → InferProps → TypeScript types
+ * - const array → componentMetadata → form fields
+ */
+/**
+ * Analyzes PropTypes to determine the appropriate form field type
+ */
+export function getPropTypeInfo(propType, componentName, propName) {
+    // Check our metadata (which imports const arrays from component files)
+    if (componentName && propName && componentMetadata[componentName]?.[propName]) {
+        const metadata = componentMetadata[componentName][propName];
+        return {
+            type: metadata.type,
+            options: metadata.options,
+            isRequired: metadata.required || false,
+        };
+    }
+    if (!propType)
+        return { type: 'text', isRequired: false };
+    // PropTypes logic is inverted:
+    // - Optional: PropTypes.string (HAS .isRequired property pointing to the required version)
+    // - Required: PropTypes.string.isRequired (NO .isRequired property - it IS the required version)
+    const isRequired = !('isRequired' in propType);
+    // Handle both optional and required PropTypes
+    // Optional: PropTypes.oneOf([...]) - has .isRequired property
+    // Required: PropTypes.oneOf([...]).isRequired - is the actual validator
+    let basePropType = propType;
+    // If this is an optional PropType, it might have an isRequired property that points to the validator
+    // We need to check the current propType first, not the isRequired version
+    // PropTypes don't include metadata at runtime, so oneOf detection won't work
+    // We rely on componentMetadata instead (checked above)
+    // Check for shape (object with defined props)
+    if (basePropType._propType === 'shape' || (basePropType.type && basePropType.type._propType === 'shape')) {
+        return {
+            type: 'object',
+            options: basePropType.shapeTypes || basePropType.type?.shapeTypes || {},
+            isRequired
+        };
+    }
+    // Check for arrayOf
+    if (basePropType._propType === 'arrayOf' || (basePropType.type && basePropType.type._propType === 'arrayOf')) {
+        return {
+            type: 'array',
+            elementType: basePropType.elementType || basePropType.type?.elementType,
+            isRequired
+        };
+    }
+    // Check the name property for basic types
+    const typeName = basePropType.name || basePropType.type?.name || '';
+    switch (typeName) {
+        case 'number':
+            return { type: 'number', isRequired };
+        case 'bool':
+            return { type: 'checkbox', isRequired };
+        case 'func':
+            return { type: 'function', isRequired };
+        case 'node':
+        case 'element':
+            return { type: 'children', isRequired };
+        case 'object':
+            return { type: 'json', isRequired };
+        case 'string':
+        default:
+            return { type: 'text', isRequired };
+    }
+}
+/**
+ * Generates appropriate form field configuration based on PropType
+ */
+export function generateFormFieldFromPropType(propName, propType, value, componentName) {
+    const propInfo = getPropTypeInfo(propType, componentName, propName);
+    const baseProps = {
+        label: propName + ':',
+        name: propName,
+        id: propName,
+    };
+    // Only add required attribute when field is actually required
+    // Don't pass required prop at all for optional fields (HTML treats ANY value as required)
+    if (propInfo.isRequired) {
+        baseProps.required = 'required';
+    }
+    // Only add defaultValue if a value is provided
+    if (value !== undefined && value !== null && value !== '') {
+        baseProps.defaultValue = value;
+    }
+    switch (propInfo.type) {
+        case 'select':
+            return {
+                component: 'FormSelect',
+                props: {
+                    ...baseProps,
+                    options: [
+                        { value: '', text: '-- Select --' },
+                        ...(propInfo.options || []).map((opt) => ({
+                            value: opt,
+                            text: opt
+                        }))
+                    ],
+                }
+            };
+        case 'number':
+            return {
+                component: 'FormInput',
+                props: {
+                    ...baseProps,
+                    type: 'number',
+                }
+            };
+        case 'checkbox':
+            return {
+                component: 'FormInput',
+                props: {
+                    ...baseProps,
+                    type: 'checkbox',
+                }
+            };
+        case 'json':
+        case 'object':
+            return {
+                component: 'FormInput',
+                props: {
+                    ...baseProps,
+                    type: 'text',
+                    placeholder: 'JSON object: {"key": "value"}',
+                }
+            };
+        case 'array':
+            return {
+                component: 'FormInput',
+                props: {
+                    ...baseProps,
+                    type: 'text',
+                    placeholder: 'Comma-separated values',
+                }
+            };
+        case 'children':
+            return {
+                component: 'FormInput',
+                props: {
+                    ...baseProps,
+                    type: 'text',
+                    placeholder: 'Add child components separately',
+                    disabled: true,
+                }
+            };
+        case 'function':
+            return {
+                component: 'FormInput',
+                props: {
+                    ...baseProps,
+                    type: 'text',
+                    placeholder: 'Function (not editable in builder)',
+                    disabled: true,
+                }
+            };
+        case 'text':
+        default:
+            return {
+                component: 'FormInput',
+                props: {
+                    ...baseProps,
+                    type: 'text',
+                }
+            };
+    }
+}

package/dist/components/pagebuilder/lib/types.js

@@ -0,0 +1,4 @@
+/**
+ * Shared TypeScript types for the PageBuilder
+ */
+export {};