@eventcatalog/core 2.30.8 → 2.31.1

package/eventcatalog/src/components/MDX/Steps/Steps.astro

@@ -25,3 +25,18 @@ const data = splitByLi(html);
     {data.map((item: any) => <Fragment set:html={item} />)}
   </ol>
 </div>
+
+<script>
+  function applyStepNumbers() {
+    document.querySelectorAll('li[data-step]').forEach((li) => {
+      const stepNumber = li.getAttribute('data-step');
+      const stepSpan = li.querySelector('.step-number div');
+      if (stepSpan) {
+        stepSpan.textContent = stepNumber;
+      }
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', applyStepNumbers);
+  document.addEventListener('astro:page-load', applyStepNumbers);
+</script>

package/eventcatalog/src/components/SideNav/CustomDocsNav/CustomDocsNavWrapper.tsx

@@ -0,0 +1,11 @@
+import CustomDocsNav from './';
+import type { SidebarSection } from './types';
+
+interface CustomDocsNavWrapperProps {
+  sidebarItems: SidebarSection[];
+  currentPath: string;
+}
+
+export default function CustomDocsNavWrapper(props: CustomDocsNavWrapperProps) {
+  return <CustomDocsNav {...props} />;
+}

package/eventcatalog/src/components/SideNav/CustomDocsNav/components/NestedItem.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { buildUrl } from '@utils/url-builder';
+import type { SidebarItem } from '../types';
+
+interface NestedItemProps {
+  item: SidebarItem;
+  currentPath: string;
+  parentId: string;
+  itemIndex: number;
+  collapsedGroups: { [key: string]: boolean };
+  toggleGroupCollapse: (group: string) => void;
+}
+
+const NestedItem: React.FC<NestedItemProps> = ({
+  item,
+  currentPath,
+  parentId,
+  itemIndex,
+  collapsedGroups,
+  toggleGroupCollapse,
+}) => {
+  const hasNestedItems = item.items && item.items.length > 0;
+  const itemId = `${parentId}-${itemIndex}`;
+
+  if (hasNestedItems && item.items) {
+    return (
+      <div className="py-1">
+        <div className="flex items-center">
+          <button
+            className="p-1 hover:bg-gray-100 rounded-md"
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleGroupCollapse(`nested-${itemId}`);
+            }}
+          >
+            <div className={`transition-transform duration-150 ${collapsedGroups[`nested-${itemId}`] ? '' : 'rotate-180'}`}>
+              <svg
+                className="h-3 w-3 text-gray-500"
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </div>
+          </button>
+          <button
+            className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleGroupCollapse(`nested-${itemId}`);
+            }}
+          >
+            <span className="truncate">{item.label}</span>
+          </button>
+        </div>
+
+        <div
+          className={`overflow-hidden transition-[height] duration-150 ease-out ${
+            collapsedGroups[`nested-${itemId}`] ? 'h-0' : 'h-auto'
+          }`}
+        >
+          <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+            {item.items.map((nestedItem: SidebarItem, nestedIndex: number) => {
+              if (nestedItem.items && nestedItem.items.length > 0) {
+                // Recursively render deeper nested items
+                const nestedItemId = `${itemId}-${nestedIndex}`;
+                return (
+                  <div className="py-1" key={`nested-${nestedItemId}`}>
+                    <div className="flex items-center">
+                      <button
+                        className="p-1 hover:bg-gray-100 rounded-md"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleGroupCollapse(`nested-${nestedItemId}`);
+                        }}
+                      >
+                        <div
+                          className={`transition-transform duration-150 ${collapsedGroups[`nested-${nestedItemId}`] ? '' : 'rotate-180'}`}
+                        >
+                          <svg
+                            className="h-3 w-3 text-gray-500"
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          >
+                            <polyline points="6 9 12 15 18 9" />
+                          </svg>
+                        </div>
+                      </button>
+                      <button
+                        className="flex-grow flex items-center px-2 py-1 text-xs font-medium text-gray-700 rounded-md hover:bg-purple-50"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleGroupCollapse(`nested-${nestedItemId}`);
+                        }}
+                      >
+                        <span className="truncate">{nestedItem.label}</span>
+                      </button>
+                    </div>
+
+                    <div
+                      className={`overflow-hidden transition-[height] duration-150 ease-out ${
+                        collapsedGroups[`nested-${nestedItemId}`] ? 'h-0' : 'h-auto'
+                      }`}
+                    >
+                      <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+                        {nestedItem.items.map((deepNestedItem: SidebarItem, deepIndex: number) => {
+                          const deepNestedItemPath = deepNestedItem.slug ? buildUrl(`/docs/custom/${deepNestedItem.slug}`) : '#';
+                          const isDeepActive =
+                            currentPath === deepNestedItemPath || currentPath.endsWith(`/${deepNestedItem.slug}`);
+
+                          return (
+                            <a
+                              key={`deep-${nestedItemId}-${deepIndex}`}
+                              href={deepNestedItemPath}
+                              className={`flex items-center px-2 py-1.5 text-xs ${isDeepActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
+                              data-active={isDeepActive}
+                            >
+                              <span className="truncate">{deepNestedItem.label}</span>
+                            </a>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                );
+              }
+
+              const nestedItemPath = nestedItem.slug ? buildUrl(`/docs/custom/${nestedItem.slug}`) : '#';
+              const isActive = currentPath === nestedItemPath || currentPath.endsWith(`/${nestedItem.slug}`);
+
+              return (
+                <a
+                  key={`nested-link-${itemId}-${nestedIndex}`}
+                  href={nestedItemPath}
+                  className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
+                  data-active={isActive}
+                >
+                  <span className="truncate">{nestedItem.label}</span>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const itemPath = item.slug ? buildUrl(`/docs/custom/${item.slug}`) : '#';
+  const isActive = currentPath === itemPath || currentPath.endsWith(`/${item.slug}`);
+
+  return (
+    <a
+      href={itemPath}
+      className={`flex items-center px-2 py-1.5 text-xs ${isActive ? 'bg-purple-100 text-purple-900 font-medium' : 'text-gray-600 hover:bg-purple-100'} rounded-md`}
+      data-active={isActive}
+    >
+      <span className="truncate">{item.label}</span>
+      {item.badge && item?.badge?.text && (
+        <span
+          className={`text-${item.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${item.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+        >
+          {item.badge.text}
+        </span>
+      )}
+    </a>
+  );
+};
+
+export default React.memo(NestedItem);

package/eventcatalog/src/components/SideNav/CustomDocsNav/components/NoResultsFound.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface NoResultsFoundProps {
+  searchTerm: string;
+}
+
+const NoResultsFound: React.FC<NoResultsFoundProps> = ({ searchTerm }) => (
+  <div className="px-4 py-6 text-center">
+    <div className="text-gray-400 text-sm mb-2">No results found for "{searchTerm}"</div>
+    <div className="text-gray-400 text-xs">
+      Try:
+      <ul className="mt-2 space-y-1 text-left list-disc pl-4">
+        <li>Checking for typos</li>
+        <li>Using fewer keywords</li>
+        <li>Using more general terms</li>
+      </ul>
+    </div>
+  </div>
+);
+
+export default React.memo(NoResultsFound);

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

@@ -0,0 +1,250 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { buildUrl } from '@utils/url-builder';
+import type { CustomDocsNavProps, SidebarSection, SidebarItem } from './types';
+import NestedItem from './components/NestedItem';
+import NoResultsFound from './components/NoResultsFound';
+
+const STORAGE_KEY = 'EventCatalog:customDocsSidebarCollapsedGroups';
+const DEBOUNCE_DELAY = 300; // 300ms debounce delay
+
+const CustomDocsNav: React.FC<CustomDocsNavProps> = ({ sidebarItems, currentPath }) => {
+  const navRef = useRef<HTMLElement>(null);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = window.localStorage.getItem(STORAGE_KEY);
+      setIsInitialized(true);
+      return saved ? JSON.parse(saved) : {};
+    }
+    return {};
+  });
+
+  // Set up debounced search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearchTerm(searchTerm.toLowerCase());
+    }, DEBOUNCE_DELAY);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
+  // Filter sidebar items based on search term
+  const filteredSidebarItems = useMemo(() => {
+    if (!debouncedSearchTerm) return sidebarItems;
+
+    const matchesSearchTerm = (text: string) => text.toLowerCase().includes(debouncedSearchTerm);
+
+    // Helper function to check if an item or any of its nested items match the search term
+    const itemContainsSearchTerm = (item: SidebarItem): boolean => {
+      if (matchesSearchTerm(item.label)) return true;
+
+      if (item.items && item.items.length > 0) {
+        return item.items.some(itemContainsSearchTerm);
+      }
+
+      return false;
+    };
+
+    return sidebarItems
+      .map((section) => {
+        if (!section.items) {
+          return matchesSearchTerm(section.label) ? section : null;
+        }
+
+        const filteredItems = section.items.filter(itemContainsSearchTerm);
+
+        if (filteredItems.length > 0 || matchesSearchTerm(section.label)) {
+          return {
+            ...section,
+            items: filteredItems,
+          };
+        }
+
+        return null;
+      })
+      .filter(Boolean) as SidebarSection[];
+  }, [sidebarItems, debouncedSearchTerm]);
+
+  // Auto-expand groups when searching
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      // Expand all groups when searching
+      const newCollapsedState = { ...collapsedGroups };
+      Object.keys(newCollapsedState).forEach((key) => {
+        newCollapsedState[key] = false;
+      });
+      setCollapsedGroups(newCollapsedState);
+    }
+  }, [debouncedSearchTerm]);
+
+  // Store collapsed groups in local storage
+  useEffect(() => {
+    if (typeof window !== 'undefined' && isInitialized) {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
+    }
+  }, [collapsedGroups, isInitialized]);
+
+  // Initialize collapsed state from section config
+  useEffect(() => {
+    if (isInitialized && sidebarItems && sidebarItems.length > 0) {
+      const initialState = { ...collapsedGroups };
+
+      sidebarItems.forEach((section, index) => {
+        const sectionKey = `section-${index}`;
+        if (section.collapsed !== undefined && initialState[sectionKey] === undefined) {
+          initialState[sectionKey] = section.collapsed;
+        }
+      });
+
+      setCollapsedGroups(initialState);
+    }
+  }, [sidebarItems, isInitialized]);
+
+  // If we find a data-active element, scroll to it on mount
+  useEffect(() => {
+    const activeElement = document.querySelector('[data-active="true"]');
+    if (activeElement) {
+      // Add y offset to the scroll position
+      setTimeout(() => {
+        activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }, 300);
+    }
+  }, []);
+
+  const toggleGroupCollapse = useCallback((group: string) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [group]: !prev[group],
+    }));
+  }, []);
+
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  }, []);
+
+  if (!isInitialized) return null;
+
+  const hasNoResults = debouncedSearchTerm && filteredSidebarItems.length === 0;
+
+  return (
+    <nav ref={navRef} className="h-full text-gray-800 pt-2">
+      <div className="mb-2 px-4">
+        <input
+          type="text"
+          value={searchTerm}
+          onChange={handleSearchChange}
+          placeholder="Quick search..."
+          className="w-full p-2 text-sm rounded-md border border-gray-200 h-[30px]"
+        />
+      </div>
+
+      <div className="space-y-2 divide-y divide-gray-100/40">
+        {hasNoResults ? (
+          <NoResultsFound searchTerm={debouncedSearchTerm} />
+        ) : (
+          filteredSidebarItems.map((section: SidebarSection, index: number) => (
+            <div className="pt-2 pb-2 px-4" key={`section-${index}`}>
+              <div className="space-y-0" data-section={`section-${index}`}>
+                {section.items ? (
+                  <div className="flex items-center">
+                    <button
+                      className="p-1 hover:bg-gray-100 rounded-md"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse(`section-${index}`);
+                      }}
+                    >
+                      <div
+                        className={`transition-transform duration-150 ${collapsedGroups[`section-${index}`] ? '' : 'rotate-180'}`}
+                      >
+                        <svg
+                          className="h-3 w-3 text-gray-500"
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                        >
+                          <polyline points="6 9 12 15 18 9" />
+                        </svg>
+                      </div>
+                    </button>
+                    <button
+                      className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md hover:bg-purple-50"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse(`section-${index}`);
+                      }}
+                    >
+                      <span className="truncate">{section.label}</span>
+                      {section.badge && section?.badge?.text && (
+                        <span
+                          className={`text-${section.badge.color || 'purple'}-600 ml-2 text-[10px] font-medium bg-${section.badge.color || 'purple'}-50 px-2 py-0.5 rounded uppercase`}
+                        >
+                          {section.badge.text}
+                        </span>
+                      )}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="flex items-center">
+                    <span className="flex-grow flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md">
+                      <span className="truncate">{section.label}</span>
+                      <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded uppercase">
+                        Section
+                      </span>
+                    </span>
+                  </div>
+                )}
+
+                {section.items && (
+                  <div
+                    className={`overflow-hidden transition-[height] duration-150 ease-out ${
+                      collapsedGroups[`section-${index}`] ? 'h-0' : 'h-auto'
+                    }`}
+                  >
+                    <div className="space-y-0.5 border-gray-200/80 border-l pl-4 ml-[9px] mt-1">
+                      {section.items.map((item: SidebarItem, itemIndex: number) => (
+                        <NestedItem
+                          key={`item-${index}-${itemIndex}`}
+                          item={item}
+                          currentPath={currentPath}
+                          parentId={`${index}`}
+                          itemIndex={itemIndex}
+                          collapsedGroups={collapsedGroups}
+                          toggleGroupCollapse={toggleGroupCollapse}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {section.slug && !section.items && (
+                  <a
+                    href={buildUrl(`/docs/custom/${section.slug}`)}
+                    className={`flex items-center px-2 py-1.5 text-xs ${
+                      currentPath.endsWith(`/${section.slug}`)
+                        ? 'bg-purple-100 text-purple-900 font-medium'
+                        : 'text-gray-600 hover:bg-purple-100'
+                    } rounded-md ml-6`}
+                    data-active={currentPath.endsWith(`/${section.slug}`)}
+                  >
+                    <span className="truncate">{section.label}</span>
+                  </a>
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </nav>
+  );
+};
+
+export default React.memo(CustomDocsNav);

package/eventcatalog/src/components/SideNav/CustomDocsNav/types.ts

@@ -0,0 +1,29 @@
+export interface SidebarItem {
+  label: string;
+  slug?: string;
+  items?: SidebarItem[];
+  badge?: {
+    text: string;
+    color: string;
+  };
+  collapsed?: boolean;
+}
+
+export interface SidebarSection {
+  label: string;
+  items?: SidebarItem[];
+  slug?: string;
+  autogenerated?: {
+    directory: string;
+  };
+  badge?: {
+    text: string;
+    color: string;
+  };
+  collapsed?: boolean;
+}
+
+export interface CustomDocsNavProps {
+  sidebarItems: SidebarSection[];
+  currentPath: string;
+}

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

@@ -0,0 +1,9 @@
+---
+import { getNavigationItems } from '@enterprise/custom-documentation/utils/custom-docs';
+import CustomDocsNavWrapper from '@enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNavWrapper';
+
+const currentPath = Astro.url.pathname;
+const sidebarItems = await getNavigationItems();
+---
+
+<CustomDocsNavWrapper client:load sidebarItems={sidebarItems} currentPath={currentPath} />

package/eventcatalog/src/content.config.ts

@@ -1,8 +1,10 @@
 import { z, defineCollection, reference } from 'astro:content';
 import { glob } from 'astro/loaders';
 import { v4 as uuidv4 } from 'uuid';
+import { badge, ownerReference } from './shared-collections';
+import { customPagesSchema } from './enterprise/custom-documentation/collection';
 
-const projectDirBase = (() => {
+export const projectDirBase = (() => {
   if (process.platform === 'win32') {
     const projectDirPath = process.env.PROJECT_DIR!.replace(/\\/g, '/');
     return projectDirPath.startsWith('/') ? projectDirPath : `/${projectDirPath}`;
@@ -10,12 +12,6 @@ const projectDirBase = (() => {
   return process.env.PROJECT_DIR;
 })();
 
-const badge = z.object({
-  content: z.string(),
-  backgroundColor: z.string(),
-  textColor: z.string(),
-});
-
 const pages = defineCollection({
   loader: glob({
     pattern: ['**/pages/*.(md|mdx)'],
@@ -64,23 +60,6 @@ const changelogs = defineCollection({
   }),
 });
 
-// Create a union type for owners
-const ownerReference = z
-  .union([
-    // The ID of the user or team
-    z.string(),
-    // The full object with the ID and collection (keep compatibility with `reference`)
-    z.object({
-      id: z.string(),
-      collection: z.enum(['users', 'teams']),
-    }),
-  ])
-  .transform(
-    // This transformation is needed to keep compatibility with `reference`.
-    // The utilities `getTeams` and `getUsers` rely on this transformation.
-    (lookup) => ({ id: typeof lookup === 'string' ? lookup : lookup.id })
-  );
-
 const baseSchema = z.object({
   id: z.string(),
   name: z.string(),
@@ -283,6 +262,15 @@ const services = defineCollection({
     .merge(baseSchema),
 });
 
+const customPages = defineCollection({
+  loader: glob({
+    // any number of child folders
+    pattern: ['docs/*.(md|mdx)', 'docs/**/*.@(md|mdx)'],
+    base: projectDirBase,
+  }),
+  schema: customPagesSchema,
+});
+
 const domains = defineCollection({
   loader: glob({
     pattern: [
@@ -405,4 +393,7 @@ export const collections = {
   pages,
   changelogs,
   ubiquitousLanguages,
+
+  // EventCatalog Pro Collections
+  customPages,
 };

package/eventcatalog/src/enterprise/collections/custom-pages.ts

@@ -0,0 +1,19 @@
+import { glob } from 'astro/loaders';
+import { z, defineCollection } from 'astro:content';
+import { projectDirBase } from '../../content.config';
+
+export const customPages = defineCollection({
+  loader: glob({
+    pattern: ['docs/hello-world.mdx'],
+    base: projectDirBase,
+  }),
+  schema: z.object({
+    id: z.string(),
+    title: z.string(),
+    description: z.string(),
+    sidebar: z.object({
+      label: z.string(),
+      order: z.number(),
+    }),
+  }),
+});

package/eventcatalog/src/enterprise/custom-documentation/collection.ts

@@ -0,0 +1,16 @@
+import { z } from 'astro:content';
+import { badge, ownerReference } from '../../shared-collections';
+
+export const customPagesSchema = z.object({
+  title: z.string(),
+  description: z.string(),
+  slug: z.string().optional(),
+  sidebar: z
+    .object({
+      label: z.string(),
+      order: z.number(),
+    })
+    .optional(),
+  owners: z.array(ownerReference).optional(),
+  badges: z.array(badge).optional(),
+});

package/eventcatalog/src/enterprise/custom-documentation/components/CustomDocsNav/CustomDocsNavWrapper.tsx

@@ -0,0 +1,11 @@
+import CustomDocsNav from './';
+import type { SidebarSection } from './types';
+
+interface CustomDocsNavWrapperProps {
+  sidebarItems: SidebarSection[];
+  currentPath: string;
+}
+
+export default function CustomDocsNavWrapper(props: CustomDocsNavWrapperProps) {
+  return <CustomDocsNav {...props} />;
+}