@eventcatalog/core 0.1.19 → 0.2.0

package/components/Sidebars/ServiceSidebar.tsx

@@ -1,21 +1,24 @@
 import React from 'react';
 import Link from 'next/link';
-import type { Service } from '@eventcatalog/types';
+import type { Event, Service } from '@eventcatalog/types';
 
-import { CubeIcon, TagIcon, ExternalLinkIcon } from '@heroicons/react/outline';
-import { useUser } from '@/hooks/EventCatalog';
+import { CubeIcon, CollectionIcon } from '@heroicons/react/outline';
 import getBackgroundColor from '@/utils/random-bg';
 
-const tailwindBgs = ['purple', 'pink', 'green', 'yellow', 'blue', 'indigo'];
+import ExternalLinks from './components/ExternalLinks';
+import Tags from './components/Tags';
+import Owners from './components/Owners';
+import ItemList from './components/ItemList';
+
+const getURLForEvent = (event: Event): string =>
+  event.domain ? `/domains/${event.domain}/events/${event.name}` : `/events/${event.name}`;
 
 interface ServiceSideBarProps {
   service: Service;
 }
 
 function ServiceSidebar({ service }: ServiceSideBarProps) {
-  const { getUserById } = useUser();
-
-  const { owners, subscribes, publishes, repository, tags = [], externalLinks } = service;
+  const { owners, subscribes, publishes, repository, tags = [], externalLinks, domain } = service;
   const { language, url: repositoryUrl } = repository;
 
   let languages = [];
@@ -31,79 +34,50 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
   }
 
   return (
-    <aside className="hidden xl:block xl:pl-8">
+    <aside className="hidden xl:block xl:pl-8 ">
       <h2 className="sr-only">Details</h2>
 
-      <div className="pt-6 py-6 space-y-8">
-        <div>
-          <h2 className="text-sm font-medium text-gray-500">
-            <CubeIcon className="h-5 w-5 text-indigo-400 inline-block mr-2" aria-hidden="true" />
-            Publishes Events ({publishes.length})
-          </h2>
-          <ul className="mt-2 leading-8">
-            {publishes.map((event) => (
-              <li className="inline " key={event.name}>
-                <Link href={`/events/${event.name}`}>
+      {publishes.length > 0 && (
+        <ItemList
+          title={`Publishes Events (${publishes.length})`}
+          titleIcon={{ icon: CubeIcon, className: 'text-indigo-400' }}
+          items={publishes.map((event) => ({ label: event.name, href: getURLForEvent(event), bgColor: 'indigo' }))}
+        />
+      )}
+
+      {subscribes.length > 0 && (
+        <ItemList
+          title={`Subscribes to Events (${subscribes.length})`}
+          titleIcon={{ icon: CubeIcon, className: 'text-green-400' }}
+          items={subscribes.map((event) => ({ label: event.name, href: getURLForEvent(event), bgColor: 'green' }))}
+        />
+      )}
+
+      {domain && (
+        <div className="border-t border-gray-200 py-6 space-y-8">
+          <div>
+            <h2 className="text-sm font-medium text-gray-500">
+              <CollectionIcon className="h-5 w-5 text-yellow-400 inline-block mr-2" aria-hidden="true" />
+              Domain
+            </h2>
+            <ul className="mt-2 leading-8">
+              <li className="inline" key={domain}>
+                <Link href={`/domains/${domain}`}>
                   <a href="#" className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
                     <div className="absolute flex-shrink-0 flex items-center justify-center">
-                      <span className="h-1.5 w-1.5 rounded-full bg-indigo-500 animate animate-pulse" aria-hidden="true" />
+                      <span className="h-1.5 w-1.5 rounded-full bg-yellow-500 animate animate-pulse" aria-hidden="true" />
                     </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900 truncate max-w-xs">{event.name}</div>
+                    <div className="ml-3.5 text-sm font-medium text-gray-900">{domain}</div>
                   </a>
                 </Link>
               </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-      <div className="border-t border-gray-200 py-6 space-y-8">
-        <div>
-          <h2 className="text-sm font-medium text-gray-500">
-            <CubeIcon className="h-5 w-5 text-green-400 inline-block mr-2" aria-hidden="true" />
-            Subscribes to Events ({subscribes.length})
-          </h2>
-          <ul className="mt-2 leading-8">
-            {subscribes.map((event) => (
-              <li className="inline" key={event.name}>
-                <Link href={`/events/${event.name}`}>
-                  <a className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
-                    <div className="absolute flex-shrink-0 flex items-center justify-center">
-                      <span className="h-1.5 w-1.5 rounded-full bg-green-500  animate animate-pulse" aria-hidden="true" />
-                    </div>
-                    <div className="ml-3.5 text-sm font-medium text-gray-900 truncate max-w-xs">{event.name}</div>
-                  </a>
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-
-      <div className="border-t border-gray-200 py-6 space-y-8">
-        <div>
-          <h2 className="text-sm font-medium text-gray-500">Service Owners ({owners.length})</h2>
-          <ul className="mt-4 leading-8 space-y-2">
-            {owners.map((owner) => {
-              const user = getUserById(owner);
-
-              if (!user) return null;
-
-              return (
-                <li className="flex justify-start" key={user.id}>
-                  <Link href={`/users/${user.id}`}>
-                    <a className="flex items-center space-x-3">
-                      <div className="flex-shrink-0">
-                        <img className="h-5 w-5 rounded-full" src={user.avatarUrl} alt="" />
-                      </div>
-                      <div className="text-sm font-medium text-gray-900">{user.name}</div>
-                    </a>
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
+            </ul>
+          </div>
         </div>
-      </div>
+      )}
+
+      {owners.length > 0 && <Owners owners={owners} />}
+
       {repository?.url && (
         <div className="border-t border-gray-200 py-6 space-y-8">
           <div className="space-y-3">
@@ -145,60 +119,8 @@ function ServiceSidebar({ service }: ServiceSideBarProps) {
         </a>
       </Link>
 
-      {externalLinks.length > 0 && (
-        <div className="border-t border-gray-200 py-2 space-y-8">
-          <div className="space-y-3">
-            {externalLinks.map((tag) => (
-              <a
-                href={tag.url}
-                target="_blank"
-                type="button"
-                className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-teal-300 shadow-sm text-sm font-medium rounded-md text-teal-800 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-200"
-                rel="noreferrer"
-                key={tag.url}
-              >
-                <ExternalLinkIcon className="-ml-1 mr-2 h-5 w-5 text-teal-200" aria-hidden="true" />
-                <span>{`${tag.label}`}</span>
-              </a>
-            ))}
-          </div>
-        </div>
-      )}
-      {tags.length > 0 && (
-        <div className="border-t border-gray-200 py-6 space-y-8">
-          <div>
-            <h2 className="text-sm font-medium text-gray-500">
-              <TagIcon className="h-5 w-5 text-gray-400 inline-block mr-2" aria-hidden="true" />
-              Tags
-            </h2>
-            <div className="mt-3 space-y-2">
-              {tags.map(({ label, url }, index) => {
-                const color = tailwindBgs[index % tailwindBgs.length];
-
-                if (url) {
-                  return (
-                    <a href={url} className="inline-block underline" target="_blank" rel="noreferrer">
-                      <span
-                        className={`underline inline-block mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-${color}-100 text-${color}-800`}
-                      >
-                        {label}
-                      </span>
-                    </a>
-                  );
-                }
-
-                return (
-                  <span
-                    className={`inline-block mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-${color}-100 text-${color}-800`}
-                  >
-                    {label}
-                  </span>
-                );
-              })}
-            </div>
-          </div>
-        </div>
-      )}
+      {externalLinks.length > 0 && <ExternalLinks externalLinks={externalLinks} />}
+      {tags.length > 0 && <Tags tags={tags} />}
     </aside>
   );
 }

package/components/Sidebars/components/ExternalLinks.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+
+function ExternalLinks({ externalLinks }: { externalLinks: any[] }) {
+  if (externalLinks.length === 0) return null;
+  return (
+    <div className=" py-2 space-y-8">
+      <div className="space-y-3">
+        {externalLinks.map((tag) => (
+          <a
+            href={tag.url}
+            target="_blank"
+            type="button"
+            className="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-teal-300 shadow-sm text-sm font-medium rounded-md text-teal-800 hover:bg-teal-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-200"
+            rel="noreferrer"
+            key={tag.url}
+          >
+            <ExternalLinkIcon className="-ml-1 mr-2 h-5 w-5 text-teal-200" aria-hidden="true" />
+            <span>{`${tag.label}`}</span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default ExternalLinks;

package/components/Sidebars/components/ItemList.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Link from 'next/link';
+import { CubeIcon } from '@heroicons/react/outline';
+
+function ItemList({ title, titleIcon: { icon: Icon = CubeIcon, className: iconClassName }, items }: any) {
+  return (
+    <div className="pt-6 py-6 space-y-8">
+      <div>
+        <h2 className="text-sm font-medium text-gray-500">
+          <Icon className={`h-5 w-5  inline-block mr-2 ${iconClassName}`} aria-hidden="true" />
+          {title}
+        </h2>
+        <ul className="mt-2 leading-8">
+          {items.map((item) => (
+            <li className="inline mr-2" key={item.label}>
+              <Link href={item.href}>
+                <a className="relative inline-flex items-center rounded-full border border-gray-300 px-3 py-0.5">
+                  <div className="absolute flex-shrink-0 flex items-center justify-center">
+                    <span className={`h-1.5 w-1.5 rounded-full bg-${item.bgColor}-500`} aria-hidden="true" />
+                  </div>
+                  <div className="ml-3.5 text-sm font-medium text-gray-900 truncate max-w-xs">{item.label}</div>
+                </a>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default ItemList;

package/components/Sidebars/components/Owners.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import Link from 'next/link';
+import type { Owner } from '@eventcatalog/types';
+import { useUser } from '@/hooks/EventCatalog';
+
+function Owners({ owners }: { owners: Owner[] | string[] }) {
+  const { getUserById } = useUser();
+
+  return (
+    <div className=" py-6 space-y-8">
+      <div>
+        <h2 className="text-sm font-medium text-gray-500">Domain Owners ({owners.length})</h2>
+        <ul className="mt-4 leading-8 space-y-2">
+          {owners.map((owner) => {
+            const user = getUserById(owner);
+
+            if (!user) return null;
+
+            return (
+              <li className="flex justify-start" key={user.id}>
+                <Link href={`/users/${user.id}`}>
+                  <a className="flex items-center space-x-3">
+                    <div className="flex-shrink-0">
+                      <img className="h-5 w-5 rounded-full" src={user.avatarUrl} alt="" />
+                    </div>
+                    <div className="text-sm font-medium text-gray-900">{user.name}</div>
+                  </a>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default Owners;

package/components/Sidebars/components/Tags.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Tag } from '@eventcatalog/types';
+import { TagIcon } from '@heroicons/react/outline';
+
+const tailwindBgs = ['purple', 'pink', 'green', 'yellow', 'blue', 'indigo'];
+
+function Tags({ tags }: { tags: Tag[] }) {
+  return (
+    <div className=" py-6 space-y-8">
+      <div>
+        <h2 className="text-sm font-medium text-gray-500">
+          <TagIcon className="h-5 w-5 text-gray-400 inline-block mr-2" aria-hidden="true" />
+          Tags
+        </h2>
+        <div className="mt-3 space-y-2">
+          {tags.map(({ label, url }, index) => {
+            const color = tailwindBgs[index % tailwindBgs.length];
+
+            if (url) {
+              return (
+                <a href={url} className="inline-block underline" target="_blank" rel="noreferrer">
+                  <span
+                    className={`underline inline-block mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-${color}-100 text-${color}-800`}
+                  >
+                    {label}
+                  </span>
+                </a>
+              );
+            }
+
+            return (
+              <span
+                className={`inline-block mr-2 items-center px-2.5 py-0.5 rounded-full text-xs font-medium -top-0.5 relative bg-${color}-100 text-${color}-800`}
+              >
+                {label}
+              </span>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Tags;

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

@@ -0,0 +1,16 @@
+---
+name: UserCreated
+version: 0.0.1
+summary: |
+  Holds information about when the user has been created.
+producers:
+    - Application API
+consumers:
+    - Customer Portal
+owners:
+    - dboyne
+    - mSmith
+draft: true    
+---
+
+# Testing

package/lib/__tests__/assets/domains/User/events/UserRemoved/examples/Basic.cs

@@ -0,0 +1,31 @@
+public static async Task ConnectAsync()
+{
+  string clientId = Guid.NewGuid().ToString();
+  string mqttURI = {REPLACE THIS WITH YOUR MQTT SERVER URI HERE}
+  string mqttUser = { REPLACE THIS WITH YOUR MQTT USER HERE }
+  string mqttPassword = { REPLACE THIS WITH YOUR MQTT PASSWORD HERE }
+  int mqttPort = { REPLACE THIS WITH YOUR MQTT PORT HERE }
+  bool mqttSecure = {IF YOU ARE USING SSL Port THEN SET true OTHERWISE SET false}
+
+  var messageBuilder = new MqttClientOptionsBuilder()
+    .WithClientId(clientId)
+    .WithCredentials(mqttUser, mqttPassword)
+    .WithTcpServer(mqttURI, mqttPort)
+    .WithCleanSession();
+
+  var options = mqttSecure
+    ? messageBuilder
+      .WithTls()
+      .Build()
+    : messageBuilder
+      .Build();
+
+  var managedOptions = new ManagedMqttClientOptionsBuilder()
+    .WithAutoReconnectDelay(TimeSpan.FromSeconds(5))
+    .WithClientOptions(options)
+    .Build();
+
+  client = new MqttFactory().CreateManagedMqttClient();
+
+  await client.StartAsync(managedOptions);
+}

package/lib/__tests__/assets/domains/User/events/UserRemoved/examples/Basic.js

@@ -0,0 +1 @@
+export default true;

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

@@ -0,0 +1,16 @@
+---
+name: UserRemoved
+version: 0.0.1
+summary: |
+  Holds information about when the user has been removed.
+producers:
+    - Application API
+consumers:
+    - Customer Portal
+owners:
+    - dboyne
+    - mSmith
+draft: true    
+---
+
+# Testing

package/lib/__tests__/assets/domains/User/events/UserRemoved/schema.json

@@ -0,0 +1,4 @@
+{
+  "some-schema": true,
+  "does-not-really-matter-what-content-is-in-this-file": true
+}

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

@@ -0,0 +1,12 @@
+---
+name: User
+version: 0.0.1
+summary: |
+  User Domain
+owners:
+    - dboyne
+    - mSmith
+draft: true    
+---
+
+# Testing

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

@@ -0,0 +1,15 @@
+---
+name: User Service
+summary: |
+  CRUD based API to handle User information
+owners:
+  - mSmith
+repository:
+  language: JavaScript
+  url: https://github.com/boyney123/pretend-basket-service
+externalLinks:
+    - label: AsyncAPI Specification
+      url: https://studio.asyncapi.com/#schema-lightMeasuredPayload
+---
+
+# Testing

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

@@ -8,8 +8,6 @@ producers:
     - Application API
 consumers:
     - Customer Portal
-domains:
-    - Shopping
 owners:
     - dboyne
     - mSmith

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

@@ -3,7 +3,7 @@ name: Basket Service
 summary: |
   CRUD based API to handle Basket interactions for users of the shopping website.
 owners:
-    - mSmith
+  - mSmith
 repository:
   language: JavaScript
   url: https://github.com/boyney123/pretend-basket-service