@eventcatalog/core 1.2.7 → 2.0.1

package/pages/domains/[domain]/events/[name]/logs.tsx

@@ -1,35 +0,0 @@
-import LogPage from '../../../../events/[name]/logs';
-import { getLogsForEvent, getEventByName } from '@/lib/events';
-import { getAllEventsFromDomains } from '@/lib/domains';
-
-export default LogPage;
-
-export const getStaticProps = async ({ params }) => {
-  const { name: eventName, domain } = params;
-
-  const history = await getLogsForEvent({ eventName, domain });
-  const { event } = await getEventByName({ eventName, domain });
-
-  return {
-    props: {
-      changes: history,
-      event,
-      breadCrumbs: [
-        { name: 'Domain', href: '/domains', current: false },
-        { name: event.domain, href: `/domains/${event.domain}`, current: false },
-        { name: 'Events', href: `/events?domain=${event.domain}`, current: false },
-        { name: event.name, href: `/domains/${event.domain}/events/${event.name}`, current: true },
-        { name: 'Logs', href: `/events/${event.name}/history`, current: true },
-      ],
-    },
-  };
-};
-
-export async function getStaticPaths() {
-  const events = getAllEventsFromDomains();
-  const paths = events.map((event) => ({ params: { name: event.name, domain: event.domain } }));
-  return {
-    paths,
-    fallback: false,
-  };
-}

package/pages/domains/[domain]/events/[name]/v/[version].tsx

@@ -1,39 +0,0 @@
-import { getEventByName, getAllEventsAndVersionsFlattened } from '@/lib/events';
-import EventPage from '../../[name]';
-
-export default EventPage;
-
-export async function getStaticProps({ params }) {
-  const { name: eventName, version, domain } = params;
-
-  const { event, markdown } = await getEventByName({ eventName, version, domain });
-
-  return {
-    props: {
-      event,
-      markdown,
-      eventPath: `/domains/${event.domain}/events/${event.name}`,
-      breadCrumbs: [
-        { name: 'Domain', href: '/events', current: false },
-        { name: event.domain, href: `/domains/${event.domain}`, current: false },
-        { name: 'Events', href: `/events?domain=${event.domain}`, current: false },
-        { name: event.name, href: `/domains/${event.domain}/events/${event.name}`, current: false },
-        { name: `v${version}`, href: `/domains/${event.domain}/events/${event.name}/v/${version}`, current: true },
-      ],
-      loadedVersion: version,
-    },
-  };
-}
-
-export async function getStaticPaths() {
-  const allEventsAndVersions = getAllEventsAndVersionsFlattened();
-  const eventsWithDomains = allEventsAndVersions.filter((item) => !!item.domain);
-
-  const paths = eventsWithDomains.map(({ eventName, version, domain = '' }: any) => ({
-    params: { name: eventName, version, domain },
-  }));
-  return {
-    paths,
-    fallback: false,
-  };
-}

package/pages/domains/[domain]/events/[name].tsx

@@ -1,46 +0,0 @@
-import { getEventByName } from '@/lib/events';
-import { getAllEventsFromDomains } from '@/lib/domains';
-import EventsPage from '../../../events/[name]';
-
-export default EventsPage;
-
-export async function getStaticProps({ params }) {
-  try {
-    const { event, markdown } = await getEventByName({
-      eventName: params.name,
-      domain: params.domain,
-    });
-
-    return {
-      props: {
-        event,
-        eventPath: `/domains/${event.domain}/events/${event.name}`,
-        breadCrumbs: [
-          { name: 'Domain', href: '/domains', current: false },
-          { name: event.domain, href: `/domains/${event.domain}`, current: false },
-          { name: 'Events', href: `/events?domain=${event.domain}`, current: false },
-          { name: event.name, href: `/domains/${event.domain}/events/${event.name}`, current: true },
-        ],
-        markdown,
-        loadedVersion: 'latest',
-      },
-    };
-  } catch (error) {
-    return {
-      props: {
-        notFound: true,
-        event: { name: params.name },
-      },
-    };
-  }
-}
-
-export async function getStaticPaths() {
-  const events = getAllEventsFromDomains();
-  const paths = events.map((event) => ({ params: { name: event.name, domain: event.domain } }));
-
-  return {
-    paths,
-    fallback: false,
-  };
-}

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

