@kelpie/ui 0.1.0

package/src/components/KanbanBoard.tsx

@@ -0,0 +1,234 @@
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  closestCenter,
+  useDraggable,
+  useDroppable,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
+import type { DragEndEvent, DragStartEvent } from '@dnd-kit/core'
+import { useEffect, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { useNavigate } from 'react-router'
+
+/**
+ * The pipeline board, ported from the mockup: one droppable column per stage,
+ * draggable cards, and an overlay following the pointer. Dropping a card calls
+ * `onMove`; what that persists is the page's business.
+ */
+
+export interface KanbanStage {
+  readonly id: string
+  readonly label: string
+}
+
+export interface KanbanCard {
+  readonly id: string
+  readonly stage: string
+  readonly title: string
+  readonly meta?: string
+  readonly valueLabel?: string
+  readonly href: string
+}
+
+export interface KanbanBoardProps {
+  readonly stages: readonly KanbanStage[]
+  readonly cards: readonly KanbanCard[]
+  readonly onMove: (cardId: string, stageId: string) => void
+}
+
+function isStageDropData(data: unknown): data is { type: string; stageId: string } {
+  return (
+    typeof data === 'object' &&
+    data !== null &&
+    'stageId' in data &&
+    typeof (data as { stageId: unknown }).stageId === 'string'
+  )
+}
+
+export function KanbanBoard({ stages, cards, onMove }: KanbanBoardProps): React.JSX.Element {
+  const [activeId, setActiveId] = useState<string | null>(null)
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }))
+
+  const activeCard = cards.find((card) => card.id === activeId) ?? null
+
+  function handleDragStart(event: DragStartEvent): void {
+    setActiveId(String(event.active.id))
+  }
+
+  function handleDragEnd(event: DragEndEvent): void {
+    setActiveId(null)
+
+    const { active, over } = event
+
+    if (over === null) {
+      return
+    }
+
+    const cardId = String(active.id)
+    const overData: unknown = over.data.current
+
+    if (isStageDropData(overData)) {
+      onMove(cardId, overData.stageId)
+
+      return
+    }
+
+    const overId = String(over.id)
+    const overStage = stages.find((stage) => stage.id === overId)
+
+    if (overStage !== undefined) {
+      onMove(cardId, overStage.id)
+
+      return
+    }
+
+    const overCard = cards.find((card) => card.id === overId)
+
+    if (overCard !== undefined) {
+      onMove(cardId, overCard.stage)
+    }
+  }
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <div className="flex gap-3 overflow-x-auto pb-2">
+        {stages.map((stage) => {
+          const stageCards = cards.filter((card) => card.stage === stage.id)
+
+          return (
+            <KanbanColumn key={stage.id} stage={stage} count={stageCards.length}>
+              {stageCards.map((card) => (
+                <KanbanCardView key={card.id} card={card} dragging={card.id === activeId} />
+              ))}
+            </KanbanColumn>
+          )
+        })}
+      </div>
+
+      <DragOverlay dropAnimation={null}>
+        {activeCard === null ? null : (
+          <div className="cursor-grabbing rounded-md border border-accent bg-surface-raised">
+            <CardFace card={activeCard} />
+          </div>
+        )}
+      </DragOverlay>
+    </DndContext>
+  )
+}
+
+function KanbanColumn({
+  stage,
+  count,
+  children,
+}: {
+  readonly stage: KanbanStage
+  readonly count: number
+  readonly children: ReactNode
+}): React.JSX.Element {
+  const { setNodeRef, isOver } = useDroppable({
+    id: stage.id,
+    data: { type: 'stage', stageId: stage.id },
+  })
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={[
+        'flex w-[240px] shrink-0 flex-col rounded-md border bg-surface-sunken/40 transition-colors',
+        isOver ? 'border-accent bg-accent-soft/30' : 'border-border',
+      ].join(' ')}
+    >
+      <div className="flex items-center justify-between px-3 py-2">
+        <h3 className="text-[12px] font-semibold text-ink">{stage.label}</h3>
+        <span className="font-mono text-[11px] text-ink-faint">{count}</span>
+      </div>
+      <div className="flex min-h-[80px] flex-col gap-2 px-2 pb-2">
+        {children}
+        {count === 0 && (
+          <div className="rounded-md border border-dashed border-border px-3 py-2 text-[11px] text-ink-faint">
+            Drop here
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function KanbanCardView({
+  card,
+  dragging,
+}: {
+  readonly card: KanbanCard
+  readonly dragging: boolean
+}): React.JSX.Element {
+  const navigate = useNavigate()
+  const suppressClick = useRef(false)
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    isDragging,
+  } = useDraggable({
+    id: card.id,
+    data: { type: 'card', stageId: card.stage },
+  })
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: `drop:${card.id}`,
+    data: { type: 'card', stageId: card.stage },
+  })
+
+  useEffect(() => {
+    if (isDragging || dragging) {
+      suppressClick.current = true
+    }
+  }, [isDragging, dragging])
+
+  return (
+    <div
+      ref={(node) => {
+        setDragRef(node)
+        setDropRef(node)
+      }}
+      {...listeners}
+      {...attributes}
+      onClick={() => {
+        // A drag ends where it started often enough that the click after a drop
+        // would open the card someone was only moving.
+        if (suppressClick.current) {
+          suppressClick.current = false
+
+          return
+        }
+
+        void navigate(card.href)
+      }}
+      className={[
+        'cursor-grab touch-none rounded-md border bg-surface-raised transition-colors active:cursor-grabbing',
+        isOver ? 'border-accent' : 'border-border',
+        dragging || isDragging ? 'opacity-40' : 'hover:border-border-strong',
+      ].join(' ')}
+    >
+      <CardFace card={card} />
+    </div>
+  )
+}
+
+function CardFace({ card }: { readonly card: KanbanCard }): React.JSX.Element {
+  return (
+    <div className="px-3 py-2.5">
+      <div className="text-[13px] font-medium leading-snug text-ink">{card.title}</div>
+      {card.meta !== undefined && <div className="mt-1 text-[11px] text-ink-muted">{card.meta}</div>}
+      {card.valueLabel !== undefined && (
+        <div className="mt-2 font-mono text-[12px] font-medium text-ink">{card.valueLabel}</div>
+      )}
+    </div>
+  )
+}

