@nestledjs/data-browser 0.1.2 → 0.1.4

package/lib/components/shared/AdminStatusDisplay.js

@@ -0,0 +1,205 @@
+import { jsxDEV as o, Fragment as I } from "react/jsx-dev-runtime";
+import { QuestionMarkCircleIcon as S, PauseCircleIcon as $, CheckCircleIcon as b, XCircleIcon as u, ExclamationTriangleIcon as A, ClockIcon as D } from "@heroicons/react/24/solid";
+const L = (e) => ({
+  active: {
+    icon: b,
+    bgColor: "bg-green-100",
+    textColor: "text-green-800",
+    borderColor: "border-green-200",
+    defaultLabel: "Active"
+  },
+  inactive: {
+    icon: u,
+    bgColor: "bg-gray-100",
+    textColor: "text-gray-800",
+    borderColor: "border-gray-200",
+    defaultLabel: "Inactive"
+  },
+  pending: {
+    icon: D,
+    bgColor: "bg-yellow-100",
+    textColor: "text-yellow-800",
+    borderColor: "border-yellow-200",
+    defaultLabel: "Pending"
+  },
+  approved: {
+    icon: b,
+    bgColor: "bg-green-100",
+    textColor: "text-green-800",
+    borderColor: "border-green-200",
+    defaultLabel: "Approved"
+  },
+  rejected: {
+    icon: u,
+    bgColor: "bg-red-100",
+    textColor: "text-red-800",
+    borderColor: "border-red-200",
+    defaultLabel: "Rejected"
+  },
+  warning: {
+    icon: A,
+    bgColor: "bg-yellow-100",
+    textColor: "text-yellow-800",
+    borderColor: "border-yellow-200",
+    defaultLabel: "Warning"
+  },
+  error: {
+    icon: u,
+    bgColor: "bg-red-100",
+    textColor: "text-red-800",
+    borderColor: "border-red-200",
+    defaultLabel: "Error"
+  },
+  success: {
+    icon: b,
+    bgColor: "bg-green-100",
+    textColor: "text-green-800",
+    borderColor: "border-green-200",
+    defaultLabel: "Success"
+  },
+  paused: {
+    icon: $,
+    bgColor: "bg-blue-100",
+    textColor: "text-blue-800",
+    borderColor: "border-blue-200",
+    defaultLabel: "Paused"
+  },
+  unknown: {
+    icon: S,
+    bgColor: "bg-gray-100",
+    textColor: "text-gray-800",
+    borderColor: "border-gray-200",
+    defaultLabel: "Unknown"
+  }
+})[e], x = (e) => ({
+  small: {
+    text: "text-xs",
+    padding: "px-2 py-1",
+    icon: "h-3 w-3",
+    dot: "h-2 w-2"
+  },
+  medium: {
+    text: "text-sm",
+    padding: "px-2.5 py-1.5",
+    icon: "h-4 w-4",
+    dot: "h-3 w-3"
+  },
+  large: {
+    text: "text-base",
+    padding: "px-3 py-2",
+    icon: "h-5 w-5",
+    dot: "h-4 w-4"
+  }
+})[e], P = (e) => ({
+  badge: "inline-flex items-center rounded border font-medium",
+  pill: "inline-flex items-center rounded-full border font-medium",
+  dot: "inline-flex items-center font-medium",
+  full: "flex items-center justify-center rounded border font-medium w-full"
+})[e], U = (e) => ({
+  online: {
+    color: "bg-green-400",
+    label: "Online"
+  },
+  offline: {
+    color: "bg-gray-400",
+    label: "Offline"
+  },
+  away: {
+    color: "bg-yellow-400",
+    label: "Away"
+  },
+  busy: {
+    color: "bg-red-400",
+    label: "Busy"
+  }
+})[e];
+function O({
+  status: e,
+  label: t,
+  size: c = "medium",
+  variant: n = "badge",
+  showIcon: r = !0,
+  className: a = "",
+  onClick: s,
+  tooltip: i
+}) {
+  const l = L(e), d = x(c), y = P(n), h = l.icon, m = t || l.defaultLabel, g = n === "dot", N = r && !g, f = !!s, C = `${`${y} ${d.text} ${d.padding} ${l.bgColor} ${l.textColor} ${l.borderColor}`} ${f ? "cursor-pointer hover:opacity-80" : ""} ${a}`.trim(), j = () => g ? /* @__PURE__ */ o("span", { className: `inline-block rounded-full mr-2 ${l.bgColor.replace("bg-", "bg-").replace("-100", "-400")} ${d.dot}` }, void 0, !1, {
+    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+    lineNumber: 221,
+    columnNumber: 7
+  }, this) : null, v = () => N ? /* @__PURE__ */ o(h, { className: `${d.icon} ${m ? "mr-1.5" : ""}` }, void 0, !1, {
+    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+    lineNumber: 229,
+    columnNumber: 7
+  }, this) : null, p = /* @__PURE__ */ o(I, { children: [
+    j(),
+    v(),
+    m
+  ] }, void 0, !0, {
+    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+    lineNumber: 234,
+    columnNumber: 5
+  }, this), w = () => {
+    s && s();
+  };
+  return f ? /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      onClick: w,
+      className: C,
+      title: i,
+      children: p
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+      lineNumber: 249,
+      columnNumber: 7
+    },
+    this
+  ) : /* @__PURE__ */ o("span", { className: C, title: i, children: p }, void 0, !1, {
+    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+    lineNumber: 261,
+    columnNumber: 5
+  }, this);
+}
+function V({
+  status: e,
+  showLabel: t = !1,
+  size: c = "medium",
+  className: n = ""
+}) {
+  const r = U(e), a = x(c), s = a.dot, i = t ? a.text : "";
+  return /* @__PURE__ */ o("div", { className: `inline-flex items-center ${n}`, children: [
+    /* @__PURE__ */ o(
+      "span",
+      {
+        className: `inline-block rounded-full ${r.color} ${s}`,
+        "aria-label": r.label
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+        lineNumber: 281,
+        columnNumber: 7
+      },
+      this
+    ),
+    t && /* @__PURE__ */ o("span", { className: `ml-2 text-gray-700 ${i}`, children: r.label }, void 0, !1, {
+      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+      lineNumber: 286,
+      columnNumber: 9
+    }, this)
+  ] }, void 0, !0, {
+    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx",
+    lineNumber: 280,
+    columnNumber: 5
+  }, this);
+}
+export {
+  O as AdminStatusDisplay,
+  V as AdminUserStatus
+};

