feat(core): schema viewer now renders yaml files (#998)

* feat(core): schema viewer now renders yaml files * Create yellow-planes-hope.md
event-catalog · Dec 5, 2024 · 38e6165 · 38e6165
1 parent e87bb9b
commit 38e6165
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 4 deletions.
diff --git a/.changeset/yellow-planes-hope.md b/.changeset/yellow-planes-hope.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): schema viewer now renders yaml files
diff --git a/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro b/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro
@@ -2,6 +2,7 @@
 const { catalog, id } = Astro.props;
 import fs from 'node:fs/promises';
 import { existsSync } from 'fs';
+import yaml from 'js-yaml';
 import path from 'path';
 import SchemaViewerClient from './SchemaViewer';
 import Admonition from '../Admonition';
@@ -48,7 +49,11 @@ try {
     if (exists) {
       // Load the schema for the component
       schema = await fs.readFile(schemaPath, 'utf-8');
-      schema = JSON.parse(schema);
+      if (schemaPath.endsWith('.yml') || schemaPath.endsWith('.yaml')) {
+        schema = yaml.load(schema);
+      } else {
+        schema = JSON.parse(schema);
+      }
     }
 
     return {

diff --git a/...ault/domains/Orders/services/InventoryService/events/InventoryAdjusted/index.md b/...ault/domains/Orders/services/InventoryService/events/InventoryAdjusted/index.md
@@ -37,7 +37,7 @@ The `Inventory Adjusted` event is triggered whenever there is a change in the in
 
 <NodeGraph />
 
-<SchemaViewer file="schema.json" title="JSON Schema" maxHeight="500" />
+<SchemaViewer file="schema.yml" title="JSON Schema" maxHeight="500" />
 
 ## Payload example
 

diff --git a/...ples/default/domains/Orders/services/InventoryService/events/InventoryAdjusted/schema.yml b/...ples/default/domains/Orders/services/InventoryService/events/InventoryAdjusted/schema.yml
@@ -0,0 +1,32 @@
+$schema: http://json-schema.org/draft-07/schema#
+title: Employee
+type: object
+description: A record representing an employee
+properties:
+  Name:
+    type: string
+    description: The name of the employee
+  Age:
+    type: integer
+    description: The age of the employee
+  Department:
+    type: string
+    description: The department where the employee works
+  Position:
+    type: string
+    description: The position or title of the employee within the department
+  Salary:
+    type: number
+    format: double
+    description: The salary of the employee
+  JoinDate:
+    type: string
+    format: date
+    description: The date when the employee joined the company
+required:
+- Name
+- Age
+- Department
+- Position
+- Salary
+- JoinDate
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -68,6 +68,7 @@
     "glob": "^10.4.1",
     "gray-matter": "^4.0.3",
     "html-to-image": "^1.11.11",
+    "js-yaml": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "4.6.2",
     "lucide-react": "^0.453.0",
@@ -91,6 +92,7 @@
     "@playwright/test": "^1.48.1",
     "@types/dagre": "^0.7.52",
     "@types/diff": "^5.2.2",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.merge": "4.6.9",
     "@types/node": "^20.14.2",