@reviewflow/ui 6.22.2 → 6.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewflow/ui",
-  "version": "6.22.2",
+  "version": "6.23.0",
   "description": "react-native pull request screen components. Consumed as SOURCES (no build): exports resolve `default` to ./src/index.ts, which metro transforms like the app's own files; the consuming app's css must @source this package's src so tailwind keeps its classes.",
   "keywords": [
     "alouette",
@@ -68,7 +68,7 @@
     "@lezer/highlight": "1.2.3",
     "@lezer/markdown": "1.7.2",
     "@pierre/diffs": "1.5.2",
-    "@reviewflow/sdk": "6.22.0",
+    "@reviewflow/sdk": "6.23.0",
     "@tanstack/markdown": "0.0.13",
     "alouette-icons": "12.0.0",
     "gemoji": "8.1.0",

package/src/board/pull-request-row.tsx

@@ -1,4 +1,16 @@
-import type { PullRequestRef, ReviewflowBoardPr } from "@reviewflow/sdk";
+import {
+  formatPrChanges,
+  reviewflowPrChangesRequested,
+  reviewflowPrFailure,
+  reviewflowPrFlowDate,
+  reviewflowPrOwners,
+  reviewflowPrProgress,
+} from "@reviewflow/sdk";
+import type {
+  PullRequestRef,
+  ReviewflowBoardPr,
+  ReviewflowRowContext,
+} from "@reviewflow/sdk";
 import {
   AccentScope,
   ExternalLinkText,
@@ -11,15 +23,6 @@ import type { ReactNode } from "react";
 import type { GestureResponderEvent } from "react-native";
 import { linkInRow } from "../components/link-in-row.ts";
 import { isSafeUrl } from "../markdown-github/safe-url.ts";
-import {
-  formatPrChanges,
-  reviewflowPrChangesRequested,
-  reviewflowPrFailure,
-  reviewflowPrFlowDate,
-  reviewflowPrOwners,
-  reviewflowPrProgress,
-} from "./facts.ts";
-import type { ReviewflowRowContext } from "./facts.ts";
 
 /**
  * Following a link from inside the pressable row must not also press the row.

package/src/components/pull-request-files.tsx

@@ -6,6 +6,7 @@ import type {
   PullRequestThread,
   PullRequestViewerLastReview,
 } from "@reviewflow/sdk";
+import { formatRelativeDate } from "@reviewflow/sdk";
 import {
   Button,
   Code,
@@ -27,7 +28,6 @@ import { useMemo, useState } from "react";
 import { usePullRequestDataSource } from "../dataSource.ts";
 import { usePullRequestReviewDraft } from "../services/PullRequestReviewDraftProvider.tsx";
 import { errorToMessage } from "../services/errorToMessage.ts";
-import { formatRelativeDate } from "../services/formatRelativeDate.ts";
 import { isViewerAuthor } from "../services/isViewerAuthor.ts";
 import { PullRequestReviewButton } from "./pull-request-actions-review.tsx";
 import type {

package/src/components/pull-request-panel.tsx

@@ -1,4 +1,5 @@
 import type {
+  PrStatus,
   PullRequestCandidatesResponse,
   PullRequestDetail,
   PullRequestDetailResponse,
@@ -6,6 +7,7 @@ import type {
   PullRequestReviewState,
   PullRequestSummary,
 } from "@reviewflow/sdk";
+import { prStatus, prStatusLabels, reviewflowPrStatus } from "@reviewflow/sdk";
 import type { Accent } from "alouette";
 import {
   AccentScope,
@@ -33,13 +35,7 @@ import { ChatCircleDotsRegularIcon } from "alouette-icons/phosphor-icons/ChatCir
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { usePullRequestDataSource } from "../dataSource.ts";
-import type { PrStatus } from "../prStatus.ts";
-import {
-  prStatus,
-  prStatusAccents,
-  prStatusLabels,
-  reviewflowPrStatus,
-} from "../prStatus.ts";
+import { prStatusAccents } from "../prStatus.ts";
 import { emojify } from "../services/emojify.ts";
 import { errorToMessage } from "../services/errorToMessage.ts";
 import { formatDataAge } from "../services/formatDataAge.ts";

package/src/editor/markdown-editor.css

@@ -2,7 +2,8 @@
  * The markdown editor's look, ported from vscode-extension-markdown-beautiful-editor
  * (src/styles/md-inline.css, md-block.css, md-alerts.css, code-tokens.css) with
  * every --vscode-* colour rewritten as an alouette token, so the light and dark
- * themes reach it through the same .light/.dark ancestor as the rest of the app.
+ * themes reach it through the same .light/.dark/.system ancestor as the rest of
+ * the app.
  *
  * Everything is scoped under .markdown-editor: the md-* classes are generic
  * names and must not reach anything else on the page.
@@ -63,6 +64,21 @@
   --md-tok-invalid: #f85149;
 }
 
+/* the "system" preference never sets .dark: the palette resolves it with this
+   media query, so the dark tokens are repeated here */
+@media (prefers-color-scheme: dark) {
+  .system .markdown-editor {
+    --md-tok-comment: #8b949e;
+    --md-tok-keyword: #ff7b72;
+    --md-tok-string: #a5d6ff;
+    --md-tok-constant: #79c0ff;
+    --md-tok-property: #79c0ff;
+    --md-tok-type: #7ee787;
+    --md-tok-function: #d2a8ff;
+    --md-tok-invalid: #f85149;
+  }
+}
+
 .markdown-editor:hover {
   border-color: var(--color-interactive-outlined-hover);
 }

package/src/index.ts

@@ -59,8 +59,7 @@ export { PullRequestSuggestionBatchProvider } from "./services/PullRequestSugges
 export { emojify } from "./services/emojify.ts";
 export { errorToMessage } from "./services/errorToMessage.ts";
 export { isViewerAuthor } from "./services/isViewerAuthor.ts";
-export type { PrStatus } from "./prStatus.ts";
-export { prStatus, prStatusAccents, prStatusLabels } from "./prStatus.ts";
+export { prStatusAccents } from "./prStatus.ts";
 export * from "./board/index.ts";
 export { MarkdownEditor } from "./editor/markdown-editor.tsx";
 export type { MarkdownEditorFieldProps } from "./editor/markdown-editor.tsx";

package/src/prStatus.ts

@@ -1,62 +1,6 @@
-import type {
-  PrReviewDecision,
-  PrState,
-  ReviewflowBoardPr,
-} from "@reviewflow/sdk";
+import type { PrStatus } 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",
@@ -67,24 +11,3 @@ export const prStatusAccents: Record<PrStatus, Accent | undefined> = {
   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],
-  });
-};

