@eventcatalog/core 1.2.7 → 2.0.1

package/src/components/Header.astro

@@ -0,0 +1,65 @@
+---
+import catalog from '@eventcatalog';
+// import Search from 'astro-pagefind/components/Search';
+import Search from '@components/Search.astro';
+
+const currentPath = Astro.url.pathname;
+
+const navItems = [
+  {
+    label: 'Docs',
+    href: '/docs',
+  },
+  {
+    label: 'Visualiser',
+    href: '/visualiser',
+  },
+  {
+    label: 'Discover',
+    href: '/discover/events',
+  }
+];
+
+---
+
+<nav class="md:fixed top-0 w-full z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl max-w-[70em]">
+  <div class="flex justify-between items-center">
+    <div class="w-1/3 flex space-x-2 items-center">
+      <a href="/docs" class="flex space-x-2 items-center">
+        <img src="/logo.png" class="w-8" />
+        <span class="hidden sm:inline-block text-[1em]">{catalog.title}</span>
+      </a>
+    </div>
+    <div class="w-1/3 md:block hidden">
+      <Search />
+      <!-- <Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} /> -->
+    </div>
+    <!-- <div class="w-1/3 px-2">
+      <div class="2/3">
+        <div class="relative mt-2 flex items-center">
+          <input
+            type="text"
+            name="search"
+            id="search"
+            class="block w-full px-2 rounded-md border-0 py-2 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+            placeholder="Find something..."
+          />
+          <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
+            <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd>
+          </div>
+        </div>
+      </div>
+    </div> -->
+    <div class="w-1/3 justify-end text-md">
+      <ul class="text-right flex justify-end space-x-8">
+        {navItems.map((item) => {
+          const isActive = currentPath.includes(item.href) ;
+          return <li class={`font-light ${isActive ? 'border-b-2 border-purple-500': ''}`}>
+          <a href={item.href}>{item.label}</a>
+        </li>
+        })}
+      </ul>
+    </div>
+  </div>
+</nav>
+

package/src/components/Lists/BasicList.tsx

@@ -0,0 +1,59 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+
+interface Props {
+  title: string;
+  color: string;
+  items: {
+    label: string;
+    version: string;
+    badge?: string;
+    href: string;
+    color: string;
+    active: boolean;
+  }[];
+  emptyMessage: string;
+}
+
+const BasicList = ({ title, items, emptyMessage, color = 'gray' }: Props) => {
+  return (
+    <div>
+      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5 py-2 ">
+        <Disclosure as="div" className="pb-4" defaultOpen={true}>
+          <DisclosureButton className="group flex w-full items-center justify-between">
+            <span className="font-semibold capitalize"> {title} </span>
+            <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+          </DisclosureButton>
+          <DisclosurePanel className="mt-2 text-sm/5 text-black/80">
+            <ul role="list" className="">
+              {items.map((item) => {
+                return (
+                  <li key={item.version} className="px-2 w-full text-md xl:text-lg border-l border-gray-200 py-1 ">
+                    <a
+                      className={`flex justify-between items-center w-full px-2 rounded-md font-normal   ${item.active ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`}
+                      href={item.href}
+                    >
+                      <span className="block">{item.label}</span>
+                      {item.version && (
+                        <span className="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">
+                          v{item.version}
+                        </span>
+                      )}
+                    </a>
+                  </li>
+                );
+              })}
+              {items.length === 0 && (
+                <li className="inline mr-2 leading-6 text-sm">
+                  <span className="text-gray-500">{emptyMessage}</span>
+                </li>
+              )}
+            </ul>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    </div>
+  );
+};
+
+export default BasicList;

package/src/components/Lists/OwnersList.tsx

