@eventcatalog/core 5.0.0-beta.2 → 5.0.0-beta.20

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/resources/_index.data.ts

@@ -1,74 +1,79 @@
 import { isSSR } from '@utils/feature';
 import { HybridPage } from '@utils/page-loaders/hybrid-page';
-import { hasResources } from './_resources';
+import type { ResourceOwner, ResourceOwnerCollection } from '@utils/collections/resources';
+import {
+  createResourcesCatalog,
+  findOwnerWithResources,
+  getOwnersWithResources,
+  RESOURCE_OWNER_COLLECTIONS,
+} from '@utils/collections/resource-owners';
 
-// The Resources page lists the resources directly attached to a single system or
-// domain. It is only available for systems and domains — every other resource type 404s.
-const SUPPORTED_TYPES = ['systems', 'domains'] as const;
-type SupportedType = (typeof SUPPORTED_TYPES)[number];
+// The Resources page lists the resources attached to a single system, domain, service, flow,
+// channel or message. Every other resource type 404s.
+//
+// Services have their own route (pages/docs/services/[id]/[version]/resources), because the
+// version-less alias /docs/services/[id]/[docType]/[docId] outranks this generic route and
+// would otherwise catch /docs/services/{id}/{version}/resources.
+const GENERIC_ROUTE_TYPES = RESOURCE_OWNER_COLLECTIONS.filter((type) => type !== 'services');
 
-const isSupportedType = (type: string): type is SupportedType => SUPPORTED_TYPES.includes(type as SupportedType);
+type RouteParams = { type?: string; id?: string; version?: string };
 
