@jmruthers/pace-core 0.5.184 → 0.5.186

package/eslint-config-pace-core.cjs

@@ -0,0 +1,93 @@
+/**
+ * ESLint Config Preset for pace-core Compliance
+ * @package @jmruthers/pace-core
+ * @module ESLintConfig
+ * 
+ * Shareable ESLint configuration that consuming apps can extend
+ * to enforce pace-core usage patterns.
+ * 
+ * @example
+ * // In your consuming app's eslint.config.js:
+ * import paceCoreConfig from '@jmruthers/pace-core/eslint-config';
+ * 
+ * export default [
+ *   ...paceCoreConfig,
+ *   // your other config
+ * ];
+ */
+
+const path = require('path');
+const fs = require('fs');
+
+// Load manifest to get restricted imports
+let restrictedImports = [];
+try {
+  const manifestPath = path.join(__dirname, 'core-usage-manifest.json');
+  if (fs.existsSync(manifestPath)) {
+    const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+    restrictedImports = manifest.restrictedImports || [];
+  }
+} catch (error) {
+  console.warn('Warning: Could not load core-usage-manifest.json for ESLint config');
+}
+
+// Load pace-core compliance rules
+let paceCoreRules = {};
+try {
+  // Try source path first (for development)
+  const sourceRulesPath = path.resolve(__dirname, 'src/eslint-rules/pace-core-compliance.cjs');
+  if (fs.existsSync(sourceRulesPath)) {
+    paceCoreRules = require(sourceRulesPath).rules;
+  } else {
+    // Try dist path (for published package)
+    const distRulesPath = path.resolve(__dirname, 'dist/eslint-rules/pace-core-compliance.cjs');
+    if (fs.existsSync(distRulesPath)) {
+      paceCoreRules = require(distRulesPath).rules;
+    } else {
+      // Try relative to current working directory (for consuming apps)
+      const cwdRulesPath = path.resolve(process.cwd(), 'node_modules/@jmruthers/pace-core/dist/eslint-rules/pace-core-compliance.cjs');
+      if (fs.existsSync(cwdRulesPath)) {
+        paceCoreRules = require(cwdRulesPath).rules;
+      }
+    }
+  }
+} catch (error) {
+  // Silently fail - rules will be empty, but config will still work
+  // This allows the config to be used even if rules aren't available
+}
+
+// Build restricted imports for no-restricted-imports rule (ESLint 9 flat config format)
+// ESLint 9 expects an array of objects with 'name' (string or regex) and 'message'
+const restrictedImportRules = restrictedImports.map(({ module, reason }) => ({
+  name: module,
+  message: reason || `Use pace-core alternative instead of direct import of '${module}'`
+}));
+
+// Also add pattern for @radix-ui/* (catch-all) - use string pattern format
+restrictedImportRules.push({
+  name: '@radix-ui/*',
+  message: 'Use pace-core components instead of direct Radix UI imports'
+});
+
+module.exports = [
+  {
+    plugins: {
+      'pace-core-compliance': {
+        rules: paceCoreRules
+      }
+    },
+    rules: {
+      // Use pace-core compliance rules
+      'pace-core-compliance/no-restricted-imports': 'error',
+      'pace-core-compliance/prefer-pace-core-components': 'warn',
+      'pace-core-compliance/prefer-pace-core-hooks': 'warn',
+      'pace-core-compliance/prefer-pace-core-utils': 'warn',
+      'pace-core-compliance/no-local-component-duplication': 'error',
+      
+      // Also use standard no-restricted-imports (ESLint 9 flat config format)
+      // Note: ESLint 9 uses a simpler array format
+      'no-restricted-imports': ['error', ...restrictedImportRules]
+    }
+  }
+];
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.184",
+  "version": "0.5.186",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {
@@ -52,6 +52,12 @@
       "import": "./dist/rbac/eslint-rules.js",
       "default": "./dist/rbac/eslint-rules.js"
     },
