@eventcatalog/core 1.2.6 → 2.0.0

package/components/Mermaid/index.tsx

@@ -1,58 +0,0 @@
-import React, { useEffect } from 'react';
-import mermaid from 'mermaid';
-import { Service, Event } from '@eventcatalog/types';
-import { buildMermaidFlowChartForEvent, buildMermaidFlowChartForService } from '@/lib/graphs';
-
-mermaid.initialize({
-  startOnLoad: true,
-  theme: 'forest',
-  securityLevel: 'loose',
-  flowchart: {
-    useMaxWidth: false,
-  },
-  themeCSS: `
-  .node {
-      filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .2))
-  }
-  .mermaid svg {
-      width: 10000px
-  }
-  .node rect {
-      fill: white
-  }
-    `,
-  fontFamily: 'Fira Code',
-});
-
-interface MermaidProps {
-  data: Event | Service;
-  source: 'event' | 'service';
-  rootNodeColor?: string;
-  charts?: string[];
-}
-
-function Mermaid({ data, source = 'event', rootNodeColor, charts }: MermaidProps) {
-  useEffect(() => {
-    mermaid.contentLoaded();
-  }, []);
-
-  if (charts) {
-    return (
-      <>
-        {charts.map((content, index) => (
-          <div key={`chart-${index}`} className="mermaid">
-            {content}
-          </div>
-        ))}
-      </>
-    );
-  }
-  const mermaidChart =
-    source === 'event'
-      ? buildMermaidFlowChartForEvent(data as Event, rootNodeColor)
-      : buildMermaidFlowChartForService(data as Service, rootNodeColor);
-
-  return <div className="mermaid">{mermaidChart}</div>;
-}
-
-export default Mermaid;

package/components/NotFound/index.tsx

@@ -1,40 +0,0 @@
-import { DocumentAddIcon } from '@heroicons/react/solid';
-
-interface NotFoundProps {
-  type: 'service' | 'event' | 'domain';
-  name: string;
-  editUrl?: string;
-}
-
-export default function Example(props: NotFoundProps) {
-  const { type, name, editUrl } = props;
-
-  return (
-    <main className="min-h-full bg-cover bg-top sm:bg-top h-screen">
-      <div className="max-w-7xl mx-auto px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8 lg:py-48">
-        <p className="text-sm font-semibold text-gray-700 text-opacity-50 uppercase tracking-wide blur-xl">
-          Failed to find {type}
-        </p>
-        <h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">Missing Documentation</h1>
-        <p className="mt-2 text-lg font-medium text-gray-700 text-opacity-50 text-center ">
-          Documentation for {type} is missing!
-          <span className="block font-bold text-gray-800 underline break-all max-w-2xl mx-auto py-4">{name}</span>
-        </p>
-        <p className="mt-4 text-xs text-gray-400">Help the eco-system and add the documentation for others ❤️ </p>
-        {editUrl && (
-          <div className="mt-12">
-            <a
-              href={editUrl}
-              target="_blank"
-              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-black bg-opacity-75 "
-              rel="noreferrer"
-            >
-              <DocumentAddIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
-              Add missing <span className="underline px-1">{type}</span> documentation
-            </a>
-          </div>
-        )}
-      </div>
-    </main>
-  );
-}

package/components/Sidebars/DomainSidebar.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import type { Domain } from '@eventcatalog/types';
-import { CubeIcon } from '@heroicons/react/outline';
-import ExternalLinks from './components/ExternalLinks';
-import Tags from './components/Tags';
-import Owners from './components/Owners';
-import ItemList from './components/ItemList';
-
-interface DomainSideBarProps {
-  domain: Domain;
-}
-
-function ServiceSidebar({ domain }: DomainSideBarProps) {
-  const { name, owners, services, events, tags = [], externalLinks } = domain;
-
-  return (
-    <aside className="hidden xl:block xl:pl-8 divide-y divide-gray-200">
-      <h2 className="sr-only">Details</h2>
-
-      {events.length > 0 && (
-        <ItemList
-          title={`Events (${events.length})`}
-          titleIcon={{ icon: CubeIcon, className: 'text-indigo-400' }}
-          items={events.map((event) => ({ label: event.name, href: `/domains/${name}/events/${event.name}`, bgColor: 'indigo' }))}
-        />
-      )}
-
-      {services.length > 0 && (
-        <ItemList
-          title={`Services (${services.length})`}
-          titleIcon={{ icon: CubeIcon, className: 'text-green-400' }}
-          items={services.map((service) => ({
-            label: service.name,
-            href: `/domains/${name}/services/${service.name}`,
-            bgColor: 'green',
-          }))}
-        />
-      )}
-
-      {owners.length > 0 && <Owners owners={owners} />}
-
-      <Link href={`/visualiser?type=domain&name=${domain.name}`}>
-        <a className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
-          <span>View in Visualiser</span>
-        </a>
-      </Link>
-
-      {externalLinks.length > 0 && <ExternalLinks externalLinks={externalLinks} />}
-      {tags.length > 0 && <Tags tags={tags} />}
-    </aside>
-  );
-}
-
-export default ServiceSidebar;

