@eventcatalog/core 2.33.1 → 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.1";
+var version = "2.33.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-VDBGM3NV.js";
-import "../chunk-IVIWGH2J.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.1";
+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-R3X2SCY6.js";
-import "../chunk-VDBGM3NV.js";
-import "../chunk-IVIWGH2J.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-IVIWGH2J.js → chunk-DDOQCYNI.js}

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

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

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

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

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-VDBGM3NV.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.1";
+var version = "2.33.2";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-IVIWGH2J.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.1";
+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-R3X2SCY6.js";
-import "./chunk-VDBGM3NV.js";
+} from "./chunk-QXRF5XEW.js";
+import "./chunk-ESJAFFBK.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
 } from "./chunk-7SI5EVOX.js";
 import {
   VERSION
-} from "./chunk-IVIWGH2J.js";
+} from "./chunk-DDOQCYNI.js";
 import {
   isBackstagePluginEnabled,
   isEventCatalogScaleEnabled,

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,77 +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';
-import { getMDXComponentsByName } from '@utils/markdown';
-
-let schemas = [];
-
-try {
-  const file = await fs.readFile(filePath, 'utf-8');
-  const schemaViewers = getMDXComponentsByName(file, 'SchemaViewer');
+// 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;
+}
 
-  // 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/pages/docs/[type]/[id]/[version]/index.astro

@@ -4,7 +4,7 @@ import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
-import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
+import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewerRoot.astro';
 
 // SideBars
 import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
@@ -202,7 +202,8 @@ const pagefindAttributes =
         </div>
         <div data-pagefind-ignore>
           <!-- @ts-ignore -->
-          <SchemaViewer id={props.data.id} catalog={props.catalog} filePath={props.filePath} />
+          <!-- <SchemaViewer id={props.data.id} catalog={props.catalog} filePath={props.filePath} /> -->
+          <SchemaViewer id={props.data.id} filePath={props.filePath} />
           <NodeGraph
             id={props.data.id}
             collection={props.collection}

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.33.1",
+  "version": "2.33.2",
   "publishConfig": {
     "access": "public"
   },
@@ -42,7 +42,6 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@scalar/api-reference-react": "^0.4.37",
-    "@stoplight/json-schema-viewer": "^4.16.4",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
@@ -69,7 +68,6 @@
     "lucide-react": "^0.453.0",
     "marked": "^15.0.6",
     "mermaid": "^11.4.1",
-    "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rehype-slug": "^6.0.0",

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

@@ -1,62 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import 'prismjs';
-// @ts-ignore
-import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
-import './css/stoplight-mosaic-styles.css';
-import './css/stoplight-mosaic-theme-default.css';
-
-import { createPortal } from 'react-dom';
-
-type Props = {
-  id: string;
-  file: string;
-  renderRootTreeLines?: boolean;
-  hideExamples?: boolean;
-  defaultExpandedDepth?: number;
-  maxHeight?: string;
-  schema: any;
-  catalog: any;
-  title?: string;
-};
-
-const SchemaViewer = ({
-  id,
-  maxHeight = '500',
-  renderRootTreeLines = true,
-  hideExamples = false,
-  defaultExpandedDepth = 3,
-  title,
-  schema,
-}: Props) => {
-  const [elem, setElem] = useState(null);
-  useEffect(() => {
-    // @ts-ignore
-    setElem(document.getElementById(`${id}-SchemaViewer-portal`));
-  }, []);
-
-  if (!elem) return null;
-
-  return (
-    <div>
-      {createPortal(
-        <section className="not-prose space-y-2 ">
-          {title && <h2 className="text-3xl font-bold">{title}</h2>}
-          <div className="border border-gray-100 p-2 schemaViewer">
-            <JsonSchemaViewer
-              schema={schema}
-              emptyText="No schema defined"
-              maxHeight={parseInt(maxHeight, 10)}
-              defaultExpandedDepth={defaultExpandedDepth}
-              renderRootTreeLines={renderRootTreeLines}
-              hideExamples={hideExamples}
-            />
-          </div>
-        </section>,
-        elem
-      )}
-    </div>
-  );
-};
-
-export default SchemaViewer;