@eventcatalog/core 0.1.19 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 0.2.0
+
+### Minor Changes
+
+- [`8352416`](https://github.com/boyney123/eventcatalog/commit/835241609aa03cb8158b7a5a1c662c57f8e22505) [#204](https://github.com/boyney123/eventcatalog/pull/204) Thanks [@boyney123](https://github.com/boyney123)! - feat: adding domain support to eventcatalog
+
 ## 0.1.19
 
 ### Patch Changes

package/components/Grids/DomainGrid.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Link from 'next/link';
+
+import { CubeIcon } from '@heroicons/react/outline';
+
+import { Domain } from '@eventcatalog/types';
+
+import getBackgroundColor from '@/utils/random-bg';
+
+interface DomainGridProps {
+  domains: Domain[];
+}
+
+function DomainGrid({ domains = [] }: DomainGridProps) {
+  return (
+    <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
+      {domains.map((domain) => (
+        <li key={domain.name} className="flex">
+          <Link href={`/domains/${domain.name}`}>
+            <a className="flex shadow-sm w-full">
+              <div
+                style={{
+                  background: getBackgroundColor(domain.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">{domain.name}</span>
+                    <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">{domain.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" />
+                      Services ({domain.services.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" />
+                      Events ({domain.events.length})
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default DomainGrid;

package/components/Grids/EventGrid.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 
-import { CubeIcon } from '@heroicons/react/outline';
+import { CubeIcon, CollectionIcon } from '@heroicons/react/outline';
 
 import { Event } from '@eventcatalog/types';
 import getBackgroundColor from '@/utils/random-bg';
@@ -21,11 +21,12 @@ 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;
+        const { draft: isDraft, domain } = event;
+        const eventURL = domain ? `/domains/${domain}/events/${event.name}` : `/events/${event.name}`;
 
         return (
           <li key={event.name} className="flex">
-            <Link href={`/events/${event.name}`}>
+            <Link href={eventURL}>
               <a className="flex shadow-sm rounded-md w-full">
                 <div
                   style={{
@@ -58,12 +59,18 @@ function EventGrid({ events = [], showMermaidDiagrams = false }: EventGridProps)
                     <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})
+                        Producers ({event.producerNames.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})
+                        Subscribers ({event.consumerNames.length})
                       </div>
+                      {event.domain && (
+                        <div className=" font-medium text-gray-500">
+                          <CollectionIcon className="h-4 w-4 text-yellow-400 inline-block mr-2" aria-hidden="true" />
+                          {event.domain}
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>

package/components/Grids/ServiceGrid.tsx

@@ -17,11 +17,11 @@ function ServiceGrid({ services = [], showMermaidDiagrams = false }: ServiceGrid
   return (
     <ul className="mt-3 grid grid-cols-1 gap-5 md:grid-cols-2">
       {services.map((service) => {
-        const { draft: isDraft } = service;
-
+        const { draft: isDraft, domain } = service;
+        const serviceUrl = domain ? `/domains/${domain}/services/${service.name}` : `/services/${service.name}`;
         return (
           <li key={service.name} className="flex">
-            <Link href={`/services/${service.name}`}>
+            <Link href={serviceUrl}>
               <a className="flex shadow-sm w-full">
                 <div
                   style={{

package/components/Header.tsx

@@ -6,6 +6,7 @@ import { useConfig } from '@/hooks/EventCatalog';
 const navigation = [
   { name: 'Events', href: '/events' },
   { name: 'Services', href: '/services' },
+  { name: 'Domains', href: '/domains' },
   { name: 'Visualiser', href: '/visualiser' },
   { name: '3D Node Graph', href: '/overview' },
 ];
@@ -46,7 +47,7 @@ export default function Example() {
           <div className="hidden sm:block sm:ml-6">
             <div className="flex space-x-4">
               {navigation.map((item) => {
-                const current = router.pathname.includes(item.href);
+                const current = router.pathname === item.href;
                 return (
                   <Link key={item.name} href={item.href}>
                     <a

package/components/Mdx/NodeGraph/GraphElements.tsx

@@ -44,7 +44,7 @@ const getNodeLabel = ({ type, label, includeIcon }: { type: NODE_TYPES; label: a
  * @param isAnimated - whether to animate the graph
  */
 export const getEventElements = (
-  { name: eventName, producers: eventProducers, consumers: eventConsumers }: Event,
+  { name: eventName, producerNames: eventProducers, consumerNames: eventConsumers }: Event,
   rootNodeColor = '#2563eb',
   isAnimated = true,
   includeLabels = false,

package/components/Mdx/NodeGraph/GraphLayout.ts

@@ -48,10 +48,14 @@ export const calcCanvasHeight = (data, type): number => {
   const minHeight = 300;
   const nodeSpacing = nodeDefaultHeight + verticalOffset;
   let nodesHeight = 0;
+
   if (type === 'event') {
-    nodesHeight = Math.max(data.producers.length, data.consumers.length) * nodeSpacing;
-  } else {
+    nodesHeight = Math.max(data.producerNames.length, data.consumerNames.length) * nodeSpacing;
+  }
+
+  if (type === 'service') {
     nodesHeight = Math.max(data.publishes.length, data.subscribes.length) * nodeSpacing;
   }
+
   return Math.max(minHeight, nodesHeight);
 };

package/components/Mdx/NodeGraph/NodeGraph.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import ReactFlow, { Controls, ReactFlowProvider, useStoreState, Background, useZoomPanHelper } from 'react-flow-renderer';
-import { Event, Service } from '@eventcatalog/types';
+import { Domain, Event, Service } from '@eventcatalog/types';
 import { getEventElements, getServiceElements } from './GraphElements';
 import createGraphLayout, { calcCanvasHeight } from './GraphLayout';
 
 interface NodeGraphBuilderProps {
-  data: Event | Service;
-  source: 'event' | 'service';
+  data: Event | Service | Domain;
+  source: 'event' | 'service' | 'domain';
   title?: string;
   subtitle?: string;
   rootNodeColor?: string;
@@ -45,9 +45,19 @@ function NodeGraphBuilder({
   subtitle,
 }: NodeGraphBuilderProps) {
   const getElements = () => {
+    if (source === 'domain') {
+      const domainData = data as Domain;
+      const totalEventElements = domainData.events.map((event) => getEventElements(event, rootNodeColor, isAnimated, true, true));
+      const totalServiceElements = domainData.services.map((service) =>
+        getServiceElements(service, rootNodeColor, isAnimated, true, true)
+      );
+      return totalEventElements.flat().concat(totalServiceElements.flat());
+    }
+
     if (source === 'event') {
       return getEventElements(data as Event, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
     }
+
     return getServiceElements(data as Service, rootNodeColor, isAnimated, includeEdgeLabels, includeNodeIcons);
   };
 

package/components/Mdx/NodeGraph/__tests__/GraphElements.spec.ts

@@ -62,8 +62,8 @@ describe('GraphElements', () => {
       const event = {
         name: 'My Event',
         version: '0.0.1',
-        producers: ['Service 1'],
-        consumers: ['Service 2'],
+        producerNames: ['Service 1'],
+        consumerNames: ['Service 2'],
       };
       const rootNodeColor = '#2563eb';
       const isAnimated = true;
@@ -77,8 +77,12 @@ describe('GraphElements', () => {
       const event = {
         name: 'My Event',
         version: '0.0.1',
-        producers: ['Service 1', 'Service 2', 'very very very very very very very very very very very very long name Service 3'],
-        consumers: [
+        producerNames: [
+          'Service 1',
+          'Service 2',
+          'very very very very very very very very very very very very long name Service 3',
+        ],
+        consumerNames: [
           'Service 4',
           'Service 5',
           'Service 6',

package/components/Mdx/NodeGraph/__tests__/GraphLayout.spec.ts

@@ -85,8 +85,8 @@ describe('GraphLayout', () => {
   describe('calcCanvasHeight', () => {
     it('takes all events and calculate the canvas height', () => {
       const data = {
-        producers: [1, 2, 3, 4, 5, 6, 7, 8],
-        consumers: [1, 2, 3, 4, 5],
+        producerNames: [1, 2, 3, 4, 5, 6, 7, 8],
+        consumerNames: [1, 2, 3, 4, 5],
       };
       const result = calcCanvasHeight(data, 'event');
       expect(result).toEqual(544);

package/components/Sidebars/DomainSidebar.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import Link from 'next/link';
+import type { Domain } from '@eventcatalog/types';
+import { CubeIcon } from '@heroicons/react/outline';
+import ExternalLinks from './components/ExternalLinks';
+import Tags from './components/Tags';
+import Owners from './components/Owners';
+import ItemList from './components/ItemList';
+
+interface DomainSideBarProps {
+  domain: Domain;
+}
+
+function ServiceSidebar({ domain }: DomainSideBarProps) {
+  const { name, owners, services, events, tags = [], externalLinks } = domain;
+
+  return (
+    <aside className="hidden xl:block xl:pl-8 divide-y divide-gray-200">
+      <h2 className="sr-only">Details</h2>
+
+      {events.length > 0 && (
+        <ItemList
+          title={`Events (${events.length})`}
+          titleIcon={{ icon: CubeIcon, className: 'text-indigo-400' }}
+          items={events.map((event) => ({ label: event.name, href: `/domains/${name}/events/${event.name}`, bgColor: 'indigo' }))}
+        />
+      )}
+
+      {services.length > 0 && (
+        <ItemList
+          title={`Services (${services.length})`}
+          titleIcon={{ icon: CubeIcon, className: 'text-green-400' }}
+          items={services.map((service) => ({
+            label: service.name,
+            href: `/domains/${name}/services/${service.name}`,
+            bgColor: 'green',
+          }))}
+        />
+      )}
+
+      {owners.length > 0 && <Owners owners={owners} />}
+
+      <Link href={`/visualiser?type=domain&name=${domain.name}`}>
+        <a className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-800 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
+          <span>View in Visualiser</span>
+        </a>
+      </Link>
+
+      {externalLinks.length > 0 && <ExternalLinks externalLinks={externalLinks} />}
+      {tags.length > 0 && <Tags tags={tags} />}
+    </aside>
+  );
+}
+
+export default ServiceSidebar;

package/components/Sidebars/EventSidebar.tsx

@@ -1,20 +1,38 @@
 import React from 'react';
 import Link from 'next/link';
 import getConfig from 'next/config';
-import { CubeIcon, DownloadIcon, ExternalLinkIcon } from '@heroicons/react/outline';
+import { CubeIcon, DownloadIcon, CollectionIcon } from '@heroicons/react/outline';
 import type { Event } from '@eventcatalog/types';
-import { useUser } from '@/hooks/EventCatalog';
+
+import ExternalLinks from './components/ExternalLinks';
+import Owners from './components/Owners';
+import ItemList from './components/ItemList';
 
 interface EventSideBarProps {
   event: Event;
+  urlPath: string;
   loadedVersion?: string;
   isOldVersion?: boolean;
 }
 
-function EventSideBar({ event, loadedVersion, isOldVersion }: EventSideBarProps) {
-  const { getUserById } = useUser();
+const getServiceLink = (serviceName: string, event: Event) => {
+  const allEventServices = [...event.consumers, ...event.producers];
+  const matchedService = allEventServices.find((service) => service.name === serviceName);
+  if (matchedService) return `/domains/${matchedService.domain}/services/${serviceName}`;
+  return `/services/${serviceName}`;
+};
 
-  const { name: eventName, owners, producers, consumers, historicVersions, externalLinks, schema } = event;
+function EventSideBar({ event, loadedVersion, isOldVersion, urlPath }: EventSideBarProps) {
+  const {
+    name: eventName,
+    owners,
+    producerNames: producers,
+    consumerNames: consumers,
+    historicVersions,
+    externalLinks,
+    schema,
+    domain,
+  } = event;
   const { publicRuntimeConfig: { basePath = '' } = {} } = getConfig();
 
   const getSchemaDownloadURL = () => {
@@ -25,60 +43,54 @@ function EventSideBar({ event, loadedVersion, isOldVersion }: EventSideBarProps)
   };
 
   return (
-    <aside className="hidden xl:block xl:pl-8">
+    <aside className="hidden xl:block xl:pl-8 divide-y divide-gray-200">
       <h2 className="sr-only">Details</h2>
 
-      <div className="pt-6 py-6 space-y-8">
-        <div>
-          <h2 className="text-sm font-medium text-gray-500">
-            <CubeIcon className="h-5 w-5 text-green-400 inline-block mr-2" aria-hidden="true" />
-            Producers
-          </h2>
-          <ul className="mt-2 leading-8">
-            {producers.map((producer) => (
-              <li className="inline mr-1" key={producer}>
-                <Link href={`/services/${producer}`}>
-                  <a className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
-                    <div className="absolute flex-shrink-0 flex items-center justify-center">
-                      <span className="h-1.5 w-1.5 rounded-full bg-green-500 animate animate-pulse" aria-hidden="true" />
-                    </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900">{producer}</div>
-                  </a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-      <div className="border-t border-gray-200 py-6 space-y-8">
-        <div>
-          <h2 className="text-sm font-medium text-gray-500">
-            <CubeIcon className="h-5 w-5 text-indigo-400 inline-block mr-2" aria-hidden="true" />
-            Consumers
-          </h2>
-          <ul className="mt-2 leading-8">
-            {consumers.map((consumer) => (
-              <li className="inline" key={consumer}>
-                <Link href={`/services/${consumer}`}>
+      {producers.length > 0 && (
+        <ItemList
+          title={`Producers (${producers.length})`}
+          titleIcon={{ icon: CubeIcon, className: 'text-green-400' }}
+          items={producers.map((producer) => ({ label: producer, href: getServiceLink(producer, event), bgColor: 'green' }))}
+        />
+      )}
+
+      {consumers.length > 0 && (
+        <ItemList
+          title={`Consumers (${consumers.length})`}
+          titleIcon={{ icon: CubeIcon, className: 'text-indigo-400' }}
+          items={consumers.map((consumer) => ({ label: consumer, href: getServiceLink(consumer, event), bgColor: 'indigo' }))}
+        />
+      )}
+
+      {domain && (
+        <div className="py-6 space-y-8">
+          <div>
+            <h2 className="text-sm font-medium text-gray-500">
+              <CollectionIcon className="h-5 w-5 text-yellow-400 inline-block mr-2" aria-hidden="true" />
+              Domain
+            </h2>
+            <ul className="mt-2 leading-8">
+              <li className="inline">
+                <Link href={`/domains/${domain}`}>
                   <a href="#" className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
                     <div className="absolute flex-shrink-0 flex items-center justify-center">
-                      <span className="h-1.5 w-1.5 rounded-full bg-indigo-500 animate animate-pulse" aria-hidden="true" />
+                      <span className="h-1.5 w-1.5 rounded-full bg-yellow-500 animate animate-pulse" aria-hidden="true" />
                     </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900">{consumer}</div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900">{domain}</div>
                   </a>
                 </Link>
               </li>
-            ))}
-          </ul>
+            </ul>
+          </div>
         </div>
-      </div>
+      )}
       {historicVersions.length > 0 && (
-        <div className="border-t border-gray-200 py-6">
+        <div className=" py-6">
           <div>
             <h2 className="text-sm font-medium text-gray-500">Event Versions</h2>
             <ul className="mt-2 leading-8 text-left text-blue-500">
               <li className="text-sm inline ">
-                <Link href={`/events/${eventName}`}>
+                <Link href={urlPath}>
                   <a>
                     <span
                       className={`inline-flex mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative ${
@@ -100,7 +112,7 @@ function EventSideBar({ event, loadedVersion, isOldVersion }: EventSideBarProps)
                   : 'bg-blue-100 text-blue-800';
                 return (
                   <li className="text-sm inline" key={version}>
-                    <Link href={`/events/${eventName}/v/${version}`}>
+                    <Link href={`${urlPath}/v/${version}`}>
                       <a>
                         <span
                           className={`inline-flex mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative  ${styles}`}
@@ -116,59 +128,10 @@ function EventSideBar({ event, loadedVersion, isOldVersion }: EventSideBarProps)
           </div>
         </div>
       )}
-      {/* <div className="border-t border-gray-200 py-6 space-y-8">
-        <div>
-          <h2 className="text-sm font-medium text-gray-500">
-            <MapIcon className="h-5 w-5 text-red-400 inline-block mr-2" aria-hidden="true" />
-            Domains
-          </h2>
-          <ul role="list" className="mt-2 leading-8">
-            {domains.map((domain) => {
-              return (
-                <li className="inline" key={domain}>
-                  <a
-                    href="#"
-                    className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5"
-                  >
-                    <div className="absolute flex-shrink-0 flex items-center justify-center">
-                      <span className="h-1.5 w-1.5 rounded-full bg-red-500" aria-hidden="true" />
-                    </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900">{domain}</div>
-                  </a>{' '}
-                </li>
-              )
-            })}
-          </ul>
-        </div>
-      </div> */}
-      {owners && owners.length > 0 && (
-        <div className="border-t border-gray-200 py-6 space-y-8">
-          <div>
-            <h2 className="text-sm font-medium text-gray-500">Event Owners</h2>
-            <ul className="mt-4 leading-8 space-y-2">
-              {owners.map((id) => {
-                const user = getUserById(id);
 
-                if (!user) return null;
+      {owners.length > 0 && <Owners owners={owners} />}
 
-                return (
-                  <li className="flex justify-start" key={id}>
-                    <Link href={`/users/${id}`}>
-                      <a className="flex items-center space-x-3">
-                        <div className="flex-shrink-0">
-                          <img className="h-5 w-5 rounded-full" src={user.avatarUrl} alt="" />
-                        </div>
-                        <div className="text-sm font-medium text-gray-900">{user.name}</div>
-                      </a>
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-      )}
-      <div className="border-t border-gray-200 py-6 space-y-1">
+      <div className=" py-6 space-y-1">
         {schema && (
           <a
             href={getSchemaDownloadURL()}
@@ -194,20 +157,7 @@ function EventSideBar({ event, loadedVersion, isOldVersion }: EventSideBarProps)
           </a>
         </Link>
 
-        {externalLinks.length > 0 &&
-          externalLinks.map((tag) => (
-            <a
-              href={tag.url}
-              target="_blank"
-              type="button"
-              className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-teal-300 shadow-sm text-sm font-medium rounded-md text-teal-800 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-200"
-              rel="noreferrer"
-              key={tag.url}
-            >
-              <ExternalLinkIcon className="-ml-1 mr-2 h-5 w-5 text-teal-200" aria-hidden="true" />
-              <span>{`${tag.label}`}</span>
-            </a>
-          ))}
+        {externalLinks.length > 0 && <ExternalLinks externalLinks={externalLinks} />}
       </div>
     </aside>
   );