@eventcatalog/core 2.54.7 → 2.55.0

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

@@ -0,0 +1,24 @@
+import { Handle, Position } from '@xyflow/react';
+
+import { nodeComponents, type ActorNode } from '@eventcatalog/visualizer';
+const ActorComponent = nodeComponents.actor;
+
+export default function ActorNode(props: ActorNode) {
+  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 {...props} />
+    </div>
+  );
+}

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

@@ -1,130 +1,31 @@
-import type { CollectionMessageTypes } from '@types';
-import type { CollectionEntry } from 'astro:content';
-import { Handle } from '@xyflow/react';
+import { Handle, Position } 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 {
-  title: string;
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  channel: CollectionEntry<'channels'>;
-  source: CollectionEntry<CollectionMessageTypes>;
-  target: CollectionEntry<CollectionMessageTypes>;
-  showTarget?: boolean;
-  showSource?: boolean;
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-import { LinkIcon } from '@heroicons/react/24/outline';
-import { getIconForProtocol } from '@utils/protocols';
-
-export default function ChannelNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, channel, source, target } = data as Data;
 
-  const { id, name, version, summary, owners = [], address, protocols = [], styles } = channel.data;
-  const protocol = protocols[0];
-  const { node: { color = 'gray', label } = {}, icon = 'ArrowsRightLeftIcon' } = styles || {};
+import { nodeComponents, type ChannelNode } from '@eventcatalog/visualizer';
+const ChannelComponent = nodeComponents.channel;
 
