@eventcatalog/core 0.3.4 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 0.5.0
+
+### Minor Changes
+
+- [`a790134`](https://github.com/boyney123/eventcatalog/commit/a7901349fc12efce430f5aeda87d5befb03bd628) [#303](https://github.com/boyney123/eventcatalog/pull/303) Thanks [@dpwdec](https://github.com/dpwdec)! - feat: added new badges for event, services and domains
+
+## 0.4.0
+
+### Minor Changes
+
+- [`cda7105`](https://github.com/boyney123/eventcatalog/commit/cda7105b03e5d5aa6fc9451552cc89c1e88e8859) [#304](https://github.com/boyney123/eventcatalog/pull/304) Thanks [@lcsbltm](https://github.com/lcsbltm)! - feat: added support for asyncapi file in service directory. Now supports new AsyncAPI MDX component.
+
 ## 0.3.4
 
 ### Patch Changes

package/components/Grids/DomainGrid.tsx

@@ -28,6 +28,14 @@ function DomainGrid({ domains = [] }: DomainGridProps) {
                 <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
                   <div>
                     <span className="text-gray-900 font-bold">{domain.name}</span>
+                    {domain.badges?.map((badge) => (
+                      <span
+                        key={`${domain.name}-${badge.content}`}
+                        className={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${badge.backgroundColor}-100 text-${badge.textColor}-800`}
+                      >
+                        {badge.content}
+                      </span>
+                    ))}
                     <div className="text-gray-500 text-xs font-normal mt-2 line-clamp-3">{domain.summary}</div>
                   </div>
                   <div className="flex space-x-4 text-xs pt-2 relative bottom-0 left-0">

package/components/Grids/EventGrid.tsx

@@ -45,6 +45,14 @@ function EventGrid({ events = [], showMermaidDiagrams = false }: EventGridProps)
                       <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                         v{event.version}
                       </span>
+                      {event.badges?.map((badge) => (
+                        <span
+                          key={`${event.name}-${badge.content}`}
+                          className={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${badge.backgroundColor}-100 text-${badge.textColor}-800`}
+                        >
+                          {badge.content}
+                        </span>
+                      ))}
                       {isDraft && (
                         <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-gray-100">
                           Draft

package/components/Grids/ServiceGrid.tsx

@@ -33,6 +33,14 @@ function ServiceGrid({ services = [], showMermaidDiagrams = false }: ServiceGrid
                   <div className="p-4 text-sm space-y-2 flex flex-col justify-between h-full">
                     <div>
                       <span className="text-gray-900 font-bold">{service.name}</span>
+                      {service.badges?.map((badge) => (
+                        <span
+                          key={`${service.name}-${badge.content}`}
+                          className={`ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-${badge.backgroundColor}-100 text-${badge.textColor}-800`}
+                        >
+                          {badge.content}
+                        </span>
+                      ))}
                       {isDraft && (
                         <span className="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-500 text-gray-100">
                           Draft

package/components/Mdx/AsyncApiSpec.tsx

@@ -0,0 +1,22 @@
+import dynamic from 'next/dynamic';
+import '@asyncapi/react-component/styles/default.min.css';
+
+const AsyncApiComponent = dynamic(import('@asyncapi/react-component'), { ssr: false });
+
+const config = {
+  show: {
+    errors: false,
+  },
+};
+
+interface AsyncApiSpecProps {
+  spec: string;
+}
+
+export default function AsyncApiSpec({ spec }: AsyncApiSpecProps) {
+  return (
+    <div className={`my-4 border border-gray-300 border-dashed px-5 `}>
+      <AsyncApiComponent schema={spec} config={config} />
+    </div>
+  );
+}

package/lib/__tests__/assets/domains/User/events/UserCreated/index.md

@@ -10,7 +10,11 @@ consumers:
 owners:
     - dboyne
     - mSmith
-draft: true    
+draft: true
+badges:
+    - content: New!
+      backgroundColor: blue
+      textColor: blue    
 ---
 
 # Testing

package/lib/__tests__/assets/domains/User/index.md

@@ -7,6 +7,10 @@ owners:
     - dboyne
     - mSmith
 draft: true    
+badges:
+    - content: New!
+      backgroundColor: blue
+      textColor: blue
 ---
 
 # Testing

package/lib/__tests__/assets/domains/User/services/User Service/index.md

@@ -10,6 +10,10 @@ repository:
 externalLinks:
     - label: AsyncAPI Specification
       url: https://studio.asyncapi.com/#schema-lightMeasuredPayload
+badges:
+  - content: New!
+    backgroundColor: blue
+    textColor: blue
 ---
 
 # Testing

package/lib/__tests__/assets/events/AddedItemToCart/index.md

@@ -11,7 +11,11 @@ consumers:
 owners:
     - dboyne
     - mSmith
-draft: true    
+draft: true
+badges:
+    - content: Deprecated
+      backgroundColor: red
+      textColor: red
 ---
 
 # Testing

package/lib/__tests__/assets/services/Basket Service/index.md

@@ -10,6 +10,13 @@ repository:
 externalLinks:
     - label: AsyncAPI Specification
       url: https://studio.asyncapi.com/#schema-lightMeasuredPayload
+badges:
+  - content: Extra!
+    backgroundColor: green
+    textColor: green
+  - content: Long form
+    backgroundColor: yellow
+    textColor: red
 ---
 
 Simple API that handles interactions between users and their baskets. Use this service to add, remove and query the status of a users basket.

package/lib/__tests__/domains.spec.ts

@@ -33,6 +33,13 @@ describe('domains lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
         },
         {
           name: 'UserRemoved',
@@ -44,6 +51,7 @@ describe('domains lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [],
         },
       ]);
     });
@@ -71,6 +79,13 @@ describe('domains lib', () => {
           ],
           publishes: [],
           subscribes: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
         },
       ]);
     });
@@ -86,6 +101,13 @@ describe('domains lib', () => {
         owners: ['dboyne', 'mSmith'],
         tags: [],
         externalLinks: [],
+        badges: [
+          {
+            content: 'New!',
+            backgroundColor: 'blue',
+            textColor: 'blue',
+          },
+        ],
         events: [
           {
             name: 'UserCreated',
@@ -97,6 +119,13 @@ describe('domains lib', () => {
             owners: ['dboyne', 'mSmith'],
             externalLinks: [],
             historicVersions: [],
+            badges: [
+              {
+                content: 'New!',
+                backgroundColor: 'blue',
+                textColor: 'blue',
+              },
+            ],
             producers: [
               {
                 name: 'Application API',
@@ -118,6 +147,7 @@ describe('domains lib', () => {
             owners: ['dboyne', 'mSmith'],
             externalLinks: [],
             historicVersions: [],
+            badges: [],
             producers: [
               {
                 name: 'Application API',
@@ -149,6 +179,13 @@ describe('domains lib', () => {
             ],
             publishes: [],
             subscribes: [],
+            badges: [
+              {
+                content: 'New!',
+                backgroundColor: 'blue',
+                textColor: 'blue',
+              },
+            ],
           },
         ],
       });
@@ -169,6 +206,13 @@ describe('domains lib', () => {
           owners: ['dboyne', 'mSmith'],
           tags: [],
           externalLinks: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
           events: [
             {
               name: 'UserCreated',
@@ -180,6 +224,13 @@ describe('domains lib', () => {
               owners: ['dboyne', 'mSmith'],
               externalLinks: [],
               historicVersions: [],
+              badges: [
+                {
+                  content: 'New!',
+                  backgroundColor: 'blue',
+                  textColor: 'blue',
+                },
+              ],
               producers: [
                 {
                   name: 'Application API',
@@ -201,6 +252,7 @@ describe('domains lib', () => {
               owners: ['dboyne', 'mSmith'],
               externalLinks: [],
               historicVersions: [],
+              badges: [],
               producers: [
                 {
                   name: 'Application API',
@@ -232,6 +284,13 @@ describe('domains lib', () => {
               ],
               publishes: [],
               subscribes: [],
+              badges: [
+                {
+                  content: 'New!',
+                  backgroundColor: 'blue',
+                  textColor: 'blue',
+                },
+              ],
             },
           ],
         },
@@ -255,6 +314,13 @@ describe('domains lib', () => {
           owners: ['dboyne', 'mSmith'],
           tags: [],
           externalLinks: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
           events: [
             {
               name: 'UserCreated',
@@ -266,6 +332,13 @@ describe('domains lib', () => {
               owners: ['dboyne', 'mSmith'],
               externalLinks: [],
               historicVersions: [],
+              badges: [
+                {
+                  content: 'New!',
+                  backgroundColor: 'blue',
+                  textColor: 'blue',
+                },
+              ],
               producers: [
                 {
                   name: 'Application API',
@@ -287,6 +360,7 @@ describe('domains lib', () => {
               owners: ['dboyne', 'mSmith'],
               externalLinks: [],
               historicVersions: [],
+              badges: [],
               producers: [
                 {
                   name: 'Application API',
@@ -318,6 +392,13 @@ describe('domains lib', () => {
               ],
               publishes: [],
               subscribes: [],
+              badges: [
+                {
+                  content: 'New!',
+                  backgroundColor: 'blue',
+                  textColor: 'blue',
+                },
+              ],
             },
           ],
         },

package/lib/__tests__/events.spec.ts

@@ -34,6 +34,13 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           domain: null,
           historicVersions: [],
+          badges: [
+            {
+              content: 'Deprecated',
+              backgroundColor: 'red',
+              textColor: 'red',
+            },
+          ],
           consumers: [
             {
               name: 'Customer Portal',
@@ -126,6 +133,13 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           domain: 'User',
           historicVersions: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
           externalLinks: [],
           consumers: [
             {
@@ -208,6 +222,13 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [
+            {
+              content: 'Deprecated',
+              backgroundColor: 'red',
+              textColor: 'red',
+            },
+          ],
         },
         {
           name: 'EmailSent',
@@ -219,6 +240,7 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [],
         },
         {
           name: 'EventWithSchemaAndExamples',
@@ -230,6 +252,7 @@ describe('events lib', () => {
           owners: [],
           externalLinks: [],
           historicVersions: [],
+          badges: [],
         },
         {
           name: 'EventWithVersions',
@@ -241,6 +264,7 @@ describe('events lib', () => {
           owners: [],
           externalLinks: [],
           historicVersions: ['0.0.1'],
+          badges: [],
         },
         {
           name: 'UserCreated',
@@ -252,6 +276,13 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
         },
         {
           name: 'UserRemoved',
@@ -263,6 +294,7 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [],
         },
       ]);
     });
@@ -325,6 +357,13 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [
+            {
+              content: 'Deprecated',
+              backgroundColor: 'red',
+              textColor: 'red',
+            },
+          ],
         },
         {
           name: 'EmailSent',
@@ -336,6 +375,7 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [],
         },
         {
           name: 'UserCreated',
@@ -347,6 +387,13 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
         },
         {
           name: 'UserRemoved',
@@ -358,6 +405,7 @@ describe('events lib', () => {
           owners: ['dboyne', 'mSmith'],
           externalLinks: [],
           historicVersions: [],
+          badges: [],
         },
       ]);
     });

package/lib/__tests__/services.spec.ts

@@ -36,6 +36,18 @@ describe('services', () => {
           ],
           publishes: [],
           subscribes: [],
+          badges: [
+            {
+              content: 'Extra!',
+              backgroundColor: 'green',
+              textColor: 'green',
+            },
+            {
+              content: 'Long form',
+              backgroundColor: 'yellow',
+              textColor: 'red',
+            },
+          ],
         },
         {
           name: 'Email Platform',
@@ -67,9 +79,11 @@ describe('services', () => {
               owners: ['dboyne', 'mSmith'],
               externalLinks: [],
               historicVersions: [],
+              badges: [],
             },
           ],
           subscribes: [],
+          badges: [],
         },
         {
           name: 'Payment Service',
@@ -81,6 +95,7 @@ describe('services', () => {
           externalLinks: [],
           publishes: [],
           subscribes: [],
+          badges: [],
         },
         {
           name: 'User Service',
@@ -100,6 +115,13 @@ describe('services', () => {
           ],
           publishes: [],
           subscribes: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
         },
       ]);
     });
@@ -141,6 +163,7 @@ describe('services', () => {
               producerNames: ['Email Platform'],
               consumerNames: [],
               historicVersions: [],
+              badges: [],
               domain: null,
               externalLinks: [],
               owners: ['dboyne', 'mSmith'],
@@ -148,6 +171,7 @@ describe('services', () => {
           ],
           subscribes: [],
           externalLinks: [],
+          badges: [],
         },
       ]);
     });
@@ -163,6 +187,7 @@ describe('services', () => {
         owners: ['dboyne'],
         domain: null,
         openAPISpec: null,
+        asyncAPISpec: null,
         repository: {
           url: 'https://github.com/boyney123/EmailPlatform',
           language: 'JavaScript',
@@ -184,6 +209,7 @@ describe('services', () => {
             producerNames: ['Email Platform'],
             consumerNames: [],
             historicVersions: [],
+            badges: [],
             domain: null,
             externalLinks: [],
             owners: ['dboyne', 'mSmith'],
@@ -191,6 +217,7 @@ describe('services', () => {
         ],
         subscribes: [],
         externalLinks: [],
+        badges: [],
       });
 
       // @ts-ignore
@@ -207,6 +234,7 @@ describe('services', () => {
           domain: 'User',
           owners: ['mSmith'],
           openAPISpec: null,
+          asyncAPISpec: null,
           repository: {
             language: 'JavaScript',
             url: 'https://github.com/boyney123/pretend-basket-service',
@@ -220,6 +248,13 @@ describe('services', () => {
           ],
           publishes: [],
           subscribes: [],
+          badges: [
+            {
+              content: 'New!',
+              backgroundColor: 'blue',
+              textColor: 'blue',
+            },
+          ],
         });
 
         // @ts-ignore

package/lib/domains.ts

@@ -9,8 +9,8 @@ import { getAllEventsFromPath } from './events';
 import { getAllServicesFromPath } from './services';
 
 const buildDomain = (domainFrontMatter: any): Domain => {
-  const { name, summary, owners = [], tags = [], externalLinks = [] } = domainFrontMatter;
-  return { name, summary, owners, tags, externalLinks };
+  const { name, summary, owners = [], tags = [], externalLinks = [], badges = [] } = domainFrontMatter;
+  return { name, summary, owners, tags, externalLinks, badges };
 };
 
 export const getUniqueDomainNamesFromEvents = (events: Event[]) => {

package/lib/events.ts

@@ -20,8 +20,9 @@ const parseEventFrontMatterIntoEvent = (eventFrontMatter: any): Event => {
     consumers = [],
     owners = [],
     externalLinks = [],
+    badges = [],
   } = eventFrontMatter;
-  return { name, version, summary, domain, producerNames: producers, consumerNames: consumers, owners, externalLinks };
+  return { name, version, summary, domain, producerNames: producers, consumerNames: consumers, owners, externalLinks, badges };
 };
 
 const versionsForEvents = (pathToEvent) => {

package/lib/file-reader.ts

@@ -56,6 +56,19 @@ export const getOpenAPISpecFromDir = (pathToOpenAPISpecDir: string): string => {
   }
 };
 
+export const getAsyncAPISpecFromDir = (pathToAsyncAPISpecDir: string): string => {
+  try {
+    const files = fs.readdirSync(pathToAsyncAPISpecDir);
+
+    // See if any oas are in there, ignoring extension
+    const asyncAPIFile = files.find((fileName) => fileName.includes('asyncapi'));
+    if (!asyncAPIFile) throw new Error('No async api file found');
+    return fs.readFileSync(path.join(pathToAsyncAPISpecDir, asyncAPIFile), 'utf-8');
+  } catch (error) {
+    return null;
+  }
+};
+
 export const getLastModifiedDateOfFile = (filePath) => {
   const stats = fs.statSync(filePath);
   const lastModifiedDate = new Date(stats.mtime);

package/lib/services.ts

@@ -2,15 +2,24 @@ import fs from 'fs';
 import path from 'path';
 import { serialize } from 'next-mdx-remote/serialize';
 import { Service, Event } from '@eventcatalog/types';
-import { readMarkdownFile, getLastModifiedDateOfFile, getOpenAPISpecFromDir } from '@/lib/file-reader';
+import { readMarkdownFile, getLastModifiedDateOfFile, getOpenAPISpecFromDir, getAsyncAPISpecFromDir } from '@/lib/file-reader';
 import { MarkdownFile } from '../types/index';
 
 import { getAllEvents, getAllEventsThatHaveRelationshipWithService } from '@/lib/events';
 import { getAllServicesFromDomains } from '@/lib/domains';
 
 const buildService = (eventFrontMatter: any): Service => {
-  const { name, summary, domain = null, owners = [], repository = {}, tags = [], externalLinks = [] } = eventFrontMatter;
-  return { name, summary, domain, owners, repository, tags, externalLinks };
+  const {
+    name,
+    summary,
+    domain = null,
+    owners = [],
+    repository = {},
+    tags = [],
+    externalLinks = [],
+    badges = [],
+  } = eventFrontMatter;
+  return { name, summary, domain, owners, repository, tags, externalLinks, badges };
 };
 
 export const getServiceByPath = (serviceDirPath: string): Service => {
@@ -76,6 +85,7 @@ export const getServiceByName = async ({
         ...service,
         domain,
         openAPISpec: getOpenAPISpecFromDir(serviceDirectory),
+        asyncAPISpec: getAsyncAPISpecFromDir(serviceDirectory),
         ...getAllEventsThatHaveRelationshipWithService(service, events),
       },
       markdown: {