@kelpie/ui 0.1.0

package/src/components/DataTable.tsx

@@ -0,0 +1,209 @@
+import type { ReactNode } from 'react'
+
+export interface Column<TRow> {
+  readonly key: string
+  readonly header: string
+  readonly className?: string
+  readonly render: (row: TRow) => ReactNode
+  /** The `?sort=` field this column drives. Omit for a column with no server-side sort. */
+  readonly sortKey?: string
+}
+
+export interface DataTableGroup<TRow> {
+  readonly id: string
+  readonly label: ReactNode
+  readonly rows: readonly TRow[]
+}
+
+export interface EmptyStateAction {
+  readonly label: string
+  readonly onClick: () => void
+}
+
+export interface DataTableProps<TRow> {
+  readonly columns: readonly Column<TRow>[]
+  readonly rows?: readonly TRow[]
+  readonly groups?: readonly DataTableGroup<TRow>[]
+  readonly onRowClick?: (row: TRow) => void
+  readonly emptyMessage?: string
+  /** Replaces the default "Add a record to get started." line under `emptyMessage`. */
+  readonly emptyDescription?: string
+  /** A button rendered in the empty state. Omit when there is nothing to do about it — a filter miss, not a genuinely empty list. */
+  readonly emptyAction?: EmptyStateAction
+  readonly getRowId: (row: TRow) => string
+  /** Current `?sort=` value: `field` ascending, `-field` descending, `undefined` for the resource's default. */
+  readonly sort?: string
+  /** Fires with the next `?sort=` value when a sortable header is clicked. Required for any column to be clickable. */
+  readonly onSortChange?: (sort: string | undefined) => void
+}
+
+type SortDirection = 'asc' | 'desc'
+
+function directionOf(sort: string | undefined, field: string | undefined): SortDirection | undefined {
+  if (field === undefined || sort === undefined) {
+    return undefined
+  }
+
+  if (sort === field) {
+    return 'asc'
+  }
+
+  return sort === `-${field}` ? 'desc' : undefined
+}
+
+/** Ascending, then descending, then back to the resource's own default. */
+function nextSort(sort: string | undefined, field: string): string | undefined {
+  const current = directionOf(sort, field)
+
+  if (current === undefined) {
+    return field
+  }
+
+  return current === 'asc' ? `-${field}` : undefined
+}
+
+export function DataTable<TRow>({
+  columns,
+  rows,
+  groups,
+  onRowClick,
+  emptyMessage = 'No records yet',
+  emptyDescription = 'Add a record to get started.',
+  emptyAction,
+  getRowId,
+  sort,
+  onSortChange,
+}: DataTableProps<TRow>): React.JSX.Element {
+  const flatRows = groups === undefined ? (rows ?? []) : groups.flatMap((group) => group.rows)
+
+  if (flatRows.length === 0) {
+    return (
+      <div className="rounded-md border border-dashed border-border px-6 py-12 text-center">
+        <p className="text-[13px] font-medium text-ink">{emptyMessage}</p>
+        <p className="mt-1 text-[12px] text-ink-muted">{emptyDescription}</p>
+        {emptyAction !== undefined && (
+          <button
+            type="button"
+            onClick={emptyAction.onClick}
+            className="mt-3 rounded-md border border-border bg-surface-raised px-3 py-1.5 text-[12px] font-medium text-ink transition hover:border-border-strong hover:bg-surface-sunken"
+          >
+            {emptyAction.label}
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="overflow-hidden rounded-md border border-border">
+      <table className="w-full border-collapse text-left text-[13px]">
+        <thead>
+          <tr className="border-b border-border">
+            {columns.map((column) => {
+              const direction = directionOf(sort, column.sortKey)
+              const sortable = column.sortKey !== undefined && onSortChange !== undefined
+
+              return (
+                <th
+                  key={column.key}
+                  className={`px-3 py-2 text-[11px] font-medium text-ink-faint ${column.className ?? ''}`}
+                >
+                  {sortable ? (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onSortChange?.(nextSort(sort, column.sortKey ?? ''))
+                      }}
+                      className="inline-flex items-center gap-1 transition hover:text-ink"
+                    >
+                      {column.header}
+                      <span className="text-ink-faint">
+                        {direction === 'asc' ? '↑' : direction === 'desc' ? '↓' : ''}
+                      </span>
+                    </button>
+                  ) : (
+                    column.header
+                  )}
+                </th>
+              )
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {groups === undefined
+            ? (rows ?? []).map((row) => (
+                <DataRow
+                  key={getRowId(row)}
+                  row={row}
+                  columns={columns}
+                  onRowClick={onRowClick}
+                />
+              ))
+            : groups.map((group) => (
+                <GroupRows
+                  key={group.id}
+                  group={group}
+                  columns={columns}
+                  onRowClick={onRowClick}
+                  getRowId={getRowId}
+                />
+              ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function GroupRows<TRow>({
+  group,
+  columns,
+  onRowClick,
+  getRowId,
+}: {
+  readonly group: DataTableGroup<TRow>
+  readonly columns: readonly Column<TRow>[]
+  readonly onRowClick?: (row: TRow) => void
+  readonly getRowId: (row: TRow) => string
+}): React.JSX.Element {
+  return (
+    <>
+      <tr className="border-b border-border bg-surface-sunken/60">
+        <td colSpan={columns.length} className="px-3 py-1.5">
+          <span className="inline-flex items-center gap-2">
+            {group.label}
+            <span className="font-mono text-[11px] text-ink-faint">{group.rows.length}</span>
+          </span>
+        </td>
+      </tr>
+      {group.rows.map((row) => (
+        <DataRow key={getRowId(row)} row={row} columns={columns} onRowClick={onRowClick} />
+      ))}
+    </>
+  )
+}
+
+function DataRow<TRow>({
+  row,
+  columns,
+  onRowClick,
+}: {
+  readonly row: TRow
+  readonly columns: readonly Column<TRow>[]
+  readonly onRowClick?: (row: TRow) => void
+}): React.JSX.Element {
+  return (
+    <tr
+      onClick={() => onRowClick?.(row)}
+      className={[
+        'border-b border-border last:border-0 transition-colors',
+        onRowClick === undefined ? '' : 'cursor-pointer hover:bg-surface-sunken/70',
+      ].join(' ')}
+    >
+      {columns.map((column) => (
+        <td key={column.key} className={`px-3 py-2 text-ink ${column.className ?? ''}`}>
+          {column.render(row)}
+        </td>
+      ))}
+    </tr>
+  )
+}

package/src/components/DecisionsPanel.tsx

@@ -0,0 +1,233 @@
+import type { Decision, RecordTargetType } from '@kelpie/schemas'
+import { useState } from 'react'
+import type { FormEvent } from 'react'
+import { Link } from 'react-router'
+
+import { useCreateDecision, useDecisions, useDeleteDecision } from '../api/resources/decisions.ts'
+import { useMembers } from '../api/resources/members.ts'
+import { formatDate } from '../lib/dates.ts'
+import { ErrorPanel } from './QueryState.tsx'
+import { SectionHeader } from './SectionHeader.tsx'
+
+/**
+ * The decisions on one record.
+ *
+ * Ports the mockup's panel: add, remove, and the workspace-list link. The
+ * decision's owner defaults server-side to whoever records it, which is what
+ * the mockup's `members[0]` stood in for, so the form does not send one.
+ */
+
+export interface DecisionsPanelProps {
+  readonly targetType: RecordTargetType
+  readonly targetId: string
+}
+
+export function DecisionsPanel({ targetType, targetId }: DecisionsPanelProps): React.JSX.Element {
+  const decisions = useDecisions({ targetType, targetId })
+  const members = useMembers()
+  const createDecision = useCreateDecision()
+  const deleteDecision = useDeleteDecision()
+  const [adding, setAdding] = useState(false)
+  const [body, setBody] = useState('')
+  const [rationale, setRationale] = useState('')
+  const [dueAt, setDueAt] = useState('')
+
+  // Due date first, decided date otherwise, newest down — the mockup's order.
+  // The list arrives in `-decided_at` order and the API cannot sort on the
+  // nullable `due_at`, so this reorders what is loaded; across a "Load more"
+  // boundary the interleave can be wrong, which is the cheaper wrong than a
+  // second request per panel.
+  const ordered = [...decisions.records].sort(
+    (left, right) =>
+      (right.dueAt ?? right.decidedAt).getTime() - (left.dueAt ?? left.decidedAt).getTime(),
+  )
+
+  function reset(): void {
+    setAdding(false)
+    setBody('')
+    setRationale('')
+    setDueAt('')
+  }
+
+  function submit(event: FormEvent): void {
+    event.preventDefault()
+
+    const text = body.trim()
+
+    if (text.length === 0) {
+      return
+    }
+
+    const reasoning = rationale.trim()
+
+    createDecision.run({
+      targetType,
+      targetId,
+      body: text,
+      ...(reasoning.length === 0 ? {} : { rationale: reasoning }),
+      // Local midday, so no timezone west or east of UTC shifts the chosen day.
+      ...(dueAt === '' ? {} : { dueAt: new Date(`${dueAt}T12:00:00`) }),
+    })
+    reset()
+  }
+
+  return (
+    <section>
+      <SectionHeader
+        title="Decisions"
+        onAdd={() => {
+          setAdding((current) => !current)
+        }}
+        addLabel="Add decision"
+      />
+
+      {createDecision.error !== null && (
+        <div className="mb-3">
+          <ErrorPanel error={createDecision.error} />
+        </div>
+      )}
+      {deleteDecision.error !== null && (
+        <div className="mb-3">
+          <ErrorPanel error={deleteDecision.error} />
+        </div>
+      )}
+      {decisions.error !== null && <ErrorPanel error={decisions.error} />}
+
+      {adding && (
+        <form onSubmit={submit} className="mb-3 space-y-2">
+          <textarea
+            value={body}
+            onChange={(event) => {
+              setBody(event.target.value)
+            }}
+            placeholder="We decided / promised…"
+            rows={2}
+            autoFocus
+            required
+            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"
+          />
+          <input
+            value={rationale}
+            onChange={(event) => {
+              setRationale(event.target.value)
+            }}
+            placeholder="Rationale (optional)"
+            className="w-full rounded-md border border-border bg-surface-raised px-3 py-1.5 text-[13px] outline-none focus:border-accent"
+          />
+          <div className="flex flex-wrap items-center gap-2">
+            <label className="flex items-center gap-2 text-[12px] text-ink-muted">
+              By
+              <input
+                type="date"
+                value={dueAt}
+                onChange={(event) => {
+                  setDueAt(event.target.value)
+                }}
+                className="rounded-md border border-border bg-surface-raised px-2 py-1 text-[12px] outline-none focus:border-accent"
+              />
+            </label>
+            <div className="ml-auto flex gap-2">
+              <button
+                type="button"
+                onClick={reset}
+                className="rounded-md px-2.5 py-1.5 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"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        </form>
+      )}
+
+      {decisions.isLoading && <p className="text-[13px] text-ink-faint">Loading decisions…</p>}
+
+      {!decisions.isLoading && ordered.length === 0 && !adding ? (
+        <p className="text-[13px] text-ink-faint">No decisions yet.</p>
+      ) : (
+        ordered.length > 0 && (
+          <ul className="overflow-hidden rounded-md border border-border">
+            {ordered.map((decision) => (
+              <DecisionItem
+                key={decision.id}
+                decision={decision}
+                ownerName={ownerNameFor(decision, members.nameById)}
+                onRemove={() => {
+                  deleteDecision.run(decision.id)
+                }}
+              />
+            ))}
+          </ul>
+        )
+      )}
+
+      {decisions.hasMore && (
+        <button
+          type="button"
+          onClick={decisions.loadMore}
+          disabled={decisions.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"
+        >
+          {decisions.isLoadingMore ? 'Loading…' : 'Load more'}
+        </button>
+      )}
+
+      <p className="mt-2 text-[11px] text-ink-faint">
+        <Link to="/decisions" className="text-accent hover:underline">
+          View all decisions
+        </Link>
+      </p>
+    </section>
+  )
+}
+
+/**
+ * The mockup shows an owner only when it can name one, so a null owner and a
+ * member whose membership was removed both render nothing rather than a word
+ * like "Unknown" beside a commitment.
+ */
+function ownerNameFor(decision: Decision, nameById: ReadonlyMap<string, string>): string | undefined {
+  if (decision.ownerId === null) {
+    return undefined
+  }
+
+  return nameById.get(decision.ownerId)
+}
+
+function DecisionItem({
+  decision,
+  ownerName,
+  onRemove,
+}: {
+  readonly decision: Decision
+  readonly ownerName: string | undefined
+  readonly onRemove: () => void
+}): React.JSX.Element {
+  return (
+    <li className="border-b border-border px-4 py-3 last:border-0">
+      <div className="flex items-start justify-between gap-2">
+        <p className="min-w-0 flex-1 text-[13px] font-medium text-ink">{decision.body}</p>
+        <button
+          type="button"
+          onClick={onRemove}
+          className="shrink-0 text-[11px] font-medium text-ink-faint hover:text-danger"
+        >
+          Remove
+        </button>
+      </div>
+      {decision.rationale !== null && (
+        <p className="mt-1 text-[12px] text-ink-muted">{decision.rationale}</p>
+      )}
+      <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-ink-faint">
+        <span>Decided {formatDate(decision.decidedAt)}</span>
+        {decision.dueAt !== null && <span>By {formatDate(decision.dueAt)}</span>}
+        {ownerName !== undefined && <span>{ownerName}</span>}
+      </div>
+    </li>
+  )
+}

package/src/components/DeleteRecord.tsx

@@ -0,0 +1,73 @@
+import { useState } from 'react'
+
+import { ErrorPanel } from './QueryState.tsx'
+
+export interface DeleteRecordProps {
+  readonly recordLabel: string
+  readonly recordName: string
+  readonly isPending: boolean
+  readonly error: Error | null
+  readonly onConfirm: () => void
+}
+
+/**
+ * Delete, behind one confirmation.
+ *
+ * The mockup asked which related records to take along, because seed data had no
+ * referential rules. The API has them: roadmap decision 2 makes a delete cascade
+ * to dependents and answers `409` when an independent record still points at
+ * this one, listing the types in `details`. So there is nothing to choose, and
+ * the interesting case is the refusal, which is why the error sits here rather
+ * than somewhere the button is not.
+ */
+export function DeleteRecord({
+  recordLabel,
+  recordName,
+  isPending,
+  error,
+  onConfirm,
+}: DeleteRecordProps): React.JSX.Element {
+  const [confirming, setConfirming] = useState(false)
+
+  return (
+    <div className="flex flex-col items-end gap-2">
+      {confirming ? (
+        <div className="flex items-center gap-2">
+          <span className="text-[12px] text-ink-muted">Delete {recordName}?</span>
+          <button
+            type="button"
+            onClick={() => {
+              setConfirming(false)
+            }}
+            className="rounded-md px-2 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            disabled={isPending}
+            onClick={onConfirm}
+            className="rounded-md bg-danger px-2.5 py-1 text-[12px] font-semibold text-danger-fg transition hover:opacity-90 disabled:opacity-50"
+          >
+            {isPending ? 'Deleting…' : `Delete ${recordLabel.toLowerCase()}`}
+          </button>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => {
+            setConfirming(true)
+          }}
+          className="rounded-md border border-border px-2.5 py-1 text-[12px] font-medium text-ink-muted transition hover:border-danger hover:text-danger"
+        >
+          Delete
+        </button>
+      )}
+      {error !== null && (
+        <div className="w-full max-w-sm">
+          <ErrorPanel error={error} />
+        </div>
+      )}
+    </div>
+  )
+}