@skillcdn/console 0.1.6 → 0.1.7

package/src/components/shell.tsx

@@ -0,0 +1,284 @@
+import { type ReactNode, useEffect, useRef } from "react";
+import type { RestPerson } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Avatar, cx } from "./ui.js";
+
+// The frame every page sits in (ADR-0010): a header that names the workspace and the project the
+// page is on, with the person's menu at its end; a row of tabs below it with the pages of the
+// level the person is on; the page itself. Takes its data as props and nothing from the network.
+
+export interface NavItem {
+  readonly href: string;
+  readonly label: string;
+  readonly current: boolean;
+  /** A count beside the label: the decisions waiting, for example. */
+  readonly count?: number | undefined;
+}
+
+/** The addresses of a brand's marks (ADR-0013): shown beside the workspace's name, and above it when signing in. */
+export interface Brand {
+  /** A small square mark, as an image the browser loads. */
+  readonly symbol?: string | undefined;
+  /** The name as a mark, as an image the browser loads. */
+  readonly wordmark?: string | undefined;
+}
+
+/** A language the person may switch to, as the menu offers it (ADR-0012). */
+export interface LanguageChoice {
+  readonly tag: string;
+  readonly label: string;
+  readonly current: boolean;
+}
+
+export interface ShellProps {
+  readonly title: string;
+  /** The marks to show beside the name; none shows the name alone. */
+  readonly brand?: Brand | undefined;
+  /** The project the page is on, named after the workspace, or nothing on the workspace's own pages. */
+  readonly project?: { readonly name: string; readonly href: string } | undefined;
+  /** The pages of the level the person is on, as tabs: the project's, or the workspace's. */
+  readonly nav: readonly NavItem[];
+  /** The workspace's pages, reached from anywhere through the person's menu. */
+  readonly menu?: readonly NavItem[] | undefined;
+  /** The languages the pages speak, for the menu to switch between. */
+  readonly languages?: readonly LanguageChoice[] | undefined;
+  readonly onLanguage?: ((tag: string) => void) | undefined;
+  readonly person: RestPerson | undefined;
+  /** Follows a link inside the app without loading a document. */
+  readonly onNavigate: (href: string) => void;
+  readonly onSignOut?: (() => void) | undefined;
+  /** Whether the feed is connected: a dot in the header says so. */
+  readonly live?: boolean | undefined;
+  /** Whether the page takes the whole width of the window, as the board does, rather than the column the rest read in. */
+  readonly wide?: boolean | undefined;
+  readonly children: ReactNode;
+}
+
+/** Whether a click on a link is a plain one, to be followed in place; a modified one is the browser's. */
+export function isPlainClick(event: {
+  readonly button: number;
+  readonly metaKey: boolean;
+  readonly ctrlKey: boolean;
+  readonly shiftKey: boolean;
+  readonly altKey: boolean;
+}): boolean {
+  return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+
+/** The person's menu: who they are, the workspace's pages, the languages, and the way out. Closes once used. */
+function PersonMenu(props: {
+  readonly person: RestPerson;
+  readonly items: readonly NavItem[];
+  readonly languages: readonly LanguageChoice[];
+  readonly onLanguage: ((tag: string) => void) | undefined;
+  readonly onNavigate: (href: string) => void;
+  readonly onSignOut: (() => void) | undefined;
+}) {
+  const words = useWords();
+  const details = useRef<HTMLDetailsElement>(null);
+  const close = () => {
+    if (details.current !== null) {
+      details.current.open = false;
+    }
+  };
+  // A click elsewhere, or the escape key, closes it, as a menu is expected to.
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      const element = details.current;
+      if (
+        element?.open === true &&
+        !(event.target instanceof Node && element.contains(event.target))
+      ) {
+        element.open = false;
+      }
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && details.current !== null) {
+        details.current.open = false;
+      }
+    };
+    document.addEventListener("click", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("click", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, []);
+  const { person } = props;
+  return (
+    <details className="sc-menu" ref={details}>
+      <summary className="sc-menu-summary" aria-label={words.shell.menu(person.login)}>
+        <Avatar person={person} size="sm" />
+        <span className="sc-person-login">{person.login}</span>
+        <svg className="sc-menu-caret" viewBox="0 0 16 16" aria-hidden="true">
+          <path
+            d="M4 6l4 4 4-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </summary>
+      <div className="sc-menu-panel">
+        <p className="sc-menu-who">
+          <span>{person.name ?? person.login}</span>
+          {person.name !== null && <span className="sc-muted">{person.login}</span>}
+        </p>
+        <nav className="sc-menu-list" aria-label={words.shell.workspace}>
+          {props.items.map((item) => (
+            <a
+              key={item.href}
+              href={item.href}
+              className="sc-menu-link"
+              aria-current={item.current ? "page" : undefined}
+              onClick={(event) => {
+                if (isPlainClick(event)) {
+                  event.preventDefault();
+                  close();
+                  props.onNavigate(item.href);
+                }
+              }}
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+        {props.languages.length > 1 && props.onLanguage !== undefined && (
+          <fieldset className="sc-menu-languages">
+            <legend className="sc-menu-heading">{words.common.language}</legend>
+            {props.languages.map((language) => (
+              <button
+                key={language.tag}
+                type="button"
+                lang={language.tag}
+                className={cx("sc-menu-link", language.current && "sc-menu-chosen")}
+                aria-pressed={language.current}
+                onClick={() => {
+                  close();
+                  props.onLanguage?.(language.tag);
+                }}
+              >
+                {language.label}
+              </button>
+            ))}
+          </fieldset>
+        )}
+        {props.onSignOut !== undefined && (
+          <button
+            type="button"
+            className="sc-menu-link sc-menu-out"
+            onClick={() => {
+              close();
+              props.onSignOut?.();
+            }}
+          >
+            {words.shell.signOut}
+          </button>
+        )}
+      </div>
+    </details>
+  );
+}
+
+export function Shell(props: ShellProps) {
+  const words = useWords();
+  const follow = (href: string) => (event: React.MouseEvent) => {
+    if (isPlainClick(event)) {
+      event.preventDefault();
+      props.onNavigate(href);
+    }
+  };
+  return (
+    <div className="sc-shell">
+      <a className="sc-skip" href="#sc-content">
+        {words.shell.skipToContent}
+      </a>
+      <header className="sc-header">
+        <div className="sc-header-inner">
+          <a className="sc-brand" href="/" onClick={follow("/")} aria-label={props.title}>
+            {props.brand?.symbol !== undefined && (
+              <img className="sc-brand-symbol" src={props.brand.symbol} alt="" />
+            )}
+            {props.brand?.wordmark !== undefined ? (
+              <img className="sc-brand-wordmark" src={props.brand.wordmark} alt="" />
+            ) : (
+              <span className="sc-brand-name">{props.title}</span>
+            )}
+          </a>
+          {props.brand?.wordmark !== undefined && (
+            // With the marks in the brand's place, the workspace is named after them, as a crumb.
+            <span className="sc-crumb">
+              <span className="sc-crumb-separator" aria-hidden="true">
+                /
+              </span>
+              <a className="sc-crumb-link" href="/" onClick={follow("/")}>
+                {props.title}
+              </a>
+            </span>
+          )}
+          {props.project !== undefined && (
+            <span className="sc-crumb">
+              <span className="sc-crumb-separator" aria-hidden="true">
+                /
+              </span>
+              <a
+                className="sc-crumb-link"
+                href={props.project.href}
+                onClick={follow(props.project.href)}
+              >
+                {props.project.name}
+              </a>
+            </span>
+          )}
+          <div className="sc-header-end">
+            {props.live !== undefined && (
+              <span
+                className={cx("sc-live", props.live && "sc-live-on")}
+                title={props.live ? words.shell.live : words.shell.reconnecting}
+              >
+                <span className="sc-visually-hidden">
+                  {props.live ? words.shell.live : words.shell.reconnecting}
+                </span>
+              </span>
+            )}
+            {props.person !== undefined && (
+              <PersonMenu
+                person={props.person}
+                items={props.menu ?? []}
+                languages={props.languages ?? []}
+                onLanguage={props.onLanguage}
+                onNavigate={props.onNavigate}
+                onSignOut={props.onSignOut}
+              />
+            )}
+          </div>
+        </div>
+        {props.nav.length > 0 && (
+          <nav className="sc-tabs" aria-label={words.shell.pages}>
+            <div className="sc-tabs-inner">
+              {props.nav.map((item) => (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className={cx("sc-tab", item.current && "sc-tab-current")}
+                  aria-current={item.current ? "page" : undefined}
+                  onClick={follow(item.href)}
+                >
+                  {item.label}
+                  {item.count !== undefined && item.count > 0 && (
+                    <span className="sc-nav-count">{item.count}</span>
+                  )}
+                </a>
+              ))}
+            </div>
+          </nav>
+        )}
+      </header>
+      <main id="sc-content" className={cx("sc-main", props.wide === true && "sc-main-wide")}>
+        {props.children}
+      </main>
+    </div>
+  );
+}

package/src/components/sign-in.tsx

@@ -0,0 +1,61 @@
+import { loginPath, type RestProvider, type SignInFailure } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import type { Brand } from "./shell.js";
+import { Callout } from "./ui.js";
+
+// The page a person sees before they are anyone: the way to each provider the deployment has,
+// and what went wrong the last time, when something did.
+
+export interface SignInProps {
+  readonly title: string;
+  /** The marks to show above the name; none shows the name alone (ADR-0013). */
+  readonly brand?: Brand | undefined;
+  /** The identity providers people sign in through; none where nobody can. */
+  readonly providers: readonly RestProvider[];
+  /** The page to come back to, signed in: a path of this origin. */
+  readonly returnTo: string;
+  readonly failure?: SignInFailure | undefined;
+}
+
+export function SignIn(props: SignInProps) {
+  const words = useWords().signIn;
+  return (
+    <div className="sc-sign-in">
+      {props.brand?.symbol !== undefined && (
+        <div className="sc-sign-in-stage" aria-hidden="true">
+          <span className="sc-sign-in-badge">
+            <img className="sc-sign-in-symbol" src={props.brand.symbol} alt="" />
+          </span>
+        </div>
+      )}
+      {props.brand?.wordmark !== undefined && (
+        <img className="sc-sign-in-wordmark" src={props.brand.wordmark} alt="" />
+      )}
+      <h1 className="sc-sign-in-title">{props.title}</h1>
+      <p className="sc-sign-in-lead">{words.lead}</p>
+      {props.failure !== undefined && (
+        <Callout tone={props.failure === "refused" ? "warning" : "info"}>
+          {words.failure[props.failure]}
+        </Callout>
+      )}
+      {props.providers.length === 0 ? (
+        <Callout tone="warning" title={words.nobody.title}>
+          {words.nobody.body}
+        </Callout>
+      ) : (
+        <div className="sc-sign-in-ways">
+          {props.providers.map((provider) => (
+            // A real navigation: signing in happens at the provider, not in this page.
+            <a
+              key={provider.key}
+              className="sc-button sc-button-primary sc-sign-in-button"
+              href={loginPath(provider.key, props.returnTo)}
+            >
+              {words.continueWith(provider.label)}
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/skills.tsx

@@ -0,0 +1,78 @@
+import type { RestSkills } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Callout, EmptyState, Spinner } from "./ui.js";
+
+// The organization's skills, as SkillCDN serves them at the console's address: where a person
+// reads each, and what an agent loads it by. Takes its data as props and nothing from the
+// network; what the console answered is shown as text, never as HTML.
+
+export interface SkillListProps {
+  /** What the console answered, or nothing while it has not yet. */
+  readonly skills: RestSkills | undefined;
+}
+
+export function SkillList(props: SkillListProps) {
+  const words = useWords().skills;
+  const { skills } = props;
+  if (skills === undefined) {
+    return <Spinner label={words.loading} />;
+  }
+  if (skills.status === "none" || skills.address === null || skills.page === null) {
+    return <EmptyState title={words.noAddress.title} body={words.noAddress.body} />;
+  }
+  const where = (
+    <p className="sc-lead">
+      {words.servedBy}{" "}
+      <a href={skills.source} target="_blank" rel="noopener noreferrer">
+        SkillCDN
+      </a>{" "}
+      {words.at}{" "}
+      <a href={skills.page} target="_blank" rel="noopener noreferrer">
+        <code>{skills.address}</code>
+      </a>
+      {words.howLoaded}
+    </p>
+  );
+  if (skills.status !== "ready") {
+    return (
+      <>
+        {where}
+        <Callout tone={skills.status === "indexing" ? "info" : "warning"}>
+          {words.status[skills.status]}
+        </Callout>
+      </>
+    );
+  }
+  if (skills.items.length === 0) {
+    return (
+      <>
+        {where}
+        <EmptyState title={words.none.title} body={words.none.body} />
+      </>
+    );
+  }
+  return (
+    <>
+      {where}
+      <ul className="sc-skills" aria-label={words.list}>
+        {skills.items.map((skill) => (
+          <li key={skill.path} className="sc-skill">
+            <p className="sc-skill-head">
+              <a
+                className="sc-skill-name"
+                href={skill.page}
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+              >
+                {skill.name}
+              </a>
+              <span className="sc-muted">{skill.directory === "" ? "/" : skill.directory}</span>
+            </p>
+            <p className="sc-skill-description">{skill.description}</p>
+            {skill.uri !== null && <code className="sc-skill-uri">{skill.uri}</code>}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}

package/src/components/task-form.tsx

@@ -0,0 +1,229 @@
+import { type FormEvent, useState } from "react";
+import {
+  MAX_BODY_LENGTH,
+  MAX_LINK_LABEL_LENGTH,
+  MAX_LINKS,
+  MAX_TITLE_LENGTH,
+  MAX_URL_LENGTH,
+  type RestPerson,
+  type RestTask,
+  type RestTaskInput,
+  TASK_PRIORITIES,
+  TASK_STATES,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Button } from "./ui.js";
+
+// Writing a task, or changing one. The bounds are the package's, said before a request is made.
+
+export interface TaskFormProps {
+  readonly people: readonly RestPerson[];
+  /** The task to change; left out, the form writes a new one. */
+  readonly task?: RestTask | undefined;
+  /** The tasks a new one may be part of. */
+  readonly parents?: readonly RestTask[] | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onSubmit: (input: RestTaskInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+interface LinkDraft {
+  readonly url: string;
+  readonly label: string;
+}
+
+export function TaskForm(props: TaskFormProps) {
+  const words = useWords();
+  const form = words.task.form;
+  const { task } = props;
+  const [title, setTitle] = useState(task?.title ?? "");
+  const [body, setBody] = useState(task?.body ?? "");
+  const [state, setState] = useState(task?.state ?? "idea");
+  const [priority, setPriority] = useState(task?.priority ?? "normal");
+  const [assigneeId, setAssigneeId] = useState(task?.assignee?.id ?? "");
+  const [parentId, setParentId] = useState(task?.parentId ?? "");
+  const [links, setLinks] = useState<readonly LinkDraft[]>(
+    task?.links.map((link) => ({ url: link.url, label: link.label ?? "" })) ?? [],
+  );
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    props.onSubmit({
+      title: title.trim(),
+      body,
+      state,
+      priority,
+      assigneeId: assigneeId === "" ? null : assigneeId,
+      parentId: parentId === "" ? null : parentId,
+      links: links
+        .filter((link) => link.url.trim().length > 0)
+        .map((link) => ({
+          url: link.url.trim(),
+          label: link.label.trim() === "" ? null : link.label.trim(),
+        })),
+    });
+  };
+
+  const parents = (props.parents ?? []).filter((candidate) => candidate.id !== task?.id);
+
+  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={6}
+          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 typeof state)}
+          >
+            {TASK_STATES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.state[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.priority}</span>
+          <select
+            className="sc-input"
+            value={priority}
+            onChange={(event) => setPriority(event.target.value as typeof priority)}
+          >
+            {TASK_PRIORITIES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.priority[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.assignee}</span>
+          <select
+            className="sc-input"
+            value={assigneeId}
+            onChange={(event) => setAssigneeId(event.target.value)}
+          >
+            <option value="">{words.common.nobody}</option>
+            {props.people.map((person) => (
+              <option key={person.id} value={person.id}>
+                {person.login}
+              </option>
+            ))}
+          </select>
+        </label>
+        {parents.length > 0 && (
+          <label className="sc-field">
+            <span className="sc-field-label">{form.partOf}</span>
+            <select
+              className="sc-input"
+              value={parentId}
+              onChange={(event) => setParentId(event.target.value)}
+            >
+              <option value="">{words.common.nothing}</option>
+              {parents.map((candidate) => (
+                <option key={candidate.id} value={candidate.id}>
+                  #{candidate.number} {candidate.title}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+      </div>
+      <fieldset className="sc-field sc-links">
+        <legend className="sc-field-label">{form.links}</legend>
+        {links.map((link, index) => (
+          // Drafts have no identity of their own; their position is what tells them apart.
+          // biome-ignore lint/suspicious/noArrayIndexKey: ordered drafts without ids
+          <div key={index} className="sc-link-row">
+            <input
+              className="sc-input"
+              type="url"
+              placeholder="https://"
+              pattern="https://.*"
+              maxLength={MAX_URL_LENGTH}
+              value={link.url}
+              onChange={(event) =>
+                setLinks(
+                  links.map((entry, at) =>
+                    at === index ? { ...entry, url: event.target.value } : entry,
+                  ),
+                )
+              }
+            />
+            <input
+              className="sc-input"
+              placeholder={form.label}
+              maxLength={MAX_LINK_LABEL_LENGTH}
+              value={link.label}
+              onChange={(event) =>
+                setLinks(
+                  links.map((entry, at) =>
+                    at === index ? { ...entry, label: event.target.value } : entry,
+                  ),
+                )
+              }
+            />
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setLinks(links.filter((_, at) => at !== index))}
+            >
+              {words.common.remove}
+            </Button>
+          </div>
+        ))}
+        {links.length < MAX_LINKS && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setLinks([...links, { url: "", label: "" }])}
+          >
+            {form.addLink}
+          </Button>
+        )}
+      </fieldset>
+      {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() === ""}
+        >
+          {task === undefined ? form.write : words.common.save}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}