@reviewflow/ui 0.0.0-stage → 6.21.0

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

@@ -0,0 +1,239 @@
+import type { PullRequestRef, ReviewflowBoardPr } from "@reviewflow/sdk";
+import type { Accent, SVGIconElement } from "alouette";
+import { EmptyState, IconButton, Text, View, WarningMessage } from "alouette";
+import { ArrowsClockwiseRegularIcon } from "alouette-icons/phosphor-icons/ArrowsClockwise";
+import { ConfettiRegularIcon } from "alouette-icons/phosphor-icons/Confetti";
+import { PlugsRegularIcon } from "alouette-icons/phosphor-icons/Plugs";
+import { TrayRegularIcon } from "alouette-icons/phosphor-icons/Tray";
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { errorToMessage } from "../services/errorToMessage.ts";
+import { formatDataAge } from "../services/formatDataAge.ts";
+import { BoardBucketSection } from "./bucket-section.tsx";
+import { useBoardDataSource } from "./dataSource.ts";
+import type { BoardRowInfo } from "./pull-request-row.tsx";
+
+/**
+ * Pull requests the app lists under reviewflow's own buckets, in the board's
+ * layout and row style: those no bucket carries, or all of them while no
+ * reviewflow board is stored. A section without rows is not rendered.
+ */
+export interface PullRequestBoardExtraSection {
+  /** Stable across renders; it is the `bucketKey` {@link BoardRowInfo} reports for the section's rows. */
+  key: string;
+  title: string;
+  rows: ReviewflowBoardPr[];
+  /** The title's glyph; a generic pull request glyph without it. */
+  icon?: SVGIconElement;
+  /** The title's accent; none without it. */
+  accent?: Accent;
+}
+
+/** The `groupKey` {@link BoardRowInfo} reports for the rows of an extra section. */
+export const extraSectionGroupKey = "extra";
+
+export interface PullRequestBoardProps {
+  /** Pressing a row; the app routes to its pull request screen. */
+  onOpenPullRequest: (ref: PullRequestRef) => void;
+  /** Shown when no reviewflow token is configured: the app's "connect reviewflow" action. */
+  renderConnect?: () => ReactNode;
+  /** Extra content under each row's status line, for what an app knows that reviewflow does not. */
+  renderRowExtra?: (row: BoardRowInfo) => ReactNode;
+  /**
+   * Sections rendered after reviewflow's buckets with the same rows, so
+   * `renderRowExtra` and `onOpenPullRequest` apply to them. While any has rows,
+   * the board shows them instead of its loading, "No board yet" and "Nothing to
+   * review" states, so it also renders with no reviewflow board at all; the
+   * "Connect reviewflow" prompt and a read error stay above them.
+   */
+  extraSections?: PullRequestBoardExtraSection[];
+  /** The screen's own actions, at the end of the board's heading whatever the board's state. */
+  actions?: ReactNode;
+  /** What the refresh button says it does; `Refresh from reviewflow` by default. */
+  refreshLabel?: string;
+}
+
+function BoardLoading(): ReactNode {
+  return (
+    <View role="status" aria-label="Loading pull requests" className="gap-xs">
+      <View className="skeleton h-[22px] w-[200px]" />
+      <View className="skeleton h-[86px]" />
+      <View className="skeleton h-[86px]" />
+      <View className="skeleton h-[86px]" />
+    </View>
+  );
+}
+
+/**
+ * reviewflow's buckets as it sends them — order, titles, totals, a pull request
+ * in two buckets shown in both — under their groups, side by side from `lg`.
+ * Reads through the {@link BoardDataSource} of its provider and renders no
+ * frame: the app's screen owns the page column and the scrolling.
+ */
+export function PullRequestBoard({
+  onOpenPullRequest,
+  renderConnect,
+  renderRowExtra,
+  extraSections,
+  actions,
+  refreshLabel = "Refresh from reviewflow",
+}: PullRequestBoardProps): ReactNode {
+  const source = useBoardDataSource();
+  const board = source.useBoard();
+  const status = source.useReviewflowStatus();
+  const [refreshing, setRefreshing] = useState(false);
+
+  const notConfigured = status.value?.configured === false;
+  const data = board.value?.board ?? null;
+  const busy = refreshing || board.reading;
+
+  const refresh = (): void => {
+    setRefreshing(true);
+    source.refresh().finally(() => {
+      setRefreshing(false);
+    });
+  };
+
+  const groups =
+    data?.groups
+      .map((group) => ({
+        ...group,
+        buckets: group.buckets.filter((bucket) => bucket.prs.length > 0),
+      }))
+      .filter((group) => group.buckets.length > 0) ?? [];
+
+  const extras = (extraSections ?? []).filter(
+    (section) => section.rows.length > 0,
+  );
+  const extrasBody =
+    extras.length === 0 ? null : (
+      <View className="gap-l">
+        {extras.map((section) => (
+          <BoardBucketSection
+            key={section.key}
+            bucket={{
+              key: section.key,
+              title: section.title,
+              total: section.rows.length,
+              prs: section.rows,
+            }}
+            groupKey={extraSectionGroupKey}
+            icon={section.icon}
+            accent={section.accent}
+            viewer={board.value?.viewer ?? null}
+            renderRowExtra={renderRowExtra}
+            onOpenPullRequest={onOpenPullRequest}
+          />
+        ))}
+      </View>
+    );
+
+  const body = ((): ReactNode => {
+    if (notConfigured) {
+      return (
+        <View className="gap-xl">
+          <View className="items-center gap-m">
+            <EmptyState icon={<PlugsRegularIcon />} title="Connect reviewflow">
+              Your pull requests are listed here once a reviewflow token is
+              saved.
+            </EmptyState>
+            {renderConnect?.()}
+          </View>
+          {extrasBody}
+        </View>
+      );
+    }
+    if (extrasBody !== null && groups.length === 0) return extrasBody;
+    if (board.value === null) {
+      if (board.error !== null) return null;
+      return <BoardLoading />;
+    }
+    if (data === null) {
+      return (
+        <EmptyState icon={<TrayRegularIcon />} title="No board yet">
+          reviewflow has not been read yet: refresh to read it.
+        </EmptyState>
+      );
+    }
+    if (groups.length === 0) {
+      return (
+        <EmptyState icon={<ConfettiRegularIcon />} title="Nothing to review">
+          Nothing is waiting for you, and none of your pull requests are in
+          progress.
+        </EmptyState>
+      );
+    }
+    const buckets = (
+      <View className="gap-xl lg:flex-row lg:items-start">
+        {groups.map((group) => (
+          <View key={group.key} className="gap-m lg:min-w-0 lg:flex-1">
+            <Text
+              role="heading"
+              aria-level={2}
+              className="font-heading-extrabold text-xl"
+            >
+              {group.title}
+            </Text>
+            <View className="gap-l">
+              {group.buckets.map((bucket) => (
+                <BoardBucketSection
+                  key={bucket.key}
+                  bucket={bucket}
+                  groupKey={group.key}
+                  viewer={board.value?.viewer ?? null}
+                  renderRowExtra={renderRowExtra}
+                  onOpenPullRequest={onOpenPullRequest}
+                />
+              ))}
+            </View>
+          </View>
+        ))}
+      </View>
+    );
+    return extrasBody === null ? (
+      buckets
+    ) : (
+      <View className="gap-xl">
+        {buckets}
+        {extrasBody}
+      </View>
+    );
+  })();
+
+  return (
+    <View className="gap-l">
+      <View className="flex-row flex-wrap items-center gap-m">
+        <Text
+          role="heading"
+          aria-level={1}
+          className="min-w-0 flex-1 font-heading-extrabold text-3xl xl:text-4xl"
+        >
+          Pull requests
+        </Text>
+        <View className="flex-row items-center gap-xs">
+          {notConfigured || data === null ? null : (
+            <Text className="text-xs text-muted">
+              {`${board.cached === true ? "Cached, updated" : "Updated"} ${formatDataAge(data.fetchedAt)}`}
+            </Text>
+          )}
+          {notConfigured ? null : (
+            <IconButton
+              icon={<ArrowsClockwiseRegularIcon />}
+              size="sm"
+              variant="soft"
+              accent="neutral"
+              aria-label={refreshLabel}
+              disabledReason={busy ? "Refreshing…" : null}
+              onPress={refresh}
+            />
+          )}
+          {actions}
+        </View>
+      </View>
+      {notConfigured || board.error === null ? null : (
+        <WarningMessage>{errorToMessage(board.error)}</WarningMessage>
+      )}
+      {body}
+    </View>
+  );
+}

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

