@eventcatalog/core 3.36.5 → 3.37.0

package/eventcatalog/src/utils/collection-colors.ts

@@ -0,0 +1,76 @@
+export type CollectionColor =
+  | 'orange'
+  | 'blue'
+  | 'green'
+  | 'pink'
+  | 'yellow'
+  | 'teal'
+  | 'purple'
+  | 'red'
+  | 'gray'
+  | 'cyan'
+  | 'indigo';
+
+export const getColorForCollection = (collection: string): CollectionColor => {
+  switch (collection) {
+    case 'events':
+      return 'orange';
+    case 'commands':
+      return 'blue';
+    case 'queries':
+      return 'green';
+    case 'flows':
+      return 'teal';
+    case 'teams':
+      return 'gray';
+    case 'users':
+      return 'gray';
+    case 'channels':
+      return 'purple';
+    case 'ubiquitousLanguages':
+      return 'green';
+    case 'entities':
+      return 'purple';
+    case 'domains':
+      return 'yellow';
+    case 'services':
+      return 'pink';
+    case 'data-products':
+      return 'cyan';
+    case 'containers':
+      return 'indigo';
+    default:
+      return 'gray';
+  }
+};
+
+export const tailwind500RgbByColor: Record<CollectionColor, string> = {
+  orange: '249 115 22',
+  blue: '59 130 246',
+  green: '34 197 94',
+  pink: '236 72 153',
+  yellow: '234 179 8',
+  teal: '20 184 166',
+  purple: '168 85 247',
+  red: '239 68 68',
+  gray: '107 114 128',
+  cyan: '6 182 212',
+  indigo: '99 102 241',
+};
+
+export const collectionTextColorClassByColor: Record<CollectionColor, string> = {
+  orange: 'text-orange-500',
+  blue: 'text-blue-500',
+  green: 'text-green-500',
+  pink: 'text-pink-500',
+  yellow: 'text-yellow-500',
+  teal: 'text-teal-500',
+  purple: 'text-purple-500',
+  red: 'text-red-500',
+  gray: 'text-gray-500',
+  cyan: 'text-cyan-500',
+  indigo: 'text-indigo-500',
+};
+
+export const getCollectionTextColorClass = (color: string, fallback = 'text-gray-500'): string =>
+  collectionTextColorClassByColor[color as CollectionColor] || fallback;

package/eventcatalog/src/utils/collections/icons.ts

@@ -13,6 +13,7 @@ import {
   CubeIcon,
 } from '@heroicons/react/24/outline';
 import { BookText, Box, DatabaseIcon } from 'lucide-react';
+import { getColorForCollection } from '@utils/collection-colors';
 
 export const getIconForCollection = (collection: string) => {
   switch (collection) {
@@ -53,33 +54,5 @@ export const getIconForCollection = (collection: string) => {
 
 export const getColorAndIconForCollection = (collection: string) => {
   const icon = getIconForCollection(collection);
-
-  switch (collection) {
-    case 'events':
-      return { color: 'orange', Icon: icon };
-    case 'commands':
-      return { color: 'blue', Icon: icon };
-    case 'queries':
-      return { color: 'green', Icon: icon };
-    case 'flows':
-      return { color: 'teal', Icon: icon };
-    case 'teams':
-      return { color: 'red', Icon: icon };
-    case 'users':
-      return { color: 'gray', Icon: icon };
-    case 'channels':
-      return { color: 'purple', Icon: icon };
-    case 'ubiquitousLanguages':
-      return { color: 'green', Icon: icon };
-    case 'entities':
-      return { color: 'purple', Icon: icon };
-    case 'domains':
-      return { color: 'yellow', Icon: icon };
-    case 'services':
-      return { color: 'pink', Icon: icon };
-    case 'data-products':
-      return { color: 'cyan', Icon: icon };
-    default:
-      return { color: 'gray', Icon: icon };
-  }
+  return { color: getColorForCollection(collection), Icon: icon };
 };

package/eventcatalog/src/utils/resource-reference-colors.ts

@@ -0,0 +1,49 @@
+import { getColorForCollection, tailwind500RgbByColor, type CollectionColor } from './collection-colors';
+import { resourceToCollectionMap } from './collections/util';
+
+export type ResourceReferenceType =
+  | 'entity'
+  | 'service'
+  | 'event'
+  | 'command'
+  | 'query'
+  | 'domain'
+  | 'flow'
+  | 'channel'
+  | 'diagram'
+  | 'container'
+  | 'user'
+  | 'team'
+  | 'doc'
+  | 'data-product';
+
+const resourceTypeToCollection = {
+  ...resourceToCollectionMap,
+  doc: 'customPages',
+} as Record<ResourceReferenceType, string>;
+
+export const getResourceReferenceColorName = (type: string): CollectionColor => {
+  const collection = resourceTypeToCollection[type as ResourceReferenceType] || '';
+  return getColorForCollection(collection);
+};
+
+export const getResourceReferenceStyle = (type: string): string => {
+  if (type === 'doc') {
+    return [
+      '--ec-resource-ref-bg: rgb(var(--ec-accent) / 0.12)',
+      '--ec-resource-ref-color: rgb(var(--ec-accent))',
+      'color: var(--ec-resource-ref-color)',
+      'text-decoration-color: var(--ec-resource-ref-color)',
+    ].join('; ');
+  }
+
+  const color = getResourceReferenceColorName(type);
+  const rgb = tailwind500RgbByColor[color];
+
+  return [
+    `--ec-resource-ref-bg: rgb(${rgb} / 0.12)`,
+    `--ec-resource-ref-color: rgb(${rgb})`,
+    'color: var(--ec-resource-ref-color)',
+    'text-decoration-color: var(--ec-resource-ref-color)',
+  ].join('; ');
+};

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "3.36.5",
+  "version": "3.37.0",
   "publishConfig": {
     "access": "public"
   },
@@ -108,7 +108,7 @@
     "zod": "^4.3.6",
     "@eventcatalog/linter": "1.0.23",
     "@eventcatalog/sdk": "2.21.1",
-    "@eventcatalog/visualiser": "^3.20.3"
+    "@eventcatalog/visualiser": "^3.21.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",