-export const loadResourceOwner = async (type: SupportedType) => {
-  if (type === 'systems') {
-    const { getSystems } = await import('@utils/collections/systems');
-    return getSystems();
-  }
-  const { getDomains } = await import('@utils/collections/domains');
-  return getDomains({ includeServicesInSubdomains: false });
-};
+const createResourcesPage = ({
+  types,
+  toParams,
+  typeOf,
+}: {
+  types: ResourceOwnerCollection[];
+  toParams: (type: ResourceOwnerCollection, owner: ResourceOwner) => RouteParams;
+  typeOf: (params: RouteParams) => string | undefined;
+}) =>
+  class extends HybridPage {
+    static get prerender(): boolean {
+      return !isSSR();
+    }
 
-export class Page extends HybridPage {
-  static get prerender(): boolean {
-    return !isSSR();
-  }
+    static async getStaticPaths(): Promise<Array<{ params: RouteParams; props: ResourceOwner }>> {
+      if (isSSR()) {
+        return [];
+      }
 
-  static async getStaticPaths(): Promise<Array<{ params: any; props: any }>> {
-    if (isSSR()) {
-      return [];
+      const catalog = createResourcesCatalog();
+      const paths: Array<{ params: RouteParams; props: ResourceOwner }> = [];
+      for (const type of types) {
+        for (const owner of await getOwnersWithResources(type, catalog)) {
+          paths.push({ params: toParams(type, owner), props: owner });
+        }
+      }
+      return paths;
     }
 
-    const owners = await Promise.all(SUPPORTED_TYPES.map((type) => loadResourceOwner(type)));
-
-    return SUPPORTED_TYPES.flatMap((type, index) =>
-      owners[index]
-        .filter((owner) => hasResources(owner, type))
-        .map((owner) => ({
-          params: {
-            type,
-            id: owner.data.id,
-            version: owner.data.version,
-          },
-          props: {
-            ...owner,
-          },
-        }))
-    );
-  }
+    protected static async fetchData(params: RouteParams) {
+      const type = typeOf(params);
+      const { id, version } = params;
 
-  protected static async fetchData(params: any) {
-    const { type, id, version } = params;
+      if (!type || !id || !version || !types.includes(type as ResourceOwnerCollection)) {
+        return null;
+      }
 
-    if (!type || !id || !version || !isSupportedType(type)) {
-      return null;
+      return findOwnerWithResources(type as ResourceOwnerCollection, id, version);
     }
 
-    const owners = await loadResourceOwner(type);
-    const owner = owners.find((o) => o.data.id === id && o.data.version === version);
-
-    if (!owner || !hasResources(owner, type)) {
-      return null;
+    protected static createNotFoundResponse(): Response {
+      return new Response(null, {
+        status: 404,
+        statusText: 'Resources not found',
+      });
     }
+  };
 
-    return {
-      ...owner,
-    };
-  }
+export const Page = createResourcesPage({
+  types: GENERIC_ROUTE_TYPES,
+  toParams: (type, owner) => ({ type, id: owner.data.id, version: owner.data.version }),
+  typeOf: (params) => params.type,
+});
 
-  protected static createNotFoundResponse(): Response {
-    return new Response(null, {
-      status: 404,
-      statusText: 'Resources not found',
-    });
-  }
-}
+export const ServicePage = createResourcesPage({
+  types: ['services'],
+  toParams: (_type, owner) => ({ id: owner.data.id, version: owner.data.version }),
+  typeOf: () => 'services',
+});

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/resources/index.astro

@@ -1,71 +1,11 @@
 ---
-import Footer from '@layouts/Footer.astro';
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { buildUrl } from '@utils/url-builder';
-import {
-  SystemResourcesTable,
-  type SystemResourceItem,
-  type SystemResourceCollection,
-} from '@components/Tables/SystemResources/SystemResourcesTable';
-import { getResourceGroups, type ResourceOwnerCollection } from './_resources';
-
+import ResourcesPage from './_ResourcesPage.astro';
 import { Page } from './_index.data';
 
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
 const resourceOwner = await Page.getData(Astro);
-const { data } = resourceOwner;
-const ownerCollection = resourceOwner.collection as ResourceOwnerCollection;
-
-// Only show resources directly attached to this system/domain. Domain child resources
-// are not flattened, so services inside a child system remain on that system's page.
-const resourceGroups = getResourceGroups(data, ownerCollection);
-
-const hrefForResource = (collection: SystemResourceCollection, id: string, version: string) => {
-  if (collection === 'entities') {
-    return buildUrl(`/docs/entities/${id}/${version}`);
-  }
-  return buildUrl(`/docs/${collection}/${id}/${version}`);
-};
-
-const ownerTypeLabel = ownerCollection === 'domains' ? 'Domain' : 'System';
-
-const resources: SystemResourceItem[] = resourceGroups.flatMap(({ collection, items }) =>
-  items.map((item: any) => ({
-    collection,
-    id: item.data.id,
-    name: item.data.name || item.data.id,
-    version: item.data.version,
-    summary: item.data.summary,
-    icon: item.data?.styles?.icon,
-    href: hrefForResource(collection, item.data.id, item.data.version),
-  }))
-);
 ---
 
-<VerticalSideBarLayout title={`${data.name} | Resources`}>
-  <main class="flex docs-layout min-h-full bg-[rgb(var(--ec-page-bg))]">
-    <div class="flex docs-layout w-full">
-      <div class="w-full min-w-0 lg:mr-2 xl:pr-12 py-8 bg-[rgb(var(--ec-page-bg))]">
-        {/* Header mirrors the resource page (docs/[type]/[id]/[version]/index.astro). */}
-        <div class="border-b border-[rgb(var(--ec-page-border))] md:pb-3 pt-4">
-          <div class="flex flex-col gap-4">
-            <span class="text-xs md:text-sm font-semibold text-[rgb(var(--ec-accent))] capitalize">{ownerTypeLabel}</span>
-            <h2 id="doc-page-header" class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">
-              {data.name} Resources
-            </h2>
-          </div>
-          <p class="text-base pt-4 pb-1 text-[rgb(var(--ec-page-text-muted))] font-light">
-            {resources.length} {resources.length === 1 ? 'resource' : 'resources'} mapped to the {data.name}{' '}
-            {ownerTypeLabel.toLowerCase()}.
-          </p>
-        </div>
-
-        <div class="pt-8 pb-4 w-full">
-          <SystemResourcesTable resources={resources} client:only="react" />
-        </div>
-      </div>
-    </div>
-  </main>
-</VerticalSideBarLayout>
+<ResourcesPage resourceOwner={resourceOwner} />

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

@@ -17,7 +17,7 @@ const redirectUrl = buildUrl(pathname + '/' + props.data.latestVersion, false, t
 <!doctype html>
 <html lang="en">
   <head>
-    <Seo title={`EventCatalog | ${pageTitle}`} ogTitle={pageTitle} />
+    <Seo title={pageTitle} />
   </head>
   <body>
     <p>You are being redirected to <a href={redirectUrl}>{redirectUrl}</a></p>

package/eventcatalog/src/pages/docs/services/[id]/[version]/resources/index.astro

@@ -0,0 +1,13 @@
+---
+// Services need their own Resources route: /docs/services/[id]/[docType]/[docId] outranks
+// the generic /docs/[type]/[id]/[version]/resources route and would catch these URLs.
+import ResourcesPage from '../../../../[type]/[id]/[version]/resources/_ResourcesPage.astro';
+import { ServicePage } from '../../../../[type]/[id]/[version]/resources/_index.data';
+
+export const prerender = ServicePage.prerender;
+export const getStaticPaths = ServicePage.getStaticPaths;
+
+const resourceOwner = await ServicePage.getData(Astro);
+---
+
+<ResourcesPage resourceOwner={resourceOwner} />

package/eventcatalog/src/pages/index.astro

@@ -60,7 +60,7 @@ if (config.landingPage) {
 
 {
   CustomContent ? (
-    <VerticalSideBarLayout title="EventCatalog" reducedContentPadding>
+    <VerticalSideBarLayout reducedContentPadding>
       <main class="flex docs-layout h-full">
         <div class="flex docs-layout w-full">
           <div class="w-full overflow-y-auto py-8">

package/eventcatalog/src/pages/schemas/explorer/index.astro

@@ -11,7 +11,7 @@ export const getStaticPaths = Page.getStaticPaths;
 const { schemas } = await Page.getData(Astro);
 ---
 
-<VerticalSideBarLayout title="Schema Explorer - EventCatalog" showNestedSideBar={false}>
+<VerticalSideBarLayout title="Schema Explorer" showNestedSideBar={false}>
   <style is:global>
     .react-flow__attribution {
       display: none;

package/eventcatalog/src/pages/visualiser/[type]/[id]/index.astro

@@ -53,7 +53,7 @@ const redirectUrl = buildUrl(pathname + '/' + props.data.latestVersion, false, t
 <!doctype html>
 <html lang="en">
   <head>
-    <Seo title={`EventCatalog | ${pageTitle}`} ogTitle={pageTitle} />
+    <Seo title={pageTitle} />
   </head>
   <body>
     <p>You are being redirected to <a href={redirectUrl}>{redirectUrl}</a></p>

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -11,6 +11,7 @@ import {
   buildDiagramNavItems,
   buildResourceDocsSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
@@ -131,19 +132,6 @@ export const buildDomainSections = (
   const sortedReceivesMessages = [...receivesMessages].sort(byResourceName);
   const renderMessages = shouldRenderSideBarSection(domain, 'messages');
 
-  // The Resources page/link only makes sense when the domain has direct resources.
-  // Keep this aligned with the resource groups rendered by the page.
-  const hasResources =
-    subDomains.length > 0 ||
-    systemsInDomain.length > 0 ||
-    agentsInDomain.length > 0 ||
-    dataProductsInDomain.length > 0 ||
-    allServicesInDomain.length > 0 ||
-    domainFlows.length > 0 ||
-    entitiesInDomain.length > 0 ||
-    sendsMessages.length > 0 ||
-    receivesMessages.length > 0;
-
   // Diagrams
   const domainDiagrams = domain.data.diagrams || [];
   const diagramNavItems = buildDiagramNavItems(domainDiagrams, context.diagrams);
@@ -223,10 +211,7 @@ export const buildDomainSections = (
     'quick-reference': buildQuickReferenceSection(
       [
         { title: 'Overview', href: buildUrl(`/docs/domains/${domain.data.id}/${domain.data.version}`) },
-        hasResources && {
-          title: 'Domain Resources',
-          href: buildUrl(`/docs/domains/${domain.data.id}/${domain.data.version}/resources`),
-        },
+        buildResourcesLink(context, 'domains', domain.data.id, domain.data.version),
         renderUbiquitousLanguage && {
           title: 'Ubiquitous Language',
           href: buildUrl(`/docs/domains/${domain.data.id}/language`),
@@ -239,31 +224,28 @@ export const buildDomainSections = (
       ].filter(Boolean) as { title: string; href: string }[]
     ),
     documentation: docsSection,
-    architecture: {
-      type: 'group',
-      title: 'Architecture',
-      icon: 'Workflow',
-      pages: [
-        {
-          type: 'item',
-          title: 'Overview',
-          href: buildUrl(`/architecture/domains/${domain.data.id}/${domain.data.version}`),
-        },
-        // The domain's diagram, with levels from the domains it talks to down to
-        // its messages
-        renderVisualiser && {
-          type: 'item',
-          title: 'Diagram',
-          href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
-        },
-        renderEntities &&
-          renderVisualiser && {
-            type: 'item',
-            title: 'Entity Diagram',
-            href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}/entity-map`),
-          },
-      ].filter(Boolean) as ChildRef[],
-    },
+    // Every Architecture link is a visualiser view, so the group is left out when the visualiser is off.
+    architecture: renderVisualiser
+      ? {
+          type: 'group',
+          title: 'Architecture',
+          icon: 'Workflow',
+          pages: [
+            // The domain's diagram, with levels from the domains it talks to down to
+            // its messages
+            {
+              type: 'item',
+              title: 'Diagram',
+              href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}`),
+            },
+            renderEntities && {
+              type: 'item',
+              title: 'Entity Diagram',
+              href: buildUrl(`/visualiser/domains/${domain.data.id}/${domain.data.version}/entity-map`),
+            },
+          ].filter(Boolean) as ChildRef[],
+        }
+      : null,
     diagrams: hasDiagrams
       ? {
           type: 'group',

package/eventcatalog/src/stores/sidebar-store/builders/flow.ts

@@ -6,6 +6,7 @@ import {
   buildResourceDocsSection,
   shouldRenderSideBarSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isChangelogEnabled } from '@utils/feature';
 import { createVersionedMap, findInMap } from '@utils/collections/util';
@@ -157,6 +158,7 @@ export const buildFlowSections = (flow: CollectionEntry<'flows'>, context: Resou
     'quick-reference': buildQuickReferenceSection(
       [
         { title: 'Overview', href: buildUrl(`/docs/flows/${flow.data.id}/${flow.data.version}`) },
+        buildResourcesLink(context, 'flows', flow.data.id, flow.data.version),
         isChangelogEnabled() &&
           shouldRenderSideBarSection(flow, 'changelog') && {
             title: 'Changelog',

package/eventcatalog/src/stores/sidebar-store/builders/message.ts

@@ -11,6 +11,7 @@ import {
   buildDiagramNavItems,
   buildResourceDocsSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { iconFieldsForResource } from '@utils/icon';
@@ -137,6 +138,7 @@ export const buildMessageSections = (
           title: 'Overview',
           href: buildUrl(`/docs/${collection}/${message.data.id}/${message.data.version}`),
         },
+        buildResourcesLink(context, collection, message.data.id, message.data.version),
         isChangelogEnabled() &&
           shouldRenderSideBarSection(message, 'changelog') && {
             title: 'Changelog',

package/eventcatalog/src/stores/sidebar-store/builders/service.ts

@@ -13,6 +13,7 @@ import {
   buildDiagramNavItems,
   buildResourceDocsSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isVisualiserEnabled, isChangelogEnabled } from '@utils/feature';
 import { pluralizeMessageType } from '@utils/collections/messages';
@@ -98,6 +99,7 @@ export const buildServiceSections = (
   const hasAttachments = service.data.attachments && service.data.attachments.length > 0;
 
   const hasDataStores = dataStoresInService.length > 0;
+
   const resourceGroups = service.data.resourceGroups || [];
   const hasResourceGroups = resourceGroups.length > 0;
 
@@ -126,6 +128,7 @@ export const buildServiceSections = (
     'quick-reference': buildQuickReferenceSection(
       [
         { title: 'Overview', href: buildUrl(docsBasePath) },
+        buildResourcesLink(context, 'services', service.data.id, service.data.version),
         isChangelogEnabled() &&
           shouldRenderSideBarSection(service, 'changelog') && {
             title: 'Changelog',
@@ -134,29 +137,26 @@ export const buildServiceSections = (
       ].filter(Boolean) as { title: string; href: string }[]
     ),
     documentation: docsSection,
-    architecture: {
-      type: 'group',
-      title: 'Architecture',
-      icon: 'Workflow',
-      pages: [
-        {
-          type: 'item',
-          title: 'Overview',
-          href: buildUrl(`/architecture/services/${service.data.id}/${service.data.version}`),
-        },
-        renderVisualiser && {
-          type: 'item',
-          title: 'Diagram',
-          href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`),
-        },
-        renderVisualiser &&
-          renderEntities && {
-            type: 'item',
-            title: 'Entity Diagram',
-            href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}/entity-map`),
-          },
-      ].filter(Boolean) as ChildRef[],
-    },
+    // Every Architecture link is a visualiser view, so the group is left out when the visualiser is off.
+    architecture: renderVisualiser
+      ? {
+          type: 'group',
+          title: 'Architecture',
+          icon: 'Workflow',
+          pages: [
+            {
+              type: 'item',
+              title: 'Diagram',
+              href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}`),
+            },
+            renderEntities && {
+              type: 'item',
+              title: 'Entity Diagram',
+              href: buildUrl(`/visualiser/services/${service.data.id}/${service.data.version}/entity-map`),
+            },
+          ].filter(Boolean) as ChildRef[],
+        }
+      : null,
     diagrams: hasDiagrams
       ? {
           type: 'group',

package/eventcatalog/src/stores/sidebar-store/builders/shared.ts

@@ -79,8 +79,21 @@ export type ResourceGroupContext = {
   teams?: CollectionEntry<'teams'>[];
   resourceDocs: ResourceDocEntry[];
   resourceDocCategories: ResourceDocCategoryEntry[];
+  /** `collection:id:version` of every resource with a Resources page (see getResourcesPageKeys). */
+  resourcesPages?: Set<string>;
 };
 
+/** The Quick Reference link to a resource's Resources page, when it has one. */
+export const buildResourcesLink = (
+  context: Pick<ResourceGroupContext, 'resourcesPages'>,
+  collection: string,
+  id: string,
+  version: string
+) =>
+  context.resourcesPages?.has(`${collection}:${id}:${version}`)
+    ? { title: 'Resources', href: buildUrl(`/docs/${collection}/${id}/${version}/resources`) }
+    : false;
+
 export const buildQuickReferenceSection = (items: { title: string; href: string }[]): NavNode => ({
   type: 'group',
   title: 'Quick Reference',

package/eventcatalog/src/stores/sidebar-store/builders/system.ts

@@ -10,6 +10,7 @@ import {
   buildDiagramNavItems,
   buildResourceDocsSection,
   buildArchitectureDecisionsSection,
+  buildResourcesLink,
 } from './shared';
 import { isChangelogEnabled, isVisualiserEnabled } from '@utils/feature';
 import { customIconFieldsForResource } from '@utils/icon';
@@ -74,11 +75,6 @@ export const buildSystemSections = (
   const containersInSystem = [...(system.data.containers || [])].sort(byResourceName);
   const renderContainers = containersInSystem.length > 0 && shouldRenderSideBarSection(system, 'containers');
 
-  // The Resources page/link only makes sense when the system actually has resources
-  // attached (services, flows, entities or data stores). Mirrors what the page renders.
-  const hasResources =
-    servicesInSystem.length > 0 || flowsInSystem.length > 0 || entitiesInSystem.length > 0 || containersInSystem.length > 0;
-
   const systemDiagrams = system.data.diagrams || [];
   const diagramNavItems = buildDiagramNavItems(systemDiagrams, context.diagrams);
   const hasDiagrams = diagramNavItems.length > 0 && shouldRenderSideBarSection(system, 'diagrams');
@@ -138,10 +134,7 @@ export const buildSystemSections = (
           title: 'Overview',
           href: buildUrl(`/docs/systems/${system.data.id}/${system.data.version}`),
         },
-        hasResources && {
-          title: 'System Resources',
-          href: buildUrl(`/docs/systems/${system.data.id}/${system.data.version}/resources`),
-        },
+        buildResourcesLink(context, 'systems', system.data.id, system.data.version),
         isChangelogEnabled() &&
           shouldRenderSideBarSection(system, 'changelog') && {
             title: 'Changelog',
@@ -150,24 +143,22 @@ export const buildSystemSections = (
       ].filter(Boolean) as { title: string; href: string }[]
     ),
     documentation: docsSection,
-    architecture: {
-      type: 'group',
-      title: 'Architecture',
-      icon: 'Workflow',
-      pages: [
-        {
-          type: 'item',
-          title: 'Overview',
-          href: buildUrl(`/architecture/systems/${system.data.id}/${system.data.version}`),
-        },
-        // The system's diagram, with levels from its context down to its messages
-        renderVisualiser && {
-          type: 'item',
-          title: 'Diagram',
-          href: buildUrl(`/visualiser/systems/${system.data.id}/${system.data.version}`),
-        },
-      ].filter(Boolean) as ChildRef[],
-    },
+    // Every Architecture link is a visualiser view, so the group is left out when the visualiser is off.
+    architecture: renderVisualiser
+      ? {
+          type: 'group',
+          title: 'Architecture',
+          icon: 'Workflow',
+          pages: [
+            // The system's diagram, with levels from its context down to its messages
+            {
+              type: 'item',
+              title: 'Diagram',
+              href: buildUrl(`/visualiser/systems/${system.data.id}/${system.data.version}`),
+            },
+          ],
+        }
+      : null,
     diagrams: hasDiagrams
       ? {
           type: 'group',

package/eventcatalog/src/stores/sidebar-store/state.ts

@@ -38,9 +38,11 @@ import { iconFieldsForResource } from '@utils/icon';
 import {
   buildQuickReferenceSection,
   buildResourceDocsSection,
+  buildResourcesLink,
   shouldRenderSideBarSection,
   withArchitectureDecisionsSection,
 } from './builders/shared';
+import { getResourcesPageKeys } from '@utils/collections/resource-owners';
 import { isArchitectureGraphEnabled, isChangelogEnabled } from '@utils/feature';
 import { collectMessageIdsWithFieldUsage } from '@utils/collections/field-usage';
 
@@ -355,6 +357,8 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
     teams,
     resourceDocs,
     resourceDocCategories,
+    // Same rule the Resources pages are built from, so a link never points at a missing page.
+    resourcesPages: await getResourcesPageKeys(),
   };
 
   // Process all domains with their owners first (async)
@@ -801,6 +805,7 @@ export const getNestedSideBarData = async (): Promise<NavigationData> => {
                   title: 'Overview',
                   href: buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.version}`),
                 },
+                buildResourcesLink(context, 'channels', channel.data.id, channel.data.version),
                 isChangelogEnabled() &&
                   shouldRenderSideBarSection(channel, 'changelog') && {
                     title: 'Changelog',

package/eventcatalog/src/styles/tailwind.css

@@ -171,7 +171,7 @@
  * scanning, so we explicitly declare them here.
  *
  * Colors used: orange, blue, green, emerald, amber, violet, pink, purple, gray, yellow, teal, cyan, indigo
- * Used in: SchemaListItem, Grids/components, SchemaExplorer, MessageGrid
+ * Used in: SchemaListItem, SchemaExplorer
  */
 @source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{50,100}");
 @source inline("bg-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{10,20}");
@@ -180,7 +180,7 @@
 @source inline("ring-2");
 @source inline("ring-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500");
 
-/* Border color variants for MessageGrid cards */
+/* Border color variants built at runtime (e.g. hover borders in MessageTableColumns) */
 @source inline("border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{200,300}");
 @source inline("{dark:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-500/{30,50}");
 @source inline("{hover:,dark:hover:,}border-{orange,blue,green,emerald,amber,violet,pink,purple,gray,yellow,teal,cyan,indigo}-{300,400,500,500/50}");

package/eventcatalog/src/types/react-syntax-highlighter.d.ts

@@ -12,3 +12,13 @@ declare module 'react-syntax-highlighter' {
 }
 
 declare module 'react-syntax-highlighter/dist/esm/styles/prism/material-light';
+
+declare module 'react-syntax-highlighter/dist/cjs/create-element.js' {
+  import type { CSSProperties } from 'react';
+
+  export function createStyleObject(
+    classNames: string[],
+    elementStyle?: CSSProperties,
+    stylesheet?: { [selector: string]: CSSProperties }
+  ): CSSProperties;
+}