@@ -0,0 +1,181 @@
+import type { PullRequestRef, ReviewflowBoardPr } from "@reviewflow/sdk";
+import {
+  AccentScope,
+  ExternalLinkText,
+  PressableListItem,
+  Text,
+  View,
+} from "alouette";
+import { Fragment } from "react";
+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.
+ */
+const stopRowPress = (event: GestureResponderEvent): void => {
+  event.stopPropagation();
+};
+
+const metaSeparator = <Text className="text-xs text-muted">·</Text>;
+
+const statusSeparator = <Text className="text-sm text-muted">·</Text>;
+
+/** What a row's extra slot is told about the row it sits in. */
+export interface BoardRowInfo {
+  pr: ReviewflowBoardPr;
+  bucketKey: string;
+  groupKey: string;
+}
+
+export interface PullRequestRowProps {
+  row: BoardRowInfo;
+  viewer: string | null;
+  onOpenPullRequest: (ref: PullRequestRef) => void;
+  /** Extra content under the status line (an app's own badges, say). */
+  renderRowExtra?: (row: BoardRowInfo) => ReactNode;
+}
+
+/**
+ * `owner/repo#n`, reviewflow's status links, the size of the change and the
+ * flow date. No GitHub link: the row opens the app's pull request screen,
+ * which carries Open on GitHub itself.
+ */
+function MetaLine({ pr }: { pr: ReviewflowBoardPr }): ReactNode {
+  const flowDate = reviewflowPrFlowDate(pr);
+
+  return (
+    <View className="flex-row flex-wrap items-center gap-xs">
+      <Text className="font-mono text-xs text-muted">
+        {`${pr.ownerRepo}#${String(pr.number)}`}
+      </Text>
+      {pr.statusLinks.map((link) => (
+        <Fragment key={link.name}>
+          {metaSeparator}
+          {isSafeUrl(link.url) ? (
+            <ExternalLinkText
+              size="sm"
+              icon={null}
+              href={link.url}
+              text={link.label}
+              aria-label={`Open ${link.label}`}
+              className={linkInRow}
+              onPress={stopRowPress}
+            />
+          ) : (
+            <Text className="text-xs text-muted">{link.label}</Text>
+          )}
+        </Fragment>
+      ))}
+      {pr.changes === null ? null : (
+        <>
+          {metaSeparator}
+          <Text className="text-xs text-muted">
+            {formatPrChanges(pr.changes)}
+          </Text>
+        </>
+      )}
+      {flowDate === null ? null : (
+        <>
+          {metaSeparator}
+          <Text className="text-xs text-muted">{flowDate}</Text>
+        </>
+      )}
+    </View>
+  );
+}
+
+/**
+ * reviewflow's own status line: what blocks the merge in danger, changes
+ * requested in warning, the rest muted. Absent when reviewflow has nothing to
+ * say, so a quiet pull request keeps a short card.
+ */
+function StatusLine({
+  pr,
+  context,
+}: {
+  pr: ReviewflowBoardPr;
+  context: ReviewflowRowContext;
+}): ReactNode {
+  const failure = reviewflowPrFailure(pr);
+  const changesRequested = reviewflowPrChangesRequested(pr, context.viewer);
+  const progress = reviewflowPrProgress(pr, context);
+  if (failure === null && changesRequested === null && progress === null) {
+    return null;
+  }
+
+  return (
+    <View className="flex-row flex-wrap items-baseline gap-xs">
+      {failure === null ? null : (
+        <AccentScope accent="danger">
+          <Text className="text-sm font-body-bold text-accent">{failure}</Text>
+        </AccentScope>
+      )}
+      {failure !== null && changesRequested !== null ? statusSeparator : null}
+      {changesRequested === null ? null : (
+        <AccentScope accent="warning">
+          <Text className="text-sm text-accent">{changesRequested}</Text>
+        </AccentScope>
+      )}
+      {(failure !== null || changesRequested !== null) && progress !== null
+        ? statusSeparator
+        : null}
+      {progress === null ? null : (
+        <Text className="text-sm text-muted">{progress}</Text>
+      )}
+    </View>
+  );
+}
+
+/**
+ * One pull request of a reviewflow bucket. Pressing hands its ref to
+ * `onOpenPullRequest`; the links of its meta line do not press it.
+ */
+export function PullRequestRow({
+  row,
+  viewer,
+  onOpenPullRequest,
+  renderRowExtra,
+}: PullRequestRowProps): ReactNode {
+  const { pr } = row;
+  const context: ReviewflowRowContext = {
+    bucketKey: row.bucketKey,
+    groupKey: row.groupKey,
+    viewer,
+  };
+  const owners = reviewflowPrOwners(pr, viewer);
+  const extra = renderRowExtra?.(row);
+
+  return (
+    <PressableListItem
+      role="link"
+      aria-label={`Open ${pr.ownerRepo}#${String(pr.number)} ${pr.title}`}
+      onPress={() => {
+        onOpenPullRequest({ ownerRepo: pr.ownerRepo, number: pr.number });
+      }}
+    >
+      <View className="min-w-0 gap-xxs">
+        <MetaLine pr={pr} />
+        <View className="flex-row flex-wrap items-baseline gap-xs">
+          <Text className="font-body-bold">{pr.title}</Text>
+          {owners === null ? null : (
+            <Text className="text-sm text-muted">{owners}</Text>
+          )}
+        </View>
+        <StatusLine pr={pr} context={context} />
+        {extra === undefined || extra === null ? null : extra}
+      </View>
+    </PressableListItem>
+  );
+}