@@ -0,0 +1,101 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+
+interface Props {
+  title: string;
+  owners: {
+    label: string;
+    badge?: string;
+    type: string;
+    avatarUrl?: string;
+    href: string;
+  }[];
+  emptyMessage: string;
+}
+
+const OwnersList2 = ({ title, owners, emptyMessage }: Props) => {
+  return (
+    <div>
+      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+        <Disclosure as="div" className="py-4" defaultOpen={owners.length <= 5}>
+          <DisclosureButton className="group flex w-full items-center justify-between">
+            <span className="font-light text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
+            <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+          </DisclosureButton>
+          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+            <ul role="list" className="divide-y divide-black/5">
+              {owners.map((item) => {
+                return (
+                  <li className="py-3" key={item.href}>
+                    <a className="flex items-center gap-x-3 group " href={item.href}>
+                      {item.type === 'users' && item.avatarUrl && (
+                        <img
+                          src={item.avatarUrl}
+                          alt={item.label}
+                          className="w-7 h-7 rounded-full border group-hover:border-purple-300"
+                        />
+                      )}
+                      {(item.type === 'teams' || !item.avatarUrl) && (
+                        <span className="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-purple-500">
+                          {item.label.charAt(0)}
+                        </span>
+                      )}
+                      {/*  <span className="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase">{item.label.charAt(0)}</span> */}
+                      <div>
+                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-purple-500">
+                          {item.label}
+                        </h3>
+                        <div className="-mt-0.5">
+                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100">
+                            {item.badge}
+                          </span>
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                );
+              })}
+              {owners.length === 0 && (
+                <li className="inline mr-2 leading-6 text-sm">
+                  <span className="text-gray-500">{emptyMessage}</span>
+                </li>
+              )}
+            </ul>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    </div>
+  );
+};
+
+export default OwnersList2;
+
+// <div class="py-4">
+//   <span class="font-light capitalize">{title}</span>
+//   <ul role="list" class="divide-y divide-black/5">
+//     {owners.map((item) => {
+//       return (
+//         <li class="py-3">
+//           <a class="flex items-center gap-x-3 group " href={item.href}>
+//             {item.type === 'users' && item.avatarUrl && <img src={item.avatarUrl} alt={item.label} class="w-7 h-7 rounded-full border group-hover:border-purple-300" />}
+//             {(item.type === 'teams' || !item.avatarUrl) && (
+//               <span class="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase group-hover:bg-purple-500">{item.label.charAt(0)}</span>
+//             )}
+//             {/* // <span class="w-6 rounded-full mt-1 bg-red-500 block text-center text-white uppercase">{item.label.charAt(0)}</span> */}
+//             <div>
+//               <h3 class="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-purple-500">{item.label}</h3>
+//               <div class="-mt-0.5">
+//                 <span class="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100">{item.badge}</span>
+//               </div>
+//             </div>
+//           </a>
+//         </li>
+//       );
+//     })}
+//     {owners.length === 0 && (
+//       <li class="inline mr-2 leading-6 text-sm">
+//         <span class="text-gray-500">{emptyMessage}</span>
+//       </li>
+//     )}
+//   </ul>
+// </div>;

package/src/components/Lists/PillList.tsx

