@pixelated-tech/components 3.7.1 → 3.7.3

package/dist/scripts/generate-site-images.js

@@ -1,8 +1,11 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-const publicDir = path.join(__dirname, '..', 'public');
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const publicDir = path.join(process.cwd(), 'public');
 const outFile = path.join(publicDir, 'site-images.json');
 
 function listFiles(dir, exts = ['.jpg','.jpeg','.png','.webp','.avif','.gif']) {

package/dist/scripts/validate-exports.cjs

@@ -0,0 +1,280 @@
+import fs from 'fs';
+import glob from 'glob';
+import { CLIENT_ONLY_PATTERNS, TS_FILE_IGNORE_PATTERNS, TSX_FILE_IGNORE_PATTERNS, SERVER_ONLY_PATTERNS } from '../components/utilities/functions.js';
+
+console.log('🔍 Validating exports...\n');
+
+// Find all .ts files (excluding .d.ts, test files, stories, examples, types.ts)
+const tsFiles = glob.sync('src/components/**/*.ts', {
+	ignore: TS_FILE_IGNORE_PATTERNS
+});
+
+// Find all .tsx files (excluding test files, stories, examples)
+const tsxFiles = glob.sync('src/components/**/*.tsx', {
+	ignore: TSX_FILE_IGNORE_PATTERNS
+});
+
+// Combine all component files
+const allComponentFiles = [...tsFiles, ...tsxFiles];
+
+// Analyze each component file to determine if it's client-required or server-safe
+function analyzeComponentFile(filePath) {
+	const content = fs.readFileSync(filePath, 'utf8');
+
+	// Server-only patterns that indicate this should only be on server (not client)
+	// (Imported from shared utilities)
+
+	// Client-only patterns that require the component to run on client
+	// (Imported from shared utilities)
+
+	// Check if file contains any server-only patterns
+	const isServerOnly = SERVER_ONLY_PATTERNS.some(pattern => pattern.test(content));
+
+	// Check if file contains any client-only patterns
+	const isClientOnly = CLIENT_ONLY_PATTERNS.some(pattern => pattern.test(content));
+
+	return {
+		filePath,
+		isClientOnly,
+		isServerOnly,
+		exportPath: filePath.replace('src/', './').replace(/\.tsx?$/, '')
+	};
+}
+
+// Analyze all component files
+const analyzedComponents = allComponentFiles.map(analyzeComponentFile);
+
+// Special handling for utilities/functions.ts - it's safe for both client and server despite containing pattern definitions
+analyzedComponents.forEach(comp => {
+	if (comp.exportPath === './components/utilities/functions') {
+		comp.isClientOnly = false;
+		comp.isServerOnly = false;
+	}
+});
+
+// Separate admin and non-admin components
+const adminComponents = analyzedComponents.filter(comp => comp.exportPath.startsWith('./components/admin/'));
+const nonAdminComponents = analyzedComponents.filter(comp => !comp.exportPath.startsWith('./components/admin/'));
+
+// Create arrays of components for each bundle (non-admin only)
+// If a component has server-only patterns, it's server-only; if client-only and not server-only, client-only; else safe
+const serverOnlyComponents = nonAdminComponents.filter(comp => comp.isServerOnly);
+const clientOnlyComponents = nonAdminComponents.filter(comp => comp.isClientOnly && !comp.isServerOnly);
+const clientAndServerSafeComponents = nonAdminComponents.filter(comp => !comp.isClientOnly && !comp.isServerOnly);
+
+// Read index files
+const indexServer = fs.readFileSync('src/index.server.js', 'utf8');
+const indexClient = fs.readFileSync('src/index.js', 'utf8');
+const indexAdminServer = fs.readFileSync('src/index.adminserver.js', 'utf8');
+const indexAdminClient = fs.readFileSync('src/index.adminclient.js', 'utf8');
+
+// Helper function to extract exports from index file
+function extractExports(content) {
+	// Remove comments
+	content = content.replace(/\/\*[\s\S]*?\*\//g, '');
+	content = content.replace(/\/\/.*$/gm, '');
+
+	const exports = [];
+
+	// Handle export * from './path' syntax
+	const exportAllRegex = /export\s+\*\s+from\s+['"]([^'"]+)['"]/g;
+	let match;
+
+	while ((match = exportAllRegex.exec(content)) !== null) {
+		exports.push(match[1]);
+	}
+
+	// Handle export { ... } from './path' syntax
+	const exportRegex = /export\s+{\s*([^}]+)\s*}\s+from\s+['"]([^'"]+)['"]/g;
+	while ((match = exportRegex.exec(content)) !== null) {
+		const exportList = match[1];
+		const exportItems = exportList.split(',').map(item => item.trim());
+		exports.push(...exportItems.map(item => match[2])); // Use the from path
+	}
+
+	return exports;
+}
+
+// Extract exports from all index files
+const serverExports = extractExports(indexServer);
+const clientExports = extractExports(indexClient);
+const adminServerExports = extractExports(indexAdminServer);
+const adminClientExports = extractExports(indexAdminClient);
+
+const missing = {
+	server: [],
+	client: [],
+	adminServer: [],
+	adminClient: [],
+	files: [] // New: exported paths that don't correspond to existing files
+};
+
+const bundleErrors = {
+	server: [], // Client-only components incorrectly in server bundle
+	client: [], // Server-only components incorrectly in client bundle
+	adminServer: [], // Client-only components incorrectly in admin server bundle
+	adminClient: [] // Server-only components incorrectly in admin client bundle
+};
+
+// Check if exported paths correspond to existing files
+function checkExportPathsExist(exports, bundleName) {
+	exports.forEach(exportPath => {
+		// Convert export path to file path (./components/... -> src/components/...)
+		const filePathBase = exportPath.replace('./', 'src/');
+		const tsFile = `${filePathBase}.ts`;
+		const tsxFile = `${filePathBase}.tsx`;
+    
+		const tsExists = fs.existsSync(tsFile);
+		const tsxExists = fs.existsSync(tsxFile);
+    
+		if (!tsExists && !tsxExists) {
+			missing.files.push(`${bundleName}: ${exportPath} (.ts/.tsx files not found)`);
+		}
+	});
+}
+
+checkExportPathsExist(serverExports, 'server bundle');
+checkExportPathsExist(clientExports, 'client bundle');
+checkExportPathsExist(adminServerExports, 'admin server bundle');
+checkExportPathsExist(adminClientExports, 'admin client bundle');
+
+// Check for missing exports
+clientAndServerSafeComponents.forEach(comp => {
+	if (!serverExports.includes(comp.exportPath)) {
+		missing.server.push(comp.exportPath);
+	}
+});
+
+serverOnlyComponents.forEach(comp => {
+	if (!serverExports.includes(comp.exportPath)) {
+		missing.server.push(comp.exportPath);
+	}
+});
+
+clientOnlyComponents.forEach(comp => {
+	if (!clientExports.includes(comp.exportPath)) {
+		missing.client.push(comp.exportPath);
+	}
+});
+
+clientAndServerSafeComponents.forEach(comp => {
+	if (!clientExports.includes(comp.exportPath)) {
+		missing.client.push(comp.exportPath);
+	}
+});
+
+// Check admin components - separate server and client bundles
+const serverRelevantAdmin = adminComponents.filter(comp => comp.isServerOnly || !comp.isClientOnly);
+const clientRelevantAdmin = adminComponents.filter(comp => comp.isClientOnly || !comp.isServerOnly);
+
+serverRelevantAdmin.forEach(comp => {
+	if (!adminServerExports.includes(comp.exportPath)) {
+		missing.adminServer.push(comp.exportPath);
+	}
+	if (serverExports.includes(comp.exportPath) && !comp.isServerOnly) {
+		bundleErrors.server.push(comp.exportPath + ' (admin component in server bundle)');
+	}
+	if (clientExports.includes(comp.exportPath) && !comp.isServerOnly) {
+		bundleErrors.client.push(comp.exportPath + ' (admin component in client bundle)');
+	}
+});
+
+clientRelevantAdmin.forEach(comp => {
+	if (!adminClientExports.includes(comp.exportPath)) {
+		missing.adminClient.push(comp.exportPath);
+	}
+	if (serverExports.includes(comp.exportPath) && comp.isClientOnly) {
+		bundleErrors.server.push(comp.exportPath + ' (client-only admin component in server bundle)');
+	}
+	// Allow client-only components in adminserver if they are also server-only (both)
+	if (adminServerExports.includes(comp.exportPath) && comp.isClientOnly && !comp.isServerOnly) {
+		bundleErrors.adminServer.push(comp.exportPath + ' (client-only admin component in admin server bundle)');
+	}
+});
+
+// Check for bundle contamination errors
+clientOnlyComponents.forEach(comp => {
+	if (serverExports.includes(comp.exportPath)) {
+		bundleErrors.server.push(comp.exportPath);
+	}
+});
+
+serverOnlyComponents.forEach(comp => {
+	if (clientExports.includes(comp.exportPath)) {
+		bundleErrors.client.push(comp.exportPath + ' (server-only component in client bundle)');
+	}
+});
+
+// Report results
+console.log('📊 Analysis Results:');
+console.log(`   Found ${allComponentFiles.length} component files`);
+console.log(`   ${clientOnlyComponents.length} client-only components`);
+console.log(`   ${clientAndServerSafeComponents.length} client-and-server-safe components`);
+console.log(`   ${serverOnlyComponents.length} server-only components`);
+console.log(`   ${adminComponents.length} admin components`);
+if (missing.server.length > 0) {
+	console.log('❌ Missing from server bundle (index.server.js):');
+	missing.server.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (missing.client.length > 0) {
+	console.log('❌ Missing from client bundle (index.js):');
+	missing.client.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (missing.adminServer.length > 0) {
+	console.log('❌ Missing from admin server bundle (index.adminserver.js):');
+	missing.adminServer.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (missing.adminClient.length > 0) {
+	console.log('❌ Missing from admin client bundle (index.adminclient.js):');
+	missing.adminClient.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (bundleErrors.server.length > 0) {
+	console.log('🚨 Bundle contamination errors:');
+	console.log('   Client-required components incorrectly exported from server bundle:');
+	bundleErrors.server.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (bundleErrors.client.length > 0) {
+	console.log('🚨 Bundle contamination errors:');
+	console.log('   Server-required components incorrectly exported from client bundle:');
+	bundleErrors.client.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (bundleErrors.adminServer.length > 0) {
+	console.log('🚨 Bundle contamination errors:');
+	console.log('   Client-required components incorrectly exported from admin server bundle:');
+	bundleErrors.adminServer.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (bundleErrors.adminClient.length > 0) {
+	console.log('🚨 Bundle contamination errors:');
+	console.log('   Server-only components incorrectly exported from admin client bundle:');
+	bundleErrors.adminClient.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+if (missing.files.length > 0) {
+	console.log('❌ Exported paths that don\'t exist:');
+	missing.files.forEach(path => console.log(`   - ${path}`));
+	console.log('');
+}
+
+const hasErrors = missing.server.length > 0 || missing.client.length > 0 || missing.adminServer.length > 0 || missing.adminClient.length > 0 || bundleErrors.server.length > 0 || bundleErrors.client.length > 0 || bundleErrors.adminServer.length > 0 || bundleErrors.adminClient.length > 0 || missing.files.length > 0;
+
+if (hasErrors) {
+	console.log('❌ Validation failed!');
+	process.exit(1);
+} else {
+	console.log('✅ All exports validated successfully!');
+}

package/dist/types/scripts/validate-exports.d.cts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=validate-exports.d.cts.map

package/dist/types/scripts/validate-exports.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-exports.d.cts","sourceRoot":"","sources":["../../../src/scripts/validate-exports.cjs"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pixelated-tech/components",
-	"version": "3.7.1",
+	"version": "3.7.3",
 	"private": false,
 	"author": {
 		"name": "Pixelated Technologies",

package/dist/mocks/browser.js

@@ -1 +0,0 @@
-"use strict";

package/dist/mocks/handlers.js

@@ -1,206 +0,0 @@
-import { http, HttpResponse } from 'msw';
-console.log('MSW handlers loaded');
-// Mock data for Axe Core accessibility
-const mockAxeData = {
-    success: true,
-    data: {
-        site: 'example.com',
-        url: 'https://example.com',
-        violations: [
-            {
-                id: 'color-contrast',
-                impact: 'serious',
-                description: 'Elements must have sufficient color contrast',
-                help: 'Ensure text has enough contrast against background',
-                helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/color-contrast',
-                nodes: [
-                    {
-                        target: ['.header h1'],
-                        html: '<h1>Welcome</h1>',
-                        failureSummary: 'Fix any of the following: Element has insufficient color contrast of 2.5:1'
-                    }
-                ]
-            },
-            {
-                id: 'image-alt',
-                impact: 'critical',
-                description: 'Images must have alternate text',
-                help: 'Provide alternative text for images',
-                helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/image-alt',
-                nodes: [
-                    {
-                        target: ['img[alt=""]'],
-                        html: '<img src="logo.png" alt="">',
-                        failureSummary: 'Fix any of the following: aria-label attribute does not exist or is empty'
-                    }
-                ]
-            }
-        ],
-        passes: 45,
-        incomplete: 2,
-        inapplicable: 12
-    }
-};
-// Mock data for Core Web Vitals
-const mockCoreWebVitalsData = {
-    success: true,
-    data: {
-        site: 'pixelated.tech',
-        url: 'https://pixelated.tech',
-        metrics: {
-            cls: 0.05,
-            fid: 85,
-            lcp: 1200,
-            fcp: 800,
-            ttfb: 150,
-            speedIndex: 1100,
-            interactive: 1300,
-            totalBlockingTime: 50,
-            firstMeaningfulPaint: 900
-        },
-        scores: {
-            performance: 85,
-            accessibility: 90,
-            bestPractices: 95,
-            seo: 88,
-            pwa: 75
-        },
-        categories: {
-            performance: { score: 85, displayValue: 'Good' },
-            accessibility: { score: 90, displayValue: 'Good' },
-            bestPractices: { score: 95, displayValue: 'Good' },
-            seo: { score: 88, displayValue: 'Good' },
-            pwa: { score: 75, displayValue: 'Good' }
-        }
-    }
-};
-// Mock data for Google Analytics
-const mockGoogleAnalyticsData = {
-    success: true,
-    data: {
-        site: 'pixelated.tech',
-        dateRange: {
-            start: '2024-01-01',
-            end: '2024-01-06'
-        },
-        metrics: {
-            users: 1250,
-            sessions: 1800,
-            pageviews: 3200,
-            bounceRate: 0.45,
-            avgSessionDuration: 180,
-            newUsers: 890
-        },
-        chartData: [
-            { date: '2024-01-01', users: 120, sessions: 150, pageviews: 280 },
-            { date: '2024-01-02', users: 135, sessions: 165, pageviews: 310 },
-            { date: '2024-01-03', users: 142, sessions: 178, pageviews: 325 },
-            { date: '2024-01-04', users: 158, sessions: 192, pageviews: 345 },
-            { date: '2024-01-05', users: 165, sessions: 198, pageviews: 365 },
-            { date: '2024-01-06', users: 172, sessions: 205, pageviews: 380 }
-        ]
-    }
-};
-// Mock data for Google Search Console
-const mockGoogleSearchConsoleData = {
-    success: true,
-    data: {
-        site: 'pixelated.tech',
-        dateRange: {
-            start: '2024-01-01',
-            end: '2024-01-06'
-        },
-        metrics: {
-            clicks: 1250,
-            impressions: 15000,
-            ctr: 0.083,
-            position: 12.5
-        },
-        chartData: [
-            { date: '2024-01-01', clicks: 85, impressions: 1200, ctr: 0.071, position: 14.2 },
-            { date: '2024-01-02', clicks: 92, impressions: 1350, ctr: 0.068, position: 13.8 },
-            { date: '2024-01-03', clicks: 98, impressions: 1420, ctr: 0.069, position: 13.5 },
-            { date: '2024-01-04', clicks: 105, impressions: 1480, ctr: 0.071, position: 13.2 },
-            { date: '2024-01-05', clicks: 112, impressions: 1520, ctr: 0.074, position: 12.8 },
-            { date: '2024-01-06', clicks: 118, impressions: 1580, ctr: 0.075, position: 12.5 }
-        ]
-    }
-};
-// Mock data for CloudWatch uptime
-const mockCloudWatchData = {
-    success: true,
-    data: {
-        site: 'pixelated.tech',
-        uptime: 99.8,
-        responseTime: 245,
-        status: 'operational',
-        incidents: [],
-        chartData: [
-            { timestamp: '2024-01-01T00:00:00Z', uptime: 100, responseTime: 220 },
-            { timestamp: '2024-01-02T00:00:00Z', uptime: 99.5, responseTime: 280 },
-            { timestamp: '2024-01-03T00:00:00Z', uptime: 100, responseTime: 210 },
-            { timestamp: '2024-01-04T00:00:00Z', uptime: 100, responseTime: 235 },
-            { timestamp: '2024-01-05T00:00:00Z', uptime: 99.9, responseTime: 250 },
-            { timestamp: '2024-01-06T00:00:00Z', uptime: 100, responseTime: 225 }
-        ]
-    }
-};
-export const handlers = [
-    // API endpoints using relative paths (MSW v2 matches these regardless of origin)
-    http.get('/api/site-health/axe-core', () => {
-        console.log('MSW: Intercepting axe-core request');
-        return HttpResponse.json(mockAxeData);
-    }),
-    http.get('/api/site-health/core-web-vitals', () => {
-        console.log('MSW: Intercepting core-web-vitals request');
-        return HttpResponse.json(mockCoreWebVitalsData);
-    }),
-    http.get('/api/site-health/google-analytics', () => {
-        console.log('MSW: Intercepting google-analytics request');
-        return HttpResponse.json(mockGoogleAnalyticsData);
-    }),
-    http.get('/api/site-health/google-search-console', () => {
-        console.log('MSW: Intercepting google-search-console request');
-        return HttpResponse.json(mockGoogleSearchConsoleData);
-    }),
-    http.get('/api/site-health/cloudwatch', () => {
-        console.log('MSW: Intercepting cloudwatch request');
-        return HttpResponse.json(mockCloudWatchData);
-    }),
-    // External URLs used by some stories
-    http.get('https://api.pixelated.tech/axe-core', () => {
-        console.log('MSW: Intercepting external axe-core request');
-        return HttpResponse.json(mockAxeData);
-    }),
-    http.get('https://api.pixelated.tech/core-web-vitals', () => {
-        console.log('MSW: Intercepting external core-web-vitals request');
-        return HttpResponse.json(mockCoreWebVitalsData);
-    }),
-    http.get('https://api.pixelated.tech/google-analytics', () => {
-        console.log('MSW: Intercepting external google-analytics request');
-        return HttpResponse.json(mockGoogleAnalyticsData);
-    }),
-    http.get('https://api.pixelated.tech/google-search-console', () => {
-        console.log('MSW: Intercepting external google-search-console request');
-        return HttpResponse.json(mockGoogleSearchConsoleData);
-    }),
-    http.get('https://api.pixelated.tech/cloudwatch', () => {
-        console.log('MSW: Intercepting external cloudwatch request');
-        return HttpResponse.json(mockCloudWatchData);
-    }),
-    http.get('https://api.pixelated.tech/template-data', () => {
-        console.log('MSW: Intercepting template-data request');
-        return HttpResponse.json({
-            success: true,
-            data: { message: 'Mock template data' }
-        });
-    }),
-    // Generic fallback for any other site health endpoints
-    http.get('/api/site-health/*', () => {
-        console.log('MSW: Intercepting generic site-health request');
-        return HttpResponse.json({
-            success: true,
-            data: { message: 'Mock data for site health endpoint' }
-        });
-    })
-];

package/dist/mocks/index.js

@@ -1 +0,0 @@
-"use strict";

package/dist/types/mocks/browser.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=browser.d.ts.map

package/dist/types/mocks/browser.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../../src/mocks/browser.js"],"names":[],"mappings":""}

package/dist/types/mocks/handlers.d.ts

@@ -1,2 +0,0 @@
-export const handlers: any[];
-//# sourceMappingURL=handlers.d.ts.map

package/dist/types/mocks/handlers.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"handlers.d.ts","sourceRoot":"","sources":["../../../src/mocks/handlers.js"],"names":[],"mappings":"AA0JA,6BAqEE"}

package/dist/types/mocks/index.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=index.d.ts.map

package/dist/types/mocks/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/mocks/index.js"],"names":[],"mappings":""}