@eventcatalog/core 5.0.0-beta.9 → 5.0.1

package/eventcatalog/src/features/studio/components/ContainerChooser.tsx

@@ -1,145 +0,0 @@
-import { useEffect, useState, type ReactElement } from 'react';
-import { X } from 'lucide-react';
-import type { CatalogResource } from '../catalog-resources';
-
-/**
- * Asked when a domain or system is dropped on the canvas: is it a card (connected to what it contains), or a
- * container that what it contains sits inside? Styled like the visualiser's group-by picker (boxes or lanes).
- */
-
-export type ContainerChoice = { as: 'card' } | { as: 'container'; withContents: boolean };
-
-// Small pictures of the two ways a domain or system can be on the canvas
-export const CardPreview = () => (
-  <svg viewBox="0 0 64 36" className="h-9 w-16" aria-hidden>
-    <rect
-      x="18"
-      y="8"
-      width="28"
-      height="20"
-      rx="4"
-      fill="currentColor"
-      fillOpacity="0.1"
-      stroke="currentColor"
-      strokeOpacity="0.5"
-      strokeWidth="1.5"
-    />
-    <rect x="23" y="13" width="14" height="3" rx="1.5" fill="currentColor" fillOpacity="0.6" />
-    <rect x="23" y="19" width="18" height="2" rx="1" fill="currentColor" fillOpacity="0.35" />
-    <path d="M46 18h12" stroke="currentColor" strokeOpacity="0.5" strokeWidth="1.5" strokeDasharray="2 2" />
-    <rect x="57" y="14" width="6" height="8" rx="1.5" fill="currentColor" fillOpacity="0.4" />
-  </svg>
-);
-
-const ContainerPreview = () => (
-  <svg viewBox="0 0 64 36" className="h-9 w-16" aria-hidden>
-    <rect
-      x="4"
-      y="2"
-      width="56"
-      height="32"
-      rx="4"
-      fill="currentColor"
-      fillOpacity="0.08"
-      stroke="currentColor"
-      strokeOpacity="0.5"
-      strokeWidth="1.5"
-    />
-    <path d="M4 10h56" stroke="currentColor" strokeOpacity="0.35" strokeWidth="1" />
-    <rect x="8" y="4.5" width="14" height="3" rx="1.5" fill="currentColor" fillOpacity="0.6" />
-    <rect x="10" y="15" width="18" height="12" rx="2" fill="currentColor" fillOpacity="0.5" />
-    <rect x="36" y="15" width="18" height="12" rx="2" fill="currentColor" fillOpacity="0.5" />
-  </svg>
-);
-
-const OPTIONS: { as: ContainerChoice['as']; label: string; hint: string; Preview: () => ReactElement }[] = [
-  { as: 'card', label: 'Card', hint: 'Connected to what it contains', Preview: CardPreview },
-  { as: 'container', label: 'Container', hint: 'What it contains sits inside it', Preview: ContainerPreview },
-];
-
-const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? '' : 's'}`;
-
-export default function ContainerChooser({
-  resource,
-  contents,
-  position,
-  onChoose,
-  onCancel,
-}: {
-  resource: CatalogResource;
-  /** What it contains in the catalog that isn't on the canvas yet */
-  contents: { systems: number; services: number };
-  /** Where to show it (screen coordinates) */
-  position: { x: number; y: number };
-  onChoose: (choice: ContainerChoice) => void;
-  onCancel: () => void;
-}) {
-  const [withContents, setWithContents] = useState(true);
-  const noun = resource.collection === 'domains' ? 'domain' : 'system';
-  const contentsLabel = [
-    contents.systems > 0 && plural(contents.systems, 'system'),
-    contents.services > 0 && plural(contents.services, 'service'),
-  ]
-    .filter(Boolean)
-    .join(' and ');
-
-  useEffect(() => {
-    const onKeyDown = (event: KeyboardEvent) => event.key === 'Escape' && onCancel();
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [onCancel]);
-
-  // Kept on screen, next to where it was dropped
-  const left = Math.min(Math.max(position.x - 160, 12), window.innerWidth - 332);
-  const top = Math.min(Math.max(position.y - 20, 12), window.innerHeight - 260);
-
-  return (
-    <div className="fixed inset-0 z-50" onPointerDown={onCancel}>
-      <div
-        role="dialog"
-        aria-label={`Add ${resource.name} as`}
-        onPointerDown={(event) => event.stopPropagation()}
-        className="absolute w-80 rounded-lg border p-1.5 shadow-xl bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
-        style={{ left, top }}
-      >
-        <div className="flex items-start justify-between gap-2 px-2 pb-1.5 pt-1">
-          <div>
-            <p className="text-[10px] font-semibold uppercase tracking-wider text-[rgb(var(--ec-page-text-muted))]">
-              Add this {noun} as
-            </p>
-            <p className="truncate text-xs font-semibold">{resource.name}</p>
-          </div>
-          <button
-            onClick={onCancel}
-            aria-label="Cancel"
-            className="rounded p-0.5 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)]"
-          >
-            <X size={14} />
-          </button>
-        </div>
-
-        <div className="grid grid-cols-2 gap-1.5 px-0.5 pb-0.5">
-          {OPTIONS.map(({ as, label, hint, Preview }) => (
-            <button
-              key={as}
-              autoFocus={as === 'container'}
-              onClick={() => onChoose(as === 'card' ? { as } : { as, withContents: withContents && !!contentsLabel })}
-              className="flex flex-col items-center gap-1 rounded-md border px-2 pb-1.5 pt-2 text-xs outline-none transition-colors border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text-muted))] hover:border-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent)/0.08)] hover:text-[rgb(var(--ec-accent))] focus-visible:border-[rgb(var(--ec-accent))] focus-visible:text-[rgb(var(--ec-accent))]"
-            >
-              <Preview />
-              <span className="font-semibold">{label}</span>
-              <span className="text-center text-[10px] leading-tight text-[rgb(var(--ec-page-text-muted))]">{hint}</span>
-            </button>
-          ))}
-        </div>
-
-        {contentsLabel && (
-          <label className="mt-1 flex items-center gap-2 rounded-md px-2 py-1.5 text-[11px] text-[rgb(var(--ec-page-text-muted))]">
-            <input type="checkbox" checked={withContents} onChange={(event) => setWithContents(event.target.checked)} />
-            As a container, bring its {contentsLabel} inside, with their messages and data stores
-          </label>
-        )}
-      </div>
-    </div>
-  );
-}

package/eventcatalog/src/features/studio/components/DragGhost.tsx

@@ -1,115 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent } from 'react';
-import { ReactFlow, ReactFlowProvider, useStoreApi, type Node, type XYPosition } from '@xyflow/react';
-import { getNodeSize, isGroupType } from '../node-types';
-import { nodeTypes } from './canvas-nodes';
-
-/**
- * Dragging something from the left panel onto the canvas shows the node it becomes, under the pointer, at the
- * canvas's zoom and where it will land (centred on the pointer, as it's dropped). Drawn here rather than as the
- * browser's drag image, which browsers shrink, fade and put a backing behind.
- */
-
-/** What's dragged: the node it becomes */
-export type DragPreview = { type: string; data: Record<string, unknown> };
-/** Starts dragging `value` as `dragType`, showing `preview` as what's dragged */
-export type StartDrag = (dragType: string, value: string, preview: DragPreview) => (event: DragEvent) => void;
-
-// Hides the browser's own drag image (a transparent pixel)
-const NO_DRAG_IMAGE =
-  typeof Image === 'undefined'
-    ? undefined
-    : Object.assign(new Image(), { src: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' });
-
-// Room around the node for the badge on its top edge
-const MARGIN = 16;
-const PRO_OPTIONS = { hideAttribution: true };
-
-type Ghost = { preview: DragPreview; zoom: number; at: XYPosition };
-
-/** The ghost of what's being dragged, and how to start dragging something with one */
-export function useDragGhost() {
-  const store = useStoreApi();
-  const [ghost, setGhost] = useState<Ghost | null>(null);
-
-  const startDrag = useCallback<StartDrag>(
-    (dragType, value, preview) => (event) => {
-      event.dataTransfer.setData(dragType, value);
-      event.dataTransfer.effectAllowed = 'move';
-      if (NO_DRAG_IMAGE) event.dataTransfer.setDragImage(NO_DRAG_IMAGE, 0, 0);
-      setGhost({ preview, zoom: store.getState().transform[2], at: { x: event.clientX, y: event.clientY } });
-    },
-    [store]
-  );
-
-  const element = ghost && <DragGhost ghost={ghost} onEnd={() => setGhost(null)} />;
-  return { startDrag, ghost: element };
-}
-
-function DragGhost({ ghost, onEnd }: { ghost: Ghost; onEnd: () => void }) {
-  const ref = useRef<HTMLDivElement>(null);
-  const { preview, zoom } = ghost;
-  const container = isGroupType(preview.type);
-  // The size it's added at (containers are sized; cards are drawn at their own size inside this)
-  const size = getNodeSize(preview.type);
-  // The node is placed with its middle where it's dropped, at the size it's added at
-  const offset = { x: (size.width / 2) * zoom + MARGIN, y: (size.height / 2) * zoom + MARGIN };
-
-  // Follows the pointer (as the browser reports it while dragging) without re-rendering, and goes when it's dropped
-  useEffect(() => {
-    const move = (x: number, y: number) => {
-      if (ref.current) ref.current.style.transform = `translate(${x - offset.x}px, ${y - offset.y}px)`;
-    };
-    move(ghost.at.x, ghost.at.y);
-    const onDragOver = (event: globalThis.DragEvent) => {
-      if (event.clientX || event.clientY) move(event.clientX, event.clientY);
-    };
-    document.addEventListener('dragover', onDragOver);
-    document.addEventListener('drop', onEnd);
-    document.addEventListener('dragend', onEnd);
-    return () => {
-      document.removeEventListener('dragover', onDragOver);
-      document.removeEventListener('drop', onEnd);
-      document.removeEventListener('dragend', onEnd);
-    };
-  }, [ghost]);
-
-  const nodes = useMemo<Node[]>(
-    () => [
-      {
-        id: 'drag-ghost',
-        type: preview.type,
-        position: { x: 0, y: 0 },
-        data: preview.data,
-        ...(container && size),
-      },
-    ],
-    [preview, container, size]
-  );
-  const viewport = useMemo(() => ({ x: MARGIN, y: MARGIN, zoom }), [zoom]);
-
-  return (
-    <div
-      ref={ref}
-      aria-hidden
-      // Sized here: the visualiser's styles make its class fill the window
-      className="studio-drag-preview eventcatalog-visualizer pointer-events-none fixed left-0 top-0 z-[100]"
-      style={{ width: size.width * zoom + MARGIN * 2, height: size.height * zoom + MARGIN * 2 }}
-    >
-      <ReactFlowProvider>
-        <ReactFlow
-          nodes={nodes}
-          nodeTypes={nodeTypes}
-          defaultViewport={viewport}
-          proOptions={PRO_OPTIONS}
-          nodesDraggable={false}
-          nodesConnectable={false}
-          elementsSelectable={false}
-          panOnDrag={false}
-          zoomOnScroll={false}
-          zoomOnPinch={false}
-          preventScrolling={false}
-        />
-      </ReactFlowProvider>
-    </div>
-  );
-}

package/eventcatalog/src/features/studio/components/Picture.tsx

@@ -1,21 +0,0 @@
-import { useState } from 'react';
-
-/**
- * Someone's picture from their sign-in provider (SSO), loaded from there. By default it covers their avatar's
- * initials, which show again if it doesn't load (blocked, expired, or no longer there).
- */
-export default function Picture({ src, className = 'absolute inset-0 h-full w-full' }: { src?: string; className?: string }) {
-  const [failed, setFailed] = useState<string>();
-  if (!src || failed === src) return null;
-  return (
-    <img
-      src={src}
-      alt=""
-      draggable={false}
-      // Some providers (e.g. Google) refuse pictures loaded with a referrer from another site
-      referrerPolicy="no-referrer"
-      onError={() => setFailed(src)}
-      className={`rounded-full object-cover ${className}`}
-    />
-  );
-}

package/eventcatalog/src/features/studio/components/PropertiesPanel.tsx

@@ -1,212 +0,0 @@
-import { memo, useState, type FormEvent, type ReactNode } from 'react';
-import type { Node } from '@xyflow/react';
-import { Box, ExternalLink, Library, Trash2, X } from 'lucide-react';
-import { getCatalogLink } from '../catalog';
-import { getNodeLabel, getResource, isVersioned, updateResource } from '../node-types';
-import type { UpdateNodeData } from './canvas-nodes';
-import { NODE_ICONS } from './icons';
-import { STATUS } from './status';
-
-const inputClass =
-  'w-full rounded-lg border px-3 py-2 text-sm shadow-sm bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))] placeholder:text-[rgb(var(--ec-page-text-muted))] focus:outline-none focus:border-[rgb(var(--ec-accent))] focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)] read-only:cursor-default read-only:opacity-70 read-only:shadow-none read-only:focus:ring-0 read-only:focus:border-[rgb(var(--ec-input-border))]';
-const buttonClass = 'rounded-lg px-4 py-2 text-sm font-medium transition-colors';
-
-// Versions are usually semantic versions (1.0.0), but any text is allowed
-const LOOKS_LIKE_A_VERSION = /^v?\d+(\.\d+){0,2}([-+][\w.-]+)?$/;
-
-/** How to name each type, shown under the name */
-const NAME_HINTS: Record<string, string> = {
-  event: 'The name of the event. Use a verb-noun format in the past tense (e.g., OrderPlaced).',
-  command: 'The name of the command. Use an instruction (e.g., PlaceOrder).',
-  query: 'The name of the query. Ask for something (e.g., GetOrder).',
-  service: 'The name of the service (e.g., Orders Service).',
-  channel: 'The name of the channel (e.g., orders.events).',
-};
-
-type Field = 'name' | 'version' | 'summary';
-
-/**
- * The details of the node being edited: its name, version and summary, saved together with Save changes (one
- * change for everyone, and one step to undo). Catalog resources are read only: they're changed in the catalog.
- * Notes and text are edited on the canvas.
- */
-export default memo(function PropertiesPanel({
-  node,
-  onChange,
-  onDelete,
-  onClose,
-}: {
-  /** What's shown of the node (not its position, so dragging it doesn't re-render the panel) */
-  node: Pick<Node, 'id' | 'type' | 'data'>;
-  onChange: UpdateNodeData;
-  onDelete: (ids: string[]) => void;
-  onClose: () => void;
-}) {
-  const resource = getResource(node.type, node.data);
-  const link = getCatalogLink(node);
-  const label = getNodeLabel(node.type);
-  const noun = label.toLowerCase();
-  const { icon: Icon, className: iconClassName } = NODE_ICONS[node.type ?? ''] ?? { icon: Box, className: '' };
-  const versioned = isVersioned(node.type);
-
-  // What's been changed here and not saved. Fields not changed show the node as it is, so changes others make while
-  // it's open show up.
-  const [draft, setDraft] = useState<Partial<Record<Field, string>>>({});
-  const saved: Record<Field, string> = {
-    name: String(resource.name ?? ''),
-    version: String(link?.version ?? resource.version ?? ''),
-    summary: String(resource.summary ?? ''),
-  };
-  const value = (field: Field) => draft[field] ?? saved[field];
-  const edit = (field: Field) => (event: { target: { value: string } }) =>
-    setDraft((current) => ({ ...current, [field]: event.target.value }));
-
-  const changes = Object.entries(draft).filter(([field, text]) => text !== saved[field as Field]);
-  const missing = !value('name').trim() || (versioned && !value('version').trim());
-  const canSave = !link && changes.length > 0 && !missing;
-  const version = value('version');
-
-  const save = (event?: FormEvent) => {
-    event?.preventDefault();
-    if (!canSave) return;
-    onChange(node.id, (data) => updateResource(node.type, data, Object.fromEntries(changes)));
-    setDraft({});
-    onClose();
-  };
-
-  return (
-    <aside className="flex w-[22rem] shrink-0 flex-col border-l bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
-      <header className="flex items-center gap-3 border-b px-5 py-4 border-[rgb(var(--ec-page-border))]">
-        <Icon size={22} className={`shrink-0 ${iconClassName}`} />
-        <h2 className="min-w-0 flex-1 truncate text-lg font-semibold">{label}</h2>
-        <button
-          type="button"
-          onClick={onClose}
-          title="Close"
-          aria-label="Close"
-          className="shrink-0 rounded-md p-1 text-[rgb(var(--ec-icon-color))] hover:bg-[rgb(var(--ec-page-border)/0.5)] hover:text-[rgb(var(--ec-icon-hover))]"
-        >
-          <X size={18} />
-        </button>
-      </header>
-
-      <form
-        onSubmit={save}
-        // ⌘/Ctrl + Enter saves from any field (Enter alone adds a line to the summary)
-        onKeyDown={(event) => (event.metaKey || event.ctrlKey) && event.key === 'Enter' && save(event)}
-        className="flex min-h-0 flex-1 flex-col"
-      >
-        <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-5">
-          {link && (
-            <div className="space-y-2 rounded-lg border p-3 text-xs bg-[rgb(var(--ec-accent-subtle)/0.5)] border-[rgb(var(--ec-accent)/0.25)]">
-              <p className="flex items-center gap-1.5 font-semibold text-[rgb(var(--ec-page-text))]">
-                <Library size={14} className="text-[rgb(var(--ec-accent))]" />
-                From your catalog
-              </p>
-              <p className="text-[rgb(var(--ec-page-text-muted))]">
-                Its name, version and summary come from the catalog: change them there and they're kept in sync here.
-              </p>
-              <a
-                href={link.url}
-                target="_blank"
-                rel="noreferrer"
-                className="inline-flex items-center gap-1 font-medium text-[rgb(var(--ec-accent))] hover:underline"
-              >
-                Open in catalog <ExternalLink size={12} />
-              </a>
-            </div>
-          )}
-
-          <FormField label="Name" hint={NAME_HINTS[node.type ?? ''] ?? `The name of the ${noun}.`} required={!link}>
-            <input
-              autoFocus={!link}
-              value={value('name')}
-              readOnly={!!link}
-              onChange={edit('name')}
-              placeholder={`Name this ${noun}`}
-              className={inputClass}
-            />
-          </FormField>
-          {versioned && (
-            <FormField label="Version" hint="The version number (e.g., 1.0.0)." required={!link}>
-              <input
-                value={version}
-                readOnly={!!link}
-                onChange={edit('version')}
-                placeholder="0.0.1"
-                spellCheck={false}
-                className={inputClass}
-              />
-              {!link && version && !LOOKS_LIKE_A_VERSION.test(version) && (
-                <p className={`text-xs ${STATUS.warning.text}`}>Versions are usually like 1.0.0</p>
-              )}
-            </FormField>
-          )}
-          <FormField label="Summary" hint={`A brief summary of the ${noun}.`}>
-            <textarea
-              rows={5}
-              value={value('summary')}
-              readOnly={!!link}
-              onChange={edit('summary')}
-              placeholder={`What does this ${noun} do?`}
-              className={`${inputClass} resize-y`}
-            />
-          </FormField>
-        </div>
-
-        <footer className="flex items-center gap-2 border-t px-5 py-4 border-[rgb(var(--ec-page-border))]">
-          <button
-            type="button"
-            onClick={() => onDelete([node.id])}
-            title={`Delete ${noun}`}
-            aria-label={`Delete ${noun}`}
-            className={`mr-auto rounded-lg p-2 ${STATUS.danger.text} ${STATUS.danger.hover}`}
-          >
-            <Trash2 size={16} />
-          </button>
-          <button
-            type="button"
-            onClick={onClose}
-            className={`${buttonClass} border border-[rgb(var(--ec-page-border))] hover:bg-[rgb(var(--ec-page-border)/0.4)]`}
-          >
-            {link ? 'Close' : 'Cancel'}
-          </button>
-          {!link && (
-            <button
-              type="submit"
-              disabled={!canSave}
-              className={`${buttonClass} bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))] hover:bg-[rgb(var(--ec-button-bg-hover))] disabled:cursor-not-allowed disabled:opacity-50`}
-            >
-              Save changes
-            </button>
-          )}
-        </footer>
-      </form>
-    </aside>
-  );
-});
-
-function FormField({
-  label,
-  hint,
-  required = false,
-  children,
-}: {
-  label: string;
-  hint: string;
-  required?: boolean;
-  children: ReactNode;
-}) {
-  return (
-    <label className="block space-y-2">
-      <span className="block">
-        <span className="block text-sm font-semibold text-[rgb(var(--ec-page-text))]">
-          {label}
-          {required && <span className={`ml-0.5 ${STATUS.danger.text}`}>*</span>}
-        </span>
-        <span className="mt-0.5 block text-xs text-[rgb(var(--ec-page-text-muted))]">{hint}</span>
-      </span>
-      {children}
-    </label>
-  );
-}