@lensjs/core 1.0.1 → 1.0.2

package/src/ui/src/hooks/useLoadMore.ts

@@ -1,48 +0,0 @@
-import { useEffect, useState } from "react";
-import type { HasMoreType } from "../types";
-import type { UseLoadMoreOptions } from "../interfaces";
-
-export function useLoadMore<T>({
-  paginatedPage,
-}: UseLoadMoreOptions<T>): HasMoreType<T> {
-  const [data, setData] = useState<T[]>([]);
-  const [page, setPage] = useState(1);
-  const [loading, setLoading] = useState<boolean>(false);
-  const [hasMore, setHasMore] = useState<boolean>(false);
-
-  useEffect(() => {
-    setLoading(paginatedPage.loading);
-    setHasMore(paginatedPage.meta.currentPage < paginatedPage.meta.lastPage);
-    setPage(1);
-
-    if (!paginatedPage.loading) {
-      setData(paginatedPage.initialData);
-    }
-  }, [
-    paginatedPage.initialData,
-    paginatedPage.loading,
-    paginatedPage.meta.currentPage,
-    paginatedPage.meta.lastPage
-  ]);
-
-  const loadMore = async () => {
-    if (loading || !hasMore) return;
-
-    setLoading(true);
-    const newPage = page + 1;
-    const newData = await paginatedPage.fetchRawPage(newPage);
-
-    setData((prev) => [...prev, ...newData!.data!]);
-    setPage(newPage);
-
-    if (!newData?.meta) {
-      setHasMore(false);
-    } else {
-      setHasMore(newData.meta.currentPage < newData.meta.lastPage);
-    }
-
-    setLoading(false);
-  };
-
-  return { data, loading, hasMore, loadMore };
-}

package/src/ui/src/hooks/useQueries.ts

