@eventcatalog/core 0.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @eventcatalog/core

package/README.md

@@ -0,0 +1,11 @@
+## EventCatalog (core)
+
+This is the main EventCatalog application.
+
+To make changes or run this application core code, you will need to fork the EventCatalog repo and run the following command:
+
+```
+npm run start:catalog
+```
+
+This will run the catalog using the catalog information found in `examples/basic`.

package/bin/eventcatalog.js

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+const cli = require('commander');
+const path = require('path');
+const { execSync } = require('child_process');
+const fs = require('fs-extra');
+
+// this is the directory the users project is in
+const projectDIR = process.cwd();
+const coreDirectory = path.join(__dirname, '../');
+
+// this is the directory where the eventcatalog core code is
+const eventCatalogLibDir = path.join(projectDIR, '.eventcatalog-core');
+
+const copyCoreApplicationCodeIntoUsersProjectDir = () => {
+  const excludeFilesForCopy = ['.next', 'eventcatalog.config.js', 'bin', 'README.md'];
+  const exclusions = excludeFilesForCopy.map((file) => path.join(eventCatalogLibDir, file));
+
+  fs.ensureDirSync(eventCatalogLibDir);
+  fs.copySync(coreDirectory, eventCatalogLibDir);
+
+  // remove any files we don't care about
+  exclusions.map((path) => {
+    try {
+      fs.lstatSync(path).isDirectory()
+        ? fs.rmSync(path, { recursive: true, force: true })
+        : fs.unlinkSync(path);
+    } catch (error) {}
+  });
+
+  fs.copyFileSync(
+    path.join(projectDIR, 'eventcatalog.config.js'),
+    path.join(eventCatalogLibDir, 'eventcatalog.config.js')
+  );
+};
+
+cli
+  .command('start [siteDir]')
+  .description('Start the development server.')
+  .action(() => {
+    execSync(`PROJECT_DIR=${projectDIR} npm run start`, {
+      cwd: eventCatalogLibDir,
+      stdio: 'inherit',
+    });
+  });
+
+cli
+  .command('build [siteDir]')
+  .description('Start the development server.')
+  .action(() => {
+    if (!fs.existsSync(eventCatalogLibDir)) {
+      copyCoreApplicationCodeIntoUsersProjectDir();
+    }
+
+    // copy any public assets over (from users to the lib itself)
+    fs.copySync(path.join(projectDIR, 'public'), path.join(eventCatalogLibDir, 'public'));
+
+    // build using nextjs
+    execSync(`PROJECT_DIR=${projectDIR} npm run build`, {
+      cwd: eventCatalogLibDir,
+      stdio: 'inherit',
+    });
+
+    // everything is built make sure its back in the users project directory
+    fs.copySync(path.join(eventCatalogLibDir, '.next'), path.join(projectDIR, '.next'));
+  });
+
+cli
+  .command('dev [siteDir]')
+  .description('Start the development server.')
+  .action(() => {
+    if (!fs.existsSync(eventCatalogLibDir)) {
+      copyCoreApplicationCodeIntoUsersProjectDir();
+    }
+
+    // copy any public assets over (from users to the lib itself)
+    fs.copySync(path.join(projectDIR, 'public'), path.join(eventCatalogLibDir, 'public'));
+
+    fs.copyFileSync(
+      path.join(projectDIR, 'eventcatalog.config.js'),
+      path.join(eventCatalogLibDir, 'eventcatalog.config.js')
+    );
+
+    execSync(`PROJECT_DIR=${projectDIR} npm run dev`, {
+      cwd: eventCatalogLibDir,
+      stdio: 'inherit',
+    });
+  });
+
+cli
+
+  .command('generate [siteDir]')
+  .description('Start the generator scripts.')
+  .action(() => {
+    if (!fs.existsSync(eventCatalogLibDir)) {
+      // get the application ready
+      copyCoreApplicationCodeIntoUsersProjectDir();
+    }
+
+    fs.copyFileSync(
+      path.join(projectDIR, 'eventcatalog.config.js'),
+      path.join(eventCatalogLibDir, 'eventcatalog.config.js')
+    );
+
+    execSync(`PROJECT_DIR=${projectDIR} npm run generate`, {
+      cwd: eventCatalogLibDir,
+      stdio: 'inherit',
+    });
+  });
+
+async function run() {
+  cli.parse(process.argv);
+
+  if (!process.argv.slice(2).length) {
+    cli.outputHelp();
+  }
+}
+
+run();
+
+process.on('unhandledRejection', (err) => {
+  console.error(err);
+  // console.error(chalk.red(err.stack));
+  process.exit(1);
+});

