@eventcatalog/core 3.12.8 → 3.13.0-beta.1

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Entity.tsx

@@ -1,154 +0,0 @@
-import { CubeIcon } from '@heroicons/react/16/solid';
-import type { CollectionEntry } from 'astro:content';
-import { Handle, Position } from '@xyflow/react';
-import { getIcon } from '@utils/badges';
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import { buildUrl } from '@utils/url-builder';
-import { useState } from 'react';
-
-interface Data {
-  title: string;
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  entity: CollectionEntry<'entities'>;
-  showTarget?: boolean;
-  showSource?: boolean;
-  externalToDomain?: boolean;
-  domainName?: string;
-  domainId?: string;
-  group?: {
-    type: string;
-    value: string;
-  };
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function EntityNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, entity, externalToDomain, domainName } = data as Data;
-  const { name, version, properties = [], aggregateRoot, styles, sidebar } = entity.data;
-
-  const { node: { color = 'blue', label } = {}, icon = 'CubeIcon' } = styles || {};
-
-  const Icon = getIcon(icon);
-
-  const [hoveredProperty, setHoveredProperty] = useState<string | null>(null);
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div
-          className={classNames(
-            'bg-white border border-blue-300 rounded-lg shadow-sm min-w-[200px]',
-            externalToDomain ? 'border-yellow-400' : ''
-          )}
-        >
-          {/* Table Header */}
-          <div
-            className={classNames(
-              'bg-blue-100 px-4 py-2 rounded-t-lg border-b border-gray-300',
-              externalToDomain ? 'bg-yellow-400' : ''
-            )}
-          >
-            <div className="flex items-center gap-2">
-              {Icon && <Icon className="w-4 h-4 text-gray-600" />}
-              <span className="font-semibold text-gray-800 text-sm">{name}</span>
-              {aggregateRoot && <span className="text-xs bg-yellow-100 text-yellow-800 px-1.5 py-0.5 rounded">AR</span>}
-            </div>
-            {/* {externalToDomain && domainName && ( */}
-            <div className="text-xs text-yellow-800 font-medium mt-1">from {domainName} domain</div>
-            {/* )} */}
-            {mode === 'full' && <div className="text-xs text-gray-600 mt-1">v{version}</div>}
-          </div>
-
-          {/* Properties Table */}
-          {properties.length > 0 ? (
-            <div className="divide-y divide-gray-200 relative">
-              {properties.map((property: any, index: number) => {
-                const propertyKey = `${property.name}-${index}`;
-                const isHovered = hoveredProperty === propertyKey;
-                return (
-                  <div
-                    key={propertyKey}
-                    className="relative flex items-center justify-between px-4 py-2 hover:bg-gray-50"
-                    onMouseEnter={() => property.description && setHoveredProperty(propertyKey)}
-                    onMouseLeave={() => setHoveredProperty(null)}
-                  >
-                    {/* Target handle */}
-                    <Handle
-                      type="target"
-                      position={Position.Left}
-                      id={`${property.name}-target`}
-                      className="!w-3 !h-3 !bg-white !border-2 !border-gray-400 !rounded-full !left-[-0px]"
-                      style={{ left: '-6px' }}
-                    />
-
-                    {/* Source handle */}
-                    <Handle
-                      type="source"
-                      position={Position.Right}
-                      id={`${property.name}-source`}
-                      className="!w-3 !h-3 !bg-white !border-2 !border-gray-400 !rounded-full !right-[-0px]"
-                      style={{ right: '-6px' }}
-                    />
-
-                    {/* Property content */}
-                    <div className="flex-1 flex items-center justify-between">
-                      <div className="flex items-center gap-1">
-                        <span className="text-sm font-medium text-gray-900">{property.name}</span>
-                        {property.required && <span className="text-red-500 text-xs">*</span>}
-                      </div>
-                      <span className="text-sm text-gray-600 font-mono">{property.type}</span>
-                    </div>
-
-                    {/* Reference indicator */}
-                    {property.references && (
-                      <div className="absolute right-2 top-1/2 transform -translate-y-1/2">
-                        <div className="w-2 h-2 bg-blue-500 rounded-full" title={`References ${property.references}`}></div>
-                      </div>
-                    )}
-
-                    {/* Property Tooltip */}
-                    {isHovered && property.description && (
-                      <div className="absolute left-full ml-2 top-1/2 transform -translate-y-1/2 z-[9999] w-[200px] bg-gray-900 text-white text-xs rounded-lg py-2 px-3 pointer-events-none shadow-xl max-w-xl opacity-100">
-                        <div className="text-gray-200 whitespace-normal break-words">{property.description}</div>
-                        <div className="absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-gray-900"></div>
-                      </div>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
-          ) : (
-            <div className="px-4 py-3 text-sm text-gray-500 text-center">No properties defined</div>
-          )}
-
-          {/* Main node handles (if no properties) */}
-          {properties.length === 0 && (
-            <>
-              {targetPosition && <Handle type="target" position={targetPosition} />}
-              {sourcePosition && <Handle type="source" position={sourcePosition} />}
-            </>
-          )}
-        </div>
-      </ContextMenu.Trigger>
-      <ContextMenu.Portal>
-        <ContextMenu.Content
-          className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <ContextMenu.Item
-            asChild
-            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-          >
-            <a href={buildUrl(`/docs/entities/${entity.data.id}/${version}`)}>Read documentation</a>
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Event.tsx

@@ -1,29 +0,0 @@
-import { Handle } from '@xyflow/react';
-import MessageContextMenu from './MessageContextMenu';
-import { Position } from '@xyflow/react';
-
-// Import from properly installed package
-import { nodeComponents, type EventNode } from '@eventcatalog/visualizer';
-const EventComponent = nodeComponents.event;
-
-export default function EventNode(props: EventNode) {
-  return (
-    <MessageContextMenu message={props.data.message as any} messageType="events">
-      <div className="relative">
-        <Handle
-          type="target"
-          position={Position.Left}
-          style={{ width: 10, height: 10, background: 'orange', zIndex: 10 }}
-          className="bg-orange-500"
-        />
-        <Handle
-          type="source"
-          position={Position.Right}
-          style={{ width: 10, height: 10, background: 'orange', zIndex: 10 }}
-          className="bg-orange-500"
-        />
-        <EventComponent {...props} />
-      </div>
-    </MessageContextMenu>
-  );
-}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx

@@ -1,79 +0,0 @@
-import { ServerIcon } from '@heroicons/react/16/solid';
-import { GlobeAmericasIcon } from '@heroicons/react/20/solid';
-import type { CollectionEntry } from 'astro:content';
-import { Handle } from '@xyflow/react';
-
-interface Data {
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  step: { id: string; title: string; summary: string; externalSystem: { name: string; summary?: string; url?: string } };
-  showTarget?: boolean;
-  showSource?: boolean;
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function ExternalSystemNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, step } = data as Data;
-  const { externalSystem } = step;
-  const { name, summary, url } = externalSystem;
-
-  return (
-    <div
-      className={classNames(
-        `w-full rounded-md border flex justify-start  bg-white text-black border-pink-500`,
-        mode === 'full' ? 'min-h-[7em]' : 'min-h-[2em]'
-      )}
-    >
-      <div
-        className={classNames(
-          'bg-gradient-to-b from-pink-500 to-pink-700 relative flex items-center w-5 justify-center rounded-l-sm text-red-100-500',
-          `border-r-[1px] border-pink-500`
-        )}
-      >
-        <GlobeAmericasIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-        {mode === 'full' && (
-          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
-            External
-          </span>
-        )}
-      </div>
-      <div className="p-1 min-w-60 max-w-[min-content]">
-        {targetPosition && <Handle type="target" position={targetPosition} />}
-        {sourcePosition && <Handle type="source" position={sourcePosition} />}
-        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-          <div className="h-full ">
-            <span className="text-sm font-bold pb-0.5 block w-full">{name}</span>
-            {mode === 'simple' && (
-              <div className="w-full text-right">
-                <span className=" w-full text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">External System</span>
-              </div>
-            )}
-          </div>
-        </div>
-        {mode === 'full' && (
-          <div className="divide-y divide-gray-200 ">
-            <div className="leading-3 py-1">
-              <span className="text-[8px] font-light">{summary}</span>
-            </div>
-
-            {url && (
-              <div className="grid grid-cols-2 gap-x-4 py-1">
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  URL:{' '}
-                  <a href={url} target="_blank" className="text-primary underline">
-                    {url}
-                  </a>
-                </span>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/ExternalSystem2.tsx

@@ -1,24 +0,0 @@
-import { Handle, Position } from '@xyflow/react';
-
-import { nodeComponents, type ExternalSystemNode } from '@eventcatalog/visualizer';
-const ExternalSystemComponent = nodeComponents.externalSystem;
-
-export default function ExternalSystemNode(props: ExternalSystemNode) {
-  return (
-    <div className="relative">
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{ width: 10, height: 10, background: 'pink', zIndex: 10 }}
-        className="bg-gray-500"
-      />
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{ width: 10, height: 10, background: 'pink', zIndex: 10 }}
-        className="bg-gray-500"
-      />
-      <ExternalSystemComponent {...props} />
-    </div>
-  );
-}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Flow.tsx

@@ -1,107 +0,0 @@
-import type { CollectionEntry } from 'astro:content';
-import { Handle } from '@xyflow/react';
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import { buildUrl } from '@utils/url-builder';
-import { getIcon } from '@utils/badges';
-
-interface Data {
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  flow: CollectionEntry<'flows'>;
-  showTarget?: boolean;
-  showSource?: boolean;
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function FlowNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, flow } = data as Data;
-
-  const { id, version, owners = [], name, styles } = flow.data;
-  const { node: { color = 'teal', label } = {}, icon = 'QueueListIcon' } = styles || {};
-
-  const Icon = getIcon(icon);
-  const nodeLabel = label || flow?.data?.sidebar?.badge || 'Flow';
-  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div className={classNames(`w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400`)}>
-          <div
-            className={classNames(
-              `bg-gradient-to-b from-${color}-500 to-${color}-700 relative flex items-center w-5 justify-center rounded-l-sm text-${color}-100`,
-              `border-r-[1px] border-${color}-500`
-            )}
-          >
-            {Icon && <Icon className="w-4 h-4 opacity-90 text-white absolute top-1 " />}
-            {mode === 'full' && (
-              <span
-                className={`rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[${fontSize}] text-white font-bold uppercase tracking-[3px] `}
-              >
-                {nodeLabel}
-              </span>
-            )}
-          </div>
-          <div className="p-1 min-w-60 max-w-[min-content]">
-            {targetPosition && <Handle type="target" position={targetPosition} />}
-            {sourcePosition && <Handle type="source" position={sourcePosition} />}
-            <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-              <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
-              <div className="flex justify-between">
-                <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
-                {mode === 'simple' && (
-                  <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">{nodeLabel}</span>
-                )}
-              </div>
-            </div>
-            {mode === 'full' && (
-              <div className="divide-y divide-gray-200 ">
-                <div className="leading-3 py-1">
-                  <span className="text-[8px] font-light">{flow.data.summary}</span>
-                </div>
-
-                <div className="grid grid-cols-2 gap-x-4 py-1">
-                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                    Owners: {owners.length}
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </ContextMenu.Trigger>
-      <ContextMenu.Portal>
-        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
-          <ContextMenu.Item
-            asChild
-            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-          >
-            <a href={buildUrl(`/docs/flows/${id}/${version}`)}>Read documentation</a>
-          </ContextMenu.Item>
-          <ContextMenu.Item
-            asChild
-            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-          >
-            <a href={buildUrl(`/visualiser/flows/${id}/${version}`)}>View in visualiser</a>
-          </ContextMenu.Item>
-          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-          <ContextMenu.Item asChild>
-            <a
-              href={buildUrl(`/docs/flows/${id}/${version}/changelog`)}
-              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Read changelog
-            </a>
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/MessageContextMenu.tsx

@@ -1,63 +0,0 @@
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import { buildUrl } from '@utils/url-builder';
-import type { CollectionMessageTypes } from '@types';
-interface Data {
-  message: {
-    id: string;
-    version: string;
-    name: string;
-    schemaPath: string;
-  };
-  messageType: CollectionMessageTypes;
-  children: React.ReactNode;
-}
-
-export default function MessageContextMenu(data: Data) {
-  const { message, messageType, children } = data;
-  const { id, version, name, schemaPath } = message;
-
-  if (!id) return null;
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
-      <ContextMenu.Portal>
-        <ContextMenu.Content
-          className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <ContextMenu.Item
-            asChild
-            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-          >
-            <a href={buildUrl(`/docs/${messageType}/${id}/${version}`)}>Read documentation</a>
-          </ContextMenu.Item>
-          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-          {schemaPath && (
-            <ContextMenu.Item asChild>
-              <a
-                href={buildUrl(`/generated/${messageType}/${id}/${schemaPath}`)}
-                download={`${name}(${version})-${schemaPath}`}
-                className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Download schema
-              </a>
-            </ContextMenu.Item>
-          )}
-          <ContextMenu.Item asChild>
-            <a
-              href={buildUrl(`/docs/${messageType}/${id}/${version}/changelog`)}
-              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Read changelog
-            </a>
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Query.tsx

@@ -1,28 +0,0 @@
-import { Handle } from '@xyflow/react';
-import MessageContextMenu from './MessageContextMenu';
-import { Position } from '@xyflow/react';
-
-import { nodeComponents, type QueryNode } from '@eventcatalog/visualizer';
-const QueryComponent = nodeComponents.query;
-
-export default function QueryNode(props: QueryNode) {
-  return (
-    <MessageContextMenu message={props.data.message as any} messageType="queries">
-      <div className="relative">
-        <Handle
-          type="target"
-          position={Position.Left}
-          style={{ width: 10, height: 10, background: 'green', zIndex: 10 }}
-          className="bg-green-500"
-        />
-        <Handle
-          type="source"
-          position={Position.Right}
-          style={{ width: 10, height: 10, background: 'green', zIndex: 10 }}
-          className="bg-green-500"
-        />
-        <QueryComponent {...props} />
-      </div>
-    </MessageContextMenu>
-  );
-}

package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -1,127 +0,0 @@
-import { Handle } from '@xyflow/react';
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import { buildUrl } from '@utils/url-builder';
-import { Position } from '@xyflow/react';
-
-import { nodeComponents, type ServiceNode } from '@eventcatalog/visualizer';
-const ServiceComponent = nodeComponents.service;
-
-export default function ServiceNode(props: ServiceNode) {
-  const { id, version, specifications, repository } = props.data.service as any;
-
-  let asyncApiFiles = Array.isArray(specifications) ? specifications?.filter((spec) => spec.type === 'asyncapi') : ([] as any);
-  let openApiFiles = Array.isArray(specifications) ? specifications?.filter((spec) => spec.type === 'openapi') : ([] as any);
-
-  if (!Array.isArray(specifications) && specifications?.asyncapiPath) {
-    asyncApiFiles.push({ path: specifications.asyncapiPath, type: 'asyncapi', name: 'AsyncAPI' });
-  }
-
-  if (!Array.isArray(specifications) && specifications?.openapiPath) {
-    openApiFiles.push({ path: specifications.openapiPath, type: 'openapi', name: 'OpenAPI' });
-  }
-
-  // Add filename on asyncApiFiles and openApiFiles
-  asyncApiFiles = asyncApiFiles.map((file: any) => {
-    return {
-      ...file,
-      filename: file.path.split('/').pop()?.split('.').shift(),
-    };
-  });
-  openApiFiles = openApiFiles.map((file: any) => {
-    return {
-      ...file,
-      filename: file.path.split('/').pop()?.split('.').shift(),
-      name: file.name,
-    };
-  });
-
-  const repositoryUrl = repository?.url;
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div className="relative">
-          <Handle
-            type="target"
-            position={Position.Left}
-            style={{ width: 10, height: 10, background: 'pink', zIndex: 10 }}
-            className="bg-pink-500"
-          />
-          <Handle
-            type="source"
-            position={Position.Right}
-            style={{ width: 10, height: 10, background: 'pink', zIndex: 10 }}
-            className="bg-pink-500"
-          />
-          <ServiceComponent {...props} />
-        </div>
-      </ContextMenu.Trigger>
-      <ContextMenu.Portal>
-        <ContextMenu.Content
-          className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <ContextMenu.Item
-            asChild
-            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-          >
-            <a href={buildUrl(`/docs/services/${id}/${version}`)}>Read documentation</a>
-          </ContextMenu.Item>
-          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-          {asyncApiFiles.length > 0 &&
-            asyncApiFiles.map((file: any) => (
-              <ContextMenu.Item asChild key={file.path}>
-                <a
-                  href={buildUrl(`/docs/services/${id}/${version}/asyncapi/${file.filename}`)}
-                  className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  View AsyncAPI specification {file.name ? `(${file.name})` : ''}
-                </a>
-              </ContextMenu.Item>
-            ))}
-          {openApiFiles.length > 0 &&
-            openApiFiles.map((file: any) => (
-              <ContextMenu.Item asChild key={file.path}>
-                <a
-                  href={buildUrl(`/docs/services/${id}/${version}/spec/${file.filename}`)}
-                  className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  View OpenAPI specification {file.name ? `(${file.name})` : ''}
-                </a>
-              </ContextMenu.Item>
-            ))}
-          {asyncApiFiles.length > 0 && openApiFiles.length > 0 && <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />}
-          {repositoryUrl && (
-            <>
-              <ContextMenu.Item asChild>
-                <a
-                  href={repositoryUrl}
-                  className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  View code repository
-                </a>
-              </ContextMenu.Item>
-              <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-            </>
-          )}
-          <ContextMenu.Item asChild>
-            <a
-              href={buildUrl(`/docs/services/${id}/${version}/changelog`)}
-              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Read changelog
-            </a>
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}