npm - @eventcatalog/core - Versions diffs - 1.2.7 → 2.0.1 - Mend

@eventcatalog/core 1.2.7 → 2.0.1

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 (622) hide show

package/pages/overview.tsx DELETED Viewed

@@ -1,89 +0,0 @@
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
-import Head from 'next/head';
-import dynamic from 'next/dynamic';
-import type { Event, Service } from '@eventcatalog/types';
-import { getAllEvents, getUniqueServicesNamesFromEvents } from '@/lib/events';
-import { useConfig } from '@/hooks/EventCatalog';
-export interface PageProps {
-  events: Event[];
-  services: Service[];
-}
-const ForceGraph3D = dynamic(() => import('react-force-graph-3d').then((module) => module.default), { ssr: false });
-function NodeElement({ node: { id } }: { node: { id: string } }) {
-  return <div className={`text-sm text-center p-1 rounded-md `}>{id}</div>;
-}
-const MAX_LENGTH_FOR_NODES = 30;
-const truncateNode = (value) => (value.length > MAX_LENGTH_FOR_NODES ? `${value.substring(0, MAX_LENGTH_FOR_NODES)}...` : value);
-function Graph({ events, services }: PageProps) {
-  const { title } = useConfig();
-  const eventNodes = events.map(({ name: event }) => ({ id: truncateNode(event), group: 1, type: 'event' }));
-  const serviceNodes = services.map((service) => ({ id: truncateNode(service), group: 2, type: 'service' }));
-  // Create all links
-  const links = events.reduce((nodes, event) => {
-    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);
-  }, []);
-  const data = { nodes: eventNodes.concat(serviceNodes), links };
-  if (typeof window === 'undefined') {
-    return null;
-  }
-  // @ts-ignore
-  const extraRenderers = [new window.THREE.CSS2DRenderer()];
-  return (
-    <div className="min-h-screen">
-      <Head>
-        <title>{title} - 3D Node Graph</title>
-      </Head>
-      <ForceGraph3D
-        extraRenderers={extraRenderers}
-        graphData={data}
-        nodeAutoColorBy="group"
-        nodeRelSize={9}
-        nodeThreeObject={(node) => {
-          const nodeEl = document.createElement('div');
-          // @ts-ignore
-          nodeEl.innerHTML = ReactDOMServer.renderToString(<NodeElement node={node} />);
-          node.height = '100px';
-          nodeEl.style.color = node.color;
-          // @ts-ignore
-          return new THREE.CSS2DObject(nodeEl);
-        }}
-        nodeThreeObjectExtend
-        enableNodeDrag={false}
-        nodeOpacity={0.2}
-        linkDirectionalParticles={2}
-        linkDirectionalParticleWidth={2}
-        linkDirectionalParticleColor={() => 'rgba(236, 72, 153, 1)'}
-      />
-    </div>
-  );
-}
-export default Graph;
-export const getStaticProps = () => {
-  const events = getAllEvents();
-  const services = getUniqueServicesNamesFromEvents(events);
-  return {
-    props: {
-      events,
-      // @ts-ignore
-      services: [...new Set(services)],
-    },
-  };
-};

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

