@nestledjs/data-browser 0.1.24 → 1.0.0

package/index.js

@@ -10,6 +10,7 @@ import { useClickOutside } from "./lib/hooks/useClickOutside.js";
 import { useDebounce } from "./lib/hooks/useDebounce.js";
 import { useRelationData } from "./lib/hooks/useRelationData.js";
 import { DateRangeFilter } from "./lib/components/filters/DateRangeFilter.js";
+import { EnumFilter } from "./lib/components/filters/EnumFilter.js";
 import { NumberRangeFilter } from "./lib/components/filters/NumberRangeFilter.js";
 import { RelationDropdownButton, RelationDropdownContent, RelationItem, RelationItemList, RelationSearchInput } from "./lib/components/filters/RelationComponents.js";
 import { RelationFilterField } from "./lib/components/filters/RelationFilterField.js";
@@ -39,6 +40,7 @@ export {
   AdminStatusDisplay,
   AdminUserStatus,
   DateRangeFilter,
+  EnumFilter,
   NumberRangeFilter,
   RelationDropdownButton,
   RelationDropdownContent,

package/lib/components/AdminDataStateMessage.d.ts

@@ -0,0 +1,15 @@
+interface AdminDataStateMessageProps {
+    readonly type: 'error' | 'loading' | 'not-found' | 'schema-error';
+    readonly title: string;
+    readonly message: string;
+    readonly basePath: string;
+    readonly onRetry?: () => void;
+    readonly backLinkText?: string;
+    readonly backLinkPath?: string;
+}
+/**
+ * Reusable component for displaying error, loading, and other state messages
+ * Extracted to reduce cognitive complexity in AdminDataEditPage
+ */
+export declare function AdminDataStateMessage({ type, title, message, basePath, onRetry, backLinkText, backLinkPath, }: AdminDataStateMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/AdminDataStateMessage.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
+import { Link } from "react-router";
+function AdminDataStateMessage({
+  type,
+  title,
+  message,
+  basePath,
+  onRetry,
+  backLinkText = "Return to Data Browser",
+  backLinkPath
+}) {
+  const iconColor = type === "not-found" ? "text-yellow-400" : "text-red-400";
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col justify-center py-12", children: /* @__PURE__ */ jsx("div", { className: "mt-8 mx-auto w-full max-w-md", children: /* @__PURE__ */ jsx("div", { className: "bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: type === "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "mx-auto h-12 w-12 border-4 border-green-web border-t-transparent rounded-full animate-spin" }),
+    /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: message })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ExclamationCircleIcon, { className: `mx-auto h-12 w-12 ${iconColor}` }),
+    /* @__PURE__ */ jsx("h2", { className: "mt-4 text-lg font-medium text-gray-900 dark:text-gray-100", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: message }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-6 space-y-3", children: [
+      onRetry && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onRetry,
+          className: "w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-web hover:bg-green-web-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web",
+          children: "Try Again"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          to: backLinkPath || basePath,
+          className: `w-full flex justify-center py-2 px-4 border ${onRetry ? "border-gray-300 text-gray-700 bg-white hover:bg-gray-50" : "border-transparent text-white bg-green-web hover:bg-green-web-700"} rounded-md shadow-sm text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-web`,
+          children: backLinkText
+        }
+      )
+    ] })
+  ] }) }) }) }) });
+}
+export {
+  AdminDataStateMessage
+};

package/lib/components/FilterField.d.ts

