@pixelated-tech/components 3.6.0 → 3.7.1

package/dist/mocks/handlers.js

@@ -0,0 +1,206 @@
+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

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

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

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const fs = require('fs');
+const path = require('path');
+
+const publicDir = path.join(__dirname, '..', 'public');
+const outFile = path.join(publicDir, 'site-images.json');
+
+function listFiles(dir, exts = ['.jpg','.jpeg','.png','.webp','.avif','.gif']) {
+	const out = [];
+	if (!fs.existsSync(dir)) return out;
+	const items = fs.readdirSync(dir, { withFileTypes: true });
+	for (const it of items) {
+		const full = path.join(dir, it.name);
+		if (it.isDirectory()) out.push(...listFiles(full, exts));
+		else if (exts.includes(path.extname(it.name).toLowerCase())) {
+			out.push(path.relative(publicDir, full).replace(/\\\\/g, '/'));
+		}
+	}
+	return out;
+}
+
+const files = listFiles(publicDir);
+const manifest = {
+	metadata: {
+		generatedAt: new Date().toISOString(),
+		imageCount: files.length,
+	},
+	images: files,
+};
+fs.writeFileSync(outFile, JSON.stringify(manifest, null, 2), 'utf8');
+console.log('Wrote', outFile, 'with', files.length, 'images and metadata');

package/dist/scripts/proptypes-inferprops.js

