@reviewflow/ui 0.0.0-stage → 6.22.0

package/src/markdown-github/pair-html.ts

@@ -0,0 +1,354 @@
+import type {
+  BlockNode,
+  BreakNode,
+  CodeBlockNode,
+  CodeSpanNode,
+  FootnoteReferenceNode,
+  ImageNode,
+  InlineNode,
+  TableCellNode,
+  TextNode,
+  ThematicBreakNode,
+} from "@tanstack/markdown";
+import { parseMarkdown } from "@tanstack/markdown/parser";
+import {
+  type HtmlToken,
+  decodeEntities,
+  textAfterLeadingComments,
+  tokenizeHtml,
+} from "./html-tokens.ts";
+import type { TaskSignature } from "./toggle-task.ts";
+import { taskSignature } from "./toggle-task.ts";
+
+/**
+ * GitHub allows HTML in a comment, and `@tanstack/markdown` (with `allowHtml`)
+ * hands it over as CommonMark does: a tag is a sibling node of its content, not
+ * its parent. `<details>` is in one `html` node, the markdown it wraps is
+ * ordinary nodes, and `</details>` is in a later `html` node; inline,
+ * `<sub>`, `x` and `</sub>` are three siblings.
+ *
+ * This turns each run of siblings into a tree, pairing an open tag with its
+ * close across them. Everything else about the AST is kept, so a renderer only
+ * has one extra node type, `element`.
+ */
+
+export interface GhElement {
+  type: "element";
+  tag: string;
+  attrs: Record<string, string>;
+  children: GhBlockNode[];
+}
+
+export type GhInlineNode =
+  | BreakNode
+  | CodeSpanNode
+  | FootnoteReferenceNode
+  | GhElement
+  | ImageNode
+  | TextNode
+  | { type: "emphasis" | "strike" | "strong"; children: GhInlineNode[] }
+  | { type: "link"; href: string; title?: string; children: GhInlineNode[] };
+
+export interface GhListItem {
+  type: "listItem";
+  checked?: boolean;
+  /** Position among every task item of the document, in source order. */
+  taskIndex?: number;
+  children: GhBlockNode[];
+}
+
+export interface GhTableCell {
+  type: "tableCell";
+  children: GhInlineNode[];
+}
+
+/**
+ * Inline nodes are part of the union: the raw text inside an html block, such
+ * as the `Click` of `<summary>Click</summary>`, sits among blocks.
+ */
+export type GhBlockNode =
+  | CodeBlockNode
+  | GhInlineNode
+  | ThematicBreakNode
+  | {
+      type: "table";
+      header: GhTableCell[];
+      rows: GhTableCell[][];
+    }
+  | { type: "blockquote"; children: GhBlockNode[] }
+  | { type: "callout"; kind: string; title: string; children: GhBlockNode[] }
+  | { type: "heading"; depth: 1 | 2 | 3 | 4 | 5 | 6; children: GhInlineNode[] }
+  | { type: "list"; ordered: boolean; start?: number; items: GhListItem[] }
+  | { type: "paragraph"; children: GhInlineNode[] };
+
+export interface PairedDocument {
+  children: GhBlockNode[];
+  taskCount: number;
+  /** each task item's state and first line, by `taskIndex`, for `toggleTask` */
+  tasks: TaskSignature[];
+}
+
+const inlineTags = new Set([
+  "a",
+  "abbr",
+  "b",
+  "big",
+  "br",
+  "cite",
+  "code",
+  "del",
+  "em",
+  "i",
+  "img",
+  "ins",
+  "kbd",
+  "mark",
+  "q",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strike",
+  "strong",
+  "sub",
+  "sup",
+  "tt",
+  "u",
+  "var",
+]);
+
+const inlineTypes = new Set<string>([
+  "text",
+  "inlineCode",
+  "footnoteReference",
+  "image",
+  "break",
+  "strong",
+  "emphasis",
+  "strike",
+  "link",
+]);
+
+/** Whether a node belongs in a run of text rather than stacked as a block. */
+export const isInlineNode = (node: GhBlockNode): boolean =>
+  inlineTypes.has(node.type) ||
+  (node.type === "element" && inlineTags.has(node.tag));
+
+interface Frame {
+  tag: string;
+  attrs: Record<string, string>;
+  children: GhBlockNode[];
+}
+
+const trimEdges = (children: GhBlockNode[]): void => {
+  const first = children[0];
+  if (first?.type === "text") first.value = first.value.trimStart();
+  const last = children.at(-1);
+  if (last?.type === "text") last.value = last.value.trimEnd();
+};
+
+/** A stack of open tags over one run of siblings. */
+const createBuilder = (blockContext: boolean) => {
+  const root: Frame = { tag: "", attrs: {}, children: [] };
+  const stack: Frame[] = [root];
+  const top = (): Frame => stack.at(-1) ?? root;
+
+  const pop = (): void => {
+    const frame = stack.pop();
+    if (frame === undefined) return;
+    trimEdges(frame.children);
+    top().children.push({
+      type: "element",
+      tag: frame.tag,
+      attrs: frame.attrs,
+      children: frame.children,
+    });
+  };
+
+  const addText = (raw: string): void => {
+    const inPre = stack.some((frame) => frame.tag === "pre");
+    const value = inPre ? raw : raw.replaceAll(/\s+/g, " ");
+    if (value === "") return;
+    if (!inPre && value.trim() === "") {
+      const last = top().children.at(-1);
+      const afterInline = last !== undefined && isInlineNode(last);
+      if (blockContext && !afterInline) return;
+    }
+    top().children.push({ type: "text", value });
+  };
+
+  return {
+    append: (node: GhBlockNode): void => {
+      top().children.push(node);
+    },
+    html: (value: string): void => {
+      tokenizeHtml(
+        value,
+        stack.slice(1).map((frame) => frame.tag),
+      ).forEach((token: HtmlToken) => {
+        if (token.kind === "text") {
+          addText(token.value);
+        } else if (token.kind === "open") {
+          stack.push({ tag: token.tag, attrs: token.attrs, children: [] });
+        } else {
+          // A stray close has no open tag to match and is ignored; one that
+          // matches a deeper tag also closes what was left open above it.
+          const index = stack.findLastIndex((frame) => frame.tag === token.tag);
+          while (index > 0 && stack.length > index) pop();
+        }
+      });
+    },
+    finish: (): GhBlockNode[] => {
+      while (stack.length > 1) pop();
+      return root.children;
+    },
+  };
+};
+
+interface PairContext {
+  taskCount: number;
+  tasks: TaskSignature[];
+}
+
+const pairInlines = (nodes: InlineNode[]): GhInlineNode[] => {
+  const builder = createBuilder(false);
+
+  nodes.forEach((node) => {
+    switch (node.type) {
+      case "inlineHtml":
+        builder.html(node.value);
+        break;
+      case "strong":
+      case "emphasis":
+      case "strike":
+        builder.append({
+          type: node.type,
+          children: pairInlines(node.children),
+        });
+        break;
+      case "link":
+        builder.append({
+          type: "link",
+          href: node.href,
+          title: node.title,
+          children: pairInlines(node.children),
+        });
+        break;
+      case "text":
+        builder.append({ type: "text", value: decodeEntities(node.value) });
+        break;
+      case "inlineCode":
+      case "footnoteReference":
+      case "image":
+      case "break":
+        builder.append(node);
+        break;
+      default:
+        break;
+    }
+  });
+
+  return builder.finish() as GhInlineNode[];
+};
+
+const pairCell = (cell: TableCellNode): GhTableCell => ({
+  type: "tableCell",
+  children: pairInlines(cell.children),
+});
+
+const withoutLeadingComments = (nodes: BlockNode[]): BlockNode[] =>
+  nodes.flatMap((node): BlockNode[] => {
+    const rest =
+      node.type === "html" ? textAfterLeadingComments(node.value) : null;
+    return rest === null
+      ? [node]
+      : withoutLeadingComments(
+          parseMarkdown(rest, { allowHtml: true }).children,
+        );
+  });
+
+const pairBlocks = (
+  nodes: BlockNode[],
+  context: PairContext,
+): GhBlockNode[] => {
+  const builder = createBuilder(true);
+
+  withoutLeadingComments(nodes).forEach((node) => {
+    switch (node.type) {
+      case "html":
+        builder.html(node.value);
+        break;
+      case "paragraph":
+        builder.append({
+          type: "paragraph",
+          children: pairInlines(node.children),
+        });
+        break;
+      case "heading":
+        builder.append({
+          type: "heading",
+          depth: node.depth,
+          children: pairInlines(node.children),
+        });
+        break;
+      case "code":
+      case "thematicBreak":
+        builder.append(node);
+        break;
+      case "list": {
+        const items = node.items.map((item): GhListItem => {
+          // The marker comes before the item's content, so number it first.
+          const taskIndex =
+            item.checked === undefined ? undefined : context.taskCount++;
+          if (taskIndex !== undefined) context.tasks.push(taskSignature(item));
+          return {
+            type: "listItem",
+            checked: item.checked,
+            taskIndex,
+            children: pairBlocks(item.children, context),
+          };
+        });
+        builder.append({
+          type: "list",
+          ordered: node.ordered,
+          start: node.start,
+          items,
+        });
+        break;
+      }
+      case "blockquote":
+        builder.append({
+          type: "blockquote",
+          children: pairBlocks(node.children, context),
+        });
+        break;
+      case "callout":
+        builder.append({
+          type: "callout",
+          kind: node.kind,
+          title: node.title,
+          children: pairBlocks(node.children, context),
+        });
+        break;
+      case "table":
+        builder.append({
+          type: "table",
+          header: node.header.map(pairCell),
+          rows: node.rows.map((row) => row.map(pairCell)),
+        });
+        break;
+      case "footnotes":
+      case "component":
+      default:
+        break;
+    }
+  });
+
+  return builder.finish();
+};
+
+export const pairGithubHtml = (nodes: BlockNode[]): PairedDocument => {
+  const context: PairContext = { taskCount: 0, tasks: [] };
+  const children = pairBlocks(nodes, context);
+  return { children, taskCount: context.taskCount, tasks: context.tasks };
+};

