@djangocfg/ui-nextjs 2.1.89 → 2.1.91

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

@@ -1,337 +0,0 @@
-'use client';
-
-import consola from 'consola';
-import React, {
-    createContext, ReactNode, useCallback, useContext, useEffect, useState
-} from 'react';
-
-import type {
-    ApiEndpoint, ApiResponse, PlaygroundConfig, PlaygroundContextType, PlaygroundState,
-    PlaygroundStep
-} from '../types';
-import { parseRequestHeaders, substituteUrlParameters } from '../utils';
-import { getDefaultVersion } from '../utils/versionManager';
-
-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 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,
-    sendRequest,
-  };
-
-  return <PlaygroundContext.Provider value={contextValue}>{children}</PlaygroundContext.Provider>;
-}; 

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

@@ -1,8 +0,0 @@
-/**
- * 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

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

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

@@ -1,199 +0,0 @@
-'use client';
-
-import consola from 'consola';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-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

@@ -1,38 +0,0 @@
-'use client';
-
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-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;