@eventcatalog/core 1.2.7 → 2.0.1

package/components/Header.tsx

@@ -1,74 +0,0 @@
-import Link from 'next/link';
-import getConfig from 'next/config';
-import { useRouter } from 'next/router';
-import { useConfig } from '@/hooks/EventCatalog';
-
-const defaultNavigation = [
-  { label: 'Events', href: '/events' },
-  { label: 'Services', href: '/services' },
-  { label: 'Domains', href: '/domains' },
-  { label: 'Users', href: '/users' },
-  { label: 'Visualiser', href: '/visualiser' },
-  { label: '3D Node Graph', href: '/overview' },
-];
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
-export default function Example() {
-  const { title, homepageLink, logo, headerLinks: configNavigation } = useConfig();
-  const router = useRouter();
-
-  const { publicRuntimeConfig: { basePath = '' } = {} } = getConfig();
-  const logoToLoad = logo || { alt: 'EventCatalog Logo', src: `logo.svg` };
-
-  const headerNavigation = configNavigation || defaultNavigation;
-
-  return (
-    <div className="bg-gray-800">
-      <div className="max-w-7xl mx-auto  ">
-        <div className="relative flex items-center justify-between h-16">
-          <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-            <div className="flex-shrink-0 flex items-center text-white font-bold">
-              {!homepageLink && (
-                <Link href="/">
-                  <a className="flex items-center">
-                    <img alt="logo" className="text-white w-8 inline-block mr-3" src={`${basePath}/${logoToLoad.src}`} />
-                    <span className="text-xl">{title}</span>
-                  </a>
-                </Link>
-              )}
-              {homepageLink && (
-                <a href={homepageLink} className="flex items-center">
-                  <img alt="logo" className="text-white w-8 inline-block mr-3" src={`${basePath}/${logoToLoad.src}`} />
-                  <span className="text-xl">{title}</span>
-                </a>
-              )}
-            </div>
-          </div>
-          <div className="hidden sm:block sm:ml-6">
-            <div className="flex space-x-4">
-              {headerNavigation.map((item) => {
-                const current = router.pathname === item.href;
-                return (
-                  <Link key={item.label} href={item.href}>
-                    <a
-                      className={classNames(
-                        current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
-                        'px-3 py-2 rounded-md text-sm font-medium'
-                      )}
-                      aria-current={current ? 'page' : undefined}
-                    >
-                      {item.label}
-                    </a>
-                  </Link>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

package/components/Mdx/AsyncApiSpec.tsx

@@ -1,25 +0,0 @@
-import dynamic from 'next/dynamic';
-import '@asyncapi/react-component/styles/default.min.css';
-
-const AsyncApiComponent = dynamic(import('@asyncapi/react-component'), { ssr: false });
-
-const config = {
-  show: {
-    errors: false,
-  },
-};
-
-interface AsyncApiSpecProps {
-  spec?: string;
-  url?: string;
-}
-
-export default function AsyncApiSpec({ spec, url }: AsyncApiSpecProps) {
-  const schema = !url ? spec : { url };
-
-  return (
-    <div className={`my-4 border border-gray-300 border-dashed px-5 `}>
-      <AsyncApiComponent schema={schema} config={config} />
-    </div>
-  );
-}

package/components/Mdx/Examples.tsx

@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-import SyntaxHighlighter from '@/components/SyntaxHighlighter';
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
-interface ExampleProps {
-  title?: string;
-  description?: string;
-  examples: any;
-  showLineNumbers?: boolean;
-}
-
-function Examples({ title = 'Examples', description, examples = [], showLineNumbers }: ExampleProps) {
-  const tabs = examples.map((example, index) => ({
-    name: example.name || `Example ${index + 1}`,
-    content: example.snippet,
-    description: example.description,
-    langugage: example.langugage,
-  }));
-
-  const [selectedTab, setSelectedTab] = useState(tabs[0]);
-
-  const handleTabSelection = (tab: string) => {
-    setSelectedTab(tab);
-  };
-
-  return (
-    <div className="my-5 examples">
-      <div className="">
-        <h2 className="text-lg font-medium text-gray-700 underline">{title}</h2>
-        {description && <p className="text-md font-medium text-gray-700">{description}</p>}
-
-        <div>
-          <div className="col-span-5">
-            <nav className="-mb-2 flex bg-gray-900 w-full overflow-hidden overflow-x-scroll" aria-label="Tabs">
-              {tabs.map((tab) => {
-                const isSelected = tab.name === selectedTab.name;
-                return (
-                  <button
-                    type="button"
-                    key={tab.name}
-                    onClick={() => handleTabSelection(tab)}
-                    className={classNames(
-                      isSelected
-                        ? 'border-yellow-300 text-yellow-300 selected bg-gray-700'
-                        : 'border-transparent text-gray-500 hover:text-gray-400 bg-gray-800  ',
-                      'whitespace-nowrap py-3 border-b-2 font-medium important:no-underline px-6 text-xs  transition '
-                    )}
-                    aria-current={isSelected ? 'page' : undefined}
-                  >
-                    {tab.name}
-                  </button>
-                );
-              })}
-            </nav>
-            <div>
-              <SyntaxHighlighter language={selectedTab.langugage} showLineNumbers={showLineNumbers}>
-                {selectedTab.content}
-              </SyntaxHighlighter>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Examples;

package/components/Mdx/NodeGraph/GraphElements.tsx

@@ -1,294 +0,0 @@
-import { ArrowHeadType, XYPosition, Node, Edge } from 'react-flow-renderer';
-import getConfig from 'next/config';
-import type { Event, Service } from '@eventcatalog/types';
-import CustomNode from './Node';
-
-const { publicRuntimeConfig: { basePath = '' } = {} } = getConfig();
-
-const MIN_NODE_WIDTH = 150;
-type NODE_TYPES = 'service' | 'event';
-
-const generateLink = (value, type, domain?) => `${basePath}/${domain ? `domains/${domain}/` : ''}${type}/${value}`;
-const calcWidth = (value) => (value.length * 8 > MIN_NODE_WIDTH ? value.length * 8 : MIN_NODE_WIDTH);
-
-const buildNodeEdge = ({ id, target, source, label, isAnimated = true }): Edge => ({
-  id,
-  target,
-  source,
-  type: 'smoothstep',
-  arrowHeadType: ArrowHeadType.ArrowClosed,
-  animated: isAnimated,
-  label,
-  labelBgPadding: [8, 4],
-  labelBgBorderRadius: 4,
-  labelStyle: { fontSize: '6px' },
-  labelBgStyle: { fill: 'white', color: '#fff', fillOpacity: 0.5 },
-});
-
-const buildNodeData = ({
-  name,
-  label,
-  type,
-  maxWidth,
-  renderInColumn,
-  domain,
-}: {
-  name: string;
-  label: string;
-  type: NODE_TYPES;
-  maxWidth?: number;
-  renderInColumn?: number;
-  domain?: string;
-}) => {
-  const width = calcWidth(label);
-  const linkType = type === 'service' ? 'services' : 'events';
-
-  const link = generateLink(name, linkType, domain);
-  return { label, link, width, maxWidth, renderInColumn };
-};
-
-const getNodeLabel = ({ type, label, includeIcon }: { type: NODE_TYPES; label: any; includeIcon: boolean }) => {
-  if (!includeIcon) return label;
-  return <CustomNode type={type} label={label} />;
-};
-
-/**
- * Builds a graph for a given event
- * @param {Event} - event
- * @param rootNodeColor - The color of the root node
- * @param isAnimated - whether to animate the graph
- */
-export const getEventElements = (
-  { name: eventName, domain, consumers: eventConsumers = [], producers: eventProducers = [] }: Event,
-  rootNodeColor = '#2563eb',
-  isAnimated = true,
-  includeLabels = false,
-  includeNodeIcons = false
-) => {
-  const position: XYPosition = { x: 0, y: 0 };
-
-  const consumerColor = '#818cf8';
-  const producerColor = '#75d7b6';
-  const nodeStyles = {
-    fontSize: includeNodeIcons ? '8px' : 'auto',
-  };
-
-  const producersNames = eventProducers.map((s) => calcWidth(s.name));
-  const maxProducersWidth = Math.max(...producersNames);
-  const consumersNames = eventConsumers.map((s) => calcWidth(s.name));
-  const maxConsumersWidth = Math.max(...consumersNames);
-
-  const eventNameAsNodeID = `ev-${eventName.replace(/ /g, '_')}`;
-  const eventNodeWidth = calcWidth(eventName);
-
-  const producers = eventProducers.map((node) => ({
-    label: node.name,
-    id: `pr-${node.name.replace(/ /g, '_')}`,
-    domain: node.domain,
-  }));
-  const consumers = eventConsumers.map((node) => ({
-    label: node.name,
-    id: `co-${node.name.replace(/ /g, '_')}`,
-    domain: node.domain,
-  }));
-
-  // Transforms services & event into a graph model
-  const producersNodes: Node[] = producers.map(({ label, id, domain: producerDomain }) => {
-    const nodeWidth = calcWidth(label);
-    const diff = maxProducersWidth - nodeWidth;
-    const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxProducersWidth;
-    const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
-    return {
-      id,
-      data: buildNodeData({
-        name: label,
-        label: labelToRender,
-        type: 'service',
-        maxWidth: nodeMaxWidth,
-        renderInColumn: 1,
-        domain: producerDomain,
-      }),
-      style: { border: `2px solid ${producerColor}`, width: nodeWidth, ...nodeStyles },
-      type: 'input',
-      position,
-    };
-  });
-  const consumersNodes: Node[] = consumers.map(({ id, label, domain: consumerDomain }) => {
-    const width = calcWidth(label);
-    const labelToRender = getNodeLabel({ type: 'service', label, includeIcon: includeNodeIcons });
-    return {
-      id,
-      data: buildNodeData({
-        name: label,
-        label: labelToRender,
-        type: 'service',
-        maxWidth: maxConsumersWidth,
-        renderInColumn: 3,
-        domain: consumerDomain,
-      }),
-      style: { border: `2px solid ${consumerColor}`, width, ...nodeStyles },
-      type: 'output',
-      position,
-    };
-  });
-
-  const eventNode: Node = {
-    id: eventNameAsNodeID,
-    data: buildNodeData({
-      name: eventName,
-      label: getNodeLabel({ type: 'event', label: eventName, includeIcon: includeNodeIcons }),
-      type: 'event',
-      maxWidth: eventNodeWidth,
-      renderInColumn: 2,
-      domain,
-    }),
-    style: {
-      border: `2px solid ${rootNodeColor}`,
-      width: eventNodeWidth,
-      ...nodeStyles,
-    },
-    position,
-  };
-
-  // Build connections
-  const producersEdges: Edge[] = producers.map(({ id, label }) =>
-    buildNodeEdge({
-      id: `epe-${label.replace(/ /g, '_')}-${eventNameAsNodeID}`,
-      source: id,
-      target: eventNameAsNodeID,
-      isAnimated,
-      label: includeLabels ? 'publishes' : '',
-    })
-  );
-  const consumersEdges: Edge[] = consumers.map(({ id, label }) =>
-    buildNodeEdge({
-      id: `ece-${label.replace(/ /g, '_')}-${eventNameAsNodeID}`,
-      target: id,
-      source: eventNameAsNodeID,
-      isAnimated,
-      label: includeLabels ? 'subscribed by' : '',
-    })
-  );
-
-  // Merge nodes in order
-  const elements: (Node | Edge)[] = [...producersNodes, eventNode, ...consumersNodes, ...producersEdges, ...consumersEdges];
-  return elements;
-};
-
-/**
- * Builds a graph for a given service
- * @param {Service} service
- * @param {string} rootNodeColor of the root node
- * @param isAnimated whether the graph should be animated
- * @returns {string} Mermaid Graph
- */
-export const getServiceElements = (
-  { publishes, subscribes, name: serviceName, domain }: Service,
-  rootNodeColor = '#2563eb',
-  isAnimated = true,
-  includeEdgeLabels = false,
-  includeNodeIcons = false
-) => {
-  const position: XYPosition = { x: 0, y: 0 };
-
-  const publishColor = '#818cf8';
-  const subscribeColor = '#75d7b6';
-  const nodeStyles = {
-    fontSize: includeNodeIcons ? '8px' : 'auto',
-  };
-
-  const publishesNames = publishes.map((e) => calcWidth(e.name));
-  const maxPublishesWidth = Math.max(...publishesNames);
-  const subscribesNames = subscribes.map((e) => calcWidth(e.name));
-  const maxSubscribesWidth = Math.max(...subscribesNames);
-
-  const serviceNameAsNodeID = `ser-${serviceName.replace(/ /g, '_')}`;
-
-  // Transforms services & event into a graph model
-  const publishesNodes: Node[] = publishes.map((node) => {
-    const nodeWidth = calcWidth(node.name);
-    const labelToRender = getNodeLabel({ type: 'event', label: node.name, includeIcon: includeNodeIcons });
-    return {
-      id: `pub-${node.name.replace(/ /g, '_')}`,
-      data: buildNodeData({
-        name: node.name,
-        label: labelToRender,
-        type: 'event',
-        maxWidth: maxPublishesWidth,
-        renderInColumn: 3,
-        domain: node.domain,
-      }),
-      style: { border: `2px solid ${publishColor}`, width: nodeWidth, ...nodeStyles },
-      type: 'output',
-      position,
-    };
-  });
-  const subscribesNodes: Node[] = subscribes.map((node) => {
-    const nodeWidth = calcWidth(node.name);
-    const diff = maxSubscribesWidth - nodeWidth;
-    const nodeMaxWidth = diff !== 0 ? nodeWidth - diff : maxSubscribesWidth;
-    const labelToRender = getNodeLabel({ type: 'event', label: node.name, includeIcon: includeNodeIcons });
-    return {
-      id: `sub-${node.name.replace(/ /g, '_')}`,
-      data: buildNodeData({
-        name: node.name,
-        label: labelToRender,
-        type: 'event',
-        maxWidth: nodeMaxWidth,
-        ...nodeStyles,
-        renderInColumn: 1,
-        domain: node.domain,
-      }),
-      style: {
-        border: `2px solid ${subscribeColor}`,
-        width: nodeWidth,
-        ...nodeStyles,
-      },
-      type: 'input',
-      position,
-    };
-  });
-
-  const serviceNode: Node = {
-    id: serviceNameAsNodeID,
-    data: buildNodeData({
-      name: serviceName,
-      label: getNodeLabel({ type: 'service', label: serviceName, includeIcon: includeNodeIcons }),
-      type: 'service',
-      maxWidth: calcWidth(serviceName),
-      renderInColumn: 2,
-      domain,
-    }),
-    style: {
-      border: `2px solid ${rootNodeColor}`,
-      width: calcWidth(serviceName),
-      ...nodeStyles,
-    },
-    position,
-  };
-
-  // Build connections
-  const publishesEdges: Edge[] = publishes.map((node) =>
-    buildNodeEdge({
-      id: `ecp-${node.name.replace(/ /g, '_')}`,
-      source: serviceNameAsNodeID,
-      target: `pub-${node.name.replace(/ /g, '_')}`,
-      isAnimated,
-      label: includeEdgeLabels ? 'publishes' : '',
-    })
-  );
-
-  const subscribesEdges: Edge[] = subscribes.map((node) =>
-    buildNodeEdge({
-      id: `esc-${node.name.replace(/ /g, '_')}`,
-      target: serviceNameAsNodeID,
-      source: `sub-${node.name.replace(/ /g, '_')}`,
-      isAnimated,
-      label: includeEdgeLabels ? 'subscribed by' : '',
-    })
-  );
-
-  // Merge nodes in order
-  const elements: (Node | Edge)[] = [...subscribesNodes, serviceNode, ...publishesNodes, ...publishesEdges, ...subscribesEdges];
-  return elements;
-};

package/components/Mdx/NodeGraph/GraphLayout.ts

@@ -1,110 +0,0 @@
-import { isNode, Elements, Position } from 'react-flow-renderer';
-import dagre from 'dagre';
-import { DataSource } from './NodeGraph';
-
-const nodeDefaultWidth = 150;
-const nodeDefaultHeight = 36;
-const offset = 48;
-const verticalOffset = offset / 1.5;
-
-const getMaxWidthElementFromPreviousColumn = (elements, column) => {
-  const elementsInColumn = elements.filter((element) => element?.data?.renderInColumn === column);
-
-  if (elementsInColumn.length === 0) return {};
-  if (elementsInColumn.length === 1) return elementsInColumn[0];
-
-  const maxWidthElement = elementsInColumn.reduce((currentElement, element) => {
-    const currentElementWidth = currentElement?.data?.maxWidth || currentElement?.data?.width || nodeDefaultWidth;
-    const elementWidth = element?.data?.maxWidth || element?.data.width || nodeDefaultWidth;
-    return elementWidth > currentElementWidth ? element : currentElement;
-  }, elementsInColumn[0]);
-
-  return maxWidthElement;
-};
-
-const getXPositionFromElement = (elem) => {
-  const elementWidth = elem?.data?.maxWidth || elem.width || nodeDefaultWidth;
-  const currentXPositionOfElement = elem.position.x;
-  return currentXPositionOfElement + elementWidth;
-};
-
-export default function createGraphLayout(elements: Elements, isHorizontal: boolean): Elements {
-  const dagreGraph = new dagre.graphlib.Graph();
-
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
-  dagreGraph.setGraph({ rankdir: 'LR', ranksep: offset * 2, nodesep: verticalOffset });
-
-  elements.forEach((element) => {
-    if (isNode(element)) {
-      // eslint-disable-next-line no-underscore-dangle
-      const nodeWidth = element.__rf?.width ? element.__rf?.width : element.data?.width;
-      dagreGraph.setNode(element.id, {
-        width: nodeWidth || nodeDefaultWidth,
-        // eslint-disable-next-line no-underscore-dangle
-        height: element.__rf?.height || nodeDefaultHeight,
-      });
-    } else {
-      dagreGraph.setEdge(element.source, element.target);
-    }
-  });
-
-  // Calculate the layout, to get the node positions with their widths and heights
-  dagre.layout(dagreGraph);
-
-  const allNodes = elements.filter((element) => element.data);
-  const allEdges = elements.filter((element) => !element.data);
-
-  const sortedNodesByColumn = allNodes.sort((nodeA, nodeB) =>
-    // eslint-disable-next-line no-nested-ternary
-    nodeA.data.renderInColumn > nodeB.data.renderInColumn ? 1 : nodeB.data.renderInColumn > nodeA.data.renderInColumn ? -1 : 0
-  );
-  const allData = [...sortedNodesByColumn, ...allEdges];
-
-  return allData.map((element) => {
-    if (isNode(element)) {
-      const node = dagreGraph.node(element.id);
-      element.targetPosition = isHorizontal ? Position.Left : Position.Top;
-      element.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
-
-      const paddingBetweenNodes = element.data.renderInColumn > 1 ? 75 : 0;
-      const currentColumnToRenderIn = element?.data?.renderInColumn;
-      const maxWidthElementFromPreviousColumn = getMaxWidthElementFromPreviousColumn(elements, currentColumnToRenderIn - 1);
-
-      const nodeX =
-        Object.keys(maxWidthElementFromPreviousColumn).length > 0
-          ? getXPositionFromElement(maxWidthElementFromPreviousColumn)
-          : 0;
-
-      element.position = {
-        x: nodeX + paddingBetweenNodes,
-        y: node.y - node.height / 2,
-      };
-
-      // This is due to an issue with ReactFlow giving errors when we set the width in the styles.
-      if (element.style.width) {
-        if (Number(element.style.width) <= nodeDefaultWidth) {
-          element.style.width = undefined;
-        }
-      }
-    }
-
-    return element;
-  });
-}
-
-// Helper - ReactFlow canvas height calculator
-export const calcCanvasHeight = ({ source, data }: DataSource): number => {
-  const minHeight = 300;
-  const nodeSpacing = nodeDefaultHeight + verticalOffset;
-  let nodesHeight = 0;
-
-  if (source === 'event') {
-    nodesHeight = Math.max(data.producerNames.length, data.consumerNames.length) * nodeSpacing;
-  }
-
-  if (source === 'service') {
-    nodesHeight = Math.max(data.publishes.length, data.subscribes.length) * nodeSpacing;
-  }
-
-  return Math.max(minHeight, nodesHeight);
-};

package/components/Mdx/NodeGraph/Node.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { ServerIcon } from '@heroicons/react/outline/';
-import { MailIcon } from '@heroicons/react/solid/';
-
-function Node({ type, label }: any) {
-  const Icon = type === 'event' ? MailIcon : ServerIcon;
-  return (
-    <div>
-      <Icon className="h-3 w-3 text-gray-700 inline-block mr-1 -mt-0.5" />
-      <span className="text-gray-700">{label}</span>
-    </div>
-  );
-}
-
-export default Node;