npm - @eventcatalog/core - Versions diffs - 0.0.0 - Mend

@eventcatalog/core 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/CHANGELOG.md +1 -0
package/README.md +11 -0
package/bin/eventcatalog.js +125 -0
package/components/BreadCrumbs.tsx +50 -0
package/components/ContentView.tsx +127 -0
package/components/Footer.tsx +38 -0
package/components/Grids/EventGrid.tsx +89 -0
package/components/Grids/ServiceGrid.tsx +70 -0
package/components/Header.tsx +59 -0
package/components/Mdx/Admonition.tsx +33 -0
package/components/Mdx/Examples.tsx +77 -0
package/components/Mermaid/index.tsx +47 -0
package/components/NotFound/index.tsx +44 -0
package/components/Sidebars/EventSidebar.tsx +202 -0
package/components/Sidebars/ServiceSidebar.tsx +198 -0
package/components/SyntaxHighlighter.tsx +34 -0
package/hooks/EventCatalog.tsx +35 -0
package/lib/__tests__/assets/events/AddedItemToCart/index.md +19 -0
package/lib/__tests__/assets/events/EmailSent/index.md +15 -0
package/lib/__tests__/assets/events/EventWithSchemaAndExamples/examples/Basic.cs +31 -0
package/lib/__tests__/assets/events/EventWithSchemaAndExamples/examples/Basic.js +1 -0
package/lib/__tests__/assets/events/EventWithSchemaAndExamples/index.md +8 -0
package/lib/__tests__/assets/events/EventWithSchemaAndExamples/schema.json +4 -0
package/lib/__tests__/assets/events/EventWithVersions/index.md +10 -0
package/lib/__tests__/assets/events/EventWithVersions/versioned/0.0.1/index.md +10 -0
package/lib/__tests__/assets/services/Email Platform/index.md +17 -0
package/lib/__tests__/events.spec.ts +294 -0
package/lib/__tests__/file-reader.spec.ts +57 -0
package/lib/__tests__/graphs.spec.ts +62 -0
package/lib/__tests__/services.spec.ts +144 -0
package/lib/events.ts +221 -0
package/lib/file-reader.ts +52 -0
package/lib/graphs.ts +33 -0
package/lib/services.ts +72 -0
package/next-env.d.ts +5 -0
package/next.config.js +3 -0
package/package.json +52 -0
package/pages/_app.tsx +49 -0
package/pages/api/event/[name]/download.js +25 -0
package/pages/events/[name]/logs.tsx +170 -0
package/pages/events/[name]/v/[version].tsx +19 -0
package/pages/events/[name].tsx +139 -0
package/pages/events.tsx +227 -0
package/pages/index.tsx +47 -0
package/pages/overview.tsx +80 -0
package/pages/services/[name].tsx +102 -0
package/pages/services.tsx +123 -0
package/pages/users/[id].tsx +83 -0
package/postcss.config.js +6 -0
package/public/favicon.ico +0 -0
package/public/logo-random.svg +114 -0
package/public/logo.svg +44 -0
package/public/opengraph.png +0 -0
package/scripts/__tests__/assets/eventcatalog.config.js +33 -0
package/scripts/__tests__/generate.spec.ts +39 -0
package/scripts/generate.js +28 -0
package/styles/Home.module.css +116 -0
package/styles/globals.css +48 -0
package/tailwind.config.js +16 -0
package/tsconfig.json +38 -0
package/types/index.ts +7 -0
package/utils/random-bg.ts +13 -0

package/pages/events/[name]/v/[version].tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import { getEventByName } from '@/lib/events';
+import EventPage, { EventsPageProps } from '../../[name]';
+export default function Events(props: EventsPageProps) {
+  return <EventPage {...props} />;
+}
+export async function getServerSideProps({ params }) {
+  const { name: eventName, version } = params;
+  const { event, markdown } = await getEventByName(eventName, version);
+  return {
+    props: {
+      event,
+      markdown,
+      loadedVersion: version,
+    },
+  };
+}

package/pages/events/[name].tsx ADDED Viewed

