@eventcatalog/core 2.14.3 → 2.16.0

package/{src → eventcatalog/src}/components/SideBars/DomainSideBar.astro

@@ -3,6 +3,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
+import { getUbiquitousLanguage } from '@utils/collections/domains';
 import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow } from 'lucide-react';
@@ -14,6 +15,9 @@ const { domain } = Astro.props;
 
 // @ts-ignore
 const services = (domain.data.services as CollectionEntry<'services'>[]) || [];
+const ubiquitousLanguage = await getUbiquitousLanguage(domain);
+const hasUbiquitousLanguage = ubiquitousLanguage.length > 0;
+const ubiquitousLanguageDictionary = hasUbiquitousLanguage ? ubiquitousLanguage[0].data.dictionary : [];
 
 const ownersRaw = domain.data?.owners || [];
 const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
@@ -26,6 +30,13 @@ const serviceList = services.map((p) => ({
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
+const ubiquitousLanguageList = ubiquitousLanguageDictionary?.map((l) => ({
+  label: l.name,
+  badge: 'Ubiquitous Language',
+  collection: 'ubiquitousLanguages',
+  href: buildUrl(`/docs/${domain.collection}/${domain.data.id}/language?id=${l.id}`),
+}));
+
 const ownersList = owners.map((o) => ({
   label: o.data.name,
   type: o.collection,
@@ -45,6 +56,17 @@ const ownersList = owners.map((o) => ({
       icon="ServerIcon"
       client:load
     />
+    {
+      ubiquitousLanguageList && hasUbiquitousLanguage && (
+        <PillListFlat
+          title={`Ubiquitous Language Dictionary (${ubiquitousLanguageDictionary?.length})`}
+          pills={ubiquitousLanguageList}
+          color="pink"
+          emptyMessage={`This domain does not have any documented ubiquitous language.`}
+          client:load
+        />
+      )
+    }
     {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
     {
       domain.data.repository && (
@@ -57,6 +79,7 @@ const ownersList = owners.map((o) => ({
       emptyMessage={`This domain does not have any documented owners.`}
       client:load
     />
+
     <div class="space-y-2">
       <a
         href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}

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

@@ -0,0 +1,196 @@
+import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
+import { createColumnHelper } from '@tanstack/react-table';
+import type { CollectionEntry } from 'astro:content';
+import { useMemo, useState } from 'react';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
+import { getColorAndIconForMessageType } from './MessageTableColumns';
+
+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 color = 'pink';
+      return (
+        <div className="group font-light">
+          <a
+            href={buildUrl(`/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-primary">
+                  {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,
+      className: 'max-w-md',
+    },
+  }),
+  columnHelper.accessor('data.receives', {
+    header: () => <span>Receives</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'receives',
+    },
+    cell: (info) => {
+      const receives = info.getValue() || [];
+      const isExpandable = receives?.length > 10;
+      const isOpen = isExpandable ? receives?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      const receiversWithIcons = useMemo(
+        () =>
+          receives?.map((consumer: any) => {
+            const type = consumer.collection.slice(0, -1);
+            return {
+              ...consumer,
+              ...getColorAndIconForMessageType(type),
+            };
+          }) || [],
+        [receives]
+      );
+
+      if (receives?.length === 0 || !receives)
+        return <div className="text-sm text-gray-400/80 text-left italic">Service receives no messages.</div>;
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {receives.length} message{receives.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {receiversWithIcons.map((consumer: any, index: number) => (
+                <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
+                  <a
+                    href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
+                    className="group-hover:text-primary 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-${consumer.color}-500 h-full rounded-tl rounded-bl p-1`}>
+                          <consumer.Icon 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>
+          )}
+        </div>
+      );
+    },
+    filterFn: filterCollectionByName('receives'),
+  }),
+  columnHelper.accessor('data.sends', {
+    header: () => <span>Sends</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'sends',
+    },
+    cell: (info) => {
+      const sends = info.getValue() || [];
+      const isExpandable = sends?.length > 10;
+      const isOpen = isExpandable ? sends?.length < 10 : true;
+      const [isExpanded, setIsExpanded] = useState(isOpen);
+
+      if (sends?.length === 0 || !sends)
+        return <div className="text-sm text-gray-400/80 text-left italic">Service sends no messages.</div>;
+
+      return (
+        <div>
+          {isExpandable && (
+            <button onClick={() => setIsExpanded(!isExpanded)} className="mb-2 text-sm text-gray-600 hover:text-gray-900">
+              {isExpanded ? '▼' : '▶'} {sends.length} message{sends.length !== 1 ? 's' : ''}
+            </button>
+          )}
+          {isExpanded && (
+            <ul>
+              {sends.map((consumer: any, index: number) => {
+                const type = consumer.collection.slice(0, -1);
+                const color = type === 'event' ? 'orange' : 'blue';
+                const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;
+                return (
+                  <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light">
+                    <a
+                      href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
+                      className="group-hover:text-primary 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`}>
+                            <Icon 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>
+          )}
+        </div>
+      );
+    },
+    filterFn: filterCollectionByName('sends'),
+  }),
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const domain = info.row.original;
+      return (
+        <a
+          className="hover:text-primary hover:underline px-4 font-light"
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
+        >
+          Visualiser &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];

package/{src → eventcatalog/src}/content/config.ts

@@ -221,6 +221,23 @@ const domains = defineCollection({
     .merge(baseSchema),
 });
 
+const ubiquitousLanguages = defineCollection({
+  type: 'content',
+  schema: z.object({
+    dictionary: z
+      .array(
+        z.object({
+          id: z.string(),
+          name: z.string(),
+          summary: z.string().optional(),
+          description: z.string().optional(),
+          icon: z.string().optional(),
+        })
+      )
+      .optional(),
+  }),
+});
+
 const users = defineCollection({
   type: 'content',
   schema: z.object({
@@ -270,4 +287,5 @@ export const collections = {
   flows,
   pages,
   changelogs,
+  ubiquitousLanguages,
 };

package/eventcatalog/src/hooks/eventcatalog-visualizer.ts

@@ -0,0 +1,89 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+import { type Edge, type Node } from 'reactflow';
+import {
+  createEdge,
+  generatedIdForEdge,
+  generateIdForNode,
+  getEdgeLabelForMessageAsSource,
+  getEdgeLabelForServiceAsTarget,
+  getNodesAndEdgesFromDagre,
+} from '@utils/node-graphs/utils/utils';
+
+interface EventCatalogVisualizerProps {
+  nodes: Node[];
+  edges: Edge[];
+  setNodes: (nodes: Node[]) => void;
+  setEdges: (edges: Edge[]) => void;
+}
+
+export const useEventCatalogVisualiser = ({ nodes, edges, setNodes, setEdges }: EventCatalogVisualizerProps) => {
+  const [hideChannels, setHideChannels] = useState(false);
+  const [initialNodes] = useState(nodes);
+  const [initialEdges] = useState(edges);
+
+  // Initialize hideChannels from localStorage
+  useEffect(() => {
+    const storedHideChannels = localStorage.getItem('EventCatalog:hideChannels');
+    if (storedHideChannels !== null) {
+      setHideChannels(storedHideChannels === 'true');
+    }
+  }, []);
+
+  const toggleChannelsVisibility = useCallback(() => {
+    setHideChannels((prev) => {
+      const newValue = !prev;
+      localStorage.setItem('EventCatalog:hideChannels', JSON.stringify(newValue));
+      return newValue;
+    });
+  }, []);
+
+  const channels = useMemo(() => nodes.filter((node) => node.type === 'channels'), [nodes]);
+  const updatedNodes = useMemo(() => nodes.filter((node) => node.type !== 'channels'), [nodes]);
+
+  const updatedEdges = useMemo(() => {
+    return edges.reduce<Edge[]>((acc, edge) => {
+      const { source, target, data } = edge;
+      const targetIsChannel = channels.some((channel) => channel.id === target);
+      const sourceIsChannel = channels.some((channel) => channel.id === source);
+
+      if (!sourceIsChannel && !targetIsChannel) {
+        return [...acc, edge];
+      }
+
+      if (sourceIsChannel) {
+        const edgeLabel =
+          data.target.collection === 'services'
+            ? getEdgeLabelForMessageAsSource(data.source)
+            : getEdgeLabelForServiceAsTarget(data.target);
+
+        return [
+          ...acc,
+          createEdge({
+            id: generatedIdForEdge(data.source, data.target),
+            source: generateIdForNode(data.source),
+            target: generateIdForNode(data.target),
+            label: edgeLabel,
+          }),
+        ];
+      }
+
+      return [...acc, edge];
+    }, []);
+  }, [edges, channels]);
+
+  useEffect(() => {
+    if (hideChannels) {
+      const { nodes: newNodes, edges: newEdges } = getNodesAndEdgesFromDagre({ nodes: updatedNodes, edges: updatedEdges });
+      setNodes(newNodes);
+      setEdges(newEdges);
+    } else {
+      setNodes(initialNodes);
+      setEdges(initialEdges);
+    }
+  }, [hideChannels]);
+
+  return {
+    hideChannels,
+    toggleChannelsVisibility,
+  };
+};

package/eventcatalog/src/pages/docs/[type]/[id]/language.astro

@@ -0,0 +1,301 @@
+---
+import Footer from '@layouts/Footer.astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { getDomains, type Domain, getUbiquitousLanguage } from '@utils/collections/domains';
+import type { CollectionEntry } from 'astro:content';
+import { ViewTransitions } from 'astro:transitions';
+import * as LucideIcons from 'lucide-react';
+
+export async function getStaticPaths() {
+  const domains = await getDomains();
+
+  const buildPages = (collection: CollectionEntry<'domains'>[]) => {
+    return collection.map((item) => ({
+      params: {
+        type: item.collection,
+        id: item.data.id,
+      },
+      props: {
+        type: item.collection,
+        ...item,
+      },
+    }));
+  };
+
+  return [...buildPages(domains)];
+}
+
+const props = Astro.props;
+const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
+const ubiquitousLanguages = await getUbiquitousLanguage(props);
+
+const ubiquitousLanguage = ubiquitousLanguages[0];
+---
+
+<VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
+  <main class="flex sm:px-8 docs-layout h-full">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8 min-h-[50em]">
+        <nav class="flex mb-4" aria-label="Breadcrumb">
+          <ol class="inline-flex items-center space-x-1 md:space-x-3">
+            <li class="inline-flex items-center">
+              <a
+                href={`/docs/${props.type}/${props.data.id}/${props.data.latestVersion}`}
+                class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-primary"
+              >
+                <svg
+                  class="w-3 h-3 mr-2.5"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="2"
+                  stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
+                </svg>
+                Back to Documentation
+              </a>
+            </li>
+          </ol>
+        </nav>
+
+        <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">
+          <div>
+            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-black">Domain Language Explorer</h2>
+            <h2 class="text-2xl pt-2 text-gray-500 font-light">{props.data.name} domain</h2>
+          </div>
+        </div>
+
+        {
+          !ubiquitousLanguage && (
+            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 my-4">
+              <p class="text-yellow-700">
+                This domain does not have any defined ubiquitous language terms yet. Consider adding some terms to help establish
+                a common vocabulary for your domain.
+              </p>
+            </div>
+          )
+        }
+
+        <div class="py-4 w-full min-h-[calc(100vh-10em)]">
+          {
+            ubiquitousLanguage && (
+              <>
+                <div class="mb-6">
+                  <input
+                    type="text"
+                    id="searchInput"
+                    placeholder="Search terms..."
+                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+
+                {!ubiquitousLanguage ? (
+                  <div class="text-center py-12 bg-gray-50 rounded-lg">
+                    <h3 class="text-lg font-medium text-gray-900">No domain language terms</h3>
+                    <p class="mt-2 text-sm text-gray-500">There are no language terms defined for this domain yet.</p>
+                  </div>
+                ) : (
+                  <div id="termsGrid" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {ubiquitousLanguage?.data?.dictionary?.map((term) => (
+                      <div class="term-card block bg-white border border-gray-200 rounded-lg p-6 transition-all duration-300 ease-in-out hover:shadow-md hover:border-primary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-primary focus:ring-white min-h-[12em] cursor-pointer">
+                        <div class="flex flex-col h-full space-y-8">
+                          {term.icon && (
+                            <>
+                              {(() => {
+                                const Icon = LucideIcons[term.icon as keyof typeof LucideIcons];
+                                //@ts-ignore
+                                return Icon ? <Icon className="w-6 h-6 text-primary" /> : null;
+                              })()}
+                            </>
+                          )}
+                          <div>
+                            <h3 class="text-gray-800 text-lg font-semibold transition-colors duration-300 ease-in-out group-hover:text-gray-300">
+                              {term.name}
+                            </h3>
+                            <div class="term-content">
+                              <p class="summary-text text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm mb-4">
+                                {term.summary}
+                              </p>
+                              {term.description && (
+                                <>
+                                  <p class="description-text hidden text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-gray-200 m-0 font-light text-sm whitespace-pre-line">
+                                    {term.description}
+                                  </p>
+                                  <span class="show-more-text text-sm text-primary font-medium">Show more</span>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                <div id="noSearchResults" class="hidden text-center py-12 bg-gray-50 rounded-lg">
+                  <h3 class="text-lg font-medium text-gray-900">No matching terms</h3>
+                  <p class="mt-2 text-sm text-gray-500">Try adjusting your search terms.</p>
+                </div>
+              </>
+            )
+          }
+        </div>
+
+        <Footer />
+      </div>
+    </div>
+    <ViewTransitions />
+  </main>
+
+  <script>
+    function initializeSearch() {
+      const searchInput = document.getElementById('searchInput');
+      const termCards = document.querySelectorAll('.term-card');
+      const noSearchResults = document.getElementById('noSearchResults');
+
+      searchInput?.addEventListener('input', (e) => {
+        const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
+        let visibleCount = 0;
+
+        termCards.forEach((card) => {
+          const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
+          const description = card.querySelector('p')?.textContent?.toLowerCase() || '';
+          const matches = title.includes(searchTerm) || description.includes(searchTerm);
+
+          card.classList.toggle('hidden', !matches);
+          if (matches) visibleCount++;
+        });
+
+        // Show/hide no results message
+        if (noSearchResults) {
+          noSearchResults.classList.toggle('hidden', visibleCount > 0);
+        }
+      });
+    }
+
+    function initializeShowMore() {
+      const cards = document.querySelectorAll('.term-card');
+
+      cards.forEach((card) => {
+        const newCard = card.cloneNode(true);
+        if (card.parentNode) {
+          card.parentNode.replaceChild(newCard, card);
+          // Initially show summary
+          const summary = (newCard as Element).querySelector('.summary-text');
+          summary?.classList.add('visible');
+        }
+        newCard.addEventListener('click', () => {
+          const description = (newCard as Element).querySelector('.description-text');
+          const summary = (newCard as Element).querySelector('.summary-text');
+          const showMoreText = (newCard as Element).querySelector('.show-more-text');
+
+          if (description && summary && showMoreText) {
+            (newCard as Element).classList.toggle('expanded');
+            description.classList.toggle('visible');
+            summary.classList.toggle('visible');
+            showMoreText.textContent = description.classList.contains('visible') ? 'Show less' : 'Show more';
+          }
+        });
+      });
+    }
+
+    function highlightMatchingTerm() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const termId = urlParams.get('id');
+
+      if (termId) {
+        const cards = document.querySelectorAll('.term-card');
+        cards.forEach((card) => {
+          const termName = card.querySelector('h3')?.textContent?.trim();
+          if (termName?.toLowerCase() === termId.toLowerCase()) {
+            // Add highlight class
+            card.classList.add('highlighted');
+            (card as HTMLElement).click();
+
+            setTimeout(() => {
+              // Scroll into view
+              card.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }, 300);
+          }
+        });
+      }
+    }
+
+    document.addEventListener('astro:page-load', () => {
+      initializeShowMore();
+      initializeSearch();
+      highlightMatchingTerm();
+    });
+
+    initializeShowMore();
+    initializeSearch();
+    highlightMatchingTerm();
+  </script>
+
+  <style is:global>
+    .term-card {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      min-height: 12em;
+    }
+
+    .term-card.expanded {
+      min-height: 24em;
+      background-color: rgb(249 250 251);
+      z-index: 10;
+      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    }
+
+    .summary-text,
+    .description-text {
+      transition:
+        opacity 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
+      opacity: 0;
+      max-height: 0;
+      overflow: hidden;
+      display: none;
+    }
+
+    .summary-text.visible,
+    .description-text.visible {
+      opacity: 1;
+      max-height: 500px;
+      margin-bottom: 1rem;
+      display: block;
+    }
+
+    .description-text {
+      white-space: pre-line;
+      line-height: 1.5;
+    }
+
+    .show-more-text {
+      display: block;
+      margin-top: 0.5rem;
+    }
+
+    .term-card.expanded .show-more-text {
+      display: none;
+    }
+
+    .term-card.highlighted {
+      border-color: var(--color-primary);
+      box-shadow: 0 0 0 2px var(--color-primary);
+      animation: pulse 1s;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 2px var(--color-primary);
+      }
+      50% {
+        transform: scale(1.01);
+        box-shadow: 0 0 0 4px var(--color-primary);
+      }
+    }
+  </style>
+</VerticalSideBarLayout>