package/src/markdown-github/safe-url.ts

@@ -0,0 +1,15 @@
+/**
+ * GitHub's sanitizer drops a `javascript:` href and an `src` it cannot load; so
+ * does this. A relative url is refused too: it was relative to a repository
+ * this renderer does not know.
+ */
+export const isSafeUrl = (
+  value: string,
+  protocols: readonly string[] = ["http:", "https:", "mailto:"],
+): boolean => {
+  try {
+    return protocols.includes(new URL(value).protocol);
+  } catch {
+    return false;
+  }
+};

package/src/markdown-github/table-columns.ts

@@ -0,0 +1,23 @@
+const MIN_COLUMN_WEIGHT = 3;
+const MAX_COLUMN_WEIGHT = 40;
+
+const longestLineLength = (text: string): number =>
+  Math.max(...text.split("\n").map((line) => line.trim().length));
+
+/**
+ * The flex-grow of each column, from the plain text of every row (header
+ * included). Rows are separate flex rows, so a measured width cannot be shared
+ * between them: a weight per column keeps them aligned. It is the column's
+ * longest line, capped so a column of prose cannot squeeze an identifier, and
+ * floored so an empty column stays readable.
+ */
+export function columnWeights(rows: readonly (readonly string[])[]): number[] {
+  const columnCount = Math.max(0, ...rows.map((row) => row.length));
+  return Array.from({ length: columnCount }, (_, column) => {
+    const widest = Math.max(
+      0,
+      ...rows.map((row) => longestLineLength(row[column] ?? "")),
+    );
+    return Math.min(MAX_COLUMN_WEIGHT, Math.max(MIN_COLUMN_WEIGHT, widest));
+  });
+}

