npm - fraim-framework - Versions diffs - 2.0.63 → 2.0.65 - Mend

fraim-framework 2.0.63 → 2.0.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/registry/scripts/create-website-structure.js DELETED Viewed

@@ -1,562 +0,0 @@
-#!/usr/bin/env node
-/**
- * Website Structure Creator
- *
- * This script creates the basic file structure for a modern website project
- * following the FRAIM website creation workflow.
- */
-const fs = require('fs');
-const path = require('path');
-// Read configuration from .fraim/config.json if available
-function loadConfig() {
-    const configPath = path.join(process.cwd(), '.fraim', 'config.json');
-    if (fs.existsSync(configPath)) {
-        try {
-            return JSON.parse(fs.readFileSync(configPath, 'utf8'));
-        } catch (error) {
-            console.warn('Warning: Could not parse .fraim/config.json, using defaults');
-            return {};
-        }
-    }
-    return {};
-}
-function createWebsiteStructure(projectName, outputDir = process.cwd()) {
-    const websiteDir = path.join(outputDir, projectName);
-    // Create main directory
-    if (!fs.existsSync(websiteDir)) {
-        fs.mkdirSync(websiteDir, { recursive: true });
-    }
-    // Create subdirectories
-    const dirs = [
-        'assets',
-        'assets/images',
-        'assets/icons',
-        'css',
-        'js',
-        'docs'
-    ];
-    dirs.forEach(dir => {
-        const dirPath = path.join(websiteDir, dir);
-        if (!fs.existsSync(dirPath)) {
-            fs.mkdirSync(dirPath, { recursive: true });
-        }
-    });
-    // Create basic HTML structure
-    const indexHtml = `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>${projectName} - Modern Web Experience</title>
-    <meta name="description" content="Modern, responsive website for ${projectName}">
-    <link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
-    <!-- Navigation -->
-    <nav class="nav">
-        <div class="nav-container">
-            <div class="nav-logo">
-                <span class="logo-text">${projectName}</span>
-            </div>
-            <div class="nav-links">
-                <a href="#features">Features</a>
-                <a href="#about">About</a>
-                <a href="#contact">Contact</a>
-                <button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
-                    <span class="theme-icon">🌙</span>
-                </button>
-            </div>
-        </div>
-    </nav>
-    <!-- Hero Section -->
-    <section class="hero">
-        <div class="hero-container">
-            <h1 class="hero-title">
-                Welcome to <span class="gradient-text">${projectName}</span>
-            </h1>
-            <p class="hero-subtitle">
-                Your modern web experience starts here. Built with performance, accessibility, and user experience in mind.
-            </p>
-            <div class="hero-cta">
-                <a href="#get-started" class="btn-primary">Get Started</a>
-                <a href="#learn-more" class="btn-secondary">Learn More</a>
-            </div>
-        </div>
-    </section>
-    <!-- Features Section -->
-    <section id="features" class="features">
-        <div class="container">
-            <h2 class="section-title">Key Features</h2>
-            <div class="features-grid">
-                <div class="feature-card">
-                    <div class="feature-icon">⚡</div>
-                    <h3>Fast Performance</h3>
-                    <p>Optimized for speed and efficiency</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">📱</div>
-                    <h3>Mobile Responsive</h3>
-                    <p>Perfect experience on all devices</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">🎨</div>
-                    <h3>Modern Design</h3>
-                    <p>Beautiful, contemporary interface</p>
-                </div>
-            </div>
-        </div>
-    </section>
-    <script src="js/script.js"></script>
-</body>
-</html>`;
-    // Create basic CSS with CSS variables for theming
-    const stylesCSS = `/* CSS Variables for theming */
-:root {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f8fafc;
-    --text-primary: #1a1a1a;
-    --text-secondary: #666666;
-    --accent-color: #6366f1;
-    --border-color: #e5e5e5;
-}
-[data-theme="dark"] {
-    --bg-primary: #0f172a;
-    --bg-secondary: #1e293b;
-    --text-primary: #f8fafc;
-    --text-secondary: #cbd5e1;
-    --border-color: #334155;
-}
-/* Reset and base styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.6;
-    color: var(--text-primary);
-    background: var(--bg-primary);
-    transition: background-color 0.3s ease, color 0.3s ease;
-}
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 24px;
-}
-/* Navigation */
-.nav {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid var(--border-color);
-    z-index: 1000;
-}
-.nav-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 24px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 64px;
-}
-.nav-links {
-    display: flex;
-    align-items: center;
-    gap: 32px;
-}
-.nav-links a {
-    text-decoration: none;
-    color: var(--text-secondary);
-    font-weight: 500;
-    transition: color 0.2s;
-}
-.nav-links a:hover {
-    color: var(--text-primary);
-}
-.theme-toggle {
-    background: none;
-    border: 2px solid var(--border-color);
-    border-radius: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-.theme-toggle:hover {
-    border-color: var(--accent-color);
-}
-/* Hero Section */
-.hero {
-    padding: 120px 0 80px;
-    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
-    text-align: center;
-}
-.hero-title {
-    font-size: 56px;
-    font-weight: 700;
-    margin-bottom: 24px;
-}
-.gradient-text {
-    background: linear-gradient(135deg, var(--accent-color) 0%, #8b5cf6 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-.hero-subtitle {
-    font-size: 20px;
-    color: var(--text-secondary);
-    margin-bottom: 32px;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
-}
-.hero-cta {
-    display: flex;
-    gap: 16px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-.btn-primary, .btn-secondary {
-    padding: 12px 24px;
-    border-radius: 8px;
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.2s;
-    display: inline-block;
-}
-.btn-primary {
-    background: var(--accent-color);
-    color: white;
-}
-.btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
-}
-.btn-secondary {
-    background: transparent;
-    color: var(--accent-color);
-    border: 2px solid var(--accent-color);
-}
-.btn-secondary:hover {
-    background: var(--accent-color);
-    color: white;
-}
-/* Features Section */
-.features {
-    padding: 80px 0;
-}
-.section-title {
-    font-size: 40px;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 64px;
-}
-.features-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 32px;
-}
-.feature-card {
-    background: var(--bg-secondary);
-    padding: 32px;
-    border-radius: 16px;
-    text-align: center;
-    transition: transform 0.2s;
-}
-.feature-card:hover {
-    transform: translateY(-4px);
-}
-.feature-icon {
-    font-size: 48px;
-    margin-bottom: 16px;
-}
-.feature-card h3 {
-    font-size: 24px;
-    margin-bottom: 12px;
-}
-.feature-card p {
-    color: var(--text-secondary);
-}
-/* Responsive Design */
-@media (max-width: 768px) {
-    .hero-title {
-        font-size: 40px;
-    }
-    .nav-links {
-        gap: 16px;
-    }
-    .hero-cta {
-        flex-direction: column;
-        align-items: center;
-    }
-    .features-grid {
-        grid-template-columns: 1fr;
-    }
-}`;
-    // Create basic JavaScript for theme toggle
-    const scriptJS = `// Theme toggle functionality
-document.addEventListener('DOMContentLoaded', function() {
-    const themeToggle = document.getElementById('theme-toggle');
-    const themeIcon = themeToggle.querySelector('.theme-icon');
-    // Check for saved theme preference or default to system preference
-    const savedTheme = localStorage.getItem('theme');
-    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
-    // Apply initial theme
-    document.documentElement.setAttribute('data-theme', initialTheme);
-    updateThemeIcon(initialTheme);
-    // Theme toggle event listener
-    themeToggle.addEventListener('click', () => {
-        const currentTheme = document.documentElement.getAttribute('data-theme');
-        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-        document.documentElement.setAttribute('data-theme', newTheme);
-        localStorage.setItem('theme', newTheme);
-        updateThemeIcon(newTheme);
-    });
-    function updateThemeIcon(theme) {
-        themeIcon.textContent = theme === 'dark' ? '☀️' : '🌙';
-    }
-    // Listen for system theme changes
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-        if (!localStorage.getItem('theme')) {
-            const newTheme = e.matches ? 'dark' : 'light';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            updateThemeIcon(newTheme);
-        }
-    });
-    // Smooth scrolling for navigation links
-    const navLinks = document.querySelectorAll('a[href^="#"]');
-    navLinks.forEach(link => {
-        link.addEventListener('click', function(e) {
-            e.preventDefault();
-            const targetId = this.getAttribute('href');
-            const targetSection = document.querySelector(targetId);
-            if (targetSection) {
-                const offsetTop = targetSection.offsetTop - 80; // Account for fixed nav
-                window.scrollTo({
-                    top: offsetTop,
-                    behavior: 'smooth'
-                });
-            }
-        });
-    });
-});`;
-    // Create README
-    const readmeMD = `# ${projectName} Website
-Modern, responsive website built following FRAIM website creation workflow.
-## Features
-- 🌓 Dark/Light mode toggle with system preference detection
-- 📱 Fully responsive design
-- ⚡ Performance optimized
-- ♿ Accessibility focused
-- 🎨 Modern design with CSS variables
-- 🚀 Ready for deployment
-## Development
-### Local Development
-1. Open \`index.html\` in your browser
-2. Or use a local server:
-   \`\`\`bash
-   # Python
-   python -m http.server 8000
-   # Node.js
-   npx serve .
-   # VS Code Live Server extension
-   \`\`\`
-### File Structure
-\`\`\`
-${projectName}/
-├── index.html          # Main page
-├── css/
-│   └── styles.css      # Main stylesheet
-├── js/
-│   └── script.js       # JavaScript functionality
-├── assets/
-│   ├── images/         # Image assets
-│   └── icons/          # Icon assets
-└── docs/
-    └── README.md       # This file
-\`\`\`
-## Customization
-### Colors
-Edit CSS variables in \`css/styles.css\`:
-\`\`\`css
-:root {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f8fafc;
-    --text-primary: #1a1a1a;
-    --text-secondary: #666666;
-    --accent-color: #6366f1;
-    --border-color: #e5e5e5;
-}
-\`\`\`
-### Content
-- Update text content in \`index.html\`
-- Add images to \`assets/images/\`
-- Modify styles in \`css/styles.css\`
-- Add functionality in \`js/script.js\`
-## Deployment
-### GitHub Pages
-1. Push to GitHub repository
-2. Enable GitHub Pages in repository settings
-3. Select "GitHub Actions" as source
-### Netlify
-1. Connect GitHub repository
-2. Set build command: (none for static site)
-3. Set publish directory: \`.\`
-### Vercel
-1. Import GitHub repository
-2. Deploy with default settings
-## Performance
-- Optimized CSS with minimal dependencies
-- Vanilla JavaScript (no heavy frameworks)
-- Responsive images
-- Efficient animations
-## Browser Support
-- Chrome (latest 2 versions)
-- Firefox (latest 2 versions)
-- Safari (latest 2 versions)
-- Edge (latest 2 versions)
-- Mobile browsers
-## License
-[Add your license here]
-`;
-    // Write files
-    fs.writeFileSync(path.join(websiteDir, 'index.html'), indexHtml);
-    fs.writeFileSync(path.join(websiteDir, 'css', 'styles.css'), stylesCSS);
-    fs.writeFileSync(path.join(websiteDir, 'js', 'script.js'), scriptJS);
-    fs.writeFileSync(path.join(websiteDir, 'README.md'), readmeMD);
-    // Create .gitignore
-    const gitignore = `# Dependencies
-node_modules/
-npm-debug.log*
-# Build outputs
-dist/
-build/
-# Environment variables
-.env
-.env.local
-# IDE files
-.vscode/
-.idea/
-*.swp
-*.swo
-# OS files
-.DS_Store
-Thumbs.db
-# Logs
-*.log
-`;
-    fs.writeFileSync(path.join(websiteDir, '.gitignore'), gitignore);
-    console.log(`✅ Website structure created successfully!`);
-    console.log(`📁 Project directory: ${websiteDir}`);
-    console.log(`🚀 Next steps:`);
-    console.log(`   1. cd ${projectName}`);
-    console.log(`   2. Open index.html in your browser`);
-    console.log(`   3. Start customizing your website!`);
-    console.log(`   4. Follow the FRAIM website creation workflow for best practices`);
-}
-// CLI usage
-if (require.main === module) {
-    const config = loadConfig();
-    const args = process.argv.slice(2);
-    const projectName = args[0];
-    const outputDir = args[1] || process.cwd();
-    if (!projectName) {
-        console.log('Usage: node create-website-structure.js <project-name> [output-directory]');
-        console.log('Example: node create-website-structure.js my-awesome-website');
-        process.exit(1);
-    }
-    createWebsiteStructure(projectName, outputDir);
-}
-module.exports = { createWebsiteStructure };