@@ -0,0 +1,67 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+
+interface Props {
+  title: string;
+  color: string;
+  pills: {
+    label: string;
+    badge?: string;
+    href: string;
+    tag?: string;
+    color?: string;
+  }[];
+  emptyMessage: string;
+}
+
+const PillList = ({ title, pills, emptyMessage, color = 'gray' }: Props) => {
+  return (
+    <div>
+      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5">
+        <Disclosure as="div" className="py-4" defaultOpen={pills.length <= 2}>
+          <DisclosureButton className="group flex w-full items-center justify-between">
+            <span className="font-light text-black group-data-[hover]:text-black/80 capitalize"> {title} </span>
+            <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
+          </DisclosureButton>
+          <DisclosurePanel className="mt-2 text-sm/5 text-black/50">
+            <ul role="list" className=" py-2 ">
+              {pills.map((item) => {
+                return (
+                  <li className="py-1" key={item.href}>
+                    <a
+                      className={`flex items-start  group border border-gray-200 px-4 rounded-md border-l border-l-${item.color || color}-500 border-l-8`}
+                      href={item.href}
+                    >
+                      <div className="w-full">
+                        <h3 className="flex-auto truncate text-sm font-semibold leading-6 text-black group-hover:underline group-hover:text-purple-500">
+                          {item.label}
+                        </h3>
+                        <div className=" flex justify-between">
+                          <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100">
+                            {item.tag}
+                          </span>
+                          {item.badge && (
+                            <span className="text-xs font-light bg-gray-100 text-gray-700 rounded-md py-0.5 group-hover:bg-purple-100 capitalize">
+                              {item.badge.slice(0, -1)}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </a>
+                  </li>
+                );
+              })}
+              {pills.length === 0 && (
+                <li className="inline mr-2 leading-tight text-xs">
+                  <span className="text-gray-400">{emptyMessage}</span>
+                </li>
+              )}
+            </ul>
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    </div>
+  );
+};
+
+export default PillList;

package/src/components/Lists/VersionList.astro

@@ -0,0 +1,29 @@
+---
+import type { CollectionTypes } from '@types';
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  versions: string[]
+  collectionItem: CollectionEntry<CollectionTypes>
+}
+
+const { versions, collectionItem } = Astro.props;
+const currentPath = Astro.url.pathname;
+---
+
+<div class="space-y-2 my-2 mb-8">
+  <span class="font-light text-black group-data-[hover]:text-black/80 capitalize">Versions ({collectionItem.data.versions?.length})</span>
+  <ul class="space-x-2 flex">
+  {versions.map((version) => {
+    const isCurrent = currentPath.includes(version);
+    return <li>
+      <a href={`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`} class={`inline-flex items-center rounded-md  px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}>
+        <span>
+          v{version} 
+          {version === collectionItem.data.latestVersion && <span>(latest)</span>}
+        </span>
+      </a>
+    </li>
+  })}
+  </ul>
+</div>

package/src/components/MDX/Accordion/Accordion.astro

@@ -0,0 +1,10 @@
+---
+import AccordionClient from './Accordion'
+const {...props } = Astro.props;
+console.log('props', props )
+---
+
+<AccordionClient {...props} client:load> 
+    <slot />
+</AccordionClient> 
+

package/src/components/MDX/Accordion/Accordion.tsx

@@ -0,0 +1,29 @@
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { MinusIcon } from '@heroicons/react/16/solid';
+import { PlusIcon } from '@heroicons/react/24/outline';
+
+export default function Example({ title, children }: any) {
+  return (
+    <div className="border border-gray-200 rounded-md px-4 shadow-sm py-2 accordion">
+      <Disclosure as="div" key={title} className="">
+        {({ open }) => (
+          <>
+            <DisclosureButton className="flex w-full items-start justify-between text-left text-gray-900">
+              <span className="text-base font-semibold leading-7">{title}</span>
+              <span className="ml-6 flex h-7 items-center">
+                {open ? (
+                  <MinusIcon className="h-6 w-6" aria-hidden="true" />
+                ) : (
+                  <PlusIcon className="h-6 w-6" aria-hidden="true" />
+                )}
+              </span>
+            </DisclosureButton>
+            <DisclosurePanel as="dd" className="pr-12 not-prose py-4">
+              <p className="text-base leading-7 text-gray-600">{children}</p>
+            </DisclosurePanel>
+          </>
+        )}
+      </Disclosure>
+    </div>
+  );
+}

package/src/components/MDX/Accordion/AccordionGroup.astro

@@ -0,0 +1,16 @@
+---
+import AccordionClient from './Accordion';
+const { ...props } = Astro.props;
+console.log('props', props);
+---
+
+<div class="accordian-group border border-gray-200 rounded-md shadow-sm accordion my-2">
+  <slot />
+</div>
+
+<style is:global>
+  .accordian-group .accordion {
+    border: none;
+    border-bottom: 1px solid #e2e8f0;
+  }
+</style>

package/{components/Mdx → src/components/MDX}/Admonition.tsx

@@ -1,11 +1,12 @@
-import { InformationCircleIcon, ExclamationIcon } from '@heroicons/react/solid';
+import { ExclamationTriangleIcon } from '@heroicons/react/20/solid';
+import { InformationCircleIcon } from '@heroicons/react/24/solid';
 
 const getConfigurationByType = (type: string) => {
   switch (type) {
     case 'alert':
-      return { color: 'red', icon: ExclamationIcon };
+      return { color: 'red', icon: ExclamationTriangleIcon };
     case 'warning':
-      return { color: 'yellow', icon: ExclamationIcon };
+      return { color: 'yellow', icon: ExclamationTriangleIcon };
     default:
       return { color: 'indigo', icon: InformationCircleIcon };
   }
@@ -17,13 +18,13 @@ interface AdmonitionProps {
   className?: string;
 }
 
-export default function Admonition({ children, type, className = '' }: AdmonitionProps) {
+export default function Admonition({ children, type = 'info', className = '' }: AdmonitionProps) {
   const { color, icon: Icon } = getConfigurationByType(type);
 
   return (
     <div className={`bg-${color}-50 border-l-4 border-${color}-400 my-4 ${className}`}>
       <div className="flex">
-        <div className="ml-3 py-4">
+        <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}
         </div>

package/src/components/MDX/File.tsx

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import path from 'path';
+
+const File = ({ file, catalog, title }: any) => {
+  try {
+    const exists = fs.existsSync(path.join(catalog.filePath, file));
+
+    if (exists) {
+      const text = fs.readFileSync(path.join(catalog.filePath, file), 'utf-8');
+      return (
+        <div className="not-prose">
+          <pre className="expressive-code" data-language="json">
+            <figure className="frame has-title">
+              <figcaption className="header">
+                {title && <span className="title">{title}</span>}
+                {!title && <span className="title">{file}</span>}
+              </figcaption>
+              <pre data-language="js">
+                <code>
+                  <div className="ec-line">
+                    <div className="code">{text}</div>
+                  </div>
+                </code>
+              </pre>
+              <div className="copy">
+                <button title="Copy to clipboard" data-copied="Copied!" data-code={text}>
+                  <div></div>
+                </button>
+              </div>
+            </figure>
+          </pre>
+        </div>
+      );
+    } else {
+      return <div className="italic">Tried to load file from {path.join(catalog.filePath, file)}, but no file can be found</div>;
+    }
+  } catch (error) {
+    console.log('Failed to load file', error);
+    return null;
+  }
+};
+
+export default File;

package/src/components/MDX/NodeGraph/DownloadButton.tsx

@@ -0,0 +1,58 @@
+import { Panel, useReactFlow, getRectOfNodes } from 'reactflow';
+import { toPng } from 'html-to-image';
+import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
+
+function downloadImage(dataUrl: string, filename?: string) {
+  const a = document.createElement('a');
+
+  a.setAttribute('download', `${filename || 'eventcatalog'}.png`);
+  a.setAttribute('href', dataUrl);
+  a.click();
+}
+
+const imageWidth = 1024;
+const imageHeight = 768;
+
+function DownloadButton({ filename, addPadding = true }: { filename?: string; addPadding?: boolean }) {
+  const { getNodes } = useReactFlow();
+  const onClick = () => {
+    const nodesBounds = getRectOfNodes(getNodes());
+
+    // Hide the button
+    // @ts-ignore
+    document.getElementById('download-visual').style.display = 'none';
+    // @ts-ignore
+    document.querySelector('.react-flow__controls').style.display = 'none';
+
+    // @ts-ignore
+    toPng(document.querySelector('.react-flow'), {
+      backgroundColor: '#f1f1f1',
+      width: imageWidth * 1.2,
+      height: imageHeight,
+      style: {
+        width: imageWidth * 1.2,
+        height: imageHeight,
+      },
+    }).then((dataUrl: string) => {
+      downloadImage(dataUrl, filename);
+      // @ts-ignore
+      document.getElementById('download-visual').style.display = 'block';
+      // @ts-ignore
+      document.querySelector('.react-flow__controls').style.display = 'block';
+    });
+  };
+
+  return (
+    <Panel position="top-right" id="download-visual">
+      <button
+        className={`hidden md:flex bg-white group download-btn items-center space-x-1 text-[14px] border border-gray-200 px-1 py-0.5 rounded-md hover:bg-gray-100/50 ${addPadding ? 'mt-14' : '-mt-1'}`}
+        onClick={onClick}
+      >
+        <DocumentArrowDownIcon className="w-4 h-4 group-hover:text-purple-500" />
+        <span className="group-hover:text-purple-500">Download visual </span>
+      </button>
+    </Panel>
+  );
+}
+
+export default DownloadButton;

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -0,0 +1,82 @@
+---
+import NodeGraphNew from './NodeGraph';
+import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/services/node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
+
+
+interface Props {
+  id: string;
+  collection: string;
+  title?: string;
+  version: string;
+  mode: 'full' | 'simple';
+  linkTo?: 'docs' | 'visualiser';
+  href: {
+    label: string;
+    url: string;
+  };
+}
+
+const { id, collection, title, mode = 'simple', linkTo='docs', version, href } = Astro.props;
+let nodes = [],
+  edges = [];
+
+if (collection === 'services') {
+  const { nodes: serviceNodes, edges: serviceEdges } = await getNodesAndEdgesForService({
+    id: id,
+    version,
+    mode,
+  });
+
+  nodes = serviceNodes;
+  edges = serviceEdges;
+}
+
+if (collection === 'events') {
+  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForEvent({
+    id: id,
+    version,
+    mode,
+  });
+
+  nodes = eventNodes;
+  edges = eventEdges;
+}
+
+if (collection === 'commands') {
+  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForCommand({
+    id: id,
+    version,
+    mode,
+  });
+
+  nodes = eventNodes;
+  edges = eventEdges;
+}
+
+if(collection === 'domains'){
+  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForDomain({
+    id: id,
+    version,
+    mode,
+  });
+
+  nodes = eventNodes;
+  edges = eventEdges;
+}
+
+
+
+---
+
+<div>
+  <NodeGraphNew id={id} nodes={nodes} edges={edges} title={title} hrefLabel={href.label} href={href.url} linkTo={linkTo} client:load />
+</div>
+
+<style is:global>
+  .react-flow__attribution {
+    display: none;
+  }
+</style>