@eventcatalog/core 5.0.0-beta.8 → 5.0.0

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

@@ -1,34 +1,109 @@
 import { useState } from 'react';
+import { Users } from 'lucide-react';
+import { MAX_NAME_LENGTH, PERSON_COLORS } from '../identity';
 
-export default function JoinForm({ onJoin }: { onJoin: (name: string) => void }) {
+const initials = (name: string) =>
+  name
+    .trim()
+    .split(/\s+/)
+    .map((word) => word[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+/**
+ * Joining a canvas the first time (without signing in), as Studio on the web joins a live session: the name and colour
+ * you'll be seen by (your pointer, your avatar, your comments), picked before you start, with how you'll look to the
+ * others. Remembered in this browser for next time.
+ */
+export default function JoinForm({
+  color,
+  onJoin,
+}: {
+  /** The colour picked to start with (the one kept in this browser, if there is one) */
+  color?: string | null;
+  onJoin: (me: { name: string; color: string }) => void;
+}) {
   const [draft, setDraft] = useState('');
+  const [picked, setPicked] = useState(() => color ?? PERSON_COLORS[Math.floor(Math.random() * PERSON_COLORS.length)]);
+  const name = draft.trim();
 
   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))]"
+    <div className="fixed inset-0 z-[80] flex items-center justify-center bg-black/40 p-4">
+      <form
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="join-canvas-title"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (name) onJoin({ name, color: picked });
+        }}
+        className="w-full max-w-md rounded-xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg))] p-6 text-center text-[rgb(var(--ec-page-text))] shadow-2xl"
       >
