@eventcatalog/core 2.22.0 → 2.23.0

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.22.0";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-6HZQETSS.js";
-import "../chunk-NQSIMY3C.js";
+} from "../chunk-CLNIEHVG.js";
+import "../chunk-WNRZ5O5C.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.22.0";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-O3MRQUYC.js";
-import "../chunk-6HZQETSS.js";
-import "../chunk-NQSIMY3C.js";
+} from "../chunk-F55C3RGO.js";
+import "../chunk-CLNIEHVG.js";
+import "../chunk-WNRZ5O5C.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-6HZQETSS.js → chunk-CLNIEHVG.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-NQSIMY3C.js";
+} from "./chunk-WNRZ5O5C.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-O3MRQUYC.js → chunk-F55C3RGO.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-6HZQETSS.js";
+} from "./chunk-CLNIEHVG.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-NQSIMY3C.js → chunk-WNRZ5O5C.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.22.0";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.22.0";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-NQSIMY3C.js";
+} from "./chunk-WNRZ5O5C.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.22.0";
+var version = "2.23.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.config.d.cts

@@ -33,6 +33,10 @@ interface Config {
     mdxOptimize?: boolean;
     docs: {
         sidebar: {
+            /**
+             * @default 'FLAT_VIEW'
+             */
+            type?: 'FLAT_VIEW' | 'TREE_VIEW';
             showPageHeadings: true;
             services?: SideBarConfig;
             messages?: SideBarConfig;

package/dist/eventcatalog.config.d.ts

@@ -33,6 +33,10 @@ interface Config {
     mdxOptimize?: boolean;
     docs: {
         sidebar: {
+            /**
+             * @default 'FLAT_VIEW'
+             */
+            type?: 'FLAT_VIEW' | 'TREE_VIEW';
             showPageHeadings: true;
             services?: SideBarConfig;
             messages?: SideBarConfig;

package/dist/eventcatalog.js

@@ -6,14 +6,14 @@ import {
 } from "./chunk-OW2FQPYP.js";
 import {
   log_build_default
-} from "./chunk-O3MRQUYC.js";
-import "./chunk-6HZQETSS.js";
+} from "./chunk-F55C3RGO.js";
+import "./chunk-CLNIEHVG.js";
 import {
   catalogToAstro
 } from "./chunk-CXKIF3EI.js";
 import {
   VERSION
-} from "./chunk-NQSIMY3C.js";
+} from "./chunk-WNRZ5O5C.js";
 import {
   isBackstagePluginEnabled
 } from "./chunk-XMDPVKIJ.js";

package/eventcatalog/src/components/SideNav/CatalogResourcesSideBar/getCatalogResources.ts

@@ -0,0 +1,65 @@
+import { isCollectionVisibleInCatalog } from '@eventcatalog';
+import { buildUrl } from '@utils/url-builder';
+import { getChannels } from '@utils/channels';
+import { getDomains } from '@utils/collections/domains';
+import { getFlows } from '@utils/collections/flows';
+import { getServices } from '@utils/collections/services';
+import { getCommands } from '@utils/commands';
+import { getEvents } from '@utils/events';
+import { getQueries } from '@utils/queries';
+import { getTeams } from '@utils/teams';
+import { getUsers } from '@utils/users';
+
+export async function getCatalogResources({ currentPath }: { currentPath: string }) {
+  const events = await getEvents({ getAllVersions: false });
+  const commands = await getCommands({ getAllVersions: false });
+  const queries = await getQueries({ getAllVersions: false });
+  const services = await getServices({ getAllVersions: false });
+  const domains = await getDomains({ getAllVersions: false });
+  const channels = await getChannels({ getAllVersions: false });
+  const flows = await getFlows({ getAllVersions: false });
+
+  const messages = [...events, ...commands, ...queries];
+
+  // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
+  const allData = [...domains, ...services, ...messages, ...channels, ...flows];
+
+  const allDataAsSideNav = allData.reduce((acc, item) => {
+    const title = item.collection;
+    const group = acc[title] || [];
+    const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
+
+    const navigationItem = {
+      label: item.data.name,
+      version: item.data.version,
+      // items: item.collection === 'users' ? [] : item.headings,
+      visible: isCollectionVisibleInCatalog(item.collection),
+      // @ts-ignore
+      href: item.data.version
+        ? // @ts-ignore
+          buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
+        : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
+      collection: item.collection,
+    };
+
+    group.push(navigationItem);
+
+    return {
+      ...acc,
+      [title]: group,
+    };
+  }, {} as any);
+
+  const sideNav = {
+    ...(currentPath.includes('visualiser')
+      ? {
+          'bounded context map': [
+            { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
+          ],
+        }
+      : {}),
+    ...allDataAsSideNav,
+  };
+
+  return sideNav;
+}

package/eventcatalog/src/components/{SideBars → SideNav}/CatalogResourcesSideBar/index.tsx

@@ -75,7 +75,7 @@ const CatalogResourcesSideBar: React.FC<CatalogResourcesSideBarProps> = ({ resou
   if (!isInitialized) return null;
 
   return (
-    <nav className="space-y-6 text-black ">
+    <nav className="space-y-6 text-black px-5 py-4 ">
       <div className="space-y-2">
         <div className="mb-4 px-1">
           <input

package/eventcatalog/src/components/SideNav/SideNav.astro

@@ -0,0 +1,31 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import config from '@config';
+
+// FlatView
+import CatalogResourcesSideBar from './CatalogResourcesSideBar';
+import { getCatalogResources } from './CatalogResourcesSideBar/getCatalogResources';
+
+// TreeView
+import { SideNavTreeView } from './TreeView';
+import { getTreeView } from './TreeView/getTreeView';
+
+interface Props extends Omit<HTMLAttributes<'div'>, 'children'> {}
+
+const currentPath = Astro.url.pathname;
+
+let props;
+
+const SIDENAV_TYPE = config?.docs?.sidebar?.type ?? 'FLAT_VIEW';
+
+if (SIDENAV_TYPE === 'FLAT_VIEW') {
+  props = await getCatalogResources({ currentPath });
+} else if (SIDENAV_TYPE === 'TREE_VIEW') {
+  props = getTreeView({ projectDir: process.env.PROJECT_DIR!, currentPath });
+}
+---
+
+<div {...Astro.props}>
+  {SIDENAV_TYPE === 'FLAT_VIEW' && <CatalogResourcesSideBar resources={props} currentPath={currentPath} client:load />}
+  {SIDENAV_TYPE === 'TREE_VIEW' && <SideNavTreeView client:only transition:persist tree={props} />}
+</div>

package/eventcatalog/src/components/SideNav/TreeView/getTreeView.ts

@@ -0,0 +1,189 @@
+import fs from 'fs';
+import path from 'path';
+import gm from 'gray-matter';
+import { globSync } from 'glob';
+import type { CollectionKey } from 'astro:content';
+import { buildUrl } from '@utils/url-builder';
+
+export type TreeNode = {
+  id: string;
+  name: string;
+  version: string;
+  href?: string;
+  type: CollectionKey | null;
+  children: TreeNode[];
+};
+
+/**
+ * Resource types that should be in the sidenav
+ */
+const RESOURCE_TYPES = ['domains', 'services', 'events', 'commands', 'queries', 'flows', 'channels'];
+// const RESOURCE_TYPES = ['domains', 'services', 'events', 'commands', 'queries', 'flows', 'channels'];
+
+/**
+ * Check if the path has a RESOURCE_TYPE on path
+ */
+function canBeResource(dirPath: string) {
+  const parts = dirPath.split(path.sep);
+  for (let i = parts.length - 1; i >= 0; i--) {
+    if (RESOURCE_TYPES.includes(parts[i])) return true;
+  }
+  return false;
+}
+
+function isNotVersioned(dirPath: string) {
+  const parts = dirPath.split(path.sep);
+  return parts.every((p) => p !== 'versioned');
+}
+
+function getResourceType(filePath: string): CollectionKey | null {
+  const parts = filePath.split(path.sep);
+  for (let i = parts.length - 1; i >= 0; i--) {
+    if (RESOURCE_TYPES.includes(parts[i])) return parts[i] as CollectionKey;
+  }
+  return null;
+}
+
+function buildTreeOfDir(directory: string, parentNode: TreeNode, options: { ignore?: CollectionKey[] }) {
+  let node: TreeNode | null = null;
+
+  const resourceType = getResourceType(directory);
+
+  const markdownFiles = globSync(path.join(directory, '/*.md'));
+  const isResourceIgnored = options?.ignore && resourceType && options.ignore.includes(resourceType);
+
+  if (markdownFiles.length > 0 && !isResourceIgnored) {
+    const resourceFilePath = markdownFiles.find((md) => md.endsWith('index.md'));
+    if (resourceFilePath) {
+      const resourceDef = gm.read(resourceFilePath);
+      node = {
+        id: resourceDef.data.id,
+        name: resourceDef.data.name,
+        type: resourceType,
+        version: resourceDef.data.version,
+        children: [],
+      };
+      parentNode.children.push(node);
+    }
+  }
+
+  const directories = fs.readdirSync(directory).filter((name) => {
+    const dirPath = path.join(directory, name);
+    return fs.statSync(dirPath).isDirectory() && isNotVersioned(dirPath) && canBeResource(dirPath);
+  });
+  for (const dir of directories) {
+    buildTreeOfDir(path.join(directory, dir), node || parentNode, options);
+  }
+}
+
+function forEachTreeNodeOf(node: TreeNode, ...callbacks: Array<(node: TreeNode) => void>) {
+  const next = node.children;
+
+  callbacks.forEach((cb) => cb(node));
+
+  // Go to next level
+  next.forEach((n) => {
+    forEachTreeNodeOf(n, ...callbacks);
+  });
+}
+
+function addHrefToNode(basePathname: 'docs' | 'visualiser') {
+  return (node: TreeNode) => {
+    node.href = encodeURI(
+      buildUrl(
+        `/${basePathname}/${node.type}/${node.id}${node.type === 'teams' || node.type === 'users' ? '' : `/${node.version}`}`
+      )
+    );
+  };
+}
+
+function orderChildrenByName(parentNode: TreeNode) {
+  parentNode.children.sort((a, b) => a.name.localeCompare(b.name));
+}
+
+function groupChildrenByType(parentNode: TreeNode) {
+  if (parentNode.children.length === 0) return; // Only group if there are children
+
+  const acc: Record<string, TreeNode[]> = {};
+
+  // Flows and messages are collapsed by default
+
+  parentNode.children.forEach((n) => {
+    if (n.type === null) return; // TODO: Just ignore or remove the type null???
+    if (!(n.type in acc)) acc[n.type] = [];
+    acc[n.type].push(n);
+  });
+
+  // Collapse all messages
+  const AUTO_EXPANDED_TYPES = ['domains', 'services', 'channels'];
+
+  parentNode.children = Object.entries(acc)
+    // Order label nodes by RESOURCE_TYPES
+    .sort(([aType], [bType]) => RESOURCE_TYPES.indexOf(aType) - RESOURCE_TYPES.indexOf(bType))
+    // Construct the label nodes
+    .map(([type, nodes]) => {
+      return {
+        id: `${parentNode.id}/${type}`,
+        name: type,
+        type: type as CollectionKey,
+        version: '0',
+        children: nodes,
+        isExpanded: AUTO_EXPANDED_TYPES.includes(type),
+        isLabel: true,
+      };
+    });
+}
+
+const treeViewCache = new Map<string, TreeNode>();
+
+export function getTreeView({ projectDir, currentPath }: { projectDir: string; currentPath: string }): TreeNode {
+  const basePathname = currentPath.split('/')[1] as 'docs' | 'visualiser';
+
+  const cacheKey = `${projectDir}:${basePathname}`;
+  if (treeViewCache.has(cacheKey)) return treeViewCache.get(cacheKey)!;
+
+  const rootNode: TreeNode = {
+    id: '/',
+    name: 'root',
+    type: null,
+    version: '0',
+    children: [],
+  };
+
+  buildTreeOfDir(projectDir, rootNode, {
+    ignore: basePathname === 'visualiser' ? ['teams', 'users', 'channels'] : undefined,
+  });
+
+  // prettier-ignore
+  forEachTreeNodeOf(
+    rootNode,
+    addHrefToNode(basePathname),
+    orderChildrenByName,
+    groupChildrenByType,
+  );
+
+  if (basePathname === 'visualiser') {
+    rootNode.children.unshift({
+      id: '/bounded-context-map',
+      name: 'bounded context map',
+      type: 'bounded-context-map' as any,
+      version: '0',
+      isLabel: true,
+      children: [
+        {
+          id: '/domain-map',
+          name: 'Domain map',
+          href: buildUrl('/visualiser/context-map'),
+          type: 'bounded-context-map' as any,
+          version: '',
+          children: [],
+        },
+      ],
+    } as TreeNode);
+  }
+
+  // Store in cache before returning
+  treeViewCache.set(cacheKey, rootNode);
+
+  return rootNode;
+}

package/eventcatalog/src/components/SideNav/TreeView/index.tsx

@@ -0,0 +1,94 @@
+import { gray } from 'tailwindcss/colors';
+import { TreeView } from '@components/TreeView';
+import { navigate } from 'astro:transitions/client';
+import type { TreeNode as RawTreeNode } from './getTreeView';
+import { getIconForCollection } from '@utils/collections/icons';
+import { useEffect, useState } from 'react';
+
+type TreeNode = RawTreeNode & { isLabel?: true; isDefaultExpanded?: boolean; isExpanded?: boolean };
+
+function isCurrentNode(node: TreeNode, currentPathname: string) {
+  return currentPathname === node.href;
+}
+
+function TreeNode({ node }: { node: TreeNode }) {
+  const Icon = getIconForCollection(node.type ?? '');
+  const [isCurrent, setIsCurrent] = useState(document.location.pathname === node.href);
+
+  useEffect(() => {
+    const abortCtrl = new AbortController();
+    // prettier-ignore
+    document.addEventListener(
+      'astro:page-load', 
+      () => setIsCurrent(document.location.pathname === node.href), 
+      { signal: abortCtrl.signal },
+    );
+    return () => abortCtrl.abort();
+  }, [document, node]);
+
+  return (
+    <TreeView.Item
+      key={node.id}
+      id={node.id}
+      current={isCurrent}
+      defaultExpanded={node?.isExpanded || node?.isDefaultExpanded}
+      onSelect={node?.isLabel || !node?.href ? undefined : () => navigate(node.href!)}
+    >
+      {!node?.isLabel && (
+        <TreeView.LeadingVisual>
+          <Icon className="w-3 -ml-1" />
+        </TreeView.LeadingVisual>
+      )}
+      <span
+        className={node?.isLabel ? ' capitalize  text-[13px]  text-purple-900 font-extrabold' : 'font-light text-[14px] -ml-0.5'}
+      >
+        {node.name} {node.isLabel ? `(${node.children.length})` : ''}
+      </span>
+      {(node.children || []).length > 0 && (
+        <TreeView.SubTree>
+          {node.children!.map((childNode) => (
+            <TreeNode key={childNode.id} node={childNode} />
+          ))}
+        </TreeView.SubTree>
+      )}
+    </TreeView.Item>
+  );
+}
+
+export function SideNavTreeView({ tree }: { tree: TreeNode }) {
+  function bubbleUpExpanded(parentNode: TreeNode) {
+    if (isCurrentNode(parentNode, document.location.pathname)) return true;
+    return (parentNode.isDefaultExpanded = parentNode.children.some(bubbleUpExpanded));
+  }
+  bubbleUpExpanded(tree);
+
+  return (
+    <nav id="resources-tree" className="px-2 py-2">
+      <TreeView
+        truncate={false}
+        style={{
+          // @ts-expect-error inline css var
+          '--base-size-8': '0.5rem',
+          '--base-size-12': '0.75rem',
+          '--borderColor-muted': '#fff',
+          '--borderRadius-medium': '0.375rem',
+          '--borderWidth-thick': '0.125rem',
+          '--borderWidth-thin': '0.0625rem',
+          '--boxShadow-thick': 'inset 0 0 0 var(--borderWidth-thick)',
+          '--control-transparent-bgColor-hover': '#656c7626',
+          '--control-transparent-bgColor-selected': '#656c761a',
+          // '--fgColor-accent': purple[700],
+          '--fgColor-default': gray[600],
+          '--fgColor-muted': gray[600],
+          '--text-body-size-medium': '0.875rem',
+          '--stack-gap-condensed': '0.5rem',
+          '--treeViewItem-leadingVisual-iconColor-rest': 'var(--fgColor-muted)',
+        }}
+      >
+        {tree.children.map((n) => (
+          <TreeNode key={n.id} node={n} />
+        ))}
+      </TreeView>
+    </nav>
+  );
+}

package/eventcatalog/src/components/TreeView/index.tsx

@@ -0,0 +1,328 @@
+import React, { useCallback, useEffect } from 'react';
+import classes from './styles.module.css';
+import { useSlots } from './useSlots';
+import { ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
+
+// ----------------------------------------------------------------------------
+// Context
+
+const RootContext = React.createContext<{
+  // We cache the expanded state of tree items so we can preserve the state
+  // across remounts. This is necessary because we unmount tree items
+  // when their parent is collapsed.
+  expandedStateCache: React.RefObject<Map<string, boolean> | null>;
+}>({
+  expandedStateCache: { current: new Map() },
+});
+
+const ItemContext = React.createContext<{
+  level: number;
+  isExpanded: boolean;
+}>({
+  level: 1,
+  isExpanded: false,
+});
+
+// ----------------------------------------------------------------------------
+// TreeView
+
+export type TreeViewProps = {
+  'aria-label'?: React.AriaAttributes['aria-label'];
+  'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+  children: React.ReactNode;
+  flat?: boolean;
+  truncate?: boolean;
+  style?: React.CSSProperties;
+};
+
+/* Size of toggle icon in pixels. */
+const TOGGLE_ICON_SIZE = 12;
+
+const Root: React.FC<TreeViewProps> = ({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  children,
+  flat,
+  truncate = true,
+  style,
+}) => {
+  const containerRef = React.useRef<HTMLUListElement>(null);
+  const mouseDownRef = React.useRef<boolean>(false);
+
+  const onMouseDown = useCallback(() => {
+    mouseDownRef.current = true;
+  }, []);
+
+  useEffect(() => {
+    function onMouseUp() {
+      mouseDownRef.current = false;
+    }
+    document.addEventListener('mouseup', onMouseUp);
+    return () => {
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+
+  const expandedStateCache = React.useRef<Map<string, boolean> | null>(null);
+
+  if (expandedStateCache.current === null) {
+    expandedStateCache.current = new Map();
+  }
+
+  return (
+    <RootContext.Provider
+      value={{
+        expandedStateCache,
+      }}
+    >
+      <ul
+        ref={containerRef}
+        role="tree"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        data-omit-spacer={flat}
+        data-truncate-text={truncate || false}
+        onMouseDown={onMouseDown}
+        className={classes.TreeViewRootUlStyles}
+        style={style}
+      >
+        {children}
+      </ul>
+    </RootContext.Provider>
+  );
+};
+
+Root.displayName = 'TreeView';
+
+// ----------------------------------------------------------------------------
+// TreeView.Item
+
+export type TreeViewItemProps = {
+  id: string;
+  children: React.ReactNode;
+  current?: boolean;
+  defaultExpanded?: boolean;
+  onSelect?: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
+};
+
+const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
+  ({ id: itemId, current: isCurrentItem = false, defaultExpanded, onSelect, children }, ref) => {
+    const [slots, rest] = useSlots(children, {
+      leadingVisual: LeadingVisual,
+    });
+    const { expandedStateCache } = React.useContext(RootContext);
+
+    const [isExpanded, setIsExpanded] = React.useState(
+      expandedStateCache.current?.get(itemId) ?? defaultExpanded ?? isCurrentItem
+    );
+    const { level } = React.useContext(ItemContext);
+    const { hasSubTree, subTree, childrenWithoutSubTree } = useSubTree(rest);
+    const [isFocused, setIsFocused] = React.useState(false);
+
+    // Set the expanded state and cache it
+    const setIsExpandedWithCache = React.useCallback(
+      (newIsExpanded: boolean) => {
+        setIsExpanded(newIsExpanded);
+        expandedStateCache.current?.set(itemId, newIsExpanded);
+      },
+      [itemId, setIsExpanded, expandedStateCache]
+    );
+
+    // Expand or collapse the subtree
+    const toggle = React.useCallback(
+      (event?: React.MouseEvent | React.KeyboardEvent) => {
+        setIsExpandedWithCache(!isExpanded);
+        event?.stopPropagation();
+      },
+      [isExpanded, setIsExpandedWithCache]
+    );
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLElement>) => {
+        switch (event.key) {
+          case 'Enter':
+          case ' ':
+            if (onSelect) {
+              onSelect(event);
+            } else {
+              toggle(event);
+            }
+            event.stopPropagation();
+            break;
+          case 'ArrowRight':
+            // Ignore if modifier keys are pressed
+            if (event.altKey || event.metaKey) return;
+            event.preventDefault();
+            event.stopPropagation();
+            setIsExpandedWithCache(true);
+            break;
+          case 'ArrowLeft':
+            // Ignore if modifier keys are pressed
+            if (event.altKey || event.metaKey) return;
+            event.preventDefault();
+            event.stopPropagation();
+            setIsExpandedWithCache(false);
+            break;
+        }
+      },
+      [onSelect, setIsExpandedWithCache, toggle]
+    );
+
+    return (
+      <ItemContext.Provider
+        value={{
+          level: level + 1,
+          isExpanded,
+        }}
+      >
+        <li
+          className={classes.TreeViewItem}
+          ref={ref as React.ForwardedRef<HTMLLIElement>}
+          tabIndex={0}
+          id={itemId}
+          role="treeitem"
+          aria-level={level}
+          aria-expanded={isExpanded}
+          aria-current={isCurrentItem ? 'true' : undefined}
+          aria-selected={isFocused ? 'true' : 'false'}
+          onKeyDown={handleKeyDown}
+          onFocus={(event) => {
+            // Scroll the first child into view when the item receives focus
+            event.currentTarget.firstElementChild?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+
+            // Set the focused state
+            setIsFocused(true);
+
+            // Prevent focus event from bubbling up to parent items
+            event.stopPropagation();
+          }}
+          onBlur={() => setIsFocused(false)}
+          onClick={(event) => {
+            if (onSelect) {
+              onSelect(event);
+              // if has children open them too
+              if (hasSubTree) {
+                toggle(event);
+              }
+            } else {
+              toggle(event);
+            }
+            event.stopPropagation();
+          }}
+          onAuxClick={(event) => {
+            if (onSelect && event.button === 1) {
+              onSelect(event);
+            }
+            event.stopPropagation();
+          }}
+        >
+          <div
+            className={classes.TreeViewItemContainer}
+            style={{
+              // @ts-ignore CSS custom property
+              '--level': level,
+            }}
+          >
+            <div style={{ gridArea: 'spacer', display: 'flex' }}>{/* <LevelIndicatorLines level={level} /> */}</div>
+
+            <div className={classes.TreeViewItemContent}>
+              {slots.leadingVisual}
+              <span className={classes.TreeViewItemContentText}>{childrenWithoutSubTree}</span>
+            </div>
+            {hasSubTree ? (
+              <div
+                className={[classes.TreeViewItemToggle, classes.TreeViewItemToggleHover, classes.TreeViewItemToggleEnd].join(' ')}
+                onClick={(event) => {
+                  if (onSelect) {
+                    toggle(event);
+                  }
+                }}
+              >
+                {isExpanded ? <ChevronDownIcon size={TOGGLE_ICON_SIZE} /> : <ChevronRightIcon size={TOGGLE_ICON_SIZE} />}
+              </div>
+            ) : null}
+          </div>
+          {subTree}
+        </li>
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'TreeView.Item';
+
+// ----------------------------------------------------------------------------
+// TreeView.SubTree
+
+export type TreeViewSubTreeProps = {
+  children?: React.ReactNode;
+};
+
+const SubTree: React.FC<TreeViewSubTreeProps> = ({ children }) => {
+  const { isExpanded } = React.useContext(ItemContext);
+  const ref = React.useRef<HTMLUListElement>(null);
+
+  if (!isExpanded) {
+    return null;
+  }
+
+  return (
+    <ul
+      role="group"
+      style={{
+        listStyle: 'none',
+        padding: 0,
+        margin: 0,
+      }}
+      ref={ref}
+    >
+      {children}
+    </ul>
+  );
+};
+
+SubTree.displayName = 'TreeView.SubTree';
+
+function useSubTree(children: React.ReactNode) {
+  return React.useMemo(() => {
+    const subTree = React.Children.toArray(children).find((child) => React.isValidElement(child) && child.type === SubTree);
+
+    const childrenWithoutSubTree = React.Children.toArray(children).filter(
+      (child) => !(React.isValidElement(child) && child.type === SubTree)
+    );
+
+    return {
+      subTree,
+      childrenWithoutSubTree,
+      hasSubTree: Boolean(subTree),
+    };
+  }, [children]);
+}
+
+// ----------------------------------------------------------------------------
+// TreeView.LeadingVisual
+
+export type TreeViewLeadingVisualProps = {
+  children: React.ReactNode | ((props: { isExpanded: boolean }) => React.ReactNode);
+};
+
+const LeadingVisual: React.FC<TreeViewLeadingVisualProps> = (props) => {
+  const { isExpanded } = React.useContext(ItemContext);
+  const children = typeof props.children === 'function' ? props.children({ isExpanded }) : props.children;
+  return (
+    <div className={classes.TreeViewItemVisual} aria-hidden={true}>
+      {children}
+    </div>
+  );
+};
+
+LeadingVisual.displayName = 'TreeView.LeadingVisual';
+
+// ----------------------------------------------------------------------------
+// Export
+
+export const TreeView = Object.assign(Root, {
+  Item,
+  SubTree,
+  LeadingVisual,
+});

package/eventcatalog/src/components/TreeView/styles.module.css

@@ -0,0 +1,264 @@
+.TreeViewRootUlStyles {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  /*
+   * WARNING: This is a performance optimization.
+   *
+   * We define styles for the tree items at the root level of the tree
+   * to avoid recomputing the styles for each item when the tree updates.
+   * We're sacrificing maintainability for performance because TreeView
+   * needs to be performant enough to handle large trees (thousands of items).
+   *
+   * This is intended to be a temporary solution until we can improve the
+   * performance of our styling patterns.
+   *
+   * Do NOT copy this pattern without understanding the tradeoffs.
+   */
+  .TreeViewItem {
+    outline: none;
+
+    &:focus-visible > div,
+    &.focus-visible > div {
+      box-shadow: var(--boxShadow-thick) /* var(--fgColor-accent) */ slategray;
+
+      @media (forced-colors: active) {
+        outline: 2px solid HighlightText;
+        outline-offset: -2;
+      }
+    }
+
+    &[data-has-leading-action] {
+      --has-leading-action: 1;
+    }
+  }
+
+  .TreeViewItemContainer {
+    --level: 1;
+    --toggle-width: 1rem;
+    --min-item-height: 2rem;
+
+    position: relative;
+    display: grid;
+    width: 100%;
+    font-size: var(--text-body-size-medium);
+    color: var(--fgColor-default);
+    cursor: pointer;
+    border-radius: var(--borderRadius-medium);
+    grid-template-columns: var(--spacer-width) var(--leading-action-width) 1fr var(--toggle-width);
+    grid-template-areas: 'spacer leadingAction content toggle';
+
+    --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);
+    --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));
+
+    &:hover {
+      background-color: var(--control-transparent-bgColor-hover);
+
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: -2px;
+      }
+    }
+
+    @media (pointer: coarse) {
+      --toggle-width: 1.5rem;
+      --min-item-height: 2.75rem;
+    }
+
+    &:has(.TreeViewItemSkeleton):hover {
+      cursor: default;
+      background-color: transparent;
+
+      @media (forced-colors: active) {
+        outline: none;
+      }
+    }
+  }
+
+  &:where([data-omit-spacer='true']) .TreeViewItemContainer {
+    grid-template-columns: 0 0 1fr 0;
+  }
+
+  .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {
+    background-color: var(--control-transparent-bgColor-selected);
+
+    /* Current item indicator */
+    /* stylelint-disable-next-line selector-max-specificity */
+    &::after {
+      position: absolute;
+      top: calc(50% - var(--base-size-12));
+      left: calc(-1 * var(--base-size-8));
+      width: 0.25rem;
+      height: 1.5rem;
+      content: '';
+
+      /*
+       * Use fgColor accent for consistency across all themes. Using the "correct" variable,
+       * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode
+       */
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--fgColor-accent);
+      border-radius: var(--borderRadius-medium);
+
+      @media (forced-colors: active) {
+        background-color: HighlightText;
+      }
+    }
+  }
+
+  .TreeViewItemToggle {
+    display: flex;
+    height: 100%;
+
+    /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap
+    across more lines. */
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);
+    color: var(--fgColor-muted);
+    grid-area: toggle;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .TreeViewItemToggleHover:hover {
+    background-color: var(--control-transparent-bgColor-hover);
+  }
+
+  .TreeViewItemToggleEnd {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+
+  .TreeViewItemContent {
+    display: flex;
+    height: 100%;
+    padding: 0 var(--base-size-8);
+
+    /* The dynamic top and bottom padding to maintain the minimum item height for single line items */
+    /* stylelint-disable-next-line primer/spacing */
+    padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);
+    /* stylelint-disable-next-line primer/spacing */
+    padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);
+    line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));
+    grid-area: content;
+    gap: var(--stack-gap-condensed);
+  }
+
+  .TreeViewItemContentText {
+    flex: 1 1 auto;
+    width: 0;
+  }
+
+  &:where([data-truncate-text='true']) .TreeViewItemContentText {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:where([data-truncate-text='false']) .TreeViewItemContentText {
+    word-break: break-word;
+  }
+
+  .TreeViewItemVisual {
+    display: flex;
+
+    /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
+    across more lines. */
+    height: var(--custom-line-height, 1.3rem);
+    color: var(--fgColor-muted);
+    align-items: center;
+  }
+
+  .TreeViewItemLeadingAction {
+    display: flex;
+    color: var(--fgColor-muted);
+    grid-area: leadingAction;
+
+    & > button {
+      flex-shrink: 1;
+    }
+  }
+
+  .TreeViewItemLevelLine {
+    width: 100%;
+    height: 100%;
+
+    /*
+     * On devices without hover, the nesting indicator lines
+     * appear at all times.
+     */
+    border-color: var(--borderColor-muted);
+    border-right: var(--borderWidth-thin) solid;
+  }
+
+  /*
+   * On devices with :hover support, the nesting indicator lines
+   * fade in when the user mouses over the entire component,
+   * or when there's focus inside the component. This makes
+   * sure the component remains simple when not in use.
+   */
+  @media (hover: hover) {
+    .TreeViewItemLevelLine {
+      border-color: transparent;
+    }
+
+    &:hover .TreeViewItemLevelLine,
+    &:focus-within .TreeViewItemLevelLine {
+      border-color: var(--borderColor-muted);
+    }
+  }
+
+  .TreeViewDirectoryIcon {
+    display: grid;
+    color: var(--treeViewItem-leadingVisual-iconColor-rest);
+  }
+
+  .TreeViewVisuallyHidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    /* stylelint-disable-next-line primer/spacing */
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+.TreeViewSkeletonItemContainerStyle {
+  display: flex;
+  align-items: center;
+  column-gap: 0.5rem;
+  height: 2rem;
+
+  @media (pointer: coarse) {
+    height: 2.75rem;
+  }
+
+  &:nth-of-type(5n + 1) {
+    --tree-item-loading-width: 67%;
+  }
+
+  &:nth-of-type(5n + 2) {
+    --tree-item-loading-width: 47%;
+  }
+
+  &:nth-of-type(5n + 3) {
+    --tree-item-loading-width: 73%;
+  }
+
+  &:nth-of-type(5n + 4) {
+    --tree-item-loading-width: 64%;
+  }
+
+  &:nth-of-type(5n + 5) {
+    --tree-item-loading-width: 50%;
+  }
+}
+
+.TreeItemSkeletonTextStyles {
+  width: var(--tree-item-loading-width, 67%);
+}

package/eventcatalog/src/components/TreeView/useSlots.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+// import {warning} from '../utils/warning'
+
+// slot config allows 2 options:
+// 1. Component to match, example: { leadingVisual: LeadingVisual }
+type ComponentMatcher = React.ElementType<Props>;
+// 2. Component to match + a test function, example: { blockDescription: [Description, props => props.variant === 'block'] }
+type ComponentAndPropsMatcher = [ComponentMatcher, (props: Props) => boolean];
+
+export type SlotConfig = Record<string, ComponentMatcher | ComponentAndPropsMatcher>;
+
+// We don't know what the props are yet, we set them later based on slot config
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Props = any;
+
+type SlotElements<Config extends SlotConfig> = {
+  [Property in keyof Config]: SlotValue<Config, Property>;
+};
+
+type SlotValue<Config, Property extends keyof Config> = Config[Property] extends React.ElementType // config option 1
+  ? React.ReactElement<React.ComponentPropsWithoutRef<Config[Property]>, Config[Property]>
+  : Config[Property] extends readonly [
+        infer ElementType extends React.ElementType, // config option 2, infer array[0] as component
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        infer _testFn, // even though we don't use testFn, we need to infer it to support types for slots.*.props
+      ]
+    ? React.ReactElement<React.ComponentPropsWithoutRef<ElementType>, ElementType>
+    : never; // useful for narrowing types, third option is not possible
+
+/**
+ * Extract components from `children` so we can render them in different places,
+ * allowing us to implement components with SSR-compatible slot APIs.
+ * Note: We can only extract direct children, not nested ones.
+ */
+export function useSlots<Config extends SlotConfig>(
+  children: React.ReactNode,
+  config: Config
+): [Partial<SlotElements<Config>>, React.ReactNode[]] {
+  // Object mapping slot names to their elements
+  const slots: Partial<SlotElements<Config>> = mapValues(config, () => undefined);
+
+  // Array of elements that are not slots
+  const rest: React.ReactNode[] = [];
+
+  const keys = Object.keys(config) as Array<keyof Config>;
+  const values = Object.values(config);
+
+  // eslint-disable-next-line github/array-foreach
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      rest.push(child);
+      return;
+    }
+
+    const index = values.findIndex((value) => {
+      if (Array.isArray(value)) {
+        const [component, testFn] = value;
+        return child.type === component && testFn(child.props);
+      } else {
+        return child.type === value;
+      }
+    });
+
+    // If the child is not a slot, add it to the `rest` array
+    if (index === -1) {
+      rest.push(child);
+      return;
+    }
+
+    const slotKey = keys[index];
+
+    // If slot is already filled, ignore duplicates
+    if (slots[slotKey]) {
+      // warning(true, `Found duplicate "${String(slotKey)}" slot. Only the first will be rendered.`)
+      return;
+    }
+
+    // If the child is a slot, add it to the `slots` object
+
+    slots[slotKey] = child as SlotValue<Config, keyof Config>;
+  });
+
+  return [slots, rest];
+}
+
+/** Map the values of an object */
+function mapValues<T extends Record<string, unknown>, V>(obj: T, fn: (value: T[keyof T]) => V) {
+  return Object.keys(obj).reduce(
+    (result, key: keyof T) => {
+      result[key] = fn(obj[key]);
+      return result;
+    },
+    {} as Record<keyof T, V>
+  );
+}

package/eventcatalog/src/layouts/VerticalSideBarLayout.astro

@@ -8,6 +8,7 @@ interface Props {
 import { BookOpenText, Workflow, TableProperties, House, BookUser } from 'lucide-react';
 import Header from '../components/Header.astro';
 import SEO from '../components/Seo.astro';
+import SideNav from '../components/SideNav/SideNav.astro';
 
 import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/collections/domains';
@@ -17,8 +18,6 @@ import { getFlows } from '@utils/collections/flows';
 import { isCollectionVisibleInCatalog } from '@eventcatalog';
 import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
-import { getChannels } from '@utils/channels';
-import CatalogResourcesSideBar from '@components/SideBars/CatalogResourcesSideBar';
 import { hasLandingPageForDocs } from '@utils/pages';
 
 const events = await getEvents({ getAllVersions: false });
@@ -26,14 +25,8 @@ const commands = await getCommands({ getAllVersions: false });
 const queries = await getQueries({ getAllVersions: false });
 const services = await getServices({ getAllVersions: false });
 const domains = await getDomains({ getAllVersions: false });
-const channels = await getChannels({ getAllVersions: false });
 const flows = await getFlows({ getAllVersions: false });
 
-const messages = [...events, ...commands, ...queries];
-
-// @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-const allData = [...domains, ...services, ...messages, ...channels, ...flows];
-
 const currentPath = Astro.url.pathname;
 
 const catalogHasDefaultLandingPageForDocs = await hasLandingPageForDocs();
@@ -101,45 +94,8 @@ const navigationItems = [
   },
 ];
 
-const allDataAsSideNav = allData.reduce((acc, item) => {
-  const title = item.collection;
-  const group = acc[title] || [];
-  const currentPath = Astro.url.pathname;
-  const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
-
-  const navigationItem = {
-    label: item.data.name,
-    version: item.data.version,
-    visible: isCollectionVisibleInCatalog(item.collection),
-    // @ts-ignore
-    href: item.data.version
-      ? // @ts-ignore
-        buildUrl(`/${route}/${item.collection}/${item.data.id}/${item.data.version}`)
-      : buildUrl(`/${route}/${item.collection}/${item.data.id}`),
-    collection: item.collection,
-  };
-
-  group.push(navigationItem);
-
-  return {
-    ...acc,
-    [title]: group,
-  };
-}, {} as any);
-
-const sideNav = {
-  ...(currentPath.includes('visualiser')
-    ? {
-        'bounded context map': [
-          { label: 'Domain map', href: buildUrl('/visualiser/context-map'), collection: 'bounded-context-map' },
-        ],
-      }
-    : {}),
-  ...allDataAsSideNav,
-};
-
 const currentNavigationItem = navigationItems.find((item) => item.current);
-const { title, description, sidebar: showSideBarOverride } = Astro.props;
+const { title, description } = Astro.props;
 
 const showSideBarOnLoad = currentNavigationItem?.sidebar;
 
@@ -198,12 +154,10 @@ const canPageBeEmbedded = process.env.ENABLE_EMBED === 'true';
           </nav>
         </div>
 
-        <div
+        <SideNav
           id="sidebar"
-          class={`sidebar-transition h-content px-5 py-4 overflow-y-auto bg-white bg-gradient-to-b  border-r border-gray-100 w-60 ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
-        >
-          <CatalogResourcesSideBar resources={sideNav} currentPath={currentPath} client:load />
-        </div>
+          class={`sidebar-transition h-content  overflow-y-auto bg-white  border-r border-gray-100 w-60 ml-16 ${showSideBarOnLoad ? 'block' : 'hidden'}`}
+        />
       </aside>
       <main
         class={`sidebar-transition w-full max-h-content overflow-y-auto ${showSideBarOnLoad ? 'ml-0' : 'ml-16'}`}

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "publishConfig": {
     "access": "public"
   },