@eventcatalog/core 2.0.12 → 2.0.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @eventcatalog/core
 
+## 2.0.13
+
+### Patch Changes
+
+- 1e4c805: feat(core): Adding <SchemaViewer /> component
+
 ## 2.0.12
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,7 @@
     "astro": "astro",
     "scripts:hydrate-content": "node scripts/catalog-to-astro-content-directory.js",
     "start:catalog": "node scripts/start-catalog-locally.js",
-    "verify-build:catalog": "rimraf packages/eventcatalog/dist && npm run build:cd",
+    "verify-build:catalog": "rimraf dist && npm run build:cd",
     "changeset": "changeset",
     "release": "changeset publish",
     "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json}\"",
@@ -36,6 +36,8 @@
     "@changesets/cli": "^2.27.5",
     "@headlessui/react": "^2.0.3",
     "@heroicons/react": "^2.1.3",
+    "@stoplight/json-schema-viewer": "^4.7.0",
+    "@stoplight/mosaic": "^1.53.2",
     "@tailwindcss/typography": "^0.5.13",
     "@tanstack/react-table": "^8.17.3",
     "@types/dagre": "^0.7.52",

package/src/components/MDX/Admonition.tsx

@@ -25,8 +25,8 @@ export default function Admonition({ children, type = 'info', className = '' }:
     <div className={`bg-${color}-50 border-l-4 border-${color}-400 my-4 ${className}`}>
       <div className="flex">
         <div className="ml-3 py-2 text-sm flex items-center">
-          <Icon className={`inline-block mr-2 h-5 w-5 text-${color}-400`} aria-hidden="true" />
-          {children}
+          <Icon className={`block mr-2 h-7 w-7 text-${color}-400`} aria-hidden="true" />
+          <div>{children}</div>
         </div>
       </div>
     </div>

package/src/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -0,0 +1,94 @@
+---
+const { catalog, id } = Astro.props;
+import fs from 'node:fs/promises';
+import { existsSync } from 'fs';
+import path from 'path';
+import SchemaViewerClient from './SchemaViewer'
+import Admonition from '../Admonition';
+let schemas = [];
+
+function findSchemaViewers(document: string) {
+  // Define regex pattern to match <SchemaViewer ... />
+  const pattern = /<SchemaViewer\s+([^>]*)\/>/g;
+  
+  // Find all matches of the pattern
+  const matches = [...document.matchAll(pattern)];
+  
+  // Extract the properties of each SchemaViewer
+  const schemaViewers = matches.map(match => {
+    const propsString = match[1];
+    const props = {};
+
+    // Use regex to extract key-value pairs from propsString
+    const propsPattern = /(\w+)=["']([^"']+)["']/g;
+    let propMatch;
+    while ((propMatch = propsPattern.exec(propsString)) !== null) {
+      const key = propMatch[1];
+      const value = propMatch[2];
+      // @ts-ignore
+      props[key] = value;
+    }
+
+    return props;
+  });
+
+  return schemaViewers;
+}
+
+try {
+    const file = await fs.readFile(catalog.absoluteFilePath, 'utf-8');
+    const schemaViewers = findSchemaViewers(file);
+
+    // Loop around all the possible SchemaViewers in the file.
+    const getAllComponents = schemaViewers.map(async (schemaViewerProps: any) => {
+
+      const schemaPath = path.join(catalog.filePath, schemaViewerProps.file)
+      const exists = existsSync(schemaPath);
+      let schema;
+
+      if(exists) {
+        // Load the schema for the component
+        schema = await fs.readFile(schemaPath, 'utf-8');
+        schema = JSON.parse(schema);
+      }
+
+      return {
+        id: schemaViewerProps.id || id,
+        exists,
+        schema,
+        schemaPath,
+        ...schemaViewerProps
+      }
+    });
+    
+    schemas = await Promise.all(getAllComponents);
+
+} catch (error) {
+    console.log('Failed to process schemas')
+    console.log(error);
+}
+
+---
+<section class="space-y-4">
+{schemas.length > 0 &&
+  schemas.map((schema) => (
+    <div>
+      
+      {schema.exists && 
+        <SchemaViewerClient {...schema} client:load />
+      }
+
+      {/* User has tried to load the schema, but it was not found on file system */}
+      {!schema.exists && (
+        <Admonition type="warning">
+          <>
+            <span class="block font-bold">{`<SchemaViewer/>`} failed to load</span>
+            <span class="block">Tried to load schema from {schema.schemaPath}, but no schema can be found</span>
+          </>
+        </Admonition>
+      )}
+
+    </div>
+  ))
+}
+</section>

package/src/components/MDX/SchemaViewer/SchemaViewer.module.css

@@ -0,0 +1,9 @@
+/* Custom styling for the schema viewer */
+.schemaViewer :global(.svg-inline--fa) {
+  width: 1.25em;
+  height: 1em;
+}
+
+.schemaViewer p, span {
+  color: rgb(111, 111, 111) !important;
+}

package/src/components/MDX/SchemaViewer/SchemaViewer.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+
+// @ts-ignore
+import { JsonSchemaViewer } from '@stoplight/json-schema-viewer';
+import styles from './SchemaViewer.module.css';
+
+import '@stoplight/mosaic/styles.css';
+import { createPortal } from 'react-dom';
+
+type Props = {
+  id: string;
+  file: string;
+  renderRootTreeLines?: boolean;
+  hideExamples?: boolean;
+  defaultExpandedDepth?: number;
+  maxHeight?: string;
+  schema: any;
+  catalog: any;
+  title?: string;
+};
+
+const SchemaViewer = ({
+  id,
+  maxHeight = '500',
+  renderRootTreeLines = true,
+  hideExamples = false,
+  defaultExpandedDepth = 3,
+  title,
+  schema,
+}: Props) => {
+  const [elem, setElem] = useState(null);
+  useEffect(() => {
+    // @ts-ignore
+    setElem(document.getElementById(`${id}-SchemaViewer-portal`));
+  }, []);
+
+  if (!elem) return null;
+
+  return (
+    <div>
+      {createPortal(
+        <section className="not-prose space-y-2 ">
+          {title && <h2 className="text-3xl font-bold">{title}</h2>}
+          <div className="border border-gray-100 p-2 schemaViewer">
+            <JsonSchemaViewer
+              schema={schema}
+              emptyText="No schema defined"
+              maxHeight={parseInt(maxHeight, 10)}
+              defaultExpandedDepth={defaultExpandedDepth}
+              renderRootTreeLines={renderRootTreeLines}
+              hideExamples={hideExamples}
+              className={styles.schemaViewer}
+            />
+          </div>
+        </section>,
+        elem
+      )}
+    </div>
+  );
+};
+
+export default SchemaViewer;

package/src/components/MDX/SchemaViewer/SchemaViewerPortal.tsx

@@ -0,0 +1,5 @@
+const SchemaViewerPortal = (props: any) => {
+  return <div id={`${props.id}-SchemaViewer-portal`} />;
+};
+
+export default SchemaViewerPortal;

package/src/components/MDX/components.tsx

@@ -1,23 +1,25 @@
-// Astro components
-
 // React components
 import Schema from '@components/MDX/Schema';
 import File from '@components/MDX/File';
 import Accordion from '@components/MDX/Accordion/Accordion.astro';
 import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
 import Admonition from '@components/MDX/Admonition';
-import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI';
 
+//  Portals: required for server/client components
+import NodeGraphPortal from '@components/MDX/NodeGraph/NodeGraphPortal';
+import SchemaViewerPortal from '@components/MDX/SchemaViewer/SchemaViewerPortal';
+
 const components = (props: any) => {
   return {
-    AccordionGroup,
     Accordion,
-    OpenAPI: (mdxProp: any) => <OpenAPI {...mdxProp} {...props} />,
+    AccordionGroup,
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
-    Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),
+    SchemaViewer: (mdxProp: any) => SchemaViewerPortal({ ...props.data, ...mdxProp }),
+    OpenAPI: (mdxProp: any) => <OpenAPI {...mdxProp} {...props} />,
+    Schema: (mdxProp: any) => Schema({ ...props, ...mdxProp }),
   };
 };
 

