@eventcatalog/core 0.0.0

package/lib/events.ts

@@ -0,0 +1,221 @@
+import fs from 'fs';
+import path from 'path';
+import { serialize } from 'next-mdx-remote/serialize';
+import type { Service, Event } from '@eventcatalog/types';
+import compareVersions from 'compare-versions';
+import * as Diff from 'diff';
+import { MarkdownFile } from '@/types/index';
+
+import { extentionToLanguageMap } from './file-reader';
+
+import { getLastModifiedDateOfFile, getSchemaFromDir, readMarkdownFile } from '@/lib/file-reader';
+
+const parseEventFrontMatterIntoEvent = (eventFrontMatter: any): Event => {
+  const { name, version, summary, producers = [], consumers = [], owners = [] } = eventFrontMatter;
+  return { name, version, summary, producers, consumers, owners };
+};
+
+const versionsForEvents = (pathToEvent) => {
+  const versionsDir = path.join(pathToEvent, 'versioned');
+
+  if (fs.existsSync(versionsDir)) {
+    const files = fs.readdirSync(versionsDir);
+    return files.sort(compareVersions).reverse();
+  }
+
+  return [];
+};
+
+export const getLogsForEvent = (eventName) => {
+  const eventsDir = path.join(process.env.PROJECT_DIR, 'events');
+  const historicVersions = versionsForEvents(path.join(eventsDir, eventName));
+
+  const allVersions = historicVersions.map((version) => ({
+    version,
+    pathToDir: path.join(eventsDir, eventName, 'versioned', version),
+  }));
+
+  // Get the latest version
+  const { data: { version: latestVersion } = {} } = readMarkdownFile(
+    path.join(eventsDir, eventName, 'index.md')
+  );
+
+  // Add the current version to the list
+  allVersions.unshift({ version: latestVersion, pathToDir: path.join(eventsDir, eventName) });
+
+  const versions = allVersions.reduce((diffs, versionData, index) => {
+    const hasVersionToCompareToo = !!allVersions[index + 1];
+    const previousVersionData = allVersions[index + 1];
+
+    // Check if both files have the schema to compare against...
+    if (hasVersionToCompareToo) {
+      const { version, pathToDir } = versionData;
+      const { version: previousVersion, pathToDir: previousVersionPathToDir } = previousVersionData;
+      const schema = getSchemaFromDir(pathToDir);
+      const previousSchema = getSchemaFromDir(previousVersionPathToDir);
+      let changelog = null;
+
+      try {
+        const { content } = readMarkdownFile(path.join(pathToDir, 'changelog.md'));
+        changelog = content;
+      } catch (error) {
+        // nothing found it's OK.
+        console.log('No changelog found');
+      }
+
+      const comparision = {
+        versions: [previousVersion, version],
+        changelog: {
+          content: changelog,
+        },
+        value:
+          schema && previousSchema
+            ? Diff.createTwoFilesPatch(
+                `schema.${schema.extension} (${previousVersion})`,
+                `schema.${previousSchema.extension} (${version})`,
+                previousSchema.snippet,
+                schema.snippet
+              )
+            : null,
+      };
+
+      diffs.push(comparision);
+    }
+
+    return diffs;
+  }, []);
+
+  const parseChangeLogs = versions.map(async (version) => {
+    if (version.changelog.content) {
+      const mdxSource = await serialize(version.changelog.content);
+      return {
+        ...version,
+        changelog: {
+          ...version.changelog,
+          source: mdxSource,
+        },
+      };
+    }
+    return version;
+  });
+
+  const values = Promise.all(parseChangeLogs);
+
+  return values;
+};
+
+const getEventExamplesFromDir = (pathToExamples) => {
+  let examples;
+
+  // Get examples for directory
+  try {
+    const files = fs.readdirSync(pathToExamples);
+    examples = files.map((filename) => {
+      const content = fs.readFileSync(path.join(pathToExamples, filename), {
+        encoding: 'utf-8',
+      });
+
+      const extension = filename.split('.').pop();
+
+      return {
+        name: filename,
+        snippet: content,
+        langugage: extentionToLanguageMap[extension],
+      };
+    });
+  } catch (error) {
+    examples = [];
+  }
+
+  return examples;
+};
+
+export const getAllEvents = (): Event[] => {
+  const eventsDir = path.join(process.env.PROJECT_DIR, 'events');
+  const folders = fs.readdirSync(eventsDir);
+  return folders.map((folder) => {
+    const { data } = readMarkdownFile(path.join(eventsDir, folder, 'index.md'));
+    const historicVersions = versionsForEvents(path.join(eventsDir, folder));
+    return {
+      ...parseEventFrontMatterIntoEvent(data),
+      historicVersions,
+    };
+  });
+};
+
+export const getEventByName = async (
+  eventName: string,
+  version?: string
+): Promise<{ event: Event; markdown: MarkdownFile }> => {
+  const eventsDir = path.join(process.env.PROJECT_DIR, 'events');
+  const eventDirectory = path.join(eventsDir, eventName);
+  let versionDirectory = null;
+
+  if (version) {
+    versionDirectory = path.join(eventsDir, eventName, 'versioned', version);
+  }
+
+  const directoryToLoadForEvent = version ? versionDirectory : eventDirectory;
+
+  try {
+    const { data, content } = readMarkdownFile(path.join(directoryToLoadForEvent, `index.md`));
+    const event = parseEventFrontMatterIntoEvent(data);
+
+    const mdxSource = await serialize(content);
+
+    return {
+      event: {
+        ...event,
+        historicVersions: versionsForEvents(eventDirectory),
+        schema: getSchemaFromDir(directoryToLoadForEvent),
+        examples: getEventExamplesFromDir(path.join(directoryToLoadForEvent, `examples`)),
+      },
+      markdown: {
+        content,
+        source: mdxSource,
+        lastModifiedDate: getLastModifiedDateOfFile(path.join(directoryToLoadForEvent, `index.md`)),
+      },
+    };
+  } catch (error) {
+    console.log(error);
+    console.log('Failed to get event by name', eventName);
+    return Promise.reject();
+  }
+};
+
+export const getUniqueServicesNamesFromEvents = (events: Event[]) => {
+  const allConsumersAndProducers = events.reduce((domains, event) => {
+    const { consumers = [], producers = [] } = event;
+    return domains.concat(consumers).concat(producers);
+  }, []);
+
+  const data = allConsumersAndProducers.map((service) => service);
+
+  // @ts-ignore
+  return [...new Set(data)];
+};
+
+export const getAllEventsByOwnerId = async (ownerId) => {
+  const events = await getAllEvents();
+  return events.filter(({ owners = [] }) => owners.some((id) => id === ownerId));
+};
+
+export const getAllEventsThatHaveRelationshipWithService = (
+  service: Service,
+  events: Event[]
+): { publishes: Event[]; subscribes: Event[] } => {
+  const relationshipsBetweenEvents = events.reduce(
+    (data, event) => {
+      const serviceSubscribesToEvent = event.consumers.some((id) => id === service.id);
+      const servicePublishesEvent = event.producers.some((id) => id === service.id);
+
+      return {
+        publishes: servicePublishesEvent ? data.publishes.concat(event) : data.publishes,
+        subscribes: serviceSubscribesToEvent ? data.subscribes.concat(event) : data.subscribes,
+      };
+    },
+    { publishes: [], subscribes: [] }
+  );
+
+  return relationshipsBetweenEvents;
+};