package/src/board/facts.ts

@@ -1,183 +0,0 @@
-import type { ReviewflowBoardPr, ReviewflowPrChanges } from "@reviewflow/sdk";
-import type { FormatRelativeDateOptions } from "../services/formatRelativeDate.ts";
-import { formatRelativeDate } from "../services/formatRelativeDate.ts";
-
-/**
- * What reviewflow's own board row says about a pull request, in its wording so
- * the two boards read the same. The status line comes in three parts by how
- * loudly each is shown: what blocks the merge, changes requested, the rest.
- */
-
-export const maxFailedCheckNames = 9;
-
-/** Where a row is shown, which decides what it leaves to its bucket's title. */
-export interface ReviewflowRowContext {
-  bucketKey: string;
-  groupKey: string;
-  /** the token's login, named "you" */
-  viewer: string | null;
-}
-
-/** the buckets whose title already says whether the checks pass */
-const bucketsSilentOnPassedChecks = new Set(["changes-requested", "drafts"]);
-/** the bucket whose title already says every reviewer was asked again */
-const reRequestedBucket = "re-requested-reviews";
-/** someone else's pull request requests a review, the operator's awaits one */
-const requestingAttentionGroup = "requesting-attention";
-
-const counted = (count: number, one: string, many: string): string =>
-  `${String(count)} ${count === 1 ? one : many}`;
-
-const people = (logins: string[], viewer: string | null): string =>
-  logins.map((login) => (login === viewer ? "you" : `@${login}`)).join(", ");
-
-const failedChecksText = ({
-  checksConclusion,
-  failedChecks,
-}: Pick<ReviewflowBoardPr, "checksConclusion" | "failedChecks">):
-  | string
-  | null => {
-  if (failedChecks.length === 0) {
-    return checksConclusion === "failed" ? "checks failed" : null;
-  }
-  const names = failedChecks.slice(0, maxFailedCheckNames).join(", ");
-  const remaining = failedChecks.length - maxFailedCheckNames;
-  const more = remaining > 0 ? ` +${String(remaining)}` : "";
-  return `${failedChecks.length === 1 ? "check" : "checks"} failed: ${names}${more}`;
-};
-
-/**
- * Failing checks (after reviewflow's allowed-to-fail rules, by name), a failed
- * pr lint and a merge conflict; null when nothing blocks.
- */
-export const reviewflowPrFailure = (
-  pr: Pick<
-    ReviewflowBoardPr,
-    "checksConclusion" | "failedChecks" | "lintFailed" | "mergeable"
-  >,
-): string | null => {
-  const parts = [
-    failedChecksText(pr),
-    pr.lintFailed ? "pr lint failed" : null,
-    pr.mergeable === "conflicting" ? "conflicts" : null,
-  ].filter((part) => part !== null);
-  return parts.length === 0 ? null : parts.join(" · ");
-};
-
-export const reviewflowPrChangesRequested = (
-  { changesRequestedBy }: Pick<ReviewflowBoardPr, "changesRequestedBy">,
-  viewer: string | null,
-): string | null =>
-  changesRequestedBy.length === 0
-    ? null
-    : `changes requested by ${people(changesRequestedBy, viewer)}`;
-
-const checksProgressText = (
-  {
-    checksConclusion,
-    checksRunning,
-  }: Pick<ReviewflowBoardPr, "checksConclusion" | "checksRunning">,
-  bucketKey: string,
-): string | null => {
-  if (checksRunning > 0) {
-    return `${counted(checksRunning, "check", "checks")} running`;
-  }
-  return checksConclusion === "passed" &&
-    !bucketsSilentOnPassedChecks.has(bucketKey)
-    ? "checks passed"
-    : null;
-};
-
-const awaitedText = (
-  {
-    requestedReviewers,
-    reRequestedReviewers,
-    requestedTeams,
-  }: Pick<
-    ReviewflowBoardPr,
-    "requestedReviewers" | "requestedTeams" | "reRequestedReviewers"
-  >,
-  { bucketKey, groupKey, viewer }: ReviewflowRowContext,
-): string | null => {
-  const reviewers = [
-    ...requestedReviewers,
-    ...(bucketKey === reRequestedBucket ? [] : reRequestedReviewers),
-  ];
-  if (reviewers.length === 0 && requestedTeams.length === 0) return null;
-  const verb = groupKey === requestingAttentionGroup ? "requested" : "awaiting";
-  const awaited = [
-    ...(reviewers.length === 0 ? [] : [people(reviewers, viewer)]),
-    ...requestedTeams.map((team) => `#${team}`),
-  ];
-  return `${verb} ${awaited.join(", ")}`;
-};
-
-/** running or passed checks, approvals, open threads, awaited reviewers */
-export const reviewflowPrProgress = (
-  pr: Pick<
-    ReviewflowBoardPr,
-    | "approvedBy"
-    | "checksConclusion"
-    | "checksRunning"
-    | "requestedReviewers"
-    | "requestedTeams"
-    | "reRequestedReviewers"
-    | "unresolvedThreads"
-  >,
-  context: ReviewflowRowContext,
-): string | null => {
-  const parts = [
-    checksProgressText(pr, context.bucketKey),
-    pr.approvedBy.length === 0
-      ? null
-      : `approved by ${people(pr.approvedBy, context.viewer)}`,
-    pr.unresolvedThreads
-      ? counted(pr.unresolvedThreads, "unresolved thread", "unresolved threads")
-      : null,
-    awaitedText(pr, context),
-  ].filter((part) => part !== null);
-  return parts.length === 0 ? null : parts.join(" · ");
-};
-
-/**
- * "by @author", "assigned to @a", or both. An author who is their own only
- * assignee is a byline, not an assignment; a pull request whose only person is
- * the viewer names nobody.
- */
-export const reviewflowPrOwners = (
-  { author, assignees }: Pick<ReviewflowBoardPr, "assignees" | "author">,
-  viewer: string | null,
-): string | null => {
-  const named = [...(author === null ? [] : [author]), ...assignees];
-  if (named.length === 0) return null;
-  if (viewer !== null && named.every((login) => login === viewer)) return null;
-
-  const byline = author === null ? null : `by ${people([author], viewer)}`;
-  if (assignees.length === 0) return byline;
-  const assignment = `assigned to ${people(assignees, viewer)}`;
-
-  if (author === null || !assignees.includes(author)) {
-    return byline === null ? assignment : `${byline} · ${assignment}`;
-  }
-  // naming every assignee already names the author among them
-  return assignees.length === 1 ? byline : assignment;
-};
-
-export const reviewflowPrFlowDate = (
-  { openedAt, approvedAt }: Pick<ReviewflowBoardPr, "approvedAt" | "openedAt">,
-  options?: FormatRelativeDateOptions,
-): string | null => {
-  if (approvedAt !== null) {
-    return `approved ${formatRelativeDate(approvedAt, options)}`;
-  }
-  return openedAt === null
-    ? null
-    : `opened ${formatRelativeDate(openedAt, options)}`;
-};
-
-export const formatPrChanges = ({
-  changedFiles,
-  additions,
-  deletions,
-}: ReviewflowPrChanges): string =>
-  `${counted(changedFiles, "file", "files")} +${String(additions)} −${String(deletions)}`;

