uilint-react 0.1.8 → 0.1.9

package/dist/index.js

@@ -9,7 +9,6 @@ import {
   useCallback,
   useRef
 } from "react";
-import { generateStyleGuideFromStyles as generateStyleGuide } from "uilint-core";
 
 // src/scanner/dom-scanner.ts
 import {
@@ -281,6 +280,7 @@ function QuestionPanel() {
   const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
   const [isSaving, setIsSaving] = useState(false);
   const [saveSuccess, setSaveSuccess] = useState(false);
+  const [saveError, setSaveError] = useState(null);
   const questions = generateQuestionsFromIssues(issues);
   if (questions.length === 0) {
     return /* @__PURE__ */ jsxs2(
@@ -313,20 +313,24 @@ function QuestionPanel() {
     console.log("[UILint] Saving preferences:", answers);
     setIsSaving(true);
     setSaveSuccess(false);
+    setSaveError(null);
     try {
       const getResponse = await fetch("/api/uilint/styleguide");
-      const { exists, content: existingContent } = await getResponse.json();
-      const updatedContent = buildUpdatedStyleGuide(
-        exists ? existingContent : null,
-        answers
-      );
+      const data = await getResponse.json().catch(() => ({}));
+      if (!getResponse.ok || !data?.exists || !data?.content) {
+        throw new Error(
+          data?.error || 'No style guide found. Create ".uilint/styleguide.md" at your workspace root first.'
+        );
+      }
+      const updatedContent = applyAnswersToStyleGuide(data.content, answers);
       const postResponse = await fetch("/api/uilint/styleguide", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ content: updatedContent })
       });
       if (!postResponse.ok) {
-        throw new Error("Failed to save style guide");
+        const err = await postResponse.json().catch(() => ({}));
+        throw new Error(err?.error || "Failed to save style guide");
       }
       console.log("[UILint] Style guide saved successfully!");
       setSaveSuccess(true);
@@ -337,6 +341,7 @@ function QuestionPanel() {
       }, 1500);
     } catch (error) {
       console.error("[UILint] Error saving style guide:", error);
+      setSaveError(error instanceof Error ? error.message : "Save failed");
     } finally {
       setIsSaving(false);
     }
@@ -496,6 +501,22 @@ function QuestionPanel() {
           )
         ]
       }
+    ),
+    saveError && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          marginTop: "12px",
+          padding: "10px",
+          borderRadius: "8px",
+          backgroundColor: "#7F1D1D",
+          border: "1px solid #EF4444",
+          color: "#FEE2E2",
+          fontSize: "12px",
+          lineHeight: 1.4
+        },
+        children: saveError
+      }
     )
   ] });
 }
@@ -572,98 +593,75 @@ function generateQuestionsFromIssues(issues) {
   }
   return questions;
 }