package/lib/components/shared/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AdminBreadcrumbs';
+export * from './AdminErrorStates';
+export * from './AdminStatusDisplay';

package/lib/context/AdminDataContext.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export interface AdminDataContextValue {
+    /** The SDK namespace for dynamic GraphQL document lookups */
+    sdk: any;
+    /** Array of database models from Prisma schema */
+    databaseModels: any[];
+    /** Base path for admin data routes (e.g., "/admin/data") */
+    basePath?: string;
+    /** Form theme configuration for @nestledjs/forms */
+    formTheme: any;
+}
+export interface AdminDataProviderProps {
+    children: ReactNode;
+    /** The entire SDK namespace (e.g., import * as Sdk from '@your-project/shared/sdk') */
+    sdk: any;
+    /** DATABASE_MODELS array from your SDK */
+    databaseModels: any[];
+    /** Optional base path for routes (defaults to "/admin/data") */
+    basePath?: string;
+    /** Form theme configuration for @nestledjs/forms */
+    formTheme: any;
+}
+/**
+ * Provider component that supplies SDK and database models to admin data components
+ *
+ * @example
+ * ```tsx
+ * import * as Sdk from '@your-project/shared/sdk'
+ * import { DATABASE_MODELS } from '@your-project/shared/sdk'
+ * import { AdminDataProvider } from '@nestledjs/admin-data'
+ *
+ * <AdminDataProvider
+ *   sdk={Sdk}
+ *   databaseModels={DATABASE_MODELS}
+ *   formTheme={formTheme}
+ *   basePath="/admin/data"
+ * >
+ *   <AdminDataLayout />
+ * </AdminDataProvider>
+ * ```
+ */
+export declare function AdminDataProvider({ children, sdk, databaseModels, basePath, formTheme }: AdminDataProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the admin data context
+ * @throws Error if used outside of AdminDataProvider
+ */
+export declare function useAdminDataContext(): AdminDataContextValue;

package/lib/context/AdminDataContext.js

@@ -0,0 +1,28 @@
+import { jsxDEV as o } from "react/jsx-dev-runtime";
+import { createContext as d, useContext as m } from "react";
+const e = d(null);
+function l({
+  children: t,
+  sdk: n,
+  databaseModels: a,
+  basePath: r = "/admin/data",
+  formTheme: i
+}) {
+  return /* @__PURE__ */ o(e.Provider, { value: { sdk: n, databaseModels: a, basePath: r, formTheme: i }, children: t }, void 0, !1, {
+    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/context/AdminDataContext.tsx",
+    lineNumber: 55,
+    columnNumber: 5
+  }, this);
+}
+function x() {
+  const t = m(e);
+  if (!t)
+    throw new Error(
+      "useAdminDataContext must be used within AdminDataProvider. Make sure to wrap your admin data routes with <AdminDataProvider>."
+    );
+  return t;
+}
+export {
+  l as AdminDataProvider,
+  x as useAdminDataContext
+};

package/lib/hooks/useAdminList.d.ts

@@ -0,0 +1,5 @@
+import { AdminListAction, AdminListState } from '../types';
+export declare function useAdminList(): {
+    state: AdminListState;
+    dispatch: import('react').ActionDispatch<[action: AdminListAction]>;
+};

package/lib/hooks/useAdminList.js

@@ -0,0 +1,41 @@
+import { useReducer as S } from "react";
+import { initialState as E } from "../types/index.js";
+function u(r, e) {
+  switch (e.type) {
+    case "SET_SEARCH":
+      return { ...r, search: e.payload };
+    case "SET_DEBOUNCED_SEARCH":
+      return { ...r, debouncedSearch: e.payload };
+    case "SET_SKIP":
+      return { ...r, skip: e.payload };
+    case "SET_PAGE_SIZE":
+      return { ...r, pageSize: e.payload };
+    case "SET_SORT":
+      return { ...r, sort: e.payload };
+    case "SET_VISIBLE_COLUMNS":
+      return { ...r, visibleColumns: e.payload };
+    case "TOGGLE_COLUMN_SELECTOR":
+      return { ...r, showColumnSelector: !r.showColumnSelector };
+    case "SET_SEARCH_FIELDS":
+      return { ...r, searchFields: e.payload };
+    case "TOGGLE_SEARCH_FIELD_SELECTOR":
+      return { ...r, showSearchFieldSelector: !r.showSearchFieldSelector };
+    case "SET_FILTERS":
+      return { ...r, filters: e.payload };
+    case "TOGGLE_FILTERS":
+      return { ...r, showFilters: !r.showFilters };
+    case "RESET_PAGINATION":
+      return { ...r, skip: 0 };
+    case "RESET_FILTERS":
+      return { ...r, filters: {} };
+    default:
+      return r;
+  }
+}
+function s() {
+  const [r, e] = S(u, E);
+  return { state: r, dispatch: e };
+}
+export {
+  s as useAdminList
+};

package/lib/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare function useClickOutside(ref: React.RefObject<HTMLDivElement | null>, handler: () => void, isActive?: boolean): void;

package/lib/hooks/useClickOutside.js

@@ -0,0 +1,13 @@
+import { useEffect as o } from "react";
+function i(e, t, n = !0) {
+  o(() => {
+    if (!n) return;
+    const r = (u) => {
+      e.current && !e.current.contains(u.target) && t();
+    };
+    return document.addEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+  }, [t, n]);
+}
+export {
+  i as useClickOutside
+};

package/lib/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay: number): T;