package/registry/scripts/detect-tautological-tests.sh DELETED Viewed

@@ -1,38 +0,0 @@
-#!/bin/bash
-# Detect Tautological Tests
-# This script scans test files for patterns that suggest tests are validating code structure
-# (interfaces, enums) rather than runtime behavior.
-echo "🔍 Scanning for Tautological Test Patterns..."
-ERROR_FOUND=0
-# Pattern 1: Asserting an array literal equals another array literal (common in enum testing)
-# Looks for: assert.deepEqual(['a', 'b'], ['a', 'b'])
-if grep -rE "assert\.(deep)?(Strict)?Equal\(\[.*\], \[.*\]\)" test*.ts; then
-    echo "❌ ERROR: Found potential tautological array comparison. Tests should verify app logic, not hardcoded arrays."
-    echo "   Rationale: Testing that ['A'] equals ['A'] validates nothing about the application."
-    ERROR_FOUND=1
-fi
-# Pattern 2: Asserting properties on an object literal defined in the test (Type/Interface testing)
-# Simplified: Look for defining a typed object and immediately asserting on it in the same file
-# This is hard to do robustly with just grep, so we'll rely on the Naming Convention check for now.
-# Pattern 3: Test names that explicitly say "Validate Enums", "Validate Fields", etc.
-# We match "Validate TaskStatus Enums" or similar phrases
-if grep -riE "['\"]Unit: Validate (Enum|Constant|Interface|Type|Field|Object|TaskStatus|Task Object)" test*.ts; then
-    echo "❌ ERROR: Found test descriptions explicitly claiming to validate Enums/Types/Fields."
-    echo "   Rationale: Unit tests should validate BEHAVIOR (e.g., 'persists correct status'), not definitions."
-    ERROR_FOUND=1
-fi
-if [ $ERROR_FOUND -eq 1 ]; then
-    echo ""
-    echo "⚠️  Potential Anti-Patterns Detected."
-    echo "   Please review the identified tests against rules/integrity-and-test-ethics.md"
-    exit 1
-else
-    echo "✅ No obvious tautological patterns found."
-    exit 0
-fi

