@eventcatalog/core 2.33.0 → 2.33.2

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.0";
+var version = "2.33.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-MC6EBL4I.js";
-import "../chunk-TNU27WQF.js";
+} from "../chunk-ESJAFFBK.js";
+import "../chunk-DDOQCYNI.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.0";
+var version = "2.33.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-MXEVMOGW.js";
-import "../chunk-MC6EBL4I.js";
-import "../chunk-TNU27WQF.js";
+} from "../chunk-QXRF5XEW.js";
+import "../chunk-ESJAFFBK.js";
+import "../chunk-DDOQCYNI.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-TNU27WQF.js → chunk-DDOQCYNI.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.33.0";
+var version = "2.33.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-MC6EBL4I.js → chunk-ESJAFFBK.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-TNU27WQF.js";
+} from "./chunk-DDOQCYNI.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-MXEVMOGW.js → chunk-QXRF5XEW.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-MC6EBL4I.js";
+} from "./chunk-ESJAFFBK.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.33.0";
+var version = "2.33.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-TNU27WQF.js";
+} from "./chunk-DDOQCYNI.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.33.0";
+var version = "2.33.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,15 +6,15 @@ import {
 } from "./chunk-UKJ7F5WR.js";
 import {
   log_build_default
-} from "./chunk-MXEVMOGW.js";
-import "./chunk-MC6EBL4I.js";
+} from "./chunk-QXRF5XEW.js";
+import "./chunk-ESJAFFBK.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
 } from "./chunk-7SI5EVOX.js";
 import {
   VERSION
-} from "./chunk-TNU27WQF.js";
+} from "./chunk-DDOQCYNI.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogScaleEnabled,

package/eventcatalog/src/components/Lists/CustomSideBarSectionList.astro

