@eventcatalog/core 0.0.0

package/components/Mdx/Examples.tsx

@@ -0,0 +1,77 @@
+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>
+          <nav className="-mb-px flex" 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-green-500 text-green-600 selected'
+                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
+                    'whitespace-nowrap py-4 border-b-2 font-medium text-sm important:no-underline px-8 hover:bg-gray-50 transition'
+                  )}
+                  aria-current={isSelected ? 'page' : undefined}
+                >
+                  {tab.name}
+                  <span className="block text-xs mt-">({tab.langugage})</span>
+                </button>
+              );
+            })}
+          </nav>
+          <div className="my-4">
+            <SyntaxHighlighter language={selectedTab.langugage} showLineNumbers={showLineNumbers}>
+              {selectedTab.content}
+            </SyntaxHighlighter>
+            {selectedTab.langugage && (
+              <span className="-mb-2 block text-xs text-right font-bold">{selectedTab.name}</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Examples;

package/components/Mermaid/index.tsx

@@ -0,0 +1,47 @@
+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,
+    width: '1000px',
+  },
+  themeCSS: `
+  .node {
+      filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .2))
+  }
+  .mermaid svg {
+      width: 10000px
+  }
+  .node rect {
+      fill: white
+  }
+    `,
+  fontFamily: 'Fira Code',
+  width: '100%',
+});
+
+interface MermaidProps {
+  data: Event | Service;
+  source: 'event' | 'service';
+  rootNodeColor?: string;
+}
+
+function Mermaid({ data, source = 'event', rootNodeColor }: MermaidProps) {
+  const mermaidChart =
+    source === 'event'
+      ? buildMermaidFlowChartForEvent(data as Event, rootNodeColor)
+      : buildMermaidFlowChartForService(data as Service, rootNodeColor);
+
+  useEffect(() => {
+    mermaid.contentLoaded();
+  }, []);
+  return <div className="mermaid">{mermaidChart}</div>;
+}
+
+export default Mermaid;

package/components/NotFound/index.tsx

@@ -0,0 +1,44 @@
+import { DocumentAddIcon } from '@heroicons/react/solid';
+import url from 'url';
+
+interface NotFoundProps {
+  type: 'service' | 'event';
+  name: string;
+  editUrl: string;
+}
+
+export default function Example(props: NotFoundProps) {
+  const { type, name, editUrl } = props;
+
+  const urlToAddPage = url.resolve(editUrl, `${type}/${name}`);
+
+  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">
+          Documentation for {type} <span className="underline">{name}</span> is missing!
+        </p>
+        <p className="mt-4 text-xs text-gray-400">
+          Help the eco-system and add the documentation for others ❤️{' '}
+        </p>
+        <div className="mt-12">
+          <a
+            href={urlToAddPage}
+            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 <span className="underline px-1">{name}</span> documentation
+          </a>
+        </div>
+      </div>
+    </main>
+  );
+}

package/components/Sidebars/EventSidebar.tsx