-  const Icon = getIconForProtocol(protocol);
-
-  const SideBarIcon = getIcon(icon);
-  const nodeLabel = label || channel?.data?.sidebar?.badge || 'Channel';
-  const fontSize = nodeLabel.length > 10 ? '5px' : '9px';
-
-  const getAddress = () => {
-    const sourceChannel = source.data.channels?.find((channel) => channel.id === id);
-    const targetChannel = target.data.channels?.find((channel) => channel.id === id);
-    const sourceParams = sourceChannel?.parameters || {};
-    const targetParams = targetChannel?.parameters || {};
-    const params = { ...sourceParams, ...targetParams };
-
-    let updatedAddress = address;
-    if (params) {
-      Object.keys(params).forEach((key) => {
-        const placeholder = `{${key}}`;
-        if (updatedAddress && updatedAddress.includes(placeholder)) {
-          updatedAddress = updatedAddress.replace(new RegExp(`{${key}}`, 'g'), params[key]);
-        }
-      });
-    }
-
-    return updatedAddress;
-  };
+export default function ChannelNode(props: ChannelNode) {
+  // @ts-ignore
+  const { id, version } = props.data.channel;
 
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger>
-        <div
-          className={classNames(
-            mode === 'simple' ? 'min-h-[3em]' : 'min-h-[6.5em]',
-            `w-full rounded-md border flex justify-start  bg-white text-black border-${color}-400 transform  `
-          )}
-        >
-          <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`
-            )}
-          >
-            {SideBarIcon && <SideBarIcon 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` : '')}>
-              <div className="flex justify-between items-center">
-                <span className="text-xs font-bold block pb-0.5">{name}</span>
-                {Icon && <Icon className="w-5 h-5 opacity-60 p-0.5" />}
-              </div>
-              <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-[10px] py-1 ">
-                  <span className="text-[8px] font-light">{summary}</span>
-                </div>
-                {address && (
-                  <div className="leading-3 py-1 flex flex-col items-start space-y-0.5">
-                    <div className="text-[6px] flex items-center space-x-0.5 ">
-                      <LinkIcon className="w-2 h-2 opacity-60" />
-                      <span className="block font-normal ">{getAddress()}</span>
-                    </div>
-                    {protocols.length > 0 && (
-                      <div className="text-[6px] font-semibold flex space-x-2 items-center ">
-                        {[...protocols].map((protocol, index) => {
-                          const ProtoColIcon = getIconForProtocol(protocol);
-                          return (
-                            <span key={index} className="font-normal flex items-center -ml-[1px] space-x-0.5">
-                              {ProtoColIcon && <ProtoColIcon className="w-2 h-2 opacity-60 inline-block" />}
-                              <span>{protocol}</span>
-                            </span>
-                          );
-                        })}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
+        <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>

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

@@ -1,83 +1,26 @@
-import { ChatBubbleLeftIcon } from '@heroicons/react/16/solid';
-import type { CollectionEntry } from 'astro:content';
-import { Handle } from '@xyflow/react';
+import { Handle, Position } from '@xyflow/react';
 import MessageContextMenu from './MessageContextMenu';
-import { getIcon } from '@utils/badges';
 
-interface Data {
-  title: string;
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  message: CollectionEntry<'commands'>;
-  showTarget?: boolean;
-  showSource?: boolean;
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function CommandNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message } = data as Data;
-
-  const { id, name, version, summary, owners = [], producers = [], consumers = [], schemaPath, styles } = message.data;
-  const { node: { color = 'blue', label } = {}, icon = 'ChatBubbleLeftIcon' } = styles || {};
-
-  const Icon = getIcon(icon);
-  const nodeLabel = label || message?.data?.sidebar?.badge || 'Command';
-  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
+import { nodeComponents, type CommandNode } from '@eventcatalog/visualizer';
+const CommandComponent = nodeComponents.command;
 
+export default function CommandNode(props: CommandNode) {
   return (
-    <MessageContextMenu message={message} messageType="commands">
-      <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 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">{summary}</span>
-              </div>
-              <div className="grid grid-cols-2 gap-x-4 py-1">
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Producers: {producers.length}
-                </span>
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Consumers: {consumers.length}
-                </span>
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Owners: {owners.length}
-                </span>
-              </div>
-            </div>
-          )}
-        </div>
+    <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/Data.tsx

@@ -0,0 +1,24 @@
+import { Handle, Position } from '@xyflow/react';
+
+import { nodeComponents, type DataNode } from '@eventcatalog/visualizer';
+const DataComponent = nodeComponents.data;
+
+export default function DataNode(props: DataNode) {
+  return (
+    <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} />
+    </div>
+  );
+}

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

@@ -1,90 +1,28 @@
-import { BoltIcon } from '@heroicons/react/16/solid';
-import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
 import MessageContextMenu from './MessageContextMenu';
-import { getIcon } from '@utils/badges';
-interface Data {
-  title: string;
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  message: CollectionEntry<'events'>;
-  showTarget?: boolean;
-  showSource?: boolean;
-  group?: {
-    type: string;
-    value: string;
-  };
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function EventNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message, group } = data as Data;
-  const { name, version, summary, owners = [], producers = [], consumers = [], styles } = message.data;
-  const { node: { color = 'orange', label } = {}, icon = 'BoltIcon' } = styles || {};
+import { Position } from '@xyflow/react';
 
-  const Icon = getIcon(icon);
-  const nodeLabel = label || message?.data?.sidebar?.badge || 'Event';
-  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
+// 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={message} messageType="events">
-      <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 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">{summary}</span>
-              </div>
-              <div className="grid grid-cols-2 gap-x-4 py-1">
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Producers: {producers.length}
-                </span>
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Consumers: {consumers.length}
-                </span>
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Owners: {owners.length}
-                </span>
-                {group && (
-                  <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                    {group.type}: {group.value}
-                  </span>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
+    <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/ExternalSystem2.tsx

@@ -0,0 +1,24 @@
+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/MessageContextMenu.tsx

@@ -1,16 +1,22 @@
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import { buildUrl } from '@utils/url-builder';
-import type { CollectionEntry } from 'astro:content';
 import type { CollectionMessageTypes } from '@types';
 interface Data {
-  message: CollectionEntry<CollectionMessageTypes>;
+  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.data;
+  const { id, version, name, schemaPath } = message;
+
+  if (!id) return null;
 
   return (
     <ContextMenu.Root>

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

@@ -1,82 +1,27 @@
-import { MagnifyingGlassIcon } from '@heroicons/react/16/solid';
-import type { CollectionEntry } from 'astro:content';
 import { Handle } from '@xyflow/react';
 import MessageContextMenu from './MessageContextMenu';
-import { getIcon } from '@utils/badges';
-interface Data {
-  title: string;
-  label: string;
-  bgColor: string;
-  color: string;
-  mode: 'simple' | 'full';
-  message: CollectionEntry<'queries'>;
-}
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function QueryNode({ data, sourcePosition, targetPosition }: any) {
-  const { mode, message } = data as Data;
-
-  const { name, version, summary, owners = [], producers = [], consumers = [], styles } = message.data;
-  const { node: { color = 'green', label } = {}, icon = 'MagnifyingGlassIcon' } = styles || {};
+import { Position } from '@xyflow/react';
 
-  const Icon = getIcon(icon);
-  const nodeLabel = label || message?.data?.sidebar?.badge || 'Query';
-  const fontSize = nodeLabel.length > 10 ? '7px' : '9px';
-  const renderTarget = true;
-  const renderSource = true;
+import { nodeComponents, type QueryNode } from '@eventcatalog/visualizer';
+const QueryComponent = nodeComponents.query;
 
+export default function QueryNode(props: QueryNode) {
   return (
-    <MessageContextMenu message={message} messageType="queries">
-      <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]">
-          {renderTarget && <Handle type="target" position={targetPosition} />}
-          {renderSource && <Handle type="source" position={sourcePosition} />}
-          <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
-            <span className="text-xs font-bold block 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">{summary}</span>
-              </div>
-              <div className="grid grid-cols-2 gap-x-4 py-1">
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Producers: {producers.length}
-                </span>
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Consumers: {consumers.length}
-                </span>
-                <span className="text-xs" style={{ fontSize: '0.2em' }}>
-                  Owners: {owners.length}
-                </span>
-              </div>
-            </div>
-          )}
-        </div>
+    <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>
   );