+    "./eslint-rules": {
+      "require": "./dist/eslint-rules/pace-core-compliance.cjs",
+      "import": "./dist/eslint-rules/pace-core-compliance.cjs",
+      "default": "./dist/eslint-rules/pace-core-compliance.cjs"
+    },
+    "./eslint-config": "./eslint-config-pace-core.cjs",
     "./styles/core.css": "./src/styles/core.css",
     "./theming/runtime": {
       "types": "./dist/theming/runtime.d.ts",
@@ -64,6 +70,7 @@
     },
     "./docs": "./docs/README.md",
     "./package.json": "./package.json",
+    "./core-usage-manifest.json": "./core-usage-manifest.json",
     "./source": {
       "import": "./src/index.ts",
       "default": "./src/index.ts"
@@ -128,7 +135,10 @@
     "examples",
     "README.md",
     "CHANGELOG.md",
-    "docs"
+    "docs",
+    "core-usage-manifest.json",
+    "eslint-config-pace-core.cjs",
+    "scripts"
   ],
   "scripts": {
     "_comment_build": "Build package and documentation",
@@ -235,6 +245,8 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.49.10",
-    "@tanstack/react-query": "^5.56.2"
+    "@tanstack/react-query": "^5.56.2",
+    "date-fns": "^3.0.0",
+    "date-fns-tz": "^3.0.0"
   }
 }

package/scripts/analyze-bundle.js

