@eventcatalog/core 2.63.0 → 2.64.0

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -1,705 +0,0 @@
----
-// src/components/SchemaViewer.astro
-import SchemaProperty from './SchemaProperty.astro';
-
-interface Props {
-  schema: Record<string, any>;
-  schemaPath: string;
-  title: string;
-  maxHeight: string;
-  file: string;
-  id: string;
-  expand?: boolean | string;
-  search?: boolean | string;
-}
-
-const { id, file, title, maxHeight, schema, expand = false, search = true } = Astro.props;
-
-// Convert string props to booleans (MDX passes strings)
-const expandBool = expand === true || expand === 'true';
-const searchBool = search !== false && search !== 'false';
-
-// This will be used to pass expand state via data attribute
-const expandData = expandBool ? 'true' : 'false';
-const searchData = searchBool ? 'true' : 'false';
-
-// Count total properties recursively
-function countProperties(obj: any): number {
-  if (!obj || typeof obj !== 'object') return 0;
-
-  let count = 0;
-  if (obj.properties) {
-    count += Object.keys(obj.properties).length;
-    Object.values(obj.properties).forEach((prop: any) => {
-      count += countProperties(prop);
-    });
-  }
-  if (obj.items) {
-    count += countProperties(obj.items);
-  }
-  // Handle root array items that have been processed
-  if (obj._isRootArrayItem && obj._rootArraySchema?.items) {
-    // Don't double count, we're already counting the properties above
-  }
-  return count;
-}
-
-// Function to merge allOf schemas
-function mergeAllOfSchemas(schemaWithProcessor: any): any {
-  const { processSchema: processor, ...schema } = schemaWithProcessor;
-  if (!schema.allOf) return schema;
-
-  const mergedSchema: {
-    type: string;
-    properties: Record<string, any>;
-    required: string[];
-    description?: string;
-    [key: string]: any;
-  } = {
-    type: schema.type || 'object',
-    properties: {},
-    required: [],
-    description: schema.description,
-  };
-
-  // Copy base schema properties first (excluding allOf)
-  Object.keys(schema).forEach((key) => {
-    if (key !== 'allOf' && key !== 'properties' && key !== 'required' && key !== 'description') {
-      mergedSchema[key] = schema[key];
-    }
-  });
-
-  // Copy base properties if they exist
-  if (schema.properties) {
-    mergedSchema.properties = { ...schema.properties };
-  }
-  if (schema.required) {
-    mergedSchema.required = [...schema.required];
-  }
-
-  schema.allOf.forEach((subSchema: any) => {
-    // Recursively process each subSchema in case it has its own allOf, oneOf, or $ref
-    const processedSubSchema = processor ? processor(subSchema) : subSchema;
-
-    if (processedSubSchema.properties) {
-      mergedSchema.properties = {
-        ...mergedSchema.properties,
-        ...processedSubSchema.properties,
-      };
-    }
-    if (processedSubSchema.required) {
-      mergedSchema.required = [...new Set([...mergedSchema.required, ...processedSubSchema.required])];
-    }
-    if (processedSubSchema.description && !mergedSchema.description) {
-      mergedSchema.description = processedSubSchema.description;
-    }
-
-    // Copy other properties from subSchema
-    Object.keys(processedSubSchema).forEach((key) => {
-      if (key !== 'properties' && key !== 'required' && key !== 'description' && key !== 'type') {
-        if (!mergedSchema[key]) {
-          mergedSchema[key] = processedSubSchema[key];
-        }
-      }
-    });
-  });
-
-  return mergedSchema;
-}
-
-function processSchema(schema: any, rootSchema?: any): any {
-  if (!schema) return schema;
-
-  // Set rootSchema for $ref resolution
-  const root = rootSchema || schema;
-
-  // Handle $ref
-  if (schema.$ref) {
-    const refPath = schema.$ref;
-    let resolvedSchema = null;
-    let defName = '';
-
-    // Try draft-7 style first: #/definitions/
-    if (refPath.startsWith('#/definitions/')) {
-      defName = refPath.replace('#/definitions/', '');
-      if (root.definitions && root.definitions[defName]) {
-        resolvedSchema = root.definitions[defName];
-      }
-    }
-    // Try 2020-12 style: #/$defs/
-    else if (refPath.startsWith('#/$defs/')) {
-      defName = refPath.replace('#/$defs/', '');
-      if (root.$defs && root.$defs[defName]) {
-        resolvedSchema = root.$defs[defName];
-      }
-    }
-    // Try other common patterns
-    else if (refPath.startsWith('#/components/schemas/')) {
-      defName = refPath.replace('#/components/schemas/', '');
-      if (root.components && root.components.schemas && root.components.schemas[defName]) {
-        resolvedSchema = root.components.schemas[defName];
-      }
-    }
-
-    if (resolvedSchema) {
-      // Recursively process the referenced schema
-      const processedSchema = processSchema(resolvedSchema, root);
-      // Add reference info to the resolved schema
-      return {
-        ...processedSchema,
-        _refPath: refPath,
-        _refName: defName,
-        _originalRef: schema.$ref,
-      };
-    }
-
-    // If not found, create a placeholder schema showing the reference
-    return {
-      type: 'string',
-      description: `Reference to ${refPath} (definition not found in root schema)`,
-      title: defName || refPath.split('/').pop(),
-      _refPath: refPath,
-      _refName: defName,
-      _refNotFound: true,
-    };
-  }
-
-  if (schema.allOf) {
-    return mergeAllOfSchemas({ ...schema, processSchema: (s: any) => processSchema(s, root) });
-  }
-
-  if (schema.oneOf) {
-    // Process each oneOf variant and create a combined schema
-    const processedVariants = schema.oneOf.map((variant: any) => {
-      const processedVariant = processSchema(variant, root);
-      return {
-        title: processedVariant.title || variant.title || 'Unnamed Variant',
-        required: processedVariant.required || variant.required || [],
-        properties: processedVariant.properties || {},
-        ...processedVariant,
-      };
-    });
-
-    // Merge all properties from variants for display
-    const allProperties: Record<string, any> = {};
-    processedVariants.forEach((variant: any) => {
-      if (variant.properties) {
-        Object.assign(allProperties, variant.properties);
-      }
-    });
-
-    return {
-      ...schema,
-      type: schema.type || 'object',
-      properties: {
-        ...(schema.properties || {}),
-        ...allProperties,
-      },
-      variants: processedVariants,
-    };
-  }
-
-  // Process nested schemas in properties
-  if (schema.properties) {
-    const processedProperties: Record<string, any> = {};
-    Object.entries(schema.properties).forEach(([key, prop]: [string, any]) => {
-      processedProperties[key] = processSchema(prop, root);
-    });
-    schema = { ...schema, properties: processedProperties };
-  }
-
-  // Process array items
-  if (schema.type === 'array' && schema.items) {
-    schema = { ...schema, items: processSchema(schema.items, root) };
-  }
-
-  return schema;
-}
-
-const processedSchema = processSchema(schema);
-
-// Handle root-level array schemas
-let displaySchema = processedSchema;
-let isRootArray = false;
-
-if (processedSchema.type === 'array' && processedSchema.items) {
-  isRootArray = true;
-  // For root arrays, we want to display the items' properties
-  if (processedSchema.items.type === 'object' && processedSchema.items.properties) {
-    displaySchema = {
-      ...processedSchema.items,
-      description: processedSchema.description || processedSchema.items.description,
-      _isRootArrayItem: true,
-      _rootArraySchema: processedSchema,
-    };
-  } else if (processedSchema.items.allOf || processedSchema.items.oneOf || processedSchema.items.$ref) {
-    // Process complex array item schemas
-    displaySchema = {
-      ...processSchema(processedSchema.items),
-      description: processedSchema.description || processedSchema.items.description,
-      _isRootArrayItem: true,
-      _rootArraySchema: processedSchema,
-    };
-  }
-}
-
-const { description, properties, required = [], variants } = displaySchema;
-
-// Count total properties after processing
-const totalProperties = countProperties(displaySchema);
-
-// Generate a unique ID for this instance
-const instanceId = `${id}-${Math.random().toString(36).substring(2, 9)}`;
----
-
-<div id={id} class="not-prose my-4" data-expand={expandData} data-search={searchData}>
-  {title && <h2 class="text-3xl font-bold mb-2 !mt-0">{title}</h2>}
-  <div
-    class="schema-viewer p-4 pt-0 bg-white overflow-y-auto rounded-lg border border-gray-100 shadow-sm font-sans"
-    style={{
-      maxHeight: maxHeight ? `${maxHeight}px` : `30em`,
-      minHeight: '15em',
-    }}
-  >
-    {
-      searchBool && (
-        <div
-          class="schema-toolbar sticky top-0 z-10 bg-white pt-4 px-4 -mx-4 mb-4 pb-3 border-b border-gray-100 shadow-sm"
-          id={`${instanceId}-toolbar`}
-        >
-          <div class="flex flex-col sm:flex-row gap-3">
-            <div class="flex-1 relative">
-              <input
-                type="text"
-                id={`${instanceId}-search`}
-                placeholder="Search properties..."
-                class="w-full px-3 py-1.5 pr-20 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
-              <div
-                class="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1"
-                id={`${instanceId}-nav-buttons`}
-              >
-                <button
-                  id={`${instanceId}-prev-match`}
-                  class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
-                  disabled
-                  title="Previous match"
-                >
-                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-                  </svg>
-                </button>
-                <button
-                  id={`${instanceId}-next-match`}
-                  class="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30 disabled:cursor-not-allowed"
-                  disabled
-                  title="Next match"
-                >
-                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                  </svg>
-                </button>
-              </div>
-            </div>
-            <div class="flex items-center gap-2">
-              <button
-                id={`${instanceId}-expand-all`}
-                class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
-              >
-                Expand All
-              </button>
-              <button
-                id={`${instanceId}-collapse-all`}
-                class="px-3 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500"
-              >
-                Collapse All
-              </button>
-              <div class="text-xs text-gray-500">
-                {totalProperties} {totalProperties === 1 ? 'property' : 'properties'}
-              </div>
-            </div>
-          </div>
-          <div id={`${instanceId}-search-results`} class="mt-2 text-xs text-gray-600 hidden" />
-        </div>
-      )
-    }
-    {
-      isRootArray && (
-        <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-md">
-          <div class="flex items-center space-x-2">
-            <span class="text-blue-600 font-medium text-sm">Array Schema</span>
-            <span class="text-blue-500 font-mono text-xs">array[object]</span>
-          </div>
-          <p class="text-blue-700 text-xs mt-1">
-            This schema defines an array of objects. Each item in the array has the properties shown below.
-          </p>
-        </div>
-      )
-    }
-    {description && <p class="text-gray-600 text-xs mb-5">{description}</p>}
-
-    {
-      variants && (
-        <div class="mb-4">
-          <div class="flex items-center space-x-2">
-            <span class="text-sm text-gray-600">(one of)</span>
-            <select
-              id={`${instanceId}-variant-selector`}
-              class="form-select text-sm border-gray-300 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-            >
-              {variants.map((variant: any, index: number) => (
-                <option value={index}>{variant.title}</option>
-              ))}
-            </select>
-          </div>
-        </div>
-      )
-    }
-
-    {
-      properties && (
-        <div>
-          <div id={`${instanceId}-properties`}>
-            {Object.entries(properties).map(([name, details]) => (
-              <SchemaProperty
-                name={name}
-                details={details}
-                isRequired={variants ? false : required.includes(name)}
-                level={0}
-                expand={expandBool}
-              />
-            ))}
-          </div>
-          <div id={`${instanceId}-no-results`} class="hidden text-center py-8">
-            <div class="text-gray-400 text-sm">
-              <svg class="mx-auto h-12 w-12 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                />
-              </svg>
-              <p>No properties match your search</p>
-              <p class="text-xs mt-1">Try a different search term or clear the search to see all properties</p>
-            </div>
-          </div>
-        </div>
-      )
-    }
-
-    {!properties && !isRootArray && <p class="text-gray-500 text-sm">Schema does not contain any properties.</p>}
-    {
-      !properties && isRootArray && (
-        <div class="text-center py-8">
-          <div class="text-gray-500 text-sm">
-            <p>
-              This array contains items of type:{' '}
-              <span class="font-mono text-blue-600">{processedSchema.items?.type || 'unknown'}</span>
-            </p>
-            {processedSchema.items?.description && <p class="text-xs mt-2 text-gray-600">{processedSchema.items.description}</p>}
-          </div>
-        </div>
-      )
-    }
-  </div>
-</div>
-
-<script define:vars={{ instanceId, variants, id, file }}>
-  // Check if expand is set via data attribute (from portal movement)
-  function checkAndExpandAll() {
-    const schemaViewerClient = document.getElementById(`${id}-${file}-SchemaViewer-client`);
-    if (schemaViewerClient && schemaViewerClient.getAttribute('data-expand') === 'true') {
-      // Find all toggle buttons within this schema viewer
-      const toggleButtons = schemaViewerClient.querySelectorAll('.property-toggle');
-      toggleButtons.forEach((button) => {
-        if (button.getAttribute('aria-expanded') === 'false') {
-          button.click(); // Trigger the existing toggle logic
-        }
-      });
-    }
-  }
-
-  // Setup search and utilities
-  function setupSchemaUtilities() {
-    const schemaViewerClient = document.getElementById(id);
-    if (!schemaViewerClient || schemaViewerClient.getAttribute('data-search') !== 'true') return;
-
-    const searchInput = document.getElementById(`${instanceId}-search`);
-    const expandAllBtn = document.getElementById(`${instanceId}-expand-all`);
-    const collapseAllBtn = document.getElementById(`${instanceId}-collapse-all`);
-    const searchResults = document.getElementById(`${instanceId}-search-results`);
-    const propertiesContainer = document.getElementById(`${instanceId}-properties`);
-    const noResultsMessage = document.getElementById(`${instanceId}-no-results`);
-    const prevMatchBtn = document.getElementById(`${instanceId}-prev-match`);
-    const nextMatchBtn = document.getElementById(`${instanceId}-next-match`);
-
-    let currentMatches = [];
-    let currentMatchIndex = -1;
-
-    if (!searchInput || !propertiesContainer) return;
-
-    // Expand All functionality
-    if (expandAllBtn) {
-      expandAllBtn.addEventListener('click', () => {
-        const toggleButtons = schemaViewerClient.querySelectorAll('.property-toggle');
-        toggleButtons.forEach((button) => {
-          if (button.getAttribute('aria-expanded') === 'false') {
-            button.click();
-          }
-        });
-      });
-    }
-
-    // Collapse All functionality
-    if (collapseAllBtn) {
-      collapseAllBtn.addEventListener('click', () => {
-        const toggleButtons = schemaViewerClient.querySelectorAll('.property-toggle');
-        toggleButtons.forEach((button) => {
-          if (button.getAttribute('aria-expanded') === 'true') {
-            button.click();
-          }
-        });
-      });
-    }
-
-    // Helper functions
-    function scrollToMatch(container) {
-      container.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'nearest',
-      });
-    }
-
-    function updateMatchDisplay() {
-      // Remove previous current match highlighting
-      currentMatches.forEach((match, index) => {
-        match.classList.remove('search-current-match');
-        if (index === currentMatchIndex) {
-          match.classList.add('search-current-match');
-        }
-      });
-
-      // Update navigation buttons
-      if (prevMatchBtn && nextMatchBtn) {
-        prevMatchBtn.disabled = currentMatches.length === 0 || currentMatchIndex <= 0;
-        nextMatchBtn.disabled = currentMatches.length === 0 || currentMatchIndex >= currentMatches.length - 1;
-      }
-
-      // Update search results with current position
-      if (searchResults && currentMatches.length > 0) {
-        searchResults.textContent = `${currentMatchIndex + 1} of ${currentMatches.length} ${currentMatches.length === 1 ? 'match' : 'matches'}`;
-      }
-    }
-
-    function performSearch(searchTerm) {
-      const propertyContainers = propertiesContainer.querySelectorAll('.property-container');
-      currentMatches = [];
-      currentMatchIndex = -1;
-
-      if (searchTerm === '') {
-        // Reset search
-        propertyContainers.forEach((container) => {
-          container.classList.remove('search-match', 'search-no-match', 'search-current-match', 'search-dimmed');
-          const nameEl = container.querySelector('.font-semibold');
-          if (nameEl) {
-            nameEl.innerHTML = nameEl.textContent;
-          }
-        });
-        searchResults.classList.add('hidden');
-        if (noResultsMessage) {
-          noResultsMessage.classList.add('hidden');
-        }
-        updateMatchDisplay();
-
-        // Scroll back to top when search is cleared
-        // Use the same container that we're already working with
-        const scrollableContainer = propertiesContainer.closest('.schema-viewer');
-        if (scrollableContainer) {
-          scrollableContainer.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          });
-        }
-        return;
-      }
-
-      // Find all matches
-      propertyContainers.forEach((container) => {
-        const nameEl = container.querySelector('.font-semibold');
-
-        if (!nameEl) return;
-
-        const propName = nameEl.textContent.toLowerCase();
-
-        if (propName.includes(searchTerm)) {
-          container.classList.add('search-match');
-          container.classList.remove('search-dimmed');
-          currentMatches.push(container);
-
-          // Highlight the search term in the property name
-          const regex = new RegExp(`(${searchTerm})`, 'gi');
-          nameEl.innerHTML = nameEl.textContent.replace(regex, '<mark class="bg-yellow-200 rounded px-0.5">$1</mark>');
-
-          // Expand parent containers to show the match
-          let parent = container.parentElement;
-          while (parent && parent.id !== `${instanceId}-properties`) {
-            if (parent.classList.contains('nested-content') && parent.classList.contains('hidden')) {
-              const parentPropertyContainer = parent.closest('.property-container');
-              if (parentPropertyContainer) {
-                const toggleBtn = parentPropertyContainer.querySelector('.property-toggle');
-                if (toggleBtn && toggleBtn.getAttribute('aria-expanded') === 'false') {
-                  toggleBtn.click();
-                }
-              }
-            }
-            parent = parent.parentElement;
-          }
-        } else {
-          container.classList.remove('search-match', 'search-current-match');
-          container.classList.add('search-dimmed');
-          nameEl.innerHTML = nameEl.textContent;
-        }
-      });
-
-      // Show results
-      if (searchResults) {
-        searchResults.classList.remove('hidden');
-        if (currentMatches.length === 0) {
-          searchResults.textContent = 'No properties found';
-          searchResults.classList.add('text-red-600');
-          searchResults.classList.remove('text-gray-600');
-          if (noResultsMessage) {
-            noResultsMessage.classList.remove('hidden');
-          }
-        } else {
-          searchResults.classList.remove('text-red-600');
-          searchResults.classList.add('text-gray-600');
-          if (noResultsMessage) {
-            noResultsMessage.classList.add('hidden');
-          }
-          // Go to first match
-          currentMatchIndex = 0;
-          scrollToMatch(currentMatches[0]);
-        }
-      }
-
-      updateMatchDisplay();
-    }
-
-    // Search functionality
-    let searchTimeout;
-    searchInput.addEventListener('input', (e) => {
-      clearTimeout(searchTimeout);
-      searchTimeout = setTimeout(() => {
-        const searchTerm = e.target.value.toLowerCase().trim();
-        performSearch(searchTerm);
-      }, 300);
-    });
-
-    // Navigation functionality
-    if (prevMatchBtn) {
-      prevMatchBtn.addEventListener('click', () => {
-        if (currentMatchIndex > 0) {
-          currentMatchIndex--;
-          scrollToMatch(currentMatches[currentMatchIndex]);
-          updateMatchDisplay();
-        }
-      });
-    }
-
-    if (nextMatchBtn) {
-      nextMatchBtn.addEventListener('click', () => {
-        if (currentMatchIndex < currentMatches.length - 1) {
-          currentMatchIndex++;
-          scrollToMatch(currentMatches[currentMatchIndex]);
-          updateMatchDisplay();
-        }
-      });
-    }
-
-    // Keyboard navigation
-    searchInput.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        if (e.shiftKey && prevMatchBtn && !prevMatchBtn.disabled) {
-          prevMatchBtn.click();
-        } else if (!e.shiftKey && nextMatchBtn && !nextMatchBtn.disabled) {
-          nextMatchBtn.click();
-        }
-      }
-    });
-  }
-
-  if (variants) {
-    const selector = document.getElementById(`${instanceId}-variant-selector`);
-    const propertiesContainer = document.getElementById(`${instanceId}-properties`);
-
-    function updateRequiredFields() {
-      const selectedVariant = variants[selector.value];
-      const properties = propertiesContainer.querySelectorAll('.property-container');
-
-      properties.forEach((prop) => {
-        const nameEl = prop.querySelector('.font-semibold');
-        if (!nameEl) return;
-
-        const name = nameEl.textContent;
-        const requiredBadge = prop.querySelector('.text-red-600');
-
-        if (selectedVariant.required.includes(name)) {
-          if (!requiredBadge) {
-            const badge = document.createElement('span');
-            badge.className = 'text-red-600 text-xs ml-3 flex-shrink-0';
-            badge.textContent = 'required';
-            nameEl.parentElement.appendChild(badge);
-          }
-        } else {
-          requiredBadge?.remove();
-        }
-      });
-    }
-
-    selector.addEventListener('change', updateRequiredFields);
-    // Initialize with first variant
-    updateRequiredFields();
-  }
-
-  // Check expand state after page loads and after portal movement
-  document.addEventListener('astro:page-load', () => {
-    // Small delay to ensure portal movement has completed
-    setTimeout(() => {
-      checkAndExpandAll();
-      setupSchemaUtilities();
-    }, 100);
-  });
-
-  // Also check immediately in case the component is already in place
-  checkAndExpandAll();
-  setupSchemaUtilities();
-</script>
-
-<style>
-  .schema-viewer code {
-    font-family: 'Courier New', Courier, monospace;
-  }
-
-  /* Search highlighting styles */
-  .search-dimmed {
-    opacity: 0.4;
-    transition: opacity 0.2s ease;
-  }
-
-  .search-match {
-    opacity: 1;
-    transition: opacity 0.2s ease;
-  }
-
-  .search-current-match {
-    background-color: rgba(59, 130, 246, 0.1);
-    border-left: 3px solid #3b82f6;
-    padding-left: 8px;
-    margin-left: -11px;
-    transition: all 0.2s ease;
-  }
-</style>