package/src/services/formatRelativeDate.ts

@@ -1,56 +0,0 @@
-/**
- * A past date the way the operator says it: "today 14:32", "yesterday 09:10",
- * "last Monday 16:05", then "12 Oct, 14:32" — and the year once it is not this
- * one. The boards read dates to answer "is this from this morning or last
- * week", which a full timestamp makes them work out.
- *
- * Calendar days in the machine's own time zone, not 24-hour spans: 23:50
- * yesterday is "yesterday" at 00:10. The time and the month follow the
- * locale; the words are the app's, which is in English.
- */
-
-const dayMs = 24 * 60 * 60 * 1000;
-
-/** how many days back the weekday alone still names the day without doubt */
-const weekdayReach = 6;
-
-const startOfDay = (date: Date): number =>
-  new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
-
-/** Whole calendar days from `date` to `now`; negative for a future date. */
-const calendarDaysAgo = (date: Date, now: Date): number =>
-  Math.round((startOfDay(now) - startOfDay(date)) / dayMs);
-
-export interface FormatRelativeDateOptions {
-  now?: Date;
-  /** a BCP 47 tag; the runtime's own when absent */
-  locale?: string;
-}
-
-export const formatRelativeDate = (
-  value: Date | string,
-  { now = new Date(), locale }: FormatRelativeDateOptions = {},
-): string => {
-  const date = typeof value === "string" ? new Date(value) : value;
-  if (Number.isNaN(date.getTime())) return "unknown date";
-
-  const time = date.toLocaleTimeString(locale, {
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-  const days = calendarDaysAgo(date, now);
-
-  if (days === 0) return `today ${time}`;
-  if (days === 1) return `yesterday ${time}`;
-  if (days > 1 && days <= weekdayReach) {
-    const weekday = date.toLocaleDateString("en", { weekday: "long" });
-    return `last ${weekday} ${time}`;
-  }
-
-  const day = date.toLocaleDateString(locale, {
-    day: "numeric",
-    month: "short",
-    ...(date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }),
-  });
-  return `${day}, ${time}`;
-};