@qwik.dev/devtools 0.1.2 → 0.2.1

package/dist/ui/features/Packages/Packages.qwik.mjs

@@ -1,93 +1,53 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, useSignal, $, useResource$, Resource } from "@qwik.dev/core";
-import { useDebouncer } from "../../hooks/useDebouncer.qwik.mjs";
-import { InstallButton } from "./components/InstallButton/InstallButton.qwik.mjs";
-const Packages = component$(() => {
-  const debouncedQuery = useSignal("");
-  const installingPackage = useSignal(null);
-  const debounceSearch = useDebouncer($((value) => {
-    debouncedQuery.value = value;
-  }), 300);
-  const searchResults = useResource$(async ({ track }) => {
-    const query = track(() => debouncedQuery.value);
-    if (!query || query.length < 2) {
-      return [];
-    }
-    const response = await fetch(`https://registry.npmjs.org/-/v1/search?text=${query}`);
-    const data = await response.json();
-    const packages = data.objects.map((obj) => ({
-      name: obj.package.name,
-      version: obj.package.version,
-      description: obj.package.description || "No description available"
-    }));
-    return packages;
-  });
-  return /* @__PURE__ */ jsxs("div", {
-    class: "space-y-4",
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        class: "relative",
-        children: /* @__PURE__ */ jsx("input", {
-          type: "text",
-          onInput$: (_, target) => {
-            debounceSearch(target.value);
-          },
-          placeholder: "Search npm packages...",
-          class: "w-full rounded-lg border border-border bg-input px-4 py-2 text-sm text-foreground placeholder-muted-foreground outline-none focus:border-ring"
-        })
-      }),
-      /* @__PURE__ */ jsx(Resource, {
-        value: searchResults,
-        onPending: () => /* @__PURE__ */ jsx("div", {
-          class: "absolute right-3 top-1",
-          children: /* @__PURE__ */ jsx("div", {
-            class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
+import { jsx, jsxs } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+import { DependencyCard } from "./components/DependencyCard/DependencyCard.qwik.mjs";
+const Packages = component$(({ state }) => {
+  const packages = state.allDependencies;
+  const isLoading = state.isLoadingDependencies;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", {
+      class: "flex items-center justify-center py-8",
+      children: /* @__PURE__ */ jsxs("div", {
+        class: "flex flex-col items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                class: "text-sm text-muted-foreground",
+                children: "Loading dependencies..."
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "text-center text-xs text-muted-foreground",
+            children: [
+              "Dependencies are being preloaded in the background...",
+              /* @__PURE__ */ jsx("br", {}),
+              "This should only take a moment"
+            ]
           })
-        }),
-        onRejected: (error) => /* @__PURE__ */ jsx("div", {
-          class: "mt-2 text-xs text-red-400",
-          children: error.message || "Failed to fetch packages"
-        }),
-        onResolved: (packages) => {
-          return /* @__PURE__ */ jsx("div", {
-            class: "grid gap-3 md:grid-cols-2",
-            children: packages.map((pkg) => {
-              return /* @__PURE__ */ jsxs("div", {
-                class: "bg-foreground/5 flex flex-col gap-2 rounded-lg p-3",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "flex items-center justify-between",
-                    children: [
-                      /* @__PURE__ */ jsx("div", {
-                        class: "text-sm",
-                        children: pkg.name
-                      }),
-                      /* @__PURE__ */ jsxs("div", {
-                        class: "flex items-center gap-2",
-                        children: [
-                          /* @__PURE__ */ jsx("div", {
-                            class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
-                            children: pkg.version
-                          }),
-                          /* @__PURE__ */ jsx(InstallButton, {
-                            pkg,
-                            installingPackage
-                          })
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "line-clamp-2 text-xs text-muted-foreground",
-                    children: pkg.description
-                  })
-                ]
-              }, pkg.name);
-            })
-          });
-        }
+        ]
+      })
+    });
+  }
+  if (!packages || packages.length === 0) {
+    return /* @__PURE__ */ jsx("div", {
+      class: "py-8 text-center",
+      children: /* @__PURE__ */ jsx("div", {
+        class: "text-sm text-muted-foreground",
+        children: "No dependencies found in package.json"
       })
-    ]
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    class: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: packages.map((pkg) => /* @__PURE__ */ jsx(DependencyCard, {
+      pkg
+    }, pkg.name))
   });
 });
 export {

package/dist/ui/features/Packages/components/DependencyCard/DependencyCard.qwik.mjs

@@ -0,0 +1,170 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, $ } from "@qwik.dev/core";
+import { PackageIcon } from "../PackageIcon/PackageIcon.qwik.mjs";
+const DependencyCard = component$(({ pkg }) => {
+  const handleAuthorClick = $(() => {
+    if (pkg.author?.url) {
+      window.open(pkg.author.url, "_blank");
+    } else if (pkg.author?.email) {
+      window.open(`mailto:${pkg.author.email}`, "_blank");
+    }
+  });
+  const handlePackageClick = $(() => {
+    if (pkg.npmUrl) {
+      window.open(pkg.npmUrl, "_blank");
+    }
+  });
+  const handleHomepageClick = $(() => {
+    if (pkg.homepage) {
+      window.open(pkg.homepage, "_blank");
+    }
+  });
+  const handleRepositoryClick = $(() => {
+    if (pkg.repository) {
+      window.open(pkg.repository, "_blank");
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "bg-card border-border/50 hover:border-primary/30 hover:shadow-primary/5 group relative rounded-xl border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "from-primary/0 via-primary/0 to-primary/5 pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "relative flex flex-col gap-4",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-start gap-4",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "from-primary/10 via-primary/20 to-primary/30 border-primary/20 group-hover:shadow-primary/20 flex h-12 w-12 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-xl border bg-gradient-to-br shadow-md transition-all duration-300 hover:rotate-3 hover:scale-110",
+                onClick$: handlePackageClick,
+                title: `View ${pkg.name} on npm`,
+                children: /* @__PURE__ */ jsx(PackageIcon, {
+                  packageName: pkg.name,
+                  iconUrl: pkg.iconUrl
+                })
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "min-w-0 flex-1",
+                children: [
+                  /* @__PURE__ */ jsx("h3", {
+                    class: "mb-1.5 cursor-pointer truncate text-base font-bold text-foreground transition-colors hover:text-primary",
+                    onClick$: handlePackageClick,
+                    title: pkg.name,
+                    children: pkg.name
+                  }),
+                  /* @__PURE__ */ jsxs("span", {
+                    class: "bg-primary/10 border-primary/20 inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-medium text-primary",
+                    children: [
+                      /* @__PURE__ */ jsx("svg", {
+                        class: "h-3 w-3",
+                        fill: "none",
+                        stroke: "currentColor",
+                        viewBox: "0 0 24 24",
+                        children: /* @__PURE__ */ jsx("path", {
+                          "stroke-linecap": "round",
+                          "stroke-linejoin": "round",
+                          "stroke-width": "2",
+                          d: "M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"
+                        })
+                      }),
+                      "v",
+                      pkg.version
+                    ]
+                  })
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("p", {
+            class: "line-clamp-2 min-h-[2.5rem] text-sm leading-relaxed text-muted-foreground",
+            children: pkg.description || "No description available"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "border-border border-t"
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between gap-3",
+            children: [
+              pkg.author ? /* @__PURE__ */ jsxs("div", {
+                class: "flex min-w-0 flex-1 items-center gap-2",
+                children: [
+                  /* @__PURE__ */ jsx("div", {
+                    class: "from-accent/20 to-accent/40 border-accent/30 flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border bg-gradient-to-br transition-transform hover:scale-110",
+                    onClick$: handleAuthorClick,
+                    title: `Contact ${pkg.author.name}`,
+                    children: /* @__PURE__ */ jsx("span", {
+                      class: "text-[10px] font-semibold text-accent",
+                      children: pkg.author.name.split(" ").map((n) => n.charAt(0)).join("").substring(0, 2).toUpperCase()
+                    })
+                  }),
+                  /* @__PURE__ */ jsx("span", {
+                    class: "truncate text-xs text-muted-foreground",
+                    children: /* @__PURE__ */ jsx("span", {
+                      class: "font-medium text-foreground",
+                      children: pkg.author.name
+                    })
+                  })
+                ]
+              }) : /* @__PURE__ */ jsx("div", {
+                class: "flex-1"
+              }),
+              /* @__PURE__ */ jsxs("div", {
+                class: "flex items-center gap-1.5",
+                children: [
+                  pkg.homepage && /* @__PURE__ */ jsx("button", {
+                    onClick$: handleHomepageClick,
+                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    title: "Homepage",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "none",
+                      stroke: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        "stroke-linecap": "round",
+                        "stroke-linejoin": "round",
+                        "stroke-width": "2",
+                        d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+                      })
+                    })
+                  }),
+                  pkg.repository && /* @__PURE__ */ jsx("button", {
+                    onClick$: handleRepositoryClick,
+                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    title: "Repository",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                      })
+                    })
+                  }),
+                  pkg.npmUrl && /* @__PURE__ */ jsx("button", {
+                    onClick$: handlePackageClick,
+                    class: "hover:bg-primary/10 group/btn rounded-lg p-1.5 text-muted-foreground transition-all duration-200 hover:text-primary",
+                    title: "npm",
+                    children: /* @__PURE__ */ jsx("svg", {
+                      class: "h-4 w-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 24 24",
+                      children: /* @__PURE__ */ jsx("path", {
+                        d: "M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z"
+                      })
+                    })
+                  })
+                ]
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  DependencyCard
+};

package/dist/ui/features/Packages/components/PackageIcon/PackageIcon.qwik.mjs

@@ -0,0 +1,27 @@
+import { jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useSignal, $ } from "@qwik.dev/core";
+const PackageIcon = component$(({ packageName, iconUrl }) => {
+  const iconError = useSignal(false);
+  const handleIconError = $(() => {
+    iconError.value = true;
+  });
+  const fallbackInitial = packageName.split("/").pop()?.charAt(0).toUpperCase() || packageName.charAt(0).toUpperCase();
+  if (!iconUrl || iconError.value) {
+    return /* @__PURE__ */ jsx("span", {
+      class: "text-sm font-bold text-primary",
+      children: fallbackInitial
+    });
+  }
+  return /* @__PURE__ */ jsx("img", {
+    src: iconUrl,
+    alt: `${packageName} icon`,
+    class: "h-6 w-6 rounded",
+    width: "24",
+    height: "24",
+    onError$: handleIconError,
+    loading: "lazy"
+  });
+});
+export {
+  PackageIcon
+};