@@ -0,0 +1,205 @@
+import { isClientComponent } from '../components/utilities/functions.ts';
+
+export default {
+	meta: {
+		type: 'problem',
+		docs: {
+			description: 'Enforce PropTypes + InferProps pattern for React components',
+			category: 'Best Practices',
+			recommended: true,
+		},
+		fixable: false,
+		schema: [],
+		messages: {
+			missingPropTypes: 'Component "{{componentName}}" is missing propTypes. Add: {{componentName}}.propTypes = { ... }; immediately above the function.',
+			missingInferProps: 'Component "{{componentName}}" is missing InferProps type. Add: export type {{componentName}}Type = InferProps<typeof {{componentName}}.propTypes>; immediately above the function.',
+			invalidInferProps: 'InferProps type for "{{componentName}}" must be named "{{componentName}}Type" and exported. Rename and add export.',
+			missingInferPropsUsage: 'Component "{{componentName}}" function parameters must use the InferProps type. Change: export function {{componentName}}(props: {{componentName}}Type)',
+			propTypesPlacement: 'Component "{{componentName}}" propTypes must be defined immediately above the function declaration with no blank lines. Move {{componentName}}.propTypes = { ... }; right above the function.',
+			inferPropsPlacement: 'Component "{{componentName}}" InferProps type must be defined immediately above the function declaration with no blank lines. Move export type {{componentName}}Type = ...; right above the function.',
+		},
+	},
+	create(context) {
+
+		const components = new Map(); // Track components and their patterns
+
+		function checkForInferProps(typeAnnotation) {
+			if (!typeAnnotation) return false;
+      
+			if (typeAnnotation.type === 'TSTypeReference' && typeAnnotation.typeName?.name === 'InferProps') {
+				return true;
+			}
+      
+			if (typeAnnotation.type === 'TSIntersectionType') {
+				return typeAnnotation.types.some(checkForInferProps);
+			}
+      
+			return false;
+		}
+
+		function extractComponentNameFromInferProps(node) {
+			// For our pattern of ComponentType = InferProps<typeof Component.propTypes>
+			// We can simply remove 'Type' from the type name
+			return node.id.name.replace('Type', '');
+		}
+
+		function reportViolations(component) {
+			const { functionNode, hasPropTypes, hasInferProps, usesInferProps, inferPropsName, propTypesNode, inferPropsNode } = component;
+			if (!functionNode) return; // Skip if function not found yet
+      
+			const componentName = functionNode.id.name;
+
+			if (!hasPropTypes) {
+				context.report({
+					node: functionNode,
+					messageId: 'missingPropTypes',
+					data: { componentName },
+				});
+			}
+
+			if (!hasInferProps) {
+				context.report({
+					node: functionNode,
+					messageId: 'missingInferProps',
+					data: { componentName },
+				});
+			}
+
+			if (hasPropTypes && hasInferProps && !usesInferProps && functionNode.params.length > 0) {
+				context.report({
+					node: functionNode,
+					messageId: 'missingInferPropsUsage',
+					data: { componentName, inferPropsName },
+				});
+			}
+
+			// Check placement and ordering: propTypes -> InferProps -> function (consecutive, no empty lines)
+			if (hasPropTypes && hasInferProps && propTypesNode && inferPropsNode) {
+				const propTypesEndLine = propTypesNode.loc.end.line;
+				const inferPropsLine = inferPropsNode.loc.start.line;
+				const functionLine = functionNode.loc.start.line;
+        
+				// InferProps must immediately follow propTypes (no empty lines)
+				if (inferPropsLine !== propTypesEndLine + 1) {
+					context.report({
+						node: inferPropsNode,
+						messageId: 'inferPropsPlacement',
+						data: { componentName },
+					});
+				}
+        
+				// Function must immediately follow InferProps (no empty lines)
+				if (functionLine !== inferPropsLine + 1) {
+					context.report({
+						node: functionNode,
+						messageId: 'propTypesPlacement',
+						data: { componentName },
+					});
+				}
+			}
+		}
+
+		return {
+			// Find component function declarations
+			FunctionDeclaration(node) {
+				if (node.id && node.id.name && node.parent.type === 'ExportNamedDeclaration') {
+					const componentName = node.id.name;
+
+					// Check if this is a client component (contains client-only patterns)
+					const sourceCode = context.getSourceCode();
+					const fileContent = sourceCode.text;
+					if (componentName[0] === componentName[0].toUpperCase() && isClientComponent(fileContent)) {
+						if (!components.has(componentName)) {
+							components.set(componentName, {
+								functionNode: node,
+								hasPropTypes: false,
+								hasInferProps: false,
+								inferPropsName: `${componentName}Type`,
+								usesInferProps: false,
+								propTypesNode: null,
+								inferPropsNode: null,
+							});
+						} else {
+							// Component entry already exists (e.g., from propTypes), just update functionNode
+							components.get(componentName).functionNode = node;
+						}
+					}
+				}
+			},
+
+			// Find PropTypes assignments
+			AssignmentExpression(node) {
+				if (
+					node.left.type === 'MemberExpression' &&
+          node.left.object.type === 'Identifier' &&
+          node.left.property.name === 'propTypes'
+				) {
+					const componentName = node.left.object.name;
+					if (!components.has(componentName)) {
+						// Component might be declared later, create entry now
+						components.set(componentName, {
+							functionNode: null, // Will be set when function is found
+							hasPropTypes: false,
+							hasInferProps: false,
+							inferPropsName: `${componentName}Type`,
+							usesInferProps: false,
+							propTypesNode: null,
+							inferPropsNode: null,
+						});
+					}
+					const component = components.get(componentName);
+					component.hasPropTypes = true;
+					component.propTypesNode = node;
+				}
+			},
+
+			// Find InferProps type declarations
+			TSTypeAliasDeclaration(node) {
+				if (node.parent.type === 'ExportNamedDeclaration') {
+					const componentName = extractComponentNameFromInferProps(node);
+					if (componentName && components.has(componentName)) {
+						const component = components.get(componentName);
+						if (node.id.name === component.inferPropsName) {
+							// Check if type annotation contains InferProps
+							const hasInferProps = checkForInferProps(node.typeAnnotation);
+							if (hasInferProps) {
+								component.hasInferProps = true;
+								component.inferPropsNode = node;
+							}
+						}
+					}
+				}
+			},
+
+			// Check function parameters
+			'FunctionDeclaration:exit'(node) {
+				if (node.id && components.has(node.id.name)) {
+					const component = components.get(node.id.name);
+
+					// Check if function uses the InferProps type
+					if (node.params.length === 1) {
+						const param = node.params[0];
+            
+						// Handle both direct type annotation and destructured parameters
+						let paramTypeName = null;
+            
+						if (param.type === 'Identifier' && param.typeAnnotation?.typeAnnotation?.type === 'TSTypeReference') {
+							// Direct parameter: (props: ComponentType)
+							paramTypeName = param.typeAnnotation.typeAnnotation.typeName?.name;
+						} else if (param.type === 'ObjectPattern' && param.typeAnnotation?.typeAnnotation?.type === 'TSTypeReference') {
+							// Destructured parameter: ({ prop }: ComponentType)
+							paramTypeName = param.typeAnnotation.typeAnnotation.typeName?.name;
+						}
+            
+						if (paramTypeName === component.inferPropsName) {
+							component.usesInferProps = true;
+						}
+					}
+
+					// Report violations
+					reportViolations(component);
+				}
+			},
+		};
+	},
+};

