@lensjs/core 1.0.1

package/src/ui/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "cross-env VITE_API_URL=http://localhost:3000 vite",
+    "build": "cross-env VITE_API_URL='' tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/react-query": "^5.85.0",
+    "dayjs": "^1.11.13",
+    "js-beautify": "^1.15.4",
+    "lucide-react": "^0.541.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.8.0",
+    "tailwindcss": "^4.1.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@tanstack/eslint-plugin-query": "^5.83.1",
+    "@types/js-beautify": "^1.14.3",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "cross-env": "^10.0.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "sass-embedded": "^1.90.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.39.0",
+    "vite": "^7.1.0"
+  }
+}

package/src/ui/src/App.tsx

@@ -0,0 +1,40 @@
+import { Suspense, useEffect, useState } from "react";
+import Router from "./router/Router";
+import type { LensConfig } from "./types";
+import { prepareApiUrl } from "./utils/api";
+import ConfigContext from "./utils/context";
+import LoadingScreen from "./components/layout/LoadingScreen";
+import { GlobalLoader } from "./router/routes/Loading";
+
+const App = () => {
+  const [config, setConfig] = useState<LensConfig>({} as LensConfig);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(prepareApiUrl("/lens-config"))
+      .then((res) => res.json())
+      .then((cfg: unknown) => {
+        setConfig(cfg as LensConfig);
+      })
+      .catch((err) => {
+        console.error("Failed to load config:", err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <ConfigContext.Provider value={{ config: config }}>
+      <Suspense fallback={<GlobalLoader />}>
+        <Router config={config} />
+      </Suspense>
+    </ConfigContext.Provider>
+  );
+};
+
+export default App;

package/src/ui/src/components/DetailPanel.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+export type DetailItem = {
+  label: string;
+  value: string | React.ReactNode;
+  className?: string;
+};
+
+interface DetailPanelProps {
+  title: string;
+  items: DetailItem[];
+  emptyMessage?: string;
+}
+
+const DetailPanel: React.FC<DetailPanelProps> = ({
+  title,
+  items,
+  emptyMessage = "No data available",
+}) => {
+  if (!items || items.length === 0 || items.every((item) => !item.value)) {
+    return (
+      <div className="bg-white dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700 rounded-lg shadow-sm p-6">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </h2>{" "}
+        <p className="text-center text-gray-500 dark:text-gray-400">
+          {emptyMessage}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-neutral-800 border border-gray-200 dark:border-neutral-700 rounded-lg shadow-sm">
+      <div className="px-6 py-4 border-b border-gray-200 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-900">
+        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          {title}
+        </h2>
+      </div>
+
+      <div className="px-6 py-4">
+        <div className="space-y-4">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className="flex flex-col sm:flex-row sm:items-start gap-2"
+            >
+              <div className="w-full sm:w-32 flex-shrink-0">
+                <span className="text-sm font-medium text-gray-500 dark:text-gray-400">
+                  {item.label}
+                </span>
+              </div>
+              <div className="flex-1">
+                {typeof item.value === "string" ? (
+                  <span className={`text-sm ${item.className || ""}`}>
+                    {item.value}
+                  </span>
+                ) : (
+                  item.value
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DetailPanel;

package/src/ui/src/components/JsonViewer.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import type React from "react";
+import type { JSX } from "react";
+import { useState } from "react";
+
+interface JsonViewerProps {
+  data: Record<string, any>;
+}
+
+function generateRandomKey(prefix = "key") {
+  return prefix + "-" + Math.random().toString(36).substr(2, 9);
+}
+
+const JsonViewer: React.FC<JsonViewerProps> = ({ data }) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async () => {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  const CopyIcon = () => (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  );
+
+  const CheckIcon = () => (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+
+  const formatJson = (obj: any, indent = 0): JSX.Element[] => {
+    const elements: JSX.Element[] = [];
+    const indentStr = "  ".repeat(indent);
+
+    if (Array.isArray(obj)) {
+      elements.push(
+        <span
+          key={generateRandomKey("open-bracket")}
+          className="text-neutral-600 dark:text-neutral-400"
+        >
+          [
+        </span>,
+      );
+      obj.forEach((item, index) => {
+        elements.push(<br key={generateRandomKey("br")} />);
+        elements.push(
+          <span key={generateRandomKey("indent")} className="text-transparent">
+            {indentStr}{" "}
+          </span>,
+        );
+        elements.push(...formatJson(item, indent + 1));
+        if (index < obj.length - 1) {
+          elements.push(
+            <span
+              key={generateRandomKey("comma")}
+              className="text-neutral-600 dark:text-neutral-400"
+            >
+              ,
+            </span>,
+          );
+        }
+      });
+      elements.push(<br key={generateRandomKey("br-close")} />);
+      elements.push(
+        <span
+          key={generateRandomKey("indent-close")}
+          className="text-transparent"
+        >
+          {indentStr}
+        </span>,
+      );
+      elements.push(
+        <span
+          key={generateRandomKey("close-bracket")}
+          className="text-neutral-600 dark:text-neutral-400"
+        >
+          ]
+        </span>,
+      );
+    } else if (typeof obj === "object" && obj !== null) {
+      elements.push(
+        <span
+          key={generateRandomKey("open-brace")}
+          className="text-neutral-600 dark:text-neutral-400"
+        >
+          {"{"}
+        </span>,
+      );
+      const entries = Object.entries(obj);
+      entries.forEach(([key, value], index) => {
+        elements.push(<br key={generateRandomKey("br")} />);
+        elements.push(
+          <span key={generateRandomKey("indent")} className="text-transparent">
+            {indentStr}{" "}
+          </span>,
+        );
+        elements.push(
+          <span
+            key={generateRandomKey("key")}
+            className="text-blue-600 dark:text-blue-400"
+          >
+            "{key}"
+          </span>,
+        );
+        elements.push(
+          <span
+            key={generateRandomKey("colon")}
+            className="text-neutral-600 dark:text-neutral-400"
+          >
+            :{" "}
+          </span>,
+        );
+        if (typeof value === "string") {
+          elements.push(
+            <span
+              key={generateRandomKey("value-string")}
+              className="text-green-600 dark:text-green-400"
+            >
+              "{value}"
+            </span>,
+          );
+        } else if (typeof value === "number") {
+          elements.push(
+            <span
+              key={generateRandomKey("value-number")}
+              className="text-orange-600 dark:text-orange-400"
+            >
+              {value}
+            </span>,
+          );
+        } else if (typeof value === "boolean") {
+          elements.push(
+            <span
+              key={generateRandomKey("value-boolean")}
+              className="text-purple-600 dark:text-purple-400"
+            >
+              {value.toString()}
+            </span>,
+          );
+        } else if (value === null) {
+          elements.push(
+            <span
+              key={generateRandomKey("value-null")}
+              className="text-neutral-500 dark:text-neutral-400"
+            >
+              null
+            </span>,
+          );
+        } else {
+          elements.push(...formatJson(value, indent + 1));
+        }
+        if (index < entries.length - 1) {
+          elements.push(
+            <span
+              key={generateRandomKey("comma")}
+              className="text-neutral-600 dark:text-neutral-400"
+            >
+              ,
+            </span>,
+          );
+        }
+      });
+      elements.push(<br key={generateRandomKey("br-close")} />);
+      elements.push(
+        <span
+          key={generateRandomKey("indent-close")}
+          className="text-transparent"
+        >
+          {indentStr}
+        </span>,
+      );
+      elements.push(
+        <span
+          key={generateRandomKey("close-brace")}
+          className="text-neutral-600 dark:text-neutral-400"
+        >
+          {"}"}
+        </span>,
+      );
+    }
+    return elements;
+  };
+
+  return (
+    <div className="bg-neutral-50 dark:bg-slate-900 rounded-lg p-4 font-mono text-sm overflow-x-auto relative">
+      <button
+        onClick={copyToClipboard}
+        className={`absolute top-3 right-3 p-2 rounded-md transition-colors ${
+          copied
+            ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400"
+            : "bg-white text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 dark:bg-slate-800 dark:text-neutral-400 dark:hover:text-neutral-300 dark:hover:bg-slate-700"
+        }`}
+        title={copied ? "Copied!" : "Copy to clipboard"}
+      >
+        {copied ? <CheckIcon /> : <CopyIcon />}
+      </button>
+      <pre className="whitespace-pre-wrap pr-12 text-neutral-800 dark:text-neutral-200">
+        {formatJson(data)}
+      </pre>
+    </div>
+  );
+};
+
+export default JsonViewer;

package/src/ui/src/components/LoadMore.tsx

@@ -0,0 +1,25 @@
+import { twMerge } from "tailwind-merge";
+import type { HasMoreType } from "../types";
+
+export function LoadMoreButton({
+  paginatedPage,
+}: {
+  paginatedPage: HasMoreType<any>;
+}) {
+  if (!paginatedPage.hasMore) return null;
+
+  return (
+    <div className="flex justify-center p-4">
+      <button
+        onClick={paginatedPage.loadMore}
+        disabled={paginatedPage.loading}
+        className={twMerge(
+          "px-4 py-2 rounded-md bg-gray-200 text-gray-800 dark:bg-neutral-800 dark:text-white text-sm hover:bg-gray-300 dark:hover:bg-neutral-700 transition-colors",
+          paginatedPage.loading && "opacity-50 cursor-not-allowed"
+        )}
+      >
+        {paginatedPage.loading ? "Loading..." : "Load More"}
+      </button>
+    </div>
+  );
+}

package/src/ui/src/components/MethodBadge.tsx

@@ -0,0 +1,19 @@
+export default function MethodBadge({ method }: { method: string }) {
+  const colors: Record<string, string> = {
+    GET: "bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-white",
+    POST: "bg-blue-100 text-blue-800 dark:bg-blue-600 dark:text-white",
+    PUT: "bg-yellow-100 text-yellow-800 dark:bg-yellow-600 dark:text-white",
+    DELETE: "bg-red-100 text-red-800 dark:bg-red-600 dark:text-white",
+  };
+
+  return (
+    <span
+      className={`rounded px-2 py-1 text-sm font-semibold ${
+        colors[method.toUpperCase()] || "bg-gray-100 text-gray-800 dark:bg-gray-600 dark:text-white"
+      }`}
+    >
+      {method}
+    </span>
+  );
+}
+

package/src/ui/src/components/Modal.tsx

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalProps {
+  visible: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+const Modal = ({ visible, onClose, children }: ModalProps) => {
+  useEffect(() => {
+    const controller = new AbortController();
+
+    addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape") {
+          onClose();
+        }
+      },
+      { signal: controller.signal },
+    );
+
+    return () => {
+      controller.abort();
+    };
+  }, []);
+
+  if (!visible) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-[99] flex items-center justify-center">
+      <div
+        className="absolute inset-0 z-[99] bg-black/40 backdrop-blur-[3px]"
+        aria-hidden={!open}
+        onClick={onClose}
+        role="button"
+        tabIndex={-1}
+      ></div>
+      <div className="z-[100]">{children}</div>
+    </div>,
+    document.body,
+  );
+};
+
+export default Modal;

package/src/ui/src/components/StatusCode.tsx

@@ -0,0 +1,20 @@
+const getColorClass = (status: number) => {
+  if (status >= 200 && status < 300) return "bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100";
+  if (status >= 300 && status < 400) return "bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100";
+  if (status >= 400 && status < 500) return "bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100";
+  if (status >= 500) return "bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-100";
+
+  return "bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-200";
+};
+
+export const StatusCode = ({ status }: { status: number }) => {
+  return (
+    <span
+      className={`rounded-lg px-2 py-1 text-sm font-semibold ${getColorClass(status)}`}
+    >
+      {status}
+    </span>
+  );
+};
+
+export default StatusCode;

package/src/ui/src/components/Table.tsx

@@ -0,0 +1,127 @@
+import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
+
+type Position = "start" | "end";
+
+export function getNestedValue<T>(obj: T, path: string): unknown {
+  if (!path.trim()) return obj;
+
+  return path.split(".").reduce<unknown>((acc, key) => {
+    if (typeof acc === "object" && acc !== null && key in acc) {
+      return (acc as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, obj);
+}
+
+type BaseColumn<T> = {
+  name: string;
+  position?: Position;
+  class?: string;
+  prefix?: (row: T) => ReactNode;
+  suffix?: (row: T) => ReactNode;
+  headPrefix?: () => ReactNode;
+  icon?: (row: T) => ReactNode;
+  hidden?: boolean;
+};
+
+export type TableColumn<T> =
+  | (BaseColumn<T> & {
+      key: string;
+      render?: undefined;
+      value?: undefined;
+    })
+  | (BaseColumn<T> & {
+      render: (row: T) => ReactNode;
+      key?: undefined;
+      value?: undefined;
+    })
+  | (BaseColumn<T> & {
+      key?: undefined;
+      render?: undefined;
+      value: (row: T) => string | number;
+    });
+
+interface TableProps<T> {
+  columns: TableColumn<T>[];
+  data: T[];
+}
+
+function Table<T>({ columns: columnsProp, data }: TableProps<T>) {
+  const columns = columnsProp.filter((column) => !column.hidden);
+
+  return (
+    <div className="relative overflow-x-auto">
+      <table className="w-full text-start">
+        <thead>
+          <tr>
+            {columns.map((column, i) => (
+              <th
+                key={i}
+                scope="col"
+                className={twMerge(
+                  "min-w-32 bg-gray-50  dark:bg-neutral-900 p-5 text-sm font-semibold text-gray-900 dark:text-neutral-200 first:rounded-s-lg last:rounded-e-lg",
+                  column.position === "end" ? "text-end" : ""
+                )}
+              >
+                <div
+                  className={twMerge(
+                    "flex items-center gap-2",
+                    column.position === "end" ? "justify-end" : "justify-start"
+                  )}
+                >
+                  {column.headPrefix && column.headPrefix()}
+                  {column.name}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, rowIndex) => (
+            <tr
+              key={rowIndex}
+              className="max-h-none overflow-hidden rounded-lg text-sm font-medium text-gray-800 dark:text-neutral-400 even:[&_td]:bg-gray-25 dark:even:[&_td]:bg-neutral-950 transition-colors"
+            >
+              {columns.map((column, colIndex) => (
+                <td
+                  key={colIndex}
+                  className={twMerge(
+                    "p-5 first:rounded-s-lg last:rounded-e-lg bg-white dark:bg-transparent",
+                    column.position === "end" ? "text-end" : "text-start"
+                  )}
+                >
+                  <div
+                    className={twMerge(
+                      "flex items-center gap-1",
+                      colIndex < columns.length - 1 &&
+                        column.position !== "end" &&
+                        "pe-8",
+                      column.class,
+                      column.position === "end"
+                        ? "justify-end"
+                        : "justify-start"
+                    )}
+                  >
+                    {column.icon && column.icon(row)}
+                    {column.prefix && column.prefix(row)}
+                    {column.render
+                      ? column.render(row)
+                      : column.key
+                        ? String(getNestedValue(row, column.key) ?? "-")
+                        : column.value
+                          ? column.value(row)
+                          : "-"}
+                    {column.suffix && column.suffix(row)}
+                  </div>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

package/src/ui/src/components/layout/DeleteButton.tsx

@@ -0,0 +1,60 @@
+import { Trash2 } from "lucide-react";
+import { useConfig } from "../../utils/context";
+import { useState } from "react";
+import Modal from "../Modal";
+import { prepareApiUrl } from "../../utils/api";
+
+export default function DeleteButton() {
+  const config = useConfig();
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Modal visible={isOpen} onClose={() => setIsOpen(false)}>
+        <div className="flex flex-col items-center justify-center gap-4 sm:p-12 p-6 bg-neutral-900 text-white rounded-2xl shadow-2xl border-2 border-neutral-800">
+          <h1 className="text-2xl font-bold">Are you sure?</h1>
+          <p className="text-gray-500">
+            This will delete all entries. This action cannot be undone.
+          </p>
+          <div className="flex items-center justify-center gap-4">
+            <button className="" onClick={() => setIsOpen(false)}>
+              Cancel
+            </button>
+            <button
+              className="bg-red-500 hover:bg-red-600 text-white font-bold py-1.5 px-4 rounded-2xl"
+              disabled={loading}
+              onClick={async () => {
+                try {
+                  setLoading(true);
+                  await fetch(prepareApiUrl(config.api.truncate), {
+                    method: "DELETE",
+                  });
+                  window.location.reload();
+                } catch (error) {
+                  console.error("Failed to delete:", error);
+                } finally {
+                  setLoading(false);
+                }
+              }}
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      </Modal>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="relative p-2.5 rounded-[10px] border border-neutral-800 hover:bg-gray-800 bg-neutral-900 transition-all duration-200 shadow-sm hover:shadow-md group"
+        aria-label="Delete entries"
+      >
+        <div className="relative w-5 h-5">
+          <Trash2
+            size={20}
+            className="text-red-500 group-hover:text-red-400 duration-200 transform transition-transform"
+          />
+        </div>
+      </button>
+    </>
+  );
+}