package/lib/file-reader.ts

@@ -0,0 +1,52 @@
+import fs from 'fs';
+import path from 'path';
+import type { Schema } from '@eventcatalog/types';
+import matter from 'gray-matter';
+
+// https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
+export const extentionToLanguageMap = {
+  cs: 'csharp',
+  js: 'javascript',
+  json: 'json',
+  yml: 'yml',
+  java: 'java',
+  pb: 'protobuf',
+  proto: 'protobuf',
+  thrift: 'thrift',
+};
+
+export const readMarkdownFile = (pathToFile: string) => {
+  const file = fs.readFileSync(pathToFile, {
+    encoding: 'utf-8',
+  });
+  return matter(file);
+};
+
+export const getSchemaFromDir = (pathToSchemaDir: string): Schema => {
+  try {
+    const files = fs.readdirSync(pathToSchemaDir);
+
+    // See if any schemas are in there, ignoring extension
+    const schemaFileName = files.find((fileName) => fileName.includes('schema'));
+    if (!schemaFileName) throw new Error('No schema found');
+
+    const schemaFile = fs.readFileSync(path.join(pathToSchemaDir, schemaFileName), 'utf-8');
+    const extension = schemaFileName.split('.').pop();
+
+    return {
+      snippet: `${schemaFile}`,
+      language: extentionToLanguageMap[extension] || extension,
+      extension,
+    };
+  } catch (error) {
+    return null;
+  }
+};
+
+export const getLastModifiedDateOfFile = (filePath) => {
+  const stats = fs.statSync(filePath);
+  const lastModifiedDate = new Date(stats.mtime);
+  return `${lastModifiedDate.getFullYear()}/${
+    lastModifiedDate.getMonth() + 1
+  }/${lastModifiedDate.getDate()}`;
+};