package/components/BreadCrumbs.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { HomeIcon } from '@heroicons/react/solid';
+import Link from 'next/link';
+
+interface BreadCrumbsProps {
+  pages: { name: string; href: string; current: boolean }[];
+  homePath?: string;
+}
+
+function BreadCrumbs({ pages, homePath = '/events' }: BreadCrumbsProps) {
+  return (
+    <nav className="flex" aria-label="Breadcrumb">
+      <ol className="flex items-center space-x-4">
+        <li>
+          <Link href={homePath}>
+            <a className="text-gray-400 hover:text-gray-500">
+              <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+              <span className="sr-only">Home</span>
+            </a>
+          </Link>
+        </li>
+        {pages.map((page) => (
+          <li key={page.name}>
+            <div className="flex items-center">
+              <svg
+                className="flex-shrink-0 h-5 w-5 text-gray-300"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                aria-hidden="true"
+              >
+                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+              </svg>
+              <Link href={page.href}>
+                <a
+                  className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
+                  aria-current={page.current ? 'page' : undefined}
+                >
+                  {page.name}
+                </a>
+              </Link>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+export default BreadCrumbs;

package/components/ContentView.tsx

@@ -0,0 +1,127 @@
+import { PencilIcon } from '@heroicons/react/solid';
+import Link from 'next/link';
+import Admonition from '@/components/Mdx/Admonition';
+
+interface ContentViewProps {
+  title: string;
+  subtitle?: string;
+  tags?: { href?: string; label: string }[];
+  lastModifiedDate: string;
+  children: JSX.Element;
+  sidebar: JSX.Element;
+  breadCrumbs: JSX.Element;
+  editUrl?: string;
+  version?: string;
+  isOldVersion?: boolean;
+  latestVersionUrl?: string;
+  draft?: boolean;
+}
+
+export default function ContentView({
+  title,
+  subtitle,
+  tags = [],
+  lastModifiedDate,
+  children,
+  sidebar: SideBar,
+  breadCrumbs: BreadCrumbs,
+  editUrl,
+  isOldVersion,
+  latestVersionUrl,
+  version,
+  draft: isDraft = false,
+}: ContentViewProps) {
+  return (
+    <div className="flex relative">
+      <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-3 xl:pr-8 xl:border-r xl:border-gray-200 flex-col justify-between flex">
+                <div>
+                  {BreadCrumbs && (
+                    <div className="mb-5 border-b border-gray-100 pb-4">{BreadCrumbs}</div>
+                  )}
+                  <div>
+                    <div>
+                      <div className="xl:border-b pb-4 flex justify-between ">
+                        <div className="space-y-2 w-full">
+                          <h1 className="text-3xl font-bold text-gray-900 relative">
+                            {title}
+                            <div className="-top-1 relative inline-block ml-2">
+                              {tags.map((tag, index) => (
+                                <span
+                                  key={`${tag}-${index}`}
+                                  className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-yellow-100 text-yellow-800"
+                                >
+                                  {tag.label}
+                                </span>
+                              ))}
+                              {isDraft && (
+                                <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-gray-500 text-gray-100">
+                                  Draft
+                                </span>
+                              )}
+                            </div>
+                          </h1>
+                          <div className="text-gray-600 mb-10 text py-2">{subtitle}</div>
+                          {isOldVersion && version && (
+                            <Admonition className="mt-0 pt-0 w-full" type="warning">
+                              <>
+                                You are currently viewing an old version of this event ({version}).
+                                <Link href={latestVersionUrl}>
+                                  <a className="block text-sm pl-7 mt-2 text-blue-500 underline">
+                                    Read latest version &rarr;
+                                  </a>
+                                </Link>
+                              </>
+                            </Admonition>
+                          )}
+                        </div>
+                        <div className="mt-4 flex space-x-3 md:mt-0">
+                          <button
+                            type="button"
+                            className="hidden 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-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+                          >
+                            <PencilIcon
+                              className="-ml-1 mr-2 h-5 w-5 text-gray-400"
+                              aria-hidden="true"
+                            />
+                            <span>Edit</span>
+                          </button>
+                        </div>
+                      </div>
+                      <div className="py-3 xl:pt-6 xl:pb-0">
+                        {isDraft && (
+                          <Admonition className="mt-0 pt-0" type="warning">
+                            <>
+                              This event is currently in <span className="underline">draft</span>{' '}
+                              mode.
+                            </>
+                          </Admonition>
+                        )}
+
+                        <div className="prose max-w-none">{children}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-between mt-10">
+                  <a href={editUrl} target="_blank" className="flex text-gray-400" rel="noreferrer">
+                    <PencilIcon
+                      className="top-1 mr-2 relative h-4 w-4 text-gray-400"
+                      aria-hidden="true"
+                    />
+                    <span>Edit this page</span>
+                  </a>
+                  <span className="italic text-xs mt-2">Last updated on {lastModifiedDate}</span>
+                </div>
+              </div>
+              <div className="md:min-h-screen">{SideBar}</div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/components/Footer.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useConfig } from '@/hooks/EventCatalog';
+
+export default function Footer() {
+  const { organizationName, editUrl } = useConfig();
+  const year = new Date().getFullYear();
+
+  const navigation = {
+    main: [
+      { name: 'Events', href: '/events' },
+      { name: 'Services', href: '/services' },
+      { name: '3D Node Graph', href: '/overview' },
+      { name: 'GitHub', href: editUrl },
+    ],
+  };
+
+  return (
+    <footer className="bg-gray-800">
+      <div className="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+        <nav className="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
+          {navigation.main.map((item) => (
+            <div key={item.name} className="px-5 py-2">
+              <a href={item.href} className="text-base text-gray-500 hover:text-gray-900">
+                {item.name}
+              </a>
+            </div>
+          ))}
+        </nav>
+        <p className="mt-8 text-center text-base text-gray-400">
+          Copyright © {year} {organizationName}. Built with{' '}
+          <a className="underline" href="https://eventcatalog.dev" target="_blank" rel="noreferrer">
+            EventCatalog.
+          </a>
+        </p>
+      </div>
+    </footer>
+  );
+}

package/components/Grids/EventGrid.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import Link from 'next/link';
+
+import { CubeIcon } from '@heroicons/react/outline';
+
+import { Event } from '@eventcatalog/types';
+import getBackgroundColor from '@/utils/random-bg';
+
+import Mermaid from '@/components/Mermaid';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+
+interface EventGridProps {
+  events: Event[];
+  showMermaidDiagrams?: boolean;
+}
+
+function EventGrid({ events = [], showMermaidDiagrams = false }: EventGridProps) {
+  return (
+    <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
+      {events.map((event) => {
+        const { draft: isDraft } = event;
+
+        return (
+          <li key={event.name} className="flex">
+            <Link href={`/events/${event.name}`}>
+              <a className="flex shadow-sm rounded-md w-full">
+                <div
+                  style={{
+                    background: getBackgroundColor(event.name),
+                  }}
+                  className={classNames(
+                    'bg-red-500',
+                    'flex-shrink-0 flex items-center justify-center w-4 text-white text-sm font-medium rounded-l-md'
+                  )}
+                />
+                <div className="w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ">
+                  <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
+                    <div className="text-gray-900 font-bold hover:text-gray-600">
+                      {event.name}
+                      <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
+                        v{event.version}
+                      </span>
+                      {isDraft && (
+                        <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-gray-100">
+                          Draft
+                        </span>
+                      )}
+                      <div className="text-gray-500 text-xs font-normal mt-2 ">{event.summary}</div>
+                    </div>
+                    {showMermaidDiagrams && (
+                      <div className="h-full items-center flex">
+                        <Mermaid
+                          source="event"
+                          data={event}
+                          rootNodeColor={getBackgroundColor(event.name)}
+                        />
+                      </div>
+                    )}
+                    <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">
+                      <div className=" font-medium text-gray-500">
+                        <CubeIcon
+                          className="h-4 w-4 text-green-400 inline-block mr-2"
+                          aria-hidden="true"
+                        />
+                        Producers ({event.producers.length})
+                      </div>
+                      <div className=" font-medium text-gray-500">
+                        <CubeIcon
+                          className="h-4 w-4 text-indigo-400 inline-block mr-2"
+                          aria-hidden="true"
+                        />
+                        Subscribers ({event.consumers.length})
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default EventGrid;

package/components/Grids/ServiceGrid.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Link from 'next/link';
+
+import { CubeIcon } from '@heroicons/react/outline';
+
+import { Service } from '@eventcatalog/types';
+
+import getBackgroundColor from '@/utils/random-bg';
+
+interface ServiceGridProps {
+  services: Service[];
+}
+
+function ServiceGrid({ services = [] }: ServiceGridProps) {
+  return (
+    <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
+      {services.map((service) => {
+        const { draft: isDraft } = service;
+
+        return (
+          <li key={service.name} className="flex">
+            <Link href={`/services/${service.name}`}>
+              <a className="flex shadow-sm w-full">
+                <div
+                  style={{
+                    background: getBackgroundColor(service.name),
+                  }}
+                  className="w-4 rounded-l-md"
+                />
+                <div className="w-full border-t border-r border-b border-gray-200 bg-white rounded-r-md ">
+                  <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
+                    <div>
+                      <span className="text-gray-900 font-bold">{service.name}</span>
+                      {isDraft && (
+                        <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-gray-100">
+                          Draft
+                        </span>
+                      )}
+                      <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">
+                        {service.summary}
+                      </div>
+                    </div>
+                    <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">
+                      <div className=" font-medium text-gray-500">
+                        <CubeIcon
+                          className="h-4 w-4 text-green-400 inline-block mr-2"
+                          aria-hidden="true"
+                        />
+                        Subscribe Events ({service.subscribes.length})
+                      </div>
+                      <div className=" font-medium text-gray-500">
+                        <CubeIcon
+                          className="h-4 w-4 text-indigo-400 inline-block mr-2"
+                          aria-hidden="true"
+                        />
+                        Publish Events ({service.publishes.length})
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            </Link>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default ServiceGrid;

package/components/Header.tsx

@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useConfig } from '@/hooks/EventCatalog';
+
+const navigation = [
+  { name: 'Events', href: '/events' },
+  { name: 'Services', href: '/services' },
+  { name: '3D Node Graph', href: '/overview' },
+];
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function Example() {
+  const { title } = useConfig();
+  const router = useRouter();
+
+  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">
+              <Link href="/events">
+                <a className="flex items-center">
+                  <img alt="logo" className="text-white w-8 inline-block mr-3" src="/logo.svg" />
+                  <span className="text-xl">{title}</span>
+                </a>
+              </Link>
+            </div>
+          </div>
+          <div className="hidden sm:block sm:ml-6">
+            <div className="flex space-x-4">
+              {navigation.map((item) => {
+                const current = router.pathname.includes(item.href);
+                return (
+                  <Link key={item.name} 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.name}
+                    </a>
+                  </Link>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/Mdx/Admonition.tsx

@@ -0,0 +1,33 @@
+import { InformationCircleIcon, ExclamationIcon } from '@heroicons/react/solid';
+
+const getConfigurationByType = (type: string) => {
+  switch (type) {
+    case 'alert':
+      return { color: 'red', icon: ExclamationIcon };
+    case 'warning':
+      return { color: 'yellow', icon: ExclamationIcon };
+    default:
+      return { color: 'indigo', icon: InformationCircleIcon };
+  }
+};
+
+interface AdmonitionProps {
+  children: JSX.Element;
+  type?: string;
+  className?: string;
+}
+
+export default function Admonition({ children, type, className }: AdmonitionProps) {
+  const { color, icon: Icon } = getConfigurationByType(type);
+
+  return (
+    <div className={`bg-${color}-50 border-l-4 border-${color}-400 my-4 ${className}`}>
+      <div className="flex">
+        <div className="ml-3 py-4">
+          <Icon className={`inline-block mr-2 h-5 w-5 text-${color}-400`} aria-hidden="true" />
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}