@eventcatalog/core 2.19.3 → 2.19.5

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

@@ -15,8 +15,9 @@ import type { CollectionEntry } from 'astro:content';
 import DebouncedInput from './DebouncedInput';
 
 import { getColumnsByCollection } from './columns';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, type EventHandler } from 'react';
 import type { CollectionTypes } from '@types';
+import { isSameVersion } from '@utils/collections/util';
 
 declare module '@tanstack/react-table' {
   // @ts-ignore
@@ -32,10 +33,12 @@ export const Table = ({
   data: initialData,
   collection,
   mode = 'simple',
+  checkboxLatestId,
 }: {
   data: CollectionEntry<'events'>[];
   collection: string;
-  mode: 'simple' | 'full';
+  checkboxLatestId: string;
+  mode?: 'simple' | 'full';
 }) => {
   const [data, _setData] = useState(initialData);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -48,6 +51,20 @@ export const Table = ({
     }
   }, []);
 
+  const [showOnlyLatest, setShowOnlyLatest] = useState(true);
+
+  useEffect(() => {
+    const checkbox = document.getElementById(checkboxLatestId);
+
+    function handleChange(evt: Event) {
+      setShowOnlyLatest((evt.target as HTMLInputElement).checked);
+    }
+
+    checkbox?.addEventListener('change', handleChange);
+
+    return () => checkbox?.removeEventListener('change', handleChange);
+  }, [checkboxLatestId]);
+
   const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
 
   const table = useReactTable({
@@ -63,6 +80,15 @@ export const Table = ({
     getPaginationRowModel: getPaginationRowModel(),
     state: {
       columnFilters,
+      globalFilter: showOnlyLatest,
+    },
+    onGlobalFilterChange: setShowOnlyLatest,
+    globalFilterFn: (row, _columnId, showOnlyLatest: boolean) => {
+      if (showOnlyLatest) {
+        return isSameVersion(row.original.data.version, row.original.data.latestVersion);
+      }
+
+      return true;
     },
   });
 

package/eventcatalog/src/layouts/DiscoverLayout.astro

@@ -11,6 +11,7 @@ import { buildUrl } from '@utils/url-builder';
 import { getQueries } from '@utils/queries';
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
 import VerticalSideBarLayout from './VerticalSideBarLayout.astro';
+import Checkbox from '@components/Checkbox.astro';
 
 const events = await getEvents();
 const queries = await getQueries();
@@ -22,6 +23,8 @@ const flows = await getFlows();
 const { title, subtitle, data, type } = Astro.props;
 const currentPath = Astro.url.pathname;
 
+const checkboxLatestId = 'latest-only';
+
 const tabs = [
   {
     label: `Events (${events.length})`,
@@ -102,17 +105,19 @@ const tabs = [
     <!-- Table -->
     <div class="pb-20 ml-6 md:pr-10">
       <div>
-        <div class="sm:flex sm:items-center py-4 pb-4" id="discover-title">
+        <div class="sm:flex sm:items-end py-4 pb-4" id="discover-title">
           <div class="sm:flex-auto space-y-2">
             <h1 class="text-4xl font-semibold text-gray-900 capitalize">{title}</h1>
             <p class="text-md text-gray-700">{subtitle}</p>
           </div>
+          <div class="p-4 border border-gray-200 rounded-md">
+            <Checkbox id={checkboxLatestId} name={checkboxLatestId} label="Show latest version only" checked />
+          </div>
         </div>
         <div class="mt-4 flow-root">
           <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
             <div class="inline-block min-w-full align-middle sm:px-6 lg:px-8">
-              <!-- @ts-ignore -->
-              <Table data={data} collection={type} client:load />
+              <Table checkboxLatestId={checkboxLatestId} data={data} collection={type} client:load />
             </div>
           </div>
         </div>

package/eventcatalog/src/utils/collections/file-diffs.ts

@@ -1,6 +1,6 @@
 import { readdir, readFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
-import { diffLines, type Change } from 'diff';
+import { formatPatch, structuredPatch } from 'diff';
 import { html, parse } from 'diff2html';
 import { getItemsFromCollectionByIdAndSemverOrLatest } from './util';
 import type { CollectionEntry } from 'astro:content';
@@ -16,29 +16,8 @@ const FILE_EXTENSIONS_TO_INCLUDE = ['.json', '.avro', '.yaml', '.yml', '.proto',
  * @returns A string representing the diff in unified format
  */
 function generateDiffString(fileName: string, oldStr: string, newStr: string): string {
-  const diff = diffLines(oldStr, newStr);
-
-  // Check if there are any changes
-  const hasChanges = diff.some((part) => part.added || part.removed);
-
-  if (!hasChanges) return '';
-
-  let diffString = `diff --git a/${fileName} b/${fileName}\n`;
-  diffString += `--- a/${fileName}\n`;
-  diffString += `+++ b/${fileName}\n`;
-
-  diff.forEach((part: Change) => {
-    const prefix = part.added ? '+' : part.removed ? '-' : ' ';
-    const lines = part.value.split('\n');
-    // Remove the last element if it's an empty string (which happens if the last line ends with a newline)
-    if (lines[lines.length - 1] === '') lines.pop();
-
-    lines.forEach((line: string) => {
-      diffString += `${prefix}${line}\n`;
-    });
-  });
-
-  return diffString;
+  const jsonPatch = structuredPatch(fileName, fileName, oldStr, newStr);
+  return jsonPatch.hunks.length == 0 ? '' : formatPatch(jsonPatch);
 }
 
 /**

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

@@ -1,6 +1,6 @@
 import type { CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
-import { coerce, compare, satisfies as satisfiesRange } from 'semver';
+import { coerce, compare, eq, satisfies as satisfiesRange } from 'semver';
 
 export const getPreviousVersion = (version: string, versions: string[]) => {
   const index = versions.indexOf(version);
@@ -13,6 +13,17 @@ export const getVersions = (data: CollectionEntry<CollectionTypes>[]) => {
   return sortStringVersions(versions);
 };
 
+export function isSameVersion(v1: string | undefined, v2: string | undefined) {
+  const semverV1 = coerce(v1);
+  const semverV2 = coerce(v2);
+
+  if (semverV1 != null && semverV2 != null) {
+    return eq(semverV1, semverV2);
+  }
+
+  return v1 === v2;
+}
+
 /**
  * Sorts versioned items. Latest version first.
  */

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.19.3",
+  "version": "2.19.5",
   "publishConfig": {
     "access": "public"
   },
@@ -32,13 +32,12 @@
     "@heroicons/react": "^2.1.3",
     "@iconify-json/logos": "^1.2.4",
     "@parcel/watcher": "^2.4.1",
-    "@stoplight/json-schema-viewer": "^4.7.0",
-    "@stoplight/mosaic": "^1.53.2",
+    "@stoplight/json-schema-viewer": "^4.16.4",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
     "astro": "^5.1.5",
-    "astro-expressive-code": "^0.38.3",
+    "astro-expressive-code": "^0.40.1",
     "astro-pagefind": "^1.6.0",
     "astro-seo": "^0.8.4",
     "axios": "^1.7.7",