aztomiq 1.0.0

package/scripts/create-bug-tracker.js

@@ -0,0 +1,277 @@
+#!/usr/bin/env node
+
+/**
+ * UI Bug Tracker
+ * Analyzes screenshots and creates structured bug report
+ */
+
+const fs = require('fs').promises;
+const path = require('path');
+
+const SCREENSHOTS_DIR = './ui-test-results/screenshots';
+const OUTPUT_FILE = './plans/0-WAR-ROOM/UI-BUGS-TRACKER.md';
+
+async function createBugTracker() {
+  console.log('🐛 Creating UI Bug Tracker...\n');
+
+  const files = await fs.readdir(SCREENSHOTS_DIR);
+  const desktopScreenshots = files.filter(f => f.includes('_desktop.png'));
+
+  // Group by tool
+  const tools = {};
+  desktopScreenshots.forEach(file => {
+    const match = file.match(/_(vi|en)_(.+?)_desktop\.png/);
+    if (match) {
+      const [, lang, toolName] = match;
+      if (!tools[toolName]) {
+        tools[toolName] = { vi: false, en: false };
+      }
+      tools[toolName][lang] = true;
+    } else {
+      // Homepage
+      const homeLang = file.includes('_vi_') ? 'vi' : 'en';
+      if (!tools['homepage']) {
+        tools['homepage'] = { vi: false, en: false };
+      }
+      tools['homepage'][homeLang] = true;
+    }
+  });
+
+  const report = `# 🐛 UI Bugs Tracker
+
+**Created**: ${new Date().toLocaleString()}  
+**Total Tools**: ${Object.keys(tools).length}  
+**Status**: In Progress
+
+---
+
+## 📋 HOW TO USE THIS TRACKER
+
+### Step 1: Review Screenshots
+\`\`\`bash
+open ui-test-results/screenshots/
+\`\`\`
+
+### Step 2: For Each Tool, Check:
+- [ ] **Layout**: Form width, alignment, spacing
+- [ ] **Labels**: Visible, clear, properly sized
+- [ ] **Inputs**: Border, focus state, sizing
+- [ ] **Buttons**: Prominent, well-placed
+- [ ] **Results**: Clear display, good formatting
+- [ ] **Mobile**: Responsive behavior (check mobile screenshots)
+- [ ] **Borders**: All containers have visible borders
+- [ ] **Spacing**: Consistent gaps (1.5-2rem)
+
+### Step 3: Log Issues Below
+For each bug found, add to the appropriate section.
+
+---
+
+## 🔴 CRITICAL BUGS (Breaks Functionality)
+
+### Template
+\`\`\`markdown
+#### [Tool Name] - [Issue Title]
+**Severity**: Critical  
+**Pages**: VI, EN (or specify)  
+**Description**: What's broken  
+**Impact**: How it affects users  
+**Screenshot**: \`tool-name_desktop.png\`  
+**Fix Required**: What needs to be done  
+**ETA**: Estimated time to fix
+\`\`\`
+
+### Issues
+<!-- Add critical bugs here -->
+
+---
+
+## 🟡 HIGH PRIORITY (Major UX Issues)
+
+### Template
+\`\`\`markdown
+#### [Tool Name] - [Issue Title]
+**Severity**: High  
+**Pages**: VI, EN  
+**Description**: What's wrong  
+**Impact**: UX degradation  
+**Screenshot**: \`tool-name_desktop.png\`  
+**Fix Required**: What to change  
+**ETA**: Time estimate
+\`\`\`
+
+### Issues
+<!-- Add high priority bugs here -->
+
+---
+
+## 🟢 MEDIUM PRIORITY (Visual/Polish Issues)
+
+### Template
+\`\`\`markdown
+#### [Tool Name] - [Issue Title]
+**Severity**: Medium  
+**Pages**: VI, EN  
+**Description**: Visual issue  
+**Impact**: Cosmetic  
+**Screenshot**: \`tool-name_desktop.png\`  
+**Fix Required**: Polish needed  
+**ETA**: Time estimate
+\`\`\`
+
+### Issues
+<!-- Add medium priority bugs here -->
+
+---
+
+## 🔵 LOW PRIORITY (Minor Issues)
+
+### Issues
+<!-- Add low priority bugs here -->
+
+---
+
+## ✅ TOOLS REVIEWED
+
+Track which tools have been reviewed for bugs:
+
+${Object.keys(tools).sort().map(tool => {
+    const hasVi = tools[tool].vi;
+    const hasEn = tools[tool].en;
+    return `- [ ] **${tool}** ${hasVi ? '(VI ✓)' : ''} ${hasEn ? '(EN ✓)' : ''}`;
+  }).join('\n')}
+
+---
+
+## 📊 BUG STATISTICS
+
+| Priority | Count | % |
+|----------|-------|---|
+| Critical | 0 | 0% |
+| High | 0 | 0% |
+| Medium | 0 | 0% |
+| Low | 0 | 0% |
+| **Total** | **0** | **100%** |
+
+---
+
+## 🎯 COMMON PATTERNS
+
+### Form Issues
+- [ ] Input width too wide
+- [ ] Labels too small/muted
+- [ ] No max-width constraint
+- [ ] Poor spacing
+
+### Layout Issues
+- [ ] Content not centered
+- [ ] Missing borders
+- [ ] Inconsistent spacing
+- [ ] Alignment problems
+
+### Mobile Issues
+- [ ] Horizontal scroll
+- [ ] Text too small
+- [ ] Buttons too small
+- [ ] Poor touch targets
+
+---
+
+## 🔧 QUICK FIXES
+
+### Global CSS Issues
+If multiple tools have same issue, fix in \`global.css\`:
+\`\`\`css
+/* Example: All forms need max-width */
+.input-section {
+  max-width: 700px;
+  margin: 0 auto;
+}
+\`\`\`
+
+### Per-Tool CSS Issues
+If issue is specific to one tool, fix in \`src/features/[tool]/style.css\`
+
+---
+
+## 📝 REVIEW PROCESS
+
+1. **Open screenshots folder**
+2. **Review each tool** (desktop + mobile)
+3. **Compare with checklist**
+4. **Log issues** in appropriate section
+5. **Mark tool as reviewed**
+6. **Update statistics**
+
+---
+
+## 🚀 FIX WORKFLOW
+
+1. **Prioritize**: Start with Critical, then High
+2. **Group**: Fix similar issues together
+3. **Test**: Run UI test after each batch
+4. **Verify**: Check screenshots
+5. **Mark done**: Move to completed section
+
+---
+
+## ✅ COMPLETED FIXES
+
+### Template
+\`\`\`markdown
+#### [Tool Name] - [Issue Title]
+**Fixed**: YYYY-MM-DD  
+**Solution**: What was changed  
+**Verified**: Screenshot comparison
+\`\`\`
+
+### Fixes
+<!-- Add completed fixes here -->
+
+---
+
+## 📸 SCREENSHOT REFERENCE
+
+All screenshots available in:
+\`\`\`
+ui-test-results/screenshots/
+├── _vi__desktop.png (Homepage VI)
+├── _en__desktop.png (Homepage EN)
+├── _vi_[tool]_desktop.png
+├── _vi_[tool]_mobile.png
+└── ... (${desktopScreenshots.length * 2} total)
+\`\`\`
+
+---
+
+## 💡 TIPS
+
+1. **Use screenshot names** to identify tools
+2. **Check both VI and EN** versions
+3. **Compare desktop vs mobile**
+4. **Look for patterns** (same issue across tools)
+5. **Fix globally** when possible
+6. **Test incrementally** (don't fix everything at once)
+
+---
+
+**Last Updated**: ${new Date().toLocaleString()}  
+**Status**: Ready for review  
+**Next**: Start reviewing screenshots and logging bugs
+`;
+
+  await fs.writeFile(OUTPUT_FILE, report);
+  console.log(`✅ Bug tracker created: ${OUTPUT_FILE}\n`);
+  console.log('📊 SUMMARY');
+  console.log('─'.repeat(50));
+  console.log(`Total Tools: ${Object.keys(tools).length}`);
+  console.log(`Screenshots: ${desktopScreenshots.length * 2} (desktop + mobile)`);
+  console.log('─'.repeat(50));
+  console.log(`\n💡 Next Steps:`);
+  console.log(`1. Open screenshots: open ${SCREENSHOTS_DIR}`);
+  console.log(`2. Open tracker: open ${OUTPUT_FILE}`);
+  console.log(`3. Review and log bugs`);
+  console.log(`4. Fix by priority\n`);
+}
+
+createBugTracker().catch(console.error);