package/src/markdown-github/toggle-task.ts

@@ -0,0 +1,164 @@
+import type { BlockNode, InlineNode, ListItemNode } from "@tanstack/markdown";
+import { parseMarkdown } from "@tanstack/markdown/parser";
+
+/**
+ * The source with the `taskIndex`th task-list marker (`[ ]`, `[x]`, `[X]`
+ * after a list bullet) flipped, or `null` when it cannot be done safely.
+ *
+ * The parser reports which list items are tasks but not where they are in the
+ * source, so the markers are found again by scanning lines. A scan and a parser
+ * can disagree (an indented code block, an html block, a lazy quote), and two
+ * disagreements can cancel out in a count. Flipping the wrong box in someone's
+ * pull request description is worse than flipping none: each marker found must
+ * match the parser's task of the same rank, its state and its first line of
+ * text (`expected`), else the boxes stay read-only.
+ */
+
+const fence = /^[\s>]*(`{3,}|~{3,})/;
+const task = /^([\s>]*(?:(?:[*+-]|\d{1,9}[.)])[ \t]+)+\[)([ x])(\](?:\s|$))/i;
+/** CommonMark html blocks of kinds 6 and 7, which end at a blank line */
+const htmlBlockStart = /^ {0,3}<\/?[a-z][\w-]*(?:\s|\/?>|$)/i;
+
+export interface TaskSignature {
+  checked: boolean;
+  /** the plain text of the item's first line */
+  text: string;
+}
+
+const plainText = (nodes: readonly InlineNode[]): string =>
+  nodes
+    .map((node): string => {
+      switch (node.type) {
+        case "text":
+        case "inlineCode":
+          return node.value;
+        case "image":
+          return node.alt;
+        case "break":
+          return "\n";
+        case "emphasis":
+        case "link":
+        case "strike":
+        case "strong":
+          return plainText(node.children);
+        case "inlineHtml":
+        case "footnoteReference":
+          return "";
+        default:
+          return node satisfies never;
+      }
+    })
+    .join("");
+
+const firstLineOf = (blocks: readonly BlockNode[]): string => {
+  const first = blocks[0];
+  const text =
+    first?.type === "paragraph" || first?.type === "heading"
+      ? plainText(first.children)
+      : "";
+  return (text.split("\n")[0] ?? "").replaceAll(/\s+/g, " ").trim();
+};
+
+export const taskSignature = (item: ListItemNode): TaskSignature => ({
+  checked: item.checked === true,
+  text: firstLineOf(item.children),
+});
+
+const lineSignature = (line: string): TaskSignature | null => {
+  const match = task.exec(line);
+  if (match === null) return null;
+  const rest = line.slice(match[0].length);
+  return {
+    checked: match[2] !== " ",
+    text: firstLineOf(parseMarkdown(rest, { allowHtml: true }).children),
+  };
+};
+
+interface OpenFence {
+  char: string;
+  length: number;
+}
+
+const closesFence = (line: string, open: OpenFence): boolean => {
+  const match = fence.exec(line);
+  const marker = match?.[1];
+  return (
+    marker !== undefined &&
+    marker.startsWith(open.char) &&
+    marker.length >= open.length &&
+    line.slice(match?.[0].length).trim() === ""
+  );
+};
+
+const opensFence = (line: string): OpenFence | null => {
+  const match = fence.exec(line);
+  const marker = match?.[1];
+  if (marker === undefined) return null;
+  // A backtick fence's info string cannot hold a backtick: that is inline code.
+  if (marker.startsWith("`") && line.slice(match?.[0].length).includes("`")) {
+    return null;
+  }
+  return { char: marker.charAt(0), length: marker.length };
+};
+
+const scanMarkers = (lines: readonly string[]): number[] => {
+  const markers: number[] = [];
+  let open: OpenFence | null = null;
+  let inHtmlBlock = false;
+
+  lines.forEach((line, index) => {
+    if (open) {
+      if (closesFence(line, open)) open = null;
+      return;
+    }
+    if (inHtmlBlock) {
+      inHtmlBlock = line.trim() !== "";
+      return;
+    }
+    open = opensFence(line);
+    if (open) return;
+    if (htmlBlockStart.test(line)) {
+      inHtmlBlock = true;
+      return;
+    }
+    if (task.test(line)) markers.push(index);
+  });
+  return markers;
+};
+
+const matchesParser = (
+  lines: readonly string[],
+  markers: readonly number[],
+  expected: readonly TaskSignature[],
+): boolean =>
+  markers.length === expected.length &&
+  markers.every((lineIndex, rank) => {
+    const found = lineSignature(lines[lineIndex]?.replace(/\r$/, "") ?? "");
+    const wanted = expected[rank];
+    return (
+      found !== null &&
+      wanted !== undefined &&
+      found.checked === wanted.checked &&
+      found.text === wanted.text
+    );
+  });
+
+export const toggleTask = (
+  source: string,
+  taskIndex: number,
+  expected?: readonly TaskSignature[],
+): string | null => {
+  const lines = source.split("\n");
+  const markers = scanMarkers(lines);
+
+  if (expected !== undefined && !matchesParser(lines, markers, expected)) {
+    return null;
+  }
+  const lineIndex = markers[taskIndex];
+  if (lineIndex === undefined) return null;
+
+  const line = lines[lineIndex] ?? "";
+  const checked = task.exec(line)?.[2] !== " ";
+  lines[lineIndex] = line.replace(task, checked ? "$1 $3" : "$1x$3");
+  return lines.join("\n");
+};

package/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-native-css/types" />

package/src/prStatus.ts

@@ -0,0 +1,90 @@
+import type {
+  PrReviewDecision,
+  PrState,
+  ReviewflowBoardPr,
+} from "@reviewflow/sdk";
+import type { Accent } from "alouette";
+
+/**
+ * What a reader is told about a pull request in one word or two: an open pull
+ * request is only interesting for where its review stands, so state and review
+ * decision collapse into one status.
+ */
+export type PrStatus =
+  | "approved"
+  | "changesRequested"
+  | "closed"
+  | "draft"
+  | "merged"
+  | "noReviewers"
+  | "waitingReview";
+
+/** A closed or merged pull request keeps its own status whatever the last review said. */
+export const prStatus = ({
+  state,
+  reviewDecision,
+}: {
+  state: PrState;
+  reviewDecision: PrReviewDecision;
+}): PrStatus => {
+  if (state !== "open") return state;
+  switch (reviewDecision) {
+    case "approved": {
+      return "approved";
+    }
+    case "changesRequested": {
+      return "changesRequested";
+    }
+    case "reviewRequired": {
+      return "waitingReview";
+    }
+    case null: {
+      return "noReviewers";
+    }
+    default: {
+      return reviewDecision satisfies never;
+    }
+  }
+};
+
+export const prStatusLabels: Record<PrStatus, string> = {
+  approved: "approved",
+  changesRequested: "changes requested",
+  closed: "closed",
+  draft: "draft",
+  merged: "merged",
+  noReviewers: "no reviewers",
+  waitingReview: "waiting review",
+};
+
+/** A merged pull request takes the brand accent; an app with its own accent for it passes one instead. */
+export const prStatusAccents: Record<PrStatus, Accent | undefined> = {
+  approved: "success",
+  changesRequested: "danger",
+  closed: "danger",
+  draft: undefined,
+  merged: "brand",
+  noReviewers: "warning",
+  waitingReview: "info",
+};
+
+const reviewflowReviewDecisions = {
+  approved: "approved",
+  changesRequested: "changesRequested",
+  requested: "reviewRequired",
+  none: null,
+} as const;
+
+/** null when reviewflow does not know enough to say */
+export const reviewflowPrStatus = ({
+  state,
+  reviewState,
+}: Pick<ReviewflowBoardPr, "reviewState" | "state">): PrStatus | null => {
+  if (state === null) return null;
+  if (state !== "open") return state;
+  if (reviewState === null) return null;
+  return prStatus({
+    state,
+    reviewDecision: reviewflowReviewDecisions[reviewState],
+  });
+};