@eventcatalog/core 5.0.0-beta.5 → 5.0.0-beta.6

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

@@ -0,0 +1,145 @@
+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
+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/JoinForm.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+
+const COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#06b6d4', '#3b82f6', '#8b5cf6', '#ec4899'];
+const NAME_KEY = 'eventcatalog-studio-name';
+
+export const getStoredName = () => {
+  try {
+    return localStorage.getItem(NAME_KEY);
+  } catch {
+    return null;
+  }
+};
+
+export const storeName = (name: string) => {
+  try {
+    localStorage.setItem(NAME_KEY, name);
+  } catch {}
+};
+
+// Same name, same colour across reloads
+export const colorForName = (name: string) => {
+  let hash = 0;
+  for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) | 0;
+  return COLORS[Math.abs(hash) % COLORS.length];
+};
+
+export default function JoinForm({ onJoin }: { onJoin: (name: string) => void }) {
+  const [draft, setDraft] = useState('');
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (draft.trim()) onJoin(draft.trim());
+      }}
+      className="mx-auto mt-20 max-w-sm space-y-4 rounded-lg border p-6 bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))] text-[rgb(var(--ec-page-text))]"
+    >
+      <div>
+        <h1 className="text-lg font-semibold">Join this canvas</h1>
+        <p className="text-sm text-[rgb(var(--ec-page-text-muted))]">What should others call you?</p>
+      </div>
+      <input
+        autoFocus
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        placeholder="Your name"
+        className="w-full rounded-md px-3 py-2 border bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))]"
+      />
+      <button
+        type="submit"
+        disabled={!draft.trim()}
+        className="w-full rounded-md px-3 py-2 text-sm disabled:opacity-50 bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))]"
+      >
+        Join
+      </button>
+    </form>
+  );
+}

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