package/registry/scripts/evaluate-code-quality.ts DELETED Viewed

@@ -1,36 +0,0 @@
-#!/usr/bin/env node
-/**
- * Code Quality Evaluator (Diagnostic Tool)
- *
- * Runs code quality checks and outputs results to the console.
- * Used by the evaluate-code-quality bootstrapping workflow.
- *
- * Usage: npx tsx <this-script>
- */
-import * as path from 'path';
-import { spawn } from 'child_process';
-const REGISTRY_SCRIPTS_DIR = __dirname;
-const QUALITY_CHECK_SCRIPT = path.join(REGISTRY_SCRIPTS_DIR, 'code-quality-check.sh');
-function evaluateQuality() {
-    console.log('🚀 Starting Code Quality Evaluation...');
-    console.log('📊 Running code-quality-check.sh...\n');
-    // Run the existing quality check script and pipe output directly to terminal
-    const child = spawn('bash', [QUALITY_CHECK_SCRIPT, 'pre-pr'], {
-        stdio: 'inherit',
-        shell: false
-    });
-    child.on('exit', (code) => {
-        if (code === 0) {
-            console.log('\n✅ Code quality check completed successfully.');
-        } else {
-            console.log(`\n❌ Code quality check failed with exit code ${code}.`);
-        }
-    });
-}
-evaluateQuality();