@@ -0,0 +1,202 @@
+import React from 'react';
+import Link from 'next/link';
+import { CubeIcon, DownloadIcon } from '@heroicons/react/outline';
+import type { Event } from '@eventcatalog/types';
+import fileDownload from 'js-file-download';
+import { useUser } from '@/hooks/EventCatalog';
+
+interface EventSideBarProps {
+  event: Event;
+  loadedVersion?: string;
+}
+
+function EventSideBar({ event, loadedVersion }: EventSideBarProps) {
+  const { getUserById } = useUser();
+
+  const { name: eventName, owners, producers, consumers, historicVersions } = event;
+
+  const handleDownload = async () => {
+    try {
+      const res = await fetch(`/api/event/${event.name}/download`);
+      if (res.status === 404) throw new Error('Failed to find file');
+      const data = await res.text();
+      fileDownload(data, event.name);
+    } catch (error) {
+      // TODO: Maybe better error experince
+      console.error(error);
+    }
+  };
+
+  return (
+    <aside className="hidden xl:block xl:pl-8">
+      <h2 className="sr-only">Details</h2>
+
+      <div className="pt-6 py-6 space-y-8">
+        <div>
+          <h2 className="text-sm font-medium text-gray-500">
+            <CubeIcon className="h-5 w-5 text-green-400 inline-block mr-2" aria-hidden="true" />
+            Producers
+          </h2>
+          <ul className="mt-2 leading-8">
+            {producers.map((producer) => (
+              <li className="inline mr-1" key={producer}>
+                <Link href={`/services/${producer}`}>
+                  <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-green-500 animate animate-pulse"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900">{producer}</div>
+                  </a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="border-t border-gray-200 py-6 space-y-8">
+        <div>
+          <h2 className="text-sm font-medium text-gray-500">
+            <CubeIcon className="h-5 w-5 text-indigo-400 inline-block mr-2" aria-hidden="true" />
+            Consumers
+          </h2>
+          <ul className="mt-2 leading-8">
+            {consumers.map((consumer) => (
+              <li className="inline" key={consumer}>
+                <Link href={`/services/${consumer}`}>
+                  <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-indigo-500 animate animate-pulse"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900">{consumer}</div>
+                  </a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      {historicVersions.length > 0 && (
+        <div className="border-t border-gray-200 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={`/events/${eventName}`}>
+                  <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 ">
+                    <Link href={`/events/${eventName}/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>
+      )}
+      {/* <div className="border-t border-gray-200 py-6 space-y-8">
+        <div>
+          <h2 className="text-sm font-medium text-gray-500">
+            <MapIcon className="h-5 w-5 text-red-400 inline-block mr-2" aria-hidden="true" />
+            Domains
+          </h2>
+          <ul role="list" className="mt-2 leading-8">
+            {domains.map((domain) => {
+              return (
+                <li className="inline" key={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-red-500" aria-hidden="true" />
+                    </div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900">{domain}</div>
+                  </a>{' '}
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </div> */}
+      <div className="border-t border-gray-200 py-6 space-y-8">
+        <div>
+          <h2 className="text-sm font-medium text-gray-500">Event Owners</h2>
+          <ul className="mt-4 leading-8 space-y-2">
+            {owners.map((id) => {
+              const user = getUserById(id);
+
+              if (!user) return null;
+
+              return (
+                <li className="flex justify-start" key={id}>
+                  <Link href={`/users/${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>
+      <div className="border-t border-gray-200 py-6 space-y-1">
+        <button
+          type="button"
+          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"
+          onClick={() => handleDownload()}
+        >
+          <DownloadIcon className="-ml-1 mr-2 h-5 w-5 text-gray-200" aria-hidden="true" />
+          <span>Download Schema</span>
+        </button>
+        {historicVersions.length > 0 && (
+          <Link href={`/events/${eventName}/logs`}>
+            <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>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+export default EventSideBar;

package/components/Sidebars/ServiceSidebar.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import Link from 'next/link';
+import type { Service } from '@eventcatalog/types';
+
+import { CubeIcon, TagIcon } from '@heroicons/react/outline';
+import { useUser } from '@/hooks/EventCatalog';
+import getBackgroundColor from '@/utils/random-bg';
+
+const tailwindBgs = ['purple', 'pink', 'green', 'yellow', 'blue', 'indigo'];
+
+interface ServiceSideBarProps {
+  service: Service;
+}
+
+function ServiceSidebar({ service }: ServiceSideBarProps) {
+  const { getUserById } = useUser();
+
+  const { owners, subscribes, publishes, repository, tags = [] } = 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>
+
+      <div className="pt-6 py-6 space-y-8">
+        <div>
+          <h2 className="text-sm font-medium text-gray-500">
+            <CubeIcon className="h-5 w-5 text-indigo-400 inline-block mr-2" aria-hidden="true" />
+            Publishes Events ({publishes.length})
+          </h2>
+          <ul className="mt-2 leading-8">
+            {publishes.map((event) => (
+              <li className="inline" key={event.name}>
+                <Link href={`/events/${event.name}`}>
+                  <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-indigo-500 animate animate-pulse"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900">{event.name}</div>
+                  </a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+      <div className="border-t border-gray-200 py-6 space-y-8">
+        <div>
+          <h2 className="text-sm font-medium text-gray-500">
+            <CubeIcon className="h-5 w-5 text-green-400 inline-block mr-2" aria-hidden="true" />
+            Subscribes to Events ({subscribes.length})
+          </h2>
+          <ul className="mt-2 leading-8">
+            {subscribes.map((event) => (
+              <li className="inline" key={event.name}>
+                <Link href={`/events/${event.name}`}>
+                  <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-green-500  animate animate-pulse"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900">{event.name}</div>
+                  </a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <div className="border-t border-gray-200 py-6 space-y-8">
+        <div>
+          <h2 className="text-sm font-medium text-gray-500">Service 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>
+      {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">
+                <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>
+      )}
+      {tags.length > 0 && (
+        <div className="border-t border-gray-200 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>
+      )}
+    </aside>
+  );
+}
+
+export default ServiceSidebar;

package/components/SyntaxHighlighter.tsx

@@ -0,0 +1,34 @@
+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';
+
+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="relative group">
+      <button
+        type="button"
+        onClick={handleCopyCode}
+        className="absolute top-2  right-5 text-sm bg-gray-700 text-white rounded-md py-1 px-4 transform transition opacity-0  group-hover:opacity-100"
+      >
+        {showCopied ? 'Copied' : 'Copy'}
+      </button>
+      <PrismSyntaxHighlighter style={codeStyle} language={language} {...props} wrapLines>
+        {props.children.replace(regex, '\n')}
+      </PrismSyntaxHighlighter>
+      {name && <span className="-mb-2 block text-xs text-right font-bold">{name}</span>}
+    </div>
+  );
+}
+
+export default SyntaxHighlighter;

package/hooks/EventCatalog.tsx

@@ -0,0 +1,35 @@
+import React, { useContext, ReactNode } from 'react';
+import type { EventCataLogConfig, User } from '@eventcatalog/types';
+import path from 'path';
+import defaultConfig from '../eventcatalog.config';
+
+export const Context = React.createContext<EventCataLogConfig | null>(defaultConfig);
+
+export function EventCatalogContextProvider({ children }: { children: ReactNode }): JSX.Element {
+  return <Context.Provider value={defaultConfig}>{children}</Context.Provider>;
+}
+
+export const useConfig = () => useContext<EventCataLogConfig>(Context);
+
+export const useUser = () => {
+  const config = useConfig();
+
+  const getUserById = (id): User => {
+    const users = config.users || [];
+    return users.find((user) => user.id === id);
+  };
+
+  return {
+    getUserById,
+  };
+};
+
+export const useUrl = () => {
+  const config = useConfig();
+
+  const getEditUrl = (url: string) => path.join(config.editUrl, url);
+
+  return {
+    getEditUrl,
+  };
+};

package/lib/__tests__/assets/events/AddedItemToCart/index.md

@@ -0,0 +1,19 @@
+---
+name: AddedItemToCart
+version: 0.0.1
+summary: |
+  Holds information about the cusomer and product when they add an item to the cart.
+producers:
+    - Shopping API
+    - Application API
+consumers:
+    - Customer Portal
+domains:
+    - Shopping
+owners:
+    - dboyne
+    - mSmith
+draft: true    
+---
+
+# Testing

package/lib/__tests__/assets/events/EmailSent/index.md

@@ -0,0 +1,15 @@
+---
+name: EmailSent
+version: 0.0.1
+summary: |
+  Tells us when an email has been sent
+producers:
+    - Email Platform
+owners:
+    - dboyne
+    - mSmith
+---
+
+Duis mollis quam enim, feugiat porta mi porta non. In lacus nulla, gravida nec sagittis vel, sagittis id tellus. Vestibulum maximus velit eget massa pulvinar ornare. In vel libero nulla. Aliquam a leo risus. Donec bibendum velit non nulla sollicitudin lacinia. Vestibulum imperdiet nunc eget neque sagittis, eget volutpat purus ornare. Mauris malesuada finibus pretium. Vestibulum suscipit tortor sit amet dolor tempor cursus. Nunc ac felis accumsan.
+
+<Mermaid />