@eventcatalog/core 2.22.0 → 2.23.1

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.1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,7 +37,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
-    "astro": "^5.2.5",
+    "astro": "^5.3.0",
     "astro-expressive-code": "^0.40.1",
     "astro-pagefind": "^1.6.0",
     "astro-seo": "^0.8.4",
@@ -72,6 +72,7 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
+    "update-notifier": "^7.3.1",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
@@ -88,6 +89,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/semver": "^7.5.8",
     "@types/shelljs": "^0.8.15",
+    "@types/update-notifier": "^6.0.8",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
     "tsup": "^8.1.0",