-function buildUpdatedStyleGuide(existingContent, answers) {
-  const lines = [];
-  lines.push("# UI Style Guide");
-  lines.push("");
-  lines.push(
-    "> Auto-generated by UILint. Edit this file to define your design system."
-  );
-  lines.push("");
-  lines.push("## Colors");
-  lines.push("");
+function applyAnswersToStyleGuide(existingContent, answers) {
+  let content = existingContent;
   if (answers["primary-color"]) {
-    lines.push(`- **Primary**: ${answers["primary-color"]}`);
-  }
-  const existingColors = extractSection(existingContent, "Colors");
-  existingColors.filter((line) => !line.includes("**Primary**")).forEach((line) => lines.push(line));
-  if (!answers["primary-color"] && existingColors.length === 0) {
-    lines.push("- Define your color palette here");
+    content = upsertBulletInSection(
+      content,
+      "Colors",
+      "Primary",
+      answers["primary-color"]
+    );
   }
-  lines.push("");
-  lines.push("## Typography");
-  lines.push("");
   if (answers["font-weights"]) {
     const weightMap = {
       "400-600-700": "400 (Regular), 600 (Semibold), 700 (Bold)",
       "400-500-700": "400 (Regular), 500 (Medium), 700 (Bold)",
       "300-400-600": "300 (Light), 400 (Regular), 600 (Semibold)"
     };
-    lines.push(
-      `- **Font Weights**: ${weightMap[answers["font-weights"]] || answers["font-weights"]}`
+    const value = weightMap[answers["font-weights"]] || answers["font-weights"];
+    content = upsertBulletInSection(
+      content,
+      "Typography",
+      "Font Weights",
+      value
     );
   }
-  const existingTypography = extractSection(existingContent, "Typography");
-  existingTypography.filter((line) => !line.includes("**Font Weights**")).forEach((line) => lines.push(line));
-  if (!answers["font-weights"] && existingTypography.length === 0) {
-    lines.push("- Define your typography scale here");
-  }
-  lines.push("");
-  lines.push("## Spacing");
-  lines.push("");
   if (answers["spacing-scale"]) {
     const spacingMap = {
       "4": "4px (4, 8, 12, 16, 20, 24, 32, 40, 48...)",
       "8": "8px (8, 16, 24, 32, 40, 48, 56, 64...)",
       tailwind: "Tailwind (4, 8, 12, 16, 20, 24, 32, 40, 48...)"
     };
-    lines.push(
-      `- **Base unit**: ${spacingMap[answers["spacing-scale"]] || answers["spacing-scale"]}`
-    );
+    const value = spacingMap[answers["spacing-scale"]] || answers["spacing-scale"];
+    content = upsertBulletInSection(content, "Spacing", "Base unit", value);
   }
-  const existingSpacing = extractSection(existingContent, "Spacing");
-  existingSpacing.filter((line) => !line.includes("**Base unit**")).forEach((line) => lines.push(line));
-  if (!answers["spacing-scale"] && existingSpacing.length === 0) {
-    lines.push("- Define your spacing scale here");
-  }
-  lines.push("");
-  const otherSections = ["Border Radius", "Components"];
-  otherSections.forEach((section) => {
-    const sectionLines = extractSection(existingContent, section);
-    if (sectionLines.length > 0) {
-      lines.push(`## ${section}`);
-      lines.push("");
-      sectionLines.forEach((line) => lines.push(line));
-      lines.push("");
-    }
-  });
-  if (!existingContent?.includes("## Components")) {
-    lines.push("## Components");
-    lines.push("");
-    lines.push("- **Buttons**: Define button styles here");
-    lines.push("- **Cards**: Define card styles here");
-    lines.push("- **Inputs**: Define input styles here");
-    lines.push("");
-  }
-  return lines.join("\n");
+  return content;
 }
-function extractSection(content, sectionName) {
-  if (!content) return [];
-  const lines = content.split("\n");
+function upsertBulletInSection(markdown, sectionName, label, value) {
+  const lines = markdown.split("\n");
   const sectionStart = lines.findIndex(
-    (line) => line.match(new RegExp(`^##\\s+${sectionName}`, "i"))
+    (line) => line.match(new RegExp(`^##\\s+${sectionName}\\s*$`, "i"))
   );
-  if (sectionStart === -1) return [];
-  const result = [];
+  if (sectionStart === -1) {
+    throw new Error(
+      `Style guide is missing section "## ${sectionName}". Add it to your style guide and try again.`
+    );
+  }
+  let sectionEnd = lines.length;
   for (let i = sectionStart + 1; i < lines.length; i++) {
-    const line = lines[i];
-    if (line.startsWith("## ")) break;
-    if (result.length === 0 && line.trim() === "") continue;
-    if (line.startsWith("- ")) {
-      result.push(line);
+    if (lines[i].startsWith("## ")) {
+      sectionEnd = i;
+      break;
+    }
+  }
+  const bulletRe = new RegExp(
+    `^-\\s+\\*\\*${escapeRegExp(label)}\\*\\*:\\s+.*$`
+  );
+  const newBullet = `- **${label}**: ${value}`;
+  for (let i = sectionStart + 1; i < sectionEnd; i++) {
+    if (bulletRe.test(lines[i])) {
+      lines[i] = newBullet;
+      return lines.join("\n");
     }
   }
-  return result;
+  let insertAt = sectionStart + 1;
+  while (insertAt < sectionEnd && lines[insertAt].trim() === "") insertAt++;
+  lines.splice(insertAt, 0, newBullet);
+  return lines.join("\n");
+}
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
 // src/components/Overlay.tsx
@@ -979,25 +977,17 @@ function UILint({
     if (!isBrowser()) return;
     try {
       const response = await fetch("/api/uilint/styleguide");
-      const data = await response.json();
-      setStyleGuideExists(data.exists);
-      setStyleGuideContent(data.content);
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        setStyleGuideExists(false);
+        setStyleGuideContent(null);
+        return;
+      }
+      setStyleGuideExists(!!data.exists);
+      setStyleGuideContent(data.content ?? null);
     } catch {
       setStyleGuideExists(false);
-    }
-  }, []);
-  const saveStyleGuide = useCallback(async (content) => {
-    if (!isBrowser()) return;
-    try {
-      await fetch("/api/uilint/styleguide", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content })
-      });
-      setStyleGuideExists(true);
-      setStyleGuideContent(content);
-    } catch (error) {
-      console.error("[UILint] Failed to save style guide:", error);
+      setStyleGuideContent(null);
     }
   }, []);
   const scan = useCallback(async () => {
@@ -1006,8 +996,11 @@ function UILint({
     try {
       const snapshot = scanDOM(document.body);
       if (!styleGuideContent) {
-        const generatedGuide = generateStyleGuide(snapshot.styles);
-        await saveStyleGuide(generatedGuide);
+        console.error(
+          '[UILint] No style guide found. Create ".uilint/styleguide.md" at your workspace root.'
+        );
+        setIssues([]);
+        return;
       }
       const result = await llmClient.current.analyze(
         snapshot.styles,
@@ -1019,7 +1012,7 @@ function UILint({
     } finally {
       setIsScanning(false);
     }
-  }, [styleGuideContent, saveStyleGuide]);
+  }, [styleGuideContent]);
   const clearIssues = useCallback(() => {
     setIssues([]);
     setHighlightedIssue(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.8"
+    "uilint-core": "^0.1.9"
   },
   "peerDependencies": {
     "react": "^19.0.0",