@eventcatalog/core 2.19.4 → 2.19.6

package/eventcatalog/src/components/MDX/SchemaViewer/css/stoplight-mosaic-theme-default.css

@@ -0,0 +1,333 @@
+/* imported from @stoplight/mosaic/themes/default.css */
+/* Don't import directly from node_module as react peer dep issues, we only use the CSS so just import it like this for now */
+:root,
+  [data-theme="light"],
+  [data-theme="light"] .sl-inverted .sl-inverted,
+  [data-theme="light"] .sl-inverted .sl-inverted .sl-inverted .sl-inverted {
+    color: var(--color-text);
+
+        --text-h: 0;
+    --text-s: 0%;
+    --text-l: 15%;
+    --shadow-sm: 0px 0px 1px rgba(67, 90, 111, 0.3);
+    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.25), 0px 0px 1px rgba(67, 90, 111, 0.3);
+    --shadow-lg: 0 4px 17px rgba(67, 90, 111, .2), 0 2px 3px rgba(0, 0, 0, .1), inset 0 0 0 .5px var(--color-canvas-pure), 0 0 0 .5px rgba(0, 0, 0, 0.2);
+    --shadow-xl: 0px 0px 1px rgba(67, 90, 111, 0.3), 0px 8px 10px -4px rgba(67, 90, 111, 0.45);
+    --shadow-2xl: 0px 0px 1px rgba(67, 90, 111, 0.3), 0px 16px 24px -8px rgba(67, 90, 111, 0.45);
+    --drop-shadow-default1: 0 0 0.5px rgba(0, 0, 0, 0.6);
+    --drop-shadow-default2: 0 2px 5px rgba(67, 90, 111, 0.3);
+    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
+    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
+    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
+    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
+    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
+    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
+    --canvas-h: 218;
+    --canvas-s: 40%;
+    --canvas-l: 100%;
+    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
+    --color-canvas-dark: hsla(218, 23%, 23%, 1);
+    --color-canvas-pure: hsla(218, 40%, 100%, 1);
+    --color-canvas-tint: hsla(218, 32%, 97%, 0.5);
+    --color-canvas-50: hsla(218, 32%, 97%, 1);
+    --color-canvas-100: hsla(218, 33%, 94%, 1);
+    --color-canvas-200: hsla(218, 35%, 91%, 1);
+    --color-canvas-300: hsla(218, 36%, 88%, 1);
+    --color-canvas-400: hsla(218, 37%, 85%, 1);
+    --color-canvas-500: hsla(218, 37%, 82%, 1);
+    --color-canvas-dialog: hsla(218, 40%, 100%, 1);
+    --color-border-dark: hsla(var(--canvas-h), 30%, 72%, 0.5);
+    --color-border: hsla(var(--canvas-h), 32%, 78%, 0.5);
+    --color-border-light: hsla(var(--canvas-h), 24%, 84%, 0.5);
+    --color-border-input: hsla(var(--canvas-h), 24%, 72%, 0.8);
+    --color-border-button: hsla(var(--canvas-h), 24%, 20%, 0.65);
+    --primary-h: 202;
+    --primary-s: 100%;
+    --primary-l: 55%;
+    --color-text-primary: hsla(202, 100%, 40%, 1);
+    --color-primary-dark: hsla(202, 80%, 47%, 1);
+    --color-primary-darker: hsla(202, 80%, 36%, 1);
+    --color-primary: hsla(202, 100%, 55%, 1);
+    --color-primary-light: hsla(202, 100%, 66%, 1);
+    --color-primary-tint: hsla(202, 100%, 65%, 0.25);
+    --color-on-primary: hsla(202, 100%, 100%, 1);
+    --success-h: 156;
+    --success-s: 95%;
+    --success-l: 37%;
+    --color-text-success: hsla(156, 95%, 40%, 1);
+    --color-success-dark: hsla(156, 76%, 31%, 1);
+    --color-success-darker: hsla(156, 76%, 24%, 1);
+    --color-success: hsla(156, 95%, 37%, 1);
+    --color-success-light: hsla(156, 95%, 44%, 1);
+    --color-success-tint: hsla(156, 95%, 65%, 0.25);
+    --color-on-success: hsla(156, 95%, 100%, 1);
+    --warning-h: 20;
+    --warning-s: 90%;
+    --warning-l: 56%;
+    --color-text-warning: hsla(20, 90%, 40%, 1);
+    --color-warning-dark: hsla(20, 72%, 48%, 1);
+    --color-warning-darker: hsla(20, 72%, 36%, 1);
+    --color-warning: hsla(20, 90%, 56%, 1);
+    --color-warning-light: hsla(20, 90%, 67%, 1);
+    --color-warning-tint: hsla(20, 90%, 65%, 0.25);
+    --color-on-warning: hsla(20, 90%, 100%, 1);
+    --danger-h: 0;
+    --danger-s: 84%;
+    --danger-l: 63%;
+    --color-text-danger: hsla(0, 84%, 40%, 1);
+    --color-danger-dark: hsla(0, 67%, 54%, 1);
+    --color-danger-darker: hsla(0, 67%, 41%, 1);
+    --color-danger: hsla(0, 84%, 63%, 1);
+    --color-danger-light: hsla(0, 84%, 76%, 1);
+    --color-danger-tint: hsla(0, 84%, 65%, 0.25);
+    --color-on-danger: hsla(0, 84%, 100%, 1);
+
+}
+
+  :root .sl-inverted,
+  [data-theme="light"] .sl-inverted,
+  [data-theme="light"] .sl-inverted .sl-inverted .sl-inverted {
+    color: var(--color-text);
+
+        --text-h: 0;
+    --text-s: 0%;
+    --text-l: 86%;
+    --shadow-sm: 0px 0px 1px rgba(11, 13, 19, 0.5);
+    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(11, 13, 19, 0.4);
+    --shadow-lg: 0 2px 14px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.2);
+    --shadow-xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 8px 10px -4px rgba(11, 13, 19, 0.55);
+    --shadow-2xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 16px 24px -8px rgba(11, 13, 19, 0.55);
+    --drop-shadow-default1: 0 0 0.5px rgba(255, 255, 255, .5);
+    --drop-shadow-default2: 0 3px 8px rgba(0, 0, 0, 0.6);
+    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
+    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
+    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
+    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
+    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
+    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
+    --canvas-h: 218;
+    --canvas-s: 32%;
+    --canvas-l: 10%;
+    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
+    --color-canvas-dark: hsla(218, 23%, 23%, 1);
+    --color-canvas-pure: hsla(218, 32%, 7%, 1);
+    --color-canvas-tint: hsla(218, 26%, 32%, 0.2);
+    --color-canvas-50: hsla(218, 26%, 32%, 1);
+    --color-canvas-100: hsla(218, 27%, 24%, 1);
+    --color-canvas-200: hsla(218, 28%, 18%, 1);
+    --color-canvas-300: hsla(218, 29%, 14%, 1);
+    --color-canvas-400: hsla(218, 30%, 13%, 1);
+    --color-canvas-500: hsla(218, 30%, 12%, 1);
+    --color-canvas-dialog: hsla(218, 27%, 24%, 1);
+    --color-border-dark: hsla(var(--canvas-h), 24%, 23%, 0.5);
+    --color-border: hsla(var(--canvas-h), 26%, 28%, 0.5);
+    --color-border-light: hsla(var(--canvas-h), 19%, 34%, 0.5);
+    --color-border-input: hsla(var(--canvas-h), 19%, 30%, 0.8);
+    --color-border-button: hsla(var(--canvas-h), 19%, 80%, 0.65);
+    --primary-h: 202;
+    --primary-s: 90%;
+    --primary-l: 51%;
+    --color-text-primary: hsla(202, 100%, 70%, 1);
+    --color-primary-dark: hsla(202, 72%, 43%, 1);
+    --color-primary-darker: hsla(202, 72%, 33%, 1);
+    --color-primary: hsla(202, 90%, 51%, 1);
+    --color-primary-light: hsla(202, 90%, 61%, 1);
+    --color-primary-tint: hsla(202, 90%, 65%, 0.25);
+    --color-on-primary: hsla(202, 100%, 100%, 1);
+    --success-h: 156;
+    --success-s: 95%;
+    --success-l: 67%;
+    --color-text-success: hsla(156, 86%, 60%, 1);
+    --color-success-dark: hsla(156, 68%, 57%, 1);
+    --color-success-darker: hsla(156, 68%, 44%, 1);
+    --color-success: hsla(156, 86%, 67%, 1);
+    --color-success-light: hsla(156, 86%, 80%, 1);
+    --color-success-tint: hsla(156, 86%, 65%, 0.25);
+    --color-on-success: hsla(156, 95%, 100%, 1);
+    --warning-h: 20;
+    --warning-s: 90%;
+    --warning-l: 50%;
+    --color-text-warning: hsla(20, 81%, 60%, 1);
+    --color-warning-dark: hsla(20, 65%, 43%, 1);
+    --color-warning-darker: hsla(20, 65%, 33%, 1);
+    --color-warning: hsla(20, 81%, 50%, 1);
+    --color-warning-light: hsla(20, 81%, 60%, 1);
+    --color-warning-tint: hsla(20, 81%, 65%, 0.25);
+    --color-on-warning: hsla(20, 90%, 100%, 1);
+    --danger-h: 0;
+    --danger-s: 84%;
+    --danger-l: 43%;
+    --color-text-danger: hsla(0, 76%, 60%, 1);
+    --color-danger-dark: hsla(0, 60%, 37%, 1);
+    --color-danger-darker: hsla(0, 60%, 28%, 1);
+    --color-danger: hsla(0, 76%, 43%, 1);
+    --color-danger-light: hsla(0, 76%, 52%, 1);
+    --color-danger-tint: hsla(0, 76%, 65%, 0.25);
+    --color-on-danger: hsla(0, 84%, 100%, 1);
+
+}
+  [data-theme="dark"],
+  [data-theme="dark"] .sl-inverted .sl-inverted,
+  [data-theme="dark"] .sl-inverted .sl-inverted .sl-inverted .sl-inverted {
+    color: var(--color-text);
+
+        --text-h: 0;
+    --text-s: 0%;
+    --text-l: 85%;
+    --shadow-sm: 0px 0px 1px rgba(11, 13, 19, 0.5);
+    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(11, 13, 19, 0.4);
+    --shadow-lg: 0 2px 14px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.2);
+    --shadow-xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 8px 10px -4px rgba(11, 13, 19, 0.55);
+    --shadow-2xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 16px 24px -8px rgba(11, 13, 19, 0.55);
+    --drop-shadow-default1: 0 0 0.5px rgba(255, 255, 255, .5);
+    --drop-shadow-default2: 0 3px 8px rgba(0, 0, 0, 0.6);
+    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
+    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
+    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
+    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
+    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
+    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
+    --canvas-h: 218;
+    --canvas-s: 32%;
+    --canvas-l: 8%;
+    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
+    --color-canvas-dark: hsla(218, 23%, 23%, 1);
+    --color-canvas-pure: hsla(218, 32%, 5%, 1);
+    --color-canvas-tint: hsla(218, 26%, 30%, 0.2);
+    --color-canvas-50: hsla(218, 26%, 20%, 1);
+    --color-canvas-100: hsla(218, 27%, 14%, 1);
+    --color-canvas-200: hsla(218, 28%, 10%, 1);
+    --color-canvas-300: hsla(218, 29%, 8%, 1);
+    --color-canvas-400: hsla(218, 30%, 7%, 1);
+    --color-canvas-500: hsla(218, 30%, 7%, 1);
+    --color-canvas-dialog: hsla(218, 27%, 14%, 1);
+    --color-border-dark: hsla(var(--canvas-h), 24%, 21%, 0.5);
+    --color-border: hsla(var(--canvas-h), 26%, 26%, 0.5);
+    --color-border-light: hsla(var(--canvas-h), 19%, 32%, 0.5);
+    --color-border-input: hsla(var(--canvas-h), 19%, 28%, 0.8);
+    --color-border-button: hsla(var(--canvas-h), 19%, 80%, 0.65);
+    --primary-h: 202;
+    --primary-s: 80%;
+    --primary-l: 36%;
+    --color-text-primary: hsla(202, 100%, 70%, 1);
+    --color-primary-dark: hsla(202, 64%, 30%, 1);
+    --color-primary-darker: hsla(202, 64%, 23%, 1);
+    --color-primary: hsla(202, 80%, 36%, 1);
+    --color-primary-light: hsla(202, 80%, 43%, 1);
+    --color-primary-tint: hsla(202, 80%, 42%, 0.25);
+    --color-on-primary: hsla(202, 100%, 100%, 1);
+    --success-h: 156;
+    --success-s: 95%;
+    --success-l: 37%;
+    --color-text-success: hsla(156, 76%, 60%, 1);
+    --color-success-dark: hsla(156, 61%, 20%, 1);
+    --color-success-darker: hsla(156, 61%, 16%, 1);
+    --color-success: hsla(156, 76%, 24%, 1);
+    --color-success-light: hsla(156, 76%, 29%, 1);
+    --color-success-tint: hsla(156, 76%, 42%, 0.25);
+    --color-on-success: hsla(156, 95%, 100%, 1);
+    --warning-h: 20;
+    --warning-s: 90%;
+    --warning-l: 56%;
+    --color-text-warning: hsla(20, 72%, 60%, 1);
+    --color-warning-dark: hsla(20, 58%, 31%, 1);
+    --color-warning-darker: hsla(20, 58%, 24%, 1);
+    --color-warning: hsla(20, 72%, 36%, 1);
+    --color-warning-light: hsla(20, 72%, 44%, 1);
+    --color-warning-tint: hsla(20, 72%, 42%, 0.25);
+    --color-on-warning: hsla(20, 90%, 100%, 1);
+    --danger-h: 0;
+    --danger-s: 84%;
+    --danger-l: 63%;
+    --color-text-danger: hsla(0, 67%, 60%, 1);
+    --color-danger-dark: hsla(0, 54%, 35%, 1);
+    --color-danger-darker: hsla(0, 54%, 27%, 1);
+    --color-danger: hsla(0, 67%, 41%, 1);
+    --color-danger-light: hsla(0, 67%, 49%, 1);
+    --color-danger-tint: hsla(0, 67%, 42%, 0.25);
+    --color-on-danger: hsla(0, 84%, 100%, 1);
+
+}
+
+  
+  [data-theme="dark"] .sl-inverted,
+  [data-theme="dark"] .sl-inverted .sl-inverted .sl-inverted {
+    color: var(--color-text);
+
+        --text-h: 0;
+    --text-s: 0%;
+    --text-l: 89%;
+    --shadow-sm: 0px 0px 1px rgba(11, 13, 19, 0.5);
+    --shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.35), 0px 0px 1px rgba(11, 13, 19, 0.4);
+    --shadow-lg: 0 2px 14px rgba(0,0,0,.55), 0 0 0 0.5px rgba(255,255,255,.2);
+    --shadow-xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 8px 10px -4px rgba(11, 13, 19, 0.55);
+    --shadow-2xl: 0px 0px 1px rgba(11, 13, 19, 0.4), 0px 16px 24px -8px rgba(11, 13, 19, 0.55);
+    --drop-shadow-default1: 0 0 0.5px rgba(255, 255, 255, .5);
+    --drop-shadow-default2: 0 3px 8px rgba(0, 0, 0, 0.6);
+    --color-text-heading: hsla(var(--text-h), var(--text-s), max(3, calc(var(--text-l) - 15)), 1);
+    --color-text: hsla(var(--text-h), var(--text-s), var(--text-l), 1);
+    --color-text-paragraph: hsla(var(--text-h), var(--text-s), var(--text-l), 0.9);
+    --color-text-muted: hsla(var(--text-h), var(--text-s), var(--text-l), 0.7);
+    --color-text-light: hsla(var(--text-h), var(--text-s), var(--text-l), 0.55);
+    --color-text-disabled: hsla(var(--text-h), var(--text-s), var(--text-l), 0.3);
+    --canvas-h: 218;
+    --canvas-s: 32%;
+    --canvas-l: 13%;
+    --color-canvas: hsla(var(--canvas-h), var(--canvas-s), var(--canvas-l), 1);
+    --color-canvas-dark: hsla(218, 23%, 23%, 1);
+    --color-canvas-pure: hsla(218, 32%, 10%, 1);
+    --color-canvas-tint: hsla(218, 26%, 35%, 0.2);
+    --color-canvas-50: hsla(218, 26%, 23%, 1);
+    --color-canvas-100: hsla(218, 27%, 18%, 1);
+    --color-canvas-200: hsla(218, 28%, 14%, 1);
+    --color-canvas-300: hsla(218, 29%, 11%, 1);
+    --color-canvas-400: hsla(218, 30%, 10%, 1);
+    --color-canvas-500: hsla(218, 30%, 10%, 1);
+    --color-canvas-dialog: hsla(218, 27%, 18%, 1);
+    --color-border-dark: hsla(var(--canvas-h), 24%, 26%, 0.5);
+    --color-border: hsla(var(--canvas-h), 26%, 31%, 0.5);
+    --color-border-light: hsla(var(--canvas-h), 19%, 37%, 0.5);
+    --color-border-input: hsla(var(--canvas-h), 19%, 33%, 0.8);
+    --color-border-button: hsla(var(--canvas-h), 19%, 80%, 0.65);
+    --primary-h: 202;
+    --primary-s: 80%;
+    --primary-l: 33%;
+    --color-text-primary: hsla(202, 100%, 70%, 1);
+    --color-primary-dark: hsla(202, 64%, 28%, 1);
+    --color-primary-darker: hsla(202, 64%, 22%, 1);
+    --color-primary: hsla(202, 80%, 33%, 1);
+    --color-primary-light: hsla(202, 80%, 40%, 1);
+    --color-primary-tint: hsla(202, 80%, 42%, 0.25);
+    --color-on-primary: hsla(202, 100%, 100%, 1);
+    --success-h: 156;
+    --success-s: 95%;
+    --success-l: 67%;
+    --color-text-success: hsla(156, 76%, 60%, 1);
+    --color-success-dark: hsla(156, 61%, 37%, 1);
+    --color-success-darker: hsla(156, 61%, 28%, 1);
+    --color-success: hsla(156, 76%, 44%, 1);
+    --color-success-light: hsla(156, 76%, 52%, 1);
+    --color-success-tint: hsla(156, 76%, 42%, 0.25);
+    --color-on-success: hsla(156, 95%, 100%, 1);
+    --warning-h: 20;
+    --warning-s: 90%;
+    --warning-l: 50%;
+    --color-text-warning: hsla(20, 72%, 60%, 1);
+    --color-warning-dark: hsla(20, 58%, 28%, 1);
+    --color-warning-darker: hsla(20, 58%, 21%, 1);
+    --color-warning: hsla(20, 72%, 33%, 1);
+    --color-warning-light: hsla(20, 72%, 39%, 1);
+    --color-warning-tint: hsla(20, 72%, 42%, 0.25);
+    --color-on-warning: hsla(20, 90%, 100%, 1);
+    --danger-h: 0;
+    --danger-s: 84%;
+    --danger-l: 43%;
+    --color-text-danger: hsla(0, 67%, 60%, 1);
+    --color-danger-dark: hsla(0, 54%, 24%, 1);
+    --color-danger-darker: hsla(0, 54%, 18%, 1);
+    --color-danger: hsla(0, 67%, 28%, 1);
+    --color-danger-light: hsla(0, 67%, 34%, 1);
+    --color-danger-tint: hsla(0, 67%, 42%, 0.25);
+    --color-on-danger: hsla(0, 84%, 100%, 1);
+
+}

