@skillcdn/console 0.1.9 → 0.1.10

package/src/components/categories.tsx

@@ -0,0 +1,209 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  CATEGORY_COLORS,
+  type CategoryColor,
+  MAX_CATEGORY_KEY_LENGTH,
+  MAX_CATEGORY_NAME_LENGTH,
+  type RestCategory,
+  type RestCategoryInput,
+  type RestCategoryPatch,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { keyOf } from "./projects.js";
+import { Button, CategoryBadge, cx } from "./ui.js";
+
+// The categories tasks are sorted into (ADR-0019), as the workspace's page lists them: each in
+// its colour, with the ways for an administrator to rename, recolour, add and remove one. Takes
+// its data as props and nothing from the network.
+
+export interface CategoryListProps {
+  readonly categories: readonly RestCategory[];
+  readonly busy?: boolean | undefined;
+  /** Called with a category to add. Left out, the list is read here, not changed. */
+  readonly onAdd?: ((input: RestCategoryInput) => void) | undefined;
+  readonly onChange?: ((category: RestCategory, patch: RestCategoryPatch) => void) | undefined;
+  readonly onRemove?: ((category: RestCategory) => void) | undefined;
+  readonly empty?: ReactNode;
+}
+
+/** One category, with its name and its colour open to change where an administrator is looking. */
+function CategoryRow(props: {
+  readonly category: RestCategory;
+  readonly busy: boolean | undefined;
+  readonly onChange: ((category: RestCategory, patch: RestCategoryPatch) => void) | undefined;
+  readonly onRemove: ((category: RestCategory) => void) | undefined;
+}) {
+  const words = useWords();
+  const { category } = props;
+  const [name, setName] = useState(category.name);
+  const [color, setColor] = useState<CategoryColor>(category.color);
+  const changed = name.trim() !== category.name || color !== category.color;
+  if (props.onChange === undefined) {
+    return (
+      <li className="sc-category-row">
+        <CategoryBadge category={category} />
+        <code className="sc-project-key">{category.key}</code>
+      </li>
+    );
+  }
+  return (
+    <li className="sc-category-row">
+      <form
+        className="sc-category-form"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (changed && name.trim() !== "") {
+            props.onChange?.(category, { name: name.trim(), color });
+          }
+        }}
+      >
+        <span className={cx("sc-category-swatch", `sc-category-${color}`)} aria-hidden="true" />
+        <label className="sc-field sc-field-inline">
+          <span className="sc-visually-hidden">{words.categories.nameOf(category.key)}</span>
+          <input
+            className="sc-input"
+            value={name}
+            maxLength={MAX_CATEGORY_NAME_LENGTH}
+            required
+            onChange={(event) => setName(event.target.value)}
+          />
+        </label>
+        <code className="sc-project-key">{category.key}</code>
+        <label className="sc-field sc-field-inline">
+          <span className="sc-visually-hidden">{words.categories.colorOf(category.key)}</span>
+          <select
+            className="sc-input"
+            value={color}
+            onChange={(event) => setColor(event.target.value as CategoryColor)}
+          >
+            {CATEGORY_COLORS.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.categoryColor[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <Button
+          type="submit"
+          variant="primary"
+          size="sm"
+          disabled={props.busy === true || !changed || name.trim() === ""}
+        >
+          {words.common.save}
+        </Button>
+        {props.onRemove !== undefined && (
+          <Button
+            variant="danger"
+            size="sm"
+            disabled={props.busy === true}
+            onClick={() => props.onRemove?.(category)}
+          >
+            {words.common.remove}
+          </Button>
+        )}
+      </form>
+    </li>
+  );
+}
+
+export function CategoryList(props: CategoryListProps) {
+  const words = useWords();
+  const form = words.categories.form;
+  const [name, setName] = useState("");
+  const [key, setKey] = useState("");
+  const [keyTouched, setKeyTouched] = useState(false);
+  const [color, setColor] = useState<CategoryColor>("gray");
+  const add = (event: FormEvent) => {
+    event.preventDefault();
+    if (name.trim() === "" || key.trim() === "") {
+      return;
+    }
+    props.onAdd?.({ key: key.trim(), name: name.trim(), color });
+    setName("");
+    setKey("");
+    setKeyTouched(false);
+    setColor("gray");
+  };
+  return (
+    <div className="sc-categories">
+      {props.categories.length === 0 ? (
+        (props.empty ?? null)
+      ) : (
+        <ul className="sc-category-list" aria-label={words.categories.list}>
+          {props.categories.map((category) => (
+            <CategoryRow
+              key={category.key}
+              category={category}
+              busy={props.busy}
+              onChange={props.onChange}
+              onRemove={props.onRemove}
+            />
+          ))}
+        </ul>
+      )}
+      {props.onAdd !== undefined && (
+        <form
+          className="sc-form sc-member-form"
+          aria-label={words.categories.addAria}
+          onSubmit={add}
+        >
+          <div className="sc-field-row">
+            <label className="sc-field">
+              <span className="sc-field-label">{form.name}</span>
+              <input
+                className="sc-input"
+                value={name}
+                maxLength={MAX_CATEGORY_NAME_LENGTH}
+                required
+                onChange={(event) => {
+                  setName(event.target.value);
+                  if (!keyTouched) {
+                    setKey(keyOf(event.target.value).slice(0, MAX_CATEGORY_KEY_LENGTH));
+                  }
+                }}
+              />
+            </label>
+            <label className="sc-field">
+              <span className="sc-field-label">{form.key}</span>
+              <input
+                className="sc-input"
+                value={key}
+                maxLength={MAX_CATEGORY_KEY_LENGTH}
+                pattern="[a-z0-9]([a-z0-9-]*[a-z0-9])?"
+                required
+                title={form.keyHint}
+                onChange={(event) => {
+                  setKeyTouched(true);
+                  setKey(event.target.value);
+                }}
+              />
+            </label>
+            <label className="sc-field">
+              <span className="sc-field-label">{form.color}</span>
+              <select
+                className="sc-input"
+                value={color}
+                onChange={(event) => setColor(event.target.value as CategoryColor)}
+              >
+                {CATEGORY_COLORS.map((candidate) => (
+                  <option key={candidate} value={candidate}>
+                    {words.vocabulary.categoryColor[candidate]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <div className="sc-form-actions">
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={props.busy === true || name.trim() === "" || key.trim() === ""}
+              >
+                {form.add}
+              </Button>
+            </div>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

package/src/components/decision-list.tsx

@@ -11,9 +11,11 @@ import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
 import { Button, cx, PersonChip, Time } from "./ui.js";
 
-// The decisions: the ones that wait, with the way to answer each, and the ones answered, with
-// who answered and when; each a record (ADR-0009) of its context, its answer with the
-// rationale, and what followed. Each takes its data as props and nothing from the network.
+// The decisions: the ones that wait, each a card with the way to answer it, since they are what
+// a person came for; and the ones answered, the record, a row each, since they are read back
+// rarely and looked up by what was asked. Each decision is a record (ADR-0009) of its context,
+// its answer with the rationale, and what followed, read on its own page. Each component takes
+// its data as props and nothing from the network.
 
 export interface DecisionCardProps {
   readonly decision: RestDecision;
@@ -240,6 +242,55 @@ export interface DecisionListProps {
   readonly empty?: React.ReactNode;
 }
 
+export interface DecisionLogProps {
+  /** The decisions answered, newest first. */
+  readonly decisions: readonly RestDecision[];
+  readonly tasks?: ReadonlyMap<string, RestTask> | undefined;
+  readonly taskHref?: ((task: RestTask) => string) | undefined;
+  /** Where each decision's own page is, with its context, its rationale and what followed. */
+  readonly decisionHref?: ((decision: RestDecision) => string) | undefined;
+}
+
+/** The record: one row per decision answered, what was asked, what was chosen, by whom, when. */
+export function DecisionLog(props: DecisionLogProps) {
+  const words = useWords();
+  return (
+    <ol className="sc-decision-log" aria-label={words.decisions.record}>
+      {props.decisions.map((decision) => {
+        const task = decision.taskId === null ? undefined : props.tasks?.get(decision.taskId);
+        const href = props.decisionHref?.(decision);
+        const chosen =
+          decision.options.find((option) => option.id === decision.answer?.option)?.label ??
+          decision.answer?.option ??
+          "";
+        return (
+          <li key={decision.id} className="sc-decision-row">
+            <span className="sc-decision-row-question">
+              {href === undefined ? decision.question : <a href={href}>{decision.question}</a>}
+            </span>
+            <span className="sc-decision-row-answer">{chosen}</span>
+            <span className="sc-decision-row-meta">
+              {decision.answer !== null && (
+                <>
+                  <PersonChip person={decision.answer.by} /> <Time iso={decision.answer.at} />
+                </>
+              )}
+              {task !== undefined &&
+                (props.taskHref === undefined ? (
+                  <span className="sc-card-number">#{task.number}</span>
+                ) : (
+                  <a className="sc-card-number" href={props.taskHref(task)}>
+                    #{task.number}
+                  </a>
+                ))}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
 export function DecisionList(props: DecisionListProps) {
   const words = useWords();
   const waiting = props.decisions.filter((decision) => decision.answer === null);
@@ -268,9 +319,15 @@ export function DecisionList(props: DecisionListProps) {
       {answered.length > 0 && (
         <section aria-label={words.decisions.answered}>
           <h2 className="sc-section-title">
-            {words.decisions.answered} <span className="sc-column-count">{answered.length}</span>
+            {words.decisions.record} <span className="sc-column-count">{answered.length}</span>
           </h2>
-          {answered.map(card)}
+          <p className="sc-lead">{words.decisions.recordLead}</p>
+          <DecisionLog
+            decisions={answered}
+            tasks={props.tasks}
+            taskHref={props.taskHref}
+            decisionHref={props.decisionHref}
+          />
         </section>
       )}
     </div>

package/src/components/event-feed.tsx

@@ -30,6 +30,8 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
           : feed.role.other;
   const login = data.login ?? feed.someone;
   const question = data.question ?? feed.aQuestion;
+  const goal = data.title ?? feed.aGoal;
+  const category = data.name ?? data.key ?? feed.aCategory;
   switch (event.kind) {
     case "person.joined":
       return feed.event.personJoined();
@@ -45,6 +47,16 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.memberChanged(login, role(data.role), project);
     case "project.member_removed":
       return feed.event.memberRemoved(login, project);
+    case "category.created":
+      return feed.event.categoryCreated(category);
+    case "category.updated":
+      return feed.event.categoryUpdated(fields, category);
+    case "category.removed":
+      return feed.event.categoryRemoved(category);
+    case "goal.created":
+      return feed.event.goalCreated(goal);
+    case "goal.updated":
+      return feed.event.goalUpdated(fields, goal);
     case "task.created":
       return feed.event.taskCreated(task);
     case "task.moved":

package/src/components/goals.tsx

@@ -0,0 +1,264 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  GOAL_STATES,
+  type GoalState,
+  MAX_BODY_LENGTH,
+  MAX_TITLE_LENGTH,
+  type RestGoal,
+  type RestGoalInput,
+  type RestTask,
+  TASK_STATES,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Markdown } from "./markdown.js";
+import { TaskList } from "./task-list.js";
+import { Button, Day, DueBadge, GoalStateBadge, PersonChip, ProgressBar, Time } from "./ui.js";
+
+// The roadmap of a project (ADR-0019): its goals, each with the day it is meant to be reached
+// by and how far its tasks are, read from the board as it stands. The list, one goal with its
+// tasks, and the form an owner sets one with. Each takes its data as props and nothing from
+// the network; what people wrote is shown as text, never as HTML.
+
+/** A goal's day on the calendar's terms: reached or let go, it is a plain fact; else it may be late. */
+const dueState = (goal: RestGoal) =>
+  goal.state === "done" ? "done" : goal.state === "dropped" ? "dropped" : "ready";
+
+export interface GoalListProps {
+  readonly goals: readonly RestGoal[];
+  readonly goalHref: (goal: RestGoal) => string;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function GoalList(props: GoalListProps) {
+  const words = useWords().roadmap;
+  if (props.goals.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <ul className="sc-goals" aria-label={words.title}>
+      {props.goals.map((goal) => (
+        <li key={goal.id} className={`sc-goal sc-goal-${goal.state}`}>
+          <div className="sc-goal-head">
+            <a className="sc-goal-title" href={props.goalHref(goal)}>
+              {goal.title}
+            </a>
+            <GoalStateBadge state={goal.state} />
+            {goal.dueOn !== null && (
+              <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
+            )}
+          </div>
+          <ProgressBar counts={goal.taskCounts} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface GoalFormProps {
+  /** The goal to change; left out, the form sets a new one. */
+  readonly goal?: RestGoal | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onSubmit: (input: RestGoalInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+export function GoalForm(props: GoalFormProps) {
+  const words = useWords();
+  const form = words.roadmap.form;
+  const { goal } = props;
+  const [title, setTitle] = useState(goal?.title ?? "");
+  const [body, setBody] = useState(goal?.body ?? "");
+  const [state, setState] = useState<GoalState>(goal?.state ?? "planned");
+  const [dueOn, setDueOn] = useState(goal?.dueOn ?? "");
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    props.onSubmit({ title: title.trim(), body, state, dueOn: dueOn === "" ? null : dueOn });
+  };
+
+  return (
+    <form className="sc-form" onSubmit={submit}>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.title}</span>
+        <input
+          className="sc-input"
+          value={title}
+          maxLength={MAX_TITLE_LENGTH}
+          required
+          onChange={(event) => setTitle(event.target.value)}
+        />
+      </label>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.body}</span>
+        <textarea
+          className="sc-input sc-textarea"
+          value={body}
+          maxLength={MAX_BODY_LENGTH}
+          rows={4}
+          placeholder={form.bodyPlaceholder}
+          onChange={(event) => setBody(event.target.value)}
+        />
+      </label>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.state}</span>
+          <select
+            className="sc-input"
+            value={state}
+            onChange={(event) => setState(event.target.value as GoalState)}
+          >
+            {GOAL_STATES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.goalState[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.dueOn}</span>
+          <input
+            className="sc-input"
+            type="date"
+            value={dueOn}
+            onChange={(event) => setDueOn(event.target.value)}
+          />
+        </label>
+      </div>
+      {props.error !== undefined && (
+        <p className="sc-form-error" role="alert">
+          {props.error}
+        </p>
+      )}
+      <div className="sc-form-actions">
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={props.busy === true || title.trim() === ""}
+        >
+          {goal === undefined ? form.set : words.common.save}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+export interface GoalViewProps {
+  readonly goal: RestGoal;
+  /** The tasks of the board; those that work towards the goal are shown, by state. */
+  readonly tasks: readonly RestTask[];
+  readonly taskHref: (task: RestTask) => string;
+  /** Where a document of the project is read, by its path, for the links in what was written. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  readonly today?: string | undefined;
+  /** Where the goal is changed; left out, it cannot be changed from here. */
+  readonly editHref?: string | undefined;
+  /** Called when an owner moves the goal to another state from here. */
+  readonly onMove?: ((goal: RestGoal, state: GoalState) => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+export function GoalView(props: GoalViewProps) {
+  const words = useWords();
+  const roadmap = words.roadmap;
+  const { goal } = props;
+  const towards = props.tasks.filter((task) => task.goalId === goal.id);
+  return (
+    <div className="sc-task sc-goal-view">
+      <header className="sc-task-header">
+        <h1 className="sc-task-title">{goal.title}</h1>
+        <div className="sc-task-badges">
+          <GoalStateBadge state={goal.state} />
+          {goal.dueOn !== null && (
+            <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
+          )}
+        </div>
+      </header>
+      <div className="sc-task-body">
+        <div className="sc-task-main">
+          <ProgressBar counts={goal.taskCounts} />
+          {goal.body.length > 0 ? (
+            <Markdown source={goal.body} docHref={props.docHref} />
+          ) : (
+            <p className="sc-muted">{roadmap.nothingMore}</p>
+          )}
+          <section className="sc-task-section" aria-label={roadmap.tasks}>
+            <h2 className="sc-section-title">{roadmap.tasks}</h2>
+            {towards.length === 0 ? (
+              <p className="sc-muted">{roadmap.noTasks}</p>
+            ) : (
+              TASK_STATES.map((state) => {
+                const inState = towards.filter((task) => task.state === state);
+                return inState.length === 0 ? null : (
+                  <div key={state} className="sc-goal-tasks">
+                    <h3 className="sc-goal-tasks-state">
+                      {words.vocabulary.state[state]}{" "}
+                      <span className="sc-column-count">{inState.length}</span>
+                    </h3>
+                    <TaskList tasks={inState} taskHref={props.taskHref} today={props.today} />
+                  </div>
+                );
+              })
+            )}
+          </section>
+        </div>
+        <aside className="sc-task-aside" aria-label={words.task.facts}>
+          <dl className="sc-facts">
+            <div>
+              <dt>{roadmap.state}</dt>
+              <dd>
+                {props.onMove === undefined ? (
+                  words.vocabulary.goalState[goal.state]
+                ) : (
+                  <select
+                    className="sc-input"
+                    aria-label={roadmap.state}
+                    value={goal.state}
+                    disabled={props.busy === true}
+                    onChange={(event) => props.onMove?.(goal, event.target.value as GoalState)}
+                  >
+                    {GOAL_STATES.map((state) => (
+                      <option key={state} value={state}>
+                        {words.vocabulary.goalState[state]}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>{roadmap.target}</dt>
+              <dd>
+                {goal.dueOn === null ? (
+                  <span className="sc-muted">{roadmap.noTarget}</span>
+                ) : (
+                  <Day day={goal.dueOn} />
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>{roadmap.setBy}</dt>
+              <dd>
+                <PersonChip person={goal.createdBy} /> <Time iso={goal.createdAt} />
+              </dd>
+            </div>
+          </dl>
+          {props.editHref !== undefined && (
+            <div className="sc-task-actions">
+              <a className="sc-button sc-button-secondary" href={props.editHref}>
+                {words.common.edit}
+              </a>
+            </div>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}