@eventcatalog/core 1.2.7 → 2.0.0

package/src/components/Tables/columns/MessageTableColumns.tsx

@@ -0,0 +1,159 @@
+import { EnvelopeIcon } from '@heroicons/react/20/solid';
+import { ServerIcon } from '@heroicons/react/24/solid';
+import { createColumnHelper } from '@tanstack/react-table';
+import type { CollectionMessageTypes } from '@types';
+import type { CollectionEntry } from 'astro:content';
+import { useMemo } from 'react';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+
+const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
+
+export const columns = () => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>Message</span>,
+    cell: (info) => {
+      const messageRaw = info.row.original;
+      const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
+      const color = type === 'event' ? 'orange' : 'blue';
+      return (
+        <div className=" group ">
+          <a
+            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
+          >
+            <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
+              <span className="flex items-center">
+                <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
+                  <EnvelopeIcon className="h-4 w-4 text-white" />
+                </span>
+                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500 font-light">
+                  {messageRaw.data.name} (v{messageRaw.data.version})
+                </span>
+              </span>
+            </div>
+          </a>
+        </div>
+      );
+    },
+    meta: {
+      filterVariant: 'name',
+    },
+    filterFn: filterByName,
+  }),
+  // columnHelper.accessor('data.version', {
+  //   header: () => <span>Version</span>,
+  //   cell: (info) => {
+  //     const message = info.row.original;
+  //     return <div className="text-left">{`v${info.getValue()} ${message.data.latestVersion === message.data.version ? '(latest)': ''}`}</div>
+  //   },
+  //   footer: (info) => info.column.id,
+  // }),
+  columnHelper.accessor('data.summary', {
+    id: 'summary',
+    header: () => 'Summary',
+    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    footer: (info) => info.column.id,
+    meta: {
+      showFilter: false,
+    },
+  }),
+
+  columnHelper.accessor('data.producers', {
+    header: () => <span>Producers</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'producers',
+    },
+    cell: (info) => {
+      const producers = info.getValue();
+      if (producers?.length === 0 || !producers)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">No producers documented</div>;
+      return (
+        <ul className="">
+          {producers.map((producer: any) => {
+            return (
+              <li className="py-2 group flex items-center space-x-2" key={producer.data.id}>
+                <a
+                  href={`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`}
+                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                >
+                  <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
+                    <span className="flex items-center">
+                      <span className="bg-pink-500 h-full rounded-tl rounded-bl p-1">
+                        <ServerIcon className="h-4 w-4 text-white" />
+                      </span>
+                      <span className="font-light leading-none px-2 group-hover:underline">
+                        {producer.data.name} (v{producer.data.version})
+                      </span>
+                    </span>{' '}
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('producers'),
+  }),
+  columnHelper.accessor('data.consumers', {
+    header: () => <span>Consumers</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'consumers',
+    },
+    cell: (info) => {
+      const consumers = info.getValue();
+      if (consumers?.length === 0 || !consumers)
+        return <div className="font-light text-sm text-gray-400/80 text-left italic">No consumers documented</div>;
+
+      return (
+        <ul>
+          {consumers.map((consumer: any) => {
+            return (
+              <li key={consumer.data.id} className="py-1 group font-light ">
+                <a
+                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                >
+                  <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
+                    <span className="flex items-center">
+                      <span className="bg-pink-500 h-full rounded-tl rounded-bl p-1">
+                        <ServerIcon className="h-4 w-4 text-white" />
+                      </span>
+                      <span className="leading-none px-2 group-hover:underline ">
+                        {consumer.data.name} (v{consumer.data.version})
+                      </span>
+                    </span>
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('consumers'),
+  }),
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const domain = info.row.original;
+      return (
+        <a
+          className="hover:text-purple-500 hover:underline px-4 font-light"
+          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+        >
+          Visualiser &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];

package/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -0,0 +1,162 @@
+import { EnvelopeIcon } from '@heroicons/react/24/solid';
+import { ServerIcon } from '@heroicons/react/24/solid';
+import { createColumnHelper } from '@tanstack/react-table';
+import type { CollectionEntry } from 'astro:content';
+import { useMemo } from 'react';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+
+const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
+
+export const columns = () => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>Service</span>,
+    cell: (info) => {
+      const messageRaw = info.row.original;
+      const type = useMemo(() => messageRaw.collection.slice(0, -1), [messageRaw.collection]);
+      const color = 'pink';
+      return (
+        <div className="group font-light">
+          <a
+            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
+          >
+            <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
+              <span className="flex items-center">
+                <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
+                  <ServerIcon className="h-4 w-4 text-white" />
+                </span>
+                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500">
+                  {messageRaw.data.name} (v{messageRaw.data.version})
+                </span>
+              </span>
+            </div>
+          </a>
+        </div>
+      );
+    },
+    meta: {
+      filterVariant: 'name',
+    },
+    filterFn: filterByName,
+  }),
+  // columnHelper.accessor('data.version', {
+  //   header: () => <span>Version</span>,
+  //   cell: (info) => {
+  //     const service = info.row.original;
+  //     return <div className="text-left">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
+  //   },
+  //   footer: (info) => info.column.id,
+  // }),
+  columnHelper.accessor('data.summary', {
+    id: 'summary',
+    header: () => 'Summary',
+    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    footer: (info) => info.column.id,
+    meta: {
+      showFilter: false,
+    },
+  }),
+  columnHelper.accessor('data.receives', {
+    header: () => <span>Receives</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'receives',
+    },
+    cell: (info) => {
+      const receives = info.getValue();
+      if (receives?.length === 0 || !receives)
+        return <div className="text-sm text-gray-400/80 text-left italic">Service receives no messages.</div>;
+
+      return (
+        <ul>
+          {receives.map((consumer: any) => {
+            const type = consumer.collection.slice(0, -1);
+            const color = type === 'event' ? 'orange' : 'blue';
+            return (
+              <li key={consumer.data.id} className="py-1 group font-light ">
+                <a
+                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                >
+                  <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                    <span className="flex items-center">
+                      <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
+                        <EnvelopeIcon className="h-4 w-4 text-white" />
+                      </span>
+                      <span className="leading-none px-2 group-hover:underline ">
+                        {consumer.data.name} (v{consumer.data.version})
+                      </span>
+                    </span>
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    // footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('receives'),
+  }),
+  columnHelper.accessor('data.sends', {
+    header: () => <span>Sends</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'sends',
+    },
+    cell: (info) => {
+      const sends = info.getValue();
+      if (sends?.length === 0 || !sends)
+        return <div className="text-sm text-gray-400/80 text-left italic">Service sends no messages.</div>;
+
+      return (
+        <ul>
+          {sends.map((consumer: any) => {
+            const type = consumer.collection.slice(0, -1);
+            const color = type === 'event' ? 'orange' : 'blue';
+            return (
+              <li key={consumer.data.id} className="py-1 group font-light">
+                <a
+                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                >
+                  <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
+                    <span className="flex items-center">
+                      <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
+                        <EnvelopeIcon className="h-4 w-4 text-white" />
+                      </span>
+                      <span className="leading-none px-2 group-hover:underline ">
+                        {consumer.data.name} (v{consumer.data.version})
+                      </span>
+                    </span>
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    // footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('sends'),
+  }),
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const domain = info.row.original;
+      return (
+        <a
+          className="hover:text-purple-500 hover:underline px-4 font-light"
+          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+        >
+          Visualiser &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];

package/src/components/Tables/columns/index.tsx

@@ -0,0 +1,17 @@
+import { columns as MessageTableColumns } from './MessageTableColumns';
+import { columns as ServiceTableColumns } from './ServiceTableColumns';
+import { columns as DomainTableColumns } from './DomainTableColumns';
+
+export const getColumnsByCollection = (collection: string): any => {
+  switch (collection) {
+    case 'events':
+    case 'commands':
+      return MessageTableColumns();
+    case 'services':
+      return ServiceTableColumns();
+    case 'domains':
+      return DomainTableColumns();
+    default:
+      return [];
+  }
+};

package/src/components/Tables/filters/custom-filters.ts

@@ -0,0 +1,14 @@
+// Filter by a given property name, used to filter collections
+export const filterCollectionByName = (property: string) => (row: any, key: string, searchValue: string) => {
+  const collection = row?.original?.data[property] || [];
+  return !!collection.find((item: any) => {
+    const name = `${item?.data?.name} (v${item.data.version})` || '';
+    return name.toLowerCase().includes(searchValue.toLowerCase());
+  });
+};
+
+// Filter by name e.g My Event (v.0.0.1)
+export const filterByName = (row: any, key: string, searchValue: string) => {
+  const label = `${row?.original?.data.name} (v${row?.original?.data.version})` || '';
+  return label.toLowerCase().includes(searchValue.toLowerCase());
+};

package/src/content/config.ts

@@ -0,0 +1,119 @@
+import catalog from '@eventcatalog';
+import { z, defineCollection, reference } from 'astro:content';
+
+const badge = z.object({
+  content: z.string(),
+  backgroundColor: z.string(),
+  textColor: z.string(),
+});
+
+// Create a union type for owners
+const ownerReference = z.union([reference('users'), reference('teams')]);
+
+const baseSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  summary: z.string().optional(),
+  version: z.string(),
+  badges: z.array(badge).optional(),
+  owners: z.array(ownerReference).optional(),
+  schemaPath: z.string().optional(),
+  hidden: z.boolean().optional(),
+  // Used by eventcatalog
+  versions: z.array(z.string()).optional(),
+  latestVersion: z.string().optional(),
+  catalog: z
+    .object({
+      path: z.string(),
+      filePath: z.string(),
+      publicPath: z.string(),
+      type: z.string(),
+    })
+    .optional(),
+});
+
+const events = defineCollection({
+  type: 'content',
+  schema: z
+    .object({
+      producers: z.array(reference('services')).optional(),
+      consumers: z.array(reference('services')).optional(),
+    })
+    .merge(baseSchema),
+});
+
+const commands = defineCollection({
+  type: 'content',
+  schema: z
+    .object({
+      producers: z.array(reference('services')).optional(),
+      consumers: z.array(reference('services')).optional(),
+    })
+    .merge(baseSchema),
+});
+
+const pointer = z.object({
+  id: z.string(),
+  version: z.string(),
+});
+
+const services = defineCollection({
+  type: 'content',
+  schema: z
+    .object({
+      sends: z.array(pointer).optional(),
+      receives: z.array(pointer).optional(),
+    })
+    .merge(baseSchema),
+});
+
+const domains = defineCollection({
+  type: 'content',
+  schema: z
+    .object({
+      services: z.array(pointer).optional(),
+    })
+    .merge(baseSchema),
+});
+
+const users = defineCollection({
+  type: 'content',
+  schema: z.object({
+    id: z.string(),
+    name: z.string(),
+    avatarUrl: z.string(),
+    role: z.string().optional(),
+    hidden: z.boolean().optional(),
+    email: z.string().optional(),
+    slackDirectMessageUrl: z.string().optional(),
+    ownedServices: z.array(reference('services')).optional(),
+    ownedEvents: z.array(reference('events')).optional(),
+    ownedCommands: z.array(reference('commands')).optional(),
+    associatedTeams: z.array(reference('teams')).optional(),
+  }),
+});
+
+const teams = defineCollection({
+  type: 'content',
+  schema: z.object({
+    id: z.string(),
+    name: z.string(),
+    summary: z.string().optional(),
+    email: z.string().optional(),
+    hidden: z.boolean().optional(),
+    slackDirectMessageUrl: z.string().optional(),
+    members: z.array(reference('users')).optional(),
+    ownedCommands: z.array(reference('commands')).optional(),
+    ownedServices: z.array(reference('services')).optional(),
+    ownedEvents: z.array(reference('events')).optional(),
+  }),
+});
+
+export const collections = {
+  events,
+  commands,
+  services,
+  users,
+  teams,
+  domains,
+};

package/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

package/src/layouts/CustomDocsPageLayout.astro

@@ -0,0 +1,100 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+
+import Header from '@components/Header.astro';
+import SideBar from '@components/DocsNavigation.astro';
+import catalog from '@eventcatalog';
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="generator" content={Astro.generator} />
+    <title>EventCatalog</title>
+  </head>
+  <body>
+    <div class="px-10 max-w-[96em] mx-auto">
+      <Header />
+
+      <div class="md:pt-20">
+        <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2">
+          <div class="w-full">
+            <SideBar />
+          </div>
+        </nav>
+
+        <div class="pl-0 sm:pl-56 xl:pl-80 w-full pt-8 pb-40">
+          <div class="prose prose-sm">
+            <div class="bg-white">
+              <div class="mx-auto max-w-7xl ">
+                <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
+                  <h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-0">EventCatalog</h1>
+                  <div class=" grid max-w-xl grid-cols-1 md:gap-8 text-base leading-7 text-gray-700 lg:max-w-none lg:grid-cols-1">
+                    <div>
+                      <p>
+                        Welcome to <a href="https://www.eventcatalog.dev/">EventCatalog</a>. 
+                      </p>
+                      <p>
+                        This open-source project is designed to help you and your teams
+                        bring discoverability and clarity to your event-driven architectures (EDA). 
+                      </p>
+                      <p>
+                        To get started you can read the following guides: 
+                        <ul>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/getting-started/introduction">Getting started with EventCatalog</a></li>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/domains/adding-domains">Creating domains</a></li>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/services/adding-services">Creating services</a></li>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/messages/commands/introduction">Creating commands</a></li>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/guides/messages/events/introduction">Creating events</a></li>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/owners">Assigning owners to resources</a></li>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/components/using-components">Using components in your pages (Schemas, OpenAPI, etc)</a></li>
+                          <li><a class="text-purple-500" href="https://eventcatalog.dev/docs/development/deployment">Deploying and hosting your EventCatalog</a></li>
+                        </ul>
+                      </p>
+                      <h3>
+                        Join the community
+                      </h3>
+                      <p>Got questions about EventCatalog? Feature requests or need support? <a class="text-purple-500" href="https://discord.gg/3rjaZMmrAm">Join our community on Discord.</a></p>
+                      <h3>
+                        Enterprise support
+                      </h3>
+                      <p>
+                        Using EventCatalog and needs enterprise support? Work with us, find out what we offer on our <a class="text-purple-500" href="https://eventcatalog.dev/enterprise">enterprise page</a>.
+                      </p>
+                    </div>
+                  </div>
+                
+                  <footer class="py-4 space-y-8 border-t border-gray-300">
+                    <div class="flex justify-between items-center py-8 text-gray-500 text-sm font-light">
+                      <div class="flex space-x-5">
+                        <a href="https://github.com/boyney123/eventcatalog" target="_blank"><svg class="w-5 h-5 bg-gray-400  hover:bg-purple-500 dark:hover:bg-gray-400" style="mask-image: url(&quot;/icons/github.svg&quot;); mask-repeat: no-repeat; mask-position: center center;"></svg></a>
+                        <a href="https://x.com/event_catalog" target="_blank"><span class="sr-only">x</span><svg class="w-5 h-5 bg-gray-400  hover:bg-purple-500 dark:hover:bg-gray-400" style="mask-image: url(&quot;/icons/x-twitter.svg&quot;); mask-repeat: no-repeat; mask-position: center center;"></svg></a>
+                      </div>
+                      <a target="_blank" class="hover:text-purple-500 hover:underline text-gray-400 font-light not-prose" href="https://eventcatalog.dev">Powered by EventCatalog</a>
+                    </div>
+                  </footer>
+                </div>
+              </div>
+            </div>
+
+            <!-- <slot /> -->
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
+<style>
+  .prose {
+    max-width: none;
+  }
+</style>