@eventcatalog/core 4.2.2 → 4.2.3

package/dist/analytics/analytics.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(analytics_exports);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.2.2";
+var version = "4.2.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-ZGQNCIRW.js";
-import "../chunk-A5LDEHRI.js";
+} from "../chunk-WOASLQ3F.js";
+import "../chunk-DGDCWOWP.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -140,7 +140,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "4.2.2";
+var version = "4.2.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,9 +1,9 @@
 import {
   log_build_default
-} from "../chunk-HIQ22EHS.js";
+} from "../chunk-QQC5UX3E.js";
 import "../chunk-K2XIENVT.js";
-import "../chunk-ZGQNCIRW.js";
-import "../chunk-A5LDEHRI.js";
+import "../chunk-WOASLQ3F.js";
+import "../chunk-DGDCWOWP.js";
 import "../chunk-6QENHZZP.js";
 export {
   log_build_default as default

package/dist/{chunk-A5LDEHRI.js → chunk-DGDCWOWP.js}

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

package/dist/{chunk-JV33GNVZ.js → chunk-I4TTHHXI.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-Z2CMR4HM.js";
+} from "./chunk-M2YEUPPP.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-Z2CMR4HM.js → chunk-M2YEUPPP.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-A5LDEHRI.js";
+} from "./chunk-DGDCWOWP.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-HIQ22EHS.js → chunk-QQC5UX3E.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-K2XIENVT.js";
 import {
   raiseEvent
-} from "./chunk-ZGQNCIRW.js";
+} from "./chunk-WOASLQ3F.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-ZGQNCIRW.js → chunk-WOASLQ3F.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-A5LDEHRI.js";
+} from "./chunk-DGDCWOWP.js";
 
 // src/analytics/analytics.js
 import os from "os";

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -144,7 +144,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.2.2";
+var version = "4.2.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -1,6 +1,6 @@
 import {
   log_build_default
-} from "./chunk-HIQ22EHS.js";
+} from "./chunk-QQC5UX3E.js";
 import "./chunk-K2XIENVT.js";
 import {
   runMigrations
@@ -14,10 +14,10 @@ import {
 } from "./chunk-B7HCX5HM.js";
 import {
   generate
-} from "./chunk-JV33GNVZ.js";
+} from "./chunk-I4TTHHXI.js";
 import {
   logger
-} from "./chunk-Z2CMR4HM.js";
+} from "./chunk-M2YEUPPP.js";
 import {
   resolve_catalog_dependencies_default
 } from "./chunk-LHR4G2UO.js";
