@djangocfg/ui-nextjs 1.4.45

package/src/tools/OpenapiViewer/context/PlaygroundContext.tsx

@@ -0,0 +1,338 @@
+'use client';
+
+import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';
+import consola from 'consola';
+import { type ApiEndpoint, type ApiResponse, type PlaygroundContextType, type PlaygroundState, type PlaygroundStep, type PlaygroundConfig } from '../types';
+import { getDefaultVersion } from '../utils/versionManager';
+import { parseRequestHeaders, substituteUrlParameters } from '../utils';
+import { useCopy } from '@djangocfg/ui-core/hooks';
+
+const createInitialState = (): PlaygroundState => ({
+  // 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,
+});
+
+const PlaygroundContext = createContext<PlaygroundContextType | undefined>(undefined);
+
+export const usePlaygroundContext = () => {
+  const context = useContext(PlaygroundContext);
+  if (!context) {
+    throw new Error('usePlaygroundContext must be used within a PlaygroundProvider');
+  }
+  return context;
+};
+
+interface PlaygroundProviderProps {
+  children: ReactNode;
+  config: PlaygroundConfig;
+}
+
+export const PlaygroundProvider: React.FC<PlaygroundProviderProps> = ({ children, config }) => {
+  const [state, setState] = useState<PlaygroundState>(() => createInitialState());
+
+  // TODO: Get API keys from CFG context - temporarily disabled
+  // const { apiKeys: apiKeysResponse, isLoadingApiKeys } = useApiKeysContext();
+  // const apiKeys = (apiKeysResponse && apiKeysResponse.results) ? apiKeysResponse.results : [];
+  const apiKeys = React.useMemo(() => [], []);
+  const isLoadingApiKeys = false;
+
+  const { copyToClipboard } = useCopy({
+    successMessage: "cURL command copied to clipboard",
+    errorMessage: "Failed to copy cURL command"
+  });
+
+  const updateState = (updates: Partial<PlaygroundState>) => {
+    setState((prev) => ({ ...prev, ...updates }));
+  };
+
+  // Auto-select first API key when available
+  useEffect(() => {
+    if (!isLoadingApiKeys && apiKeys.length > 0 && !state.selectedApiKey) {
+      updateState({ selectedApiKey: apiKeys[0]?.id || null });
+    }
+  }, [apiKeys, isLoadingApiKeys, state.selectedApiKey]);
+
+  // Update headers when API key changes
+  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) {
+            // Add API key to headers only if it changed
+            if (headers['X-API-Key'] !== apiKey.id) {
+              headers['X-API-Key'] = apiKey.id;
+              hasChanged = true;
+            }
+          } else {
+            // Selected API key no longer exists, clear selection
+            return { ...prev, selectedApiKey: null };
+          }
+        } else {
+          // Remove API key from headers if no key is selected
+          if (headers['X-API-Key']) {
+            delete headers['X-API-Key'];
+            hasChanged = true;
+          }
+        }
+
+        // Only update if headers actually changed
+        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]); // Removed state.requestHeaders dependency
+
+  // Update URL when parameters change
+  useEffect(() => {
+    if (state.selectedEndpoint && state.parameters) {
+      // Path is already a full URL from the endpoint
+      const updatedUrl = substituteUrlParameters(state.selectedEndpoint.path, state.parameters);
+
+      // Only update if URL actually changed to avoid infinite loop
+      if (updatedUrl !== state.requestUrl) {
+        updateState({ requestUrl: updatedUrl });
+      }
+    }
+  }, [state.parameters, state.selectedEndpoint, state.requestUrl]);
+
+  // Step management
+  const setCurrentStep = (step: PlaygroundStep) => {
+    updateState({ currentStep: step });
+  };
+
+  const goToNextStep = () => {
+    const currentIndex = state.steps.indexOf(state.currentStep);
+    if (currentIndex < state.steps.length - 1) {
+      updateState({ currentStep: state.steps[currentIndex + 1] });
+    }
+  };
+
+  const goToPreviousStep = () => {
+    const currentIndex = state.steps.indexOf(state.currentStep);
+    if (currentIndex > 0) {
+      updateState({ currentStep: state.steps[currentIndex - 1] });
+    }
+  };
+
+  // Endpoint management
+  const setSelectedEndpoint = (endpoint: ApiEndpoint | null) => {
+    if (endpoint) {
+      // All endpoints are GET only
+      // Path is already a full URL from the endpoint
+      updateState({
+        selectedEndpoint: endpoint,
+        requestMethod: 'GET',
+        requestUrl: endpoint.path,
+        parameters: {}, // Reset parameters when endpoint changes
+        currentStep: 'request'
+      });
+    } else {
+      updateState({ selectedEndpoint: endpoint });
+    }
+  };
+
+  const setSelectedCategory = (category: string) => {
+    updateState({ selectedCategory: category });
+  };
+
+  const setSearchTerm = (term: string) => {
+    updateState({ searchTerm: term });
+  };
+
+  const setSelectedVersion = (version: string) => {
+    updateState({ selectedVersion: version });
+  };
+
+  // Request management
+  const setRequestUrl = (url: string) => {
+    updateState({ requestUrl: url });
+  };
+
+  const setRequestMethod = (method: string) => {
+    updateState({ requestMethod: method });
+  };
+
+  const setRequestHeaders = (headers: string) => {
+    updateState({ requestHeaders: headers });
+  };
+
+  const setRequestBody = (body: string) => {
+    updateState({ requestBody: body });
+  };
+
+  const setSelectedApiKey = (apiKeyId: string | null) => {
+    updateState({ selectedApiKey: apiKeyId });
+  };
+
+  const setManualApiToken = (manualApiToken: string) => {
+    updateState({ manualApiToken });
+  };
+
+  const setParameters = (parameters: Record<string, string>) => {
+    updateState({ parameters });
+  };
+
+  // Response management
+  const setResponse = (response: ApiResponse | null) => {
+    updateState({ response });
+  };
+
+  const setLoading = (loading: boolean) => {
+    updateState({ loading });
+  };
+
+  // UI management
+  const setSidebarOpen = (sidebarOpen: boolean) => {
+    updateState({ sidebarOpen });
+  };
+
+  // Actions
+  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);
+
+      // Bearer token priority: manual token → JWT token from localStorage
+      let bearerToken: string | null = null;
+
+      if (state.manualApiToken) {
+        // Use manual token if provided
+        bearerToken = state.manualApiToken;
+      } else {
+        // Try to get JWT token from localStorage
+        if (typeof window !== 'undefined') {
+          bearerToken = window.localStorage.getItem('auth_token');
+        }
+      }
+
+      if (bearerToken) {
+        headers['Authorization'] = `Bearer ${bearerToken}`;
+      }
+
+      const requestOptions: RequestInit = {
+        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}`);
+
+      // Auto-advance to response step
+      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: PlaygroundContextType = {
+    // 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,
+    copyToClipboard,
+    sendRequest,
+  };
+
+  return <PlaygroundContext.Provider value={contextValue}>{children}</PlaygroundContext.Provider>;
+}; 

package/src/tools/OpenapiViewer/hooks/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Playground Hooks
+ *
+ * Centralized exports for all playground hooks
+ */
+
+export { default as useOpenApiSchema } from './useOpenApiSchema';
+export { useMobile } from './useMobile'; 

package/src/tools/OpenapiViewer/hooks/useMobile.ts

@@ -0,0 +1,10 @@
+import { useIsMobile } from '@djangocfg/ui-core/hooks';
+
+export const useMobile = () => {
+  const isMobile = useIsMobile();
+
+  return {
+    isMobile,
+    isDesktop: !isMobile,
+  };
+}; 

package/src/tools/OpenapiViewer/hooks/useOpenApiSchema.ts

@@ -0,0 +1,203 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import consola from 'consola';
+import {
+  ApiEndpoint,
+  OpenApiSchema,
+  SchemaSource,
+  UseOpenApiSchemaReturn,
+} from '../types';
+
+// Extract endpoints from OpenAPI schema (GET only)
+const extractEndpoints = (schema: OpenApiSchema): ApiEndpoint[] => {
+  const endpointMap = new Map<string, ApiEndpoint>();
+
+  if (!schema.paths) return [];
+
+  // Get base URL from servers
+  const baseUrl = schema.servers && schema.servers.length > 0 ? schema.servers[0].url : '';
+
+  for (const [path, methods] of Object.entries(schema.paths)) {
+    // Only process GET methods
+    const getOperation = (methods as any).get;
+    if (!getOperation) continue;
+
+    const op = getOperation as any;
+    const description = op.description || op.summary || `GET ${path}`;
+    const category = op.tags?.[0] || 'Other';
+
+    const parameters: Array<{
+      name: string;
+      type: string;
+      required: boolean;
+      description?: string;
+    }> = [];
+
+    // Collect parameters
+    if (op.parameters) {
+      for (const param of op.parameters) {
+        parameters.push({
+          name: param.name,
+          type: param.schema?.type || 'string',
+          required: param.required || false,
+          description: param.description,
+        });
+      }
+    }
+
+    // Collect responses
+    const responses: Array<{
+      code: string;
+      description: string;
+    }> = [];
+
+    if (op.responses) {
+      for (const [code, response] of Object.entries(op.responses)) {
+        responses.push({
+          code,
+          description: (response as any).description || `Response ${code}`,
+        });
+      }
+    }
+
+    // Create endpoint (GET only) with full URL
+    const endpoint: ApiEndpoint = {
+      name: path.split('/').pop() || path,
+      method: 'GET',
+      path: baseUrl + path, // Combine baseUrl with path
+      description,
+      category,
+      parameters: parameters.length > 0 ? parameters : undefined,
+      requestBody: undefined, // GET requests don't have request body
+      responses: responses.length > 0 ? responses : undefined,
+    };
+
+    endpointMap.set(path, endpoint);
+  }
+
+  return Array.from(endpointMap.values());
+};
+
+// Get unique categories from endpoints
+const getCategories = (endpoints: ApiEndpoint[]): string[] => {
+  const categories = new Set<string>();
+  endpoints.forEach((endpoint) => categories.add(endpoint.category));
+  return Array.from(categories).sort();
+};
+
+// Fetch schema from URL
+const fetchSchema = async (url: string): Promise<OpenApiSchema> => {
+  const response = await fetch(url, {
+    headers: {
+      'Accept': 'application/json',
+    },
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch schema: ${response.statusText}`);
+  }
+  return response.json();
+};
+
+interface UseOpenApiSchemaProps {
+  schemas: SchemaSource[];
+  defaultSchemaId?: string;
+}
+
+export default function useOpenApiSchema({
+  schemas,
+  defaultSchemaId,
+}: UseOpenApiSchemaProps): UseOpenApiSchemaReturn {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [currentSchemaId, setCurrentSchemaId] = useState<string>(
+    defaultSchemaId || schemas[0]?.id
+  );
+  const [loadedSchemas, setLoadedSchemas] = useState<Map<string, OpenApiSchema>>(
+    new Map()
+  );
+
+  const currentSchema = useMemo(
+    () => schemas.find((s) => s.id === currentSchemaId) || null,
+    [schemas, currentSchemaId]
+  );
+
+  const currentOpenApiSchema = useMemo(
+    () => (currentSchemaId ? loadedSchemas.get(currentSchemaId) : null),
+    [loadedSchemas, currentSchemaId]
+  );
+
+  const endpoints = useMemo(
+    () => (currentOpenApiSchema ? extractEndpoints(currentOpenApiSchema) : []),
+    [currentOpenApiSchema]
+  );
+
+  const categories = useMemo(() => getCategories(endpoints), [endpoints]);
+
+  // Load schema when current schema changes
+  useEffect(() => {
+    if (!currentSchema) return;
+
+    // Skip if already loaded
+    if (loadedSchemas.has(currentSchema.id)) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    fetchSchema(currentSchema.url)
+      .then((schema) => {
+        setLoadedSchemas((prev) => new Map(prev).set(currentSchema.id, schema));
+        consola.success(`Schema loaded: ${currentSchema.name}`);
+        setLoading(false);
+      })
+      .catch((err) => {
+        consola.error(`Error loading schema from ${currentSchema.url}:`, err);
+        setError(err instanceof Error ? err.message : 'Failed to load schema');
+        setLoading(false);
+      });
+  }, [currentSchema, loadedSchemas]);
+
+  const setCurrentSchema = useCallback((schemaId: string) => {
+    setCurrentSchemaId(schemaId);
+  }, []);
+
+  const refresh = useCallback(() => {
+    if (!currentSchema) return;
+
+    setLoading(true);
+    setError(null);
+
+    // Remove from cache to force reload
+    setLoadedSchemas((prev) => {
+      const next = new Map(prev);
+      next.delete(currentSchema.id);
+      return next;
+    });
+
+    fetchSchema(currentSchema.url)
+      .then((schema) => {
+        setLoadedSchemas((prev) => new Map(prev).set(currentSchema.id, schema));
+        consola.success(`Schema refreshed: ${currentSchema.name}`);
+        setLoading(false);
+      })
+      .catch((err) => {
+        consola.error(`Error refreshing schema from ${currentSchema.url}:`, err);
+        setError(err instanceof Error ? err.message : 'Failed to refresh schema');
+        setLoading(false);
+      });
+  }, [currentSchema]);
+
+  return {
+    loading,
+    error,
+    endpoints,
+    categories,
+    schemas,
+    currentSchema,
+    setCurrentSchema,
+    refresh,
+  };
+}

package/src/tools/OpenapiViewer/index.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import dynamic from 'next/dynamic';
+import { PlaygroundProvider } from './context/PlaygroundContext';
+import type { PlaygroundConfig } from './types';
+
+const PlaygroundLayout = dynamic(
+  () => import('./components/PlaygroundLayout').then((mod) => ({ default: mod.PlaygroundLayout })),
+  {
+    ssr: false,
+    loading: () => (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="text-muted-foreground">Loading API Playground...</div>
+      </div>
+    ),
+  }
+);
+
+export interface PlaygroundProps {
+  config: PlaygroundConfig;
+}
+
+export const Playground: React.FC<PlaygroundProps> = ({ config }) => {
+  return (
+    <PlaygroundProvider config={config}>
+      <PlaygroundLayout />
+    </PlaygroundProvider>
+  );
+};
+
+// Re-export types for convenience
+export type { PlaygroundConfig, SchemaSource } from './types';
+
+// Default export for dynamic import
+export default Playground;