@@ -1,137 +0,0 @@
-import Head from 'next/head';
-import { MDXRemote } from 'next-mdx-remote';
-
-import { Domain } from '@eventcatalog/types';
-import ContentView from '@/components/ContentView';
-import { getDomainByName, getAllDomains } 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="domain" 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,
-        domain: { name: params.domain },
-      },
-    };
-  }
-}
-
-export async function getStaticPaths() {
-  const data = await getAllDomains();
-  const domains = data.map((item) => item.domain);
-
-  const paths = domains.map((domain) => ({ params: { domain: domain.name } }));
-
-  return {
-    paths,
-    fallback: false,
-  };
-}

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

@@ -1,42 +0,0 @@
-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

@@ -1,210 +0,0 @@
-import Head from 'next/head';
-import { Domain } from '@eventcatalog/types';
-
-import { useState, useCallback, useEffect } from 'react';
-import debounce from 'lodash.debounce';
-import { SearchIcon } from '@heroicons/react/outline';
-import DomainGrid from '@/components/Grids/DomainGrid';
-import { useConfig } from '@/hooks/EventCatalog';
-import { getAllDomains } from '@/lib/domains';
-import { useRouter } from 'next/router';
-
-export interface PageProps {
-  domains: Domain[];
-}
-
-export default function Page({ domains }: PageProps) {
-  const [domainsToRender, setDomainsToRender] = useState(domains);
-  const [searchFilter, setSearchFilter] = useState('');
-  const [selectedFilters, setSelectedFilters] = useState({ badges: [] });
-
-  const filters = [
-    {
-      id: 'badges',
-      name: `Filter by Badges`,
-      options: domains.reduce((p, c) => {
-        if (!c.badges) {
-          return p;
-        }
-        c.badges.forEach((badge) => {
-          const existing = p.map((b) => b.value);
-          if (!existing.includes(badge.content)) {
-            p.push({
-              value: badge.content,
-              label: badge.content,
-              checked: false,
-            });
-          }
-        });
-        return p;
-      }, [] as { value: string; label: string; checked: boolean }[]),
-    },
-  ];
-
-  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 });
-    } else {
-      const newFilters = selectedFilters[type].filter((value) => value !== option.value);
-      setSelectedFilters({ ...selectedFilters, [type]: newFilters });
-    }
-  };
-
-  const getFilteredDomains = (): any => {
-    let filteredDomains = domains;
-
-    if (!selectedFilters.badges && !searchFilter) return domains;
-
-    if (searchFilter) {
-      filteredDomains = filteredDomains.filter((service) => service.name.toLowerCase().includes(searchFilter.toLowerCase()));
-    }
-
-    if (selectedFilters.badges.length > 0) {
-      const { badges: badgeFilters } = selectedFilters;
-      // @ts-ignore
-      filteredDomains = filteredDomains.filter((event) => {
-        if (!event.badges) {
-          return false;
-        }
-        return event.badges.filter((badge) => badgeFilters.includes(badge.content)).length !== 0;
-      });
-    }
-
-    return filteredDomains;
-  };
-
-  useEffect(() => {
-    setDomainsToRender(getFilteredDomains());
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedFilters, searchFilter]);
-
-  const router = useRouter();
-
-  useEffect(() => {
-    if (router.query.q) {
-      setSearchFilter(router.query.q as string);
-    }
-  }, [router.query.q]);
-
-  const debouncedFilter = useCallback(
-    debounce((e) => {
-      setSearchFilter(e.target.value);
-    }, 500),
-    [domainsToRender]
-  );
-
-  const filtersApplied = !!searchFilter || selectedFilters.badges.length > 0;
-  const { title } = useConfig();
-
-  return (
-    <>
-      <Head>
-        <title>{title} - All Domains</title>
-      </Head>
-      <main className="max-w-7xl mx-auto md:min-h-screen px-4 xl: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">
-            {/* Filters */}
-            <form className="hidden lg:block">
-              <div className="border-b border-gray-200 pb-6">
-                <label htmlFor="domain" className="font-bold block text-sm font-medium text-gray-700">
-                  Search Domains
-                </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
-                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                    <SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                  </div>
-                  <input
-                    type="text"
-                    name="domain"
-                    id="domain"
-                    onChange={(e) => {
-                      setSearchFilter(e.target.value);
-                      debouncedFilter(e);
-                    }}
-                    value={searchFilter}
-                    className="focus:ring-gray-500 focus:border-gray-500 block w-full pl-10 sm:text-sm border-gray-300 rounded-md"
-                  />
-                </div>
-              </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} ({section.options.length})
-                        </span>
-                      </div>
-                    </h3>
-                    <div className="pt-6">
-                      <div className="space-y-4">
-                        {section.options
-                          .sort((a, b) => a.value.localeCompare(b.value))
-                          .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>
-                );
-              })}
-            </form>
-
-            <div className="col-span-4 lg:col-span-3">
-              <div>
-                <h2 className="text-gray-500 text-xs font-medium uppercase tracking-wide">
-                  {filtersApplied
-                    ? `Filtered Domains (${domainsToRender.length}/${domains.length})`
-                    : `All Domains (${domains.length})`}
-                </h2>
-                <DomainGrid domains={domainsToRender} />
-                {domainsToRender.length === 0 && (
-                  <div className="text-gray-400 flex h-96  justify-center items-center">
-                    <div>
-                      <SearchIcon className="w-6 h-6 inline-block mr-1" />
-                      No domains found.
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-    </>
-  );
-}
-
-export async function getStaticProps() {
-  const allDomains = await getAllDomains();
-  const domains = allDomains.map((item) => item.domain);
-
-  return {
-    props: {
-      domains,
-    },
-  };
-}

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

