@principal-ade/code-quality-panels 0.1.3 → 0.1.4

package/dist/panels/RepositoryQualityGridPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RepositoryQualityGridPanel.d.ts","sourceRoot":"","sources":["../../src/panels/RepositoryQualityGridPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAsMpD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,+BAAoC,CAAC"}
+{"version":3,"file":"RepositoryQualityGridPanel.d.ts","sourceRoot":"","sources":["../../src/panels/RepositoryQualityGridPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAyXpD;;;GAGG;AACH,eAAO,MAAM,0BAA0B,+BAAoC,CAAC"}

package/dist/panels.bundle.js

@@ -824,7 +824,7 @@ function checkFileExistsInTree(treeData, targetPath) {
     return filePath.endsWith(normalizedTarget) || filePath === normalizedTarget;
   });
 }
-const CommandLine = ({ command, theme }) => {
+const CommandLine$1 = ({ command, theme }) => {
   const [copied, setCopied] = React2__default.useState(false);
   const handleCopy = async () => {
     try {
@@ -1026,7 +1026,7 @@ const QualityEmptyState = ({
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  CommandLine,
+                  CommandLine$1,
                   {
                     command: "npm install -g @principal-ai/quality-lens-cli",
                     theme
@@ -1068,7 +1068,7 @@ const QualityEmptyState = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens list", theme })
+                /* @__PURE__ */ jsx(CommandLine$1, { command: "quality-lens list", theme })
               ] }),
               /* @__PURE__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsxs(
@@ -1105,7 +1105,7 @@ const QualityEmptyState = ({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens init", theme })
+                /* @__PURE__ */ jsx(CommandLine$1, { command: "quality-lens init", theme })
               ] }),
               /* @__PURE__ */ jsxs(
                 "div",
@@ -1723,51 +1723,258 @@ function RepositoryQualityGrid({
     }
   );
 }
-const mockRepositories = [
-  {
-    id: "platform",
-    name: "platform",
-    packages: [
-      {
-        name: "@org/core",
-        version: "2.0.0",
-        metrics: { tests: 94, deadCode: 4, linting: 98, formatting: 100, types: 97, documentation: 90 }
+const CommandLine = ({ command, theme }) => {
+  const [copied, setCopied] = React2__default.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      console.log("Copy:", command);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "10px 14px",
+        borderRadius: 6,
+        backgroundColor: theme.colors.background,
+        border: `1px solid ${theme.colors.border}`,
+        fontFamily: "monospace",
+        fontSize: 13
       },
-      {
-        name: "@org/ui-components",
-        version: "2.0.0",
-        metrics: { tests: 85, deadCode: 8, linting: 95, formatting: 98, types: 92, documentation: 80 }
+      children: [
+        /* @__PURE__ */ jsx("code", { style: { color: theme.colors.text }, children: command }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCopy,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 4,
+              border: "none",
+              backgroundColor: "transparent",
+              color: theme.colors.textMuted,
+              cursor: "pointer"
+            },
+            title: "Copy command",
+            children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, color: theme.colors.success }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+const RepositoryQualityEmptyState = ({ theme }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 40,
+        gap: 24,
+        height: "100%",
+        minHeight: 400
       },
-      {
-        name: "@org/hooks",
-        version: "2.0.0",
-        metrics: { tests: 88, deadCode: 6, linting: 96, formatting: 100, types: 94, documentation: 85 }
-      }
-    ]
-  },
-  {
-    id: "backend",
-    name: "backend-services",
-    packages: [
-      {
-        name: "backend-services",
-        version: "1.5.0",
-        metrics: { tests: 80, deadCode: 15, linting: 90, formatting: 95, types: 85, documentation: 72 }
-      }
-    ]
-  },
-  {
-    id: "docs",
-    name: "documentation-site",
-    packages: [
-      {
-        name: "documentation-site",
-        version: "1.0.0",
-        metrics: { tests: 45, deadCode: 25, linting: 75, formatting: 85, types: 60, documentation: 95 }
-      }
-    ]
-  }
-];
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 64,
+              height: 64,
+              borderRadius: 16,
+              backgroundColor: theme.colors.surface,
+              border: `1px solid ${theme.colors.border}`
+            },
+            children: /* @__PURE__ */ jsx(Hexagon, { size: 32, color: theme.colors.textMuted })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: 400 }, children: [
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              style: {
+                margin: "0 0 8px 0",
+                fontSize: 18,
+                fontWeight: 600,
+                color: theme.colors.text
+              },
+              children: "No Quality Metrics"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                margin: 0,
+                fontSize: 14,
+                color: theme.colors.textMuted,
+                lineHeight: 1.5
+              },
+              children: "Configure the Quality Lens GitHub Action on your repositories to track code quality metrics across your projects."
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              gap: 16,
+              padding: 20,
+              borderRadius: 8,
+              backgroundColor: theme.colors.surface,
+              border: `1px solid ${theme.colors.border}`,
+              width: "100%",
+              maxWidth: 400
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    marginBottom: 4
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Terminal, { size: 20, color: theme.colors.text }),
+                    /* @__PURE__ */ jsx(
+                      "h4",
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: 15,
+                          fontWeight: 600,
+                          color: theme.colors.text
+                        },
+                        children: "Get Started"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      marginBottom: 8,
+                      fontSize: 13,
+                      color: theme.colors.textMuted
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: 20,
+                            height: 20,
+                            borderRadius: "50%",
+                            backgroundColor: theme.colors.primary,
+                            color: theme.colors.background,
+                            fontSize: 11,
+                            fontWeight: 600
+                          },
+                          children: "1"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: "Install the CLI" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CommandLine,
+                  {
+                    command: "npm install -g @principal-ai/quality-lens-cli",
+                    theme
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      marginBottom: 8,
+                      fontSize: 13,
+                      color: theme.colors.textMuted
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: 20,
+                            height: 20,
+                            borderRadius: "50%",
+                            backgroundColor: theme.colors.primary,
+                            color: theme.colors.background,
+                            fontSize: 11,
+                            fontWeight: 600
+                          },
+                          children: "2"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: "Initialize in each repository" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(CommandLine, { command: "quality-lens init", theme })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    paddingTop: 8,
+                    fontSize: 13,
+                    color: theme.colors.textMuted
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(ChevronRight, { size: 14 }),
+                    /* @__PURE__ */ jsx("span", { children: "Commit, push, and quality data will appear after CI runs" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
 const RepositoryQualityGridPanelContent = ({
   context,
   events
@@ -1775,18 +1982,14 @@ const RepositoryQualityGridPanelContent = ({
   var _a;
   const { theme } = useTheme();
   const qualitySlice = context.getSlice("repositoriesQuality");
-  const hasQualitySlice = context.hasSlice("repositoriesQuality");
   const isLoading = (qualitySlice == null ? void 0 : qualitySlice.loading) ?? false;
   const repositories = React2__default.useMemo(() => {
     var _a2;
     if ((_a2 = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a2.repositories) {
       return qualitySlice.data.repositories;
     }
-    if (hasQualitySlice) {
-      return [];
-    }
-    return mockRepositories;
-  }, [(_a = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a.repositories, hasQualitySlice]);
+    return [];
+  }, [(_a = qualitySlice == null ? void 0 : qualitySlice.data) == null ? void 0 : _a.repositories]);
   const handleItemClick = (item) => {
     events.emit({
       type: "principal-ade.repository-quality-grid:item:click",
@@ -1850,17 +2053,7 @@ const RepositoryQualityGridPanelContent = ({
           },
           children: "Loading repository quality metrics..."
         }
-      ) : repositories.length === 0 ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            padding: 40,
-            textAlign: "center",
-            color: theme.colors.textMuted
-          },
-          children: "No repositories with quality metrics found."
-        }
-      ) : /* @__PURE__ */ jsx(
+      ) : repositories.length === 0 ? /* @__PURE__ */ jsx(RepositoryQualityEmptyState, { theme }) : /* @__PURE__ */ jsx(
         RepositoryQualityGrid,
         {
           repositories,