package/src/components/MarkdownView.tsx

@@ -0,0 +1,73 @@
+import Markdown from 'react-markdown'
+import type { Components } from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+
+/**
+ * Handbook markdown, rendered by a library rather than by hand (roadmap
+ * decision 5).
+ *
+ * The mockup's `MarkdownView` split on blank lines and matched inline spans with
+ * one regular expression, which covered the six things the seeded pages used and
+ * quietly dropped anything else a team wrote. `remark-gfm` adds the tables,
+ * strikethrough, task lists and autolinks that a handbook author will reach for
+ * without asking whether the renderer supports them.
+ *
+ * **Nothing here renders raw HTML.** `react-markdown` passes the tree through
+ * without `dangerouslySetInnerHTML`, and HTML in the source is escaped unless
+ * `rehype-raw` is added. It is not added, and should not be: page bodies are
+ * written by workspace members but read by everyone in the workspace, and an
+ * agent with write access to the handbook is another author again.
+ *
+ * The class names are the mockup's, element for element, so a page reads the
+ * same as it did before the swap.
+ */
+
+const components: Components = {
+  h1: ({ children }) => (
+    <h1 className="text-[22px] font-semibold tracking-tight text-ink">{children}</h1>
+  ),
+  h2: ({ children }) => <h2 className="pt-2 text-[15px] font-semibold text-ink">{children}</h2>,
+  h3: ({ children }) => <h3 className="text-[13px] font-semibold text-ink">{children}</h3>,
+  ul: ({ children }) => <ul className="list-disc space-y-1 pl-5">{children}</ul>,
+  ol: ({ children }) => <ol className="list-decimal space-y-1 pl-5">{children}</ol>,
+  code: ({ children }) => (
+    <code className="rounded bg-surface px-1 py-0.5 font-mono text-[12px]">{children}</code>
+  ),
+  pre: ({ children }) => (
+    <pre className="overflow-x-auto rounded-md border border-border bg-surface p-3 font-mono text-[12px]">
+      {children}
+    </pre>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-2 border-border pl-3 text-ink-muted">{children}</blockquote>
+  ),
+  a: ({ href, children }) => (
+    <a href={href} className="text-accent hover:underline" target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  ),
+  hr: () => <hr className="border-border" />,
+  // The wrapper scrolls rather than the page, so a wide table cannot push the
+  // sidebar off screen.
+  table: ({ children }) => (
+    <div className="overflow-x-auto rounded-md border border-border">
+      <table className="w-full text-left text-[12px]">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => <thead className="bg-surface">{children}</thead>,
+  tr: ({ children }) => <tr className="border-b border-border last:border-0">{children}</tr>,
+  th: ({ children }) => (
+    <th className="border-b border-border px-3 py-2 font-semibold">{children}</th>
+  ),
+  td: ({ children }) => <td className="px-3 py-2">{children}</td>,
+}
+
+export function MarkdownView({ source }: { readonly source: string }): React.JSX.Element {
+  return (
+    <div className="markdown space-y-3 text-[13px] leading-relaxed text-ink">
+      <Markdown remarkPlugins={[remarkGfm]} components={components}>
+        {source}
+      </Markdown>
+    </div>
+  )
+}

package/src/components/NotesPanel.tsx

@@ -0,0 +1,169 @@
+import type { Note, RecordTargetType } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+
+import { useMembers } from '../api/resources/members.ts'
+import { useCreateNote, useNotes } from '../api/resources/notes.ts'
+import { formatDateTime } from '../lib/dates.ts'
+import { ErrorPanel } from './QueryState.tsx'
+import { SectionHeader } from './SectionHeader.tsx'
+
+/**
+ * The notes on one record.
+ *
+ * Ports the mockup's panel. There is no pin control: the mockup renders the
+ * badge on a note that carries the flag and offers no way to set it, and the
+ * mockup decides what a page shows. `PATCH /v1/notes/:id` takes `pinned`, so an
+ * agent can still pin.
+ *
+ * No edit or delete either, for the same reason, though the API has both.
+ */
+
+export interface NotesPanelProps {
+  readonly targetType: RecordTargetType
+  readonly targetId: string
+}
+
+export function NotesPanel({ targetType, targetId }: NotesPanelProps): React.JSX.Element {
+  const notes = useNotes({ targetType, targetIds: [targetId] })
+  const members = useMembers()
+  const createNote = useCreateNote()
+  const [adding, setAdding] = useState(false)
+  const [body, setBody] = useState('')
+
+  // Pinned first, then newest. The list arrives in `-created_at` order and the
+  // API has no two-column sort, so this reorders what is loaded. Across a
+  // "Load more" boundary a pinned note on a later page sorts after unpinned
+  // ones already shown; pinned notes are few enough that this is the cheaper
+  // wrong than a second request per panel.
+  const ordered = [...notes.records].sort((left, right) => Number(right.pinned) - Number(left.pinned))
+
+  function reset(): void {
+    setAdding(false)
+    setBody('')
+  }
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    const text = body.trim()
+
+    if (text.length === 0) {
+      return
+    }
+
+    createNote.run({ targetType, targetId, body: text })
+    reset()
+  }
+
+  return (
+    <section>
+      <SectionHeader
+        title="Notes"
+        onAdd={() => {
+          setAdding((current) => !current)
+        }}
+        addLabel="Add note"
+      />
+
+      {createNote.error !== null && (
+        <div className="mb-3">
+          <ErrorPanel error={createNote.error} />
+        </div>
+      )}
+      {notes.error !== null && <ErrorPanel error={notes.error} />}
+
+      {adding && (
+        <form onSubmit={submit} className="mb-3 space-y-2">
+          <textarea
+            value={body}
+            onChange={(event) => {
+              setBody(event.target.value)
+            }}
+            placeholder="Write a note…"
+            rows={3}
+            autoFocus
+            className="w-full resize-y rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={reset}
+              className="rounded-md px-2.5 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover"
+            >
+              Save note
+            </button>
+          </div>
+        </form>
+      )}
+
+      {notes.isLoading && <p className="text-[13px] text-ink-faint">Loading notes…</p>}
+
+      {!notes.isLoading && ordered.length === 0 && !adding ? (
+        <p className="text-[13px] text-ink-faint">No notes yet.</p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {ordered.map((note) => (
+            <NoteItem key={note.id} note={note} authorName={authorNameFor(note, members.nameById)} />
+          ))}
+        </ul>
+      )}
+
+      {notes.hasMore && (
+        <button
+          type="button"
+          onClick={notes.loadMore}
+          disabled={notes.isLoadingMore}
+          className="mt-3 rounded-md border border-border px-3 py-1.5 text-[12px] font-medium text-ink-muted transition hover:border-border-strong hover:text-ink"
+        >
+          {notes.isLoadingMore ? 'Loading…' : 'Load more'}
+        </button>
+      )}
+    </section>
+  )
+}
+
+/**
+ * A null author is a note written by a workspace API key, which belongs to the
+ * workspace rather than to a person. An id with no matching member is one whose
+ * membership was removed.
+ */
+function authorNameFor(note: Note, nameById: ReadonlyMap<string, string>): string {
+  if (note.authorId === null) {
+    return 'API key'
+  }
+
+  return nameById.get(note.authorId) ?? 'Unknown'
+}
+
+function NoteItem({
+  note,
+  authorName,
+}: {
+  readonly note: Note
+  readonly authorName: string
+}): React.JSX.Element {
+  return (
+    <li className="rounded-md border border-border bg-surface-raised px-3.5 py-3">
+      <div className="flex items-start justify-between gap-2">
+        <p className="text-[13px] leading-relaxed whitespace-pre-wrap text-ink">{note.body}</p>
+        {note.pinned && (
+          <span className="shrink-0 text-[10px] font-semibold tracking-wide text-accent uppercase">
+            Pinned
+          </span>
+        )}
+      </div>
+      <div className="mt-2 flex items-center gap-2 text-[11px] text-ink-faint">
+        <span>{authorName}</span>
+        <span>·</span>
+        <span>{formatDateTime(note.createdAt)}</span>
+      </div>
+    </li>
+  )
+}

