@pixelated-tech/components 3.3.5 → 3.4.0

package/dist/components/admin/site-health/site-health.css

@@ -0,0 +1,427 @@
+/* Site Health - Consolidated Styles */
+
+/* CSS Variables */
+:root {
+  --color-primary: #3b82f6; /* Blue accent for focus states and links */
+  --color-secondary: #6b7280; /* Neutral gray for secondary text */
+  --color-accent-1: #10b981; /* Green for success/good states */
+  --color-accent-2: #f59e0b; /* Amber for warning states */
+  --color-background: #f0f0f0; /* Main page background */
+  --color-border: #ddd; /* Default borders */
+  --color-text-primary: #111827; /* Primary text */
+  --color-text-secondary: #6b7280; /* Secondary text */
+  --color-text-muted: #374151; /* Muted text */
+  --color-success: #10b981; /* Success state */
+  --color-warning: #f59e0b; /* Warning state */
+  --color-error: #ef4444; /* Error state */
+  --color-neutral: #6b7280; /* Neutral state */
+}
+
+/* Page Layout */
+.site-health-page {
+  min-height: 100vh;
+  background-color: var(--color-background);
+  padding: 2rem;
+}
+
+.site-health-container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.site-health-header {
+  margin-bottom: 2rem;
+}
+
+.site-health-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+  color: var(--color-text-primary);
+}
+
+.site-health-select {
+  margin-bottom: 2rem;
+}
+
+.site-health-select label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.site-health-select select {
+  display: block;
+  width: 100%;
+  max-width: 20rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  background-color: var(--color-background);
+}
+
+.site-health-select select:focus {
+  outline: none;
+  ring: 2px;
+  ring-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+/* Health Cards Grid */
+.site-health-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Standardized Health Card Styling */
+.health-card {
+  background: var(--color-background);
+  border: 2px solid var(--color-border);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.15s ease-in-out;
+}
+
+.health-card:hover {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
+}
+
+.health-card-title {
+  padding: 1rem 1.5rem;
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  background-color: var(--color-background);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.health-card-content {
+  padding: 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+/* Standardized Component Content */
+.health-site-name {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.health-site-url {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 1rem;
+}
+
+.health-timestamp {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-top: 1rem;
+  text-align: center;
+}
+
+/* Standardized Audit Items */
+.health-audit-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.health-audit-icon {
+  font-size: 0.875rem;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+  min-width: 1rem;
+  text-align: center;
+}
+
+.health-audit-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.health-audit-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.health-audit-description {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.25rem;
+  line-height: 1.4;
+}
+
+/* Status Colors */
+.health-status-good { color: var(--color-success); }
+.health-status-warning { color: var(--color-warning); }
+.health-status-error { color: var(--color-error); }
+.health-status-neutral { color: var(--color-neutral); }
+
+/* Loading States */
+.health-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.health-loading-spinner {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 2px solid var(--color-border);
+  border-top: 2px solid var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.health-loading-text {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+/* Error States */
+.health-error {
+  text-align: center;
+  padding: 2rem;
+}
+
+.health-error-text {
+  font-size: 0.875rem;
+  color: var(--color-error);
+}
+
+/* Score Displays */
+.health-score-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.health-score-item {
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  background-color: var(--color-background);
+  text-align: center;
+}
+
+.health-score-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.5rem;
+  text-transform: capitalize;
+}
+
+.health-score-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+}
+
+.health-score-bar {
+  width: 100%;
+  height: 6px;
+  background-color: var(--color-border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.health-score-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+/* Core Web Vitals */
+.health-cwv-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.health-cwv-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem;
+  background-color: var(--color-background);
+  border-radius: 0.375rem;
+  border: 1px solid var(--color-border);
+}
+
+.health-cwv-label {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.health-cwv-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Vulnerability Items */
+.health-vulnerability-item {
+  padding: 1rem;
+  border-radius: 0.375rem;
+  border: 1px solid;
+  margin-bottom: 0.5rem;
+}
+
+.health-vulnerability-critical {
+  background-color: #fef2f2;
+  border-color: #fecaca;
+}
+
+.health-vulnerability-high {
+  background-color: #fff7ed;
+  border-color: #fed7aa;
+}
+
+.health-vulnerability-moderate {
+  background-color: #fefce8;
+  border-color: #fde68a;
+}
+
+.health-vulnerability-low {
+  background-color: #fefefe;
+  border-color: #f3f4f6;
+}
+
+.health-vulnerability-info {
+  background-color: var(--color-background);
+  border-color: var(--color-border);
+}
+
+.health-vulnerability-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.health-vulnerability-severity {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.health-vulnerability-critical .health-vulnerability-severity {
+  background-color: #fee2e2;
+  color: #dc2626;
+}
+
+.health-vulnerability-high .health-vulnerability-severity {
+  background-color: #fed7aa;
+  color: #ea580c;
+}
+
+.health-vulnerability-moderate .health-vulnerability-severity {
+  background-color: #fde68a;
+  color: #d97706;
+}
+
+.health-vulnerability-low .health-vulnerability-severity {
+  background-color: #e5e7eb;
+  color: #6b7280;
+}
+
+.health-vulnerability-info .health-vulnerability-severity {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.health-vulnerability-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.health-vulnerability-details {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.25rem;
+}
+
+.health-vulnerability-meta {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+.health-vulnerability-range {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.health-vulnerability-fix {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-success);
+}
+
+.health-vulnerability-link {
+  font-size: 0.75rem;
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.health-vulnerability-link:hover {
+  text-decoration: underline;
+}
+
+/* Utility Classes */
+.text-center { text-align: center; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-4 { margin-bottom: 1rem; }
+
+/* Table styling */
+td {
+  font-size: .875rem;
+  vertical-align: top;
+}
+
+table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+th, td {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

package/dist/components/admin/sites/sites.integration.js

@@ -0,0 +1,117 @@
+/**
+ * Sites Management Integration Services
+ * Server-side utilities for site configuration and data management
+ */
+import fs from 'fs';
+import path from 'path';
+/**
+ * Load sites configuration from JSON file
+ */
+export async function loadSitesConfig(configPath) {
+    try {
+        const sitesPath = configPath || path.join(process.cwd(), 'src/app/data/sites.json');
+        if (!fs.existsSync(sitesPath)) {
+            throw new Error('Sites configuration not found');
+        }
+        const sitesData = fs.readFileSync(sitesPath, 'utf8');
+        const sites = JSON.parse(sitesData);
+        return sites;
+    }
+    catch (error) {
+        console.error('Error loading sites:', error);
+        throw new Error('Failed to load sites configuration');
+    }
+}
+/**
+ * Save sites configuration to JSON file
+ */
+export async function saveSitesConfig(sites, configPath) {
+    try {
+        const sitesPath = configPath || path.join(process.cwd(), 'src/app/data/sites.json');
+        // Ensure directory exists
+        const dir = path.dirname(sitesPath);
+        if (!fs.existsSync(dir)) {
+            fs.mkdirSync(dir, { recursive: true });
+        }
+        fs.writeFileSync(sitesPath, JSON.stringify(sites, null, 2), 'utf8');
+    }
+    catch (error) {
+        console.error('Error saving sites:', error);
+        throw new Error('Failed to save sites configuration');
+    }
+}
+/**
+ * Get a specific site configuration by name
+ */
+export async function getSiteConfig(siteName, configPath) {
+    const sites = await loadSitesConfig(configPath);
+    return sites.find(site => site.name === siteName) || null;
+}
+/**
+ * Validate site configuration
+ */
+export function validateSiteConfig(site) {
+    const errors = [];
+    if (!site.name) {
+        errors.push('Site name is required');
+    }
+    if (!site.localPath) {
+        errors.push('Local path is required');
+    }
+    else if (!fs.existsSync(site.localPath)) {
+        errors.push(`Local path does not exist: ${site.localPath}`);
+    }
+    // Validate Google Analytics configuration
+    if (site.ga4PropertyId && site.ga4PropertyId !== 'GA4_PROPERTY_ID_HERE') {
+        // Basic GA4 property ID validation (should start with numbers)
+        if (!/^\d+$/.test(site.ga4PropertyId)) {
+            errors.push('Invalid GA4 Property ID format');
+        }
+    }
+    // Validate Search Console URL
+    if (site.searchConsoleUrl) {
+        try {
+            new URL(site.searchConsoleUrl);
+        }
+        catch {
+            errors.push('Invalid Search Console URL format');
+        }
+    }
+    return {
+        valid: errors.length === 0,
+        errors
+    };
+}
+/**
+ * Add or update a site configuration
+ */
+export async function upsertSiteConfig(site, configPath) {
+    const sites = await loadSitesConfig(configPath);
+    const existingIndex = sites.findIndex(s => s.name === site.name);
+    // Validate the site config
+    const validation = validateSiteConfig(site);
+    if (!validation.valid) {
+        throw new Error(`Invalid site configuration: ${validation.errors.join(', ')}`);
+    }
+    if (existingIndex >= 0) {
+        // Update existing site
+        sites[existingIndex] = { ...sites[existingIndex], ...site };
+    }
+    else {
+        // Add new site
+        sites.push(site);
+    }
+    await saveSitesConfig(sites, configPath);
+}
+/**
+ * Remove a site configuration
+ */
+export async function removeSiteConfig(siteName, configPath) {
+    const sites = await loadSitesConfig(configPath);
+    const filteredSites = sites.filter(site => site.name !== siteName);
+    if (filteredSites.length === sites.length) {
+        return false; // Site not found
+    }
+    await saveSitesConfig(filteredSites, configPath);
+    return true;
+}

package/dist/components/cms/contentful.management.js

@@ -252,3 +252,107 @@ export async function deleteEntry(entryId, config) {
         };
     }
 }
+/**
+ * Validate Contentful credentials by attempting to access the space
+ */
+export async function validateContentfulCredentials(credentials) {
+    try {
+        const response = await fetch(`https://api.contentful.com/spaces/${credentials.spaceId}`, {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${credentials.accessToken}`,
+                'Content-Type': 'application/vnd.contentful.management.v1+json',
+            },
+        });
+        if (!response.ok) {
+            return { valid: false, error: 'Failed to access space' };
+        }
+        return { valid: true };
+    }
+    catch (error) {
+        return { valid: false, error: error.message };
+    }
+}
+/**
+ * Get all content types from a Contentful space
+ */
+export async function getContentTypes(credentials) {
+    const { spaceId, accessToken } = credentials;
+    // First get space info to find the default environment
+    const spaceResponse = await fetch(`https://api.contentful.com/spaces/${spaceId}`, {
+        method: 'GET',
+        headers: {
+            'Authorization': `Bearer ${accessToken}`,
+            'Content-Type': 'application/vnd.contentful.management.v1+json',
+        },
+    });
+    if (!spaceResponse.ok) {
+        throw new Error('Failed to access space');
+    }
+    // Try different environment names - Contentful uses 'master' for older spaces, 'main' for newer ones
+    const environmentsToTry = ['master', 'main'];
+    let contentTypesResponse = null;
+    let lastError = null;
+    for (const env of environmentsToTry) {
+        try {
+            const response = await fetch(`https://api.contentful.com/spaces/${spaceId}/environments/${env}/content_types`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${accessToken}`,
+                    'Content-Type': 'application/vnd.contentful.management.v1+json',
+                },
+            });
+            if (response.ok) {
+                contentTypesResponse = response;
+                break;
+            }
+        }
+        catch (error) {
+            lastError = error;
+        }
+    }
+    if (!contentTypesResponse) {
+        throw new Error(`Failed to fetch content types: ${lastError}`);
+    }
+    const contentTypesData = await contentTypesResponse.json();
+    return contentTypesData.items || [];
+}
+/**
+ * Migrate a content type from source to destination space
+ */
+export async function migrateContentType(sourceCredentials, destCredentials, contentTypeId) {
+    try {
+        // Get content type from source
+        const sourceEnv = sourceCredentials.environment || 'master';
+        const sourceResponse = await fetch(`https://api.contentful.com/spaces/${sourceCredentials.spaceId}/environments/${sourceEnv}/content_types/${contentTypeId}`, {
+            method: 'GET',
+            headers: {
+                'Authorization': `Bearer ${sourceCredentials.accessToken}`,
+                'Content-Type': 'application/vnd.contentful.management.v1+json',
+            },
+        });
+        if (!sourceResponse.ok) {
+            throw new Error('Failed to fetch content type from source');
+        }
+        const contentType = await sourceResponse.json();
+        // Create content type in destination
+        const destEnv = destCredentials.environment || 'master';
+        const createResponse = await fetch(`https://api.contentful.com/spaces/${destCredentials.spaceId}/environments/${destEnv}/content_types`, {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${destCredentials.accessToken}`,
+                'Content-Type': 'application/vnd.contentful.management.v1+json',
+                'X-Contentful-Version': '1',
+            },
+            body: JSON.stringify(contentType),
+        });
+        if (!createResponse.ok) {
+            const errorData = await createResponse.json();
+            throw new Error(`Failed to create content type: ${errorData.message}`);
+        }
+        return { success: true };
+    }
+    catch (error) {
+        return { success: false, error: error.message };
+    }
+}

package/dist/components/cms/hubspot.components.js

@@ -25,9 +25,9 @@ HubSpotForm.propTypes = {
 };
 export function HubSpotForm({ region, portalId, formId, target, containerId = 'hubspot-form-container' }) {
     const config = usePixelatedConfig();
-    const finalRegion = region || config.hubspot?.region || 'na1';
-    const finalPortalId = portalId || config.hubspot?.portalId || '';
-    const finalFormId = formId || config.hubspot?.formId || '';
+    const finalRegion = region || config?.hubspot?.region || 'na1';
+    const finalPortalId = portalId || config?.hubspot?.portalId || '';
+    const finalFormId = formId || config?.hubspot?.formId || '';
     const formTarget = target || `#${containerId}`;
     useEffect(() => {
         const createHubspotForm = () => {

package/dist/components/config/config.client.js

@@ -12,18 +12,29 @@ export const PixelatedClientConfigProvider = ({ config, children, }) => {
 export const usePixelatedConfig = () => {
     const ctx = React.useContext(PixelatedConfigContext);
     if (!ctx) {
-        // Always throw error when provider is missing (consistent across dev/prod)
-        // Previously had environment-specific behavior:
-        // if (process.env.NODE_ENV !== 'production') {
-        //   throw new Error('PixelatedClientConfigProvider not found. Wrap your app with PixelatedClientConfigProvider.');
-        // }
-        // // In production return an empty object typed as PixelatedConfig to avoid runtime crashes
-        // return {} as PixelatedConfig;
-        throw new Error('PixelatedClientConfigProvider not found. Wrap your app with PixelatedClientConfigProvider.');
+        // Get calling function name from stack trace
+        let caller = 'unknown component';
+        try {
+            const error = new Error();
+            const stack = error.stack?.split('\n')[2]; // Get the caller line
+            if (stack) {
+                const match = stack.match(/at\s+([^\s(]+)/);
+                if (match && match[1]) {
+                    caller = match[1].replace(/^use/, '').toLowerCase(); // Remove 'use' prefix and lowercase
+                }
+            }
+        }
+        catch {
+            // Ignore errors in stack parsing
+        }
+        // Log warning when provider is missing but continue gracefully
+        console.warn(`PixelatedClientConfigProvider not found when called by ${caller}. Some components may not work as expected. Wrap your app with PixelatedClientConfigProvider for full functionality.`);
+        return null;
     }
-    // Also throw if config is empty (no environment config loaded)
+    // Also return null if config is empty (no environment config loaded)
     if (Object.keys(ctx).length === 0) {
-        throw new Error('Pixelated config is empty. Check that PIXELATED_CONFIG_JSON or PIXELATED_CONFIG_B64 environment variables are set.');
+        console.warn('Pixelated config is empty. Check that PIXELATED_CONFIG_JSON or PIXELATED_CONFIG_B64 environment variables are set.');
+        return null;
     }
     return ctx;
 };