@eventcatalog/core 1.2.6 → 2.0.0

package/src/components/SideBars/DomainSideBar.astro

@@ -0,0 +1,42 @@
+---
+import OwnersList from '@components/Lists/OwnersList';
+import PillList from '@components/Lists/PillList';
+import VersionList from '@components/Lists/VersionList.astro';
+import { getEntry, type CollectionEntry } from 'astro:content';
+interface Props {
+  domain: CollectionEntry<'domains'>;
+}
+
+const { domain } = Astro.props;
+
+// @ts-ignore
+const services = domain.data.services as CollectionEntry<'services'>[] || [];
+
+const ownersRaw = domain.data?.owners || [];
+const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+
+const serviceList = services.map((p) => ({
+  label: p.data.id,
+  badge: p.collection,
+  tag: `v${p.data.version}`,
+  href: `/docs/${p.collection}/${p.data.id}`,
+}));
+
+const ownersList = owners.map((o) => ({
+  label: o.data.name,
+  type: o.collection,
+  badge: o.collection === 'users' ? o.data.role : 'Team',
+  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
+  href: `/docs/${o.collection}/${o.data.id}`,
+}));
+
+---
+
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
+  <div>
+    <PillList title={`Services (${services.length})`} pills={serviceList} emptyMessage={`This domain does not contain any services.`} color="pink" client:load />
+    <OwnersList title={`Service owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This domain does not have any documented owners.`} client:load />
+    {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
+    <a href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
+  </div>
+</aside>

package/src/components/SideBars/MessageSideBar.astro

@@ -0,0 +1,81 @@
+---
+import { getEntry, type CollectionEntry } from 'astro:content';
+import PillList from '@components/Lists/PillList';
+import OwnersList from '@components/Lists/OwnersList';
+import type { CollectionMessageTypes } from '@types';
+import * as path from 'path';
+import VersionList from '@components/Lists/VersionList.astro';
+interface Props {
+  message: CollectionEntry<CollectionMessageTypes>;
+}
+
+const { message } = Astro.props;
+
+const producers = (message.data.producers as CollectionEntry<'services'>[]) || [];
+const consumers = (message.data.consumers as CollectionEntry<'services'>[]) || [];
+
+const ownersRaw = message.data?.owners || [];
+const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+
+const producerList = producers.map((p) => ({
+  label: `${p.data.name} (service)`,
+  tag: `v${p.data.version}`,
+  href: `/docs/services/${p.data.id}/${p.data.version}`,
+}));
+
+const consumerList = consumers.map((p) => ({
+  label: `${p.data.name} (service)`,
+  tag: `v${p.data.version}`,
+  href: `/docs/services/${p.data.id}/${p.data.version}`,
+}));
+
+const ownersList = owners.map((o) => ({
+  label: o.data.name,
+  type: o.collection,
+  badge: o.collection === 'users' ? o.data.role : 'Team',
+  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
+  href: `/docs/${o.collection}/${o.data.id}`,
+}));
+
+const type = message.collection.slice(0, -1);
+
+// @ts-ignore
+const publicPath = message?.catalog?.publicPath;
+const schemaFilePath = message?.data?.schemaPath;
+const schemaURL = path.join(publicPath, schemaFilePath || '')
+
+---
+
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
+  <div class="">
+    <PillList color="pink" title={`${type} Producers (${producerList.length})`} pills={producerList} emptyMessage={`This ${type} does not get produced by any services.`} client:load />
+    <PillList color="pink" title={`${type} Consumers (${consumerList.length})`} pills={consumerList} emptyMessage={`This ${type} does not get consumed by any services.`} client:load />
+    <OwnersList title={`${type} owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This ${type} does not have any documented owners.`} client:load />
+
+    {message.data.versions && <VersionList versions={message.data.versions} collectionItem={message} />}
+
+    <div class="space-y-2">
+      {
+        message?.data?.schemaPath && (
+          <a
+            href={schemaURL}
+            download={`${message.data.name}(${message.data.version})-${schemaFilePath}`}
+            class="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+          >
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="-ml-1 mr-2 h-5 w-5 text-gray-200">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              <span>Download Schema</span>
+            </>
+          </a>
+        )
+      }
+      <a
+        href={`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`}
+        class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
+        >View in Visualiser</a
+      >
+    </div>
+  </div>
+</aside>

package/src/components/SideBars/ServiceSideBar.astro

@@ -0,0 +1,93 @@
+---
+import OwnersList from '@components/Lists/OwnersList';
+import PillList from '@components/Lists/PillList';
+import VersionList from '@components/Lists/VersionList.astro';
+import { getEntry, type CollectionEntry } from 'astro:content';
+import { join } from 'node:path'
+interface Props {
+  service: CollectionEntry<'services'>;
+}
+
+const { service } = Astro.props;
+
+// @ts-ignore
+const sends = service.data.sends as CollectionEntry<'events'>[] || [];
+// @ts-ignore
+const receives = service.data.receives as CollectionEntry<'events'>[] || [];
+
+const ownersRaw = service.data?.owners || [];
+const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
+
+const sendsList = sends.map((p) => ({
+  label: p.data.id,
+  badge: p.collection,
+  color: p.collection === 'events' ? 'orange' : 'blue',
+  tag: `v${p.data.version}`,
+  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+}));
+const receivesList = receives.map((p) => ({
+  label: p.data.id,
+  badge: p.collection,
+  color: p.collection === 'events' ? 'orange' : 'blue',
+  tag: `v${p.data.version}`,
+  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+}));
+
+const ownersList = owners.map((o) => ({
+  label: o.data.name,
+  type: o.collection,
+  badge: o.collection === 'users' ? o.data.role : 'Team',
+  avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
+  href: `/docs/${o.collection}/${o.data.id}`,
+}));
+
+// @ts-ignore
+const publicPath = service?.catalog?.publicPath;
+const schemaFilePath = service?.data?.schemaPath;
+const schemaURL = join(publicPath, schemaFilePath || '')
+
+
+---
+
+<aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto">
+  <div id="sidebar-cta-portal">
+    <PillList title={`Receives Messages (${receivesList.length})`} pills={receivesList} emptyMessage={`This service does not receive any messages.`} color="orange" client:load />
+    <PillList title={`Sends Messages (${sendsList.length})`} pills={sendsList} emptyMessage={`This service does not send any messages.`} color="orange" client:load />
+    <OwnersList title={`Service owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This service does not have any documented owners.`} client:load />
+
+    {service.data.versions && <VersionList versions={service.data.versions} collectionItem={service} />}
+
+    <div class="space-y-2">
+      {
+        service?.data?.schemaPath && (
+          <a
+            href={schemaURL}
+            download={`${service.data.name}(${service.data.version})-${schemaFilePath}`}
+            class="hidden w-full md:inline-flex h-10 justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-200 bg-gray-800 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+          >
+            <>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="-ml-1 mr-2 h-5 w-5 text-gray-200">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              <span>Download Schema</span>
+            </>
+          </a>
+        )
+      }
+      <a href={`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
+      <a id="open-api-button" href={`/docs/${service.collection}/${service.data.id}/${service.data.version}/spec`} class="hidden text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View API spec</a>
+    </div>
+  </div>
+</aside>
+
+<script>
+  // If openapi-component is in the dom then show the button, when dom has loaded
+  document.addEventListener('DOMContentLoaded', () => {
+    const openApiComponent = document.getElementById('openapi-component');
+    const openApiButton = document.getElementById('open-api-button');
+    if (openApiComponent && openApiButton) {
+      openApiButton.style.display = 'block';
+    }
+  });
+
+</script>

package/src/components/Tables/DebouncedInput.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+import React from 'react';
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number;
+  onChange: (value: string | number) => void;
+  debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) => {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value]);
+
+  return <input {...props} value={value} onChange={(e) => setValue(e.target.value)} />;
+};
+
+export default DebouncedInput;

package/src/components/Tables/Table.tsx

@@ -0,0 +1,228 @@
+import {
+  flexRender,
+  getCoreRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  useReactTable,
+  type Column,
+  type ColumnFiltersState,
+  type Row,
+} from '@tanstack/react-table';
+import type { CollectionEntry } from 'astro:content';
+import DebouncedInput from './DebouncedInput';
+
+import { getColumnsByCollection } from './columns';
+import { useMemo, useState } from 'react';
+import type { CollectionTypes } from '@types';
+
+declare module '@tanstack/react-table' {
+  // @ts-ignore
+  interface ColumnMeta<TData extends RowData, TValue> {
+    filterVariant?: 'collection' | 'name';
+    collectionFilterKey?: string;
+    showFilter?: boolean;
+    className?: string;
+  }
+}
+
+export const Table = ({
+  data: initialData,
+  collection,
+  mode = 'simple',
+}: {
+  data: CollectionEntry<'events'>[];
+  collection: string;
+  mode: 'simple' | 'full';
+}) => {
+  const [data, _setData] = useState(initialData);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
+
+  const table = useReactTable({
+    // @ts-ignore
+    data,
+    columns,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(), // client-side faceting
+    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete
+    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter
+    getPaginationRowModel: getPaginationRowModel(),
+    state: {
+      columnFilters,
+    },
+  });
+
+  return (
+    <>
+      {/* <div className='text-right text-gray-400'>{table.getPrePaginationRowModel().rows.length} results</div> */}
+      <div className=" bg-gray-100/20 rounded-md border-2 border-gray-200 shadow-sm ">
+        <table className="min-w-full divide-y divide-gray-200 rounded-md ">
+          <thead className="bg-gray-200/50">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id} className="rounded-tl-lg">
+                {headerGroup.headers.map((header) => (
+                  <th key={`${header.id}`} className="pl-4 pr-3 text-left text-sm font-semibold text-gray-800 sm:pl-0  ">
+                    <div className="flex flex-col justify-start px-2 py-2 space-y-2">
+                      <div className="text-md">
+                        {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                      </div>
+                      {/* @ts-ignore */}
+                      <div className="">
+                        {header.column.columnDef.meta?.showFilter !== false && <Filter column={header.column} />}
+                        {header.column.columnDef.meta?.showFilter == false && <div className="h-10" />}
+                      </div>
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+
+          <tbody className="divide-y divide-gray-300 ">
+            {table.getRowModel().rows.map((row, index) => (
+              <tr key={`${row.id}-${index}`}>
+                {row.getVisibleCells().map((cell) => (
+                  <td
+                    key={cell.id}
+                    className={`whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900  ${cell.column.columnDef.meta?.className}`}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <div className="h-8" />
+        <div className="flex items-center gap-2 justify-end px-4  ">
+          <button
+            className="relative inline-flex items-center rounded-l-md bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            {'<<'}
+          </button>
+          <button
+            className="relative inline-flex items-center  bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            {'<'}
+          </button>
+          <button
+            className="relative inline-flex items-center  bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            {'>'}
+          </button>
+          <button
+            className="relative inline-flex items-center rounded-r-md bg-white px-2 py-1 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            {'>>'}
+          </button>
+          <span className="flex items-center gap-1">
+            <div>Page</div>
+            <strong>
+              {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+            </strong>
+          </span>
+          <span className="flex items-center gap-1">
+            | Go to page:
+            <input
+              type="number"
+              defaultValue={table.getState().pagination.pageIndex + 1}
+              onChange={(e) => {
+                const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                table.setPageIndex(page);
+              }}
+              className="border border-gray-300 p-1 rounded w-16"
+            />
+          </span>
+          <select
+            value={table.getState().pagination.pageSize}
+            onChange={(e) => {
+              table.setPageSize(Number(e.target.value));
+            }}
+          >
+            {[10, 20, 30, 40, 50].map((pageSize) => (
+              <option key={pageSize} value={pageSize}>
+                Show {pageSize}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function Filter({ column }: { column: Column<any, unknown> }) {
+  const { filterVariant, collectionFilterKey = '' } = column.columnDef.meta ?? {};
+
+  const columnFilterValue = column.getFilterValue();
+
+  const sortedUniqueValues = useMemo(() => {
+    if (filterVariant === 'collection') {
+      const rows = column.getFacetedRowModel().rows;
+      const data = rows
+        .map((row: Row<CollectionEntry<CollectionTypes>>) => {
+          // @ts-ignore
+          const items = row.original.data[collectionFilterKey];
+          return items as CollectionEntry<CollectionTypes>[];
+        })
+        .flat();
+
+      const allItems = data.map((item) => `${item.data.name} (v${item.data.version})`);
+      const uniqueItemsInList = Array.from(new Set(allItems));
+
+      return uniqueItemsInList.sort().slice(0, 2000);
+    }
+    if (filterVariant === 'name') {
+      const rows = column.getFacetedRowModel().rows;
+      const data = rows
+        .map((row: Row<CollectionEntry<CollectionTypes>>) => {
+          // @ts-ignore
+          const data = row.original;
+          return data as CollectionEntry<CollectionTypes>;
+        })
+        .flat();
+
+      const allItems = data.map((item) => `${item.data.name} (v${item.data.version})`);
+      const uniqueItemsInList = Array.from(new Set(allItems));
+
+      return uniqueItemsInList.sort().slice(0, 2000);
+    }
+    return Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 2000);
+  }, [column.getFacetedUniqueValues(), filterVariant]);
+
+  return (
+    <>
+      {/* Autocomplete suggestions from faceted values feature */}
+      <datalist id={column.id + 'list'}>
+        {sortedUniqueValues.map((value: any, index) => (
+          <option value={value} key={`${value}-${index}`} />
+        ))}
+      </datalist>
+      <DebouncedInput
+        type="text"
+        value={(columnFilterValue ?? '') as string}
+        onChange={(value) => column.setFilterValue(value)}
+        placeholder={`Search... ${!column?.columnDef?.meta?.filterVariant ? `(${column.getFacetedUniqueValues().size})` : ''}`}
+        className="w-full p-2 border shadow rounded"
+        list={column.id + 'list'}
+      />
+      <div className="h-1" />
+    </>
+  );
+}

package/src/components/Tables/columns/DomainTableColumns.tsx

@@ -0,0 +1,118 @@
+import { ServerIcon } from '@heroicons/react/20/solid';
+import { RectangleGroupIcon } from '@heroicons/react/20/solid';
+import { createColumnHelper } from '@tanstack/react-table';
+import type { CollectionEntry } from 'astro:content';
+import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+
+const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
+
+export const columns = () => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>Domain</span>,
+    cell: (info) => {
+      const messageRaw = info.row.original;
+      const color = 'yellow';
+      return (
+        <div className=" group ">
+          <a
+            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
+          >
+            <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
+              <span className="flex items-center">
+                <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
+                  <RectangleGroupIcon className="h-4 w-4 text-white" />
+                </span>
+                <span className="leading-none px-2 group-hover:underline group-hover:text-purple-500 font-light">
+                  {messageRaw.data.name} (v{messageRaw.data.version})
+                </span>
+              </span>
+            </div>
+          </a>
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    meta: {
+      filterVariant: 'name',
+    },
+    filterFn: filterByName,
+  }),
+  // columnHelper.accessor('data.version', {
+  //   header: () => <span>Version</span>,
+  //   cell: (info) => {
+  //     const service = info.row.original;
+  //     return <div className="text-left font-light">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
+  //   },
+  //   footer: (info) => info.column.id,
+  // }),
+  columnHelper.accessor('data.summary', {
+    id: 'summary',
+    header: () => 'Summary',
+    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    footer: (info) => info.column.id,
+    meta: {
+      showFilter: false,
+    },
+  }),
+  columnHelper.accessor('data.services', {
+    header: () => <span>Services</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'services',
+    },
+    cell: (info) => {
+      const services = info.getValue();
+      if (services?.length === 0 || !services)
+        return <div className="text-sm text-gray-400/80 text-left italic">Domain has no services.</div>;
+
+      return (
+        <ul>
+          {services.map((consumer: any) => {
+            const color = 'pink';
+            return (
+              <li key={consumer.data.id} className="py-1 group ">
+                <a
+                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  className="group-hover:text-purple-500 flex space-x-1 items-center "
+                >
+                  <div className={`flex items-center border border-gray-300 rounded-md`}>
+                    <span className="flex items-center">
+                      <span className={`bg-${color}-500 h-full rounded-tl rounded-bl p-1`}>
+                        <ServerIcon className="h-4 w-4 text-white" />
+                      </span>
+                      <span className="leading-none px-2 group-hover:underline font-light  ">
+                        {consumer.data.name} (v{consumer.data.version})
+                      </span>
+                    </span>
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    // footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('services'),
+  }),
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const domain = info.row.original;
+      return (
+        <a
+          className="hover:text-purple-500 hover:underline px-4 font-light"
+          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+        >
+          Visualiser &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];