npm - @eventcatalog/core - Versions diffs - 0.1.19 → 0.2.0 - Mend

@eventcatalog/core 0.1.19 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (356) hide show

package/pages/domains/[domain]/index.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+import Head from 'next/head';
+import { MDXRemote } from 'next-mdx-remote';
+import { Domain } from '@eventcatalog/types';
+import ContentView from '@/components/ContentView';
+import { getDomainByName } from '@/lib/domains';
+import Admonition from '@/components/Mdx/Admonition';
+import DomainSideBar from '@/components/Sidebars/DomainSidebar';
+import BreadCrumbs from '@/components/BreadCrumbs';
+import NotFound from '@/components/NotFound';
+import { useConfig, useUrl } from '@/hooks/EventCatalog';
+import getBackgroundColor from '@/utils/random-bg';
+import { MarkdownFile } from '@/types/index';
+import NodeGraph from '@/components/Mdx/NodeGraph/NodeGraph';
+interface DomainsPageProps {
+  domain: Domain;
+  markdown: MarkdownFile;
+  notFound?: boolean;
+}
+const getComponents = (domain: Domain) => ({
+  Admonition,
+  NodeGraph: ({
+    title,
+    maxHeight,
+    maxZoom,
+    fitView,
+    zoomOnScroll,
+    isAnimated,
+    isDraggable,
+  }: // isHorizontal,
+  {
+    title?: string;
+    maxHeight?: number;
+    maxZoom?: number;
+    fitView?: boolean;
+    zoomOnScroll?: boolean;
+    isAnimated?: boolean;
+    isDraggable?: boolean;
+    // isHorizontal?: boolean;
+  }) => (
+    <div className="mx-auto w-full">
+      {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
+      <NodeGraph
+        source="domain"
+        data={domain}
+        rootNodeColor={getBackgroundColor(domain.name)}
+        maxHeight={maxHeight}
+        maxZoom={maxZoom}
+        fitView={fitView}
+        zoomOnScroll={zoomOnScroll}
+        isAnimated={isAnimated}
+        isDraggable={isDraggable}
+        // isHorizontal={isHorizontal}
+      />
+    </div>
+  ),
+});
+export default function Domains(props: DomainsPageProps) {
+  const { domain, markdown, notFound } = props;
+  const { title } = useConfig();
+  const { getEditUrl, hasEditUrl } = useUrl();
+  if (notFound)
+    return (
+      // TODO: Allow domain not found
+      <NotFound type="service" name={domain.name} editUrl={hasEditUrl ? getEditUrl(`/domains/${domain.name}/index.md`) : ''} />
+    );
+  const { name, summary } = domain;
+  const { lastModifiedDate } = markdown;
+  const mdxComponents = getComponents(domain);
+  const pages = [
+    { name: 'Domains', href: '/domains', current: false },
+    { name, href: `/domains/${name}`, current: true },
+  ];
+  return (
+    <>
+      <Head>
+        <title>
+          {title} - {name}
+        </title>
+      </Head>
+      <ContentView
+        title={name}
+        editUrl={hasEditUrl ? getEditUrl(`/domains/${name}/index.md`) : ''}
+        subtitle={summary}
+        lastModifiedDate={lastModifiedDate}
+        breadCrumbs={<BreadCrumbs pages={pages} homePath="/domains" />}
+        sidebar={<DomainSideBar domain={domain} />}
+      >
+        {/* @ts-ignore */}
+        <MDXRemote {...markdown.source} components={mdxComponents} />
+      </ContentView>
+    </>
+  );
+}
+export async function getStaticProps({ params }) {
+  try {
+    const { domain, markdown } = await getDomainByName({ domainName: params.domain });
+    return {
+      props: {
+        domain,
+        markdown,
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        notFound: true,
+        service: { name: params.name },
+      },
+    };
+  }
+}
+export async function getStaticPaths() {
+  // Get all Domains....
+  const domains = [{ name: 'Shopping', events: [], owners: [], services: [] }];
+  // const services = getAllServices();
+  const paths = domains.map((domain) => ({ params: { domain: domain.name } }));
+  return {
+    paths,
+    fallback: false,
+  };
+}

package/pages/domains/[domain]/services/[name].tsx ADDED Viewed

@@ -0,0 +1,42 @@
+import ServicePage from '../../../services/[name]';
+import { getServiceByName } from '@/lib/services';
+import { getAllServicesFromDomains } from '@/lib/domains';
+export default ServicePage;
+export async function getStaticProps({ params }) {
+  try {
+    const { service, markdown } = await getServiceByName({
+      serviceName: params.name,
+      domain: params.domain,
+    });
+    return {
+      props: {
+        service,
+        markdown,
+        breadCrumbs: [
+          { name: 'Domain', href: '/domains', current: false },
+          { name: service.domain, href: `/domains/${service.domain}`, current: false },
+          { name: 'Services', href: `/services`, current: false },
+          { name: service.name, href: `/domains/${service.domain}/services/${service.name}`, current: true },
+        ],
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        notFound: true,
+        service: { name: params.name },
+      },
+    };
+  }
+}
+export async function getStaticPaths() {
+  const services = getAllServicesFromDomains();
+  const paths = services.map((service) => ({ params: { name: service.name, domain: service.domain } }));
+  return {
+    paths,
+    fallback: false,
+  };
+}

package/pages/domains.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import Head from 'next/head';
+import { Service, Domain } from '@eventcatalog/types';
+import DomainGrid from '@/components/Grids/DomainGrid';
+import { getAllServices } from '@/lib/services';
+import { useConfig } from '@/hooks/EventCatalog';
+import { getAllDomains } from '@/lib/domains';
+export interface PageProps {
+  services: Service[];
+  domains: Domain[];
+}
+export default function Page({ domains }: PageProps) {
+  const { title } = useConfig();
+  return (
+    <>
+      <Head>
+        <title>{title} - All Domains</title>
+      </Head>
+      <main className="max-w-7xl mx-auto md:min-h-screen px-4 md:px-0">
+        <div className="relative z-10 flex items-baseline justify-between pt-8 pb-6 border-b border-gray-200">
+          <h1 className="text-2xl font-extrabold tracking-tight text-gray-900">Domains ({domains.length})</h1>
+        </div>
+        <section className="pt-6 pb-24">
+          <div className="grid grid-cols-4 gap-x-8 gap-y-10">
+            <form className="hidden lg:block">
+              <div className="border-b border-gray-200 pb-6">
+                <h3 className="-my-3 flow-root">
+                  <div className="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500">
+                    <span className="font-medium text-gray-900">Features</span>
+                  </div>
+                </h3>
+                <div className="mt-4 text-xs text-gray-400">No Filters for Domains</div>
+              </div>
+            </form>
+            <div className="col-span-4 lg:col-span-3">
+              <div>
+                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">Domains</h2>
+                <DomainGrid domains={domains} />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}
+export async function getStaticProps() {
+  const services = getAllServices();
+  const allDomains = await getAllDomains();
+  const domains = allDomains.map((item) => item.domain);
+  return {
+    props: {
+      services,
+      domains,
+    },
+  };
+}

package/pages/events/[name]/logs.tsx CHANGED Viewed

@@ -144,8 +144,8 @@ function Logs({ changes, name: eventName, currentVersion }: LogsProps) {
 export const getStaticProps = async ({ params }) => {
   const { name: eventName } = params;
-  const history = await getLogsForEvent(eventName);
-  const { event: { version } = {} } = await getEventByName(eventName);
+  const history = await getLogsForEvent({ eventName });
+  const { event: { version } = {} } = await getEventByName({ eventName });
   return {
     props: {
@@ -157,8 +157,10 @@ export const getStaticProps = async ({ params }) => {
 };
 export async function getStaticPaths() {
-  const services = getAllEvents();
-  const paths = services.map((event) => ({ params: { name: event.name } }));
+  const events = getAllEvents();
+  const eventsWithoutDomains = events.filter((event) => !event.domain);
+  const paths = eventsWithoutDomains.map((event) => ({ params: { name: event.name } }));
   return {
     paths,
     fallback: false,

package/pages/events/[name]/v/[version].tsx CHANGED Viewed

@@ -7,7 +7,7 @@ export default function Events(props: EventsPageProps) {
 export async function getStaticProps({ params }) {
   const { name: eventName, version } = params;
-  const { event, markdown } = await getEventByName(eventName, version);
+  const { event, markdown } = await getEventByName({ eventName, version });
   return {
     props: {
@@ -20,10 +20,11 @@ export async function getStaticProps({ params }) {
 export async function getStaticPaths() {
   const allEventsAndVersions = getAllEventsAndVersionsFlattened();
+  const eventsWithDomains = allEventsAndVersions.filter((item) => !!item.domain === false);
   // all but current one
-  const paths = allEventsAndVersions.map(({ eventName, version }: any) => ({ params: { name: eventName, version } }));
+  const paths = eventsWithDomains.map(({ eventName, version }: any) => ({ params: { name: eventName, version } }));
   return {
     paths,
     fallback: false,

package/pages/events/[name].tsx CHANGED Viewed

@@ -23,6 +23,8 @@ import NodeGraph from '@/components/Mdx/NodeGraph/NodeGraph';
 export interface EventsPageProps {
   event: Event;
+  eventPath: string;
+  breadCrumbs: any;
   markdown: MarkdownFile;
   notFound?: boolean;
   loadedVersion?: string;
@@ -129,7 +131,7 @@ export const getComponents = ({ event, schema, examples }: any) => ({
 });
 export default function Events(props: EventsPageProps) {
-  const { event, markdown, loadedVersion, notFound } = props;
+  const { event, markdown, loadedVersion, notFound, breadCrumbs, eventPath } = props;
   const { title } = useConfig();
   const { getEditUrl, hasEditUrl } = useUrl();
@@ -140,11 +142,6 @@ export default function Events(props: EventsPageProps) {
   const { lastModifiedDate } = markdown;
-  const pages = [
-    { name: 'Events', href: '/events', current: false },
-    { name, href: `/services/${name}`, current: true },
-  ];
   const mdxComponents = getComponents({ event, schema, examples });
   return (
@@ -156,16 +153,23 @@ export default function Events(props: EventsPageProps) {
       </Head>
       <ContentView
         title={name}
-        editUrl={hasEditUrl ? getEditUrl(`/events/${name}/index.md`) : ''}
+        editUrl={hasEditUrl ? getEditUrl(`${eventPath}/index.md`) : ''}
         subtitle={summary}
         draft={draft}
         lastModifiedDate={lastModifiedDate}
         tags={[{ label: `v${version}` }]}
-        breadCrumbs={<BreadCrumbs pages={pages} />}
+        breadCrumbs={<BreadCrumbs pages={breadCrumbs} />}
         isOldVersion={loadedVersion !== 'latest'}
-        latestVersionUrl={`/events/${name}`}
+        latestVersionUrl={eventPath}
         version={loadedVersion}
-        sidebar={<EventSideBar event={event} loadedVersion={loadedVersion} isOldVersion={loadedVersion !== 'latest'} />}
+        sidebar={
+          <EventSideBar
+            event={event}
+            urlPath={eventPath}
+            loadedVersion={loadedVersion}
+            isOldVersion={loadedVersion !== 'latest'}
+          />
+        }
       >
         <MDXRemote {...markdown.source} components={mdxComponents} />
       </ContentView>
@@ -175,10 +179,18 @@ export default function Events(props: EventsPageProps) {
 export async function getStaticProps({ params }) {
   try {
-    const { event, markdown } = await getEventByName(params.name);
+    const { event, markdown } = await getEventByName({
+      eventName: params.name,
+    });
     return {
       props: {
         event,
+        eventPath: `/events/${event.name}`,
+        breadCrumbs: [
+          { name: 'Events', href: '/events', current: false },
+          { name: event.name, href: `/events/${event.name}`, current: true },
+        ],
         markdown,
         loadedVersion: 'latest',
       },
@@ -195,7 +207,9 @@ export async function getStaticProps({ params }) {
 export async function getStaticPaths() {
   const events = getAllEvents();
-  const paths = events.map((event) => ({ params: { name: event.name } }));
+  const eventsWithoutDomains = events.filter((event) => !event.domain);
+  const paths = eventsWithoutDomains.map((event) => ({ params: { name: event.name } }));
   return {
     paths,

package/pages/events.tsx CHANGED Viewed

@@ -7,6 +7,7 @@ import { Menu, Transition } from '@headlessui/react';
 import { ChevronDownIcon, SearchIcon } from '@heroicons/react/solid';
 import EventGrid from '@/components/Grids/EventGrid';
 import { getAllEvents, getUniqueServicesNamesFromEvents } from '@/lib/events';
+import { getUniqueDomainNamesFromEvents } from '@/lib/domains';
 import { useConfig } from '@/hooks/EventCatalog';
 function classNames(...classes) {
@@ -21,11 +22,21 @@ const sortOptions = [
 export interface PageProps {
   events: Event[];
-  services: [Service];
+  services: Service[];
+  domains: string[];
 }
-export default function Page({ events, services }: PageProps) {
+export default function Page({ events, services, domains }: PageProps) {
   const filters = [
+    {
+      id: 'domains',
+      name: `Filter by Domains (${domains.length})`,
+      options: domains.map((domain) => ({
+        value: domain,
+        label: domain,
+        checked: false,
+      })),
+    },
     {
       id: 'services',
       name: `Filter by Services (${services.length})`,
@@ -37,12 +48,14 @@ export default function Page({ events, services }: PageProps) {
     },
   ];
-  const [selectedFilters, setSelectedFilters] = useState({ services: [] });
+  const [selectedFilters, setSelectedFilters] = useState({ services: [], domains: [] });
   const [showMermaidDiagrams, setShowMermaidDiagrams] = useState(false);
   const [eventsToRender, setEventsToRender] = useState(events);
   const [searchFilter, setSearchFilter] = useState('');
   const handleFilterSelection = (option, type, event) => {
+    console.log(option, type, event);
     if (event.target.checked) {
       const newFilters = selectedFilters[type].concat([option.value]);
       setSelectedFilters({ ...selectedFilters, [type]: newFilters });
@@ -53,7 +66,7 @@ export default function Page({ events, services }: PageProps) {
   };
   const getFilteredEvents = (): any => {
-    if (!selectedFilters.services && !searchFilter) return events;
+    if (!selectedFilters.services && !searchFilter && !selectedFilters.domains) return events;
     let filteredEvents = events;
@@ -62,13 +75,21 @@ export default function Page({ events, services }: PageProps) {
       filteredEvents = filteredEvents.filter((event) => {
         const { services: serviceFilters } = selectedFilters;
-        const hasConsumersFromFilters = event.consumers.some((consumerId) => serviceFilters.indexOf(consumerId) > -1);
-        const hasProducersFromFilters = event.producers.some((producerId) => serviceFilters.indexOf(producerId) > -1);
+        const hasConsumersFromFilters = event.consumerNames.some((consumerId) => serviceFilters.indexOf(consumerId) > -1);
+        const hasProducersFromFilters = event.producerNames.some((producerId) => serviceFilters.indexOf(producerId) > -1);
         return hasConsumersFromFilters || hasProducersFromFilters;
       });
     }
+    if (selectedFilters.domains.length > 0) {
+      // @ts-ignore
+      filteredEvents = filteredEvents.filter((event) => {
+        const { domains: domainFilters } = selectedFilters;
+        return domainFilters.indexOf(event.domain) > -1;
+      });
+    }
     if (searchFilter) {
       filteredEvents = filteredEvents.filter((event) => event.name.toLowerCase().includes(searchFilter.toLowerCase()));
     }
@@ -168,35 +189,38 @@ export default function Page({ events, services }: PageProps) {
                   />
                 </div>
               </div>
-              {filters.map((section: any) => (
-                <div key={section.id} className="border-b border-gray-200 py-6">
-                  <h3 className="-my-3 flow-root">
-                    <div className="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500">
-                      <span className="font-bold font-medium text-gray-900">{section.name}</span>
-                    </div>
-                  </h3>
-                  <div className="pt-6">
-                    <div className="space-y-4">
-                      {section.options.map((option, optionIdx) => (
-                        <div key={option.value} className="flex items-center">
-                          <input
-                            id={`filter-${section.id}-${optionIdx}`}
-                            name={`${section.id}[]`}
-                            defaultValue={option.value}
-                            type="checkbox"
-                            onChange={(event) => handleFilterSelection(option, section.id, event)}
-                            defaultChecked={option.checked}
-                            className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
-                          />
-                          <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
-                            {option.label}
-                          </label>
-                        </div>
-                      ))}
+              {filters.map((section: any) => {
+                if (!section.options.length) return null;
+                return (
+                  <div key={section.id} className="border-b border-gray-200 py-6">
+                    <h3 className="-my-3 flow-root">
+                      <div className="py-3 bg-white w-full flex items-center justify-between text-sm text-gray-400 hover:text-gray-500">
+                        <span className="font-bold font-medium text-gray-900">{section.name}</span>
+                      </div>
+                    </h3>
+                    <div className="pt-6">
+                      <div className="space-y-4">
+                        {section.options.map((option, optionIdx) => (
+                          <div key={option.value} className="flex items-center">
+                            <input
+                              id={`filter-${section.id}-${optionIdx}`}
+                              name={`${section.id}[]`}
+                              defaultValue={option.value}
+                              type="checkbox"
+                              onChange={(event) => handleFilterSelection(option, section.id, event)}
+                              defaultChecked={option.checked}
+                              className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
+                            />
+                            <label htmlFor={`filter-${section.id}-${optionIdx}`} className="ml-3 text-sm text-gray-600">
+                              {option.label}
+                            </label>
+                          </div>
+                        ))}
+                      </div>
                     </div>
                   </div>
-                </div>
-              ))}
+                );
+              })}
               <div className="border-b border-gray-200 py-6">
                 <h3 className="-my-3 flow-root">
@@ -251,12 +275,14 @@ export default function Page({ events, services }: PageProps) {
 export const getStaticProps = () => {
   const events = getAllEvents();
   const services = getUniqueServicesNamesFromEvents(events);
+  const domains = getUniqueDomainNamesFromEvents(events);
   return {
     props: {
       events,
       // @ts-ignore
       services: [...new Set(services)],
+      domains,
     },
   };
 };

package/pages/overview.tsx CHANGED Viewed

@@ -28,9 +28,9 @@ function Graph({ events, services }: PageProps) {
   // Create all links
   const links = events.reduce((nodes, event) => {
-    const { consumers = [], producers = [], name } = event;
-    const consumerNodes = consumers.map((consumer) => ({ source: truncateNode(name), target: truncateNode(consumer) }));
-    const producerNodes = producers.map((producer) => ({ source: truncateNode(producer), target: truncateNode(name) }));
+    const { consumerNames = [], producerNames = [], name } = event;
+    const consumerNodes = consumerNames.map((consumer) => ({ source: truncateNode(name), target: truncateNode(consumer) }));
+    const producerNodes = producerNames.map((producer) => ({ source: truncateNode(producer), target: truncateNode(name) }));
     return nodes.concat(consumerNodes).concat(producerNodes);
   }, []);

package/pages/services/[name].tsx CHANGED Viewed

@@ -20,6 +20,7 @@ interface ServicesPageProps {
   service: Service;
   markdown: MarkdownFile;
   notFound?: boolean;
+  breadCrumbs: any;
 }
 function MermaidComponent({ title, service, charts }: { title?: string; service: Service; charts?: string[] }) {
@@ -74,7 +75,7 @@ const getComponents = (service) => ({
 });
 export default function Services(props: ServicesPageProps) {
-  const { service, markdown, notFound } = props;
+  const { service, markdown, notFound, breadCrumbs } = props;
   const { title } = useConfig();
   const { getEditUrl, hasEditUrl } = useUrl();
@@ -88,11 +89,6 @@ export default function Services(props: ServicesPageProps) {
   const mdxComponents = getComponents(service);
-  const pages = [
-    { name: 'Services', href: '/services', current: false },
-    { name, href: `/services/${name}`, current: true },
-  ];
   return (
     <>
       <Head>
@@ -106,7 +102,7 @@ export default function Services(props: ServicesPageProps) {
         subtitle={summary}
         draft={draft}
         lastModifiedDate={lastModifiedDate}
-        breadCrumbs={<BreadCrumbs pages={pages} homePath="/services" />}
+        breadCrumbs={<BreadCrumbs pages={breadCrumbs} homePath="/services" />}
         sidebar={<ServiceSidebar service={service} />}
       >
         {/* @ts-ignore */}
@@ -118,12 +114,16 @@ export default function Services(props: ServicesPageProps) {
 export async function getStaticProps({ params }) {
   try {
-    const { service, markdown } = await getServiceByName(params.name);
+    const { service, markdown } = await getServiceByName({ serviceName: params.name });
     return {
       props: {
         service,
         markdown,
+        breadCrumbs: [
+          { name: 'Services', href: '/services', current: false },
+          { name: service.name, href: `/services/${service.name}`, current: true },
+        ],
       },
     };
   } catch (error) {

package/pages/users/[id].tsx CHANGED Viewed

@@ -1,18 +1,22 @@
-import { Event, Service } from '@eventcatalog/types';
+import { Domain, Event, Service } from '@eventcatalog/types';
 import EventGrid from '@/components/Grids/EventGrid';
 import ServiceGrid from '@/components/Grids/ServiceGrid';
+import DomainGrid from '@/components/Grids/DomainGrid';
 import { getAllEventsByOwnerId, getAllOwners } from '@/lib/events';
 import { getAllServicesByOwnerId } from '@/lib/services';
+import { getAllDomainsByOwnerId } from '@/lib/domains';
 import { useUser } from '@/hooks/EventCatalog';
 interface UserPageProps {
   events: Event[];
   services: Service[];
+  domains: Domain[];
   userId: string;
 }
-export default function UserPage({ events, services, userId }: UserPageProps) {
+export default function UserPage({ events, services, domains, userId }: UserPageProps) {
   const { getUserById } = useUser();
   const user = getUserById(userId);
@@ -28,14 +32,18 @@ export default function UserPage({ events, services, userId }: UserPageProps) {
                   <h1 className="text-3xl font-bold text-gray-900 relative">{user.name}</h1>
                 </div>
               </div>
-              <div className=" border-b border-gray-100 pb-6">
+              <div className="border-b border-gray-100 pb-6">
                 <h1 className="text-lg font-bold text-gray-800 relative mt-4">Owner of Events ({events.length})</h1>
                 <EventGrid events={events} />
               </div>
-              <div>
-                <h1 className="text-lg font-bold text-gray-800 relative mt-4">Owner of Services ({services.length})</h1>
+              <div className="border-b border-gray-100 pb-6">
+                <h1 className="text-lg font-bold text-gray-800 relative mt-4 ">Owner of Services ({services.length})</h1>
                 <ServiceGrid services={services} />
               </div>
+              <div>
+                <h1 className="text-lg font-bold text-gray-800 relative mt-4">Owner of Domains ({domains.length})</h1>
+                <DomainGrid domains={domains} />
+              </div>
             </div>
             <div className="px-8">
               <div className="flex items-center space-x-5 mt-4 ">
@@ -63,10 +71,12 @@ export const getStaticProps = async ({ params }) => {
   const { id: userId } = params;
   const userEvents = await getAllEventsByOwnerId(userId);
   const services = await getAllServicesByOwnerId(userId);
+  const domains = await getAllDomainsByOwnerId(userId);
   return {
     props: {
       events: userEvents,
+      domains,
       services,
       userId,
     },