@eventcatalog/core 3.12.7 → 3.12.9-beta.0

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

@@ -1,46 +0,0 @@
-import { Handle, Position, type XYPosition } from '@xyflow/react';
-
-import { nodeComponents } from '@eventcatalog/visualizer';
-const ActorComponent = nodeComponents.actor;
-
-interface Data {
-  data: {
-    actor: {
-      name: string;
-      summary: string;
-    };
-    mode: 'simple' | 'full';
-  };
-  type: 'actor';
-  id: string;
-  position: XYPosition;
-}
-
-export default function ActorNode(props: Data) {
-  const componentData = {
-    ...props,
-    data: {
-      ...props.data,
-      name: props.data.actor.name,
-      summary: props.data.actor.summary,
-    },
-  };
-
-  return (
-    <div className="relative">
-      <Handle
-        type="target"
-        position={Position.Left}
-        style={{ width: 10, height: 10, background: 'orange', zIndex: 10 }}
-        className="bg-gray-500"
-      />
-      <Handle
-        type="source"
-        position={Position.Right}
-        style={{ width: 10, height: 10, background: 'orange', zIndex: 10 }}
-        className="bg-gray-500"
-      />
-      <ActorComponent {...componentData} />
-    </div>
-  );
-}

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

@@ -1,55 +0,0 @@
-import { Handle, Position } from '@xyflow/react';
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import { buildUrl } from '@utils/url-builder';
-
-import { nodeComponents, type ChannelNode } from '@eventcatalog/visualizer';
-const ChannelComponent = nodeComponents.channel;
-
-export default function ChannelNode(props: ChannelNode) {
-  // @ts-ignore
-  const { id, version } = props.data.channel;
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div className="relative">
-          <Handle
-            type="target"
-            position={Position.Left}
-            style={{ width: 10, height: 10, background: 'green', zIndex: 10 }}
-            className="bg-gray-500"
-          />
-          <Handle
-            type="source"
-            position={Position.Right}
-            style={{ width: 10, height: 10, background: 'green', zIndex: 10 }}
-            className="bg-gray-500"
-          />
-          <ChannelComponent {...props} />
-        </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/channels/${id}/${version}`)}>Read documentation</a>
-          </ContextMenu.Item>
-          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-
-          <ContextMenu.Item asChild>
-            <a
-              href={buildUrl(`/docs/channels/${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/Command.tsx

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

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

@@ -1,159 +0,0 @@
-import { Handle } from '@xyflow/react';
-import * as Icons from '@heroicons/react/24/solid';
-import type { ComponentType } from 'react';
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import * as Tooltip from '@radix-ui/react-tooltip';
-
-type MenuItem = {
-  label: string;
-  url?: string;
-};
-
-interface Data {
-  title: string;
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  step: { id: string; title: string; summary: string; name: string; actor: { name: string } };
-  showTarget?: boolean;
-  showSource?: boolean;
-  custom: {
-    icon?: string;
-    type?: string;
-    title?: string;
-    summary?: string;
-    url?: string;
-    color?: string;
-    properties?: Record<string, string>;
-    menu?: MenuItem[];
-    height?: number;
-  };
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function UserNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, step, custom: customProps } = data as Data;
-
-  const {
-    color = 'blue',
-    title = 'Custom',
-    icon = 'UserIcon',
-    type = 'custom',
-    summary = '',
-    url = '',
-    properties = {},
-    menu = [],
-    height = 5,
-  } = customProps;
-
-  const IconComponent: ComponentType<{ className?: string }> | undefined = Icons[icon as keyof typeof Icons];
-
-  const { actor: { name } = {} } = step;
-
-  const isLongType = type && type.length > 10;
-  const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div
-          className={classNames(`w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400`)}
-          style={{ minHeight: mode === 'full' ? `${height}em` : '2em' }}
-        >
-          <div
-            className={classNames(
-              `bg-gradient-to-b from-${color}-400 to-${color}-600 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100-500`,
-              `border-r-[1px] border-${color}`
-            )}
-          >
-            <IconComponent className="w-4 h-4 opacity-90 text-white absolute top-1 " />
-            {mode === 'full' && (
-              <Tooltip.Provider>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px]  ">
-                      {displayType}
-                    </span>
-                  </Tooltip.Trigger>
-                  {isLongType && (
-                    <Tooltip.Portal>
-                      <Tooltip.Content
-                        className="bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50"
-                        side="right"
-                        sideOffset={5}
-                      >
-                        {type}
-                        <Tooltip.Arrow className="fill-slate-800" />
-                      </Tooltip.Content>
-                    </Tooltip.Portal>
-                  )}
-                </Tooltip.Root>
-              </Tooltip.Provider>
-            )}
-          </div>
-          <div className="p-1 min-w-60 max-w-[min-content]">
-            {targetPosition && <Handle type="target" position={targetPosition} />}
-            {sourcePosition && <Handle type="source" position={sourcePosition} />}
-
-            {(!summary || mode !== 'full') && (
-              <div className="h-full ">
-                <span className="text-sm font-bold block pb-0.5 w-full">{title}</span>
-              </div>
-            )}
-
-            {summary && mode === 'full' && (
-              <div>
-                <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-                  <span className="text-xs font-bold block pb-0.5">{title}</span>
-                </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>
-                    {properties && (
-                      <div className="grid grid-cols-2 gap-x-4 py-1">
-                        {Object.entries(properties).map(([key, value]) => (
-                          <span key={key} className="text-xs" style={{ fontSize: '0.2em' }}>
-                            {key}:{' '}
-                            {typeof value === 'string' && value.startsWith('http') ? (
-                              <a href={value} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
-                                {value}
-                              </a>
-                            ) : (
-                              value
-                            )}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </ContextMenu.Trigger>
-      {menu?.length > 0 && (
-        <ContextMenu.Portal>
-          <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
-            {menu?.map((item) => {
-              return (
-                <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={item.url}>{item.label}</a>
-                </ContextMenu.Item>
-              );
-            })}
-          </ContextMenu.Content>
-        </ContextMenu.Portal>
-      )}
-    </ContextMenu.Root>
-  );
-}

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

@@ -1,63 +0,0 @@
-import { Handle, Position } from '@xyflow/react';
-
-import { nodeComponents, type DataNode } from '@eventcatalog/visualizer';
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import { buildUrl } from '@utils/url-builder';
-const DataComponent = nodeComponents.data;
-
-interface Data {
-  data: {
-    data: {
-      id: string;
-      version: string;
-      name: string;
-    };
-  };
-}
-
-export default function DataNode(props: Data) {
-  const { id, version, name } = props.data.data;
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div className="relative">
-          <Handle
-            type="target"
-            position={Position.Left}
-            style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
-            className="bg-gray-500"
-          />
-          <Handle
-            type="source"
-            position={Position.Right}
-            style={{ width: 10, height: 10, background: 'blue', zIndex: 10 }}
-            className="bg-gray-500"
-          />
-          <DataComponent {...(props as any)} />
-        </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/containers/${id}/${version}`)}>Read documentation</a>
-          </ContextMenu.Item>
-          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-          <ContextMenu.Item asChild>
-            <a
-              href={buildUrl(`/docs/containers/${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/DataProduct.tsx

@@ -1,132 +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 { Package } from 'lucide-react';
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-interface DataProductNodeProps {
-  data: {
-    mode: 'simple' | 'full';
-    dataProduct: {
-      id: string;
-      version: string;
-      name: string;
-      summary?: string;
-      inputs?: any[];
-      outputs?: any[];
-      owners?: any[];
-    };
-  };
-  selected?: boolean;
-}
-
-export default function DataProductNode(props: DataProductNodeProps) {
-  const { id, version, name, summary, inputs = [], outputs = [], owners = [] } = props.data.dataProduct;
-  const mode = props.data.mode || 'simple';
-  const nodeLabel = 'Data Product';
-  const rotatedLabel = 'Product';
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div className="relative">
-          <Handle
-            type="target"
-            position={Position.Left}
-            style={{ width: 10, height: 10, background: '#6366f1', zIndex: 10 }}
-            className="bg-indigo-500"
-          />
-          <Handle
-            type="source"
-            position={Position.Right}
-            style={{ width: 10, height: 10, background: '#6366f1', zIndex: 10 }}
-            className="bg-indigo-500"
-          />
-          <div
-            className={classNames(
-              'w-full rounded-md border flex justify-start bg-white text-black',
-              props.selected ? 'border-indigo-600 ring-2 ring-indigo-500 shadow-lg' : 'border-indigo-400'
-            )}
-          >
-            <div
-              className={`bg-gradient-to-b from-indigo-500 to-indigo-700 relative flex items-center w-5 justify-center rounded-l-sm text-indigo-100 border-r-[1px] border-indigo-500`}
-            >
-              <Package className="w-4 h-4 opacity-90 text-white absolute top-1" />
-              {mode === 'full' && (
-                <span
-                  className={'w-1/2 text-center absolute bottom-1 text-[8px] text-white font-bold uppercase tracking-[3px]'}
-                  style={{ transform: 'rotate(-90deg)' }}
-                >
-                  {rotatedLabel}
-                </span>
-              )}
-            </div>
-            <div className="p-1 min-w-60 max-w-[min-content]">
-              <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">
-                    <div
-                      className="text-[8px] font-light overflow-hidden"
-                      style={{
-                        display: '-webkit-box',
-                        WebkitLineClamp: 2,
-                        WebkitBoxOrient: 'vertical',
-                      }}
-                      title={summary}
-                    >
-                      {summary}
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-x-4 py-1">
-                    <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                      Inputs: {inputs.length}
-                    </span>
-                    <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                      Outputs: {outputs.length}
-                    </span>
-                    <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                      Owners: {owners.length}
-                    </span>
-                  </div>
-                </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-indigo-100 rounded-sm flex items-center"
-          >
-            <a href={buildUrl(`/docs/data-products/${id}/${version}`)}>Read documentation</a>
-          </ContextMenu.Item>
-          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
-          <ContextMenu.Item asChild>
-            <a
-              href={buildUrl(`/visualiser/data-products/${id}/${version}`)}
-              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-indigo-100 rounded-sm flex items-center"
-            >
-              View in Visualiser
-            </a>
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}

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

@@ -1,155 +0,0 @@
-import type { CollectionEntry } from 'astro:content';
-import { Handle, useReactFlow, useOnSelectionChange, Position } from '@xyflow/react';
-import * as ContextMenu from '@radix-ui/react-context-menu';
-import { buildUrl } from '@utils/url-builder';
-import { getIcon } from '@utils/badges';
-import { useState } from 'react';
-
-interface Data {
-  mode: 'simple' | 'full';
-  domain: CollectionEntry<'domains'>;
-}
-
-export default function DomainNode({ data, id: nodeId }: any) {
-  const { mode, domain } = data as Data;
-  const reactFlow = useReactFlow();
-  const [highlightedServices, setHighlightedServices] = useState<Set<string>>(new Set());
-
-  const { id, version, name, services = [], styles } = domain.data;
-  const { icon = 'RectangleGroupIcon' } = styles || {};
-
-  const Icon = getIcon(icon);
-  const ServerIcon = getIcon('ServerIcon');
-
-  // Listen for selection changes to highlight connected services
-  useOnSelectionChange({
-    onChange: ({ nodes: selectedNodes }) => {
-      if (selectedNodes.length === 0) {
-        setHighlightedServices(new Set());
-        return;
-      }
-
-      const selectedNode = selectedNodes[0];
-      if (!selectedNode) {
-        setHighlightedServices(new Set());
-        return;
-      }
-
-      // Get all edges
-      const edges = reactFlow.getEdges();
-      const connectedServiceIds = new Set<string>();
-
-      // Find services connected to the selected node
-      edges.forEach((edge) => {
-        if (edge.source === selectedNode.id || edge.target === selectedNode.id) {
-          // Check if this edge connects to our domain
-          if (edge.source === nodeId && edge.sourceHandle) {
-            // Extract service ID from sourceHandle (format: "serviceId-source")
-            const serviceId = edge.sourceHandle.replace('-source', '');
-            connectedServiceIds.add(serviceId);
-          }
-          if (edge.target === nodeId && edge.targetHandle) {
-            // Extract service ID from targetHandle (format: "serviceId-target")
-            const serviceId = edge.targetHandle.replace('-target', '');
-            connectedServiceIds.add(serviceId);
-          }
-        }
-      });
-
-      setHighlightedServices(connectedServiceIds);
-    },
-  });
-
-  return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>
-        <div className="w-full rounded-lg border-2 border-yellow-400 bg-white shadow-lg">
-          <div className="bg-yellow-100 px-3 py-2 flex items-center space-x-2">
-            {Icon && <Icon className="w-4 h-4 text-yellow-700" />}
-            <div>
-              <span className="text-sm font-bold text-yellow-900">{name}</span>
-              <span className="text-xs text-yellow-700 ml-2">v{version}</span>
-            </div>
-          </div>
-          {mode === 'full' && services.length > 0 && (
-            <div>
-              {services.map((service: any, index: number) => {
-                const isHighlighted = highlightedServices.has(service.data.id);
-
-                return (
-                  <ContextMenu.Root key={`${service.data.id}-${index}`}>
-                    <ContextMenu.Trigger asChild>
-                      <div
-                        className={`relative flex items-center justify-between px-3 py-2 cursor-pointer ${index !== services.length - 1 ? 'border-b border-gray-300' : ''} ${isHighlighted ? 'bg-pink-100 border-pink-300' : ''}`}
-                      >
-                        <Handle
-                          type="target"
-                          position={Position.Left}
-                          id={`${service.data.id}-target`}
-                          className="!left-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
-                          style={{ left: '-1px' }}
-                        />
-                        <Handle
-                          type="source"
-                          position={Position.Right}
-                          id={`${service.data.id}-source`}
-                          className="!right-[-1px] !w-2 !h-2 !bg-gray-400 !border !border-gray-500 !rounded-full !z-10"
-                          style={{ right: '-1px' }}
-                        />
-                        <div className="flex items-center space-x-3">
-                          <div className="flex items-center justify-center w-5 h-5 bg-pink-500 rounded">
-                            {ServerIcon && <ServerIcon className="w-3 h-3 text-white" />}
-                          </div>
-                          <span className="text-sm font-medium text-gray-900">{service.data.name || service.data.id}</span>
-                        </div>
-                        <div className="flex items-center space-x-4 text-sm text-gray-600">
-                          <span className="text-xs">v{service.data.version}</span>
-                        </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
-                          className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                          onClick={() =>
-                            (window.location.href = buildUrl(`/docs/services/${service.data.id}/${service.data.version}`))
-                          }
-                        >
-                          View Service Documentation
-                        </ContextMenu.Item>
-                        <ContextMenu.Item
-                          className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-                          onClick={() =>
-                            (window.location.href = buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`))
-                          }
-                        >
-                          View Service Visualizer
-                        </ContextMenu.Item>
-                      </ContextMenu.Content>
-                    </ContextMenu.Portal>
-                  </ContextMenu.Root>
-                );
-              })}
-            </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
-            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-            onClick={() => (window.location.href = buildUrl(`/docs/domains/${id}/${version}`))}
-          >
-            View Domain Documentation
-          </ContextMenu.Item>
-          <ContextMenu.Item
-            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
-            onClick={() => (window.location.href = buildUrl(`/visualiser/domains/${id}/${version}`))}
-          >
-            View Domain Visualizer
-          </ContextMenu.Item>
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
-  );
-}