@@ -3,6 +3,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getCollection } from 'astro:content';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 import PillListFlat from './PillListFlat';
+import { resourceToCollectionMap } from '@utils/collections/util';
 interface Props {
   section?: {
     title?: string;
@@ -20,19 +21,6 @@ const title = section?.title || 'Custom Section';
 const limit = section?.limit || 10;
 const sectionItems = section?.items || [];
 
-// Type-safe mapping of resource types to collection names
-const resourceToCollectionMap = {
-  service: 'services',
-  event: 'events',
-  command: 'commands',
-  query: 'queries',
-  domain: 'domains',
-  flow: 'flows',
-  channel: 'channels',
-  user: 'users',
-  team: 'teams',
-} as const; // Make this a const assertion
-
 // Array to store resolved related resources
 const resolvedResources = [];
 

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

@@ -4,6 +4,7 @@ import { getCollection } from 'astro:content';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
 import ResourceGroupTableClient from './ResourceGroupTable.client';
 import Admonition from '../Admonition';
+import { resourceToCollectionMap } from '@utils/collections/util';
 
 export interface Props extends CollectionEntry<'services'> {
   limit?: number;
@@ -31,19 +32,6 @@ const section = resource.data.resourceGroups?.find((section: any) => section.id
 
 const collection = Astro.props.collection as 'services' | 'domains';
 
-// Type-safe mapping of resource types to collection names
-const resourceToCollectionMap = {
-  service: 'services',
-  event: 'events',
-  command: 'commands',
-  query: 'queries',
-  domain: 'domains',
-  flow: 'flows',
-  channel: 'channels',
-  user: 'users',
-  team: 'teams',
-} as const;
-
 // This will hold our processed resources for the client component
 const resolvedResources: any[] = [];
 

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

@@ -1,17 +1,6 @@
 ---
 import { buildUrl } from '@utils/url-builder';
-
-const resourceToCollectionMap = {
-  service: 'services',
-  event: 'events',
-  command: 'commands',
-  query: 'queries',
-  domain: 'domains',
-  flow: 'flows',
-  channel: 'channels',
-  user: 'users',
-  team: 'teams',
-} as const;
+import { resourceToCollectionMap } from '@utils/collections/util';
 
 const { id, version, type } = Astro.props;
 const collection = resourceToCollectionMap[type as keyof typeof resourceToCollectionMap];

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

@@ -0,0 +1,161 @@
+---
+import SchemaProp from './SchemaProperty.astro';
+
+interface Props {
+  name: string;
+  details: any;
+  isRequired: boolean;
+  level: number;
+  isListItem?: boolean;
+}
+
+const { name, details, isRequired, level, isListItem = false } = Astro.props;
+
+const hasNestedProperties = details.type === 'object' && details.properties && Object.keys(details.properties).length > 0;
+const hasArrayItems = details.type === 'array' && details.items;
+const isCollapsible = hasNestedProperties || (hasArrayItems && details.items.type === 'object' && details.items.properties);
+
+// Using template literal for class calculation remains safe
+const indentationClass = `pl-${level * 3}`;
+
+const contentId = `prop-${name}-${level}-${Math.random().toString(36).substring(2, 7)}`;
+---
+
+{/* Using simpler border class */}
+<div class:list={['property-container mb-1.5 border-l border-gray-100 relative', indentationClass]}>
+  <div class="flex items-start space-x-1.5">
+    {
+      isCollapsible && (
+        <button
+          type="button"
+          aria-expanded="false"
+          aria-controls={contentId}
+          class="property-toggle text-gray-500 hover:text-gray-700 pt-0.5 focus:outline-none w-3 text-center flex-shrink-0"
+        >
+          <span class="icon-collapsed font-mono text-xs">&gt;</span>
+          <span class="icon-expanded font-mono text-xs hidden">v</span>
+        </button>
+      )
+    }
+    {!isCollapsible && <div class="w-3 h-4 flex-shrink-0" />}
+
+    <div class="flex-grow">
+      <div class="flex justify-between items-baseline">
+        <div>
+          <span class="font-semibold text-gray-800 text-sm">{name}</span>
+          <span class="ml-1.5 text-purple-600 font-mono text-xs">
+            {/* Expressions using ternary operators are generally safe */}
+            {details.type}
+            {details.type === 'array' && details.items?.type ? `[${details.items.type}]` : ''}
+            {details.format ? `<${details.format}>` : ''}
+          </span>
+        </div>
+        {isRequired && <span class="text-red-600 text-xs ml-3 flex-shrink-0">required</span>}
+      </div>
+
+      {details.description && <p class="text-gray-500 text-xs mt-0.5">{details.description}</p>}
+
+      {/* Reverted arbitrary text size to standard 'text-xs' */}
+      <div class="text-xs text-gray-500 mt-0.5 space-y-0">
+        {
+          details.pattern && (
+            <div>
+              Match pattern: <code class="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.pattern}</code>
+            </div>
+          )
+        }
+        {
+          details.minimum !== undefined && (
+            <div>
+              Minimum: <code class="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.minimum}</code>
+            </div>
+          )
+        }
+        {
+          details.maximum !== undefined && (
+            <div>
+              Maximum: <code class="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{details.maximum}</code>
+            </div>
+          )
+        }
+        {
+          details.enum && (
+            <div>
+              <span class="text-xs inline-block">Allowed values:</span>
+
+              {/* Map function rendering standard elements */}
+              {details.enum.map((val: string) => (
+                <span class="text-xs">
+                  <code class="bg-gray-100 px-1 rounded text-gray-800 font-thin py-0.5">{val}</code>
+                </span>
+              ))}
+            </div>
+          )
+        }
+      </div>
+
+      {
+        (hasNestedProperties || hasArrayItems) && (
+          // class:list with conditional object is standard and should be safe
+          <div id={contentId} class:list={['nested-content mt-1', { hidden: isCollapsible }]}>
+            {/* Recursive component calls */}
+            {hasNestedProperties &&
+              details.properties &&
+              Object.entries(details.properties).map(([nestedName, nestedDetails]) => (
+                <SchemaProp
+                  name={nestedName}
+                  details={nestedDetails}
+                  isRequired={details.required?.includes(nestedName) ?? false}
+                  level={level + 1}
+                />
+              ))}
+
+            {hasArrayItems && details.items.type === 'object' && details.items.properties && (
+              <div class="mt-1 border-l border-dashed border-gray-400 pl-3 ml-1.5">
+                <span class="text-xs italic text-gray-500 block mb-1">Item Details:</span>
+                {Object.entries(details.items.properties).map(([itemPropName, itemPropDetails]) => (
+                  <SchemaProp
+                    name={itemPropName}
+                    details={itemPropDetails}
+                    isRequired={details.items.required?.includes(itemPropName) ?? false}
+                    level={level + 1}
+                    isListItem={true}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )
+      }
+    </div>
+  </div>
+</div>
+
+{/* Script tag content remains the same */}
+<script is:inline>
+  function setupPropertyToggle() {
+    document.querySelectorAll('.property-toggle').forEach((button) => {
+      if (button.dataset.listenerAttached) return;
+      button.dataset.listenerAttached = 'true';
+
+      button.addEventListener('click', () => {
+        const contentId = button.getAttribute('aria-controls');
+        const content = document.getElementById(contentId);
+        const isExpanded = button.getAttribute('aria-expanded') === 'true';
+        const iconCollapsed = button.querySelector('.icon-collapsed');
+        const iconExpanded = button.querySelector('.icon-expanded');
+
+        if (content) {
+          button.setAttribute('aria-expanded', String(!isExpanded));
+          content.classList.toggle('hidden');
+          iconCollapsed?.classList.toggle('hidden', !isExpanded);
+          iconExpanded?.classList.toggle('hidden', isExpanded);
+        }
+      });
+    });
+  }
+
+  setupPropertyToggle();
+
+  document.addEventListener('astro:page-load', setupPropertyToggle);
+</script>

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

@@ -1,103 +1,44 @@
 ---
-const { catalog, id, filePath } = Astro.props;
-import fs from 'node:fs/promises';
-import { existsSync } from 'fs';
-import yaml from 'js-yaml';
-import path from 'path';
-import SchemaViewerClient from './SchemaViewer';
-import Admonition from '../Admonition';
-let schemas = [];
-
-function findSchemaViewers(document: string) {
-  // Define regex pattern to match <SchemaViewer ... />
-  const pattern = /<SchemaViewer\s+([^>]*)\/>/g;
-
-  // Find all matches of the pattern
-  const matches = [...document.matchAll(pattern)];
-
-  // Extract the properties of each SchemaViewer
-  const schemaViewers = matches.map((match) => {
-    const propsString = match[1];
-    const props = {};
-
-    // Use regex to extract key-value pairs from propsString
-    const propsPattern = /(\w+)=["']([^"']+)["']/g;
-    let propMatch;
-    while ((propMatch = propsPattern.exec(propsString)) !== null) {
-      const key = propMatch[1];
-      const value = propMatch[2];
-      // @ts-ignore
-      props[key] = value;
-    }
-
-    return props;
-  });
-
-  return schemaViewers;
+// 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;
 }
 
-try {
-  const file = await fs.readFile(filePath, 'utf-8');
-  const schemaViewers = findSchemaViewers(file);
-
-  // Loop around all the possible SchemaViewers in the file.
-  const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
-    const schemaPath = path.join(path.dirname(filePath), schemaViewerProps.file);
-    const exists = existsSync(schemaPath);
-    let schema;
-    let render = true;
+const { id, file, title, maxHeight, schema } = Astro.props;
+const { description, properties, required = [] } = schema;
+---
 
-    if (exists) {
-      // Load the schema for the component
-      schema = await fs.readFile(schemaPath, 'utf-8');
-      if (schemaPath.endsWith('.yml') || schemaPath.endsWith('.yaml')) {
-        schema = yaml.load(schema);
-      } else {
-        schema = JSON.parse(schema);
-        // Lets JSON schema control if the component should be rendered or not
-        if (schema['x-eventcatalog-render-schema-viewer'] !== undefined) {
-          render = schema['x-eventcatalog-render-schema-viewer'];
-        }
-      }
+<div id={`${id}-${file}-SchemaViewer-client`} class="not-prose my-4">
+  {title && <h2 class="text-3xl font-bold mb-2 !mt-0">{title}</h2>}
+  <div
+    class="schema-viewer p-4 bg-white overflow-y-auto rounded-lg border border-gray-100 shadow-sm font-sans"
+    style={{
+      maxHeight: maxHeight ? `${maxHeight}em` : `100em`,
+    }}
+  >
+    {description && <p class="text-gray-600 text-xs mb-5">{description}</p>}
+    {/* Reduced size, adjusted margin */}
+
+    {
+      properties &&
+        Object.entries(properties).map(([name, details]) => (
+          <SchemaProperty name={name} details={details} isRequired={required.includes(name)} level={0} />
+        ))
     }
 
-    return {
-      id: schemaViewerProps.id || id,
-      exists,
-      schema,
-      schemaPath,
-      ...schemaViewerProps,
-      render,
-    };
-  });
-
-  schemas = await Promise.all(getAllComponents);
-} catch (error) {
-  console.log('Failed to process schemas');
-  console.log(error);
-}
----
-
-<section class="space-y-4">
-  {
-    schemas.length > 0 &&
-      schemas.map((schema) => {
-        if (!schema.render) return null;
-        return (
-          <div>
-            {schema.exists && <SchemaViewerClient {...schema} client:only="react" />}
+    {!properties && <p class="text-gray-500 text-sm">Schema does not contain any properties.</p>}
+  </div>
+</div>
 
-            {/* User has tried to load the schema, but it was not found on file system */}
-            {!schema.exists && (
-              <Admonition type="warning">
-                <div>
-                  <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
-                  <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
-                </div>
-              </Admonition>
-            )}
-          </div>
-        );
-      })
+<style>
+  .schema-viewer code {
+    font-family: 'Courier New', Courier, monospace;
   }
-</section>
+</style>

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewerPortal.tsx

@@ -1,5 +1,5 @@
 const SchemaViewerPortal = (props: any) => {
-  return <div id={`${props.id}-SchemaViewer-portal`} />;
+  return <div id={`${props.id}-${props.file}-SchemaViewer-portal`} />;
 };
 
 export default SchemaViewerPortal;

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

@@ -0,0 +1,98 @@
+---
+const { id, filePath } = Astro.props;
+import fs from 'node:fs/promises';
+import { existsSync } from 'fs';
+import yaml from 'js-yaml';
+import path from 'path';
+import SchemaViewerClient from './SchemaViewer.astro';
+import Admonition from '../Admonition';
+import { getMDXComponentsByName } from '@utils/markdown';
+
+let schemas = [];
+
+try {
+  const file = await fs.readFile(filePath, 'utf-8');
+  const schemaViewers = getMDXComponentsByName(file, 'SchemaViewer');
+
+  // Loop around all the possible SchemaViewers in the file.
+  const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
+    const schemaPath = path.join(path.dirname(filePath), schemaViewerProps.file);
+    const exists = existsSync(schemaPath);
+    let schema;
+    let render = true;
+
+    if (exists) {
+      // Load the schema for the component
+      schema = await fs.readFile(schemaPath, 'utf-8');
+      if (schemaPath.endsWith('.yml') || schemaPath.endsWith('.yaml')) {
+        schema = yaml.load(schema);
+      } else {
+        schema = JSON.parse(schema);
+        // Lets JSON schema control if the component should be rendered or not
+        if (schema['x-eventcatalog-render-schema-viewer'] !== undefined) {
+          render = schema['x-eventcatalog-render-schema-viewer'];
+        }
+      }
+    }
+
+    return {
+      id: schemaViewerProps.id || id,
+      exists,
+      schema,
+      schemaPath,
+      ...schemaViewerProps,
+      render,
+    };
+  });
+
+  schemas = await Promise.all(getAllComponents);
+} catch (error) {
+  console.log('Failed to process schemas');
+  console.log(error);
+}
+---
+
+<section class="space-y-4">
+  {
+    schemas.length > 0 &&
+      schemas.map((schema) => {
+        if (!schema.render) return null;
+        return (
+          <div>
+            {schema.exists && <SchemaViewerClient {...schema} />}
+
+            {/* User has tried to load the schema, but it was not found on file system */}
+            {!schema.exists && (
+              <Admonition type="warning">
+                <div>
+                  <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
+                  <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
+                </div>
+              </Admonition>
+            )}
+          </div>
+        );
+      })
+  }
+</section>
+
+<script is:inline define:vars={{ schemas }}>
+  // Can we move the SchemaViewerClient to another container? example container with the id "my-schema-viewer-container"
+  // and then we can move the SchemaViewerClient to that container?
+
+  function moveSchemaViewerToPortal(schema) {
+    const portalId = `${schema.id}-${schema.file}-SchemaViewer-portal`;
+    const schemaViewerContainer = document.getElementById(portalId);
+    console.log('schemaViewerContainer', schemaViewerContainer);
+    if (schemaViewerContainer) {
+      schemaViewerContainer.appendChild(document.getElementById(`${schema.id}-${schema.file}-SchemaViewer-client`));
+    }
+  }
+
+  console.log('schemas', schemas);
+
+  // on DOM ready, move the SchemaViewerClient to the portal
+  document.addEventListener('astro:page-load', () => {
+    schemas.forEach(moveSchemaViewerToPortal);
+  });
+</script>

package/eventcatalog/src/components/MDX/components.tsx

@@ -34,7 +34,7 @@ const components = (props: any) => {
     Flow,
     Link: (mdxProp: any) => jsx(Link, { ...props, ...mdxProp }),
     MessageTable: (mdxProp: any) => jsx(MessageTable, { ...props, ...mdxProp }),
-    NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
+    NodeGraph: (mdxProp: any) => jsx(NodeGraphPortal, { ...props.data, ...mdxProp, props, mdxProp }),
     OpenAPI,
     ResourceGroupTable: (mdxProp: any) => jsx(ResourceGroupTable, { ...props, ...mdxProp }),
     ResourceLink: (mdxProp: any) => jsx(ResourceLink, { ...props, ...mdxProp }),

package/eventcatalog/src/enterprise/custom-documentation/pages/docs/custom/index.astro

@@ -9,15 +9,19 @@ import OwnersList from '@components/Lists/OwnersList';
 
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl } from '@utils/url-builder';
+import { resourceToCollectionMap } from '@utils/collections/util';
+import { getMDXComponentsByName } from '@utils/markdown';
+import { getAdjacentPages } from '@enterprise/custom-documentation/utils/custom-docs';
 
 import CustomDocsNav from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNav.astro';
-import { getAdjacentPages } from '@enterprise/custom-documentation/utils/custom-docs';
+import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
 
 const props = Astro.props;
 const doc = props.data;
 const { Content, headings } = await render(props as any);
 const currentSlug = props.id;
 
+const nodeGraphs = getMDXComponentsByName(props.body, 'NodeGraph') || [];
 // Get sidebar data
 const sidebar = config?.customDocs?.sidebar || [];
 
@@ -116,6 +120,27 @@ const badges = doc?.badges || [];
           <Content components={{ ...mdxComponents(props) }} />
         </div>
 
+        {
+          nodeGraphs.length > 0 &&
+            nodeGraphs.map((nodeGraph: any) => {
+              const collection = resourceToCollectionMap[nodeGraph.type as keyof typeof resourceToCollectionMap];
+              return (
+                <NodeGraph
+                  id={nodeGraph.id}
+                  version={nodeGraph.version}
+                  collection={collection}
+                  title={nodeGraph.title}
+                  mode="simple"
+                  linksToVisualiser={true}
+                  href={{
+                    label: 'Open in Visualiser',
+                    url: buildUrl(`/visualiser/${collection}/${nodeGraph.id}/${nodeGraph.version}`),
+                  }}
+                />
+              );
+            })
+        }
+
         <!-- Previous / Next Navigation -->
         <div class="py-8 border-t border-gray-200 mt-8">
           <div class="flex flex-col sm:flex-row justify-between w-full gap-4">