@@ -0,0 +1,218 @@
+import { memo, useMemo, useState, type DragEvent } from 'react';
+import { Check, Plus, Search } from 'lucide-react';
+import type { CatalogResource } from '../catalog-resources';
+import { NODE_CATEGORIES, nodeDefinitions } from '../node-types';
+import type { Thread } from '../hooks/use-comments';
+import { CommentList } from './Comments';
+import { CATALOG_GROUPS, NODE_ICONS } from './icons';
+import { STATUS } from './status';
+
+/** What's dragged from the left panel onto the canvas: a component's type, or a catalog resource's key */
+export const COMPONENT_DRAG_TYPE = 'application/eventcatalog-studio';
+export const CATALOG_DRAG_TYPE = 'application/eventcatalog-studio-resource';
+
+/** A catalog group shows this many resources until it's expanded, so big catalogs stay quick */
+const GROUP_PREVIEW_SIZE = 50;
+
+const itemClass =
+  'group flex cursor-grab items-center justify-between gap-2 rounded-md border px-2.5 py-2 bg-[rgb(var(--ec-page-bg))] border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))]';
+const addButtonClass =
+  'shrink-0 rounded p-0.5 opacity-0 group-hover:opacity-100 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-accent))]';
+const headingClass = 'px-1 text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))]';
+
+const startDrag = (type: string, value: string) => (event: DragEvent) => {
+  event.dataTransfer.setData(type, value);
+  event.dataTransfer.effectAllowed = 'move';
+};
+
+type Tab = 'components' | 'catalog' | 'comments';
+
+/** Components and catalog resources to drag onto the canvas, and the comments on it */
+export default memo(function LeftPanel({
+  resources,
+  keysOnCanvas,
+  onAddComponent,
+  onAddResource,
+  threads,
+  showResolved,
+  onToggleResolved,
+  onOpenThread,
+}: {
+  resources: CatalogResource[];
+  /** The catalog resources on the canvas */
+  keysOnCanvas: Set<string>;
+  onAddComponent: (type: string) => void;
+  onAddResource: (key: string) => void;
+  threads: Thread[];
+  showResolved: boolean;
+  onToggleResolved: () => void;
+  onOpenThread: (thread: Thread) => void;
+}) {
+  const [tab, setTab] = useState<Tab>('components');
+  const openThreads = threads.filter((thread) => !thread.resolved).length;
+  const tabClass = (active: boolean) =>
+    `flex flex-1 items-center justify-center gap-1 whitespace-nowrap rounded-md px-1.5 py-1 text-xs font-medium ${
+      active ? 'bg-[rgb(var(--ec-page-bg))] shadow-sm' : 'text-[rgb(var(--ec-page-text-muted))]'
+    }`;
+
+  return (
+    <aside className="flex w-72 shrink-0 flex-col border-r bg-[rgb(var(--ec-card-bg))] border-[rgb(var(--ec-page-border))]">
+      <div className="m-3 flex gap-1 rounded-lg p-1 bg-[rgb(var(--ec-page-border)/0.5)]">
+        <button className={tabClass(tab === 'components')} onClick={() => setTab('components')}>
+          Components
+        </button>
+        <button className={tabClass(tab === 'catalog')} onClick={() => setTab('catalog')}>
+          Catalog
+        </button>
+        <button className={tabClass(tab === 'comments')} onClick={() => setTab('comments')}>
+          Comments
+          {openThreads > 0 && (
+            <span className="rounded-full px-1.5 text-[10px] leading-4 bg-[rgb(var(--ec-button-bg))] text-[rgb(var(--ec-button-text))]">
+              {openThreads}
+            </span>
+          )}
+        </button>
+      </div>
+      {tab === 'components' && <ComponentList onAdd={onAddComponent} />}
+      {tab === 'catalog' && <CatalogList resources={resources} keysOnCanvas={keysOnCanvas} onAdd={onAddResource} />}
+      {tab === 'comments' && (
+        <CommentList threads={threads} showResolved={showResolved} onToggleResolved={onToggleResolved} onOpen={onOpenThread} />
+      )}
+    </aside>
+  );
+});
+
+const listedDefinitions = NODE_CATEGORIES.map((category) => ({
+  ...category,
+  definitions: nodeDefinitions.filter((definition) => definition.category === category.id && !definition.unlisted),
+}));
+
+const ComponentList = memo(function ComponentList({ onAdd }: { onAdd: (type: string) => void }) {
+  return (
+    <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-3 pb-3">
+      {listedDefinitions.map((category) => (
+        <section key={category.id} className="space-y-1.5">
+          <h3 className={headingClass}>{category.label}</h3>
+          {category.definitions.map(({ type, label }) => {
+            const { icon: Icon, className } = NODE_ICONS[type];
+            return (
+              <div key={type} draggable onDragStart={startDrag(COMPONENT_DRAG_TYPE, type)} className={itemClass}>
+                <span className="flex items-center gap-2 text-xs font-medium">
+                  <Icon size={16} className={className} />
+                  {label}
+                </span>
+                <button onClick={() => onAdd(type)} title={`Add ${label}`} className={addButtonClass}>
+                  <Plus size={14} />
+                </button>
+              </div>
+            );
+          })}
+        </section>
+      ))}
+    </div>
+  );
+});
+
+const CatalogList = memo(function CatalogList({
+  resources,
+  keysOnCanvas,
+  onAdd,
+}: {
+  resources: CatalogResource[];
+  keysOnCanvas: Set<string>;
+  onAdd: (key: string) => void;
+}) {
+  const [search, setSearch] = useState('');
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  const groups = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    const matches = term
+      ? resources.filter((resource) => resource.name.toLowerCase().includes(term) || resource.id.toLowerCase().includes(term))
+      : resources;
+    return CATALOG_GROUPS.map((group) => ({
+      ...group,
+      items: matches.filter((resource) => resource.collection === group.collection),
+    })).filter((group) => group.items.length > 0);
+  }, [resources, search]);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="relative mx-3 mb-2">
+        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]" />
+        <input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search the catalog"
+          className="w-full rounded-md border py-1.5 pl-8 pr-2 text-xs bg-[rgb(var(--ec-input-bg))] border-[rgb(var(--ec-input-border))] text-[rgb(var(--ec-input-text))]"
+        />
+      </div>
+      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-3 pb-3">
+        {groups.length === 0 && (
+          <p className="py-6 text-center text-xs text-[rgb(var(--ec-page-text-muted))]">No resources found.</p>
+        )}
+        {groups.map(({ collection, label, icon, className, items }) => {
+          const shown = expanded.has(collection) ? items : items.slice(0, GROUP_PREVIEW_SIZE);
+          return (
+            <section key={collection} className="space-y-1.5">
+              <h3 className={headingClass}>
+                {label} <span className="font-normal">({items.length})</span>
+              </h3>
+              {shown.map((resource) => (
+                <CatalogItem
+                  key={resource.key}
+                  resource={resource}
+                  icon={icon}
+                  iconClassName={className}
+                  onCanvas={keysOnCanvas.has(resource.key)}
+                  onAdd={onAdd}
+                />
+              ))}
+              {shown.length < items.length && (
+                <button
+                  onClick={() => setExpanded((current) => new Set(current).add(collection))}
+                  className="w-full rounded-md px-2 py-1.5 text-xs font-medium text-[rgb(var(--ec-accent))] hover:bg-[rgb(var(--ec-accent-subtle))]"
+                >
+                  Show all {items.length} {label.toLowerCase()}
+                </button>
+              )}
+            </section>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+const CatalogItem = memo(function CatalogItem({
+  resource,
+  icon: Icon,
+  iconClassName,
+  onCanvas,
+  onAdd,
+}: {
+  resource: CatalogResource;
+  icon: (typeof CATALOG_GROUPS)[number]['icon'];
+  iconClassName: string;
+  onCanvas: boolean;
+  onAdd: (key: string) => void;
+}) {
+  return (
+    <div draggable onDragStart={startDrag(CATALOG_DRAG_TYPE, resource.key)} title={resource.summary} className={itemClass}>
+      <span className="flex min-w-0 items-center gap-2 text-xs font-medium">
+        <Icon size={16} className={`shrink-0 ${iconClassName}`} />
+        <span className="truncate">{resource.name}</span>
+        <span className="shrink-0 text-[10px] text-[rgb(var(--ec-page-text-muted))]">v{resource.version}</span>
+      </span>
+      <span className="flex shrink-0 items-center gap-1">
+        {onCanvas && (
+          <span title="On the canvas">
+            <Check size={14} className={STATUS.success.text} />
+          </span>
+        )}
+        <button onClick={() => onAdd(resource.key)} title={`Add ${resource.name}`} className={addButtonClass}>
+          <Plus size={14} />
+        </button>
+      </span>
+    </div>
+  );
+});