package/src/components/PageHeader.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from 'react'
+
+import { AddButton } from './SectionHeader.tsx'
+
+export interface PageHeaderProps {
+  readonly title: string
+  readonly description?: string
+  readonly actions?: ReactNode
+  readonly onAdd?: () => void
+  readonly addLabel?: string
+}
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  onAdd,
+  addLabel = 'Add',
+}: PageHeaderProps): React.JSX.Element {
+  return (
+    <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
+      <div>
+        <h1 className="text-[18px] font-semibold tracking-tight text-ink">{title}</h1>
+        {description !== undefined && (
+          <p className="mt-0.5 text-[13px] text-ink-muted">{description}</p>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        {actions}
+        {onAdd !== undefined && <AddButton onClick={onAdd} label={addLabel} />}
+      </div>
+    </div>
+  )
+}
+
+export interface FilterBarProps {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  readonly placeholder?: string
+}
+
+/**
+ * The list filter box. What it types goes to the API as `?q=`, so this is the
+ * one place a page decides what "filter" means for its resource.
+ */
+export function FilterBar({
+  value,
+  onChange,
+  placeholder = 'Filter…',
+}: FilterBarProps): React.JSX.Element {
+  return (
+    <input
+      value={value}
+      onChange={(event) => {
+        onChange(event.target.value)
+      }}
+      placeholder={placeholder}
+      className="mb-3 w-full max-w-xs rounded-md border border-border bg-transparent px-2.5 py-1.5 text-[13px] outline-none placeholder:text-ink-faint focus:border-accent"
+    />
+  )
+}