react-scanner-ui 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scanner-ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "bin": {
     "react-scanner-ui": "dist/index.js"

package/ui/components/App.css

@@ -0,0 +1,28 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+h1 {
+  color: var(--color-text);
+  margin: 0 0 24px 0;
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.loading {
+  color: var(--color-text-secondary);
+  font-style: italic;
+  padding: 20px;
+  text-align: center;
+}
+
+.error {
+  background-color: var(--color-error-bg);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error-text);
+  padding: 16px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 20px;
+}

package/ui/components/App.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from "react";
+import { ComponentTable } from "./ComponentTable";
+import "./App.css";
+
+export interface ScanData {
+  [componentName: string]: {
+    instances: number;
+    props?: Record<string, number>;
+  };
+}
+
+interface ApiResponse {
+  data: ScanData | null;
+  error: string | null;
+}
+
+function App() {
+  const [data, setData] = useState<ScanData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/scan-data")
+      .then((res) => res.json())
+      .then((result: ApiResponse) => {
+        if (result.error) {
+          setError(result.error);
+        } else {
+          setData(result.data);
+        }
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError("Failed to fetch scan data: " + err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <div className="container">
+      <h1>React Scanner UI</h1>
+      {loading && <div className="loading">Loading scan data...</div>}
+      {error && <div className="error">{error}</div>}
+      {!loading && !error && data && <ComponentTable data={data} />}
+      {!loading && !error && !data && (
+        <div className="error">No component data found.</div>
+      )}
+    </div>
+  );
+}
+
+export default App;

package/ui/components/ComponentTable.css

@@ -0,0 +1,61 @@
+.component-table {
+  width: 100%;
+  border-collapse: collapse;
+  background-color: var(--color-bg-card);
+  box-shadow: var(--shadow-sm);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.component-table th,
+.component-table td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.component-table th {
+  background-color: var(--color-bg-header);
+  font-weight: 600;
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.15s ease;
+}
+
+.component-table th:hover {
+  background-color: #e9ecef;
+}
+
+.component-table th .sort-indicator {
+  margin-left: 5px;
+  color: var(--color-text-muted);
+  font-size: 0.75em;
+}
+
+.component-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.component-table tbody tr:hover td {
+  background-color: var(--color-bg-hover);
+}
+
+.component-table .count {
+  font-family: var(--font-mono);
+  font-weight: 500;
+}
+
+.component-table .total-row {
+  font-weight: 600;
+  background-color: var(--color-bg-total);
+}
+
+.component-table .total-row td {
+  border-top: 2px solid var(--color-border-strong);
+  border-bottom: none;
+}
+
+.component-table .total-row:hover td {
+  background-color: var(--color-bg-total);
+}

package/ui/components/ComponentTable.tsx

@@ -0,0 +1,88 @@
+import { useState } from "react";
+import type { ScanData } from "./App";
+import "./ComponentTable.css";
+
+interface ComponentTableProps {
+  data: ScanData;
+}
+
+type SortKey = "name" | "count";
+type SortDirection = "asc" | "desc";
+
+interface SortConfig {
+  key: SortKey;
+  direction: SortDirection;
+}
+
+export function ComponentTable({ data }: ComponentTableProps) {
+  const [sortConfig, setSortConfig] = useState<SortConfig>({
+    key: "count",
+    direction: "desc",
+  });
+
+  const handleSort = (key: SortKey) => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+    }));
+  };
+
+  const getSortIndicator = (key: SortKey) => {
+    if (sortConfig.key !== key) return "";
+    return sortConfig.direction === "asc" ? "▲" : "▼";
+  };
+
+  // Transform data into array and sort
+  const components = Object.entries(data).map(([name, info]) => ({
+    name,
+    count: info.instances || 0,
+  }));
+
+  components.sort((a, b) => {
+    const aValue = sortConfig.key === "name" ? a.name.toLowerCase() : a.count;
+    const bValue = sortConfig.key === "name" ? b.name.toLowerCase() : b.count;
+
+    if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
+    if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
+    return 0;
+  });
+
+  const totalCount = components.reduce((sum, c) => sum + c.count, 0);
+
+  if (components.length === 0) {
+    return <div className="empty-state">No components found in scan data.</div>;
+  }
+
+  return (
+    <div className="table-container">
+      <table className="component-table">
+        <thead>
+          <tr>
+            <th onClick={() => handleSort("name")}>
+              Component
+              <span className="sort-indicator">{getSortIndicator("name")}</span>
+            </th>
+            <th onClick={() => handleSort("count")}>
+              Count
+              <span className="sort-indicator">
+                {getSortIndicator("count")}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {components.map((component) => (
+            <tr key={component.name}>
+              <td className="component-name">{component.name}</td>
+              <td className="count">{component.count}</td>
+            </tr>
+          ))}
+          <tr className="total-row">
+            <td>Total</td>
+            <td className="count">{totalCount}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/ui/index.css

@@ -0,0 +1,59 @@
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --color-bg: #f5f5f5;
+  --color-bg-card: #ffffff;
+  --color-bg-header: #f8f9fa;
+  --color-bg-hover: #f8f9fa;
+  --color-bg-total: #f0f0f0;
+  --color-text: #333333;
+  --color-text-secondary: #666666;
+  --color-text-muted: #999999;
+  --color-border: #eeeeee;
+  --color-border-strong: #dddddd;
+  --color-error-bg: #fee2e2;
+  --color-error-border: #fecaca;
+  --color-error-text: #dc2626;
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2563eb;
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+}
+
+body {
+  font-family: var(--font-sans);
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  line-height: 1.5;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+  text-decoration: underline;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+input, select, textarea {
+  font-family: inherit;
+}

package/ui/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Scanner UI</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>React Scanner UI</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./main.tsx"></script>
+    </body>
 </html>

package/ui/main.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./components/App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);