package/lib/graphs.ts

@@ -0,0 +1,33 @@
+import type { Event, Service } from '@eventcatalog/types';
+
+const buildMermaid = (centerNode, leftNodes, rightNodes, rootNodeColor) => {
+  // mermaid does not work with spaces in nodes
+  const removeSpacesInNames = (nodes) => nodes.map((node) => node.replace(/ /g, '_'));
+  const lNodes = removeSpacesInNames(leftNodes);
+  const rNodes = removeSpacesInNames(rightNodes);
+  const nodeValue = centerNode.replace(/ /g, '_');
+
+  return `flowchart LR
+${lNodes.map((node) => `${node}:::producer-->${nodeValue}:::event\n`).join('')}
+classDef event stroke:${rootNodeColor},stroke-width: 4px;
+classDef producer stroke:#75d7b6,stroke-width: 2px;
+classDef consumer stroke:#818cf8,stroke-width: 2px;
+${rNodes.map((node) => `${nodeValue}:::event-->${node}:::consumer\n`).join('')}
+  `;
+};
+
+export const buildMermaidFlowChartForEvent = (
+  { name: eventName, producers, consumers }: Event,
+  rootNodeColor = '#2563eb'
+) => buildMermaid(eventName, producers, consumers, rootNodeColor);
+
+export const buildMermaidFlowChartForService = (
+  { publishes, subscribes, name: serviceName }: Service,
+  rootNodeColor = '#2563eb'
+) =>
+  buildMermaid(
+    serviceName,
+    subscribes.map((s) => s.name),
+    publishes.map((p) => p.name),
+    rootNodeColor
+  );

package/lib/services.ts

@@ -0,0 +1,72 @@
+import fs from 'fs';
+import path from 'path';
+import { serialize } from 'next-mdx-remote/serialize';
+import { Service } from '@eventcatalog/types';
+import { readMarkdownFile, getLastModifiedDateOfFile } from '@/lib/file-reader';
+import { MarkdownFile } from '../types/index';
+
+import { getAllEvents, getAllEventsThatHaveRelationshipWithService } from '@/lib/events';
+
+const buildService = (eventFrontMatter: any): Service => {
+  const { id, name, summary, owners = [], repository = {}, tags = [] } = eventFrontMatter;
+  return { id, name, summary, owners, repository, tags };
+};
+
+export const getAllServices = (): Service[] => {
+  const servicesDir = path.join(process.env.PROJECT_DIR, 'services');
+
+  const folders = fs.readdirSync(servicesDir);
+  const services = folders.map((folder) =>
+    readMarkdownFile(path.join(servicesDir, folder, 'index.md'))
+  );
+  const events = getAllEvents();
+
+  const parsedServices = services.map((frontMatter) => buildService(frontMatter.data));
+
+  // @ts-ignore
+  return parsedServices.map((service) => ({
+    ...service,
+    ...getAllEventsThatHaveRelationshipWithService(service, events),
+  }));
+};
+
+export const getAllServicesByOwnerId = async (ownerId): Promise<Service[]> => {
+  const services = await getAllServices();
+  const servicesOwnedByUser = services.filter((service) =>
+    service.owners.some((id) => id === ownerId)
+  );
+  return servicesOwnedByUser.map((service) => ({
+    ...service,
+  }));
+};
+
+export const getServiceByName = async (
+  serviceName
+): Promise<{ service: Service; markdown: MarkdownFile }> => {
+  try {
+    const servicesDir = path.join(process.env.PROJECT_DIR, 'services');
+    const serviceDirectory = path.join(servicesDir, serviceName);
+    const { data, content } = readMarkdownFile(path.join(serviceDirectory, `index.md`));
+    const service = buildService(data);
+
+    const events = getAllEvents();
+
+    const mdxSource = await serialize(content);
+
+    return {
+      // @ts-ignore
+      service: {
+        ...service,
+        ...getAllEventsThatHaveRelationshipWithService(service, events),
+      },
+      markdown: {
+        content,
+        lastModifiedDate: getLastModifiedDateOfFile(path.join(serviceDirectory, `index.md`)),
+        source: mdxSource,
+      },
+    };
+  } catch (error) {
+    console.log('Failed to get service by name', serviceName);
+    return Promise.reject();
+  }
+};

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@eventcatalog/core",
+  "version": "0.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "eventcatalog": "bin/eventcatalog.js"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "generate": "node scripts/generate.js",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.4.2",
+    "@heroicons/react": "^1.0.5",
+    "@mdx-js/react": "^1.6.22",
+    "@tailwindcss/forms": "^0.3.4",
+    "@tailwindcss/line-clamp": "^0.2.2",
+    "@tailwindcss/typography": "^0.4.1",
+    "compare-versions": "^4.1.2",
+    "copy-text-to-clipboard": "^3.0.1",
+    "diff": "^5.0.0",
+    "diff2html": "^3.4.13",
+    "fs-extra": "^10.0.0",
+    "gray-matter": "^4.0.3",
+    "js-file-download": "^0.4.12",
+    "mermaid": "^8.13.4",
+    "next": "^12.0.5",
+    "next-mdx-remote": "^3.0.8",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-force-graph-3d": "^1.21.10",
+    "react-syntax-highlighter": "^15.4.5"
+  },
+  "devDependencies": {
+    "@eventcatalog/types": "0.0.0",
+    "@types/react": "^17.0.36",
+    "autoprefixer": "^10.4.0",
+    "commander": "^8.3.0",
+    "eslint": "7.32.0",
+    "eslint-config-next": "12.0.4",
+    "postcss": "^8.3.11",
+    "tailwindcss": "^2.2.19",
+    "trim": "0.0.3",
+    "typescript": "^4.4.4"
+  },
+  "gitHead": "5f82ce7f267e9b3ec771bbd3cc81359ed0a8fd18"
+}

