@eventcatalog/core 2.22.0 → 2.23.1

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,
+});