package/src/components/branch-diff/diff-themes.ts

@@ -0,0 +1,6 @@
+/**
+ * The theme list lives in `@reviewflow/sdk`, which a server can import to
+ * validate a stored setting; re-exported here so the ui's imports stay put.
+ */
+export type { DiffTheme } from "@reviewflow/sdk";
+export { diffThemeNames, diffThemeOptions, diffThemes } from "@reviewflow/sdk";

package/src/components/branch-diff/diff-worker-pool.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { DiffTheme } from "./diff-themes.ts";
+
+interface DiffWorkerPoolProps {
+  theme: DiffTheme;
+  children: ReactNode;
+}
+
+/** No web workers outside the web: the diff highlights on the main thread. */
+export function DiffWorkerPool({ children }: DiffWorkerPoolProps): ReactNode {
+  return children;
+}

package/src/components/branch-diff/diff-worker-pool.web.tsx

@@ -0,0 +1,56 @@
+import { WorkerPoolContextProvider, useWorkerPool } from "@pierre/diffs/react";
+import type { ReactNode } from "react";
+import { useEffect } from "react";
+import type { DiffTheme } from "./diff-themes.ts";
+import { diffThemeNames } from "./diff-themes.ts";
+
+const createDiffWorker = (): Worker =>
+  new Worker(new URL("./diff-worker.ts", import.meta.url));
+
+interface SyncPoolThemeProps {
+  theme: DiffTheme;
+}
+
+function SyncPoolTheme({ theme }: SyncPoolThemeProps): null {
+  const pool = useWorkerPool();
+  useEffect(() => {
+    pool
+      ?.setRenderOptions({ theme: diffThemeNames(theme) })
+      .catch((error: unknown) => {
+        console.error("diff worker pool: theme not applied", error);
+      });
+  }, [pool, theme]);
+  return null;
+}
+
+interface DiffWorkerPoolProps {
+  theme: DiffTheme;
+  children: ReactNode;
+}
+
+/**
+ * Moves shiki highlighting off the main thread, where a large diff froze the
+ * page. Metro bundles the worker itself: it rewrites a literal
+ * `new Worker(new URL(specifier, import.meta.url))` into a split bundle, so
+ * the specifier must stay a string literal in this call.
+ *
+ * The pool is a module singleton created from the first render's props, and
+ * its theme wins over the one a `FileDiff` is given: a theme picked while a
+ * diff is open has to be pushed to it. Each file still passes its own theme,
+ * which applies if the workers fail and highlighting falls back to the main
+ * thread. The last provider to unmount terminates the pool.
+ */
+export function DiffWorkerPool({
+  theme,
+  children,
+}: DiffWorkerPoolProps): ReactNode {
+  return (
+    <WorkerPoolContextProvider
+      poolOptions={{ workerFactory: createDiffWorker }}
+      highlighterOptions={{ theme: diffThemeNames(theme) }}
+    >
+      <SyncPoolTheme theme={theme} />
+      {children}
+    </WorkerPoolContextProvider>
+  );
+}