@@ -0,0 +1,14 @@
+interface FilterFieldProps {
+    readonly fieldName: string;
+    readonly model: any;
+    readonly databaseModels: any[];
+    readonly filters: Record<string, any>;
+    readonly onChange: (value: any) => void;
+    readonly getEnumValues: (enumType: string) => string[] | null;
+}
+/**
+ * Renders a single filter field based on its type
+ * Extracted from AdminDataListPage to reduce cognitive complexity
+ */
+export declare function FilterField({ fieldName, model, databaseModels, filters, onChange, getEnumValues, }: FilterFieldProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/lib/components/FilterField.js

@@ -0,0 +1,152 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DateRangeFilter } from "./filters/DateRangeFilter.js";
+import { EnumFilter } from "./filters/EnumFilter.js";
+import { NumberRangeFilter } from "./filters/NumberRangeFilter.js";
+import { formatFieldName } from "../utils/string-utils.js";
+import { RelationFilterField } from "./filters/RelationFilterField.js";
+function getFieldInfo(fieldName, model, databaseModels) {
+  const isRelatedEnum = fieldName.includes(".");
+  if (isRelatedEnum) {
+    const [relationName, enumFieldName] = fieldName.split(".");
+    const field2 = model.fields.find((f) => f.name === relationName);
+    if (!field2) return null;
+    const relatedModel = databaseModels.find((m) => m.name === field2.type);
+    if (!relatedModel) return null;
+    const relatedEnumField = relatedModel.fields.find((f) => f.name === enumFieldName);
+    if (!relatedEnumField) return null;
+    return { field: field2, relatedModel, relatedEnumField, isRelatedEnum: true };
+  }
+  const field = model.fields.find((f) => f.name === fieldName);
+  if (!field) return null;
+  return { field, relatedModel: null, relatedEnumField: null, isRelatedEnum: false };
+}
+function getRegularFieldValue(fieldName, filters) {
+  return filters[fieldName];
+}
+function getRelatedEnumFieldValue(fieldName, filters) {
+  var _a;
+  const [relationName, enumFieldName] = fieldName.split(".");
+  return (_a = filters[relationName]) == null ? void 0 : _a[enumFieldName];
+}
+function BooleanFilter({ fieldName, currentValue, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: formatFieldName(fieldName) }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: currentValue === void 0 || currentValue === null ? "" : currentValue.toString(),
+        onChange: (e) => {
+          const value = e.target.value;
+          onChange(value === "" ? void 0 : value === "true");
+        },
+        className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "All" }),
+          /* @__PURE__ */ jsx("option", { value: "true", children: "Yes" }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: "No" })
+        ]
+      }
+    )
+  ] }, fieldName);
+}
+function StringFilter({ fieldName, currentValue, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700", children: formatFieldName(fieldName) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: typeof currentValue === "string" ? currentValue : "",
+        onChange: (e) => onChange(e.target.value || void 0),
+        placeholder: `Filter by ${formatFieldName(fieldName).toLowerCase()}...`,
+        className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm"
+      }
+    )
+  ] }, fieldName);
+}
+function FilterField({
+  fieldName,
+  model,
+  databaseModels,
+  filters,
+  onChange,
+  getEnumValues
+}) {
+  const fieldInfo = getFieldInfo(fieldName, model, databaseModels);
+  if (!fieldInfo) return null;
+  const { field, relatedEnumField, isRelatedEnum } = fieldInfo;
+  const currentValue = isRelatedEnum ? getRelatedEnumFieldValue(fieldName, filters) : getRegularFieldValue(fieldName, filters);
+  if (isRelatedEnum && relatedEnumField) {
+    const enumValues = getEnumValues(relatedEnumField.type);
+    if (enumValues) {
+      return /* @__PURE__ */ jsx(
+        EnumFilter,
+        {
+          fieldName,
+          currentValue,
+          onChange,
+          enumValues
+        },
+        fieldName
+      );
+    }
+  }
+  if (field.relationName && !field.isList && !isRelatedEnum) {
+    return /* @__PURE__ */ jsx(
+      RelationFilterField,
+      {
+        fieldName,
+        relatedModelName: field.type,
+        currentValue,
+        onChange
+      },
+      fieldName
+    );
+  }
+  const fieldTypeLower = field.type.toLowerCase();
+  if (fieldTypeLower === "datetime" || fieldTypeLower === "date") {
+    return /* @__PURE__ */ jsx(
+      DateRangeFilter,
+      {
+        fieldName,
+        currentValue,
+        onChange
+      },
+      fieldName
+    );
+  }
+  if (["int", "bigint", "float", "decimal"].includes(fieldTypeLower)) {
+    return /* @__PURE__ */ jsx(
+      NumberRangeFilter,
+      {
+        fieldName,
+        fieldType: fieldTypeLower,
+        currentValue,
+        onChange
+      },
+      fieldName
+    );
+  }
+  if (field.kind === "enum") {
+    const enumValues = getEnumValues(field.type);
+    if (enumValues) {
+      return /* @__PURE__ */ jsx(
+        EnumFilter,
+        {
+          fieldName,
+          currentValue,
+          onChange,
+          enumValues
+        },
+        fieldName
+      );
+    }
+  }
+  if (fieldTypeLower === "boolean") {
+    return /* @__PURE__ */ jsx(BooleanFilter, { fieldName, currentValue, onChange });
+  }
+  return /* @__PURE__ */ jsx(StringFilter, { fieldName, currentValue, onChange });
+}
+export {
+  FilterField
+};

package/lib/components/filters/EnumFilter.d.ts

@@ -0,0 +1,8 @@
+interface EnumFilterProps {
+    fieldName: string;
+    currentValue: string | undefined | null;
+    onChange: (value: string | undefined) => void;
+    enumValues: string[];
+}
+export declare function EnumFilter({ fieldName, currentValue, onChange, enumValues }: Readonly<EnumFilterProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/filters/EnumFilter.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { formatFieldName } from "../../utils/string-utils.js";
+function EnumFilter({
+  fieldName,
+  currentValue,
+  onChange,
+  enumValues
+}) {
+  const handleChange = (value) => {
+    if (value === "") {
+      onChange(void 0);
+    } else {
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: fieldName, className: "block text-sm font-medium text-gray-700", children: formatFieldName(fieldName) }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: fieldName,
+        value: currentValue ?? "",
+        onChange: (e) => handleChange(e.target.value),
+        className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "All values" }),
+          enumValues.map((value) => /* @__PURE__ */ jsx("option", { value, children: formatFieldName(value) }, value))
+        ]
+      }
+    ),
+    currentValue && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
+      "Filtered by: ",
+      formatFieldName(currentValue)
+    ] })
+  ] });
+}
+export {
+  EnumFilter
+};

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

