@signalcore/ui 1.0.0-beta.3 → 1.0.0-beta.4

package/src/kit/Kanban.tsx

@@ -0,0 +1,182 @@
+import { ArrowsLeftRightIcon } from "@phosphor-icons/react";
+import { useState, type DragEvent } from "react";
+
+import type { BoardCard, BoardColumn } from "../blocks";
+import { useKit, useParts } from "./context";
+import { Popover, usePopover } from "./Popover";
+
+/** What a dragged card carries, so a drop elsewhere on the page takes nothing of it. */
+const CARD = "application/x-signalcore-card";
+
+/** The columns with each card where the person last put it (`moved`, card id to column id). */
+export function placed(
+  columns: readonly BoardColumn[],
+  moved: Readonly<Record<string, string>>,
+): BoardColumn[] {
+  const cards = columns.flatMap((column) =>
+    column.cards.map((card) => ({ card, column: moved[card.id] ?? column.id })),
+  );
+  return columns.map((column) => ({
+    ...column,
+    cards: cards.filter((each) => each.column === column.id).map((each) => each.card),
+  }));
+}
+
+/**
+ * Cards in columns, a column per stage, side by side, scrolling across when they don't fit: each
+ * column's title and how many it holds over its cards (a title, a quieter line, a detail at its
+ * foot). With `onMove`, the person moves a card to another column by dragging it there, or from
+ * its button's list of the other columns (the keyboard's way); the card goes there at once.
+ */
+export function Kanban({
+  columns,
+  onMove,
+  disabled = false,
+}: {
+  columns: BoardColumn[];
+  onMove?: ((card: BoardCard, column: BoardColumn) => void) | undefined;
+  disabled?: boolean | undefined;
+}) {
+  const part = useParts();
+  const { messages } = useKit();
+  const [moved, setMoved] = useState<Record<string, string>>({});
+  const [dragging, setDragging] = useState<string | null>(null);
+  const [over, setOver] = useState<string | null>(null);
+  const movable = onMove !== undefined && !disabled;
+  const shown = placed(columns, moved);
+  const move = (card: BoardCard, to: BoardColumn) => {
+    const from = shown.find((column) => column.cards.some((each) => each.id === card.id));
+    if (!onMove || from?.id === to.id) return;
+    setMoved((before) => ({ ...before, [card.id]: to.id }));
+    onMove(card, to);
+  };
+  const dropOn = (column: BoardColumn) => (event: DragEvent) => {
+    event.preventDefault();
+    setOver(null);
+    setDragging(null);
+    const id = event.dataTransfer.getData(CARD);
+    const card = columns.flatMap((each) => each.cards).find((each) => each.id === id);
+    if (card) move(card, column);
+  };
+  return (
+    <div part="board" className={part("sc-board")}>
+      {shown.map((column) => (
+        <section
+          key={column.id}
+          aria-label={column.title}
+          className={part(
+            "sc-board__column",
+            ...(over === column.id ? (["sc-board__column--over"] as const) : []),
+          )}
+          onDragOver={(event) => {
+            if (!movable || dragging === null) return;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = "move";
+            setOver(column.id);
+          }}
+          onDragLeave={(event) => {
+            const to = event.relatedTarget;
+            if (!(to instanceof Node && event.currentTarget.contains(to))) setOver(null);
+          }}
+          onDrop={movable ? dropOn(column) : undefined}
+        >
+          <h4 className={part("sc-board__head")}>
+            <span className={part("sc-board__title")}>{column.title}</span>
+            <span className={part("sc-board__count")}>{column.cards.length}</span>
+          </h4>
+          {column.cards.length === 0 ? (
+            <p className={part("sc-board__empty")}>{messages.board.empty}</p>
+          ) : (
+            <ul className={part("sc-board__cards")}>
+              {column.cards.map((card) => (
+                <li
+                  key={card.id}
+                  draggable={movable}
+                  onDragStart={(event) => {
+                    event.dataTransfer.setData(CARD, card.id);
+                    event.dataTransfer.effectAllowed = "move";
+                    setDragging(card.id);
+                  }}
+                  onDragEnd={() => {
+                    setDragging(null);
+                    setOver(null);
+                  }}
+                  className={part(
+                    "sc-board__card",
+                    ...(dragging === card.id ? (["sc-board__card--dragging"] as const) : []),
+                  )}
+                >
+                  <span className={part("sc-board__card-title")}>{card.title}</span>
+                  {card.subtitle !== undefined && (
+                    <span className={part("sc-board__card-subtitle")}>{card.subtitle}</span>
+                  )}
+                  {card.meta !== undefined && (
+                    <span className={part("sc-board__card-meta")}>{card.meta}</span>
+                  )}
+                  {movable && (
+                    <Move
+                      card={card}
+                      to={shown.filter((other) => other.id !== column.id)}
+                      onMove={move}
+                    />
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+      ))}
+    </div>
+  );
+}
+
+/** A card's button that opens the other columns, to move it to one of them. */
+function Move({
+  card,
+  to,
+  onMove,
+}: {
+  card: BoardCard;
+  to: BoardColumn[];
+  onMove: (card: BoardCard, column: BoardColumn) => void;
+}) {
+  const part = useParts();
+  const { messages } = useKit();
+  const [open, setOpen] = useState(false);
+  const popover = usePopover(open, setOpen, { width: "own", role: "dialog" });
+  return (
+    <>
+      <button
+        ref={popover.refs.setReference}
+        type="button"
+        aria-label={messages.board.move(card.title)}
+        title={messages.board.move(card.title)}
+        aria-expanded={open}
+        className={part("sc-board__move")}
+        {...popover.getReferenceProps({ onClick: () => setOpen(!open) })}
+      >
+        <ArrowsLeftRightIcon aria-hidden />
+      </button>
+      {open && (
+        <Popover popover={popover} focus label={messages.board.moveTo}>
+          <div className={part("sc-board__menu")}>
+            <p>{messages.board.moveTo}</p>
+            {to.map((column) => (
+              <button
+                key={column.id}
+                type="button"
+                className={part("sc-listbox__item")}
+                onClick={() => {
+                  setOpen(false);
+                  onMove(card, column);
+                }}
+              >
+                {column.title}
+              </button>
+            ))}
+          </div>
+        </Popover>
+      )}
+    </>
+  );
+}

package/src/kit/Timeline.tsx

@@ -0,0 +1,58 @@
+import type { TimelineItem } from "../blocks";
+import { useKit, useParts } from "./context";
+import { dayOf, momentParts, TIME } from "./dates";
+
+/** When a timeline's item was, short: "20 oct, 16:00"; its year when not this one's. */
+export function formatWhen(at: string, code: string, today: Date = new Date()): string {
+  const [date, time] = momentParts(at);
+  const day = dayOf(date);
+  if (!day) return at;
+  const timed = TIME.test(time);
+  if (timed) {
+    const [hours = 0, minutes = 0] = time.split(":").map(Number);
+    day.setHours(hours, minutes);
+  }
+  return new Intl.DateTimeFormat(code, {
+    day: "numeric",
+    month: "short",
+    ...(day.getFullYear() !== today.getFullYear() && { year: "numeric" }),
+    ...(timed && { hour: "numeric", minute: "2-digit" }),
+  }).format(day);
+}
+
+/**
+ * Dated things, one under another along a hairline, the newest first: each a dot on the line (in
+ * its tone, when it has one), its title with where it stands in a quiet word at its right, when
+ * it was under it, and a line about it.
+ */
+export function Timeline({ items }: { items: TimelineItem[] }) {
+  const part = useParts();
+  const { code } = useKit();
+  return (
+    <ol part="timeline" className={part("sc-timeline")}>
+      {items.map((item, index) => (
+        <li
+          key={item.id ?? index}
+          className={part(
+            "sc-timeline__item",
+            ...(item.tone ? ([`sc-timeline__item--${item.tone}`] as const) : []),
+          )}
+        >
+          <span aria-hidden className={part("sc-timeline__dot")} />
+          <div className={part("sc-timeline__body")}>
+            <p className={part("sc-timeline__head")}>
+              <span className={part("sc-timeline__title")}>{item.title}</span>
+              {item.status !== undefined && (
+                <span className={part("sc-timeline__status")}>{item.status}</span>
+              )}
+            </p>
+            <time dateTime={item.at} className={part("sc-timeline__when")}>
+              {formatWhen(item.at, code)}
+            </time>
+            {item.text !== undefined && <p className={part("sc-timeline__text")}>{item.text}</p>}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/kit/context.tsx

@@ -186,7 +186,51 @@ export type KitPart =
   | "sc-run__error"
   | "sc-run__live"
   | "sc-run__links"
-  | "sc-run__empty";
+  | "sc-run__empty"
+  | "sc-agenda"
+  | "sc-agenda--day"
+  | "sc-agenda__days"
+  | "sc-agenda__day"
+  | "sc-agenda__day--today"
+  | "sc-agenda__day--empty"
+  | "sc-agenda__date"
+  | "sc-agenda__weekday"
+  | "sc-agenda__number"
+  | "sc-agenda__events"
+  | "sc-agenda__event"
+  | "sc-agenda__time"
+  | "sc-agenda__what"
+  | "sc-agenda__title"
+  | "sc-agenda__detail"
+  | "sc-agenda__empty"
+  | "sc-timeline"
+  | "sc-timeline__item"
+  | "sc-timeline__item--info"
+  | "sc-timeline__item--success"
+  | "sc-timeline__item--warning"
+  | "sc-timeline__item--danger"
+  | "sc-timeline__dot"
+  | "sc-timeline__body"
+  | "sc-timeline__head"
+  | "sc-timeline__title"
+  | "sc-timeline__status"
+  | "sc-timeline__when"
+  | "sc-timeline__text"
+  | "sc-board"
+  | "sc-board__column"
+  | "sc-board__column--over"
+  | "sc-board__head"
+  | "sc-board__title"
+  | "sc-board__count"
+  | "sc-board__cards"
+  | "sc-board__card"
+  | "sc-board__card--dragging"
+  | "sc-board__card-title"
+  | "sc-board__card-subtitle"
+  | "sc-board__card-meta"
+  | "sc-board__move"
+  | "sc-board__menu"
+  | "sc-board__empty";
 
 export type KitClassNames = Partial<Record<KitPart, string>> | undefined;
 

package/src/kit/messages.ts

@@ -97,6 +97,30 @@ export interface KitMessages {
   automation: AutomationMessages;
   /** An app for the person to connect, as its connection stands. */
   connect: ConnectMessages;
+  /** A calendar's words. */
+  calendar: CalendarMessages;
+  /** A board's words. */
+  board: BoardMessages;
+}
+
+/** What a calendar says besides its events. */
+export interface CalendarMessages {
+  /** An event that takes the whole day, where its hours would be. */
+  allDay: string;
+  /** A day with nothing on it. */
+  empty: string;
+}
+
+/** What a board says besides its cards. */
+export interface BoardMessages {
+  /** A card's button that moves it to another column, given the card, for screen readers. */
+  move: (card: string) => string;
+  /** Over the columns it may go to. */
+  moveTo: string;
+  /** A card moved, as the person's answer reads. */
+  moved: (card: string, column: string) => string;
+  /** A column with no cards. */
+  empty: string;
 }
 
 /** The words of an app's card: its button, and what it says where the button isn't. */
@@ -177,4 +201,11 @@ export const KIT_MESSAGES: KitMessages = {
     failed: "It couldn't be connected",
     preparing: "Getting it ready",
   },
+  calendar: { allDay: "All day", empty: "Nothing planned" },
+  board: {
+    move: (card) => `Move ${card}`,
+    moveTo: "Move to",
+    moved: (card, column) => `${card} to ${column}`,
+    empty: "Nothing here",
+  },
 };