@eventcatalogtest/visualizer
Version:
ReactFlow nodes and visualizer components for EventCatalog Studio
152 lines (150 loc) • 4.96 kB
JavaScript
// src/nodes/event/EventNode.tsx
import { Zap } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
function EventNode(props) {
const { id, data, selected } = props;
const {
version,
owners = [],
sends = [],
receives = [],
name,
mode,
summary
} = data;
const nodeLabel = "Event";
return /* @__PURE__ */ jsxs("div", { className: classNames(
"w-full rounded-md border flex justify-start bg-white text-black",
selected ? "border-orange-600 ring-2 ring-orange-500 shadow-lg" : "border-orange-400"
), children: [
/* @__PURE__ */ jsxs(
"div",
{
className: `bg-gradient-to-b from-orange-500 to-orange-700 relative flex items-center w-5 justify-center rounded-l-sm text-orange-100 border-r-[1px] border-orange-500`,
children: [
/* @__PURE__ */ jsx(Zap, { className: "w-4 h-4 opacity-90 text-white absolute top-1" }),
mode === "full" && /* @__PURE__ */ jsx(
"span",
{
className: "rotate w-1/2 text-center absolute bottom-1 text-[8px] text-white font-bold uppercase tracking-[3px]",
children: nodeLabel
}
)
]
}
),
/* @__PURE__ */ jsxs("div", { className: "p-1 min-w-60 max-w-[min-content]", children: [
/* @__PURE__ */ jsxs("div", { className: classNames(mode === "full" ? `border-b border-gray-200` : ""), children: [
/* @__PURE__ */ jsx("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
/* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
/* @__PURE__ */ jsxs("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5", children: [
"v",
version
] }),
mode === "simple" && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5", children: nodeLabel })
] })
] }),
mode === "full" && /* @__PURE__ */ jsxs("div", { className: "divide-y divide-gray-200", children: [
/* @__PURE__ */ jsx("div", { className: "leading-3 py-1", children: /* @__PURE__ */ jsx("span", { className: "text-[8px] font-light", children: summary }) }),
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: [
/* @__PURE__ */ jsxs("span", { className: "text-xs", style: { fontSize: "0.2em" }, children: [
"Receives messages: ",
receives.length
] }),
/* @__PURE__ */ jsxs("span", { className: "text-xs", style: { fontSize: "0.2em" }, children: [
"Publishes messages: ",
sends.length
] }),
/* @__PURE__ */ jsxs("span", { className: "text-xs", style: { fontSize: "0.2em" }, children: [
"Owners: ",
owners.length
] })
] })
] })
] })
] });
}
// src/nodes/event/config.ts
import { MarkerType } from "@xyflow/react";
import { Zap as Zap2 } from "lucide-react";
var config_default = {
type: "event",
icon: Zap2,
color: "orange",
targetCanConnectTo: ["service", "channel"],
sourceCanConnectTo: ["service", "channel"],
validateConnection: (connection) => {
return connection.source !== connection.target;
},
getEdgeOptions: (connection) => {
if (connection.source === "event" && connection.target === "service") {
return {
label: "Publishes",
markerEnd: { type: MarkerType.ArrowClosed, color: "#000000" }
};
}
return {
label: "Subscribes",
markerEnd: { type: MarkerType.ArrowClosed, color: "#000000" }
};
},
defaultData: {
name: "New Event",
version: "0.0.1",
summary: "New event. Click edit to change the details.",
mode: "full"
},
editor: {
title: "Event",
subtitle: "Edit the details of the event",
schema: {
type: "object",
required: ["name", "version"],
properties: {
name: {
type: "string",
title: "Name",
default: "Random value",
description: "The name of the event"
},
version: {
type: "string",
title: "Version",
default: "1.0.0",
description: "The version number (e.g., 1.0.0)",
pattern: "^\\d+\\.\\d+\\.\\d+(?:-[\\w.-]+)?(?:\\+[\\w.-]+)?$"
},
summary: {
type: "string",
title: "Summary",
default: "",
description: "A brief summary of the event"
}
}
}
}
};
// src/index.ts
var nodes = {
event: {
component: EventNode,
config: config_default
}
};
var nodeConfigs = {
event: config_default
};
var nodeComponents = {
event: EventNode
};
export {
EventNode,
config_default as eventConfig,
nodeComponents,
nodeConfigs,
nodes
};
//# sourceMappingURL=index.mjs.map