@eventcatalog/core 2.56.4 → 2.57.1

package/README.md

@@ -34,7 +34,7 @@
 <h4>Features: Documentation for Event Driven Architectures, Integration with any broker, Generator from your OpenAPI and AsyncAPI documents, Docs and Code, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-60-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-61-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [Read the Docs](https://www.eventcatalog.dev/docs/development/getting-started/introduction) | [View Demo](https://demo.eventcatalog.dev)
@@ -264,6 +264,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/lucianlature/"><img src="https://avatars.githubusercontent.com/u/24992?v=4?s=100" width="100px;" alt="Lucian Lature"/><br /><sub><b>Lucian Lature</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/issues?q=author%3Alucianlature" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/villAsh"><img src="https://avatars.githubusercontent.com/u/50195101?v=4?s=100" width="100px;" alt="Vilas Chauvhan"/><br /><sub><b>Vilas Chauvhan</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=villAsh" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/mrerichoffman"><img src="https://avatars.githubusercontent.com/u/7565432?v=4?s=100" width="100px;" alt="Eric Hoffman"/><br /><sub><b>Eric Hoffman</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/issues?q=author%3Amrerichoffman" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/wimhaesen-kine"><img src="https://avatars.githubusercontent.com/u/231914377?v=4?s=100" width="100px;" alt="wimhaesen-kine"/><br /><sub><b>wimhaesen-kine</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=wimhaesen-kine" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.56.4";
+var version = "2.57.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-KASHKMSG.js";
-import "../chunk-HHPUSHCO.js";
+} from "../chunk-6PT76NQN.js";
+import "../chunk-76HGJTBT.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.56.4";
+var version = "2.57.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-QS3LKU6Y.js";
-import "../chunk-KASHKMSG.js";
-import "../chunk-HHPUSHCO.js";
+} from "../chunk-7BNIEBLU.js";
+import "../chunk-6PT76NQN.js";
+import "../chunk-76HGJTBT.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-KASHKMSG.js → chunk-6PT76NQN.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-HHPUSHCO.js";
+} from "./chunk-76HGJTBT.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-HHPUSHCO.js → chunk-76HGJTBT.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.56.4";
+var version = "2.57.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-QS3LKU6Y.js → chunk-7BNIEBLU.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-KASHKMSG.js";
+} from "./chunk-6PT76NQN.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.56.4";
+var version = "2.57.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-HHPUSHCO.js";
+} from "./chunk-76HGJTBT.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.56.4";
+var version = "2.57.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-QS3LKU6Y.js";
-import "./chunk-KASHKMSG.js";
+} from "./chunk-7BNIEBLU.js";
+import "./chunk-6PT76NQN.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-HHPUSHCO.js";
+} from "./chunk-76HGJTBT.js";
 import {
   getProjectOutDir,
   isAuthEnabled,

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

@@ -17,7 +17,7 @@ import {
   type NodeTypes,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { HistoryIcon } from 'lucide-react';
+import { ExternalLink, HistoryIcon } from 'lucide-react';
 import { toPng } from 'html-to-image';
 import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 // Nodes and edges
@@ -49,6 +49,7 @@ import { CogIcon } from '@heroicons/react/20/solid';
 import { useEventCatalogVisualiser } from 'src/hooks/eventcatalog-visualizer';
 import VisualiserSearch, { type VisualiserSearchRef } from './VisualiserSearch';
 import StepWalkthrough from './StepWalkthrough';
+import StudioModal from './StudioModal';
 interface Props {
   nodes: any;
   edges: any;
@@ -65,6 +66,8 @@ interface Props {
   showSearch?: boolean;
   zoomOnScroll?: boolean;
   designId?: string;
+  isStudioModalOpen?: boolean;
+  setIsStudioModalOpen?: (isOpen: boolean) => void;
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -84,6 +87,8 @@ const NodeGraphBuilder = ({
   showFlowWalkthrough = true,
   showSearch = true,
   zoomOnScroll = false,
+  isStudioModalOpen,
+  setIsStudioModalOpen = () => {},
 }: Props) => {
   const nodeTypes = useMemo(
     () =>
@@ -128,6 +133,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
+  // const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
 
   // Check if there are channels to determine if we need the visualizer functionality
   const hasChannels = useMemo(() => initialNodes.some((node: any) => node.type === 'channels'), [initialNodes]);
@@ -138,7 +144,7 @@ const NodeGraphBuilder = ({
     setEdges,
     skipProcessing: !hasChannels, // Pass flag to skip processing when no channels
   });
-  const { fitView, getNodes } = useReactFlow();
+  const { fitView, getNodes, toObject } = useReactFlow();
   const searchRef = useRef<VisualiserSearchRef>(null);
   const reactFlowWrapperRef = useRef<HTMLDivElement>(null);
   const scrollableContainerRef = useRef<HTMLElement | null>(null);
@@ -337,6 +343,10 @@ const NodeGraphBuilder = ({
     a.click();
   }, []);
 
+  const openStudioModal = () => {
+    setIsStudioModalOpen(true);
+  };
+
   const handleExportVisual = useCallback(() => {
     const imageWidth = 1024;
     const imageHeight = 768;
@@ -569,7 +579,7 @@ const NodeGraphBuilder = ({
       >
         <Panel position="top-center" className="w-full pr-6 ">
           <div className="flex space-x-2 justify-between items-center">
-            <div className="flex space-x-2">
+            <div className="flex space-x-2 ml-4">
               <div>
                 <button
                   onClick={() => setIsSettingsOpen(!isSettingsOpen)}
@@ -668,13 +678,27 @@ const NodeGraphBuilder = ({
                   <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
                 </div>
               )}
-              <div className="pt-4 border-t border-gray-200">
+              <div className="pt-4 border-t border-gray-200 space-y-2">
+                <button
+                  onClick={openStudioModal}
+                  className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-black hover:bg-gray-800 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                    />
+                  </svg>
+                  <span>Open in EventCatalog Studio</span>
+                </button>
                 <button
                   onClick={handleExportVisual}
-                  className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                  className="w-full flex items-center justify-center border border-gray-200 space-x-2 px-4 py-2 bg-white text-gray-800 text-sm font-medium rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
                 >
                   <DocumentArrowDownIcon className="w-4 h-4" />
-                  <span>Export Visual</span>
+                  <span>Export as png</span>
                 </button>
               </div>
             </div>
@@ -714,6 +738,7 @@ const NodeGraphBuilder = ({
           </Panel>
         )}
       </ReactFlow>
+      <StudioModal isOpen={isStudioModalOpen || false} onClose={() => setIsStudioModalOpen(false)} />
     </div>
   );
 };
@@ -759,6 +784,11 @@ const NodeGraph = ({
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
+  const [isStudioModalOpen, setIsStudioModalOpen] = useState(false);
+
+  const openStudioModal = useCallback(() => {
+    setIsStudioModalOpen(true);
+  }, []);
 
   const containerToRenderInto = portalId || `${id}-portal`;
 
@@ -794,6 +824,8 @@ const NodeGraph = ({
             showSearch={showSearch}
             zoomOnScroll={zoomOnScroll}
             designId={designId || id}
+            isStudioModalOpen={isStudioModalOpen}
+            setIsStudioModalOpen={setIsStudioModalOpen}
           />
 
           {showFooter && (
@@ -806,7 +838,14 @@ const NodeGraph = ({
 
               {href && (
                 <div className="py-2 w-full text-right flex justify-between">
-                  <span className="text-sm text-gray-500 italic">Right click a node to access documentation</span>
+                  {/* <span className="text-sm text-gray-500 italic">Right click a node to access documentation</span> */}
+                  <button
+                    onClick={openStudioModal}
+                    className=" text-sm underline text-gray-800 hover:text-primary flex items-center space-x-1"
+                  >
+                    <span>Open in EventCatalog Studio</span>
+                    <ExternalLink className="w-3 h-3" />
+                  </button>
                   <a className=" text-sm underline text-gray-800 hover:text-primary" href={href}>
                     {hrefLabel} &rarr;
                   </a>

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

@@ -0,0 +1,129 @@
+import React, { useState, useCallback } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { CheckIcon, ClipboardIcon, ExternalLinkIcon } from 'lucide-react';
+import { useReactFlow } from '@xyflow/react';
+import { exportNodeGraphForStudio } from '@utils/node-graphs/export-node-graph';
+
+interface StudioModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const StudioModal: React.FC<StudioModalProps> = ({ isOpen, onClose }) => {
+  const [copySuccess, setCopySuccess] = useState(false);
+
+  const { toObject } = useReactFlow();
+
+  const handleCopyToClipboard = useCallback(async () => {
+    const visualizerData = toObject();
+    const studioData = exportNodeGraphForStudio(visualizerData);
+
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(studioData, null, 2));
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error);
+      // Fallback for older browsers
+      const textarea = document.createElement('textarea');
+      textarea.value = JSON.stringify(studioData, null, 2);
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    }
+  }, []);
+
+  const handleOpenStudio = () => {
+    window.open(
+      'https://app.eventcatalog.studio/playground?import=true&utm_source=eventcatalog&utm_medium=referral&utm_campaign=playground-import',
+      '_blank'
+    );
+    onClose();
+  };
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={onClose}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 data-[state=open]:animate-overlayShow z-50" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 w-[90vw] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-contentShow z-[100]">
+          <Dialog.Title className="text-lg font-semibold text-gray-900 mb-3">Open in EventCatalog Studio</Dialog.Title>
+
+          <Dialog.Description className="text-sm text-gray-600 mb-6">
+            Import your diagram into{' '}
+            <a
+              href="https://eventcatalog.studio"
+              className="text-purple-600 hover:text-purple-700 underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              EventCatalog Studio
+            </a>{' '}
+            to create designs from your visualization of your architecture.
+          </Dialog.Description>
+
+          <div className="space-y-4">
+            <div className="bg-gray-50 rounded-lg p-4 border border-gray-200">
+              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 1: Copy diagram</h4>
+              <p className="text-xs text-gray-600 mb-3">Copy your diagram data to your clipboard.</p>
+              <button
+                onClick={handleCopyToClipboard}
+                className={`w-full flex items-center justify-center space-x-2 px-4 py-2 text-sm font-medium rounded-md border transition-colors ${
+                  copySuccess
+                    ? 'bg-green-50 border-green-200 text-green-700'
+                    : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                {copySuccess ? (
+                  <>
+                    <CheckIcon className="w-4 h-4" />
+                    <span>Copied!</span>
+                  </>
+                ) : (
+                  <>
+                    <ClipboardIcon className="w-4 h-4" />
+                    <span>Copy diagram to clipboard</span>
+                  </>
+                )}
+              </button>
+            </div>
+
+            <div className="bg-purple-50 rounded-lg p-4 border border-purple-200">
+              <h4 className="text-sm font-bold text-gray-900 mb-2">Step 2: Open EventCatalog Studio</h4>
+              <p className="text-xs text-gray-600 mb-3">
+                Go to EventCatalog Studio and import your design using the "Import from EventCatalog" button.
+              </p>
+
+              <button
+                onClick={handleOpenStudio}
+                className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 transition-colors"
+              >
+                <ExternalLinkIcon className="w-4 h-4" />
+                <span>Open EventCatalog Studio</span>
+              </button>
+              <p className="text-[12px] text-gray-500  italic mt-4 mb-0">
+                Don't worry, none of your data is stored by EventCatalog Studio, everything is local to your browser.
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-6 flex justify-end">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+                onClick={onClose}
+              >
+                Close
+              </button>
+            </Dialog.Close>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default StudioModal;

package/eventcatalog/src/utils/node-graphs/export-node-graph.ts

@@ -0,0 +1,87 @@
+import type { ReactFlowInstance, Node, ReactFlowJsonObject, Edge } from '@xyflow/react';
+
+// Define the structure of resource data that can be found in nodes
+interface ResourceData {
+  id?: string;
+  name?: string;
+  summary?: string;
+  version?: string;
+}
+
+// Define the possible node data structure
+interface NodeDataWithResources {
+  [key: string]: any;
+  channel?: ResourceData;
+  custom?: ResourceData;
+  data?: ResourceData;
+  domain?: ResourceData;
+  entity?: ResourceData;
+  message?: ResourceData;
+  flow?: ResourceData;
+  service?: ResourceData;
+  step?: ResourceData;
+  user?: ResourceData;
+}
+
+export const exportNodeGraphForStudio = (data: ReactFlowJsonObject) => {
+  const dataTypes: (keyof NodeDataWithResources)[] = [
+    'channel',
+    'custom',
+    'data',
+    'domain',
+    'entity',
+    'message',
+    'flow',
+    'service',
+    'step',
+    'user',
+  ];
+
+  // try and remove unwanted data for studio
+  const nodes = data.nodes.map((node: Node) => {
+    let nodeData = node.data as NodeDataWithResources;
+    const dataProperties = Object.keys(nodeData) as (keyof NodeDataWithResources)[];
+
+    // If we find a match.....
+    const hasCustomDataType = dataProperties.find((property) => dataTypes.includes(property));
+
+    if (hasCustomDataType && nodeData[hasCustomDataType]) {
+      const resourceData = nodeData[hasCustomDataType] as ResourceData;
+      nodeData = {
+        ...nodeData,
+        [hasCustomDataType]: {
+          id: resourceData?.id,
+          name: resourceData?.name,
+          summary: resourceData?.summary,
+          version: resourceData?.version,
+        },
+      };
+    }
+
+    return {
+      ...node,
+      data: {
+        ...nodeData,
+        // We dont need these for studio
+        source: undefined,
+        target: undefined,
+        // Studio wants all nodes in full mode
+        mode: 'full',
+      },
+    };
+  });
+
+  const edges = data.edges.map((edge: Edge) => {
+    return {
+      ...edge,
+      data: undefined,
+      type: 'animatedMessage',
+    };
+  });
+
+  return {
+    ...data,
+    nodes,
+    edges,
+  };
+};

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.56.4",
+  "version": "2.57.1",
   "publishConfig": {
     "access": "public"
   },
@@ -38,7 +38,7 @@
     "@eventcatalog/license": "^0.0.6",
     "@eventcatalog/linter": "^0.0.2",
     "@eventcatalog/sdk": "^2.2.7",
-    "@eventcatalog/visualizer": "^0.0.5",
+    "@eventcatalog/visualizer": "^0.0.6",
     "@fontsource/inter": "^5.2.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",