@eventcatalog/core 4.2.2 → 4.2.4

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,