@eventcatalog/visualiser 0.0.1

package/README.md

@@ -0,0 +1,3 @@
+# @eventcatalog/visualizer
+
+EventCatalog Visualizer Package

package/dist/index.d.mts

@@ -0,0 +1,549 @@
+import { Node, Connection, MarkerType, Edge, NodeTypes, EdgeTypes, EdgeProps, ReactFlowJsonObject } from '@xyflow/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
+import dagre from 'dagre';
+
+/**
+ * EventCatalog resource mode
+ */
+type EventCatalogResource = {
+    mode: "simple" | "full";
+    collection?: string;
+    filePath?: string;
+    id?: string;
+};
+/**
+ * Message types (Events, Commands, Queries)
+ */
+type Message = {
+    name: string;
+    version: string;
+    summary: string;
+    owners?: string[];
+    producers?: string[];
+    consumers?: string[];
+};
+/**
+ * Service type
+ */
+type Service$1 = {
+    name: string;
+    version: string;
+    summary: string;
+    owners?: string[];
+    sends?: string[];
+    receives?: string[];
+};
+/**
+ * Channel type
+ */
+type Channel$1 = {
+    name: string;
+    version: string;
+    summary: string;
+    owners?: string[];
+    parameters?: Record<string, string>;
+    protocols?: string[];
+    address?: string;
+};
+/**
+ * External System type
+ */
+type ExternalSystem$1 = {
+    name: string;
+    version: string;
+    summary: string;
+};
+/**
+ * Data type
+ */
+type Data$1 = {
+    name: string;
+    version: string;
+    summary: string;
+    owners?: string[];
+    type?: string;
+    schemas?: string[];
+};
+/**
+ * View type
+ */
+type View$1 = {
+    name: string;
+    version: string;
+    summary: string;
+    owners?: string[];
+    screenshot?: string;
+};
+/**
+ * Generic node data structure - framework agnostic
+ */
+interface BaseNodeData {
+    id: string;
+    version?: string;
+    name?: string;
+    summary?: string;
+    markdown?: string;
+    badges?: Array<{
+        content: string;
+        textColor?: string;
+        backgroundColor?: string;
+    }>;
+    group?: {
+        id: string;
+        name: string;
+        type: string;
+    };
+    [key: string]: any;
+}
+/**
+ * Node types supported by the visualizer
+ */
+type NodeType = "service" | "services" | "event" | "events" | "command" | "commands" | "query" | "queries" | "domain" | "domains" | "flow" | "flows" | "channel" | "channels" | "entity" | "entities" | "step" | "user" | "custom" | "externalSystem" | "external-system" | "data" | "view" | "actor" | "data-product" | "data-products" | "note";
+/**
+ * Edge types supported by the visualizer
+ */
+type EdgeType = "default" | "animated" | "multiline" | "flow-edge";
+/**
+ * Callback types for framework integration
+ */
+interface VisualizerCallbacks {
+    /** Called when a node is clicked */
+    onNodeClick?: (node: Node<BaseNodeData>) => void;
+    /** Called to build a URL for a node (for linking) */
+    onBuildNodeUrl?: (node: Node<BaseNodeData>) => string;
+    /** Called when navigation should occur */
+    onNavigate?: (url: string) => void;
+}
+/**
+ * Configuration for node registration
+ */
+interface NodeConfiguration {
+    type: string;
+    icon: React.ComponentType;
+    color: string;
+    targetCanConnectTo?: string[];
+    sourceCanConnectTo?: string[];
+    validateConnection?: (connection: Connection) => boolean;
+    getEdgeOptions?: (connection: Connection) => {
+        label: string;
+        markerEnd: {
+            type: MarkerType;
+            color: string;
+        };
+    };
+    defaultData?: any;
+    editor?: {
+        title: string;
+        subtitle: string;
+        schema: any;
+    };
+}
+/**
+ * Registered node type
+ */
+type RegisteredNode = {
+    type: string;
+    category: string;
+    component: React.ComponentType<any>;
+    configuration: NodeConfiguration;
+};
+/**
+ * Node category
+ */
+type NodeCategory = {
+    type: string;
+    label: string;
+    icon: React.ComponentType;
+};
+/**
+ * Context menu item for node right-click menus
+ */
+type ContextMenuItem = {
+    label: string;
+    href: string;
+    download?: string;
+    external?: boolean;
+    separator?: boolean;
+};
+/**
+ * Visualizer mode
+ */
+type VisualizerMode = "full" | "simple";
+/**
+ * Link to other visualizer views
+ */
+interface VisualizerLink {
+    label: string;
+    url: string;
+}
+
+interface NodeGraphProps {
+    id: string;
+    title?: string;
+    href?: string;
+    hrefLabel?: string;
+    nodes: Node[];
+    edges: Edge[];
+    linkTo?: "docs" | "visualiser";
+    includeKey?: boolean;
+    footerLabel?: string;
+    linksToVisualiser?: boolean;
+    links?: {
+        label: string;
+        url: string;
+    }[];
+    mode?: "full" | "simple";
+    portalId?: string;
+    showFlowWalkthrough?: boolean;
+    showSearch?: boolean;
+    zoomOnScroll?: boolean;
+    designId?: string;
+    isChatEnabled?: boolean;
+    maxTextSize?: number;
+    isDevMode?: boolean;
+    resourceKey?: string;
+    onNodeClick?: (node: Node) => void;
+    onBuildUrl?: (path: string) => string;
+    onNavigate?: (url: string) => void;
+    onSaveLayout?: (resourceKey: string, positions: Record<string, {
+        x: number;
+        y: number;
+    }>) => Promise<boolean>;
+    onResetLayout?: (resourceKey: string) => Promise<boolean>;
+}
+declare const NodeGraph: ({ id, nodes, edges, title, href, linkTo, hrefLabel, includeKey, footerLabel, linksToVisualiser, links, mode, portalId, showFlowWalkthrough, showSearch, zoomOnScroll, designId, isChatEnabled, maxTextSize, isDevMode, resourceKey, onNodeClick, onBuildUrl, onNavigate, onSaveLayout, onResetLayout, }: NodeGraphProps) => react_jsx_runtime.JSX.Element | null;
+
+interface MermaidViewProps {
+    nodes: Node[];
+    edges: Edge[];
+    maxTextSize?: number;
+}
+declare const MermaidView: ({ nodes, edges, maxTextSize, }: MermaidViewProps) => react_jsx_runtime.JSX.Element;
+
+interface MessageData {
+    name: string;
+    version?: string;
+}
+interface ServiceData {
+    name: string;
+    version?: string;
+}
+interface DomainData {
+    name: string;
+    version?: string;
+}
+interface EntityData {
+    name: string;
+    version?: string;
+}
+interface NodeDataContent extends Record<string, unknown> {
+    message?: {
+        data: MessageData;
+    };
+    service?: {
+        data: ServiceData;
+    };
+    domain?: {
+        data: DomainData;
+    };
+    entity?: {
+        data: EntityData;
+    };
+    name?: string;
+    version?: string;
+}
+type CustomNode$1 = Node<NodeDataContent>;
+interface VisualiserSearchProps {
+    nodes: CustomNode$1[];
+    onNodeSelect: (node: CustomNode$1) => void;
+    onClear: () => void;
+    onPaneClick?: () => void;
+}
+interface VisualiserSearchRef {
+    hideSuggestions: () => void;
+}
+declare const VisualiserSearch: react.ForwardRefExoticComponent<VisualiserSearchProps & react.RefAttributes<VisualiserSearchRef>>;
+
+interface NodeData {
+    step?: {
+        title?: string;
+        summary?: string;
+    };
+    service?: {
+        data?: {
+            name?: string;
+            summary?: string;
+        };
+    };
+    message?: {
+        data?: {
+            name?: string;
+            summary?: string;
+        };
+    };
+    flow?: {
+        data?: {
+            name?: string;
+        };
+    };
+    custom?: {
+        title?: string;
+        label?: string;
+        summary?: string;
+    };
+    actor?: {
+        label?: string;
+    };
+    externalSystem?: {
+        label?: string;
+    };
+}
+interface CustomNode {
+    id: string;
+    data: NodeData;
+}
+interface StepWalkthroughProps {
+    nodes: CustomNode[];
+    edges: Edge[];
+    isFlowVisualization: boolean;
+    onStepChange: (nodeId: string | null, highlightPaths?: string[], shouldZoomOut?: boolean) => void;
+    mode?: "full" | "simple";
+}
+declare function StepWalkthrough({ nodes, edges, isFlowVisualization, onStepChange, mode, }: StepWalkthroughProps): react_jsx_runtime.JSX.Element | null;
+
+interface FocusModeModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    initialNodeId: string | null;
+    nodes: Node[];
+    edges: Edge[];
+    nodeTypes: NodeTypes;
+    edgeTypes: EdgeTypes;
+}
+declare const FocusModeModal: react__default.FC<FocusModeModalProps>;
+
+interface NodeContextMenuProps {
+    items: ContextMenuItem[];
+    children: React.ReactNode;
+}
+declare function NodeContextMenu({ items, children, }: NodeContextMenuProps): react_jsx_runtime.JSX.Element;
+
+type MessageNodeData = EventCatalogResource & {
+    message: Message;
+};
+type EventNode = Node<MessageNodeData, "event">;
+declare function Event(props: EventNode): react_jsx_runtime.JSX.Element;
+
+declare const _default$3: NodeConfiguration;
+
+type CommandNodeData = EventCatalogResource & {
+    message: Message;
+};
+type CommandNode = Node<CommandNodeData, "command">;
+declare function Command(props: CommandNode): react_jsx_runtime.JSX.Element;
+
+type QueryNodeData = EventCatalogResource & {
+    message: Message;
+};
+type QueryNode = Node<QueryNodeData, "query">;
+declare function Query(props: QueryNode): react_jsx_runtime.JSX.Element;
+
+type ServiceNodeData = EventCatalogResource & {
+    service: Service$1;
+};
+type ServiceNode = Node<ServiceNodeData, "service">;
+declare function Service(props: ServiceNode): react_jsx_runtime.JSX.Element;
+
+type ChannelNodeData = EventCatalogResource & {
+    channel: Channel$1;
+};
+type ChannelNode = Node<ChannelNodeData, "channel">;
+declare function Channel(props: ChannelNode): react_jsx_runtime.JSX.Element;
+
+type NoteNodeData = {
+    id: string;
+    text: string;
+    color?: string;
+    readOnly?: boolean;
+};
+type NoteNode = Node<NoteNodeData, "note">;
+interface NoteNodeProps extends NoteNode {
+    onTextChange?: (id: string, text: string) => void;
+    onColorChange?: (id: string, color: string) => void;
+    showResizer?: boolean;
+    readOnly?: boolean;
+}
+declare function NoteNodeComponent({ id, data, selected, onTextChange, onColorChange, readOnly, }: NoteNodeProps): react_jsx_runtime.JSX.Element;
+
+type DataNodeData = EventCatalogResource & {
+    data: Data$1;
+};
+type DataNode = Node<DataNodeData, "data">;
+declare function Data(props: DataNode): react_jsx_runtime.JSX.Element;
+
+declare const _default$2: NodeConfiguration;
+
+type ViewNodeData = EventCatalogResource & {
+    view: View$1;
+};
+type ViewNode = Node<ViewNodeData, "view">;
+declare function View(props: ViewNode): react_jsx_runtime.JSX.Element;
+
+type ActorNodeData = EventCatalogResource & {
+    name: string;
+    summary: string;
+};
+type ActorNode = Node<ActorNodeData, "actor">;
+declare function Actor(props: ActorNode): react_jsx_runtime.JSX.Element;
+
+declare const _default$1: NodeConfiguration;
+
+type ExternalSystemNodeData = EventCatalogResource & {
+    externalSystem: ExternalSystem$1;
+};
+type ExternalSystemNode$1 = Node<ExternalSystemNodeData, "external-system">;
+declare function ExternalSystem(props: ExternalSystemNode$1): react_jsx_runtime.JSX.Element;
+
+declare const _default: NodeConfiguration;
+
+declare function UserNode$1({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+
+declare function DomainNode({ data, id: nodeId }: any): react_jsx_runtime.JSX.Element;
+
+declare function EntityNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+
+declare function FlowNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+
+declare function StepNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+
+declare function UserNode({ data, sourcePosition, targetPosition, }: any): react_jsx_runtime.JSX.Element;
+
+interface DataProductNodeProps {
+    data: {
+        mode: "simple" | "full";
+        dataProduct: {
+            id: string;
+            version: string;
+            name: string;
+            summary?: string;
+            inputs?: any[];
+            outputs?: any[];
+            owners?: any[];
+        };
+    };
+    selected?: boolean;
+}
+declare function DataProductNode(props: DataProductNodeProps): react_jsx_runtime.JSX.Element;
+
+declare function ExternalSystemNode(props: any): react_jsx_runtime.JSX.Element;
+
+declare const SERVICE: string[];
+declare const EVENT: string[];
+declare const QUERY: string[];
+declare const COMMAND: string[];
+declare const CHANNEL: string[];
+declare const ACTOR: string[];
+declare const DATA: string[];
+declare const VIEW: string[];
+declare const MESSAGE: string[];
+
+declare const nodeComponents: {
+    event: typeof Event;
+    command: typeof Command;
+    query: typeof Query;
+    service: typeof Service;
+    channel: typeof Channel;
+    note: typeof NoteNodeComponent;
+    externalSystem: typeof ExternalSystem;
+    data: typeof Data;
+    view: typeof View;
+    actor: typeof Actor;
+    custom: typeof UserNode$1;
+    domain: typeof DomainNode;
+    entity: typeof EntityNode;
+    flow: typeof FlowNode;
+    step: typeof StepNode;
+    user: typeof UserNode;
+    dataProduct: typeof DataProductNode;
+    externalSystem2: typeof ExternalSystemNode;
+};
+declare const nodeConfigs: {
+    event: NodeConfiguration;
+    data: NodeConfiguration;
+    actor: NodeConfiguration;
+    externalSystem: NodeConfiguration;
+};
+
+declare const AnimatedMessageEdge: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element;
+
+interface EdgeData {
+    message?: {
+        collection?: string;
+    };
+    opacity?: number;
+    animated?: boolean;
+}
+interface CustomEdgeProps extends Omit<EdgeProps, "data"> {
+    data?: EdgeData;
+}
+declare function CustomEdge({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, label, labelStyle, data, }: CustomEdgeProps): react_jsx_runtime.JSX.Element;
+
+declare function MultilineEdgeLabel(props: EdgeProps): react_jsx_runtime.JSX.Element;
+
+declare const edgeTypes: {
+    animated: ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, label, markerEnd, markerStart, }: any) => react_jsx_runtime.JSX.Element;
+    "flow-edge": typeof CustomEdge;
+    multiline: typeof MultilineEdgeLabel;
+};
+
+/**
+ * Mermaid Export Utility
+ * Converts React Flow nodes and edges to Mermaid flowchart syntax
+ */
+interface MermaidExportOptions {
+    /** Include class definitions for styling */
+    includeStyles?: boolean;
+    /** Direction of the flowchart: LR (left-right), TB (top-bottom), etc. */
+    direction?: "LR" | "TB" | "RL" | "BT";
+}
+/**
+ * Convert React Flow nodes and edges to Mermaid flowchart syntax
+ */
+declare function convertToMermaid(nodes: Node[], edges: Edge[], options?: MermaidExportOptions): string;
+
+declare const exportNodeGraphForStudio: (data: ReactFlowJsonObject) => ReactFlowJsonObject;
+
+interface BaseCollectionData {
+    id: string;
+    version: string;
+}
+interface CollectionItem {
+    collection: string;
+    data: BaseCollectionData;
+}
+interface MessageCollectionItem extends CollectionItem {
+    collection: "commands" | "events" | "queries";
+}
+declare const generateIdForNode: (node: CollectionItem) => string;
+declare const generateIdForNodes: (nodes: any) => any;
+declare const generatedIdForEdge: (source: CollectionItem, target: CollectionItem) => string;
+declare const getColorFromString: (id: string) => string;
+declare const getEdgeLabelForServiceAsTarget: (data: MessageCollectionItem) => "invokes" | "publishes \nevent" | "requests" | "sends to";
+declare const getEdgeLabelForMessageAsSource: (data: MessageCollectionItem, throughChannel?: boolean) => "sends to" | "accepts" | "subscribed to" | "subscribed by";
+declare const calculatedNodes: (flow: dagre.graphlib.Graph, nodes: Node[]) => any[];
+declare const createDagreGraph: ({ ranksep, nodesep, ...rest }: any) => dagre.graphlib.Graph<{}>;
+declare const createEdge: (edgeOptions: Edge) => Edge;
+declare const createNode: (values: Node) => Node;
+type DagreGraph = any;
+declare const getNodesAndEdgesFromDagre: ({ nodes, edges, defaultFlow, }: {
+    nodes: Node[];
+    edges: Edge[];
+    defaultFlow?: DagreGraph;
+}) => {
+    nodes: any[];
+    edges: Edge[];
+};
+
+export { ACTOR, Actor, type ActorNode, AnimatedMessageEdge, type BaseNodeData, CHANNEL, COMMAND, type Channel$1 as Channel, type ChannelNode, Command, type CommandNode, type ContextMenuItem, UserNode$1 as CustomNode, DATA, type Data$1 as Data, type DataNode, DataProductNode, DomainNode, EVENT, type EdgeType, EntityNode, Event, type EventCatalogResource, type EventNode, type ExternalSystem$1 as ExternalSystem, ExternalSystemNode as ExternalSystem2Node, type ExternalSystemNode$1 as ExternalSystemNode, CustomEdge as FlowEdge, FlowNode, FocusModeModal, MESSAGE, type MermaidExportOptions, MermaidView, type Message, MultilineEdgeLabel, type NodeCategory, type NodeConfiguration, NodeContextMenu, NodeGraph, type NodeType, NoteNodeComponent as Note, type NoteNode, QUERY, Query, type QueryNode, type RegisteredNode, SERVICE, type Service$1 as Service, type ServiceNode, StepNode, StepWalkthrough, UserNode, VIEW, type View$1 as View, type ViewNode, VisualiserSearch, type VisualizerCallbacks, type VisualizerLink, type VisualizerMode, _default$1 as actorConfig, calculatedNodes, convertToMermaid, createDagreGraph, createEdge, createNode, _default$2 as dataNodeConfig, edgeTypes, _default$3 as eventConfig, exportNodeGraphForStudio, _default as externalSystemConfig, generateIdForNode, generateIdForNodes, generatedIdForEdge, getColorFromString, getEdgeLabelForMessageAsSource, getEdgeLabelForServiceAsTarget, getNodesAndEdgesFromDagre, nodeComponents, nodeConfigs };