@@ -1,164 +0,0 @@
-import Head from 'next/head';
-import { MDXRemote } from 'next-mdx-remote';
-import { Service } from '@eventcatalog/types';
-import ContentView from '@/components/ContentView';
-import { getAllServices, getServiceByName } from '@/lib/services';
-import OpenApiSpec from '@/components/Mdx/OpenApiSpec';
-import AsyncApiSpec from '@/components/Mdx/AsyncApiSpec';
-import Admonition from '@/components/Mdx/Admonition';
-import Mermaid from '@/components/Mermaid';
-import ServiceSidebar from '@/components/Sidebars/ServiceSidebar';
-import BreadCrumbs from '@/components/BreadCrumbs';
-import NotFound from '@/components/NotFound';
-import getBackgroundColor from '@/utils/random-bg';
-import { useConfig, useUrl } from '@/hooks/EventCatalog';
-import { MarkdownFile } from '@/types/index';
-import NodeGraph from '@/components/Mdx/NodeGraph/NodeGraph';
-interface ServicesPageProps {
-  service: Service;
-  markdown: MarkdownFile;
-  notFound?: boolean;
-  breadCrumbs: any;
-}
-function MermaidComponent({ title, service, charts }: { title?: string; service: Service; charts?: string[] }) {
-  return (
-    <div className="mx-auto w-full py-10">
-      {title && <h2 className="text-lg font-medium text-gray-900 underline">{title}</h2>}
-      <Mermaid source="service" data={service} rootNodeColor={getBackgroundColor(service.name)} charts={charts} />
-    </div>
-  );
-}
-const getComponents = (service: Service) => ({
-  Admonition,
-  AsyncAPI: ({ url }: { url?: string }) => {
-    if (url) return <AsyncApiSpec url={url} />;
-    if (!service.asyncAPISpec && !url) return null;
-    return <AsyncApiSpec spec={service.asyncAPISpec} />;
-  },
-  OpenAPI: ({ url, ...props }: { url?: string }) => {
-    if (!service.openAPISpec) return null;
-    return <OpenApiSpec spec={service.openAPISpec} url={url} {...props} />;
-  },
-  Mermaid: ({ title, charts }: { title: string; charts?: string[] }) => (
-    <MermaidComponent service={service} title={title} charts={charts} />
-  ),
-  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="service"
-        data={service}
-        rootNodeColor={getBackgroundColor(service.name)}
-        maxHeight={maxHeight}
-        maxZoom={maxZoom}
-        fitView={fitView}
-        zoomOnScroll={zoomOnScroll}
-        isAnimated={isAnimated}
-        isDraggable={isDraggable}
-        // isHorizontal={isHorizontal}
-      />
-    </div>
-  ),
-});
-export default function Services(props: ServicesPageProps) {
-  const { service, markdown, notFound, breadCrumbs } = props;
-  const { title } = useConfig();
-  const { getEditUrl, hasEditUrl } = useUrl();
-  const editURL = () => {
-    if (!hasEditUrl) return '';
-    const path = service.domain
-      ? `/domains/${service.domain}/services/${service.name}/index.md`
-      : `/services/${service.name}/index.md`;
-    return getEditUrl(path);
-  };
-  if (notFound) return <NotFound type="service" name={service.name} editUrl={editURL()} />;
-  const { name, summary, draft } = service;
-  const { lastModifiedDate } = markdown;
-  const mdxComponents = getComponents(service);
-  return (
-    <>
-      <Head>
-        <title>
-          {title} - {name}
-        </title>
-      </Head>
-      <ContentView
-        title={name}
-        editUrl={editURL()}
-        subtitle={summary}
-        draft={draft}
-        lastModifiedDate={lastModifiedDate}
-        breadCrumbs={<BreadCrumbs pages={breadCrumbs} homePath="/services" />}
-        sidebar={<ServiceSidebar service={service} />}
-      >
-        {/* @ts-ignore */}
-        <MDXRemote {...markdown.source} components={mdxComponents} />
-      </ContentView>
-    </>
-  );
-}
-export async function getStaticProps({ params }) {
-  try {
-    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) {
-    return {
-      props: {
-        notFound: true,
-        service: { name: params.name },
-      },
-    };
-  }
-}
-export async function getStaticPaths() {
-  const services = getAllServices();
-  const paths = services.map((service) => ({ params: { name: service.name } }));
-  return {
-    paths,
-    fallback: false,
-  };
-}

package/pages/services.tsx DELETED Viewed