package/dist/scripts/release.sh

@@ -0,0 +1,194 @@
+#!/bin/bash
+
+# Universal Release Script for Pixelated Projects
+# This script builds in dev, updates main, and optionally publishes to npm
+
+set -e  # Exit on any error
+
+# Get project name from package.json
+PROJECT_NAME=$(node -p "require('./package.json').name" 2>/dev/null || echo "unknown-project")
+
+# Function to prompt for remote selection
+prompt_remote_selection() {
+    echo "Available git remotes:" >&2
+    local remotes=($(git remote))
+    local i=1
+    for remote in "${remotes[@]}"; do
+        echo "$i) $remote" >&2
+        ((i++))
+    done
+    
+    local choice
+    read -p "Select remote to use (1-${#remotes[@]}): " choice >&2
+    
+    case $choice in
+        [1-9]|[1-9][0-9])
+            if [ "$choice" -le "${#remotes[@]}" ]; then
+                echo "${remotes[$((choice-1))]}"
+            else
+                echo "${remotes[0]}"  # Default to first if invalid
+            fi
+            ;;
+        *) echo "${remotes[0]}" ;;  # Default to first remote
+    esac
+}
+
+# Select remote
+REMOTE_NAME=$(prompt_remote_selection)
+
+echo "🚀 Starting Release Process for $PROJECT_NAME"
+echo "================================================="
+
+# Function to get current version
+get_current_version() {
+    node -p "require('./package.json').version"
+}
+
+# Function to prompt for version bump type
+prompt_version_type() {
+    echo "Current version: $(get_current_version)" >&2
+    echo "Select version bump type:" >&2
+    echo "1) patch (x.x.1)" >&2
+    echo "2) minor (x.1.0)" >&2
+    echo "3) major (1.x.x)" >&2
+    echo "4) custom version" >&2
+    echo "5) no version bump" >&2
+    read -p "Enter choice (1-5): " choice >&2
+    case $choice in
+        1) version_type="patch" ;;
+        2) version_type="minor" ;;
+        3) version_type="major" ;;
+        4)
+            read -p "Enter custom version: " custom_version >&2
+            version_type="$custom_version"
+            ;;
+        5) version_type="none" ;;
+        *) version_type="patch" ;; # default
+    esac
+}
+
+# Function to prompt for commit message
+prompt_commit_message() {
+    read -p "Enter commit message (or press enter for default): " commit_msg
+    if [ -z "$commit_msg" ]; then
+        echo "chore: release $(get_current_version)"
+    else
+        echo "$commit_msg"
+    fi
+}
+
+# Function to prompt for publishing
+prompt_publish() {
+    read -p "Do you want to publish to npm? (y/n): " should_publish
+    if [ "$should_publish" = "y" ] || [ "$should_publish" = "Y" ]; then
+        echo "yes"
+    else
+        echo "no"
+    fi
+}
+
+# Function to prompt for OTP
+prompt_otp() {
+    read -p "Enter npm OTP: " otp
+    echo "$otp"
+}
+
+# Check if we're on dev branch
+current_branch=$(git branch --show-current)
+if [ "$current_branch" != "dev" ]; then
+    echo "❌ Error: Must be on dev branch to run this script"
+    echo "Current branch: $current_branch"
+    echo "Please switch to dev branch: git checkout dev"
+    exit 1
+fi
+
+echo "📦 Step 1: Updating dependencies..."
+npm outdated | awk 'NR>1 {print $1"@"$4}' | xargs npm install --force --save 2>/dev/null || true
+npm audit fix --force 2>/dev/null || true
+
+echo "🔍 Step 2: Running lint..."
+npm run lint
+
+echo "🔨 Step 3: Building project..."
+npm run build
+
+echo "🏷️  Step 4: Version bump..."
+prompt_version_type
+if [ "$version_type" != "none" ]; then
+    if [ "$version_type" = "patch" ] || [ "$version_type" = "minor" ] || [ "$version_type" = "major" ]; then
+        npm version $version_type --force --no-git-tag-version
+    else
+        # Custom version
+        npm version $version_type --force --no-git-tag-version
+    fi
+fi
+
+echo "💾 Step 5: Committing changes..."
+commit_message=$(prompt_commit_message)
+git add . -v
+if git diff --cached --quiet; then
+    echo "ℹ️  No changes to commit"
+else
+    git commit -m "$commit_message"
+fi
+
+echo "📤 Step 6: Pushing dev branch..."
+# Try to push, if it fails due to remote changes, fetch and rebase
+if ! git push $REMOTE_NAME dev; then
+    echo "⚠️  Push failed, fetching remote changes and rebasing..."
+    git fetch $REMOTE_NAME
+    if git rebase $REMOTE_NAME/dev; then
+        echo "✅ Rebased successfully, pushing..."
+        git push $REMOTE_NAME dev || {
+            echo "❌ Failed to push after rebase. Please check git status."
+            exit 1
+        }
+    else
+        echo "❌ Rebase failed. Please resolve conflicts and run 'git rebase --continue' or 'git rebase --abort'"
+        exit 1
+    fi
+fi
+
+echo "🔄 Step 7: Updating main branch..."
+# Force main to match dev exactly
+git push $REMOTE_NAME dev:main --force
+
+# Also update main locally if it exists
+if git show-ref --verify --quiet refs/heads/main; then
+    git branch -D main 2>/dev/null || true
+    git checkout -b main
+    git reset --hard dev
+    git push $REMOTE_NAME main --force
+    git checkout dev
+fi
+
+echo "🏷️  Step 8: Creating and pushing git tag..."
+new_version=$(get_current_version)
+if ! git tag -l | grep -q "v$new_version"; then
+    git tag "v$new_version"
+    git push $REMOTE_NAME "v$new_version"
+else
+    echo "ℹ️  Tag v$new_version already exists"
+fi
+
+echo "🔐 Step 9: Publishing to npm..."
+should_publish=$(prompt_publish)
+if [ "$should_publish" = "yes" ]; then
+    npm login
+    otp=$(prompt_otp)
+    npm publish --access public --otp=$otp
+    echo "✅ Successfully published to npm!"
+else
+    echo "ℹ️  Skipping npm publish"
+    echo "You can publish manually with: npm publish --access public"
+fi
+
+echo ""
+echo "✅ Release complete!"
+echo "📦 Version: $(get_current_version)"
+echo "📋 Branches updated: dev, main"
+echo "🏷️  Tag created: v$(get_current_version)"
+
+if [ "$should_publish" = "yes" ]; then
+    echo "🔗 https://www.npmjs.com/package/$PROJECT_NAME"
+fi