@eventcatalog/core 1.2.7 → 2.0.0

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

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

package/pages/events/[name].tsx

@@ -1,223 +0,0 @@
-import Head from 'next/head';
-import { MDXRemote } from 'next-mdx-remote';
-
-import { Event } from '@eventcatalog/types';
-import Admonition from '@/components/Mdx/Admonition';
-import Examples from '@/components/Mdx/Examples';
-
-import getBackgroundColor from '@/utils/random-bg';
-
-import OpenApiSpec from '@/components/Mdx/OpenApiSpec';
-import ContentView from '@/components/ContentView';
-import Mermaid from '@/components/Mermaid';
-import EventSideBar from '@/components/Sidebars/EventSidebar';
-import NotFound from '@/components/NotFound';
-import BreadCrumbs from '@/components/BreadCrumbs';
-import SyntaxHighlighter from '@/components/SyntaxHighlighter';
-import SchemaViewer from '@/components/Mdx/SchemaViewer/SchemaViewer';
-
-import { getAllEvents, getEventByName } from '@/lib/events';
-import { useConfig, useUrl } from '@/hooks/EventCatalog';
-
-import { MarkdownFile } from '@/types/index';
-import NodeGraph from '@/components/Mdx/NodeGraph/NodeGraph';
-
-export interface EventsPageProps {
-  event: Event;
-  eventPath: string;
-  breadCrumbs: any;
-  markdown: MarkdownFile;
-  notFound?: boolean;
-  loadedVersion?: string;
-}
-
-export const getComponents = ({ event, schema, examples }: any) => ({
-  code: ({ className, ...props }) => {
-    const match = /language-(\w+)/.exec(className || '');
-
-    return match ? <SyntaxHighlighter language={match[1]} {...props} /> : <code className={className} {...props} />;
-  },
-  Schema: ({ title }: { title: string }) => {
-    if (!schema) return null;
-
-    return (
-      <section className="mt-8 xl:mt-10">
-        {title && (
-          <h2 id="activity-title" className="text-lg font-medium text-gray-900 underline">
-            {title}
-          </h2>
-        )}
-        <SyntaxHighlighter language={schema.language} showLineNumbers={false} name={`${event.name} Schema (${schema.language})`}>
-          {schema.snippet}
-        </SyntaxHighlighter>
-      </section>
-    );
-  },
-  SchemaViewer: ({
-    title,
-    renderRootTreeLines = false,
-    defaultExpandedDepth = 1,
-    maxHeight,
-  }: {
-    title?: string;
-    renderRootTreeLines?: boolean;
-    defaultExpandedDepth?: number;
-    maxHeight?: string;
-  }) => {
-    if (!schema) return null;
-
-    return (
-      <section className="mt-8 xl:mt-10">
-        {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
-        <SchemaViewer
-          schema={schema.snippet}
-          maxHeight={parseInt(maxHeight, 10)}
-          renderRootTreeLines={renderRootTreeLines}
-          defaultExpandedDepth={defaultExpandedDepth}
-        />
-      </section>
-    );
-  },
-  Admonition,
-  OpenAPI: ({ url, ...props }: { url?: string }) => {
-    if (!event.openAPISpec) return null;
-    return <OpenApiSpec spec={event.openAPISpec} url={url} {...props} />;
-  },
-  EventExamples: (props) => {
-    if (examples.length > 0) {
-      return <Examples {...props} examples={examples} showLineNumbers />;
-    }
-    console.log(
-      'You are using the <EventExamples /> component without any examples, please read https://eventcatalog.dev/docs/events/adding-examples for more information'
-    );
-    return null;
-  },
-  Mermaid: ({ title, charts }: { title?: string; charts?: string[] }) => (
-    <div className="mx-auto w-full py-10">
-      {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
-      <Mermaid source="event" data={event} rootNodeColor={getBackgroundColor(event.name)} charts={charts} />
-    </div>
-  ),
-  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="event"
-        data={event}
-        rootNodeColor={getBackgroundColor(event.name)}
-        maxHeight={maxHeight}
-        maxZoom={maxZoom}
-        fitView={fitView}
-        zoomOnScroll={zoomOnScroll}
-        isAnimated={isAnimated}
-        isDraggable={isDraggable}
-        // isHorizontal={isHorizontal}
-      />
-    </div>
-  ),
-});
-
-export default function Events(props: EventsPageProps) {
-  const { event, markdown, loadedVersion, notFound, breadCrumbs, eventPath } = props;
-  const { title } = useConfig();
-  const { getEditUrl, hasEditUrl } = useUrl();
-
-  const { name, summary, draft, schema, examples, version } = event;
-
-  if (notFound)
-    return <NotFound type="event" name={event.name} editUrl={hasEditUrl ? getEditUrl(`/events/${name}/index.md`) : ''} />;
-
-  const { lastModifiedDate } = markdown;
-
-  const mdxComponents = getComponents({ event, schema, examples }) as any;
-
-  return (
-    <>
-      <Head>
-        <title>
-          {title} - {name} v{version}
-        </title>
-      </Head>
-      <ContentView
-        title={name}
-        editUrl={hasEditUrl ? getEditUrl(`${eventPath}/index.md`) : ''}
-        subtitle={summary}
-        draft={draft}
-        lastModifiedDate={lastModifiedDate}
-        tags={[{ label: `v${version}` }]}
-        breadCrumbs={<BreadCrumbs pages={breadCrumbs} />}
-        isOldVersion={loadedVersion !== 'latest'}
-        latestVersionUrl={eventPath}
-        version={loadedVersion}
-        sidebar={
-          <EventSideBar
-            event={event}
-            urlPath={eventPath}
-            loadedVersion={loadedVersion}
-            isOldVersion={loadedVersion !== 'latest'}
-          />
-        }
-      >
-        <MDXRemote {...markdown.source} components={mdxComponents} />
-      </ContentView>
-    </>
-  );
-}
-
-export async function getStaticProps({ params }) {
-  try {
-    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',
-      },
-    };
-  } catch (error) {
-    return {
-      props: {
-        notFound: true,
-        event: { name: params.name },
-      },
-    };
-  }
-}
-
-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,
-  };
-}