@@ -1,311 +0,0 @@
-import { Fragment, useState, useCallback, useEffect } from 'react';
-import Head from 'next/head';
-import { Service } from '@eventcatalog/types';
-import debounce from 'lodash.debounce';
-import { Menu, Transition } from '@headlessui/react';
-import { ChevronDownIcon, SearchIcon } from '@heroicons/react/solid';
-import ServiceGrid from '@/components/Grids/ServiceGrid';
-import { getAllServices } from '@/lib/services';
-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 {
-  services: Service[];
-}
-export default function Page({ services }: PageProps) {
-  const [servicesToRender, setServicesToRender] = useState(services);
-  const [searchFilter, setSearchFilter] = useState('');
-  const [selectedFilters, setSelectedFilters] = useState({ badges: [] });
-  const filters = [
-    {
-      id: 'badges',
-      name: `Filter by Badges`,
-      options: services.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 getFilteredServices = (): any => {
-    let filteredServices = services;
-    if (!selectedFilters.badges && !searchFilter) return services;
-    if (searchFilter) {
-      filteredServices = filteredServices.filter((service) => service.name.toLowerCase().includes(searchFilter.toLowerCase()));
-    }
-    if (selectedFilters.badges.length > 0) {
-      const { badges: badgeFilters } = selectedFilters;
-      // @ts-ignore
-      filteredServices = filteredServices.filter((event) => {
-        if (!event.badges) {
-          return false;
-        }
-        return event.badges.filter((badge) => badgeFilters.includes(badge.content)).length !== 0;
-      });
-    }
-    return filteredServices;
-  };
-  useEffect(() => {
-    setServicesToRender(getFilteredServices());
-    // 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),
-    [servicesToRender]
-  );
-  const filtersApplied = !!searchFilter || selectedFilters.badges.length > 0;
-  const [showMermaidDiagrams, setShowMermaidDiagrams] = useState(false);
-  const [showNodeGraphs, setShowNodeGraphs] = useState(false);
-  const { title } = useConfig();
-  return (
-    <>
-      <Head>
-        <title>{title} - All Services</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">Services ({services.length})</h1>
-          <div className="flex items-center">
-            <Menu as="div" className="relative hidden 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="service" className="font-bold block text-sm font-medium text-gray-700">
-                  Search Services
-                </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="service"
-                    id="service"
-                    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 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="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 Services (${servicesToRender.length}/${services.length})`
-                    : `All Services (${services.length})`}
-                </h2>
-                <ServiceGrid
-                  services={servicesToRender}
-                  showMermaidDiagrams={showMermaidDiagrams}
-                  showNodeGraphs={showNodeGraphs}
-                />
-                {servicesToRender.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 services found.
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-    </>
-  );
-}
-export async function getStaticProps() {
-  const services = getAllServices();
-  return {
-    props: {
-      services,
-    },
-  };
-}

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

@@ -1,101 +0,0 @@
-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, domains, userId }: UserPageProps) {
-  const { getUserById } = useUser();
-  const user = getUserById(userId);
-  return (
-    <div className="flex relative min-h-screen">
-      <div 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-3 xl:pr-8 xl:border-r xl:border-gray-200 min-h-screen">
-              <div className="xl:border-b pb-4 flex justify-between ">
-                <div className="space-y-2">
-                  <h1 className="text-3xl font-bold text-gray-900 relative">{user.name}</h1>
-                </div>
-              </div>
-              {events.length > 0 && (
-                <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>
-              )}
-              {services.length > 0 && (
-                <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>
-              )}
-              {domains.length > 0 && (
-                <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 ">
-                <div className="flex-shrink-0">
-                  <div className="relative">
-                    <img className="h-16 w-16 rounded-full" src={user.avatarUrl} alt="" />
-                    <span className="absolute inset-0 shadow-inner rounded-full" aria-hidden="true" />
-                  </div>
-                </div>
-                <div>
-                  <h1 className="text-xl font-bold text-gray-900">{user.name}</h1>
-                  <p className="text-sm font-medium text-gray-500">{user.role}</p>
-                </div>
-              </div>
-              <div className="mt-6 flow-root border-t border-gray-200 py-6 text-sm">{user.summary}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-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,
-    },
-  };
-};
-export async function getStaticPaths() {
-  const owners = await getAllOwners();
-  const paths = owners.map((owner) => ({ params: { id: owner } }));
-  return {
-    paths,
-    fallback: false,
-  };
-}