@eventcatalog/core 2.30.4 → 2.30.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/analytics/analytics.cjs +1 -1
- package/dist/analytics/analytics.js +2 -2
- package/dist/analytics/log-build.cjs +1 -1
- package/dist/analytics/log-build.js +3 -3
- package/dist/{chunk-P54T6SGV.js → chunk-2XYH6NJX.js} +1 -1
- package/dist/{chunk-WTTONTOG.js → chunk-6UFFLZ4K.js} +1 -1
- package/dist/{chunk-YMAOGVDZ.js → chunk-LGRE6475.js} +1 -1
- package/dist/constants.cjs +1 -1
- package/dist/constants.js +1 -1
- package/dist/eventcatalog.cjs +1 -1
- package/dist/eventcatalog.js +3 -3
- package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx +2 -0
- package/eventcatalog/src/components/MDX/NodeGraph/Nodes/Custom.tsx +161 -0
- package/eventcatalog/src/components/MDX/Tabs/Tabs.astro +2 -1
- package/eventcatalog/src/content.config.ts +20 -0
- package/eventcatalog/src/utils/node-graphs/flows-node-graph.ts +2 -1
- package/eventcatalog/tailwind.config.mjs +2 -2
- package/package.json +2 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
log_build_default
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-
|
|
5
|
-
import "../chunk-
|
|
3
|
+
} from "../chunk-6UFFLZ4K.js";
|
|
4
|
+
import "../chunk-LGRE6475.js";
|
|
5
|
+
import "../chunk-2XYH6NJX.js";
|
|
6
6
|
import "../chunk-E7TXTI7G.js";
|
|
7
7
|
export {
|
|
8
8
|
log_build_default as default
|
package/dist/constants.cjs
CHANGED
package/dist/constants.js
CHANGED
package/dist/eventcatalog.cjs
CHANGED
package/dist/eventcatalog.js
CHANGED
|
@@ -6,15 +6,15 @@ import {
|
|
|
6
6
|
} from "./chunk-UKJ7F5WR.js";
|
|
7
7
|
import {
|
|
8
8
|
log_build_default
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import "./chunk-
|
|
9
|
+
} from "./chunk-6UFFLZ4K.js";
|
|
10
|
+
import "./chunk-LGRE6475.js";
|
|
11
11
|
import {
|
|
12
12
|
catalogToAstro,
|
|
13
13
|
checkAndConvertMdToMdx
|
|
14
14
|
} from "./chunk-7SI5EVOX.js";
|
|
15
15
|
import {
|
|
16
16
|
VERSION
|
|
17
|
-
} from "./chunk-
|
|
17
|
+
} from "./chunk-2XYH6NJX.js";
|
|
18
18
|
import {
|
|
19
19
|
isBackstagePluginEnabled
|
|
20
20
|
} from "./chunk-XMDPVKIJ.js";
|
|
@@ -25,6 +25,7 @@ import CommandNode from './Nodes/Command';
|
|
|
25
25
|
import ExternalSystemNode from './Nodes/ExternalSystem';
|
|
26
26
|
import AnimatedMessageEdge from './Edges/AnimatedMessageEdge';
|
|
27
27
|
import FlowEdge from './Edges/FlowEdge';
|
|
28
|
+
import CustomNode from './Nodes/Custom';
|
|
28
29
|
|
|
29
30
|
import type { CollectionEntry } from 'astro:content';
|
|
30
31
|
import { navigate } from 'astro:transitions/client';
|
|
@@ -69,6 +70,7 @@ const NodeGraphBuilder = ({
|
|
|
69
70
|
step: StepNode,
|
|
70
71
|
user: UserNode,
|
|
71
72
|
actor: UserNode,
|
|
73
|
+
custom: CustomNode,
|
|
72
74
|
externalSystem: ExternalSystemNode,
|
|
73
75
|
}),
|
|
74
76
|
[]
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import { Handle } from '@xyflow/react';
|
|
2
|
+
import * as Icons from '@heroicons/react/24/solid';
|
|
3
|
+
import type { ComponentType } from 'react';
|
|
4
|
+
import * as ContextMenu from '@radix-ui/react-context-menu';
|
|
5
|
+
import * as Tooltip from '@radix-ui/react-tooltip';
|
|
6
|
+
|
|
7
|
+
type MenuItem = {
|
|
8
|
+
label: string;
|
|
9
|
+
url?: string;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
interface Data {
|
|
13
|
+
title: string;
|
|
14
|
+
label: string;
|
|
15
|
+
bgColor: string;
|
|
16
|
+
color: string;
|
|
17
|
+
mode: 'simple' | 'full';
|
|
18
|
+
step: { id: string; title: string; summary: string; name: string; actor: { name: string } };
|
|
19
|
+
showTarget?: boolean;
|
|
20
|
+
showSource?: boolean;
|
|
21
|
+
custom: {
|
|
22
|
+
icon?: string;
|
|
23
|
+
type?: string;
|
|
24
|
+
title?: string;
|
|
25
|
+
summary?: string;
|
|
26
|
+
url?: string;
|
|
27
|
+
color?: string;
|
|
28
|
+
properties?: Record<string, string>;
|
|
29
|
+
menu?: MenuItem[];
|
|
30
|
+
height?: number;
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function classNames(...classes: any) {
|
|
35
|
+
return classes.filter(Boolean).join(' ');
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export default function UserNode({ data, sourcePosition, targetPosition }: any) {
|
|
39
|
+
const { mode, step, custom: customProps } = data as Data;
|
|
40
|
+
|
|
41
|
+
console.log('step', customProps);
|
|
42
|
+
|
|
43
|
+
const {
|
|
44
|
+
color = 'blue',
|
|
45
|
+
title = 'Custom',
|
|
46
|
+
icon = 'UserIcon',
|
|
47
|
+
type = 'custom',
|
|
48
|
+
summary = '',
|
|
49
|
+
url = '',
|
|
50
|
+
properties = {},
|
|
51
|
+
menu = [],
|
|
52
|
+
height = 5,
|
|
53
|
+
} = customProps;
|
|
54
|
+
|
|
55
|
+
const IconComponent: ComponentType<{ className?: string }> | undefined = Icons[icon as keyof typeof Icons];
|
|
56
|
+
|
|
57
|
+
const { actor: { name } = {} } = step;
|
|
58
|
+
|
|
59
|
+
const isLongType = type && type.length > 10;
|
|
60
|
+
const displayType = isLongType ? `${type.substring(0, 10)}...` : type;
|
|
61
|
+
|
|
62
|
+
return (
|
|
63
|
+
<ContextMenu.Root>
|
|
64
|
+
<ContextMenu.Trigger>
|
|
65
|
+
<div
|
|
66
|
+
className={classNames(`w-full rounded-md border flex justify-start bg-white text-black border-${color}-400`)}
|
|
67
|
+
style={{ minHeight: mode === 'full' ? `${height}em` : '2em' }}
|
|
68
|
+
>
|
|
69
|
+
<div
|
|
70
|
+
className={classNames(
|
|
71
|
+
`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`,
|
|
72
|
+
`border-r-[1px] border-${color}`
|
|
73
|
+
)}
|
|
74
|
+
>
|
|
75
|
+
<IconComponent className="w-4 h-4 opacity-90 text-white absolute top-1 " />
|
|
76
|
+
{mode === 'full' && (
|
|
77
|
+
<Tooltip.Provider>
|
|
78
|
+
<Tooltip.Root>
|
|
79
|
+
<Tooltip.Trigger asChild>
|
|
80
|
+
<span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
|
|
81
|
+
{displayType}
|
|
82
|
+
</span>
|
|
83
|
+
</Tooltip.Trigger>
|
|
84
|
+
{isLongType && (
|
|
85
|
+
<Tooltip.Portal>
|
|
86
|
+
<Tooltip.Content
|
|
87
|
+
className="bg-slate-800 text-white rounded px-2 py-1 text-xs shadow-md z-50"
|
|
88
|
+
side="right"
|
|
89
|
+
sideOffset={5}
|
|
90
|
+
>
|
|
91
|
+
{type}
|
|
92
|
+
<Tooltip.Arrow className="fill-slate-800" />
|
|
93
|
+
</Tooltip.Content>
|
|
94
|
+
</Tooltip.Portal>
|
|
95
|
+
)}
|
|
96
|
+
</Tooltip.Root>
|
|
97
|
+
</Tooltip.Provider>
|
|
98
|
+
)}
|
|
99
|
+
</div>
|
|
100
|
+
<div className="p-1 min-w-60 max-w-[min-content]">
|
|
101
|
+
{targetPosition && <Handle type="target" position={targetPosition} />}
|
|
102
|
+
{sourcePosition && <Handle type="source" position={sourcePosition} />}
|
|
103
|
+
|
|
104
|
+
{(!summary || mode !== 'full') && (
|
|
105
|
+
<div className="h-full ">
|
|
106
|
+
<span className="text-sm font-bold block pb-0.5 block w-full">{title}</span>
|
|
107
|
+
</div>
|
|
108
|
+
)}
|
|
109
|
+
|
|
110
|
+
{summary && mode === 'full' && (
|
|
111
|
+
<div>
|
|
112
|
+
<div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
|
|
113
|
+
<span className="text-xs font-bold block pb-0.5">{title}</span>
|
|
114
|
+
</div>
|
|
115
|
+
{mode === 'full' && (
|
|
116
|
+
<div className="divide-y divide-gray-200 ">
|
|
117
|
+
<div className="leading-3 py-1">
|
|
118
|
+
<span className="text-[8px] font-light">{summary}</span>
|
|
119
|
+
</div>
|
|
120
|
+
{properties && (
|
|
121
|
+
<div className="grid grid-cols-2 gap-x-4 py-1">
|
|
122
|
+
{Object.entries(properties).map(([key, value]) => (
|
|
123
|
+
<span key={key} className="text-xs" style={{ fontSize: '0.2em' }}>
|
|
124
|
+
{key}:{' '}
|
|
125
|
+
{typeof value === 'string' && value.startsWith('http') ? (
|
|
126
|
+
<a href={value} target="_blank" rel="noopener noreferrer" className="text-blue-500 underline">
|
|
127
|
+
{value}
|
|
128
|
+
</a>
|
|
129
|
+
) : (
|
|
130
|
+
value
|
|
131
|
+
)}
|
|
132
|
+
</span>
|
|
133
|
+
))}
|
|
134
|
+
</div>
|
|
135
|
+
)}
|
|
136
|
+
</div>
|
|
137
|
+
)}
|
|
138
|
+
</div>
|
|
139
|
+
)}
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</ContextMenu.Trigger>
|
|
143
|
+
{menu?.length > 0 && (
|
|
144
|
+
<ContextMenu.Portal>
|
|
145
|
+
<ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
|
|
146
|
+
{menu?.map((item) => {
|
|
147
|
+
return (
|
|
148
|
+
<ContextMenu.Item
|
|
149
|
+
asChild
|
|
150
|
+
className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-orange-100 rounded-sm flex items-center"
|
|
151
|
+
>
|
|
152
|
+
<a href={item.url}>{item.label}</a>
|
|
153
|
+
</ContextMenu.Item>
|
|
154
|
+
);
|
|
155
|
+
})}
|
|
156
|
+
</ContextMenu.Content>
|
|
157
|
+
</ContextMenu.Portal>
|
|
158
|
+
)}
|
|
159
|
+
</ContextMenu.Root>
|
|
160
|
+
);
|
|
161
|
+
}
|
|
@@ -17,7 +17,8 @@ const tabItems: TabItem[] = await Promise.all(
|
|
|
17
17
|
.filter((item: string) => item.trim())
|
|
18
18
|
.map(async (item: string, index: number) => {
|
|
19
19
|
const titleMatch = item.match(/button>([^<]+)</);
|
|
20
|
-
|
|
20
|
+
let title = titleMatch ? titleMatch[1].trim() : ``;
|
|
21
|
+
title = title || `Tab ${index + 1}`;
|
|
21
22
|
const content = item.replace(/<button>[^<]+<\/button>/, '');
|
|
22
23
|
return {
|
|
23
24
|
title,
|
|
@@ -159,6 +159,26 @@ const flows = defineCollection({
|
|
|
159
159
|
name: z.string(),
|
|
160
160
|
})
|
|
161
161
|
.optional(),
|
|
162
|
+
custom: z
|
|
163
|
+
.object({
|
|
164
|
+
title: z.string(),
|
|
165
|
+
icon: z.string().optional(),
|
|
166
|
+
type: z.string().optional(),
|
|
167
|
+
summary: z.string().optional(),
|
|
168
|
+
url: z.string().url().optional(),
|
|
169
|
+
color: z.string().optional(),
|
|
170
|
+
properties: z.record(z.union([z.string(), z.number()])).optional(),
|
|
171
|
+
height: z.number().optional(),
|
|
172
|
+
menu: z
|
|
173
|
+
.array(
|
|
174
|
+
z.object({
|
|
175
|
+
label: z.string(),
|
|
176
|
+
url: z.string().url().optional(),
|
|
177
|
+
})
|
|
178
|
+
)
|
|
179
|
+
.optional(),
|
|
180
|
+
})
|
|
181
|
+
.optional(),
|
|
162
182
|
externalSystem: z
|
|
163
183
|
.object({
|
|
164
184
|
name: z.string(),
|
|
@@ -65,6 +65,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
|
|
|
65
65
|
if (step.service) return getServiceNode(step, services);
|
|
66
66
|
if (step.message) return getMessageNode(step, messages);
|
|
67
67
|
if (step.actor) return { ...step, type: 'actor', actor: step.actor };
|
|
68
|
+
if (step.custom) return { ...step, type: 'custom', custom: step.custom };
|
|
68
69
|
if (step.externalSystem) return { ...step, type: 'externalSystem', externalSystem: step.externalSystem };
|
|
69
70
|
return { ...step, type: 'step' };
|
|
70
71
|
});
|
|
@@ -89,7 +90,7 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
|
|
|
89
90
|
if (step.message) node.data.message = step.message;
|
|
90
91
|
if (step.actor) node.data.actor = step.actor;
|
|
91
92
|
if (step.externalSystem) node.data.externalSystem = step.externalSystem;
|
|
92
|
-
|
|
93
|
+
if (step.custom) node.data.custom = step.custom;
|
|
93
94
|
nodes.push(node);
|
|
94
95
|
});
|
|
95
96
|
|
|
@@ -38,8 +38,8 @@ export default {
|
|
|
38
38
|
safelist: [
|
|
39
39
|
{ pattern: /border-.*-(200|400|500)/ },
|
|
40
40
|
{ pattern: /bg-.*-(100|200|400|500)/ },
|
|
41
|
-
{ pattern: /from-.*-(100|200|300|400|500|700)/ },
|
|
42
|
-
{ pattern: /to-.*-(100|200|300|400|500|700)/ },
|
|
41
|
+
{ pattern: /from-.*-(100|200|300|400|500|600|700)/ },
|
|
42
|
+
{ pattern: /to-.*-(100|200|300|400|500|600|700)/ },
|
|
43
43
|
{ pattern: /text-.*-(400|500|800)/ },
|
|
44
44
|
'border-blue-200',
|
|
45
45
|
'border-green-300',
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"url": "https://github.com/event-catalog/eventcatalog.git"
|
|
7
7
|
},
|
|
8
8
|
"type": "module",
|
|
9
|
-
"version": "2.30.
|
|
9
|
+
"version": "2.30.6",
|
|
10
10
|
"publishConfig": {
|
|
11
11
|
"access": "public"
|
|
12
12
|
},
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"@parcel/watcher": "^2.4.1",
|
|
41
41
|
"@radix-ui/react-context-menu": "^2.2.6",
|
|
42
42
|
"@radix-ui/react-dialog": "^1.1.6",
|
|
43
|
+
"@radix-ui/react-tooltip": "^1.1.8",
|
|
43
44
|
"@scalar/api-reference-react": "^0.4.37",
|
|
44
45
|
"@stoplight/json-schema-viewer": "^4.16.4",
|
|
45
46
|
"@tailwindcss/typography": "^0.5.13",
|