package/src/pages/docs/[type]/[id]/[version]/index.astro

@@ -16,6 +16,7 @@ import { EnvelopeIcon, PencilIcon, RectangleGroupIcon, ServerIcon } from '@heroi
 import { getDomains } from '@utils/domains/domains';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 import type { CollectionTypes } from '@types';
+import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
 
 export async function getStaticPaths() {
   const events = await getEvents();
@@ -67,6 +68,7 @@ const badges = [
   getBadge(),
   ...contentBadges
 ];
+
 ---
 
 <DocsLayout title={pageTitle} description={props.data.summary}>
@@ -90,13 +92,6 @@ const badges = [
             )
           }
         </div>
-
-        <!-- <div class="hidden md:block opacity-50 md:pr-10">
-          {props.collection === 'services' && <ServerIcon className="w-20 h-20 text-pink-500" />}
-          {props.collection === 'events' && <EnvelopeIcon className="w-20 h-20 text-orange-500" />}
-          {props.collection === 'commands' && <EnvelopeIcon className="w-20 h-20 text-blue-500" />}
-          {props.collection === 'domains' && <RectangleGroupIcon className="w-20 h-20 text-yellow-500" />}
-        </div> -->
       </div>
 
       <div>
@@ -131,9 +126,11 @@ const badges = [
       </div>
 
       <div class="prose prose-md py-4 w-full">
-        <Content components={components(props)} />
+          <Content components={components(props)} />
       </div>
       <div>
+        <!-- @ts-ignore -->
+        <SchemaViewer id={props.data.id} catalog={props.catalog}  />
         <NodeGraph id={props.data.id} collection={props.collection} version={props.data.version} mode="simple" href={{ label: 'Open in Visualiser', url: `/visualiser/${props.collection}/${props.data.id}/${props.data.version}`}} />
       </div>
       <footer class="py-4 space-y-8 divide-y divide-gray-200/60">
@@ -177,7 +174,16 @@ const badges = [
 
 </style>
 
+
+<script define:vars={{ props }}>
+  // Fix to pass information to componets that are client side only
+  // and require catalog information
+  window.eventcatalog = {};
+  window.eventcatalog[`${props.collection}-${props.data.id}`] = props.catalog;
+</script>
+
 <script>
+
   /**
    * @params {HTMLCollectionOf<HTMLElement>} graphs
    */

package/src/utils/commands.ts

@@ -1,7 +1,9 @@
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-import { getVersionForCollectionItem, getVersions } from './collections/util';
+import { getVersionForCollectionItem } from './collections/util';
+
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 type Command = CollectionEntry<'commands'> & {
   catalog: {
@@ -51,6 +53,7 @@ export const getCommands = async ({ getAllVersions = true }: Props = {}): Promis
       },
       catalog: {
         path: path.join(command.collection, command.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, command.collection, command.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', command.collection, command.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', command.collection, command.id.replace('/index.mdx', '')),
         type: 'command',

package/src/utils/domains/domains.ts

@@ -3,6 +3,8 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
 
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
+
 export type Domain = CollectionEntry<'domains'>;
 
 interface Props {
@@ -41,6 +43,7 @@ export const getDomains = async ({ getAllVersions = true }: Props = {}): Promise
       },
       catalog: {
         path: path.join(domain.collection, domain.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, domain.collection, domain.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', domain.collection, domain.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', domain.collection, domain.id.replace('/index.mdx', '')),
         type: 'service',

package/src/utils/events.ts

@@ -1,7 +1,9 @@
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-import { getVersionForCollectionItem, getVersions } from './collections/util';
+import { getVersionForCollectionItem } from './collections/util';
+
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 type Event = CollectionEntry<'events'> & {
   catalog: {
@@ -53,6 +55,7 @@ export const getEvents = async ({ getAllVersions = true }: Props = {}): Promise<
       },
       catalog: {
         path: path.join(event.collection, event.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, event.collection, event.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', event.collection, event.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', event.collection, event.id.replace('/index.mdx', '')),
         type: 'event',

package/src/utils/services/services.ts

@@ -2,10 +2,8 @@ import { getVersionForCollectionItem, getVersions } from '@utils/collections/uti
 import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import path from 'path';
-// import { getEvents } from './events';
-// import { getCommands } from './commands';
 
-// import type { Service as ServiceInterface } from '../types/index'
+const PROJECT_DIR = process.env.PROJECT_DIR || process.cwd();
 
 export type Service = CollectionEntry<'services'>;
 
@@ -79,6 +77,7 @@ export const getServices = async ({ getAllVersions = true }: Props = {}): Promis
       },
       catalog: {
         path: path.join(service.collection, service.id.replace('/index.mdx', '')),
+        absoluteFilePath: path.join(PROJECT_DIR, service.collection, service.id.replace('/index.mdx', '/index.md')),
         filePath: path.join(process.cwd(), 'src', 'catalog-files', service.collection, service.id.replace('/index.mdx', '')),
         publicPath: path.join('/generated', service.collection, service.id.replace('/index.mdx', '')),
         type: 'service',