@eventcatalog/core 2.2.6 → 2.3.0

package/.github/workflows/verify-build.yml

@@ -22,5 +22,7 @@ jobs:
           node-version: '20.x'
       - name: Installation
         run: npm i
+      - name: Test
+        run: npm run test:ci
       - name: Build
         run: npm run verify-build:catalog

package/.prettierrc

@@ -1,10 +1,18 @@
 {
-    "semi": true,
-    "singleQuote": true,
-    "printWidth": 130,
-    "tabWidth": 2,
-    "useTabs": false,
-    "trailingComma": "es5",
-    "bracketSpacing": true
-  }
-  
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 130,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.3.0
+
+### Minor Changes
+
+- d662cb1: feat(core): added custom component support for eventcatalog
+
+## 2.2.7
+
+### Patch Changes
+
+- d7148fa: chore(core): fixed long labels on the documentation sidebar
+
 ## 2.2.6
 
 ### Patch Changes

package/README.md

@@ -2,6 +2,12 @@
 
 <h1>📖 EventCatalog</h1>
 
+[![MIT License][license-badge]][license]
+[![PRs Welcome][prs-badge]][prs]
+<img src="https://img.shields.io/github/actions/workflow/status/event-catalog/eventcatalog/verify-build.yml"/>
+[![Star on GitHub][github-star-badge]][github-star]
+
+
 
 <!-- [![Star on GitHub][github-star-badge]][github-star] -->
 <!-- <h3>Bring discoverability to your -->
@@ -10,9 +16,7 @@
 
 <!-- [![MIT License][license-badge]][license] -->
 <!-- [![PRs Welcome][prs-badge]][prs] -->
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-41-orange.svg?style=flat-square)](#contributors-)
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
 
 <!-- [![Watch on GitHub][github-watch-badge]][github-watch] -->
 <!-- [![Star on GitHub][github-star-badge]][github-star] -->
@@ -23,9 +27,9 @@
 
 <h4>Features: Documentation generator for Event Driven Architectures, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
 
-[![MIT License][license-badge]][license]
-[![PRs Welcome][prs-badge]][prs]
-[![All Contributors](https://img.shields.io/badge/all_contributors-37-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-41-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [Read the Docs](https://eventcatalog.dev/) | [Edit the Docs](https://github.com/event-catalog/docs) | [View Demo](https://demo.eventcatalog.dev/docs)
 
@@ -216,4 +220,4 @@ You can find more [details on our website](https://eventcatalog.dev/support).
 
 # License
 
-MIT.
+MIT.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.2.6",
+  "version": "2.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -13,7 +13,8 @@
     "dev:local": "concurrently \"node scripts/watcher.js\" \"astro dev\"",
     "build:bin": "tsup",
     "prepublishOnly": "npm run build:bin",
-    "test": "jest --config=$(pwd)/../../jest.config.js",
+    "test": "vitest --config vitest.config.ts",
+    "test:ci": "node scripts/ci/test.js",
     "start": "astro dev",
     "build": "npm run scripts:hydrate-content && astro check --minimumSeverity error && astro build",
     "build:cd": "node scripts/build-ci.js",
@@ -25,8 +26,8 @@
     "changeset": "changeset",
     "generate": "node scripts/generate.js",
     "release": "changeset publish",
-    "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json}\"",
-    "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,json}\""
+    "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json,astro}\"",
+    "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,json,astro}\""
   },
   "dependencies": {
     "@astrojs/check": "^0.7.0",
@@ -63,15 +64,16 @@
   },
   "devDependencies": {
     "@parcel/watcher": "^2.4.1",
-    "@types/jest": "^29.5.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "commander": "^12.1.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "jest": "^29.7.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "rimraf": "^5.0.7",
-    "tsup": "^8.1.0"
+    "tsup": "^8.1.0",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^2.0.5"
   }
 }

package/scripts/catalog-to-astro-content-directory.js

@@ -97,6 +97,23 @@ const copyFiles = async ({ source, target, catalogFilesDir, pathToMarkdownFiles,
   }
 };
 
+const copyComponents = async ({ source, target }) => {
+  const componentsDir = path.join(source, 'components');
+  const componentsTarget = path.join(target, '../custom-defined-components');
+
+  // Clear the component directory before we copy files over
+  if (fs.existsSync(componentsTarget)) {
+    await fs.rmSync(componentsTarget, { recursive: true });
+  }
+
+  if (!fs.existsSync(componentsDir) || !fs.statSync(componentsDir).isDirectory()) {
+    return;
+  }
+
+  // Copy files
+  await fs.cpSync(componentsDir, componentsTarget, { recursive: true });
+};
+
 export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) => {
   // Config file
   const astroConfigFile = fs.readFileSync(path.join(astroContentDir, 'config.ts'));
@@ -211,6 +228,9 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
     pathToAllFiles: [],
     type: 'pages',
   });