@@ -1,177 +0,0 @@
-import { MDXRemote } from 'next-mdx-remote';
-import React, { useEffect } from 'react';
-import Link from 'next/link';
-
-import * as Diff2Html from 'diff2html/lib/ui/js/diff2html-ui-slim';
-import 'diff2html/bundles/css/diff2html.min.css';
-
-import { CodeIcon } from '@heroicons/react/solid';
-import { Event } from '@eventcatalog/types';
-import BreadCrumbs from '@/components/BreadCrumbs';
-
-import { getLogsForEvent, getEventByName, getAllEvents } from '@/lib/events';
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
-interface LogsProps {
-  changes: any;
-  event: Event;
-  breadCrumbs: any;
-}
-
-function Logs({ changes, event, breadCrumbs }: LogsProps) {
-  const { version: currentVersion, name: eventName } = event;
-
-  const getEventUrl = (version: string) => {
-    const isVersionCurrentVersion = version === currentVersion;
-    if (event.domain) {
-      return isVersionCurrentVersion
-        ? `/domains/${event.domain}/events/${eventName}`
-        : `/domains/${event.domain}/events/${eventName}/v/${version}`;
-    }
-    return isVersionCurrentVersion ? `/events/${eventName}` : `/events/${eventName}/v/${version}`;
-  };
-
-  useEffect(() => {
-    const configuration = {
-      drawFileList: false,
-      matching: 'lines',
-      highlight: true,
-      fileListToggle: false,
-      outputFormat: 'side-by-side',
-    };
-
-    changes.forEach((diff, index) => {
-      if (diff.value) {
-        const targetElement = document.getElementById(`code-diff-${index}`);
-
-        // @ts-ignore
-        const diff2htmlUi = new Diff2Html.Diff2HtmlUI(targetElement, diff.value, configuration);
-        diff2htmlUi.draw();
-        diff2htmlUi.highlightCode();
-      }
-    });
-  }, [changes]);
-
-  return (
-    <div className="flex relative min-h-screen">
-      <div className=" flex flex-col w-0 flex-1 ">
-        <main className="flex-1 ">
-          <div className="py-8 xl:py-10">
-            <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 xl:max-w-7xl xl:grid xl:grid-cols-4">
-              <div className="xl:col-span-4 flex-col justify-between flex ">
-                <div className="mb-5 border-b border-gray-100 pb-4">
-                  <BreadCrumbs pages={breadCrumbs} />
-                </div>
-                <div>
-                  <div className="border-b pb-4 flex justify-between mb-4">
-                    <div className="space-y-2 w-full">
-                      <h1 className="text-3xl font-bold text-gray-900 relative">{eventName}</h1>
-                    </div>
-                  </div>
-
-                  {changes.length === 0 && <div className="text-gray-400 text-xl">No versions for Event found.</div>}
-
-                  <div className="flow-root mb-20">
-                    <ul className="">
-                      {changes.map((data, eventIdx) => (
-                        <li key={eventIdx} className="">
-                          <div className="relative pb-8">
-                            {eventIdx !== changes.length - 1 ? (
-                              <span className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-100" aria-hidden="true" />
-                            ) : null}
-                            <div className="relative flex space-x-3">
-                              <div>
-                                <span
-                                  className={classNames(
-                                    'h-8 text-white text-xs w-8 rounded-full flex items-center justify-center ring-8 ring-white bg-blue-500'
-                                  )}
-                                >
-                                  <CodeIcon className="h-4 w-4" />
-                                  {/* {event.versions[0]} */}
-                                </span>
-                              </div>
-                              <div>
-                                <div>
-                                  <p className="font-bold text-gray-800 text-xl">
-                                    Schema version update
-                                    {data.versions.map((version, index) => (
-                                      <Link key={version} href={getEventUrl(version)}>
-                                        <a className="font-medium">
-                                          {index === 0 && ` from`}
-                                          <span className="text-blue-500 underline px-1">
-                                            {version}
-                                            {version === currentVersion ? '(latest)' : ''}
-                                          </span>
-                                          {index === 0 && `to`}
-                                        </a>
-                                      </Link>
-                                    ))}
-                                  </p>
-                                  {data.changelog.source && (
-                                    <>
-                                      <h2 className="text-xl text-blue-500 font-bold mt-4 border-b border-gray-100 pb-2">
-                                        Changelog
-                                      </h2>
-                                      <div className="prose max-w-none mt-2">
-                                        <MDXRemote {...data.changelog.source} />
-                                      </div>
-                                    </>
-                                  )}
-                                  {!data.changelog.source && (
-                                    <h2 className="text-base text-gray-300 font-bold mt-4">No changelog file found.</h2>
-                                  )}
-                                </div>
-                                <div className="text-right text-sm text-gray-500 py-4">
-                                  <div id={`code-diff-${eventIdx}`} />
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-}
-
-export const getStaticProps = async ({ params }) => {
-  const { name: eventName } = params;
-
-  const history = await getLogsForEvent({ eventName });
-  const { event } = await getEventByName({ eventName });
-
-  return {
-    props: {
-      changes: history,
-      event,
-      breadCrumbs: [
-        { name: 'Events', href: '/events', current: false },
-        { name: event.name, href: `/events/${event.name}`, current: false },
-        { name: 'Logs', href: `/events/${event.name}/history`, current: true },
-      ],
-    },
-  };
-};
-
-export async function getStaticPaths() {
-  const events = getAllEvents();
-  const eventsWithoutDomains = events.filter((event) => !event.domain);
-  const paths = eventsWithoutDomains.map((event) => ({ params: { name: event.name } }));
-
-  return {
-    paths,
-    fallback: false,
-  };
-}
-
-export default Logs;