@pixelated-tech/components 3.3.5 → 3.4.0

package/README.COMPONENTS.md

@@ -53,6 +53,12 @@ For a complete working example of Pixelated Components in action, check out the
 - [PageEngine](#pageengine)
 - [SaveLoadSection](#saveloadsection)
 
+### Admin Components
+- [Component Usage](#component-usage)
+- [Deploy](#deploy)
+- [Site Health](#site-health)
+- [Sites](#sites)
+
 ### SEO & Schema
 - [404 Page](#404-page)
 - [GoogleAnalytics](#googleanalytics)
@@ -1382,6 +1388,126 @@ import { GoogleFontsImports } from '@pixelated-tech/components';
 
 ---
 
+## Admin Components
+
+Admin components provide tools for managing and monitoring websites, including site health monitoring, deployment, and component usage analysis.
+
+### Component Usage
+
+Tracks and analyzes component usage across your application.
+
+```typescript
+import { ComponentDiscovery, ComponentAnalysis } from '@pixelated-tech/components/server';
+
+// Discover all components in your project
+const components = await ComponentDiscovery.discoverComponents('./src');
+
+// Analyze component usage
+const analysis = await ComponentAnalysis.analyzeUsage('./src', components);
+```
+
+#### Features
+
+- **Component Discovery**: Automatically finds all React components in your codebase
+- **Usage Analysis**: Tracks where and how components are used
+- **Server-safe**: Safe to use in API routes and server components
+
+### Deploy
+
+Deployment utilities for managing site deployments.
+
+```typescript
+import { DeploymentIntegration } from '@pixelated-tech/components/server';
+
+// Deploy to production
+const result = await DeploymentIntegration.deploy({
+  source: './dist',
+  destination: 'production-site',
+  config: deploymentConfig
+});
+```
+
+#### Features
+
+- **Automated Deployment**: Streamlined deployment process
+- **Configuration Management**: Flexible deployment configurations
+- **Error Handling**: Comprehensive error reporting and recovery
+
+### Site Health
+
+Comprehensive site health monitoring components.
+
+```typescript
+import {
+  SiteHealthOverview,
+  SiteHealthAxeCore,
+  SiteHealthPerformance
+} from '@pixelated-tech/components';
+
+// Core Web Vitals overview
+<SiteHealthOverview siteName="example.com" />
+
+// Accessibility testing with axe-core
+<SiteHealthAxeCore siteName="example.com" />
+
+// Performance metrics
+<SiteHealthPerformance siteName="example.com" />
+```
+
+#### Available Health Checks
+
+- **Axe Core Accessibility**: Automated accessibility testing
+- **Core Web Vitals**: Performance metrics (LCP, FID, CLS)
+- **Google Analytics**: Traffic and engagement data
+- **Google Search Console**: Search performance and indexing
+- **On-site SEO**: Meta tags, structured data, and SEO elements
+- **Security Scan**: Security headers and vulnerabilities
+- **Dependency Vulnerabilities**: Outdated or vulnerable dependencies
+- **GitHub Integration**: Repository health and activity
+- **Uptime Monitoring**: Site availability and response times
+
+#### Features
+
+- **Real-time Monitoring**: Live data from various APIs and services
+- **Caching**: Built-in caching with configurable TTL
+- **Error Handling**: Graceful error handling and fallbacks
+- **Server-safe**: Components work in server and client environments
+
+### Sites
+
+Site configuration management utilities.
+
+```typescript
+import {
+  loadSitesConfig,
+  saveSitesConfig,
+  getSiteConfig,
+  validateSiteConfig
+} from '@pixelated-tech/components/server';
+
+// Load site configurations
+const sites = await loadSitesConfig();
+
+// Get specific site
+const site = await getSiteConfig('my-site');
+
+// Validate site configuration
+const validation = validateSiteConfig(site);
+if (!validation.valid) {
+  console.error('Invalid site config:', validation.errors);
+}
+```
+
+#### Features
+
+- **Configuration Management**: Load and save site configurations
+- **Validation**: Comprehensive site configuration validation
+- **GA4 Integration**: Google Analytics 4 property validation
+- **Search Console**: Google Search Console URL validation
+- **File System Operations**: Safe file operations with error handling
+
+---
+
 ## SEO & Schema
 
 ### JSON-LD Schemas

package/README.md

@@ -4,6 +4,7 @@
 [![Stargazers][stars-shield]][stars-url]
 [![Issues][issues-shield]][issues-url]
 [![MIT License][license-shield]][license-url]
+[![Coverage][coverage-shield]][coverage-url]
 [![LinkedIn][linkedin-shield]][linkedin-url]
 
 
@@ -301,8 +302,7 @@ npm run storybook
 - [ ] **Project Scaffolding CLI**: Interactive CLI tool that generates complete Next.js projects with pixelated-components pre-configured, including routes.json, layout.tsx, package.json, and basic page structure
 - [ ] **Template Marketplace**: Pre-built industry-specific templates (restaurant, law firm, contractor, etc.) that users can clone and customize
 - [ ] **Configuration Wizard**: Step-by-step setup wizard that collects business info, generates site configuration, and creates initial content structure
-- [ ] **Centralized Site Manager**: Web dashboard for managing multiple pixelated sites, with bulk updates, version control, and deployment status monitoring
-- [ ] **Site Health Monitoring**: Automated monitoring dashboard that checks site performance, broken links, SEO scores, and security vulnerabilities across all sites
+- [ IP ] **Site Health Monitoring**: Automated monitoring dashboard that checks site performance, broken links, SEO scores, and security vulnerabilities across all sites
 - [ ] **Content Migration Tools**: Automated importers for WordPress, Squarespace, Wix, and other platforms to migrate content to pixelated sites
 - [ ] **A/B Testing Framework**: Built-in experimentation system for testing different layouts, content, and CTAs with automatic winner selection
 - [ ] **Personalization Engine**: Dynamic content delivery based on user behavior, location, and preferences
@@ -381,16 +381,16 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 ### Overview
 
-**Current Status**: ✅ 2,246 tests passing across 67 test files
+**Current Status**: ✅ 2,370 tests passing across 77 test files
 
 | Metric | Value |
 |--------|-------|
-| Test Files | 71 |
-| Total Tests | 2,291 |
-| Coverage (Statements) | 76.09% |
-| Coverage (Lines) | 78.76% |
-| Coverage (Functions) | 77.11% |
-| Coverage (Branches) | 67.37% |
+| Test Files | 77 |
+| Total Tests | 2,370 |
+| Coverage (Statements) | 76.98% |
+| Coverage (Lines) | 79.55% |
+| Coverage (Functions) | 78.09% |
+| Coverage (Branches) | 67.57% |
 | Test Framework | Vitest 4.x |
 | Testing Library | @testing-library/react + jsdom |
 
@@ -408,6 +408,9 @@ npm run test:run         # Single run (for CI)
 **Component Coverage Summary**
 
 #### Component Coverage (Sorted by Statement Coverage)
+- **site-health-cache.ts**: 100% statements *(new shared caching utility)*
+- **sites.integration.ts**: 100% statements *(new site management functions)*
+- **site-health-indicators.ts**: 100% statements
 - **tiles.tsx**: 100% statements
 - **google.reviews.functions.ts**: 100% statements
 - **accordion.tsx**: 100% statements
@@ -520,6 +523,9 @@ npm run test:run         # Single run (for CI)
 [license-shield]: https://img.shields.io/github/license/brianwhaley/pixelated-components.svg?style=for-the-badge
 [license-url]: https://github.com/brianwhaley/pixelated-components/blob/master/LICENSE.txt
 
+[coverage-shield]: https://img.shields.io/badge/coverage-77%25-brightgreen?style=for-the-badge
+[coverage-url]: https://github.com/brianwhaley/pixelated-components
+
 [linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
 [linkedin-url]: https://linkedin.com/in/brianwhaley
 

package/dist/components/admin/componentusage/componentAnalysis.js

@@ -0,0 +1,144 @@
+/**
+ * Component Usage Analysis Services
+ * Server-side utilities for analyzing component usage across sites
+ */
+import { promises as fs } from 'fs';
+import path from 'path';
+/**
+ * Convert folder/filename format to actual export name
+ * e.g., "cms/calendly" -> "Calendly", "general/modal" -> "Modal"
+ */
+export function folderFilenameToExportName(folderFilename) {
+    const parts = folderFilename.split('/');
+    let filename = parts[parts.length - 1];
+    // Strip common suffixes
+    filename = filename.replace(/\.components$/, '');
+    // Strip common prefixes
+    filename = filename.replace(/^schema-/, '');
+    // Default: capitalize each part and join
+    return filename
+        .split(/[-.]/)
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join('');
+}
+/**
+ * Get all files recursively from a directory
+ */
+export async function getAllFiles(dirPath, extensions = []) {
+    const files = [];
+    async function scan(dir) {
+        const entries = await fs.readdir(dir, { withFileTypes: true });
+        for (const entry of entries) {
+            const fullPath = path.join(dir, entry.name);
+            if (entry.isDirectory()) {
+                // Skip common non-source directories
+                if (!['node_modules', '.next', '.git', 'out', 'dist', 'build', '.DS_Store'].includes(entry.name)) {
+                    await scan(fullPath);
+                }
+            }
+            else if (entry.isFile()) {
+                // Check if file has desired extension or if no extensions specified
+                const ext = path.extname(entry.name);
+                if (extensions.length === 0 || extensions.includes(ext)) {
+                    files.push(fullPath);
+                }
+            }
+        }
+    }
+    try {
+        await scan(dirPath);
+    }
+    catch {
+        // Dir doesn't exist, continue
+    }
+    // If no source dirs found, scan the whole dir but exclude common non-source
+    if (files.length === 0) {
+        await scan(dirPath);
+    }
+    return files;
+}
+/**
+ * Check if a component is used in a site
+ */
+export async function checkComponentUsage(sitePath, componentName) {
+    try {
+        const files = await getAllFiles(sitePath, ['.tsx', '.ts', '.jsx', '.js']);
+        // Special case for semantic components that export multiple functions
+        if (componentName === 'general/semantic') {
+            const semanticExports = [
+                'PageTitleHeader', 'PageSection', 'PageSectionHeader', 'PageSectionBackgroundImage',
+                'PageGridItem', 'PageFlexItem', 'PageHeader', 'PageHero', 'PageMain', 'PageNav', 'PageFooter'
+            ];
+            for (const file of files) {
+                const content = await fs.readFile(file, 'utf-8');
+                if (content.includes('@pixelated-tech/components')) {
+                    // Check if any semantic export is imported (case insensitive)
+                    for (const exportName of semanticExports) {
+                        const contentLower = content.toLowerCase();
+                        const exportNameLower = exportName.toLowerCase();
+                        if (contentLower.includes(exportNameLower) ||
+                            new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components`, 'i').test(content)) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        }
+        // Convert folder/filename to actual export name for checking
+        const exportName = folderFilenameToExportName(componentName);
+        for (const file of files) {
+            const content = await fs.readFile(file, 'utf-8');
+            // Check for import statements - look for the actual export name (case insensitive)
+            const contentLower = content.toLowerCase();
+            const exportNameLower = exportName.toLowerCase();
+            if (content.includes('@pixelated-tech/components') &&
+                (contentLower.includes(exportNameLower) ||
+                    new RegExp(`import.*${exportNameLower}.*from.*@pixelated-tech/components`, 'i').test(content))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    catch (error) {
+        console.error(`Error checking usage for ${componentName} in ${sitePath}:`, error);
+        return false;
+    }
+}
+/**
+ * Analyze component usage across all sites
+ */
+export async function analyzeComponentUsage(components, sites) {
+    // Build usage matrix in parallel
+    const usageMatrix = {};
+    // Initialize matrix
+    for (const component of components) {
+        usageMatrix[component] = {};
+        for (const site of sites) {
+            usageMatrix[component][site.name] = false; // default
+        }
+    }
+    // Collect all check promises
+    const checkPromises = components.flatMap(component => sites.map(site => checkComponentUsage(site.localPath, component).then(isUsed => ({
+        component,
+        siteName: site.name,
+        isUsed
+    }))));
+    // Run all checks in parallel
+    const results = await Promise.allSettled(checkPromises);
+    // Populate matrix with results
+    results.forEach(result => {
+        if (result.status === 'fulfilled') {
+            const { component, siteName, isUsed } = result.value;
+            usageMatrix[component][siteName] = isUsed;
+        }
+        else {
+            console.error('Check failed:', result.reason);
+        }
+    });
+    return {
+        components,
+        siteList: sites,
+        usageMatrix
+    };
+}

package/dist/components/admin/componentusage/componentDiscovery.js

@@ -0,0 +1,85 @@
+/**
+ * Dynamic Component Discovery
+ * Discovers components by parsing pixelated-components exports at runtime
+ */
+import fs from 'fs';
+import path from 'path';
+/**
+ * Get the pixelated-components package path (now that we're inside the library)
+ */
+function getPixelatedComponentsPath() {
+    // Since this is now running in pixelated-admin, resolve from the current working directory
+    try {
+        // Get the current working directory (should be pixelated-admin root)
+        const cwd = process.cwd();
+        // Navigate to node_modules/@pixelated-tech/components
+        const packagePath = path.join(cwd, 'node_modules', '@pixelated-tech', 'components');
+        // Verify the path exists
+        if (fs.existsSync(packagePath)) {
+            return packagePath;
+        }
+        else {
+            // Fallback to require.resolve but strip the /ROOT/ prefix if present
+            const resolvedPath = require.resolve('@pixelated-tech/components/package.json');
+            if (resolvedPath.startsWith('/ROOT/')) {
+                // Remove the /ROOT/ prefix and use the actual filesystem path
+                const actualPath = resolvedPath.replace('/ROOT/', '/');
+                const packageDir = path.dirname(actualPath);
+                if (fs.existsSync(packageDir)) {
+                    return packageDir;
+                }
+            }
+            // Use the resolved path as-is
+            const packageDir = path.dirname(resolvedPath);
+            return packageDir;
+        }
+    }
+    catch (error) {
+        console.error('Error resolving package path:', error);
+        // Fallback to relative path resolution
+        const currentDir = __dirname;
+        // Navigate up: componentusage -> admin -> components -> pixelated-components root
+        const fallbackPath = path.resolve(currentDir, '../../../');
+        return fallbackPath;
+    }
+}
+/**
+ * Discover components dynamically by parsing the pixelated-components index
+ * This runs on the server side during API calls
+ */
+export async function discoverComponentsFromLibrary() {
+    try {
+        // Get the pixelated-components package path
+        const pixelatedPath = getPixelatedComponentsPath();
+        // Look for the built dist/index.js file
+        const indexPath = path.join(pixelatedPath, 'dist', 'index.js');
+        // Read and parse the index.js file
+        const indexContent = fs.readFileSync(indexPath, 'utf-8');
+        const componentNames = parseComponentExports(indexContent);
+        return componentNames;
+    }
+    catch (error) {
+        console.error('Error in dynamic component discovery:', error);
+        // Return empty array if discovery fails
+        return [];
+    }
+}
+/**
+ * Parse ALL export statements from index.js and format as folder/filename
+ * No filtering - includes everything for maximum inclusivity
+ */
+function parseComponentExports(content) {
+    const componentNames = [];
+    const lines = content.split('\n');
+    for (const line of lines) {
+        const trimmed = line.trim();
+        // Match: export * from './components/folder/filename';
+        const match = trimmed.match(/export \* from '\.\/components\/([^']+)';/);
+        if (match) {
+            const componentPath = match[1];
+            // Format as folder/filename (e.g., "cms/calendly", "general/modal")
+            componentNames.push(componentPath);
+        }
+    }
+    return [...new Set(componentNames)].sort(); // Remove duplicates and sort alphabetically
+}

package/dist/components/admin/deploy/deployment.integration.js

@@ -0,0 +1,170 @@
+/**
+ * Deployment Integration Services
+ * Server-side utilities for site deployment operations
+ */
+import { exec } from 'child_process';
+import { promisify } from 'util';
+const execAsync = promisify(exec);
+/**
+ * Execute deployment script for a site
+ */
+export async function executeDeployment(request, siteConfig, isLocalExecution = false) {
+    // Only allow local execution for security
+    if (!isLocalExecution) {
+        throw new Error('Deployment execution is only allowed when running locally');
+    }
+    const { versionType, commitMessage, environments } = request;
+    const { localPath, remote } = siteConfig;
+    return executeScript(siteConfig.name, versionType, commitMessage, environments, localPath, remote);
+}
+/**
+ * Execute the deployment script
+ */
+async function executeScript(siteName, versionType, commitMessage, environments, localPath, remote) {
+    const sourceBranch = 'dev'; // Always deploy from dev branch
+    try {
+        // Change to the site directory
+        process.chdir(localPath);
+        // Get current branch and ensure we're on dev
+        const { stdout: currentBranch } = await execAsync('git branch --show-current');
+        if (currentBranch.trim() !== sourceBranch) {
+            throw new Error(`Must be on ${sourceBranch} branch to deploy. Current branch: ${currentBranch.trim()}`);
+        }
+        // Check for uncommitted changes
+        const { stdout: status } = await execAsync('git status --porcelain');
+        if (status.trim()) {
+            throw new Error('There are uncommitted changes. Please commit or stash them before deploying.');
+        }
+        // Pull latest changes
+        await execAsync('git pull origin dev');
+        // Run prep commands
+        const prepResult = await runPrepCommands(siteName, versionType, commitMessage);
+        // Deploy to each environment
+        const environmentResults = {};
+        for (const env of environments) {
+            try {
+                const result = await deployToEnvironment(siteName, env, versionType, commitMessage, remote);
+                environmentResults[env] = result;
+            }
+            catch (error) {
+                environmentResults[env] = `Failed: ${error.message}`;
+            }
+        }
+        return {
+            prep: prepResult,
+            environments: environmentResults
+        };
+    }
+    catch (error) {
+        throw new Error(`Deployment failed: ${error.message}`);
+    }
+}
+/**
+ * Run preparation commands before deployment
+ */
+async function runPrepCommands(siteName, versionType, commitMessage) {
+    const results = [];
+    try {
+        // Update packages first
+        results.push('Updating packages...');
+        try {
+            const { stdout: outdatedOutput } = await execAsync('npm outdated --json', { timeout: 60000 });
+            const outdated = JSON.parse(outdatedOutput);
+            const packagesToUpdate = Object.keys(outdated).map(pkg => `${pkg}@${outdated[pkg].latest}`);
+            if (packagesToUpdate.length > 0) {
+                for (const pkg of packagesToUpdate.slice(0, 10)) { // Limit to 10 packages to avoid timeouts
+                    try {
+                        await execAsync(`npm install --save ${pkg}`, { timeout: 120000 });
+                        results.push(`Updated ${pkg}`);
+                    }
+                    catch (error) {
+                        results.push(`Failed to update ${pkg}: ${error.message}`);
+                    }
+                }
+            }
+            else {
+                results.push('All packages are up to date');
+            }
+        }
+        catch (error) {
+            results.push(`Package update check failed: ${error.message}`);
+        }
+        // Run linting
+        try {
+            await execAsync('npm run lint', { timeout: 120000 });
+            results.push('Linting passed');
+        }
+        catch (error) {
+            results.push(`Linting failed: ${error.message}`);
+        }
+        // Run audit fix
+        try {
+            await execAsync('npm audit fix --force', { timeout: 120000 });
+            results.push('Security audit fixes applied');
+        }
+        catch (error) {
+            results.push(`Audit fix failed: ${error.message}`);
+        }
+        // Update version based on type
+        if (versionType === 'patch') {
+            await execAsync('npm version patch --no-git-tag-version');
+            results.push('Updated patch version');
+        }
+        else if (versionType === 'minor') {
+            await execAsync('npm version minor --no-git-tag-version');
+            results.push('Updated minor version');
+        }
+        else if (versionType === 'major') {
+            await execAsync('npm version major --no-git-tag-version');
+            results.push('Updated major version');
+        }
+        // Build the project
+        await execAsync('npm run build', { timeout: 300000 });
+        results.push('Built project successfully');
+        // Commit changes
+        await execAsync(`git add . -v`, { timeout: 60000 });
+        await execAsync(`git commit -m "${commitMessage.replace(/"/g, '\\"')}"`, { timeout: 60000 });
+        results.push(`Committed changes: ${commitMessage}`);
+        // Get the new version
+        const { stdout: version } = await execAsync('node -p "require(\'./package.json\').version"');
+        results.push(`New version: ${version.trim()}`);
+        return results.join('\n');
+    }
+    catch (error) {
+        throw new Error(`Prep failed: ${error.message}`);
+    }
+}
+/**
+ * Deploy to a specific environment
+ */
+async function deployToEnvironment(siteName, environment, versionType, commitMessage, remote) {
+    const results = [];
+    const sourceBranch = 'dev';
+    try {
+        // Determine target branch
+        const branch = environment === 'prod' ? 'main' : 'dev';
+        const pushCmd = `git push ${environment === 'dev' ? '-u ' : ''}${remote} ${sourceBranch}:${branch} --tags`;
+        results.push(`Pushing to ${environment} (${branch})...`);
+        const { stdout, stderr } = await execAsync(pushCmd, { timeout: 300000 }); // 5 minute timeout
+        if (stdout)
+            results.push(stdout);
+        if (stderr)
+            results.push(stderr);
+        results.push(`✓ Successfully deployed ${siteName} to ${environment}`);
+        return results.join('\n');
+    }
+    catch (error) {
+        const errorMsg = `Push to ${environment} failed: ${error.message}`;
+        // Handle expected git errors gracefully
+        if (error.message.includes('non-fast-forward')) {
+            return `${errorMsg}\nNon-fast-forward error, you may need to force push or resolve conflicts manually.`;
+        }
+        if (error.message.includes('timeout') || error.message.includes('Command failed')) {
+            return `${errorMsg}\nGit push failed, you may need to retry manually.`;
+        }
+        if (error.message.includes('Repository not found') || error.message.includes('does not exist')) {
+            return `${errorMsg}\nRepository not found or access denied. Check your git remote configuration.`;
+        }
+        throw new Error(errorMsg);
+    }
+}

package/dist/components/admin/site-health/google-api-auth.js

@@ -0,0 +1,69 @@
+/**
+ * Google API Authentication Utilities
+ * Shared authentication logic for Google services (Analytics, Search Console, etc.)
+ */
+"use server";
+import { google } from 'googleapis';
+/**
+ * Create authenticated Google API client for a specific service
+ */
+export async function createGoogleAuthClient(config, scopes) {
+    try {
+        let auth;
+        if (config.serviceAccountKey) {
+            // Use service account authentication (recommended)
+            const credentials = JSON.parse(config.serviceAccountKey);
+            auth = new google.auth.GoogleAuth({
+                credentials,
+                scopes,
+            });
+        }
+        else if (config.clientId && config.clientSecret && config.refreshToken) {
+            // Fallback to OAuth2 (deprecated for server-side apps)
+            const oauth2Client = new google.auth.OAuth2(config.clientId, config.clientSecret);
+            oauth2Client.setCredentials({
+                refresh_token: config.refreshToken,
+            });
+            auth = oauth2Client;
+        }
+        else {
+            return {
+                success: false,
+                error: 'Google credentials not configured. Set GOOGLE_SERVICE_ACCOUNT_KEY or OAuth credentials.'
+            };
+        }
+        return { success: true, auth };
+    }
+    catch (error) {
+        return {
+            success: false,
+            error: `Authentication failed: ${error.message}`
+        };
+    }
+}
+/**
+ * Create Analytics Data API client
+ */
+export async function createAnalyticsClient(config) {
+    const result = await createGoogleAuthClient(config, ['https://www.googleapis.com/auth/analytics.readonly']);
+    if (!result.success)
+        return result;
+    return {
+        success: true,
+        client: google.analyticsdata({ version: 'v1beta', auth: result.auth }),
+        auth: result.auth
+    };
+}
+/**
+ * Create Search Console API client
+ */
+export async function createSearchConsoleClient(config) {
+    const result = await createGoogleAuthClient(config, ['https://www.googleapis.com/auth/webmasters.readonly']);
+    if (!result.success)
+        return result;
+    return {
+        success: true,
+        client: google.searchconsole({ version: 'v1', auth: result.auth }),
+        auth: result.auth
+    };
+}