+
+  // Copy the components if they are defined
+  await copyComponents({ source, target: astroContentDir, catalogFilesDir });
 };
 
 if (process.env.NODE_ENV !== 'test') {

package/scripts/ci/test.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+/**
+ * Script for GitHub Actions
+ * Sets up the project with required files
+ */
+
+import { join } from 'node:path';
+import fs from 'fs';
+import { execSync } from 'node:child_process';
+
+const args = process.argv.slice(2);
+const catalog = args[0] || 'default';
+
+const catalogDir = join(process.cwd());
+const projectDIR = join(process.cwd(), `/examples/${catalog}`);
+
+fs.copyFileSync(join(projectDIR, 'eventcatalog.config.js'), join(catalogDir, 'eventcatalog.config.js'));
+fs.copyFileSync(join(projectDIR, 'eventcatalog.styles.css'), join(catalogDir, 'eventcatalog.styles.css'));
+
+execSync(`cross-env NODE_ENV=test PROJECT_DIR=${projectDIR} CATALOG_DIR=${catalogDir} npm run test`, {
+  cwd: catalogDir,
+  stdio: 'inherit',
+});

package/scripts/watcher.js

@@ -2,6 +2,7 @@
 import watcher from '@parcel/watcher';
 import path from 'path';
 import fs from 'fs';
+import os from 'os';
 
 // Where the users project is located
 const projectDirectory = process.env.PROJECT_DIR || process.cwd();
@@ -10,7 +11,7 @@ const catalogDirectory = process.env.CATALOG_DIR;
 
 const contentPath = path.join(catalogDirectory, 'src', 'content');
 
-const watchList = ['domains', 'commands', 'events', 'services', 'teams', 'users', 'pages'];
+const watchList = ['domains', 'commands', 'events', 'services', 'teams', 'users', 'pages', 'components'];
 // const absoluteWatchList = watchList.map((item) => path.join(projectDirectory, item));
 
 // confirm folders exist before watching them
@@ -35,20 +36,27 @@ for (let item of [...verifiedWatchList]) {
       // Check if changlogs, they need to go into their own content folder
       if (file.includes('changelog.md')) {
         newPath = newPath.replace('src/content', 'src/content/changelogs');
-
         if (os.platform() == 'win32') {
           newPath = newPath.replace('src\\content', 'src\\content\\changelogs');
         }
       }
 
+      // Check if its a component, need to move to the correct location
+      if (newPath.includes('components')) {
+        newPath = newPath.replace('src/content/components', 'src/custom-defined-components');
+        if (os.platform() == 'win32') {
+          newPath = newPath.replace('src\\content\\components', 'src\\custom-defined-components');
+        }
+      }
+
       // If config files have changes
       if (eventPath.includes('eventcatalog.config.js') || eventPath.includes('eventcatalog.styles.css')) {
         fs.cpSync(eventPath, path.join(catalogDirectory, file));
         return;
       }
 
-      // If markdown files copy file over to the required location
-      if (eventPath.endsWith('.md') && type === 'update') {
+      // If markdown files or astro files copy file over to the required location
+      if ((eventPath.endsWith('.md') || eventPath.endsWith('.astro')) && type === 'update') {
         fs.cpSync(eventPath, newPath);
       }
 

package/src/components/DocsNavigation.astro

@@ -21,13 +21,20 @@ const messages = [...events, ...commands];
 const allData = [...domains, ...services, ...messages, ...teams, ...users];
 
 const eventCatalogConfig = config as CatalogConfig;
-const { services: servicesConfig, domains: domainsConfig, messages: messagesConfig, teams: teamsConfig, users: usersConfig, showPageHeadings = true  } = eventCatalogConfig?.docs?.sidebar || {};
-
-const getConfigValue = (obj: any, key:string, defaultValue: any) => {
+const {
+  services: servicesConfig,
+  domains: domainsConfig,
+  messages: messagesConfig,
+  teams: teamsConfig,
+  users: usersConfig,
+  showPageHeadings = true,
+} = eventCatalogConfig?.docs?.sidebar || {};
+
+const getConfigValue = (obj: any, key: string, defaultValue: any) => {
   return obj?.[key] ?? defaultValue;
-}
+};
 
-const visibleCollections: {[key:string]: boolean} = {
+const visibleCollections: { [key: string]: boolean } = {
   events: getConfigValue(messagesConfig, 'visible', true),
   commands: getConfigValue(messagesConfig, 'visible', true),
   domains: getConfigValue(domainsConfig, 'visible', true),
@@ -38,20 +45,17 @@ const visibleCollections: {[key:string]: boolean} = {
 
 const fetchHeadings = allData.map(async (item) => {
   const renderHeadings = showPageHeadings;
-  const headings = renderHeadings ? await item.render() : { headings: []};
+  const headings = renderHeadings ? await item.render() : { headings: [] };
   return {
     ...item,
     headings: headings.headings,
   };
 });
 
-
-
-const withHeadings =  await Promise.all(fetchHeadings);
+const withHeadings = await Promise.all(fetchHeadings);
 
 const sideNav = withHeadings.reduce((acc, item) => {
-
-  const title = (item.collection === 'events' || item.collection === 'commands') ? 'Messages' : item.collection;
+  const title = item.collection === 'events' || item.collection === 'commands' ? 'Messages' : item.collection;
 
   const group = acc[title] || [];
 
@@ -61,7 +65,10 @@ const sideNav = withHeadings.reduce((acc, item) => {
     items: item.collection === 'users' ? [] : item.headings,
     visible: visibleCollections[item.collection],
     // @ts-ignore
-    href: item.data.version ? buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`) : buildUrl(`/docs/${item.collection}/${item.data.id}`),
+    href: item.data.version
+      ? // @ts-ignore
+        buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`)
+      : buildUrl(`/docs/${item.collection}/${item.data.id}`),
   };
 
   group.push(navigationItem);
@@ -73,23 +80,29 @@ const sideNav = withHeadings.reduce((acc, item) => {
 }, {} as any);
 
 const currentPath = Astro.url.pathname;
-
 ---
 
-<div class="font-light w-full xl:pr-10 pb-20 ">
+<div class="font-light w-full xl:pr-10 pb-20">
   {
     Object.keys(sideNav).map((key) => {
       const collection = sideNav[key];
-      if(collection[0] && collection[0].visible === false) return null;
+      if (collection[0] && collection[0].visible === false) return null;
       return (
         <ul class=" w-full space-y-2 pb-8">
           <li class="font-semibold capitalize ">{key}</li>
           {collection.map((item: any) => {
             return (
-                <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href} >
-                  <a class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`} href={`${item.href}`}>
-                  <span class="block">{item.label}</span>
-                    {item.version && <span class="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">v{item.version}</span>}
+              <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href}>
+                <a
+                  class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`}
+                  href={`${item.href}`}
+                >
+                  <span class="block truncate !whitespace-normal">{item.label}</span>
+                  {item.version && (
+                    <span class="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">
+                      v{item.version}
+                    </span>
+                  )}
                 </a>
                 <ul class="hidden xl:block px-4  text-gray-500 text-md space-y-2  ">
                   {item.items.map((heading: any) => {
@@ -121,10 +134,6 @@ const currentPath = Astro.url.pathname;
         block: 'start',
         inline: 'start',
       });
-
-      // currentElement.scrollIntoView({
-      //   behavior: 'auto'
-      // });
     }
   });
-</script>
+</script>

package/src/components/Header.astro

@@ -17,16 +17,16 @@ const navItems = [
   {
     label: 'Discover',
     href: buildUrl('/discover/events'),
-  }
+  },
 ];
 
 const logo = {
   src: ('/' + (catalog?.logo?.src || 'logo.png')).replace(/^\/+/, '/'), // replace the leading slashes with a single one
   alt: catalog?.logo?.alt || 'Event Catalog',
-  text: catalog?.logo?.text || "EventCatalog"
-}
-
+  text: catalog?.logo?.text || 'EventCatalog',
+};
 ---
+
 <nav class="md:fixed top-0 w-full z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl max-w-[70em]">
   <div class="flex justify-between items-center">
     <div class="w-1/3 flex space-x-2 items-center">
@@ -57,14 +57,17 @@ const logo = {
     </div> -->
     <div class="w-1/3 justify-end text-md">
       <ul class="text-right flex justify-end space-x-8">
-        {navItems.map((item) => {
-          const isActive = currentPath.includes(item.href) ;
-          return <li class={`font-light ${isActive ? 'border-b-2 border-purple-500': ''}`}>
-          <a href={item.href}>{item.label}</a>
-        </li>
-        })}
+        {
+          navItems.map((item) => {
+            const isActive = currentPath.includes(item.href);
+            return (
+              <li class={`font-light ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
+                <a href={item.href}>{item.label}</a>
+              </li>
+            );
+          })
+        }
       </ul>
     </div>
   </div>
 </nav>
-

package/src/components/Lists/VersionList.astro

@@ -4,34 +4,46 @@ import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 
 interface Props {
-  versions: string[]
-  collectionItem: CollectionEntry<CollectionTypes>
+  versions: string[];
+  collectionItem: CollectionEntry<CollectionTypes>;
 }
 
 const { versions, collectionItem } = Astro.props;
 const currentPath = Astro.url.pathname;
-
 ---
 
 <div class="space-y-2 my-2 mb-8">
-  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize">Versions ({collectionItem.data.versions?.length})</span>
-  <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs"> 
-    {versions.map((version) => {
-      const isCurrent = currentPath.includes(version);
-      return <option selected={isCurrent} value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)} class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}>
-        <span>
-          v{version} 
-          {version === collectionItem.data.latestVersion && <span>(latest)</span>}
-        </span>
-      </option>
-    })}
+  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize"
+    >Versions ({collectionItem.data.versions?.length})</span
+  >
+  <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs">
+    {
+      versions.map((version) => {
+        const isCurrent = currentPath.includes(version);
+        return (
+          <option
+            selected={isCurrent}
+            value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)}
+            class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}
+          >
+            <span>
+              v{version}
+              {version === collectionItem.data.latestVersion && <span>(latest)</span>}
+            </span>
+          </option>
+        );
+      })
+    }
   </select>
-  <a href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.latestVersion}/changelog`)} class="text-[10px] text-gray-500">View changelogs</a>
+  <a
+    href={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.latestVersion}/changelog`)}
+    class="text-[10px] text-gray-500">View changelogs</a
+  >
 </div>
 
 <script>
   document.getElementById('version')?.addEventListener('change', (e: any) => {
-    if (!e.target) return
+    if (!e.target) return;
     window.location.href = e.target.value;
-  })
+  });
 </script>

package/src/components/MDX/Accordion/Accordion.astro

@@ -1,9 +1,8 @@
 ---
-import AccordionClient from './Accordion'
-const {...props } = Astro.props;
+import AccordionClient from './Accordion';
+const { ...props } = Astro.props;
 ---
 
-<AccordionClient {...props} client:load> 
-    <slot />
-</AccordionClient> 
-
+<AccordionClient {...props} client:load>
+  <slot />
+</AccordionClient>

package/src/components/MDX/Accordion/AccordionGroup.astro

@@ -1,4 +1,5 @@
 ---
+
 ---
 
 <div class="accordian-group border border-gray-200 rounded-md shadow-sm accordion my-2">

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -5,7 +5,6 @@ import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node
 import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
 
-
 interface Props {
   id: string;
   collection: string;
@@ -19,7 +18,7 @@ interface Props {
   };
 }
 
-const { id, collection, title, mode = 'simple', linkTo='docs', version, href } = Astro.props;
+const { id, collection, title, mode = 'simple', linkTo = 'docs', version, href } = Astro.props;
 let nodes = [],
   edges = [];
 
@@ -56,7 +55,7 @@ if (collection === 'commands') {
   edges = eventEdges;
 }
 
-if(collection === 'domains'){
+if (collection === 'domains') {
   const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForDomain({
     id: id,
     version,
@@ -66,17 +65,23 @@ if(collection === 'domains'){
   nodes = eventNodes;
   edges = eventEdges;
 }
-
-
-
 ---
 
 <div>
-  <NodeGraphNew id={id} nodes={nodes} edges={edges} title={title} hrefLabel={href.label} href={href.url} linkTo={linkTo} client:load />
+  <NodeGraphNew
+    id={id}
+    nodes={nodes}
+    edges={edges}
+    title={title}
+    hrefLabel={href.label}
+    href={href.url}
+    linkTo={linkTo}
+    client:load
+  />
 </div>
 
 <style is:global>
   .react-flow__attribution {
     display: none;
   }
-</style>
+</style>