package/src/components/branch-diff/diff-worker.ts

@@ -0,0 +1,7 @@
+/**
+ * The portable entry, which inlines shiki. The plain `worker.js` imports shiki
+ * modules the diff viewers import too, and the web export moves those into a
+ * shared `__common` chunk that only the page loads: the worker then fails on
+ * its first `require`.
+ */
+import "@pierre/diffs/worker/worker-portable.js";

package/src/components/branch-diff/use-collapsed-files.ts

@@ -0,0 +1,49 @@
+import { useMemo, useState } from "react";
+
+export interface CollapsedFiles {
+  isCollapsed: (fileKey: string) => boolean;
+  toggle: (fileKey: string) => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+}
+
+interface CollapsedState {
+  allCollapsed: boolean;
+  /** the files toggled away from `allCollapsed` since it was last set */
+  toggled: ReadonlySet<string>;
+}
+
+/**
+ * Held by the modal, which has the expand-all and collapse-all buttons but
+ * not the file list: the viewer parses the patch and is loaded lazily. Stored
+ * as a default plus exceptions, so either "all" needs no list of files and a
+ * file new to a refreshed diff follows the last "all" pressed.
+ */
+export const useCollapsedFiles = (): CollapsedFiles => {
+  const [state, setState] = useState<CollapsedState>({
+    allCollapsed: false,
+    toggled: new Set(),
+  });
+
+  // stable until a press, so the memoized viewer is not rendered again for nothing
+  return useMemo(
+    () => ({
+      isCollapsed: (fileKey) =>
+        state.allCollapsed !== state.toggled.has(fileKey),
+      toggle: (fileKey) => {
+        setState((previous) => {
+          const toggled = new Set(previous.toggled);
+          if (!toggled.delete(fileKey)) toggled.add(fileKey);
+          return { allCollapsed: previous.allCollapsed, toggled };
+        });
+      },
+      expandAll: () => {
+        setState({ allCollapsed: false, toggled: new Set() });
+      },
+      collapseAll: () => {
+        setState({ allCollapsed: true, toggled: new Set() });
+      },
+    }),
+    [state],
+  );
+};