package/pages/events.tsx

@@ -1,357 +0,0 @@
-import { Fragment, useState, useCallback, useEffect } from 'react';
-import Head from 'next/head';
-import type { Event, Service } from '@eventcatalog/types';
-import debounce from 'lodash.debounce';
-
-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';
-import { useRouter } from 'next/router';
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ');
-}
-
-const sortOptions = [
-  { name: 'Name', href: '#', current: true },
-  { name: 'Version', href: '#', current: false },
-  { name: 'Domains', href: '#', current: false },
-];
-
-export interface PageProps {
-  events: Event[];
-  services: Service[];
-  domains: string[];
-}
-
-export default function Page({ events, services, domains }: PageProps) {
-  const [selectedFilters, setSelectedFilters] = useState({ services: [], domains: [], badges: [] });
-  const [showMermaidDiagrams, setShowMermaidDiagrams] = useState(false);
-  const [showNodeGraphs, setShowNodeGraphs] = useState(false);
-  const [eventsToRender, setEventsToRender] = useState(events);
-  const [searchFilter, setSearchFilter] = useState('');
-
-  const filters = [
-    {
-      id: 'domains',
-      name: `Filter by Domains`,
-      options: domains.map((domain) => ({
-        value: domain,
-        label: domain,
-        checked: false,
-      })),
-    },
-    {
-      id: 'services',
-      name: `Filter by Services`,
-      options: services.map((service) => ({
-        value: service,
-        label: service,
-        checked: false,
-      })),
-    },
-    {
-      id: 'badges',
-      name: `Filter by Badges`,
-      options: events.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 getFilteredEvents = (): any => {
-    if (!selectedFilters.services && !searchFilter && !selectedFilters.domains && !selectedFilters.badges) return events;
-
-    let filteredEvents = events;
-
-    if (selectedFilters.services.length > 0) {
-      // @ts-ignore
-      filteredEvents = filteredEvents.filter((event) => {
-        const { services: serviceFilters } = selectedFilters;
-
-        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 (selectedFilters.badges.length > 0) {
-      const { badges: badgeFilters } = selectedFilters;
-      // @ts-ignore
-      filteredEvents = filteredEvents.filter((event) => {
-        if (!event.badges) {
-          return false;
-        }
-        return event.badges.filter((badge) => badgeFilters.includes(badge.content)).length !== 0;
-      });
-    }
-
-    if (searchFilter) {
-      filteredEvents = filteredEvents.filter((event) => event.name.toLowerCase().includes(searchFilter.toLowerCase()));
-    }
-
-    return filteredEvents;
-  };
-
-  useEffect(() => {
-    setEventsToRender(getFilteredEvents());
-    // 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]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedFilter = useCallback(
-    debounce((e) => {
-      setSearchFilter(e.target.value);
-    }, 500),
-    [eventsToRender]
-  );
-
-  const filtersApplied =
-    !!searchFilter ||
-    selectedFilters.services.length > 0 ||
-    selectedFilters.domains.length > 0 ||
-    selectedFilters.badges.length > 0;
-  const { title } = useConfig();
-
-  return (
-    <>
-      <Head>
-        <title>{title} - All Events</title>
-      </Head>
-      <main className="max-w-7xl mx-auto 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">Events ({events.length})</h1>
-
-          <div className="flex items-center">
-            <Menu as="div" className="hidden relative text-left">
-              <div>
-                <Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
-                  Sort
-                  <ChevronDownIcon
-                    className="flex-shrink-0 -mr-1 ml-1 h-5 w-5 text-gray-400 group-hover:text-gray-500"
-                    aria-hidden="true"
-                  />
-                </Menu.Button>
-              </div>
-
-              <Transition
-                as={Fragment}
-                enter="transition ease-out duration-100"
-                enterFrom="transform opacity-0 scale-95"
-                enterTo="transform opacity-100 scale-100"
-                leave="transition ease-in duration-75"
-                leaveFrom="transform opacity-100 scale-100"
-                leaveTo="transform opacity-0 scale-95"
-              >
-                <Menu.Items className="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
-                  <div className="py-1">
-                    {sortOptions.map((option) => (
-                      <Menu.Item key={option.name}>
-                        {({ active }) => (
-                          <a
-                            href={option.href}
-                            className={classNames(
-                              option.current ? 'font-medium text-gray-900' : 'text-gray-500',
-                              active ? 'bg-gray-100' : '',
-                              'block px-4 py-2 text-sm'
-                            )}
-                          >
-                            {option.name}
-                          </a>
-                        )}
-                      </Menu.Item>
-                    ))}
-                  </div>
-                </Menu.Items>
-              </Transition>
-            </Menu>
-          </div>
-        </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="event" className="font-bold block text-sm font-medium text-gray-700">
-                  Search Events
-                </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="event"
-                    id="event"
-                    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>
-                );
-              })}
-
-              <div 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">Features</span>
-                  </div>
-                </h3>
-                <div className="pt-6">
-                  <div className="space-y-4">
-                    <div className="flex items-center">
-                      <input
-                        id="show-mermaid"
-                        type="checkbox"
-                        onChange={(e) => setShowMermaidDiagrams(e.target.checked)}
-                        defaultChecked={showMermaidDiagrams}
-                        className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
-                      />
-                      <label htmlFor="show-mermaid" className="ml-3 text-sm text-gray-600">
-                        Show Mermaid Diagrams
-                      </label>
-                    </div>
-                  </div>
-                </div>
-                <div className="pt-6">
-                  <div className="space-y-4">
-                    <div className="flex items-center">
-                      <input
-                        id="show-node-graph"
-                        type="checkbox"
-                        onChange={(e) => setShowNodeGraphs(e.target.checked)}
-                        defaultChecked={showNodeGraphs}
-                        className="h-4 w-4 border-gray-300 rounded text-gray-600 focus:ring-gray-500"
-                      />
-                      <label htmlFor="show-node-graph" className="ml-3 text-sm text-gray-600">
-                        Show Node Graphs
-                      </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 Events (${eventsToRender.length}/${events.length})`
-                    : `All Events (${events.length})`}
-                </h2>
-                <EventGrid events={eventsToRender} showMermaidDiagrams={showMermaidDiagrams} showNodeGraphs={showNodeGraphs} />
-                {eventsToRender.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 events found.
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-    </>
-  );
-}
-
-export const getStaticProps = () => {
-  const events = getAllEvents({ hydrateEvents: true });
-  const services = getUniqueServicesNamesFromEvents(events);
-  const domains = getUniqueDomainNamesFromEvents(events);
-
-  return {
-    props: {
-      events,
-      // @ts-ignore
-      services: [...new Set(services)],
-      domains,
-    },
-  };
-};

package/pages/index.tsx

@@ -1,56 +0,0 @@
-/* This example requires Tailwind CSS v2.0+ */
-
-import Link from 'next/link';
-import getConfig from 'next/config';
-import { useConfig } from '@/hooks/EventCatalog';
-
-export default function Example() {
-  const { title, tagline, logo, primaryCTA = { label: 'Explore Events', href: '/events' }, secondaryCTA } = useConfig();
-
-  const { publicRuntimeConfig: { basePath = '' } = {} } = getConfig();
-  const logoToLoad = logo || { alt: 'EventCatalog Logo', src: `logo.svg` };
-
-  return (
-    <main className="sm:bg-top md:min-h-screen bg-gradient-to-t from-blue-700  to-gray-800 ec-homepage">
-      <div className="max-w-7xl mx-auto px-4 py-16 text-center sm:px-6 sm:py-24 lg:px-8 lg:py-48">
-        <img src={`${basePath}/${logoToLoad.src}`} alt={logoToLoad.alt} style={{ height: '85px' }} className="mx-auto" />
-        <h1 className="mt-2 text-4xl font-extrabold text-white tracking-tight sm:text-5xl">{title}</h1>
-        {tagline && <p className="mt-2 text-lg font-medium text-white">{tagline}</p>}
-        <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
-          <div className="rounded-md shadow">
-            <Link href={primaryCTA.href}>
-              <a className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10">
-                {primaryCTA.label}
-              </a>
-            </Link>
-          </div>
-          {secondaryCTA && (
-            <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-              {secondaryCTA.href.includes('http') && (
-                <a
-                  href={secondaryCTA.href}
-                  target="_blank"
-                  className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
-                  rel="noreferrer"
-                >
-                  {secondaryCTA.label}
-                </a>
-              )}
-              {!secondaryCTA.href.includes('http') && (
-                <Link href={secondaryCTA.href}>
-                  <a
-                    className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
-                    rel="noreferrer"
-                  >
-                    {secondaryCTA.label}
-                  </a>
-                </Link>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="mt-6 space-x-5" />
-      </div>
-    </main>
-  );
-}