@@ -0,0 +1,232 @@
+
+/**
+ * Enhanced Bundle Analysis Script
+ * Comprehensive analysis of the built package for size, composition, and optimization opportunities
+ */
+
+import { readFileSync, readdirSync, statSync } from 'fs';
+import { join, extname } from 'path';
+
+const distDir = 'dist';
+
+function getDirectorySize(dirPath) {
+  let totalSize = 0;
+  
+  try {
+    const items = readdirSync(dirPath);
+    
+    for (const item of items) {
+      const itemPath = join(dirPath, item);
+      const stats = statSync(itemPath);
+      
+      if (stats.isDirectory()) {
+        totalSize += getDirectorySize(itemPath);
+      } else {
+        totalSize += stats.size;
+      }
+    }
+  } catch (error) {
+    console.warn(`Warning: Could not read directory ${dirPath}`);
+  }
+  
+  return totalSize;
+}
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 Bytes';
+  
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+function analyzeModuleContent(filePath) {
+  try {
+    const content = readFileSync(filePath, 'utf-8');
+    
+    return {
+      hasESMExports: content.includes('export '),
+      hasCJSExports: content.includes('module.exports') || content.includes('exports.'),
+      hasClientDirective: content.includes('"use client"'),
+      hasSourceMap: content.includes('//# sourceMappingURL='),
+      linesOfCode: content.split('\n').length,
+      estimatedComplexity: (content.match(/function|class|const|let|var/g) || []).length,
+      importCount: (content.match(/import\s+.*from/g) || []).length,
+      exportCount: (content.match(/export\s+/g) || []).length
+    };
+  } catch (error) {
+    return null;
+  }
+}
+
+function validateFormatCompliance(filePath, expectedFormat) {
+  try {
+    const content = readFileSync(filePath, 'utf-8');
+    
+    if (expectedFormat === 'esm') {
+      return {
+        valid: content.includes('export') && !content.includes('module.exports'),
+        hasClientDirective: content.includes('"use client"'),
+        usesESMSyntax: content.includes('export') || content.includes('import')
+      };
+    } else if (expectedFormat === 'cjs') {
+      return {
+        valid: content.includes('exports') || content.includes('module.exports'),
+        hasClientDirective: content.includes('"use client"'),
+        usesCJSSyntax: content.includes('exports') || content.includes('require')
+      };
+    }
+    
+    return { valid: false };
+  } catch (error) {
+    return { valid: false, error: error.message };
+  }
+}
+
+function generateSizeComparison(modules) {
+  const sizeData = modules.map(module => {
+    try {
+      const esmSize = statSync(join(distDir, module.esm)).size;
+      const cjsSize = statSync(join(distDir, module.cjs)).size;
+      const dtsSize = statSync(join(distDir, module.dts)).size;
+      
+      return {
+        name: module.name,
+        esm: esmSize,
+        cjs: cjsSize,
+        dts: dtsSize,
+        total: esmSize + cjsSize + dtsSize,
+        ratio: (esmSize / cjsSize).toFixed(2)
+      };
+    } catch {
+      return null;
+    }
+  }).filter(Boolean);
+  
+  return sizeData.sort((a, b) => b.total - a.total);
+}
+
+function analyzeBundle() {
+  console.log('📊 Enhanced Bundle Analysis Report\n');
+  
+  try {
+    // Get total package size
+    const totalSize = getDirectorySize(distDir);
+    console.log(`📦 Total Package Size: ${formatBytes(totalSize)}\n`);
+    
+    // Analyze individual modules with both formats
+    const modules = [
+      { name: 'index', esm: 'index.js', cjs: 'index.cjs', dts: 'index.d.ts' },
+      { name: 'auth', esm: 'auth.js', cjs: 'auth.cjs', dts: 'auth.d.ts' },
+      { name: 'components', esm: 'components.js', cjs: 'components.cjs', dts: 'components.d.ts' },
+      { name: 'validation', esm: 'validation.js', cjs: 'validation.cjs', dts: 'validation.d.ts' },
+      { name: 'hooks', esm: 'hooks.js', cjs: 'hooks.cjs', dts: 'hooks.d.ts' },
+      { name: 'types', esm: 'types.js', cjs: 'types.cjs', dts: 'types.d.ts' }
+    ];
+    
+    console.log('📋 Module Breakdown:');
+    console.log('─'.repeat(80));
+    console.log('Module'.padEnd(12) + 'ESM'.padEnd(12) + 'CJS'.padEnd(12) + 'Types'.padEnd(12) + 'Total'.padEnd(12) + 'Ratio');
+    console.log('─'.repeat(80));
+    
+    const sizeComparison = generateSizeComparison(modules);
+    
+    for (const moduleData of sizeComparison) {
+      console.log(
+        moduleData.name.padEnd(12) +
+        formatBytes(moduleData.esm).padEnd(12) +
+        formatBytes(moduleData.cjs).padEnd(12) +
+        formatBytes(moduleData.dts).padEnd(12) +
+        formatBytes(moduleData.total).padEnd(12) +
+        moduleData.ratio
+      );
+    }
+    
+    // Format validation
+    console.log('\n🔍 Format Validation:');
+    
+    for (const module of modules) {
+      const esmValidation = validateFormatCompliance(join(distDir, module.esm), 'esm');
+      const cjsValidation = validateFormatCompliance(join(distDir, module.cjs), 'cjs');
+      
+      console.log(`  📄 ${module.name}:`);
+      console.log(`    ESM: ${esmValidation.valid ? '✅' : '❌'} Valid${esmValidation.hasClientDirective ? ' + Client Directive' : ''}`);
+      console.log(`    CJS: ${cjsValidation.valid ? '✅' : '❌'} Valid${cjsValidation.hasClientDirective ? ' + Client Directive' : ''}`);
+    }
+    
+    // Quality analysis
+    console.log('\n🔍 Quality Analysis:');
+    
+    const mainModule = join(distDir, 'index.js');
+    const mainAnalysis = analyzeModuleContent(mainModule);
+    
+    if (mainAnalysis) {
+      console.log(`  📄 Main module (index.js):`);
+      console.log(`    ✅ ESM exports: ${mainAnalysis.hasESMExports}`);
+      console.log(`    ✅ Client directive: ${mainAnalysis.hasClientDirective}`);
+      console.log(`    ✅ Source maps: ${mainAnalysis.hasSourceMap}`);
+      console.log(`    📊 Lines of code: ${mainAnalysis.linesOfCode}`);
+      console.log(`    🧮 Estimated complexity: ${mainAnalysis.estimatedComplexity}`);
+      console.log(`    📥 Import count: ${mainAnalysis.importCount}`);
+      console.log(`    📤 Export count: ${mainAnalysis.exportCount}`);
+    }
+    
+    // Performance recommendations
+    console.log('\n💡 Optimization Opportunities:');
+    
+    if (totalSize > 500000) { // 500KB
+      console.log('  ⚠️  Package size is large (>500KB). Consider:');
+      console.log('    - Reviewing large dependencies');
+      console.log('    - Splitting into smaller modules');
+      console.log('    - Enabling better tree-shaking');
+    } else if (totalSize > 300000) { // 300KB
+      console.log('  ℹ️  Package size is moderate (>300KB). Monitor growth.');
+    } else {
+      console.log('  ✅ Package size is optimal (<300KB)');
+    }
+    
+    // Tree-shaking analysis
+    const treeShakingScore = sizeComparison.reduce((score, module) => {
+      const ratio = parseFloat(module.ratio);
+      return score + (ratio > 0.8 && ratio < 1.2 ? 1 : 0);
+    }, 0);
+    
+    console.log(`  🌳 Tree-shaking efficiency: ${treeShakingScore}/${sizeComparison.length} modules optimized`);
+    
+    // Module size distribution
+    const largestModule = sizeComparison[0];
+    if (largestModule) {
+      console.log(`  📈 Largest module: ${largestModule.name} (${formatBytes(largestModule.total)})`);
+      if (largestModule.total > totalSize * 0.4) {
+        console.log('    💡 Consider splitting this module for better tree-shaking');
+      }
+    }
+    
+    console.log('\n📋 Build Quality Summary:');
+    console.log(`  ✅ Total modules: ${modules.length}`);
+    console.log(`  ✅ Dual format (ESM/CJS): Available`);
+    console.log(`  ✅ Type definitions: Complete`);
+    console.log(`  ✅ Client directives: Properly injected`);
+    console.log(`  ✅ Source maps: Generated`);
+    
+    // Cache recommendations
+    console.log('\n🚀 CI/CD Optimization:');
+    console.log('  💡 Build caching recommended for:');
+    console.log('    - node_modules (dependency cache)');
+    console.log('    - TypeScript compilation output');
+    console.log('    - tsup build cache (.tsup directory)');
+    
+  } catch (error) {
+    console.error('❌ Bundle analysis failed:', error.message);
+    process.exit(1);
+  }
+}
+
+// Only run if called directly (not imported)
+if (import.meta.url === `file://${process.argv[1]}`) {
+  analyzeBundle();
+}
+
+export { analyzeBundle };

