@eventcatalogtest/visualizer
Version:
ReactFlow nodes and visualizer components for EventCatalog Studio
183 lines (179 loc) • 6.6 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
EventNode: () => EventNode,
eventConfig: () => config_default,
nodeComponents: () => nodeComponents,
nodeConfigs: () => nodeConfigs,
nodes: () => nodes
});
module.exports = __toCommonJS(index_exports);
// src/nodes/event/EventNode.tsx
var import_lucide_react = require("lucide-react");
var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Zap, { className: "w-4 h-4 opacity-90 text-white absolute top-1" }),
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: "rotate w-1/2 text-center absolute bottom-1 text-[8px] text-white font-bold uppercase tracking-[3px]",
children: nodeLabel
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-1 min-w-60 max-w-[min-content]", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: classNames(mode === "full" ? `border-b border-gray-200` : ""), children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-bold block pt-0.5 pb-0.5", children: name }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[10px] font-light block pt-0.5 pb-0.5", children: [
"v",
version
] }),
mode === "simple" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5", children: nodeLabel })
] })
] }),
mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "divide-y divide-gray-200", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "leading-3 py-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[8px] font-light", children: summary }) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 py-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs", style: { fontSize: "0.2em" }, children: [
"Receives messages: ",
receives.length
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs", style: { fontSize: "0.2em" }, children: [
"Publishes messages: ",
sends.length
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs", style: { fontSize: "0.2em" }, children: [
"Owners: ",
owners.length
] })
] })
] })
] })
] });
}
// src/nodes/event/config.ts
var import_react = require("@xyflow/react");
var import_lucide_react2 = require("lucide-react");
var config_default = {
type: "event",
icon: import_lucide_react2.Zap,
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: import_react.MarkerType.ArrowClosed, color: "#000000" }
};
}
return {
label: "Subscribes",
markerEnd: { type: import_react.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
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
EventNode,
eventConfig,
nodeComponents,
nodeConfigs,
nodes
});
//# sourceMappingURL=index.js.map