@@ -0,0 +1,139 @@
+import Head from 'next/head';
+import { MDXRemote } from 'next-mdx-remote';
+import { Event } from '@eventcatalog/types';
+import { editUrl } from '../../eventcatalog.config';
+import Admonition from '@/components/Mdx/Admonition';
+import Examples from '@/components/Mdx/Examples';
+import getBackgroundColor from '@/utils/random-bg';
+import ContentView from '@/components/ContentView';
+import Mermaid from '@/components/Mermaid';
+import EventSideBar from '@/components/Sidebars/EventSidebar';
+import NotFound from '@/components/NotFound';
+import BreadCrumbs from '@/components/BreadCrumbs';
+import SyntaxHighlighter from '@/components/SyntaxHighlighter';
+import { getAllEvents, getEventByName } from '@/lib/events';
+import { useUrl } from '@/hooks/EventCatalog';
+import { MarkdownFile } from '@/types/index';
+export interface EventsPageProps {
+  event: Event;
+  markdown: MarkdownFile;
+  notFound?: boolean;
+  loadedVersion?: string;
+}
+export const getComponents = ({ event, schema, examples }: any) => ({
+  code: ({ className, ...props }) => {
+    const match = /language-(\w+)/.exec(className || '');
+    return match ? (
+      <SyntaxHighlighter language={match[1]} {...props} />
+    ) : (
+      <code className={className} {...props} />
+    );
+  },
+  Schema: ({ title = 'Event Schema' }: { title: string }) => {
+    if (!schema) return null;
+    return (
+      <section className="mt-8 xl:mt-10">
+        <h2 id="activity-title" className="text-lg font-medium text-gray-900 underline">
+          {title}
+        </h2>
+        <SyntaxHighlighter
+          language={schema.language}
+          showLineNumbers={false}
+          name={`${event.name} Schema (${schema.language})`}
+        >
+          {schema.snippet}
+        </SyntaxHighlighter>
+      </section>
+    );
+  },
+  Admonition,
+  EventExamples: (props) => <Examples {...props} examples={examples} showLineNumbers />,
+  Mermaid: ({ title }: { title: string }) => (
+    <div className="mx-auto w-full py-10">
+      {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
+      <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} />
+    </div>
+  ),
+});
+export default function Events(props: EventsPageProps) {
+  const { event, markdown, loadedVersion, notFound } = props;
+  const { getEditUrl } = useUrl();
+  if (notFound) return <NotFound type="event" name={event.name} editUrl={editUrl} />;
+  const { name, summary, draft, schema, examples, version } = event;
+  const { lastModifiedDate } = markdown;
+  const pages = [
+    { name: 'Events', href: '/events', current: false },
+    { name, href: `/services/${name}`, current: true },
+  ];
+  const mdxComponents = getComponents({ event, schema, examples });
+  return (
+    <>
+      <Head>
+        <title>
+          {name} v{version}
+        </title>
+      </Head>
+      <ContentView
+        // {...props}
+        title={name}
+        editUrl={getEditUrl(`/events/${name}/index.md`)}
+        subtitle={summary}
+        draft={draft}
+        lastModifiedDate={lastModifiedDate}
+        tags={[{ label: `v${version}` }]}
+        breadCrumbs={<BreadCrumbs pages={pages} />}
+        isOldVersion={loadedVersion !== 'latest'}
+        latestVersionUrl={`/events/${name}`}
+        version={loadedVersion}
+        sidebar={<EventSideBar event={event} loadedVersion={loadedVersion} />}
+      >
+        <MDXRemote {...markdown.source} components={mdxComponents} />
+      </ContentView>
+    </>
+  );
+}
+export async function getStaticProps({ params }) {
+  try {
+    const { event, markdown } = await getEventByName(params.name);
+    return {
+      props: {
+        event,
+        markdown,
+        loadedVersion: 'latest',
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        notFound: true,
+        event: { name: params.name },
+      },
+    };
+  }
+}
+export async function getStaticPaths() {
+  const events = getAllEvents();
+  const paths = events.map((event) => ({ params: { name: event.name } }));
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+}

package/pages/events.tsx ADDED Viewed