package/pages/_app.tsx

@@ -0,0 +1,49 @@
+import '../styles/globals.css';
+import { AppProps } from 'next/app';
+import Head from 'next/head';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import { EventCatalogContextProvider } from '@/hooks/EventCatalog';
+
+export default ({ Component, pageProps }: AppProps) => (
+  <EventCatalogContextProvider>
+    <Head>
+      <title>EventCatalog</title>
+      <script src="//unpkg.com/three" />
+      <script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js" />
+
+      <meta
+        name="description"
+        content="An open source project to Discover, Explore and Document your Event Driven Architectures."
+      />
+      <meta property="og:url" content="https://demo.eventcatalog.dev/" />
+      <meta property="og:type" content="website" />
+      <meta
+        property="og:title"
+        content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."
+      />
+      <meta
+        property="og:description"
+        content="An open source tool powered by markdown to document your Event Driven Architecture."
+      />
+      <meta property="og:image" content="https://demo.eventcatalog.dev/opengraph.png" />
+      <meta
+        property="og:image:alt"
+        content="EventCatalog | Discover, Explore and Document your Event Driven Architectures."
+      />
+      <meta property="og:image:width" content="1200" />
+      <meta property="og:image:height" content="600" />
+      <meta property="og:locale" content="en-GB" />
+      <meta name="author" content="David Boyne" />
+
+      {/* Need to load this before any of the Html2Diff Code */}
+      <link
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/atom-one-light.min.css"
+      />
+    </Head>
+    <Header />
+    <Component {...pageProps} />
+    <Footer />
+  </EventCatalogContextProvider>
+);

package/pages/api/event/[name]/download.js

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+
+// eslint-disable-next-line func-names
+export default function (req, res) {
+  const { name: eventName } = req.query;
+
+  const eventDir = path.join(process.env.PROJECT_DIR, 'events', eventName);
+
+  try {
+    // Find the schema file
+    const filesInEventDir = fs.readdirSync(eventDir);
+    const schemaFileName = filesInEventDir.find((fileName) => fileName.indexOf('schema.') > -1);
+
+    if (schemaFileName) {
+      const schemaFile = fs.readFileSync(path.join(eventDir, schemaFileName));
+      res.send(schemaFile).end();
+    } else {
+      res.status(404).end();
+    }
+  } catch (error) {
+    console.log(error);
+    res.status(404).end();
+  }
+}

package/pages/events/[name]/logs.tsx

