@eventcatalog/core 2.5.0 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.5.1
+
+### Patch Changes
+
+- 2bbccf8: feat(core): added new MDX component for Flows
+
 ## 2.5.0
 
 ### Minor Changes

package/README.md

@@ -113,7 +113,7 @@ You can see the markdown files that generated the website in the GitHub repo und
 
 Interested in collaborating with us? Our offerings include dedicated support, priority assistance, feature development, custom integrations, and more.
 
-Find more details on our [enterprise plan](https://eventcatalog.dev/enterprise).
+Find more details on our [services page](https://eventcatalog.dev/services).
 
 # Looking for v1?
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "publishConfig": {
     "access": "public"
   },

package/src/components/MDX/Flow/Flow.astro

@@ -0,0 +1,63 @@
+---
+import { getFlows } from '@utils/flows/flows';
+import { getNodesAndEdges } from '@utils/flows/node-graph';
+import Admonition from '@components/MDX/Admonition';
+import NodeGraph from '../NodeGraph/NodeGraph';
+import { getVersionFromCollection } from '@utils/versions/versions';
+
+const { id, version = 'latest', maxHeight, includeKey = true } = Astro.props;
+
+// Find the flow for the given id and version
+const flows = await getFlows();
+const flowCollection = getVersionFromCollection(flows, id, version) || [];
+const flow = flowCollection[0];
+
+// const flow = flows.find((flow) => flow.data.id === id && flow.data.version === version);
+
+const { nodes, edges } = await getNodesAndEdges({
+  id: id,
+  version: flow.data.version,
+});
+---
+
+{
+  !flow && (
+    <Admonition type="warning">
+      <>
+        <span class="block font-bold">{`<Flow/>`} failed to load</span>
+        <span class="block">
+          Tried to load flow id: {id} with version {version}. Make sure you have this flow defined in your project.
+        </span>
+      </>
+    </Admonition>
+  )
+}
+
+<div
+  class="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
+  id={`${id}-portal`}
+  style={{
+    maxHeight: maxHeight ? `${maxHeight}em` : `30em`,
+  }}
+>
+</div>
+
+<div>
+  <NodeGraph
+    id={id}
+    nodes={nodes}
+    edges={edges}
+    hrefLabel={'View in visualizer'}
+    href={`/visualiser/flows/${id}/${version}`}
+    linkTo={'visualiser'}
+    includeKey={includeKey}
+    footerLabel=`Flow diagram - ${flow.data.name} - v(${flow.data.version})`
+    client:load
+  />
+</div>
+
+<style is:global>
+  .react-flow__attribution {
+    display: none;
+  }
+</style>

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -31,6 +31,7 @@ interface Props {
   includeBackground?: boolean;
   includeControls?: boolean;
   linkTo: 'docs' | 'visualiser';
+  includeKey?: boolean;
 }
 
 const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -41,7 +42,14 @@ const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<Collectio
 };
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
-const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
+const NodeGraphBuilder = ({
+  nodes: initialNodes,
+  edges,
+  title,
+  includeBackground = true,
+  linkTo = 'docs',
+  includeKey = true,
+}: Props) => {
   const nodeTypes = useMemo(
     () => ({
       services: ServiceNode,
@@ -89,25 +97,27 @@ const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground
       <DownloadButton filename={title} addPadding={!!title} />
       {includeBackground && <Background color="#bbb" gap={16} />}
       {includeBackground && <Controls />}
-      <Panel position="bottom-right">
-        <div className=" bg-white font-light px-4 text-[14px] shadow-md py-1 rounded-md">
-          <span className="font-bold">Key</span>
-          <ul>
-            <li className="flex space-x-2 items-center text-[12px]">
-              <span className="w-2 h-2 bg-orange-500 block" />
-              <span className="block">Event</span>
-            </li>
-            <li className="flex space-x-2 items-center text-[12px]">
-              <span className="w-2 h-2 bg-pink-500 block" />
-              <span className="block">Service</span>
-            </li>
-            <li className="flex space-x-2 items-center text-[12px]">
-              <span className="w-2 h-2 bg-blue-500 block" />
-              <span className="block">Command</span>
-            </li>
-          </ul>
-        </div>
-      </Panel>
+      {includeKey && (
+        <Panel position="bottom-right">
+          <div className=" bg-white font-light px-4 text-[14px] shadow-md py-1 rounded-md">
+            <span className="font-bold">Key</span>
+            <ul>
+              <li className="flex space-x-2 items-center text-[12px]">
+                <span className="w-2 h-2 bg-orange-500 block" />
+                <span className="block">Event</span>
+              </li>
+              <li className="flex space-x-2 items-center text-[12px]">
+                <span className="w-2 h-2 bg-pink-500 block" />
+                <span className="block">Service</span>
+              </li>
+              <li className="flex space-x-2 items-center text-[12px]">
+                <span className="w-2 h-2 bg-blue-500 block" />
+                <span className="block">Command</span>
+              </li>
+            </ul>
+          </div>
+        </Panel>
+      )}
     </ReactFlow>
   );
 };
@@ -120,9 +130,21 @@ interface NodeGraphProps {
   nodes: Node[];
   edges: Edge[];
   linkTo: 'docs' | 'visualiser';
+  includeKey?: boolean;
+  footerLabel?: string;
 }
 
-const NodeGraph = ({ id, nodes, edges, title, href, linkTo = 'docs', hrefLabel = 'Open in visualiser' }: NodeGraphProps) => {
+const NodeGraph = ({
+  id,
+  nodes,
+  edges,
+  title,
+  href,
+  linkTo = 'docs',
+  hrefLabel = 'Open in visualizer',
+  includeKey = true,
+  footerLabel,
+}: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
 
   useEffect(() => {
@@ -136,15 +158,23 @@ const NodeGraph = ({ id, nodes, edges, title, href, linkTo = 'docs', hrefLabel =
     <div>
       {createPortal(
         <ReactFlowProvider>
-          <NodeGraphBuilder edges={edges} nodes={nodes} title={title} linkTo={linkTo} />
+          <NodeGraphBuilder edges={edges} nodes={nodes} title={title} linkTo={linkTo} includeKey={includeKey} />
+
+          <div className="flex justify-between">
+            {footerLabel && (
+              <div className="py-2 w-full text-left ">
+                <span className=" text-sm no-underline py-2 text-gray-300">{footerLabel}</span>
+              </div>
+            )}
 
-          {href && (
-            <div className="py-2 w-full text-right">
-              <a className=" text-sm no-underline py-2 text-gray-800 hover:text-purple-500" href={href}>
-                {hrefLabel} &rarr;
-              </a>
-            </div>
-          )}
+            {href && (
+              <div className="py-2 w-full text-right">
+                <a className=" text-sm no-underline py-2 text-gray-800 hover:text-purple-500" href={href}>
+                  {hrefLabel} &rarr;
+                </a>
+              </div>
+            )}
+          </div>
         </ReactFlowProvider>,
         elem
       )}

package/src/components/MDX/components.tsx

@@ -3,6 +3,7 @@ import Schema from '@components/MDX/Schema';
 import File from '@components/MDX/File';
 import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
+import Flow from '@components/MDX/Flow/Flow.astro';
 import Admonition from '@components/MDX/Admonition';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI';
 
@@ -14,6 +15,7 @@ const components = (props: any) => {
   return {
     Accordion,
     AccordionGroup,
+    Flow,
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),

package/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -5,6 +5,7 @@ import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
 import NodeGraph from '@components/MDX/NodeGraph/NodeGraph.astro';
+import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
 
 // SideBars
 import ServiceSideBar from '@components/SideBars/ServiceSideBar.astro';
@@ -17,7 +18,7 @@ import { EnvelopeIcon, PencilIcon, QueueListIcon, RectangleGroupIcon, ServerIcon
 import { getDomains } from '@utils/domains/domains';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 import type { CollectionTypes } from '@types';
-import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
+
 import { buildUrl } from '@utils/url-builder';
 import { getFlows } from '@utils/flows/flows';
 

package/src/utils/flows/flows.ts

@@ -1,5 +1,5 @@
 import { getVersionForCollectionItem, getVersions } from '@utils/collections/util';
-import { getVersion } from '@utils/services/services';
+import { getVersionFromCollection } from '@utils/versions/versions';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
@@ -31,7 +31,7 @@ export const getFlows = async ({ getAllVersions = true }: Props = {}): Promise<F
 
     const hydrateSteps = steps.map((step) => {
       if (!step.message) return { ...flow, data: { ...flow.data, type: 'node' } };
-      const message = getVersion(allMessages, step.message.id, step.message.version);
+      const message = getVersionFromCollection(allMessages, step.message.id, step.message.version);
       return {
         ...step,
         type: 'message',

package/src/utils/flows/node-graph.ts

@@ -1,9 +1,9 @@
 import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
-import { getVersion } from '../services/services';
 import { createDagreGraph, calculatedNodes } from '@utils/node-graph-utils/utils';
 import { MarkerType } from 'reactflow';
 import type { Node as NodeType } from 'reactflow';
+import { getVersionFromCollection } from '@utils/versions/versions';
 
 type DagreGraph = any;
 
@@ -27,7 +27,7 @@ const getServiceNode = (step: any, services: CollectionEntry<'services'>[]) => {
 };
 
 const getMessageNode = (step: any, messages: CollectionEntry<'events' | 'commands'>[]) => {
-  const messagesForVersion = getVersion(messages, step.message.id, step.message.version);
+  const messagesForVersion = getVersionFromCollection(messages, step.message.id, step.message.version);
   const message = messagesForVersion[0];
   return {
     ...step,

package/src/utils/services/node-graph.ts

@@ -1,9 +1,9 @@
 // import { getColor } from '@utils/colors';
 import { getCollection, type CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
-import { getVersion } from './services';
 import { createDagreGraph, generateIdForNode, generatedIdForEdge, calculatedNodes } from '@utils/node-graph-utils/utils';
 import { MarkerType } from 'reactflow';
+import { getVersionFromCollection } from '@utils/versions/versions';
 
 type DagreGraph = any;
 
@@ -41,12 +41,12 @@ export const getNodesAndEdges = async ({ id, defaultFlow, version, mode = 'simpl
   const messages = [...events, ...commands];
 
   const receivesHydrated = receivesRaw
-    .map((message) => getVersion(messages, message.id, message.version))
+    .map((message) => getVersionFromCollection(messages, message.id, message.version))
     .flat()
     .filter((e) => e !== undefined);
 
   const sendsHydrated = sendsRaw
-    .map((message) => getVersion(messages, message.id, message.version))
+    .map((message) => getVersionFromCollection(messages, message.id, message.version))
     .flat()
     .filter((e) => e !== undefined);
 

package/src/utils/services/services.ts

@@ -1,36 +1,13 @@
 import { getVersionForCollectionItem } from '@utils/collections/util';
+import { getVersionFromCollection } from '@utils/versions/versions';
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-import { satisfies, validRange } from 'semver';
 
 const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Service = CollectionEntry<'services'>;
 
-export const getVersion = (
-  collection: CollectionEntry<'events' | 'commands'>[],
-  id: string,
-  version?: string
-): CollectionEntry<'events' | 'commands'>[] => {
-  const data = collection;
-  const semverRange = validRange(version);
-
-  if (semverRange) {
-    return data.filter((msg) => msg.data.id == id).filter((msg) => satisfies(msg.data.version, semverRange));
-  }
-
-  const filteredEvents = data.filter((event) => event.data.id === id);
-
-  // Order by version
-  const sorted = filteredEvents.sort((a, b) => {
-    return a.data.version.localeCompare(b.data.version);
-  });
-
-  // latest version
-  return [sorted[sorted.length - 1]];
-};
-
 interface Props {
   getAllVersions?: boolean;
 }
@@ -53,12 +30,12 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
     const receivesMessages = service.data.receives || [];
 
     const sends = sendsMessages
-      .map((message) => getVersion(allMessages, message.id, message.version))
+      .map((message) => getVersionFromCollection(allMessages, message.id, message.version))
       .flat()
       .filter((e) => e !== undefined);
 
     const receives = receivesMessages
-      .map((message) => getVersion(allMessages, message.id, message.version))
+      .map((message) => getVersionFromCollection(allMessages, message.id, message.version))
       .flat()
       .filter((e) => e !== undefined);
 

package/src/utils/versions/versions.ts

@@ -0,0 +1,26 @@
+import type { CollectionTypes } from '@types';
+import type { CollectionEntry } from 'astro:content';
+import { satisfies, validRange } from 'semver';
+
+export const getVersionFromCollection = (
+  collection: CollectionEntry<CollectionTypes>[],
+  id: string,
+  version?: string
+): CollectionEntry<CollectionTypes>[] => {
+  const data = collection;
+  const semverRange = validRange(version);
+
+  if (semverRange) {
+    return data.filter((msg) => msg.data.id == id).filter((msg) => satisfies(msg.data.version, semverRange));
+  }
+
+  const filteredEvents = data.filter((event) => event.data.id === id);
+
+  // Order by version
+  const sorted = filteredEvents.sort((a, b) => {
+    return a.data.version.localeCompare(b.data.version);
+  });
+
+  // latest version
+  return [sorted[sorted.length - 1]];
+};