-        Join
-      </button>
-    </form>
+        <span className="mx-auto flex h-11 w-11 items-center justify-center rounded-full bg-[color-mix(in_srgb,rgb(var(--ec-accent))_12%,transparent)] text-[rgb(var(--ec-accent))]">
+          <Users aria-hidden className="h-5 w-5" />
+        </span>
+        <h1 id="join-canvas-title" className="mt-3 text-base font-semibold">
+          Join this canvas
+        </h1>
+        <p className="mt-1.5 text-sm leading-relaxed text-[rgb(var(--ec-page-text-muted))]">
+          Everyone here sees your pointer and edits with you, live.
+        </p>
+
+        <label className="mt-5 block text-left text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">
+          Your name
+          <input
+            autoFocus
+            value={draft}
+            maxLength={MAX_NAME_LENGTH}
+            placeholder="What should others call you?"
+            onChange={(event) => setDraft(event.target.value)}
+            className="mt-1.5 block h-9 w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-3 text-sm text-[rgb(var(--ec-page-text))] outline-none placeholder:text-[rgb(var(--ec-page-text-muted))] focus:border-[rgb(var(--ec-accent))]"
+          />
+        </label>
+        <div className="mt-4 text-left text-xs font-medium text-[rgb(var(--ec-page-text-muted))]">
+          Your colour
+          <div role="radiogroup" aria-label="Your colour" className="mt-2 flex gap-2">
+            {PERSON_COLORS.map((option) => (
+              <button
+                key={option}
+                type="button"
+                role="radio"
+                aria-checked={option === picked}
+                aria-label={option}
+                onClick={() => setPicked(option)}
+                className={`h-6 w-6 rounded-full transition-transform hover:scale-110 ${
+                  option === picked
+                    ? 'ring-2 ring-[rgb(var(--ec-page-text))] ring-offset-2 ring-offset-[rgb(var(--ec-card-bg))]'
+                    : ''
+                }`}
+                style={{ background: option }}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* How you'll look to the others */}
+        {name && (
+          <div className="mt-5 flex items-center justify-center gap-2 text-sm">
+            <span
+              className="flex h-7 w-7 items-center justify-center rounded-full text-[11px] font-semibold text-white"
+              style={{ background: picked }}
+            >
+              {initials(name)}
+            </span>
+            <span className="font-medium">{name}</span>
+          </div>
+        )}
+
+        <button
+          type="submit"
+          disabled={!name}
+          className="mt-5 inline-flex h-10 w-full items-center justify-center rounded-lg bg-[rgb(var(--ec-page-text))] text-sm font-medium text-[rgb(var(--ec-page-bg))] hover:bg-[rgb(var(--ec-page-text)/0.85)] disabled:opacity-40"
+        >
+          Join canvas
+        </button>
+      </form>
+    </div>
   );
 }

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

@@ -1,212 +1,115 @@
-import { memo, useCallback, useMemo, useState, type ReactNode } from 'react';
-import { Check, ChevronRight, Plus, Search } from 'lucide-react';
+import { memo, useMemo, useState } from 'react';
+import { Check, Search } from 'lucide-react';
 import type { CatalogResource } from '../catalog-resources';
 import { catalogNodeData } from '../catalog';
-import { NODE_CATEGORIES, nodeDefinitions } from '../node-types';
-import type { Thread } from '../hooks/use-comments';
-import { CommentList } from './Comments';
-import { useDragGhost, type StartDrag } from './DragGhost';
-import { CATALOG_GROUPS, NODE_ICONS } from './icons';
-import { STATUS } from './status';
+import {
+  isShownOnLevel,
+  type Level,
+  type StartDrag,
+  CATALOG_GROUPS,
+  STATUS,
+  Palette,
+  PaletteItem,
+  PaletteSection,
+  type PaletteTab,
+} from '@eventcatalog/visualiser/studio';
 
-/** 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';
+/** What's dragged from the left panel onto the canvas: a component's key, or a catalog resource's key */
+export { COMPONENT_DRAG_TYPE } from '@eventcatalog/visualiser/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))]';
-// The sections that are collapsed, by id (e.g. "components:messages"), remembered in this browser
-const COLLAPSED_KEY = 'eventcatalog-studio-collapsed';
-type Collapsed = { collapsed: ReadonlySet<string>; toggle: (id: string) => void };
+export type LeftPanelTab = 'components' | 'catalog';
 
-const readCollapsed = (): Set<string> => {
-  try {
-    return new Set(JSON.parse(localStorage.getItem(COLLAPSED_KEY) ?? '[]') as string[]);
-  } catch {
-    return new Set();
-  }
-};
-
-function useCollapsed(): Collapsed {
-  const [collapsed, setCollapsed] = useState(readCollapsed);
-  const toggle = useCallback((id: string) => {
-    setCollapsed((current) => {
-      const next = new Set(current);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      try {
-        localStorage.setItem(COLLAPSED_KEY, JSON.stringify([...next]));
-      } catch {
-        // Not remembered (e.g. storage is blocked): it still works for now
-      }
-      return next;
-    });
-  }, []);
-  return useMemo(() => ({ collapsed, toggle }), [collapsed, toggle]);
-}
-
-/** A section's heading, which opens and closes it */
-function SectionHeading({ open, onToggle, children }: { open: boolean; onToggle: () => void; children: ReactNode }) {
-  return (
-    <h3>
-      <button
-        onClick={onToggle}
-        aria-expanded={open}
-        className="flex w-full cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text-muted))] transition-colors hover:bg-[rgb(var(--ec-page-border)/0.6)] hover:text-[rgb(var(--ec-page-text))]"
-      >
-        <ChevronRight size={12} className={`shrink-0 transition-transform ${open ? 'rotate-90' : ''}`} />
-        {children}
-      </button>
-    </h3>
-  );
-}
-
-type Tab = 'components' | 'catalog' | 'comments';
-
-/** Components and catalog resources to drag onto the canvas, and the comments on it */
+/**
+ * Studio's palette (as Studio on the web's): components to drag onto the canvas, and here also the catalog's
+ * resources, as a tab in the same card (the comments are listed from the bottom left controls)
+ */
 export default memo(function LeftPanel({
+  level,
+  onShowAll,
   resources,
   keysOnCanvas,
   onAddComponent,
   onAddResource,
-  threads,
-  showResolved,
-  onToggleResolved,
-  onOpenThread,
+  tab,
+  onTabChange,
+  startCollapsed,
 }: {
+  /** The level shown: only what it shows is listed, so what's added stays on it */
+  level: Level;
+  /** Goes to L3, which shows everything */
+  onShowAll: () => void;
   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;
+  /** The tab shown, when the canvas chooses it */
+  tab?: LeftPanelTab;
+  onTabChange?: (tab: LeftPanelTab) => void;
+  /** Starts folded away (e.g. in a chat, where there's little room) */
+  startCollapsed?: boolean;
 }) {
-  const [tab, setTab] = useState<Tab>('components');
-  // What's being dragged onto the canvas, drawn as the node it becomes (see DragGhost)
-  const { startDrag, ghost } = useDragGhost();
-  const sections = useCollapsed();
-  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))]'
-    }`;
+  const shownResources = useMemo(
+    () => (level === 3 ? resources : resources.filter((resource) => isShownOnLevel(resource.node.type, level))),
+    [resources, level]
+  );
+  const tabs = useMemo(
+    (): PaletteTab[] => [
+      {
+        id: 'catalog',
+        label: 'Catalog Resources',
+        render: (startDrag) => (
+          <>
+            {level !== 3 && <LevelHint level={level} onShowAll={onShowAll} />}
+            <CatalogList resources={shownResources} keysOnCanvas={keysOnCanvas} onAdd={onAddResource} startDrag={startDrag} />
+          </>
+        ),
+      },
+    ],
+    [level, onShowAll, shownResources, keysOnCanvas, onAddResource]
+  );
 
   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} startDrag={startDrag} sections={sections} />}
-      {tab === 'catalog' && (
-        <CatalogList
-          resources={resources}
-          keysOnCanvas={keysOnCanvas}
-          onAdd={onAddResource}
-          startDrag={startDrag}
-          sections={sections}
-        />
-      )}
-      {tab === 'comments' && (
-        <CommentList threads={threads} showResolved={showResolved} onToggleResolved={onToggleResolved} onOpen={onOpenThread} />
-      )}
-      {ghost}
-    </aside>
+    <Palette
+      level={level}
+      onAddComponent={onAddComponent}
+      tabs={tabs}
+      tab={tab}
+      onTabChange={onTabChange as ((tab: string) => void) | undefined}
+      startCollapsed={startCollapsed}
+    />
   );
 });
 
-const listedDefinitions = NODE_CATEGORIES.map((category) => ({
-  ...category,
-  definitions: nodeDefinitions.filter((definition) => definition.category === category.id && !definition.unlisted),
-}));
-
-// Each component's data, made once, for the node shown while it's dragged
-const componentPreviews = new Map(
-  nodeDefinitions.map((definition) => [definition.type, { type: definition.type, data: definition.createData() }])
-);
-
-const ComponentList = memo(function ComponentList({
-  onAdd,
-  startDrag,
-  sections: { collapsed, toggle },
-}: {
-  onAdd: (type: string) => void;
-  startDrag: StartDrag;
-  sections: Collapsed;
-}) {
+/** On L1 and L2: only what the level shows is listed (added there, it stays there), the rest is on L3 */
+function LevelHint({ level, onShowAll }: { level: Level; onShowAll: () => void }) {
   return (
-    <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3 pb-3">
-      {listedDefinitions.map((category) => {
-        const id = `components:${category.id}`;
-        const open = !collapsed.has(id);
-        return (
-          <section key={category.id} className="space-y-1.5">
-            <SectionHeading open={open} onToggle={() => toggle(id)}>
-              {category.label}
-            </SectionHeading>
-            {open &&
-              category.definitions.map(({ type, label }) => {
-                const { icon: Icon, className } = NODE_ICONS[type];
-                return (
-                  <div
-                    key={type}
-                    draggable
-                    onDragStart={startDrag(COMPONENT_DRAG_TYPE, type, componentPreviews.get(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>
+    <p className="text-[11px] leading-snug text-[rgb(var(--ec-page-text-muted))]">
+      Showing what L{level} shows.{' '}
+      <button onClick={onShowAll} className="font-medium text-[rgb(var(--ec-accent))] hover:underline">
+        Go to L3 for everything
+      </button>
+    </p>
   );
-});
+}
 
-const CatalogList = memo(function CatalogList({
+function CatalogList({
   resources,
   keysOnCanvas,
   onAdd,
   startDrag,
-  sections: { collapsed, toggle },
 }: {
   resources: CatalogResource[];
   keysOnCanvas: Set<string>;
   onAdd: (key: string) => void;
   startDrag: StartDrag;
-  sections: Collapsed;
 }) {
   const [search, setSearch] = useState('');
   const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
-  const searching = search.trim() !== '';
   const groups = useMemo(() => {
     const term = search.trim().toLowerCase();
     const matches = term
@@ -219,60 +122,55 @@ const CatalogList = memo(function CatalogList({
   }, [resources, search]);
 
   return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <div className="relative mx-3 mb-2">
+    <>
+      <div className="relative">
         <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[rgb(var(--ec-icon-color))]" />
         <input
+          // The list shows when its tab is chosen: typing then searches it, rather than reaching the canvas's shortcuts
+          // (from the tab button, typing "Order Service" picked the Comment tool)
+          autoFocus
           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))]"
+          className="w-full rounded-lg 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-3 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 id = `catalog:${collection}`;
-          // While searching, every group with matches shows them
-          const open = searching || !collapsed.has(id);
-          const shown = !open ? [] : expanded.has(collection) ? items : items.slice(0, GROUP_PREVIEW_SIZE);
-          return (
-            <section key={collection} className="space-y-1.5">
-              <SectionHeading open={open} onToggle={() => toggle(id)}>
-                {label} <span className="font-normal">({items.length})</span>
-              </SectionHeading>
-              {shown.map((resource) => (
-                <CatalogItem
-                  key={resource.key}
-                  resource={resource}
-                  icon={icon}
-                  iconClassName={className}
-                  onCanvas={keysOnCanvas.has(resource.key)}
-                  onAdd={onAdd}
-                  startDrag={startDrag}
-                />
-              ))}
-              {open && 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>
+      {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 (
+          <PaletteSection key={collection} title={`${label} (${items.length})`}>
+            {shown.map((resource) => (
+              <CatalogItem
+                key={resource.key}
+                resource={resource}
+                icon={icon}
+                iconClassName={className}
+                onCanvas={keysOnCanvas.has(resource.key)}
+                onAdd={onAdd}
+                startDrag={startDrag}
+              />
+            ))}
+            {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>
+            )}
+          </PaletteSection>
+        );
+      })}
+    </>
   );
-});
+}
 
 const CatalogItem = memo(function CatalogItem({
   resource,
-  icon: Icon,
+  icon,
   iconClassName,
   onCanvas,
   onAdd,
@@ -288,27 +186,21 @@ const CatalogItem = memo(function CatalogItem({
   // Drawn like the card it becomes (domains and systems can become containers too, but start as cards)
   const preview = useMemo(() => ({ type: resource.node.type, data: catalogNodeData(resource) }), [resource]);
   return (
-    <div
-      draggable
+    <PaletteItem
+      icon={icon}
+      iconClassName={iconClassName}
+      label={resource.name}
+      description={resource.summary ? `v${resource.version} · ${resource.summary}` : `v${resource.version}`}
       onDragStart={startDrag(CATALOG_DRAG_TYPE, resource.key, preview)}
-      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">
+      onClick={() => onAdd(resource.key)}
+      title={`${resource.name}: drag onto the canvas, or click to add`}
+      trailing={
+        onCanvas ? (
+          <span title="On the canvas" className="flex-none">
             <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>
+        ) : undefined
+      }
+    />
   );
 });