@@ -1,4 +1,5 @@
 export { DateRangeFilter } from './DateRangeFilter';
+export { EnumFilter } from './EnumFilter';
 export { NumberRangeFilter } from './NumberRangeFilter';
 export * from './RelationComponents';
 export { RelationFilterField } from './RelationFilterField';

package/lib/context/AdminDataContext.d.ts

@@ -1,4 +1,15 @@
 import { ReactNode } from 'react';
+/**
+ * Configuration for how to display and search relation fields
+ */
+export interface DisplayFieldConfig {
+    [modelName: string]: {
+        /** Fields to display in dropdowns. If multiple, they'll be joined with spaces */
+        display?: string[];
+        /** Fields to search when typing in the dropdown */
+        search?: string[];
+    };
+}
 export interface AdminDataContextValue {
     /** The SDK namespace for dynamic GraphQL document lookups */
     sdk: any;
@@ -8,6 +19,8 @@ export interface AdminDataContextValue {
     basePath?: string;
     /** Form theme configuration for @nestledjs/forms */
     formTheme: any;
+    /** Optional configuration for display and search fields per model */
+    displayFieldConfig?: DisplayFieldConfig;
 }
 export interface AdminDataProviderProps {
     children: ReactNode;
@@ -19,6 +32,8 @@ export interface AdminDataProviderProps {
     basePath?: string;
     /** Form theme configuration for @nestledjs/forms */
     formTheme: any;
+    /** Optional configuration for display and search fields per model */
+    displayFieldConfig?: DisplayFieldConfig;
 }
 /**
  * Provider component that supplies SDK and database models to admin data components
@@ -39,7 +54,7 @@ export interface AdminDataProviderProps {
  * </AdminDataProvider>
  * ```
  */
-export declare function AdminDataProvider({ children, sdk, databaseModels, basePath, formTheme }: Readonly<AdminDataProviderProps>): import("react/jsx-runtime").JSX.Element;
+export declare function AdminDataProvider({ children, sdk, databaseModels, basePath, formTheme, displayFieldConfig }: Readonly<AdminDataProviderProps>): import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access the admin data context
  * @throws Error if used outside of AdminDataProvider

package/lib/context/AdminDataContext.js

@@ -6,11 +6,12 @@ function AdminDataProvider({
   sdk,
   databaseModels,
   basePath = "/admin/data",
-  formTheme
+  formTheme,
+  displayFieldConfig
 }) {
   const value = useMemo(
-    () => ({ sdk, databaseModels, basePath, formTheme }),
-    [sdk, databaseModels, basePath, formTheme]
+    () => ({ sdk, databaseModels, basePath, formTheme, displayFieldConfig }),
+    [sdk, databaseModels, basePath, formTheme, displayFieldConfig]
   );
   return /* @__PURE__ */ jsx(AdminDataContext.Provider, { value, children });
 }

package/lib/pages/AdminDataCreatePage.js

@@ -20,7 +20,7 @@ const toKebabCase = (str) => {
 };
 function AdminDataCreatePage() {
   const { dataType } = useParams();
-  const { databaseModels, basePath = "/admin/data", formTheme } = useAdminDataContext();
+  const { databaseModels, basePath = "/admin/data", formTheme, displayFieldConfig } = useAdminDataContext();
   const findModelByName = (name) => {
     return databaseModels.find((model2) => model2.name === name);
   };
@@ -69,9 +69,9 @@ function AdminDataCreatePage() {
       ) })
     ] }) }) }) });
   }
-  return /* @__PURE__ */ jsx(AdminDataCreatePageContent, { model, basePath, formTheme });
+  return /* @__PURE__ */ jsx(AdminDataCreatePageContent, { model, basePath, formTheme, displayFieldConfig });
 }
-function AdminDataCreatePageContent({ model, basePath, formTheme }) {
+function AdminDataCreatePageContent({ model, basePath, formTheme, displayFieldConfig }) {
   const navigate = useNavigate();
   const { sdk, databaseModels } = useAdminDataContext();
   const [submissionState, setSubmissionState] = useState({ status: "idle" });
@@ -116,7 +116,12 @@ function AdminDataCreatePageContent({ model, basePath, formTheme }) {
       ) })
     ] }) }) }) });
   }
-  const formFields = buildFormFields(sdk, model, "create", void 0, submissionState.status === "loading", basePath, databaseModels);
+  const formFields = buildFormFields(sdk, model, "create", {
+    isSubmitting: submissionState.status === "loading",
+    basePath,
+    databaseModels,
+    displayFieldConfig
+  });
   const handleSubmit = async (formData) => {
     try {
       setSubmissionState({ status: "loading" });