@djangocfg/ui-tools 2.1.91

package/dist/chunk-M6P2FU7L.mjs

@@ -0,0 +1,572 @@
+import { __name } from './chunk-37ZI6VD4.mjs';
+import { ChevronUp, ChevronDown, Download } from 'lucide-react';
+import React3, { lazy, createContext, useState, Suspense, useContext, useEffect, useCallback } from 'react';
+import { JSONTree } from 'react-json-tree';
+import { Button, CopyButton } from '@djangocfg/ui-core/components';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import consola from 'consola';
+
+var JsonTreeComponent = /* @__PURE__ */ __name(({ title, data, config = {}, jsonTreeProps = {} }) => {
+  const [expandAll, setExpandAll] = useState(null);
+  const [renderKey, setRenderKey] = useState(0);
+  const {
+    maxAutoExpandDepth = 2,
+    maxAutoExpandArrayItems = 10,
+    maxAutoExpandObjectKeys = 5,
+    maxStringLength = 200,
+    collectionLimit = 50,
+    showCollectionInfo = true,
+    showExpandControls = true,
+    showActionButtons = true,
+    className = "",
+    preserveKeyOrder = true
+  } = config;
+  const jsonTreeTheme = {
+    scheme: "djangocfg-dark",
+    base00: "transparent",
+    // Background
+    base01: "#1a1a1a",
+    // Lighter background
+    base02: "#2a2a2a",
+    // Selection background
+    base03: "#6b7280",
+    // Comments, invisibles
+    base04: "#9ca3af",
+    // Dark foreground
+    base05: "#e5e7eb",
+    // Default foreground
+    base06: "#f3f4f6",
+    // Light foreground
+    base07: "#ffffff",
+    // Lightest foreground
+    base08: "#ef4444",
+    // Red - for null, undefined
+    base09: "#f97316",
+    // Orange - for numbers
+    base0A: "#eab308",
+    // Yellow - for strings
+    base0B: "#22c55e",
+    // Green - for booleans (true)
+    base0C: "#06b6d4",
+    // Cyan - for dates, regex
+    base0D: "#3b82f6",
+    // Blue - for keys
+    base0E: "#a855f7",
+    // Purple - for functions
+    base0F: "#f43f5e"
+    // Pink - for deprecations
+  };
+  const shouldExpandNodeInitially = /* @__PURE__ */ __name((keyPath, nodeData, level) => {
+    if (expandAll === true) return true;
+    if (expandAll === false) return false;
+    if (level <= maxAutoExpandDepth) return true;
+    if (Array.isArray(nodeData) && nodeData.length <= maxAutoExpandArrayItems) return true;
+    if (nodeData && typeof nodeData === "object" && !Array.isArray(nodeData)) {
+      const keys = Object.keys(nodeData);
+      return keys.length <= maxAutoExpandObjectKeys;
+    }
+    return false;
+  }, "shouldExpandNodeInitially");
+  const getItemString = showCollectionInfo ? (nodeType, nodeData) => {
+    if (nodeType === "Array") {
+      const length = Array.isArray(nodeData) ? nodeData.length : 0;
+      return length > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
+        "(",
+        length,
+        " items)"
+      ] }) : null;
+    }
+    if (nodeType === "Object") {
+      const keys = nodeData && typeof nodeData === "object" ? Object.keys(nodeData) : [];
+      return keys.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [
+        "(",
+        keys.length,
+        " keys)"
+      ] }) : null;
+    }
+    return null;
+  } : () => null;
+  const postprocessValue = /* @__PURE__ */ __name((value) => {
+    if (typeof value === "string" && value.length > maxStringLength) {
+      return value.substring(0, maxStringLength) + "... (truncated)";
+    }
+    return value;
+  }, "postprocessValue");
+  const isCustomNode = /* @__PURE__ */ __name((value) => {
+    if (typeof value === "string" && (value.startsWith("http://") || value.startsWith("https://"))) {
+      return true;
+    }
+    return false;
+  }, "isCustomNode");
+  const jsonString = JSON.stringify(data, null, 2);
+  const handleDownload = /* @__PURE__ */ __name(() => {
+    const blob = new Blob([jsonString], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "data.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }, "handleDownload");
+  return /* @__PURE__ */ jsxs("div", { className: `relative border border-border rounded-sm h-full overflow-hidden ${className}`, children: [
+    (title || showExpandControls || showActionButtons) && /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-border bg-muted/50 rounded-t-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      title && /* @__PURE__ */ jsx("h6", { className: "text-lg font-semibold text-foreground", children: title }),
+      (showExpandControls || showActionButtons) && /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+        showExpandControls && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: expandAll === true ? "default" : "outline",
+            size: "sm",
+            onClick: () => {
+              const newState = expandAll === true ? false : true;
+              setExpandAll(newState);
+              setRenderKey((prev) => prev + 1);
+            },
+            className: "h-8 px-2",
+            children: expandAll === true ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ChevronUp, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs", children: "Collapse All" })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs", children: "Expand All" })
+            ] })
+          }
+        ),
+        showActionButtons && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              value: jsonString,
+              variant: "outline",
+              size: "sm",
+              className: "h-8 px-2",
+              iconClassName: "h-3 w-3",
+              children: "Copy"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleDownload,
+              className: "h-8 px-2",
+              children: [
+                /* @__PURE__ */ jsx(Download, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs hidden sm:inline", children: "Download" })
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "h-full overflow-auto p-4", children: /* @__PURE__ */ jsx(
+      JSONTree,
+      {
+        data,
+        theme: jsonTreeTheme,
+        invertTheme: false,
+        hideRoot: true,
+        shouldExpandNodeInitially,
+        getItemString,
+        postprocessValue,
+        isCustomNode,
+        collectionLimit,
+        sortObjectKeys: !preserveKeyOrder,
+        ...jsonTreeProps
+      },
+      renderKey
+    ) })
+  ] });
+}, "JsonTreeComponent");
+var JsonTree_default = JsonTreeComponent;
+var PrettyCodeClient = lazy(() => import('./PrettyCode.client-LCBPPTIX.mjs'));
+var LoadingFallback = /* @__PURE__ */ __name(() => /* @__PURE__ */ jsx("div", { className: "relative rounded-sm border border-border overflow-hidden bg-muted dark:bg-zinc-900", children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ jsx("div", { className: "animate-pulse h-4 w-4 rounded-full bg-muted-foreground/20" }),
+  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Loading code..." })
+] }) }) }), "LoadingFallback");
+var PrettyCode = /* @__PURE__ */ __name((props) => {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingFallback, {}), children: /* @__PURE__ */ jsx(PrettyCodeClient, { ...props }) });
+}, "PrettyCode");
+var PrettyCode_default = PrettyCode;
+
+// src/tools/OpenapiViewer/utils/apiKeyManager.ts
+function findApiKeyById(apiKeys, keyId) {
+  return apiKeys.find((key) => key.id === keyId) || null;
+}
+__name(findApiKeyById, "findApiKeyById");
+
+// src/tools/OpenapiViewer/utils/versionManager.ts
+var API_VERSIONS = [
+  {
+    id: "v1",
+    name: "v1",
+    description: "Current stable version",
+    isDefault: true
+  }
+];
+var detectEndpointVersion = /* @__PURE__ */ __name((path) => {
+  const versionMatch = path.match(/\/api\/[^/]+\/(v\d+)\//);
+  if (versionMatch && versionMatch[1]) {
+    return versionMatch[1];
+  }
+  return "v1";
+}, "detectEndpointVersion");
+var isEndpointInVersion = /* @__PURE__ */ __name((endpoint, version) => {
+  const endpointVersion = detectEndpointVersion(endpoint.path);
+  return endpointVersion === version;
+}, "isEndpointInVersion");
+var filterEndpointsByVersion = /* @__PURE__ */ __name((endpoints, version) => {
+  return endpoints.filter((endpoint) => isEndpointInVersion(endpoint, version));
+}, "filterEndpointsByVersion");
+var deduplicateEndpoints = /* @__PURE__ */ __name((endpoints, preferredVersion) => {
+  const endpointMap = /* @__PURE__ */ new Map();
+  const groupedEndpoints = /* @__PURE__ */ new Map();
+  endpoints.forEach((endpoint) => {
+    const normalizedPath = normalizeEndpointPath(endpoint.path);
+    if (!groupedEndpoints.has(normalizedPath)) {
+      groupedEndpoints.set(normalizedPath, []);
+    }
+    groupedEndpoints.get(normalizedPath).push(endpoint);
+  });
+  groupedEndpoints.forEach((endpointGroup, normalizedPath) => {
+    let selectedEndpoint = null;
+    const versionEndpoint = endpointGroup.find((ep) => isEndpointInVersion(ep, preferredVersion));
+    if (versionEndpoint) {
+      selectedEndpoint = versionEndpoint;
+    } else if (endpointGroup.length > 0) {
+      selectedEndpoint = endpointGroup[0] || null;
+    }
+    if (selectedEndpoint) {
+      endpointMap.set(normalizedPath, selectedEndpoint);
+    }
+  });
+  return Array.from(endpointMap.values());
+}, "deduplicateEndpoints");
+var normalizeEndpointPath = /* @__PURE__ */ __name((path) => {
+  return path.replace(/\/v\d+\//, "/");
+}, "normalizeEndpointPath");
+var getVersionById = /* @__PURE__ */ __name((versionId) => {
+  return API_VERSIONS.find((v) => v.id === versionId);
+}, "getVersionById");
+var getDefaultVersion = /* @__PURE__ */ __name(() => {
+  const defaultVersion = API_VERSIONS.find((v) => v.isDefault);
+  if (defaultVersion) {
+    return defaultVersion;
+  }
+  if (API_VERSIONS.length > 0 && API_VERSIONS[0]) {
+    return API_VERSIONS[0];
+  }
+  throw new Error("No API versions defined");
+}, "getDefaultVersion");
+var getVersionStats = /* @__PURE__ */ __name((endpoints) => {
+  const stats = {};
+  API_VERSIONS.forEach((version) => {
+    stats[version.id] = filterEndpointsByVersion(endpoints, version.id).length;
+  });
+  return stats;
+}, "getVersionStats");
+
+// src/tools/OpenapiViewer/constants.ts
+var HTTP_METHOD_COLORS = {
+  GET: "success",
+  POST: "primary",
+  PUT: "warning",
+  DELETE: "error",
+  PATCH: "default"
+};
+var HTTP_STATUS_COLORS = {
+  "2": "success",
+  "3": "default",
+  "4": "warning",
+  "5": "error"
+};
+
+// src/tools/OpenapiViewer/utils/formatters.ts
+var getMethodColor = /* @__PURE__ */ __name((method) => {
+  return HTTP_METHOD_COLORS[method.toUpperCase()] || "default";
+}, "getMethodColor");
+var getStatusColor = /* @__PURE__ */ __name((status) => {
+  const firstDigit = Math.floor(status / 100).toString();
+  return HTTP_STATUS_COLORS[firstDigit] || "default";
+}, "getStatusColor");
+var isValidJson = /* @__PURE__ */ __name((str) => {
+  if (!str || typeof str !== "string") return false;
+  try {
+    JSON.parse(str);
+    return true;
+  } catch {
+    return false;
+  }
+}, "isValidJson");
+var parseRequestHeaders = /* @__PURE__ */ __name((headersString) => {
+  if (!headersString || typeof headersString !== "string") {
+    return { "Content-Type": "application/json" };
+  }
+  try {
+    const parsed = JSON.parse(headersString);
+    return typeof parsed === "object" && parsed !== null ? parsed : { "Content-Type": "application/json" };
+  } catch {
+    return { "Content-Type": "application/json" };
+  }
+}, "parseRequestHeaders");
+var substituteUrlParameters = /* @__PURE__ */ __name((url, parameters) => {
+  let substitutedUrl = url;
+  Object.entries(parameters).forEach(([key, value]) => {
+    if (value && value.trim() !== "") {
+      const patterns = [
+        new RegExp(`\\{${key}\\}`, "g"),
+        new RegExp(`%7B${key}%7D`, "gi")
+      ];
+      patterns.forEach((pattern) => {
+        substitutedUrl = substitutedUrl.replace(pattern, encodeURIComponent(value));
+      });
+    }
+  });
+  return substitutedUrl;
+}, "substituteUrlParameters");
+var createInitialState = /* @__PURE__ */ __name(() => ({
+  // Step management
+  currentStep: "endpoints",
+  steps: ["endpoints", "request", "response"],
+  // Endpoint selection
+  selectedEndpoint: null,
+  selectedCategory: "All",
+  searchTerm: "",
+  selectedVersion: getDefaultVersion().id,
+  // Request configuration
+  requestUrl: "",
+  requestMethod: "GET",
+  requestHeaders: '{\n  "Content-Type": "application/json"\n}',
+  requestBody: "",
+  selectedApiKey: null,
+  manualApiToken: "",
+  parameters: {},
+  // Response
+  response: null,
+  loading: false,
+  // UI state
+  sidebarOpen: false
+}), "createInitialState");
+var PlaygroundContext = createContext(void 0);
+var usePlaygroundContext = /* @__PURE__ */ __name(() => {
+  const context = useContext(PlaygroundContext);
+  if (!context) {
+    throw new Error("usePlaygroundContext must be used within a PlaygroundProvider");
+  }
+  return context;
+}, "usePlaygroundContext");
+var PlaygroundProvider = /* @__PURE__ */ __name(({ children, config }) => {
+  const [state, setState] = useState(() => createInitialState());
+  const apiKeys = React3.useMemo(() => [], []);
+  const isLoadingApiKeys = false;
+  const updateState = /* @__PURE__ */ __name((updates) => {
+    setState((prev) => ({ ...prev, ...updates }));
+  }, "updateState");
+  useEffect(() => {
+    if (apiKeys.length > 0 && !state.selectedApiKey) {
+      updateState({ selectedApiKey: apiKeys[0]?.id || null });
+    }
+  }, [apiKeys, isLoadingApiKeys, state.selectedApiKey]);
+  useEffect(() => {
+    try {
+      setState((prev) => {
+        const headers = parseRequestHeaders(prev.requestHeaders);
+        let hasChanged = false;
+        if (prev.selectedApiKey) {
+          const apiKey = apiKeys.find((k) => k.id === prev.selectedApiKey);
+          if (apiKey) {
+            if (headers["X-API-Key"] !== apiKey.id) {
+              headers["X-API-Key"] = apiKey.id;
+              hasChanged = true;
+            }
+          } else {
+            return { ...prev, selectedApiKey: null };
+          }
+        } else {
+          if (headers["X-API-Key"]) {
+            delete headers["X-API-Key"];
+            hasChanged = true;
+          }
+        }
+        if (hasChanged) {
+          const updatedHeaders = JSON.stringify(headers, null, 2);
+          return { ...prev, requestHeaders: updatedHeaders };
+        }
+        return prev;
+      });
+    } catch (error) {
+      consola.error("Error updating headers:", error);
+    }
+  }, [state.selectedApiKey, apiKeys]);
+  useEffect(() => {
+    if (state.selectedEndpoint && state.parameters) {
+      const updatedUrl = substituteUrlParameters(state.selectedEndpoint.path, state.parameters);
+      if (updatedUrl !== state.requestUrl) {
+        updateState({ requestUrl: updatedUrl });
+      }
+    }
+  }, [state.parameters, state.selectedEndpoint, state.requestUrl]);
+  const setCurrentStep = /* @__PURE__ */ __name((step) => {
+    updateState({ currentStep: step });
+  }, "setCurrentStep");
+  const goToNextStep = /* @__PURE__ */ __name(() => {
+    const currentIndex = state.steps.indexOf(state.currentStep);
+    if (currentIndex < state.steps.length - 1) {
+      updateState({ currentStep: state.steps[currentIndex + 1] });
+    }
+  }, "goToNextStep");
+  const goToPreviousStep = /* @__PURE__ */ __name(() => {
+    const currentIndex = state.steps.indexOf(state.currentStep);
+    if (currentIndex > 0) {
+      updateState({ currentStep: state.steps[currentIndex - 1] });
+    }
+  }, "goToPreviousStep");
+  const setSelectedEndpoint = /* @__PURE__ */ __name((endpoint) => {
+    if (endpoint) {
+      updateState({
+        selectedEndpoint: endpoint,
+        requestMethod: "GET",
+        requestUrl: endpoint.path,
+        parameters: {},
+        // Reset parameters when endpoint changes
+        currentStep: "request"
+      });
+    } else {
+      updateState({ selectedEndpoint: endpoint });
+    }
+  }, "setSelectedEndpoint");
+  const setSelectedCategory = /* @__PURE__ */ __name((category) => {
+    updateState({ selectedCategory: category });
+  }, "setSelectedCategory");
+  const setSearchTerm = /* @__PURE__ */ __name((term) => {
+    updateState({ searchTerm: term });
+  }, "setSearchTerm");
+  const setSelectedVersion = /* @__PURE__ */ __name((version) => {
+    updateState({ selectedVersion: version });
+  }, "setSelectedVersion");
+  const setRequestUrl = /* @__PURE__ */ __name((url) => {
+    updateState({ requestUrl: url });
+  }, "setRequestUrl");
+  const setRequestMethod = /* @__PURE__ */ __name((method) => {
+    updateState({ requestMethod: method });
+  }, "setRequestMethod");
+  const setRequestHeaders = /* @__PURE__ */ __name((headers) => {
+    updateState({ requestHeaders: headers });
+  }, "setRequestHeaders");
+  const setRequestBody = /* @__PURE__ */ __name((body) => {
+    updateState({ requestBody: body });
+  }, "setRequestBody");
+  const setSelectedApiKey = /* @__PURE__ */ __name((apiKeyId) => {
+    updateState({ selectedApiKey: apiKeyId });
+  }, "setSelectedApiKey");
+  const setManualApiToken = /* @__PURE__ */ __name((manualApiToken) => {
+    updateState({ manualApiToken });
+  }, "setManualApiToken");
+  const setParameters = /* @__PURE__ */ __name((parameters) => {
+    updateState({ parameters });
+  }, "setParameters");
+  const setResponse = /* @__PURE__ */ __name((response) => {
+    updateState({ response });
+  }, "setResponse");
+  const setLoading = /* @__PURE__ */ __name((loading) => {
+    updateState({ loading });
+  }, "setLoading");
+  const setSidebarOpen = /* @__PURE__ */ __name((sidebarOpen) => {
+    updateState({ sidebarOpen });
+  }, "setSidebarOpen");
+  const clearAll = useCallback(() => {
+    setState(createInitialState());
+  }, []);
+  const sendRequest = useCallback(async () => {
+    if (!state.requestUrl) {
+      consola.error("No URL provided");
+      return;
+    }
+    setLoading(true);
+    setResponse(null);
+    try {
+      const headers = parseRequestHeaders(state.requestHeaders);
+      let bearerToken = null;
+      if (state.manualApiToken) {
+        bearerToken = state.manualApiToken;
+      } else {
+        if (typeof window !== "undefined") {
+          bearerToken = window.localStorage.getItem("auth_token");
+        }
+      }
+      if (bearerToken) {
+        headers["Authorization"] = `Bearer ${bearerToken}`;
+      }
+      const requestOptions = {
+        method: state.requestMethod,
+        headers
+      };
+      if (state.requestBody && state.requestMethod !== "GET") {
+        requestOptions.body = state.requestBody;
+      }
+      const response = await fetch(state.requestUrl, requestOptions);
+      const responseText = await response.text();
+      let responseData;
+      try {
+        responseData = JSON.parse(responseText);
+      } catch {
+        responseData = responseText;
+      }
+      setResponse({
+        status: response.status,
+        statusText: response.statusText,
+        headers: Object.fromEntries(response.headers.entries()),
+        data: responseData
+      });
+      consola.success(`Request successful: ${state.requestMethod} ${state.requestUrl}`);
+      updateState({ currentStep: "response" });
+    } catch (error) {
+      consola.error("Request failed:", error);
+      setResponse({
+        error: error instanceof Error ? error.message : "Request failed"
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [state, setLoading, setResponse]);
+  const contextValue = {
+    // State
+    state,
+    config,
+    apiKeys,
+    apiKeysLoading: isLoadingApiKeys,
+    // Step management
+    setCurrentStep,
+    goToNextStep,
+    goToPreviousStep,
+    // Endpoint management
+    setSelectedEndpoint,
+    setSelectedCategory,
+    setSearchTerm,
+    setSelectedVersion,
+    // Request management
+    setRequestUrl,
+    setRequestMethod,
+    setRequestHeaders,
+    setRequestBody,
+    setSelectedApiKey,
+    setManualApiToken,
+    setParameters,
+    // Response management
+    setResponse,
+    setLoading,
+    // UI management
+    setSidebarOpen,
+    // Actions
+    clearAll,
+    sendRequest
+  };
+  return /* @__PURE__ */ jsx(PlaygroundContext.Provider, { value: contextValue, children });
+}, "PlaygroundProvider");
+
+export { API_VERSIONS, JsonTree_default, PlaygroundProvider, PrettyCode_default, deduplicateEndpoints, findApiKeyById, getMethodColor, getStatusColor, getVersionById, getVersionStats, isValidJson, parseRequestHeaders, usePlaygroundContext };
+//# sourceMappingURL=chunk-M6P2FU7L.mjs.map
+//# sourceMappingURL=chunk-M6P2FU7L.mjs.map