@@ -0,0 +1,170 @@
+import { MDXRemote } from 'next-mdx-remote';
+import React, { useEffect } from 'react';
+import Link from 'next/link';
+
+import * as Diff2Html from 'diff2html/lib/ui/js/diff2html-ui-slim';
+import 'diff2html/bundles/css/diff2html.min.css';
+
+import { CodeIcon } from '@heroicons/react/solid';
+import BreadCrumbs from '@/components/BreadCrumbs';
+
+import { getLogsForEvent, getEventByName } from '@/lib/events';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+
+interface LogsProps {
+  name: string;
+  currentVersion: string;
+  changes: any;
+}
+
+function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
+  const pages = [
+    { name: 'Events', href: '/events', current: false },
+    { name: eventName, href: `/events/${eventName}`, current: false },
+    { name: 'Logs', href: `/events/${eventName}/history`, current: true },
+  ];
+
+  useEffect(() => {
+    const configuration = {
+      drawFileList: false,
+      matching: 'lines',
+      highlight: true,
+      fileListToggle: false,
+      outputFormat: 'side-by-side',
+    };
+
+    changes.forEach((diff, index) => {
+      if (diff.value) {
+        const targetElement = document.getElementById(`code-diff-${index}`);
+
+        // @ts-ignore
+        const diff2htmlUi = new Diff2Html.Diff2HtmlUI(targetElement, diff.value, configuration);
+        diff2htmlUi.draw();
+        diff2htmlUi.highlightCode();
+      }
+    });
+  }, [changes]);
+
+  return (
+    <div className="flex relative min-h-screen">
+      <div className=" flex flex-col w-0 flex-1 ">
+        <main className="flex-1 ">
+          <div className="py-8 xl:py-10">
+            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 xl:max-w-7xl xl:grid xl:grid-cols-4">
+              <div className="xl:col-span-4 flex-col justify-between flex ">
+                <div className="mb-5 border-b border-gray-100 pb-4">
+                  <BreadCrumbs pages={pages} />
+                </div>
+                <div>
+                  <div>
+                    <div className="border-b pb-4 flex justify-between mb-4">
+                      <div className="space-y-2 w-full">
+                        <h1 className="text-3xl font-bold text-gray-900 relative">EmailSent</h1>
+                      </div>
+                    </div>
+                  </div>
+
+                  {changes.length === 0 && (
+                    <div className="text-gray-400 text-xl">No versions for Event found.</div>
+                  )}
+
+                  <div className="flow-root mb-20">
+                    <ul className="">
+                      {changes.map((event, eventIdx) => (
+                        <li key={eventIdx} className="">
+                          <div className="relative pb-8">
+                            {eventIdx !== changes.length - 1 ? (
+                              <span
+                                className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-100"
+                                aria-hidden="true"
+                              />
+                            ) : null}
+                            <div className="relative flex space-x-3">
+                              <div>
+                                <span
+                                  className={classNames(
+                                    'h-8 text-white text-xs w-8 rounded-full flex items-center justify-center ring-8 ring-white bg-blue-500'
+                                  )}
+                                >
+                                  <CodeIcon className="h-4 w-4" />
+                                  {/* {event.versions[0]} */}
+                                </span>
+                              </div>
+                              <div>
+                                <div>
+                                  <p className="font-bold text-gray-800 text-xl">
+                                    Schema version update
+                                    {event.versions.map((version, index) => {
+                                      const linkHref =
+                                        version === currentVersion
+                                          ? `/events/${eventName}`
+                                          : `/events/${eventName}/v/${version}`;
+                                      return (
+                                        <Link key={version} href={linkHref}>
+                                          <a className="font-medium">
+                                            {index === 0 && ` from`}
+                                            <span className="text-blue-500 underline px-1">
+                                              {version}
+                                              {version === currentVersion ? '(latest)' : ''}
+                                            </span>
+                                            {index === 0 && `to`}
+                                          </a>
+                                        </Link>
+                                      );
+                                    })}
+                                  </p>
+                                  {event.changelog.source && (
+                                    <>
+                                      <h2 className="text-xl text-blue-500 font-bold mt-4 border-b border-gray-100 pb-2">
+                                        Changelog
+                                      </h2>
+                                      <div className="prose max-w-none mt-2">
+                                        <MDXRemote {...event.changelog.source} />
+                                      </div>
+                                    </>
+                                  )}
+                                  {!event.changelog.source && (
+                                    <h2 className="text-base text-gray-300 font-bold mt-4">
+                                      No changelog file found.
+                                    </h2>
+                                  )}
+                                </div>
+                                <div className="text-right text-sm text-gray-500 py-4">
+                                  <div id={`code-diff-${eventIdx}`} />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export const getServerSideProps = async ({ query }) => {
+  const { name: eventName } = query;
+
+  const history = await getLogsForEvent(eventName);
+  const { event: { version } = {} } = await getEventByName(eventName);
+
+  return {
+    props: {
+      changes: history,
+      name: eventName,
+      currentVersion: version,
+    },
+  };
+};
+
+export default Logs;