package/scripts/build-css.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+/**
+ * Build script for PACE Core CSS files
+ * This script validates CSS files and ensures they're ready for consumption
+ * Note: CSS files are now exported directly from src/styles, no dist copying needed
+ */
+
+import { existsSync, mkdirSync, readdirSync, copyFileSync } from 'fs';
+import { join } from 'path';
+import { getPackageRoot, getRepoRoot } from './utils/path-helpers.js';
+import { logger } from './utils/logger.js';
+
+const packageRoot = getPackageRoot(import.meta.url);
+const repoRoot = getRepoRoot(import.meta.url);
+const srcDir = join(packageRoot, 'src/styles');
+
+// List of CSS files to validate
+const cssFiles = ['core.css'];
+
+logger.info('Validating PACE Core CSS files (exporting directly from src/styles)...');
+
+// Validate each CSS file exists
+cssFiles.forEach(file => {
+  const srcPath = join(srcDir, file);
+  
+  if (existsSync(srcPath)) {
+    logger.success(`Validated ${file} exists in src/styles/`);
+  } else {
+    logger.error(`CSS file not found: ${srcPath}`);
+    process.exit(1);
+  }
+});
+
+// Copy fonts to public folder for development (if it exists)
+const fontsSrcDir = join(packageRoot, 'src/fonts');
+const publicFontsDir = join(repoRoot, 'public/fonts');
+if (existsSync(join(repoRoot, 'public'))) {
+  if (!existsSync(publicFontsDir)) {
+    mkdirSync(publicFontsDir, { recursive: true });
+  }
+  
+  if (existsSync(fontsSrcDir)) {
+    const fontFiles = readdirSync(fontsSrcDir);
+    fontFiles.forEach(file => {
+      if (file.endsWith('.woff2')) {
+        const srcPath = join(fontsSrcDir, file);
+        const publicPath = join(publicFontsDir, file);
+        copyFileSync(srcPath, publicPath);
+        logger.success(`Copied font ${file} → public/fonts/${file}`);
+      }
+    });
+  }
+}
+
+logger.success('CSS validation completed! Core CSS file ready for consumption from src/styles/');