@@ -27,7 +27,7 @@ import {
 import {
   watch
 } from "./chunk-CAJUIMDJ.js";
-import "./chunk-ZGQNCIRW.js";
+import "./chunk-WOASLQ3F.js";
 import {
   createAstroDevLineFilter,
   createAstroLineFilter
@@ -38,7 +38,7 @@ import {
 import "./chunk-W5JQON7Z.js";
 import {
   VERSION
-} from "./chunk-A5LDEHRI.js";
+} from "./chunk-DGDCWOWP.js";
 import {
   linkCoreNodeModules,
   resolveInstalledCoreNodeModules

package/dist/generate.cjs

@@ -108,7 +108,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.2.2";
+var version = "4.2.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-JV33GNVZ.js";
-import "./chunk-Z2CMR4HM.js";
-import "./chunk-A5LDEHRI.js";
+} from "./chunk-I4TTHHXI.js";
+import "./chunk-M2YEUPPP.js";
+import "./chunk-DGDCWOWP.js";
 import "./chunk-6QENHZZP.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "4.2.2";
+var version = "4.2.3";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-Z2CMR4HM.js";
-import "../chunk-A5LDEHRI.js";
+} from "../chunk-M2YEUPPP.js";
+import "../chunk-DGDCWOWP.js";
 export {
   logger
 };

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

@@ -0,0 +1,39 @@
+---
+import CustomPropertyRow from './CustomPropertyRow.astro';
+import { getCustomProperties } from './custom-properties';
+
+interface Props {
+  title?: string;
+  data?: Record<string, unknown>;
+}
+
+const { title = 'Custom properties', data } = Astro.props;
+const properties = getCustomProperties(data);
+---
+
+{
+  properties.length > 0 && (
+    <section class="not-prose my-8">
+      {title && <h3 class="mb-4 text-xl font-semibold text-[rgb(var(--ec-page-text))]">{title}</h3>}
+      <div class="overflow-x-auto">
+        <table class="w-full border-collapse text-left text-sm text-[rgb(var(--ec-page-text-muted))]">
+          <thead>
+            <tr class="border-b border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]">
+              <th scope="col" class="py-3 pr-6 font-semibold">
+                Property
+              </th>
+              <th scope="col" class="py-3 font-semibold">
+                Value
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-[rgb(var(--ec-page-border))]">
+            {properties.map((property) => (
+              <CustomPropertyRow property={property} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  )
+}

package/eventcatalog/src/components/MDX/CustomProperties/CustomProperty.astro

@@ -0,0 +1,37 @@
+---
+import CustomPropertyRow from './CustomPropertyRow.astro';
+import { getCustomProperty } from './custom-properties';
+
+interface Props {
+  name: string;
+  label?: string;
+  data?: Record<string, unknown>;
+}
+
+const { name, label, data } = Astro.props;
+const property = getCustomProperty(data, name);
+
+if (property && label) property.label = label;
+---
+
+{
+  property && (
+    <div class="not-prose my-6 overflow-x-auto">
+      <table class="w-full border-collapse text-left text-sm text-[rgb(var(--ec-page-text-muted))]">
+        <thead>
+          <tr class="border-b border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]">
+            <th scope="col" class="py-3 pr-6 font-semibold">
+              Property
+            </th>
+            <th scope="col" class="py-3 font-semibold">
+              Value
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-[rgb(var(--ec-page-border))]">
+          <CustomPropertyRow property={property} />
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/eventcatalog/src/components/MDX/CustomProperties/CustomPropertyRow.astro

@@ -0,0 +1,37 @@
+---
+import CustomPropertyValue from './CustomPropertyValue.astro';
+import type { CustomProperty } from './custom-properties';
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+
+interface Props {
+  property: CustomProperty;
+}
+
+const { property } = Astro.props;
+---
+
+<tr class="hover:bg-[rgb(var(--ec-content-hover))]">
+  <td class="w-1/3 min-w-48 py-4 pr-6 align-top font-medium text-[rgb(var(--ec-page-text))]">
+    <span class="inline-flex items-center gap-1.5">
+      {property.label}
+      <span class="group relative inline-flex">
+        <button
+          type="button"
+          class="inline-flex cursor-help text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))] focus:outline-hidden focus:ring-2 focus:ring-[rgb(var(--ec-accent))] focus:ring-offset-2"
+          aria-label={`Frontmatter property: ${property.name}`}
+        >
+          <InformationCircleIcon className="h-4 w-4" aria-hidden="true" />
+        </button>
+        <span
+          role="tooltip"
+          class="pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 whitespace-nowrap rounded-md bg-[rgb(var(--ec-page-text))] px-2.5 py-1.5 text-xs font-medium text-[rgb(var(--ec-page-bg))] opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
+        >
+          {property.name}
+        </span>
+      </span>
+    </span>
+  </td>
+  <td class="min-w-0 py-4 align-top text-sm">
+    <CustomPropertyValue value={property.value} />
+  </td>
+</tr>

package/eventcatalog/src/components/MDX/CustomProperties/CustomPropertyValue.astro

@@ -0,0 +1,51 @@
+---
+import { formatCustomPropertyLabel } from './custom-properties';
+
+interface Props {
+  value: unknown;
+}
+
+const { value } = Astro.props;
+const isArray = Array.isArray(value);
+const isDate = value instanceof Date;
+const isObject = value !== null && typeof value === 'object' && !isArray && !isDate;
+const entries = isObject ? Object.entries(value as Record<string, unknown>) : [];
+const scalarValue = value === null || value === undefined ? '—' : isDate ? value.toISOString() : String(value);
+---
+
+{
+  isArray ? (
+    value.length > 0 ? (
+      <ul class="m-0 list-disc space-y-1 pl-5 text-[rgb(var(--ec-page-text))]">
+        {value.map((item) => (
+          <li>
+            <Astro.self value={item} />
+          </li>
+        ))}
+      </ul>
+    ) : (
+      <span class="text-[rgb(var(--ec-page-text-muted))]">—</span>
+    )
+  ) : isObject ? (
+    entries.length > 0 ? (
+      <dl class="m-0 space-y-2">
+        {entries.map(([name, nestedValue]) => (
+          <div class="grid gap-1 sm:grid-cols-[minmax(0,10rem)_minmax(0,1fr)]">
+            <dt class="font-medium text-[rgb(var(--ec-page-text-muted))]">{formatCustomPropertyLabel(name)}</dt>
+            <dd class="m-0 min-w-0 text-[rgb(var(--ec-page-text))]">
+              <Astro.self value={nestedValue} />
+            </dd>
+          </div>
+        ))}
+      </dl>
+    ) : (
+      <span class="text-[rgb(var(--ec-page-text-muted))]">—</span>
+    )
+  ) : typeof value === 'boolean' ? (
+    <span class="inline-flex rounded-full bg-[rgb(var(--ec-content-hover))] px-2 py-0.5 text-xs font-medium text-[rgb(var(--ec-page-text))]">
+      {scalarValue}
+    </span>
+  ) : (
+    <span class="break-words text-[rgb(var(--ec-page-text))]">{scalarValue}</span>
+  )
+}

package/eventcatalog/src/components/MDX/CustomProperties/custom-properties.spec.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest';
+import { formatCustomPropertyLabel, getCustomProperties, getCustomProperty, isCustomPropertyName } from './custom-properties';
+
+describe('custom properties MDX components', () => {
+  it('recognizes extension property names', () => {
+    expect(isCustomPropertyName('x-owner')).toBe(true);
+    expect(isCustomPropertyName('x-')).toBe(false);
+    expect(isCustomPropertyName('owner')).toBe(false);
+  });
+
+  it('creates a readable label without changing uppercase text', () => {
+    expect(formatCustomPropertyLabel('x-operational-tier')).toBe('Operational Tier');
+    expect(formatCustomPropertyLabel('x-PII_classification')).toBe('PII Classification');
+  });
+
+  it('extracts only custom properties and preserves their values', () => {
+    const properties = getCustomProperties({
+      id: 'payment-api',
+      'x-operational-tier': 1,
+      'x-on-call': { schedule: 'payments-primary' },
+    });
+
+    expect(properties).toEqual([
+      { name: 'x-operational-tier', label: 'Operational Tier', value: 1 },
+      { name: 'x-on-call', label: 'On Call', value: { schedule: 'payments-primary' } },
+    ]);
+  });
+
+  it('gets a named custom property', () => {
+    expect(getCustomProperty({ 'x-owner': 'payments' }, 'x-owner')).toEqual({
+      name: 'x-owner',
+      label: 'Owner',
+      value: 'payments',
+    });
+    expect(getCustomProperty({ owner: 'payments' }, 'owner')).toBeUndefined();
+    expect(getCustomProperty({ 'x-owner': 'payments' }, 'x-missing')).toBeUndefined();
+  });
+});

package/eventcatalog/src/components/MDX/CustomProperties/custom-properties.ts

@@ -0,0 +1,39 @@
+export type CustomProperty = {
+  name: string;
+  label: string;
+  value: unknown;
+};
+
+export const isCustomPropertyName = (name: string) => name.startsWith('x-') && name.length > 2;
+
+export const formatCustomPropertyLabel = (name: string) => {
+  const propertyName = isCustomPropertyName(name) ? name.slice(2) : name;
+
+  return propertyName
+    .split(/[-_.\s]+/)
+    .filter(Boolean)
+    .map((part) => `${part.charAt(0).toUpperCase()}${part.slice(1)}`)
+    .join(' ');
+};
+
+export const getCustomProperties = (data?: Record<string, unknown>): CustomProperty[] => {
+  if (!data) return [];
+
+  return Object.entries(data)
+    .filter(([name]) => isCustomPropertyName(name))
+    .map(([name, value]) => ({
+      name,
+      label: formatCustomPropertyLabel(name),
+      value,
+    }));
+};
+
+export const getCustomProperty = (data: Record<string, unknown> | undefined, name: string): CustomProperty | undefined => {
+  if (!data || !isCustomPropertyName(name) || !Object.prototype.hasOwnProperty.call(data, name)) return undefined;
+
+  return {
+    name,
+    label: formatCustomPropertyLabel(name),
+    value: data[name],
+  };
+};

package/eventcatalog/src/components/MDX/components.tsx

@@ -41,6 +41,8 @@ import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal'
 import { jsx } from 'astro/jsx-runtime';
 import RemoteSchema from '@components/MDX/RemoteSchema.astro';
 import Visibility from '@components/MDX/Visibility';
+import CustomProperties from '@components/MDX/CustomProperties/CustomProperties.astro';
+import CustomProperty from '@components/MDX/CustomProperties/CustomProperty.astro';
 
 const getEntityMapCollection = (props: any, mdxProp: any) => {
   const collection = mdxProp.collection ?? props.collection;
@@ -50,6 +52,8 @@ const getEntityMapCollection = (props: any, mdxProp: any) => {
 const components = (props: any) => {
   return {
     Attachments: (mdxProp: any) => jsx(Attachments, { ...props, ...mdxProp }),
+    CustomProperties: (mdxProp: any) => jsx(CustomProperties, { ...props, ...mdxProp }),
+    CustomProperty: (mdxProp: any) => jsx(CustomProperty, { ...props, ...mdxProp }),
     Accordion,
     AccordionGroup,
     Admonition,