package/src/components/branch-diff/use-diff-settings.tsx

@@ -0,0 +1,97 @@
+import type { DiffWhitespace } from "@reviewflow/sdk";
+import type { ReactNode } from "react";
+import { createContext, use, useMemo, useState } from "react";
+import type { DiffTheme } from "./diff-themes.ts";
+
+/**
+ * `packages`: by package, in patch order. `reading` (experimental): packages
+ * from the one depending on the others down, files from their entry points
+ * down, tests and stories closed below the file they cover.
+ */
+export type DiffFileOrder = "packages" | "reading";
+
+export const isDiffFileOrder = (value: string): value is DiffFileOrder =>
+  value === "packages" || value === "reading";
+
+export interface DiffSettings {
+  wordWrap: boolean;
+  theme: DiffTheme;
+  whitespace: DiffWhitespace;
+  setWhitespace: (whitespace: DiffWhitespace) => void;
+  fileOrder: DiffFileOrder;
+  setFileOrder: (fileOrder: DiffFileOrder) => void;
+}
+
+const defaults: DiffSettings = {
+  wordWrap: true,
+  theme: "github",
+  whitespace: "show",
+  setWhitespace: () => undefined,
+  fileOrder: "packages",
+  setFileOrder: () => undefined,
+};
+
+const DiffSettingsContext = createContext<DiffSettings>(defaults);
+
+interface DiffSettingsProviderProps {
+  theme?: DiffTheme;
+  wordWrap?: boolean;
+  /** the whitespace the diff starts with; the toolbar toggle then owns it */
+  initialWhitespace?: DiffWhitespace;
+  /** the order an app stored; absent, the toolbar toggle owns it for the screen's life */
+  fileOrder?: DiffFileOrder;
+  /** called by the toolbar toggle, for an app that stores the order */
+  onFileOrderChange?: (fileOrder: DiffFileOrder) => void;
+  children: ReactNode;
+}
+
+/**
+ * The diff's display settings. `hide` is `git diff -w`, so it is part of the
+ * diff's range and the toolbar toggle writes it here. Held in memory: an app
+ * that stores them passes the initial values it loaded.
+ */
+export function DiffSettingsProvider({
+  theme = defaults.theme,
+  wordWrap = defaults.wordWrap,
+  initialWhitespace = defaults.whitespace,
+  fileOrder: storedFileOrder,
+  onFileOrderChange,
+  children,
+}: DiffSettingsProviderProps): ReactNode {
+  const [whitespace, setWhitespace] = useState(initialWhitespace);
+  const [ownFileOrder, setOwnFileOrder] = useState(defaults.fileOrder);
+  const fileOrder = storedFileOrder ?? ownFileOrder;
+  const value = useMemo(
+    () => ({
+      theme,
+      wordWrap,
+      whitespace,
+      setWhitespace,
+      fileOrder,
+      setFileOrder: (next: DiffFileOrder) => {
+        setOwnFileOrder(next);
+        onFileOrderChange?.(next);
+      },
+    }),
+    [theme, wordWrap, whitespace, fileOrder, onFileOrderChange],
+  );
+  return <DiffSettingsContext value={value}>{children}</DiffSettingsContext>;
+}
+
+export const useDiffSettings = (): DiffSettings => use(DiffSettingsContext);
+
+interface WhitespaceToggle {
+  whitespace: DiffWhitespace;
+  toggle: () => void;
+}
+
+/** The diff toolbar's switch between hiding and showing whitespace changes. */
+export const useWhitespaceToggle = (): WhitespaceToggle => {
+  const { whitespace, setWhitespace } = useDiffSettings();
+  return {
+    whitespace,
+    toggle: () => {
+      setWhitespace(whitespace === "show" ? "hide" : "show");
+    },
+  };
+};

package/src/components/branch-diff/whitespace-button.tsx

@@ -0,0 +1,32 @@
+import type { DiffWhitespace } from "@reviewflow/sdk";
+import { IconButton } from "alouette";
+import { ParagraphRegularIcon } from "alouette-icons/phosphor-icons/Paragraph";
+import type { ReactNode } from "react";
+
+interface WhitespaceButtonProps {
+  whitespace: DiffWhitespace;
+  disabledReason?: string | null;
+  onToggle: () => void;
+}
+
+/** A toggle: brand while whitespace is hidden, neutral like its neighbours otherwise. */
+export function WhitespaceButton({
+  whitespace,
+  disabledReason,
+  onToggle,
+}: WhitespaceButtonProps): ReactNode {
+  return (
+    <IconButton
+      icon={<ParagraphRegularIcon />}
+      size="sm"
+      accent={whitespace === "hide" ? "brand" : "neutral"}
+      disabledReason={disabledReason}
+      aria-label={
+        whitespace === "hide"
+          ? "Show whitespace changes"
+          : "Hide whitespace changes"
+      }
+      onPress={onToggle}
+    />
+  );
+}