package/eventcatalog/src/components/Tables/Table.tsx

@@ -9,34 +9,100 @@ import {
   useReactTable,
   type Column,
   type ColumnFiltersState,
-  type Row,
 } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
 import DebouncedInput from './DebouncedInput';
 
 import { getColumnsByCollection } from './columns';
-import { useEffect, useMemo, useState, type EventHandler } from 'react';
-import type { CollectionTypes } from '@types';
+import { useEffect, useMemo, useState } from 'react';
+import type { CollectionMessageTypes } from '@types';
 import { isSameVersion } from '@utils/collections/util';
 
 declare module '@tanstack/react-table' {
   // @ts-ignore
   interface ColumnMeta<TData extends RowData, TValue> {
     filterVariant?: 'collection' | 'name' | 'badges';
-    collectionFilterKey?: string;
+    collectionFilterKey?: 'producers' | 'consumers' | 'sends' | 'receives' | 'services';
     showFilter?: boolean;
     className?: string;
   }
 }
 
-export const Table = ({
+export type TCollectionTypes = 'domains' | 'services' | CollectionMessageTypes | 'flows';
+
+export type TData<T extends TCollectionTypes> = {
+  collection: T;
+  data: {
+    id: string;
+    name: string;
+    summary: string;
+    version: string;
+    latestVersion?: string; // Defined on getter collection utility
+    badges?: Array<{
+      id: string; // Where is it defined?
+      content: string;
+      backgroundColor: string;
+      textColor: string;
+      icon: any; // Where is it defined?
+    }>;
+    // ---------------------------------------------------------------------------
+    // Domains
+    services?: Array<{
+      collection: string; // Be more specific;
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // ---------------------------------------------------------------------------
+    // Services
+    receives?: Array<{
+      collection: string; // Be more specific;
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    sends?: Array<{
+      collection: string; // Be more specific;
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // ---------------------------------------------------------------------------
+    // Messages
+    producers?: Array<{
+      collection: string; // Specify only 'services'?
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // Only for messages
+    consumers?: Array<{
+      collection: string; // Specify only 'services'?
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // ---------------------------------------------------------------------------
+  };
+};
+
+export const Table = <T extends TCollectionTypes>({
   data: initialData,
   collection,
   mode = 'simple',
   checkboxLatestId,
 }: {
-  data: CollectionEntry<'events'>[];
-  collection: string;
+  data: TData<T>[];
+  collection: T;
   checkboxLatestId: string;
   mode?: 'simple' | 'full';
 }) => {
@@ -68,7 +134,6 @@ export const Table = ({
   const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
 
   const table = useReactTable({
-    // @ts-ignore
     data,
     columns,
     onColumnFiltersChange: setColumnFilters,
@@ -106,7 +171,6 @@ export const Table = ({
                       <div className="text-md">
                         {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                       </div>
-                      {/* @ts-ignore */}
                       <div className="">
                         {header.column.columnDef.meta?.showFilter !== false && <Filter column={header.column} />}
                         {header.column.columnDef.meta?.showFilter == false && <div className="h-10" />}
@@ -201,23 +265,17 @@ export const Table = ({
   );
 };
 
-function Filter({ column }: { column: Column<any, unknown> }) {
-  const { filterVariant, collectionFilterKey = '' } = column.columnDef.meta ?? {};
+function Filter<T extends TCollectionTypes>({ column }: { column: Column<TData<T>, unknown> }) {
+  const { filterVariant, collectionFilterKey } = column.columnDef.meta ?? {};
 
   const columnFilterValue = column.getFilterValue();
 
   const sortedUniqueValues = useMemo(() => {
-    if (filterVariant === 'collection') {
+    if (filterVariant === 'collection' && collectionFilterKey) {
       const rows = column.getFacetedRowModel().rows;
-      const data = rows
-        .map((row: Row<CollectionEntry<CollectionTypes>>) => {
-          // @ts-ignore
-          const items = row.original.data[collectionFilterKey];
-          return items as CollectionEntry<CollectionTypes>[];
-        })
-        .flat();
+      const data = rows.map((row) => row.original.data?.[collectionFilterKey] ?? []).flat();
 
-      const allItems = data.map((item) => `${item.data.name} (v${item.data.version})`);
+      const allItems = data.map((item) => `${item?.data.name} (v${item?.data.version})`);
       const uniqueItemsInList = Array.from(new Set(allItems));
 
       return uniqueItemsInList.sort().slice(0, 2000);
@@ -225,10 +283,9 @@ function Filter({ column }: { column: Column<any, unknown> }) {
     if (filterVariant === 'name') {
       const rows = column.getFacetedRowModel().rows;
       const data = rows
-        .map((row: Row<CollectionEntry<CollectionTypes>>) => {
-          // @ts-ignore
+        .map((row) => {
           const data = row.original;
-          return data as CollectionEntry<CollectionTypes>;
+          return data;
         })
         .flat();
 

package/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx

@@ -1,13 +1,12 @@
 import { ServerIcon } from '@heroicons/react/20/solid';
 import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
-import { filterByBadge, filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
-import { Tag } from 'lucide-react';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
 
-const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
+const columnHelper = createColumnHelper<TData<'domains'>>();
 
 export const columns = () => [
   columnHelper.accessor('data.name', {
@@ -65,7 +64,7 @@ export const columns = () => [
 
       return (
         <ul>
-          {services.map((consumer: any) => {
+          {services.map((consumer) => {
             const color = 'pink';
             return (
               <li key={consumer.data.id} className="py-1 group ">

package/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx

@@ -1,11 +1,11 @@
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
 import { filterByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { QueueListIcon } from '@heroicons/react/24/solid';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
 
-const columnHelper = createColumnHelper<CollectionEntry<'flows'>>();
+const columnHelper = createColumnHelper<TData<'flows'>>();
 
 export const columns = () => [
   columnHelper.accessor('data.name', {

package/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx

@@ -1,13 +1,13 @@
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionMessageTypes } from '@types';
-import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
-import { filterByName, filterCollectionByName, filterByBadge } from '../filters/custom-filters';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
+import type { CollectionMessageTypes } from '@types';
 
-const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
+const columnHelper = createColumnHelper<TData<CollectionMessageTypes>>();
 
 export const getColorAndIconForMessageType = (type: string) => {
   switch (type) {
@@ -80,7 +80,7 @@ export const columns = () => [
         return <div className="font-light text-sm text-gray-400/60 text-left italic">No producers documented</div>;
       return (
         <ul className="">
-          {producers.map((producer: any, index: number) => {
+          {producers.map((producer, index) => {
             return (
               <li className="py-2 group flex items-center space-x-2" key={`${producer.data.id}-${index}`}>
                 <a
@@ -120,7 +120,7 @@ export const columns = () => [
 
       return (
         <ul>
-          {consumers.map((consumer: any, index: number) => {
+          {consumers.map((consumer, index) => {
             return (
               <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
                 <a

package/eventcatalog/src/components/Tables/columns/ServiceTableColumns.tsx

@@ -1,13 +1,13 @@
 import { ServerIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/solid';
 import { createColumnHelper } from '@tanstack/react-table';
-import type { CollectionEntry } from 'astro:content';
 import { useMemo, useState } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { getColorAndIconForMessageType } from './MessageTableColumns';
 import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
 
-const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
+const columnHelper = createColumnHelper<TData<'services'>>();
 
 export const columns = () => [
   columnHelper.accessor('data.name', {
@@ -65,7 +65,7 @@ export const columns = () => [
 
       const receiversWithIcons = useMemo(
         () =>
-          receives?.map((consumer: any) => {
+          receives?.map((consumer) => {
             const type = consumer.collection.slice(0, -1);
             return {
               ...consumer,
@@ -87,7 +87,7 @@ export const columns = () => [
           )}
           {isExpanded && (
             <ul>
-              {receiversWithIcons.map((consumer: any, index: number) => (
+              {receiversWithIcons.map((consumer, index: number) => (
                 <li key={`${consumer.data.id}-${index}`} className="py-1 group font-light ">
                   <a
                     href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
@@ -137,7 +137,7 @@ export const columns = () => [
           )}
           {isExpanded && (
             <ul>
-              {sends.map((consumer: any, index: number) => {
+              {sends.map((consumer, index) => {
                 const type = consumer.collection.slice(0, -1);
                 const color = type === 'event' ? 'orange' : 'blue';
                 const Icon = type === 'event' ? BoltIcon : ChatBubbleLeftIcon;

package/eventcatalog/src/components/Tables/columns/SharedColumns.tsx

@@ -1,7 +1,9 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { Tag } from 'lucide-react';
 import { filterByBadge } from '../filters/custom-filters';
-export const createBadgesColumn = <T extends { data: { badges?: any[] } }>(
+import type { TCollectionTypes, TData } from '../Table';
+
+export const createBadgesColumn = <T extends { data: Pick<TData<U>['data'], 'badges'> }, U extends TCollectionTypes>(
   columnHelper: ReturnType<typeof createColumnHelper<T>>
 ) => {
   return columnHelper.accessor((row) => row.data.badges, {
@@ -16,7 +18,7 @@ export const createBadgesColumn = <T extends { data: { badges?: any[] } }>(
 
       return (
         <ul>
-          {badges.map((badge: any, index: number) => {
+          {badges.map((badge, index) => {
             return (
               <li key={`${badge.id}-${index}`} className="py-1 group font-light ">
                 <div className="group-hover:text-primary flex space-x-1 items-center ">

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -1,5 +1,5 @@
 ---
-import { Table } from '@components/Tables/Table';
+import { Table, type TData, type TCollectionTypes } from '@components/Tables/Table';
 import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
 import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
 import { getCommands } from '@utils/commands';
@@ -20,6 +20,13 @@ const services = await getServices();
 const domains = await getDomains();
 const flows = await getFlows();
 
+export interface Props<T extends TCollectionTypes> {
+  title: string;
+  subtitle: string;
+  data: TData<T>[];
+  type: T;
+}
+
 const { title, subtitle, data, type } = Astro.props;
 const currentPath = Astro.url.pathname;