frontend-guardian 0.1.2 → 0.1.4

package/dist/cli.js

@@ -40,8 +40,13 @@ function readDirRecursive(dir, base = "") {
 }
 function issueType(w) {
     const msg = w.message;
-    if (msg.startsWith("Mixed spacing values:"))
-        return { title: "Mixed Spacing", detected: msg.replace(/^Mixed spacing values:\s*/, "") };
+    if (msg.startsWith("Mixed spacing values")) {
+        const isCard = msg.includes("(cards/boxes)");
+        return {
+            title: isCard ? "Mixed Spacing (cards/boxes)" : "Mixed Spacing",
+            detected: msg.replace(/^Mixed spacing values[^:]*:\s*/, ""),
+        };
+    }
     if (msg.startsWith("Inconsistent border-radius:"))
         return { title: "Inconsistent Border Radius", detected: msg.replace(/^Inconsistent border-radius:\s*/, "") };
     if (msg.startsWith("Arbitrary color"))
@@ -66,7 +71,8 @@ function scoreColor(score) {
     return chalk.red;
 }
 const SHORT_SUGGESTION = {
-    "Mixed Spacing": "standardize spacing scale",
+    "Mixed Spacing": "standardize spacing scale for layout/containers",
+    "Mixed Spacing (cards/boxes)": "use one padding for all cards/boxes",
     "Inconsistent Border Radius": "use one border radius token",
     "Arbitrary Colors": "use Tailwind theme colors",
     "Unused Imports": "remove unused imports",
@@ -81,22 +87,30 @@ function shortSuggestion(title, full) {
 }
 const WRAP_WIDTH = 72;
 const INDENT = "     ";
-function wrapLine(prefix, text) {
+const FILES_INDENT = INDENT + "  ";
+function wrapLine(prefix, text, continuationPrefix, firstLinePrefix) {
+    const cont = continuationPrefix ?? INDENT;
+    const firstPrefix = firstLinePrefix ?? prefix;
     const maxLen = WRAP_WIDTH - prefix.length;
     if (text.length <= maxLen) {
-        console.log(prefix + text);
+        console.log(firstPrefix + text);
         return;
     }
     let rest = text;
     let first = true;
     while (rest.length > 0) {
-        const use = first ? prefix : INDENT;
-        const allowed = WRAP_WIDTH - use.length;
+        const use = first ? firstPrefix : cont;
+        const lenForBreak = first ? prefix.length : cont.length;
+        const allowed = WRAP_WIDTH - lenForBreak;
         if (rest.length <= allowed) {
             console.log(use + rest);
             break;
         }
-        let breakAt = rest.slice(0, allowed).lastIndexOf(", ") + 1 || rest.slice(0, allowed).lastIndexOf("; ") + 1;
+        const slice = rest.slice(0, allowed);
+        const lineBreak = slice.lastIndexOf(", line ");
+        let breakAt = lineBreak >= 0 ? lineBreak + ", line ".length : 0;
+        if (breakAt <= 0)
+            breakAt = slice.lastIndexOf(", ") + 1 || slice.lastIndexOf("; ") + 1;
         if (breakAt <= 0)
             breakAt = allowed;
         const chunk = rest.slice(0, breakAt).trim();
@@ -157,23 +171,38 @@ function printResult(projectName, result) {
         suggestion: shortSuggestion(title, suggestion),
         fileLines: [...fileLines].sort(),
     }));
-    const NO_FILES_TITLES = new Set([
-        "Mixed Spacing", "Inconsistent Border Radius", "Mixed Button Padding", "Inconsistent Button Border Radius",
+    const STYLE_TITLES = new Set([
+        "Mixed Spacing", "Mixed Spacing (cards/boxes)", "Inconsistent Border Radius", "Mixed Button Padding", "Inconsistent Button Border Radius",
     ]);
+    function groupFileLines(fileLines) {
+        const byFile = new Map();
+        for (const s of fileLines) {
+            const i = s.lastIndexOf(":");
+            const file = i >= 0 ? s.slice(0, i) : s;
+            const line = i >= 0 ? s.slice(i + 1) : "";
+            const num = line ? parseInt(line, 10) : 0;
+            if (!byFile.has(file))
+                byFile.set(file, []);
+            if (num && !byFile.get(file).includes(num))
+                byFile.get(file).push(num);
+        }
+        return [...byFile.entries()].sort((a, b) => a[0].localeCompare(b[0])).map(([file, lines]) => lines.length > 0 ? `${file}: ${chalk.italic("line " + [...lines].sort((a, b) => a - b).join(", line "))}` : file);
+    }
     if (allIssues.length > 0) {
         console.log(chalk.yellow("  ⚠ ") + chalk.bold("Issues Found") + "\n");
         allIssues.forEach((issue, i) => {
-            console.log("  " + (i + 1) + ". " + issue.title);
+            console.log("  " + (i + 1) + ". " + chalk.bold(issue.title));
             if (issue.title === "Unused Imports" || issue.title === "Unused Variables") {
                 wrapLine(INDENT, issue.detected);
             }
             else {
-                wrapLine(INDENT + "Detected: ", issue.detected);
-                console.log(INDENT + "Suggestion: " + issue.suggestion);
+                wrapLine(INDENT + "Detected: ", issue.detected, INDENT, INDENT + chalk.bold("Detected: "));
+                console.log(INDENT + chalk.bold("Suggestion: ") + issue.suggestion);
             }
-            if (issue.fileLines.length > 0 && !NO_FILES_TITLES.has(issue.title)) {
-                console.log(INDENT + "Files:");
-                issue.fileLines.forEach((f) => console.log(INDENT + "  " + f));
+            if (issue.fileLines.length > 0) {
+                console.log(INDENT + chalk.bold("Files:"));
+                const raw = STYLE_TITLES.has(issue.title) ? groupFileLines(issue.fileLines) : issue.fileLines.map((f) => (f.includes(":") ? f.replace(/:(\s*\d+)$/, ": " + chalk.italic("line $1")) : f));
+                raw.forEach((f) => wrapLine(FILES_INDENT, f, FILES_INDENT));
             }
             if (i < allIssues.length - 1)
                 console.log("");

package/package.json

@@ -1,18 +1,19 @@
 {
   "name": "frontend-guardian",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Scan frontend projects for Tailwind & component consistency (Phase 1 CLI)",
   "type": "module",
   "bin": {
     "frontend-guardian": "./dist/cli.js"
   },
-  "scripts": {
-    "build": "tsc"
-  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "dependencies": {
-    "@justinmoto/frontend-guardian-core": "workspace:*",
     "chalk": "^5.3.0",
-    "ora": "^8.0.1"
+    "ora": "^8.0.1",
+    "@justinmoto/frontend-guardian-core": "0.1.5"
   },
   "devDependencies": {
     "typescript": "^5"
@@ -20,6 +21,15 @@
   "engines": {
     "node": ">=18"
   },
-  "keywords": ["tailwind", "consistency", "frontend", "scan", "cli"],
-  "license": "MIT"
-}
+  "keywords": [
+    "tailwind",
+    "consistency",
+    "frontend",
+    "scan",
+    "cli"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "tsc"
+  }
+}

package/PUBLISH.md

@@ -1,81 +0,0 @@
-# Publish frontend-guardian to npm
-
-So anyone can run `npx frontend-guardian .` without your repo.
-
-## 1. npm account
-
-- Sign up at https://www.npmjs.com/signup
-- Login in terminal: `npm login` (username, password, email, OTP if 2FA)
-
-## 2. Check package name
-
-- If **frontend-guardian** is taken on npm, use a scoped name in `package.json`:  
-  `"name": "@YOUR_NPM_USERNAME/frontend-guardian"`  
-  Then users run: `npx @YOUR_NPM_USERNAME/frontend-guardian .`
-
-## 3. Publish core first (CLI depends on it)
-
-```bash
-cd C:/Users/ADMIN/Desktop/frontend-guardian
-pnpm run build:packages
-cd packages/core
-```
-
-In `packages/core/package.json` temporarily remove the line `"private": true` (or set to `false`).
-
-```bash
-npm publish --access public
-```
-
-(Scoped packages like `@frontend-guardian/core` need `--access public`.)
-
-Put `"private": true` back in core's package.json if you want to keep the repo from publishing it again by mistake.
-
-## 4. Point CLI to published core
-
-In `packages/cli/package.json`, change:
-
-```json
-"dependencies": {
-  "@frontend-guardian/core": "workspace:*"
-}
-```
-
-to:
-
-```json
-"dependencies": {
-  "@frontend-guardian/core": "^0.1.0"
-}
-```
-
-(Use the same version you published for core, e.g. `^0.1.0`.)
-
-## 5. Publish CLI
-
-```bash
-cd C:/Users/ADMIN/Desktop/frontend-guardian/packages/cli
-npm publish
-```
-
-If the name is scoped (`@YOUR_NPM_USERNAME/frontend-guardian`):
-
-```bash
-npm publish --access public
-```
-
-## 6. After publish
-
-Anyone can run:
-
-```bash
-npx frontend-guardian .
-```
-
-(or `npx @YOUR_NPM_USERNAME/frontend-guardian .` if you used a scoped name.)
-
-## Updating later
-
-1. Bump `version` in `packages/core/package.json` and `packages/cli/package.json`.
-2. In core: `npm publish --access public`
-3. In cli: set `"@frontend-guardian/core": "^0.1.1"` (or new version), then `npm publish` (or `--access public` if scoped).

package/src/cli.ts

@@ -1,245 +0,0 @@
-#!/usr/bin/env node
-import * as fs from "fs";
-import * as path from "path";
-import { fileURLToPath } from "url";
-import chalk from "chalk";
-import ora from "ora";
-import { scanFiles, scanZip, type ScanResult, type Warning } from "@justinmoto/frontend-guardian-core";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const EXT = [".js", ".jsx", ".ts", ".tsx"];
-const IGNORE = ["node_modules", ".next", "dist", "build", ".git"];
-
-function isCodeFile(name: string): boolean {
-  return EXT.some((e) => name.toLowerCase().endsWith(e));
-}
-
-function isSourcePath(relativePath: string): boolean {
-  const normalized = relativePath.replace(/\\/g, "/");
-  return !IGNORE.some((part) => normalized.includes(part));
-}
-
-function readDirRecursive(dir: string, base = ""): { path: string; code: string }[] {
-  const out: { path: string; code: string }[] = [];
-  const entries = fs.readdirSync(dir, { withFileTypes: true });
-  for (const e of entries) {
-    const rel = base ? `${base}/${e.name}` : e.name;
-    const full = path.join(dir, e.name);
-    if (e.isDirectory()) {
-      if (IGNORE.includes(e.name)) continue;
-      out.push(...readDirRecursive(full, rel));
-    } else if (e.isFile() && isCodeFile(e.name) && isSourcePath(rel)) {
-      try {
-        const code = fs.readFileSync(full, "utf-8");
-        out.push({ path: rel, code });
-      } catch {
-        // skip
-      }
-    }
-  }
-  return out;
-}
-
-function issueType(w: Warning): { title: string; detected: string } {
-  const msg = w.message;
-  if (msg.startsWith("Mixed spacing values:"))
-    return { title: "Mixed Spacing", detected: msg.replace(/^Mixed spacing values:\s*/, "") };
-  if (msg.startsWith("Inconsistent border-radius:"))
-    return { title: "Inconsistent Border Radius", detected: msg.replace(/^Inconsistent border-radius:\s*/, "") };
-  if (msg.startsWith("Arbitrary color"))
-    return { title: "Arbitrary Colors", detected: msg };
-  if (msg.startsWith("Unused import:"))
-    return { title: "Unused Imports", detected: msg.replace(/^Unused import:\s*/, "") };
-  if (msg.startsWith("Unused variable:"))
-    return { title: "Unused Variables", detected: msg.replace(/^Unused variable:\s*/, "") };
-  if (msg.startsWith("Parse error"))
-    return { title: "Parse Error", detected: msg };
-  if (msg.startsWith("Mixed button padding:"))
-    return { title: "Mixed Button Padding", detected: msg.replace(/^Mixed button padding:\s*/, "") };
-  if (msg.startsWith("Inconsistent button border-radius:"))
-    return { title: "Inconsistent Button Border Radius", detected: msg.replace(/^Inconsistent button border-radius:\s*/, "") };
-  return { title: "Other", detected: msg };
-}
-
-function scoreColor(score: number): (s: string) => string {
-  if (score >= 70) return chalk.green;
-  if (score >= 40) return chalk.yellow;
-  return chalk.red;
-}
-
-const SHORT_SUGGESTION: Record<string, string> = {
-  "Mixed Spacing": "standardize spacing scale",
-  "Inconsistent Border Radius": "use one border radius token",
-  "Arbitrary Colors": "use Tailwind theme colors",
-  "Unused Imports": "remove unused imports",
-  "Unused Variables": "remove or use variable; prefix with _ if intentional",
-  "Parse Error": "fix syntax or remove file",
-  "Mixed Button Padding": "use one button padding",
-  "Inconsistent Button Border Radius": "use one radius for all buttons",
-  "Duplicate Components": "extract shared component and reuse",
-};
-
-function shortSuggestion(title: string, full: string): string {
-  return SHORT_SUGGESTION[title] ?? (full.slice(0, 55) + (full.length > 55 ? "…" : ""));
-}
-
-const WRAP_WIDTH = 72;
-const INDENT = "     ";
-
-function wrapLine(prefix: string, text: string): void {
-  const maxLen = WRAP_WIDTH - prefix.length;
-  if (text.length <= maxLen) {
-    console.log(prefix + text);
-    return;
-  }
-  let rest = text;
-  let first = true;
-  while (rest.length > 0) {
-    const use = first ? prefix : INDENT;
-    const allowed = WRAP_WIDTH - use.length;
-    if (rest.length <= allowed) {
-      console.log(use + rest);
-      break;
-    }
-    let breakAt = rest.slice(0, allowed).lastIndexOf(", ") + 1 || rest.slice(0, allowed).lastIndexOf("; ") + 1;
-    if (breakAt <= 0) breakAt = allowed;
-    const chunk = rest.slice(0, breakAt).trim();
-    rest = rest.slice(breakAt).trim();
-    if (chunk) console.log(use + chunk);
-    first = false;
-  }
-}
-
-function printResult(projectName: string, result: ScanResult) {
-  const line = chalk.gray("━".repeat(28));
-  console.log("\n" + line);
-  console.log(chalk.bold("  🛡 Frontend Guardian"));
-  console.log(line + "\n");
-
-  let filesScanned = "filesScanned" in result ? (result as ScanResult & { filesScanned?: number }).filesScanned : 0;
-  if (filesScanned === 0 && (result.warnings.length > 0 || result.duplicates.length > 0)) {
-    const files = new Set<string>();
-    result.warnings.forEach((w) => files.add(w.file));
-    result.duplicates.forEach((d) => d.files.forEach((f) => files.add(f)));
-    filesScanned = files.size;
-  }
-  console.log("  Project: " + projectName);
-  console.log("  Files scanned: " + String(filesScanned));
-  const scoreColorFn = scoreColor(result.score);
-  console.log("  Consistency Score: " + scoreColorFn(result.score + " / 100"));
-  console.log(chalk.gray("  (each warning −5, each duplicate group −10, from 100)") + "\n");
-
-  type WarnWithLoc = Warning & { line?: number; locations?: { file: string; line: number }[] };
-  function locationStrings(w: WarnWithLoc): string[] {
-    if (w.locations?.length) return w.locations.map((loc) => (loc.line != null && loc.line > 0 ? `${loc.file}:${loc.line}` : loc.file)).filter((s) => s.length > 0);
-    if (w.file && w.file !== "(project)") return [w.line != null && w.line > 0 ? `${w.file}:${w.line}` : w.file];
-    return [];
-  }
-
-  const byTitle = new Map<string, { detected: string[]; suggestion: string; fileLines: Set<string> }>();
-  for (const w of result.warnings) {
-    const wl = w as WarnWithLoc;
-    const { title, detected } = issueType(w);
-    const sug = w.suggestion ?? "";
-    if (!byTitle.has(title)) byTitle.set(title, { detected: [], suggestion: sug, fileLines: new Set() });
-    const entry = byTitle.get(title)!;
-    if (!entry.detected.includes(detected)) entry.detected.push(detected);
-    locationStrings(wl).forEach((s) => entry.fileLines.add(s));
-  }
-  for (const d of result.duplicates) {
-    const title = "Duplicate Components";
-    const detected = d.files.join(", ");
-    if (!byTitle.has(title)) byTitle.set(title, { detected: [], suggestion: d.suggestion ?? "", fileLines: new Set() });
-    const entry = byTitle.get(title)!;
-    entry.detected.push(detected);
-    d.files.forEach((f) => entry.fileLines.add(f));
-  }
-
-  const allIssues = [...byTitle.entries()].map(([title, { detected, suggestion, fileLines }]) => ({
-    title,
-    detected: detected.join("; "),
-    suggestion: shortSuggestion(title, suggestion),
-    fileLines: [...fileLines].sort(),
-  }));
-
-  const NO_FILES_TITLES = new Set([
-    "Mixed Spacing", "Inconsistent Border Radius", "Mixed Button Padding", "Inconsistent Button Border Radius",
-  ]);
-  if (allIssues.length > 0) {
-    console.log(chalk.yellow("  ⚠ ") + chalk.bold("Issues Found") + "\n");
-    allIssues.forEach((issue, i) => {
-      console.log("  " + (i + 1) + ". " + issue.title);
-      if (issue.title === "Unused Imports" || issue.title === "Unused Variables") {
-        wrapLine(INDENT, issue.detected);
-      } else {
-        wrapLine(INDENT + "Detected: ", issue.detected);
-        console.log(INDENT + "Suggestion: " + issue.suggestion);
-      }
-      if (issue.fileLines.length > 0 && !NO_FILES_TITLES.has(issue.title)) {
-        console.log(INDENT + "Files:");
-        issue.fileLines.forEach((f) => console.log(INDENT + "  " + f));
-      }
-      if (i < allIssues.length - 1) console.log("");
-    });
-    console.log("");
-  }
-
-  console.log(line);
-  console.log(chalk.bold("  Scan Complete") + "\n");
-}
-
-async function main() {
-  const arg = process.argv[2];
-  if (!arg) {
-    console.error("Usage: frontend-guardian <path>");
-    console.error("       npx frontend-guardian .");
-    console.error("       npx frontend-guardian ./src");
-    console.error("       npx frontend-guardian project.zip");
-    process.exit(1);
-  }
-  const resolved = path.resolve(process.cwd(), arg);
-  if (!fs.existsSync(resolved)) {
-    console.error("Path not found:", resolved);
-    process.exit(1);
-  }
-  const projectName = path.basename(resolved).replace(/\.zip$/i, "") || "project";
-
-  const stat = fs.statSync(resolved);
-  let result: ScanResult;
-
-  if (stat.isDirectory()) {
-    const files = readDirRecursive(resolved);
-    if (files.length === 0) {
-      console.error("No .js/.jsx/.ts/.tsx files found (or all under node_modules/.next/dist/build).");
-      process.exit(1);
-    }
-    const spinner = ora("Scanning " + files.length + " file(s)...").start();
-    try {
-      result = scanFiles(files);
-      spinner.succeed("Scan complete.");
-    } catch (e) {
-      spinner.fail("Scan failed.");
-      throw e;
-    }
-  } else if (resolved.toLowerCase().endsWith(".zip")) {
-    const spinner = ora("Scanning ZIP...").start();
-    try {
-      const buf = fs.readFileSync(resolved);
-      result = await scanZip(buf);
-      spinner.succeed("Scan complete.");
-    } catch (e) {
-      spinner.fail("Scan failed.");
-      throw e;
-    }
-  } else {
-    console.error("Provide a folder path or a .zip file.");
-    process.exit(1);
-  }
-
-  printResult(projectName, result);
-}
-
-main().catch((err) => {
-  console.error(err);
-  process.exit(1);
-});

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "outDir": "dist",
-    "rootDir": "src",
-    "strict": true,
-    "skipLibCheck": true
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}