@@ -1,58 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-import type { PaginatorMeta, QueryEntry, QueryTableRow } from "../types";
-import useLensApi, { DEFAULT_META } from "./useLensApi";
-
-export default function useQueries() {
-  const [queries, setQueries] = useState<QueryTableRow[]>([]);
-  const [query, setQuery] = useState<QueryEntry>();
-  const [loading, setLoading] = useState(false);
-  const [meta, setMeta] = useState<PaginatorMeta>(DEFAULT_META);
-
-  const { getQueries, getQueryById } = useLensApi();
-  const fetchQuery = useCallback(
-    async (id: string) => {
-      setLoading(true);
-      getQueryById(id)
-        .then((res) => {
-          console.log(res, "das2s");
-          setQuery(res.data!);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    },
-    [getQueries]
-  );
-  const fetchQueries = useCallback(
-    async (page?: number) => {
-      setLoading(true);
-      await getQueries(page ?? 1)
-        .then((res) => {
-          setQueries(res.data!);
-          setMeta(res.meta!);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    },
-    [getQueries]
-  );
-
-  const loadMoreRequests = useMemo(
-    () => ({
-      initialData: queries,
-      meta,
-      loading,
-      fetchRawPage: getQueries,
-    }),
-    [queries, meta, loading, getQueries]
-  );
-
-  return {
-    loadMoreRequests,
-    fetchQueries,
-    fetchQuery,
-    queries,
-    query,
-  };
-}

package/src/ui/src/hooks/useRequests.ts

@@ -1,79 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-import type { OneRequest, PaginatorMeta, RequestTableRow } from "../types";
-import useLensApi, { DEFAULT_META } from "./useLensApi";
-
-const defaultRequest: OneRequest = {
-  created_at: "",
-  data: {
-    body: {},
-    createdAt: "",
-    duration: "",
-    headers: {},
-    id: "",
-    ip: "",
-    method: "GET",
-    path: "",
-    response: {
-      headers: {},
-      json: {},
-    },
-    status: 0,
-    user: null,
-  },
-  id: "",
-  lens_entry_id: null,
-  type: "request",
-};
-
-export default function useRequests() {
-  const [requests, setRequests] = useState<RequestTableRow[]>([]);
-  const [request, setRequest] = useState<OneRequest>(defaultRequest);
-  const [loading, setLoading] = useState(false);
-  const [meta, setMeta] = useState<PaginatorMeta>(DEFAULT_META);
-
-  const { getAllRequests, getRequestById } = useLensApi();
-  const fetchRequest = useCallback(
-    async (id: string) => {
-      setLoading(true);
-      getRequestById(id)
-        .then((res) => {
-          setRequest(res.data!);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    },
-    [getRequestById],
-  );
-  const fetchRequests = useCallback(
-    async (page?: number) => {
-      setLoading(true);
-      getAllRequests(page)
-        .then((res) => {
-          setRequests(res.data!);
-          setMeta(res.meta!);
-        })
-        .finally(() => {
-          setLoading(false);
-        });
-    },
-    [getAllRequests],
-  );
-
-  const loadMoreRequests = useMemo(
-    () => ({
-      initialData: requests,
-      meta,
-      loading,
-      fetchRawPage: getAllRequests,
-    }),
-    [requests, meta, loading, getAllRequests],
-  );
-
-  return {
-    loadMoreRequests,
-    fetchRequests,
-    fetchRequest,
-    request,
-  };
-}

package/src/ui/src/hooks/useTanstackApi.ts

@@ -1,126 +0,0 @@
-import { useQuery, type UseQueryOptions } from "@tanstack/react-query";
-import type {
-  ApiResponse,
-  GenericLensEntry,
-  PaginatorMeta,
-  QueryEntry,
-  QueryTableRow,
-  RequestEntry,
-  RequestTableRow,
-} from "../types";
-import { prepareApiUrl } from "../utils/api";
-import { useConfig } from "../utils/context";
-
-export const DEFAULT_META: PaginatorMeta = {
-  currentPage: 1,
-  lastPage: 1,
-  total: 0,
-};
-
-async function fetchJson<TData>(
-  url: string,
-  options?: RequestInit
-): Promise<ApiResponse<TData>> {
-  const res = await fetch(url, {
-    headers: { "Content-Type": "application/json" },
-    ...options,
-  });
-
-  if (!res.ok) {
-    throw new Error(`Failed to fetch: ${url}`);
-  }
-
-  return res.json();
-}
-
-const withQueryParams = (
-  endpoint: string,
-  params?: Record<string, unknown>
-) => {
-  const searchParams = new URLSearchParams(
-    Object.entries(params || {}).reduce(
-      (acc, [key, value]) => {
-        if (value !== undefined && value !== null) {
-          acc[key] = String(value);
-        }
-        return acc;
-      },
-      {} as Record<string, string>
-    )
-  );
-
-  return `${endpoint}${searchParams.toString() ? `?${searchParams}` : ""}`;
-};
-
-export function useAllRequests(
-  page?: number,
-  options?: UseQueryOptions<ApiResponse<RequestTableRow[]>>
-) {
-  const config = useConfig();
-  return useQuery<ApiResponse<RequestTableRow[]>>({
-    queryKey: ["requests", page],
-    queryFn: () =>
-      fetchJson<RequestTableRow[]>(
-        prepareApiUrl(
-          withQueryParams(config.api.requests, {
-            page,
-          })
-        )
-      ),
-    ...options,
-  });
-}
-
-export function useRequestById(
-  id: string,
-  options?: UseQueryOptions<ApiResponse<GenericLensEntry<RequestEntry>>>
-) {
-  const config = useConfig();
-  return useQuery<ApiResponse<GenericLensEntry<RequestEntry>>>({
-    queryKey: ["request", id],
-    queryFn: async () =>
-      await fetchJson<GenericLensEntry<RequestEntry>>(
-        prepareApiUrl(`${config.api.requests}/${id}`)
-      ),
-    ...{
-      enabled: !!id,
-      ...options,
-    },
-  });
-}
-
-export function useQueries(
-  page: number,
-  options?: UseQueryOptions<ApiResponse<QueryTableRow[]>>
-) {
-  const config = useConfig();
-  return useQuery<ApiResponse<QueryTableRow[]>>({
-    queryKey: ["queries", page],
-    queryFn: () =>
-      fetchJson<QueryTableRow[]>(
-        prepareApiUrl(
-          withQueryParams(config.api.queries, {
-            page,
-          })
-        )
-      ),
-    ...options,
-  });
-}
-
-export function useQueryById(
-  id: string,
-  options?: UseQueryOptions<ApiResponse<QueryEntry>>
-) {
-  const config = useConfig();
-  return useQuery<ApiResponse<QueryEntry>>({
-    queryKey: ["query", id],
-
-    queryFn: () =>
-      fetchJson<QueryEntry>(prepareApiUrl(`${config.api.queries}/${id}`)),
-    ...{
-      enabled: !!id,
-      ...options,
-    },
-  });
-}

package/src/ui/src/index.css

@@ -1,78 +0,0 @@
-@import "tailwindcss";
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-secondary-bg: light-dark(#f8f8f8, #191a2e);
-  --color-Gray: light-dark(#f8f8f8, #2d2d2d);
-  --color-dark-Gray: #2d2d2d;
-  --color-LightGray: #bcbcbc;
-  --color-DarkBlue: #7ea4c4;
-  --color-green-check: #26bc67;
-  --color-yellow-cart: #ffd000;
-  --color-DarkerGray: #bcbcbc;
-  --color-2ndLightGray: #e7e7e7;
-  --color-sku-blue: #3591e1;
-}
-@layer base {
-  :root {
-    --bg-primary: 0 0 0;
-    --bg-secondary: 15 15 15;
-    --text-primary: 248 250 252;
-    --text-secondary: 148 163 184;
-  }
-
-  body {
-    background-color: rgb(var(--bg-primary));
-    color: rgb(var(--text-primary));
-    transition:
-      background-color 0.3s ease,
-      color 0.3s ease;
-  }
-
-  button {
-    cursor: pointer;
-  }
-}
-
-@layer utilities {
-  .container {
-    margin-inline: auto;
-    padding-inline: 10px;
-  }
-}

package/src/ui/src/interfaces/index.ts

@@ -1,10 +0,0 @@
-import type { ApiResponse, PaginatorMeta } from "../types";
-
-export interface UseLoadMoreOptions<T> {
-  paginatedPage: {
-    meta: PaginatorMeta;
-    initialData: T[];
-    loading: boolean;
-    fetchRawPage: (page: number) => Promise<ApiResponse<T[]>>;
-  };
-}

package/src/ui/src/main.tsx

@@ -1,33 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-import App from "./App.tsx";
-import "./index.css";
-
-dayjs.extend(relativeTime);
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      gcTime: 10 * 60 * 1000, // 10 minutes
-    },
-  },
-});
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </QueryClientProvider>
-  </StrictMode>
-);

package/src/ui/src/router/Router.ts

@@ -1,11 +0,0 @@
-import { useRoutes, type RouteObject } from "react-router-dom";
-import { getRoutes } from "./routes";
-import type { LensConfig } from "../types";
-
-const Router = ({config}: {config: LensConfig}) => {
-  const allRoutes: RouteObject[] = getRoutes(config);
-
-  return useRoutes([...allRoutes]);
-};
-
-export default Router;

package/src/ui/src/router/routes/Loading.tsx

@@ -1,5 +0,0 @@
-export const GlobalLoader = () => (
-  <div className="flex items-center justify-center min-h-screen">
-    <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
-  </div>
-);

package/src/ui/src/router/routes/index.tsx

@@ -1,85 +0,0 @@
-import { ArrowRightLeft, Database } from "lucide-react";
-import { lazy} from "react";
-import { Navigate, type RouteObject } from "react-router-dom";
-import Layout from "../../components/layout/Layout";
-import type { LensConfig } from "../../types";
-
-const RequestsContainer = lazy(
-  () => import("../../containers/requests/RequestsContainer"),
-);
-const QueriesContainer = lazy(
-  () => import("../../containers/queries/QueriesContainer"),
-);
-const RequestDetailsContainer = lazy(
-  () => import("../../containers/requests/RequestDetailsContainer"),
-);
-const QueryDetailsContainer = lazy(
-  () => import("../../containers/queries/QueryDetailsContainer"),
-);
-
-export function getRoutesPaths(config: LensConfig) {
-  return {
-    REQUESTS: `${config.path}/requests`,
-    QUERIES: `${config.path}/queries`,
-    REQUEST_DETAILS: `${config.path}/requests/:requestId`,
-    QUERY_DETAILS: `${config.path}/queries/:queryId`,
-  };
-}
-
-export function getSidebarRoutes(config: LensConfig) {
-  const paths = getRoutesPaths(config);
-
-  return [
-    {
-      path: paths.REQUESTS,
-      label: "Requests",
-      icon: ArrowRightLeft,
-    },
-    {
-      path: paths.QUERIES,
-      label: "Queries",
-      icon: Database,
-    },
-  ];
-}
-
-export function getRoutes(config: LensConfig): RouteObject[] {
-  const paths = getRoutesPaths(config);
-
-  return [
-    {
-      path: "/",
-      element: <Navigate to={paths.REQUESTS} replace />,
-    },
-    {
-      path: config.path,
-      element: <Layout />,
-      children: [
-        {
-          index: true,
-          element: <Navigate to="requests" replace />,
-        },
-        {
-          path: "requests",
-          element: <RequestsContainer />,
-        },
-        {
-          path: "requests/:id",
-          element: <RequestDetailsContainer />,
-        },
-        {
-          path: "queries",
-          element: <QueriesContainer />,
-        },
-        {
-          path: "queries/:id",
-          element: <QueryDetailsContainer />,
-        },
-        {
-          path: "*",
-          element: <h1>Error</h1>,
-        },
-      ],
-    },
-  ];
-}

package/src/ui/src/types/index.ts

@@ -1,95 +0,0 @@
-export type LensConfig = {
-  appName: string;
-  path: string;
-  api: {
-    requests: string;
-    queries: string;
-    truncate: string
-  };
-};
-
-export type LensEntryType = "request" | "query";
-
-export type PaginationParams = {
-  page: number;
-  perPage: number;
-};
-
-export type PaginatorMeta = {
-  total: number;
-  lastPage: number;
-  currentPage: number;
-};
-
-export type Paginator<T> = {
-  meta: PaginatorMeta;
-  data: PaginatorData<T>;
-};
-
-export type PaginatorData<T> = T[];
-
-export type ApiResponse<T> = {
-  status: number;
-  message: string;
-  data: T | null;
-  meta?: Paginator<T>["meta"];
-};
-
-export type QueryEntry = {
-  id: string;
-  type: LensEntryType;
-  created_at: string;
-  lens_entry_id: string | null;
-  data: {
-    query: string;
-    duration: string;
-    createdAt: string;
-    type: QueryType;
-  };
-};
-
-export type UserEntry = {
-  id: number | string;
-  name: string;
-  email: string;
-};
-
-export type RequestEntry = {
-  id: string;
-  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
-  duration: string;
-  path: string;
-  headers: Record<string, string>;
-  body: Record<string, any>;
-  status: number;
-  ip: string;
-  createdAt: string;
-  response: {
-    json: Record<string, any>;
-    headers: Record<string, string>;
-  };
-  user?: UserEntry | null;
-};
-
-export type RequestTableEntry = Omit<RequestEntry, "ip" | "headers" | "body">;
-export type Queries = QueryEntry;
-export type GenericLensEntry<T> = {
-  id: string;
-  type: LensEntryType;
-  created_at: string;
-  lens_entry_id: string | null;
-  data: T;
-};
-
-export type HasMoreType<T> = {
-  data: T[];
-  hasMore: boolean;
-  loading: boolean;
-  loadMore: () => Promise<void>;
-};
-
-export type RequestTableRow = GenericLensEntry<RequestTableEntry>;
-export type OneRequest = GenericLensEntry<RequestEntry>;
-export type QueryTableRow = QueryEntry;
-export type OneQuery = GenericLensEntry<QueryEntry>;
-export type QueryType = "sql" | "mongodb";

package/src/ui/src/utils/api.ts

@@ -1,7 +0,0 @@
-export const prepareApiUrl = (path: string) => {
-  return `${import.meta.env.VITE_API_URL ?? ''}/${replaceTrailingSlash(path)}`;
-};
-
-const replaceTrailingSlash = (path: string) => {
-  return path.replace(/^\/+|\/+$/g, "");
-};

package/src/ui/src/utils/context.ts

@@ -1,24 +0,0 @@
-import { createContext, useContext } from "react";
-import type { LensConfig } from "../types";
-
-interface ConfigContextType {
-  config: LensConfig;
-}
-
-const ConfigContext = createContext<ConfigContextType | undefined>(undefined);
-
-export function useConfig() {
-  const context = useContext(ConfigContext);
-  if (!context) {
-    throw new Error("useConfig must be used inside a ConfigProvider");
-  }
-  return context.config;
-}
-
-export function getBasePath() {
-  const config = useConfig();
-
-  return config.path;
-}
-
-export default ConfigContext;

package/src/ui/src/utils/date.ts

@@ -1,36 +0,0 @@
-import dayjs from "dayjs";
-
-export function getCurrentTimezone(): string {
-  return dayjs.tz.guess();
-}
-
-function parseBackendUTC(date: string | Date | number) {
-  return dayjs.utc(date).tz(getCurrentTimezone());
-}
-
-export const humanDifferentDate = (date: string | Date) => {
-  const d = parseBackendUTC(date);
-  return {
-    label: d.fromNow(),
-    exact: d.format("YYYY-MM-DD HH:mm:ss"),
-  };
-};
-
-export function formatTimeAgo(dateInput: string | number | Date): string {
-  const d = parseBackendUTC(dateInput);
-  return d.isValid() ? d.fromNow() : "Unknown";
-}
-
-export function formatDateWithTimeAgo(
-  dateInput: string | number | Date | null | undefined,
-  locale: string = "en"
-): string {
-  if (!dateInput) return "N/A";
-
-  const d = parseBackendUTC(dateInput);
-  if (!d.isValid()) return "N/A";
-
-  const formatted = d.locale(locale).format("MMMM D, YYYY h:mm A");
-  return `${formatted} (${d.fromNow()})`;
-}
-