package/components/Sidebars/EventSidebar.tsx

@@ -1,172 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import getConfig from 'next/config';
-import { CubeIcon, DownloadIcon, CollectionIcon } from '@heroicons/react/outline';
-import type { Event } from '@eventcatalog/types';
-
-import ExternalLinks from './components/ExternalLinks';
-import Tags from './components/Tags';
-import Owners from './components/Owners';
-import ItemList from './components/ItemList';
-
-interface EventSideBarProps {
-  event: Event;
-  urlPath: string;
-  loadedVersion?: string;
-  isOldVersion?: boolean;
-}
-
-const getServiceLink = (serviceName: string, event: Event) => {
-  const allEventServices = [...event.consumers, ...event.producers];
-  const matchedService = allEventServices.find((service) => service.name === serviceName);
-  if (matchedService && matchedService.domain) return `/domains/${matchedService.domain}/services/${serviceName}`;
-  return `/services/${serviceName}`;
-};
-
-const getEventLogsURL = (event: Event) =>
-  event.domain ? `/domains/${event.domain}/events/${event.name}/logs` : `/events/${event.name}/logs`;
-
-function EventSideBar({ event, loadedVersion, isOldVersion, urlPath }: EventSideBarProps) {
-  const {
-    name: eventName,
-    owners,
-    producerNames: producers,
-    consumerNames: consumers,
-    tags,
-    historicVersions,
-    externalLinks,
-    schema,
-    domain,
-  } = event;
-  const { publicRuntimeConfig: { basePath = '' } = {} } = getConfig();
-
-  const getSchemaDownloadURL = () => {
-    if (!schema) return null;
-    return isOldVersion
-      ? `${basePath}/schemas/${eventName}/${loadedVersion}/schema.${schema.extension}`
-      : `${basePath}/schemas/${eventName}/schema.${schema.extension}`;
-  };
-
-  return (
-    <aside className="hidden xl:block xl:pl-8 divide-y divide-gray-200">
-      <h2 className="sr-only">Details</h2>
-
-      {producers.length > 0 && (
-        <ItemList
-          title={`Producers (${producers.length})`}
-          titleIcon={{ icon: CubeIcon, className: 'text-green-400' }}
-          items={producers.map((producer) => ({ label: producer, href: getServiceLink(producer, event), bgColor: 'green' }))}
-        />
-      )}
-
-      {consumers.length > 0 && (
-        <ItemList
-          title={`Consumers (${consumers.length})`}
-          titleIcon={{ icon: CubeIcon, className: 'text-indigo-400' }}
-          items={consumers.map((consumer) => ({ label: consumer, href: getServiceLink(consumer, event), bgColor: 'indigo' }))}
-        />
-      )}
-
-      {domain && (
-        <div className="py-6 space-y-8">
-          <div>
-            <h2 className="text-sm font-medium text-gray-500">
-              <CollectionIcon className="h-5 w-5 text-yellow-400 inline-block mr-2" aria-hidden="true" />
-              Domain
-            </h2>
-            <ul className="mt-2 leading-8">
-              <li className="inline">
-                <Link href={`/domains/${domain}`}>
-                  <a href="#" className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
-                    <div className="absolute flex-shrink-0 flex items-center justify-center">
-                      <span className="h-1.5 w-1.5 rounded-full bg-yellow-500 animate animate-pulse" aria-hidden="true" />
-                    </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900">{domain}</div>
-                  </a>
-                </Link>
-              </li>
-            </ul>
-          </div>
-        </div>
-      )}
-      {historicVersions.length > 0 && (
-        <div className=" py-6">
-          <div>
-            <h2 className="text-sm font-medium text-gray-500">Event Versions</h2>
-            <ul className="mt-2 leading-8 text-left text-blue-500">
-              <li className="text-sm inline ">
-                <Link href={urlPath}>
-                  <a>
-                    <span
-                      className={`inline-flex mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative ${
-                        loadedVersion === 'latest'
-                          ? 'bg-blue-400 text-white shadow-md font-bold underline'
-                          : 'bg-blue-100 text-blue-800'
-                      }`}
-                    >
-                      Latest
-                    </span>
-                  </a>
-                </Link>
-              </li>
-
-              {historicVersions.map((version) => {
-                const isLoadedVersion = loadedVersion === version;
-                const styles = isLoadedVersion
-                  ? 'bg-blue-400 text-white shadow-md font-bold underline'
-                  : 'bg-blue-100 text-blue-800';
-                return (
-                  <li className="text-sm inline" key={version}>
-                    <Link href={`${urlPath}/v/${version}`}>
-                      <a>
-                        <span
-                          className={`inline-flex mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative  ${styles}`}
-                        >
-                          v{version}
-                        </span>
-                      </a>
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-      )}
-
-      {owners.length > 0 && <Owners owners={owners} />}
-
-      <div className=" py-6 space-y-1">
-        {schema && (
-          <a
-            href={getSchemaDownloadURL()}
-            download={`${eventName}(${event.version}).${schema.extension}`}
-            className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
-          >
-            <DownloadIcon className="-ml-1 mr-2 h-5 w-5 text-gray-200" aria-hidden="true" />
-            <span>Download Schema</span>
-          </a>
-        )}
-
-        {historicVersions.length > 0 && (
-          <Link href={getEventLogsURL(event)}>
-            <a className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
-              <span>View Changes</span>
-            </a>
-          </Link>
-        )}
-
-        <Link href={`/visualiser?type=event&name=${eventName}`}>
-          <a className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
-            <span>View in Visualiser</span>
-          </a>
-        </Link>
-
-        {externalLinks.length > 0 && <ExternalLinks externalLinks={externalLinks} />}
-        {tags.length > 0 && <Tags tags={tags} />}
-      </div>
-    </aside>
-  );
-}
-
-export default EventSideBar;

package/components/Sidebars/ServiceSidebar.tsx

@@ -1,128 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import type { Event, Service } from '@eventcatalog/types';
-
-import { CubeIcon, CollectionIcon } from '@heroicons/react/outline';
-import getBackgroundColor from '@/utils/random-bg';
-
-import ExternalLinks from './components/ExternalLinks';
-import Tags from './components/Tags';
-import Owners from './components/Owners';
-import ItemList from './components/ItemList';
-
-const getURLForEvent = (event: Event): string =>
-  event.domain ? `/domains/${event.domain}/events/${event.name}` : `/events/${event.name}`;
-
-interface ServiceSideBarProps {
-  service: Service;
-}
-
-function ServiceSidebar({ service }: ServiceSideBarProps) {
-  const { owners, subscribes, publishes, repository, tags = [], externalLinks, domain } = service;
-  const { language, url: repositoryUrl } = repository;
-
-  let languages = [];
-
-  if (language) {
-    languages = Array.isArray(language) ? language : [language];
-  }
-
-  let trimmedUrl = '';
-
-  if (repositoryUrl) {
-    trimmedUrl = repositoryUrl.replace(/(^\w+:|^)\/\//, '');
-  }
-
-  return (
-    <aside className="hidden xl:block xl:pl-8 ">
-      <h2 className="sr-only">Details</h2>
-
-      {publishes.length > 0 && (
-        <ItemList
-          title={`Publishes Events (${publishes.length})`}
-          titleIcon={{ icon: CubeIcon, className: 'text-indigo-400' }}
-          items={publishes.map((event) => ({ label: event.name, href: getURLForEvent(event), bgColor: 'indigo' }))}
-        />
-      )}
-
-      {subscribes.length > 0 && (
-        <ItemList
-          title={`Subscribes to Events (${subscribes.length})`}
-          titleIcon={{ icon: CubeIcon, className: 'text-green-400' }}
-          items={subscribes.map((event) => ({ label: event.name, href: getURLForEvent(event), bgColor: 'green' }))}
-        />
-      )}
-
-      {domain && (
-        <div className="border-t border-gray-200 py-6 space-y-8">
-          <div>
-            <h2 className="text-sm font-medium text-gray-500">
-              <CollectionIcon className="h-5 w-5 text-yellow-400 inline-block mr-2" aria-hidden="true" />
-              Domain
-            </h2>
-            <ul className="mt-2 leading-8">
-              <li className="inline" key={domain}>
-                <Link href={`/domains/${domain}`}>
-                  <a href="#" className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
-                    <div className="absolute flex-shrink-0 flex items-center justify-center">
-                      <span className="h-1.5 w-1.5 rounded-full bg-yellow-500 animate animate-pulse" aria-hidden="true" />
-                    </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900">{domain}</div>
-                  </a>
-                </Link>
-              </li>
-            </ul>
-          </div>
-        </div>
-      )}
-
-      {owners.length > 0 && <Owners owners={owners} />}
-
-      {repository?.url && (
-        <div className="border-t border-gray-200 py-6 space-y-8">
-          <div className="space-y-3">
-            <h2 className="text-sm font-medium text-gray-500">Repository</h2>
-            <ul className=" leading-8 space-y-2">
-              <li className="flex justify-start">
-                <a
-                  href={repository?.url}
-                  target="_blank"
-                  className="flex items-center space-x-3 text-blue-600 underline text-sm"
-                  rel="noreferrer"
-                >
-                  {trimmedUrl}
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div>
-      )}
-      {languages.length > 0 && (
-        <div className="border-t border-gray-200 py-6 space-y-8">
-          <div className="space-y-3">
-            <h2 className="text-sm font-medium text-gray-500">Language</h2>
-            {languages.map((value) => (
-              <div className="relative flex items-center mt-2" key={value}>
-                <div className="absolute flex-shrink-0 flex items-center justify-center">
-                  <span className="h-2 w-2 rounded-full" aria-hidden="true" style={{ background: getBackgroundColor(value) }} />
-                </div>
-                <div className="ml-3.5 text-sm font-medium text-gray-900">{value}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <Link href={`/visualiser?type=service&name=${service.name}`}>
-        <a className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
-          <span>View in Visualiser</span>
-        </a>
-      </Link>
-
-      {externalLinks.length > 0 && <ExternalLinks externalLinks={externalLinks} />}
-      {tags.length > 0 && <Tags tags={tags} />}
-    </aside>
-  );
-}
-
-export default ServiceSidebar;

package/components/Sidebars/components/ExternalLinks.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { ExternalLinkIcon } from '@heroicons/react/outline';
-
-function ExternalLinks({ externalLinks }: { externalLinks: any[] }) {
-  if (externalLinks.length === 0) return null;
-  return (
-    <div className=" py-2 space-y-8">
-      <div className="space-y-3">
-        {externalLinks.map((tag) => (
-          <a
-            href={tag.url}
-            target="_blank"
-            type="button"
-            className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-teal-300 shadow-sm text-sm font-medium rounded-md text-teal-800 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-200"
-            rel="noreferrer"
-            key={tag.url}
-          >
-            <ExternalLinkIcon className="-ml-1 mr-2 h-5 w-5 text-teal-200" aria-hidden="true" />
-            <span>{`${tag.label}`}</span>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default ExternalLinks;

package/components/Sidebars/components/ItemList.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import { CubeIcon } from '@heroicons/react/outline';
-
-function ItemList({ title, titleIcon: { icon: Icon = CubeIcon, className: iconClassName }, items }: any) {
-  return (
-    <div className="pt-6 py-6 space-y-8">
-      <div>
-        <h2 className="text-sm font-medium text-gray-500">
-          <Icon className={`h-5 w-5  inline-block mr-2 ${iconClassName}`} aria-hidden="true" />
-          {title}
-        </h2>
-        <ul className="mt-2 leading-8">
-          {items.map((item) => (
-            <li className="inline mr-2" key={item.label}>
-              <Link href={item.href}>
-                <a className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
-                  <div className="absolute flex-shrink-0 flex items-center justify-center">
-                    <span className={`h-1.5 w-1.5 rounded-full bg-${item.bgColor}-500`} aria-hidden="true" />
-                  </div>
-                  <div className="ml-3.5 text-sm font-medium text-gray-900 truncate max-w-xs">{item.label}</div>
-                </a>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-}
-
-export default ItemList;

package/components/Sidebars/components/Owners.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import type { Owner } from '@eventcatalog/types';
-import { useUser } from '@/hooks/EventCatalog';
-
-function Owners({ owners }: { owners: Owner[] | string[] }) {
-  const { getUserById } = useUser();
-
-  return (
-    <div className=" py-6 space-y-8">
-      <div>
-        <h2 className="text-sm font-medium text-gray-500">Domain Owners ({owners.length})</h2>
-        <ul className="mt-4 leading-8 space-y-2">
-          {owners.map((owner) => {
-            const user = getUserById(owner);
-
-            if (!user) return null;
-
-            return (
-              <li className="flex justify-start" key={user.id}>
-                <Link href={`/users/${user.id}`}>
-                  <a className="flex items-center space-x-3">
-                    <div className="flex-shrink-0">
-                      <img className="h-5 w-5 rounded-full" src={user.avatarUrl} alt="" />
-                    </div>
-                    <div className="text-sm font-medium text-gray-900">{user.name}</div>
-                  </a>
-                </Link>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </div>
-  );
-}
-
-export default Owners;

package/components/Sidebars/components/Tags.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import type { Tag } from '@eventcatalog/types';
-import { TagIcon } from '@heroicons/react/outline';
-
-const tailwindBgs = ['purple', 'pink', 'green', 'yellow', 'blue', 'indigo'];
-
-function Tags({ tags }: { tags: Tag[] }) {
-  return (
-    <div className=" py-6 space-y-8">
-      <div>
-        <h2 className="text-sm font-medium text-gray-500">
-          <TagIcon className="h-5 w-5 text-gray-400 inline-block mr-2" aria-hidden="true" />
-          Tags
-        </h2>
-        <div className="mt-3 space-y-2">
-          {tags.map(({ label, url }, index) => {
-            const color = tailwindBgs[index % tailwindBgs.length];
-
-            if (url) {
-              return (
-                <a href={url} className="inline-block underline" target="_blank" rel="noreferrer">
-                  <span
-                    className={`underline inline-block mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-${color}-100 text-${color}-800`}
-                  >
-                    {label}
-                  </span>
-                </a>
-              );
-            }
-
-            return (
-              <span
-                className={`inline-block mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-${color}-100 text-${color}-800`}
-              >
-                {label}
-              </span>
-            );
-          })}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Tags;

package/components/SyntaxHighlighter.tsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react';
-
-import codeStyle from 'react-syntax-highlighter/dist/cjs/styles/prism/dracula';
-import { Prism as PrismSyntaxHighlighter } from 'react-syntax-highlighter';
-import copy from 'copy-text-to-clipboard';
-import { ClipboardCopyIcon } from '@heroicons/react/outline';
-
-function SyntaxHighlighter({ language, name = '', ...props }: any) {
-  const [showCopied, setShowCopied] = useState(false);
-
-  const handleCopyCode = () => {
-    copy(props.children);
-    setShowCopied(true);
-    setTimeout(() => setShowCopied(false), 2000);
-  };
-
-  const regex = /\\n/g;
-  return (
-    <div className="h-96 relative">
-      {name && (
-        <div className={`flex -mb-3 pb-2 bg-gray-900 ${name ? 'justify-between' : 'justify-end'}`}>
-          {name && <span className="block text-xs py-2 px-2 font-bold text-gray-300">{name}</span>}
-          <button type="button" onClick={handleCopyCode} className="text-xs  text-white rounded-md px-4">
-            {showCopied ? 'Copied' : <ClipboardCopyIcon className="h-4 w-4" />}
-          </button>
-        </div>
-      )}
-
-      {!name && (
-        <button type="button" onClick={handleCopyCode} className="text-xs absolute right-0 top-2 text-white rounded-md px-4">
-          {showCopied ? 'Copied' : <ClipboardCopyIcon className="h-4 w-4" />}
-        </button>
-      )}
-
-      <PrismSyntaxHighlighter style={codeStyle} language={language} {...props} wrapLines className="h-96 overflow-auto">
-        {props.children.replace(regex, '\n')}
-      </PrismSyntaxHighlighter>
-    </div>
-  );
-}
-
-export default SyntaxHighlighter;