@@ -0,0 +1,227 @@
+import { Fragment, useState } from 'react';
+import Head from 'next/head';
+import type { Event, Service } from '@eventcatalog/types';
+import Link from 'next/link';
+import { Menu, Transition } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/solid';
+import EventGrid from '@/components/Grids/EventGrid';
+import { getAllEvents, getUniqueServicesNamesFromEvents } from '@/lib/events';
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+const sortOptions = [
+  { name: 'Name', href: '#', current: true },
+  { name: 'Version', href: '#', current: false },
+  { name: 'Domains', href: '#', current: false },
+];
+export interface PageProps {
+  events: [Event];
+  services: [Service];
+}
+export default function Page({ events, services }: PageProps) {
+  const filters = [
+    {
+      id: 'services',
+      name: 'Services',
+      options: services.map((service) => ({
+        value: service,
+        label: service,
+        checked: false,
+      })),
+    },
+  ];
+  const [selectedFilters, setSelectedFilters] = useState({ services: [] });
+  const [showMermaidDiagrams, setShowMermaidDiagrams] = useState(false);
+  const handleFilterSelection = (option, type, event) => {
+    if (event.target.checked) {
+      const newFilters = selectedFilters[type].concat([option.value]);
+      setSelectedFilters({ ...selectedFilters, [type]: newFilters });
+    } else {
+      const newFilters = selectedFilters[type].filter((value) => value !== option.value);
+      setSelectedFilters({ ...selectedFilters, [type]: newFilters });
+    }
+  };
+  let eventsToRender = events;
+  if (selectedFilters.services.length > 0) {
+    // @ts-ignore
+    eventsToRender = eventsToRender.filter((event) => {
+      const { services: serviceFilters } = selectedFilters;
+      const hasConsumersFromFilters = event.consumers.some(
+        (consumerId) => serviceFilters.indexOf(consumerId) > -1
+      );
+      const hasProducersFromFilters = event.producers.some(
+        (producerId) => serviceFilters.indexOf(producerId) > -1
+      );
+      return hasConsumersFromFilters || hasProducersFromFilters;
+    });
+  }
+  return (
+    <>
+      <Head>
+        <title>EventCatalog - All Events</title>
+      </Head>
+      <main className="max-w-7xl mx-auto min-h-screen px-4 md:px-0">
+        <div className="relative z-10 flex items-baseline justify-between pt-8 pb-6 border-b border-gray-200">
+          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">
+            Events ({events.length})
+          </h1>
+          <div className="flex items-center">
+            <Menu as="div" className="hidden relative text-left">
+              <div>
+                <Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
+                  Sort
+                  <ChevronDownIcon
+                    className="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500"
+                    aria-hidden="true"
+                  />
+                </Menu.Button>
+              </div>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <div className="py-1">
+                    {sortOptions.map((option) => (
+                      <Menu.Item key={option.name}>
+                        {({ active }) => (
+                          <a
+                            href={option.href}
+                            className={classNames(
+                              option.current ? 'font-medium text-gray-900' : 'text-gray-500',
+                              active ? 'bg-gray-100' : '',
+                              'block px-4 py-2 text-sm'
+                            )}
+                          >
+                            {option.name}
+                          </a>
+                        )}
+                      </Menu.Item>
+                    ))}
+                  </div>
+                </Menu.Items>
+              </Transition>
+            </Menu>
+          </div>
+        </div>
+        <section className="pt-6 pb-24">
+          <div className="grid grid-cols-4 gap-x-8 gap-y-10">
+            {/* Filters */}
+            <form className="hidden lg:block">
+              <span className="text-sm font-bold text-gray-900 mb-4 block">Events</span>
+              <ul className=" text-sm text-gray-600 space-y-4 pb-6 border-b border-gray-200 items-stretch">
+                {events.map((event) => (
+                  <li key={event.name}>
+                    <Link href={`/events/${event.name}`}>
+                      <a>{event.name}</a>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+              {filters.map((section: any) => (
+                <div key={section.id} className="border-b border-gray-200 py-6">
+                  <h3 className="-my-3 flow-root">
+                    <div className="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500">
+                      <span className="font-medium text-gray-900">{section.name}</span>
+                    </div>
+                  </h3>
+                  <div className="pt-6">
+                    <div className="space-y-4">
+                      {section.options.map((option, optionIdx) => (
+                        <div key={option.value} className="flex items-center">
+                          <input
+                            id={`filter-${section.id}-${optionIdx}`}
+                            name={`${section.id}[]`}
+                            defaultValue={option.value}
+                            type="checkbox"
+                            onChange={(event) => handleFilterSelection(option, section.id, event)}
+                            defaultChecked={option.checked}
+                            className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
+                          />
+                          <label
+                            htmlFor={`filter-${section.id}-${optionIdx}`}
+                            className="ml-3 text-sm text-gray-600"
+                          >
+                            {option.label}
+                          </label>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              ))}
+              <div className="border-b border-gray-200 py-6">
+                <h3 className="-my-3 flow-root">
+                  <div className="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500">
+                    <span className="font-medium text-gray-900">Features</span>
+                  </div>
+                </h3>
+                <div className="pt-6">
+                  <div className="space-y-4">
+                    <div className="flex items-center">
+                      <input
+                        id="show-mermaid"
+                        type="checkbox"
+                        onChange={(e) => setShowMermaidDiagrams(e.target.checked)}
+                        defaultChecked={showMermaidDiagrams}
+                        className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
+                      />
+                      <label htmlFor="show-mermaid" className="ml-3 text-sm text-gray-600">
+                        Show Mermaid Diagrams
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <div className="col-span-4 lg:col-span-3">
+              <div>
+                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
+                  Events ({eventsToRender.length})
+                </h2>
+                <EventGrid events={eventsToRender} showMermaidDiagrams={showMermaidDiagrams} />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+export const getServerSideProps = () => {
+  const events = getAllEvents();
+  const services = getUniqueServicesNamesFromEvents(events);
+  return {
+    props: {
+      events,
+      // @ts-ignore
+      services: [...new Set(services)],
+    },
+  };
+};

package/pages/index.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+/* This example requires Tailwind CSS v2.0+ */
+import Link from 'next/link';
+import { useConfig } from '@/hooks/EventCatalog';
+export default function Example() {
+  const { title, tagline, logo } = useConfig();
+  const logoToLoad = logo || { alt: 'EventCatalog Logo', src: '/logo.svg' };
+  return (
+    <main className="sm:bg-top md:min-h-screen bg-gradient-to-t from-blue-700  to-gray-800">
+      <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">
+        <img
+          src={logoToLoad.src}
+          alt={logoToLoad.alt}
+          style={{ height: '85px' }}
+          className="mx-auto"
+        />
+        <h1 className="mt-2 text-4xl font-extrabold text-white tracking-tight sm:text-5xl">
+          {title}
+        </h1>
+        {tagline && <p className="mt-2 text-lg font-medium text-white">{tagline}</p>}
+        <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
+          <div className="rounded-md shadow">
+            <Link href="/events">
+              <a className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
+                Explore Events
+              </a>
+            </Link>
+          </div>
+          <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+            <a
+              href="https://eventcatalog.dev"
+              target="_blank"
+              className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
+              rel="noreferrer"
+            >
+              Getting Started
+            </a>
+          </div>
+        </div>
+        <div className="mt-6 space-x-5" />
+      </div>
+    </main>
+  );
+}

package/pages/overview.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import Head from 'next/head';
+import dynamic from 'next/dynamic';
+import { getAllEvents, getUniqueServicesNamesFromEvents } from '@/lib/events';
+const ForceGraph3D = dynamic(
+  () => import('react-force-graph-3d').then((module) => module.default),
+  { ssr: false }
+);
+function NodeElement({ node: { id } }: { node: { id: string } }) {
+  return <div className={`text-sm text-center p-1 rounded-md `}>{id}</div>;
+}
+const graph = ({ events, services }) => {
+  const eventNodes = events.map(({ name: event }) => ({ id: event, group: 1, type: 'event' }));
+  const serviceNodes = services.map((service) => ({ id: service, group: 2, type: 'service' }));
+  // Create all links
+  const links = events.reduce((nodes, event) => {
+    const { consumers = [], producers = [], name } = event;
+    const consumerNodes = consumers.map((consumer) => ({ source: name, target: consumer }));
+    const producerNodes = producers.map((producer) => ({ source: producer, target: name }));
+    return nodes.concat(consumerNodes).concat(producerNodes);
+  }, []);
+  const data = { nodes: eventNodes.concat(serviceNodes), links };
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  // @ts-ignore
+  const extraRenderers = [new window.THREE.CSS2DRenderer()];
+  return (
+    <div className="min-h-screen ">
+      <Head>
+        <title>EventCatalog - 3D Node Graph</title>
+      </Head>
+      <ForceGraph3D
+        extraRenderers={extraRenderers}
+        graphData={data}
+        nodeAutoColorBy="group"
+        nodeRelSize={9}
+        nodeThreeObject={(node) => {
+          const nodeEl = document.createElement('div');
+          nodeEl.innerHTML = ReactDOMServer.renderToString(<NodeElement node={node} />);
+          node.height = '100px';
+          nodeEl.style.color = node.color;
+          // @ts-ignore
+          return new THREE.CSS2DObject(nodeEl);
+        }}
+        nodeThreeObjectExtend
+        enableNodeDrag={false}
+        nodeOpacity={0.2}
+        linkDirectionalParticles={2}
+        linkDirectionalParticleWidth={2}
+        linkDirectionalParticleColor={() => 'rgba(236, 72, 153, 1)'}
+      />
+    </div>
+  );
+};
+export default graph;
+export const getServerSideProps = () => {
+  const events = getAllEvents();
+  const services = getUniqueServicesNamesFromEvents(events);
+  return {
+    props: {
+      events,
+      // @ts-ignore
+      services: [...new Set(services)],
+    },
+  };
+};

package/pages/services/[name].tsx ADDED Viewed

@@ -0,0 +1,102 @@
+import Head from 'next/head';
+import { MDXRemote } from 'next-mdx-remote';
+import { Service } from '@eventcatalog/types';
+import { editUrl } from '../../eventcatalog.config.js';
+import ContentView from '@/components/ContentView';
+import { getAllServices, getServiceByName } from '@/lib/services';
+import Admonition from '@/components/Mdx/Admonition';
+import Mermaid from '@/components/Mermaid';
+import ServiceSidebar from '@/components/Sidebars/ServiceSidebar';
+import BreadCrumbs from '@/components/BreadCrumbs';
+import NotFound from '@/components/NotFound';
+import getBackgroundColor from '@/utils/random-bg';
+import { useUrl } from '@/hooks/EventCatalog';
+import { MarkdownFile } from '@/types/index';
+interface ServicesPageProps {
+  service: Service;
+  markdown: MarkdownFile;
+  notFound?: boolean;
+}
+function MermaidComponent({ title, service }: { title: string; service: Service }) {
+  return (
+    <div className="mx-auto w-full py-10">
+      {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
+      <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} />
+    </div>
+  );
+}
+const getComponents = (service) => ({
+  Admonition,
+  Mermaid: ({ title }: { title: string }) => <MermaidComponent service={service} title={title} />,
+});
+export default function Services(props: ServicesPageProps) {
+  const { service, markdown, notFound } = props;
+  const { getEditUrl } = useUrl();
+  if (notFound) return <NotFound type="service" name={service.name} editUrl={editUrl} />;
+  const { name, summary, draft } = service;
+  const { lastModifiedDate } = markdown;
+  const mdxComponents = getComponents(service);
+  const pages = [
+    { name: 'Services', href: '/services', current: false },
+    { name, href: `/services/${name}`, current: true },
+  ];
+  return (
+    <>
+      <Head>
+        <title>{name}</title>
+      </Head>
+      <ContentView
+        title={name}
+        editUrl={getEditUrl(`/services/${name}/index.md`)}
+        subtitle={summary}
+        draft={draft}
+        lastModifiedDate={lastModifiedDate}
+        breadCrumbs={<BreadCrumbs pages={pages} homePath="/services" />}
+        sidebar={<ServiceSidebar service={service} />}
+      >
+        {/* @ts-ignore */}
+        <MDXRemote {...markdown.source} components={mdxComponents} />
+      </ContentView>
+    </>
+  );
+}
+export async function getStaticProps({ params }) {
+  try {
+    const { service, markdown } = await getServiceByName(params.name);
+    return {
+      props: {
+        service,
+        markdown,
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        notFound: true,
+        service: { name: params.name },
+      },
+    };
+  }
+}
+export async function getStaticPaths() {
+  const services = getAllServices();
+  const paths = services.map((service) => ({ params: { name: service.name } }));
+  return {
+    paths,
+    fallback: 'blocking',
+  };
+}