package/lib/hooks/useDebounce.js

@@ -0,0 +1,13 @@
+import { useState as r, useEffect as c } from "react";
+function i(e, t) {
+  const [o, u] = r(e);
+  return c(() => {
+    const n = setTimeout(() => {
+      u(e);
+    }, t);
+    return () => clearTimeout(n);
+  }, [e, t]), o;
+}
+export {
+  i as useDebounce
+};

package/lib/hooks/useRelationData.d.ts

@@ -0,0 +1,7 @@
+export declare function useRelationData(relatedModelName: string, searchTerm: string, isOpen: boolean): {
+    relatedModel: any;
+    relatedItems: any[];
+    loading: boolean;
+    error: import('@apollo/client').ErrorLike | undefined;
+    hasDocument: boolean;
+};

package/lib/hooks/useRelationData.js

@@ -0,0 +1,64 @@
+import { useQuery as g } from "@apollo/client/react";
+import { useMemo as o } from "react";
+import { useAdminDataContext as Q } from "../context/AdminDataContext.js";
+import { getAdminDocuments as w } from "../utils/graphql-utils.js";
+import { getSmartSearchFields as A } from "../utils/string-utils.js";
+import { useDebounce as k } from "./useDebounce.js";
+function v(a, y, d) {
+  const { sdk: l, databaseModels: f } = Q(), s = k(y, 300), e = o(
+    () => f.find((r) => r.name === a),
+    [f, a]
+  ), i = o(
+    () => e ? w(l, e) : { listQuery: void 0 },
+    [l, e]
+  ), m = o(
+    () => (e == null ? void 0 : e.pluralModelPropertyName) || a.charAt(0).toLowerCase() + a.slice(1) + "s",
+    [e, a]
+  ), p = o(() => e ? e.fields.filter((r) => {
+    const t = r.type.toLowerCase();
+    return !r.relationName && (t === "string" || t.includes("text") || t === "boolean");
+  }).map((r) => r.name) : [], [e]), c = o(() => A(p), [p]), h = o(
+    () => ({
+      input: {
+        take: 20,
+        ...s.trim() ? {
+          search: s,
+          searchFields: c.length > 0 ? c : void 0
+        } : {}
+      }
+    }),
+    [s, c]
+  ), {
+    data: u,
+    loading: D,
+    error: n
+  } = g(i.listQuery, {
+    variables: h,
+    skip: !i.listQuery || !d,
+    errorPolicy: "all",
+    // Continue processing even if there are GraphQL errors
+    notifyOnNetworkStatusChange: !0,
+    fetchPolicy: "cache-first"
+    // Use cache for better performance
+  }), b = o(() => {
+    if (n)
+      return console.warn("[RelationData] GraphQL error:", n.message), [];
+    if (!u) return [];
+    try {
+      const r = u[m] || [];
+      return Array.isArray(r) ? r.filter((t) => !(!t || typeof t != "object" || !t.id)) : (console.warn("[RelationData] Expected array but got:", typeof r), []);
+    } catch (r) {
+      return console.error("[RelationData] Error processing relation data:", r), [];
+    }
+  }, [u, m, n]);
+  return {
+    relatedModel: e,
+    relatedItems: b,
+    loading: D,
+    error: n,
+    hasDocument: !!i.listQuery
+  };
+}
+export {
+  v as useRelationData
+};

package/lib/layouts/AdminDataLayout.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Main layout component for admin data browser
+ * Provides model selector, fullscreen toggle, and preferences import/export
+ */
+export declare function AdminDataLayout(): import("react/jsx-runtime").JSX.Element;