package/scripts/deploy.js

@@ -0,0 +1,135 @@
+const { execSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+const yaml = require('js-yaml');
+
+// Load Config
+const ROOT_DIR = path.join(__dirname, '..');
+const globalConfigPath = path.join(ROOT_DIR, 'src/data/global.yaml');
+// 1. Initial Defaults
+const defaults = {
+  branch: 'gh-pages',
+  remote: 'origin',
+  dist_folder: 'dist',
+  strategy: 'init'
+};
+
+// 2. Parse CLI Arguments (e.g. --branch=prod)
+const args = process.argv.slice(2).reduce((acc, arg) => {
+  if (arg.startsWith('--')) {
+    const [key, value] = arg.split('=');
+    acc[key.replace('--', '').replace('-', '_')] = value || true;
+  }
+  return acc;
+}, {});
+
+// 3. Load Global Config
+let yamlConfig = {};
+try {
+  if (fs.existsSync(globalConfigPath)) {
+    const parsed = yaml.load(fs.readFileSync(globalConfigPath, 'utf8'));
+    // Merge order: defaults < yaml.build.deploy < yaml.deployment
+    const buildDeploy = parsed.build?.deploy || {};
+    const topDeployment = parsed.deployment || {};
+
+    // Normalize keys (handle "folder" as "dist_folder")
+    const normalize = (obj) => {
+      if (obj.folder) {
+        obj.dist_folder = obj.folder;
+        delete obj.folder;
+      }
+      return obj;
+    };
+
+    yamlConfig = { ...normalize(buildDeploy), ...normalize(topDeployment) };
+  }
+} catch (e) {
+  console.warn('⚠️ Warning: Failed to parse global.yaml, using defaults.');
+}
+
+// 4. Final Config (Priority: CLI > YAML > Defaults)
+const config = { ...defaults, ...yamlConfig, ...args };
+const { branch, remote, dist_folder, strategy } = config;
+
+console.time('🚀 Deployment Duration');
+console.log('🚀 Starting Deployment...');
+console.log(`📡 Target: ${remote}/${branch}`);
+console.log(`📂 Folder: ${dist_folder}`);
+console.log(`🛠️  Strategy: ${strategy}`);
+
+try {
+  // 1. Build
+  console.log('📦 Building Production...');
+  execSync('npm run build', { stdio: 'inherit' });
+
+  // 2. Ensure dist exists
+  const deployDir = path.resolve(ROOT_DIR, dist_folder);
+  if (!fs.existsSync(deployDir)) {
+    throw new Error(`Build folder "${dist_folder}" not found.`);
+  }
+
+  // 4. Deployment
+  if (strategy === 'init') {
+    // Strategy: Init new repo in dist and force push (Good for external repo deploy)
+    console.log('☁️  Deploying via git init strategy...');
+
+    // Commands run inside dist folder
+    execSync('git init', { cwd: deployDir, stdio: 'inherit' });
+
+    // Set default branch for new repo to main/master to avoid issues
+    try { execSync('git checkout -b main', { cwd: deployDir, stdio: 'quiet' }); } catch (e) { }
+
+    // Ensure the current directory is safe
+    try { execSync('git config --global --add safe.directory ' + deployDir, { stdio: 'inherit' }); } catch (e) { }
+
+    execSync('git add .', { cwd: deployDir, stdio: 'inherit' });
+    try {
+      execSync('git commit -m "🚀 Deploy: ' + new Date().toISOString() + '"', { cwd: deployDir, stdio: 'inherit' });
+    } catch (e) {
+      console.log('⚠️ Nothing to commit, proceeding to push.');
+    }
+
+    // Determine the actual URL
+    let remoteUrl = remote;
+    const isUrl = remote.includes('://') || remote.startsWith('git@');
+
+    if (!isUrl) {
+      try {
+        remoteUrl = execSync(`git remote get-url ${remote}`).toString().trim();
+      } catch (e) {
+        console.error(`❌ Error: Could not resolve remote name "${remote}" to a URL.`);
+        process.exit(1);
+      }
+    }
+
+    // Add remote to the dist repo
+    try {
+      execSync(`git remote add deploy-remote "${remoteUrl}"`, { cwd: deployDir, stdio: 'inherit' });
+    } catch (e) {
+      execSync(`git remote set-url deploy-remote "${remoteUrl}"`, { cwd: deployDir, stdio: 'inherit' });
+    }
+
+    const pushCmd = `git push --force deploy-remote HEAD:${branch}`;
+    console.log(`> ${pushCmd}`);
+    execSync(pushCmd, { cwd: deployDir, stdio: 'inherit' });
+
+  } else {
+    // Strategy: Git Subtree (Good for same-repo gh-pages)
+    console.log('☁️  Pushing subtree...');
+
+    // Ensure dist is committed first (subtree needs it)
+    try { execSync(`git add ${dist_folder} -f`, { stdio: 'inherit' }); } catch (e) { }
+    try { execSync('git commit -m "🚀 Deploy: Update dist"', { stdio: 'inherit' }); } catch (e) { }
+
+    const cmd = `git subtree push --prefix ${dist_folder} ${remote} ${branch}`;
+    console.log(`> ${cmd}`);
+    execSync(cmd, { stdio: 'inherit' });
+  }
+
+  console.log('✅ Deployed Successfully!');
+  console.timeEnd('🚀 Deployment Duration');
+
+} catch (e) {
+  console.error('❌ Deployment Failed:', e.message);
+  process.exit(1);
+}

package/scripts/feedback-generator.js

@@ -0,0 +1,102 @@
+const fs = require('fs').promises;
+const path = require('path');
+
+const RESULTS_FILE = './ui-test-results/results.json';
+const OUTPUT_FILE = './feedback.md';
+
+async function generateFeedback() {
+  console.log('🤖 Generating Realistic Feedback...');
+
+  try {
+    const resultsData = await fs.readFile(RESULTS_FILE, 'utf-8');
+    const results = JSON.parse(resultsData);
+
+    let feedbackContent = `# Comprehensive Feature Feedback\n\n`;
+    feedbackContent += `**Date**: ${new Date().toLocaleString()}\n`;
+    feedbackContent += `**Total Pages Reviewed**: ${results.summary.total}\n\n`;
+    feedbackContent += `This document contains realistic feedback based on automated UI testing and simulated user experience review.\n\n`;
+    feedbackContent += `---\n\n`;
+
+    // Group by feature/tool name
+    // URLs are like http://localhost:3000/en/bmi-calculator/
+    // We want to group everything related to "bmi-calculator"
+
+    const features = {};
+
+    results.pages.forEach(page => {
+      // Extract feature name from URL. 
+      // e.g., http://localhost:3000/vi/tool-name/
+      const match = page.url.match(/localhost:3000\/(?:vi|en)\/([^\/]+)/);
+      let featureName = 'Homepage';
+      if (match && match[1]) {
+        featureName = match[1];
+      } else if (page.url.includes('/vi/') || page.url.includes('/en/')) {
+        if (page.url.endsWith('/vi/') || page.url.endsWith('/en/')) featureName = 'Homepage';
+      }
+
+      if (!features[featureName]) {
+        features[featureName] = {
+          pages: []
+        };
+      }
+      features[featureName].pages.push(page);
+    });
+
+    for (const [featureName, data] of Object.entries(features)) {
+      feedbackContent += `## 🛠 ${featureName.toUpperCase().replace(/-/g, ' ')}\n\n`;
+
+      let featureStatus = '✅ Excellent';
+      let feedbackPoints = [];
+
+      // Analyze pages for this feature
+      data.pages.forEach(page => {
+        const lang = page.url.includes('/vi/') ? 'Vietnamese' : 'English';
+
+        if (page.status === 'failed') {
+          featureStatus = '🔴 Critical Issues';
+          feedbackPoints.push(`- **${lang} Version**: fatal errors detected.`);
+        } else if (page.status === 'warning' && featureStatus !== '🔴 Critical Issues') {
+          featureStatus = '⚠️ Needs Polish';
+        }
+
+        // Specific Feedback Generation
+        if (page.issues.length > 0) {
+          page.issues.forEach(issue => {
+            if (issue.type === 'i18n') {
+              feedbackPoints.push(`- **${lang}**: Found ${issue.count} untranslated text keys (e.g., "${issue.details[0]?.key}"). It makes the app look unfinished.`);
+            }
+            if (issue.type === 'css') {
+              feedbackPoints.push(`- **${lang}**: The layout has issues. ${issue.details[0]?.message || 'Elements are overflowing or misaligned'}.`);
+            }
+            if (issue.type === 'console-errors') {
+              feedbackPoints.push(`- **${lang}**: There are JavaScript errors in the console. Functionality might be broken. Error: "${issue.details[0]?.substring(0, 100)}..."`);
+            }
+          });
+        }
+      });
+
+      if (feedbackPoints.length === 0) {
+        feedbackPoints.push(`- Both language versions look clean and load without visible errors.`);
+        feedbackPoints.push(`- Layout and responsiveness appear stable.`);
+      }
+
+      feedbackContent += `**Overall Status**: ${featureStatus}\n\n`;
+      feedbackContent += `### 📝 User Feedback\n`;
+      // Deduplicate feedback points
+      const uniquePoints = [...new Set(feedbackPoints)];
+      uniquePoints.forEach(point => {
+        feedbackContent += `${point}\n`;
+      });
+
+      feedbackContent += `\n---\n\n`;
+    }
+
+    await fs.writeFile(OUTPUT_FILE, feedbackContent);
+    console.log(`✅ Feedback generated at: ${OUTPUT_FILE}`);
+
+  } catch (err) {
+    console.error('❌ Error generating feedback:', err);
+  }
+}
+
+generateFeedback();