@reviewflow/ui 6.25.0 → 6.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reviewflow/ui",
-  "version": "6.25.0",
+  "version": "6.26.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",

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

@@ -40,7 +40,7 @@ import { ChatCircleDotsRegularIcon } from "alouette-icons/phosphor-icons/ChatCir
 import type { ReactNode } from "react";
 import { useState } from "react";
 import { usePullRequestDataSource } from "../dataSource.ts";
-import { prStatusAccents } from "../prStatus.ts";
+import { usePrStatusAccent } from "../prStatus.ts";
 import { emojify } from "../services/emojify.ts";
 import { errorToMessage } from "../services/errorToMessage.ts";
 import { formatDataAge } from "../services/formatDataAge.ts";
@@ -156,6 +156,12 @@ interface MergeLineProps {
   children?: ReactNode;
 }
 
+function StatusBadge({ status }: { status: PrStatus }): ReactNode {
+  return (
+    <Badge accent={usePrStatusAccent(status)}>{prStatusLabels[status]}</Badge>
+  );
+}
+
 function MergeLine({
   status,
   author,
@@ -165,9 +171,7 @@ function MergeLine({
 }: MergeLineProps): ReactNode {
   return (
     <View className="flex-row flex-wrap items-center gap-xs">
-      {status === null ? null : (
-        <Badge accent={prStatusAccents[status]}>{prStatusLabels[status]}</Badge>
-      )}
+      {status === null ? null : <StatusBadge status={status} />}
       <Text className="text-sm font-body-bold">
         {author ?? "unknown author"}
       </Text>

package/src/prStatus.ts

@@ -1,7 +1,8 @@
 import type { PrStatus } from "@reviewflow/sdk";
 import type { Accent } from "alouette";
+import { usePullRequestSlots } from "./slots.tsx";
 
-/** A merged pull request takes the brand accent; an app with its own accent for it passes one instead. */
+/** A merged pull request takes the brand accent; an app with its own accent for it passes one in the `prStatusAccents` slot. */
 export const prStatusAccents: Record<PrStatus, Accent | undefined> = {
   approved: "success",
   changesRequested: "danger",
@@ -11,3 +12,9 @@ export const prStatusAccents: Record<PrStatus, Accent | undefined> = {
   noReviewers: "warning",
   waitingReview: "info",
 };
+
+/** The badge accent of `status`: the app's (the `prStatusAccents` slot) over the ui's. */
+export const usePrStatusAccent = (status: PrStatus): Accent | undefined => {
+  const { prStatusAccents: appAccents = {} } = usePullRequestSlots();
+  return status in appAccents ? appAccents[status] : prStatusAccents[status];
+};

package/src/slots.tsx

@@ -1,3 +1,5 @@
+import type { PrStatus } from "@reviewflow/sdk";
+import type { Accent } from "alouette";
 import type { ReactNode } from "react";
 import { createContext, use } from "react";
 
@@ -25,6 +27,12 @@ export interface PullRequestSlots {
    * checkout is configured. Absent: the message stands alone.
    */
   renderRepositoryAction?: (ownerRepo: string) => ReactNode;
+  /**
+   * The status badge's accent, per status, over `prStatusAccents`: an app with
+   * an accent of its own for one (a theme it generates beside alouette's, cast
+   * to `Accent`) passes it here.
+   */
+  prStatusAccents?: Partial<Record<PrStatus, Accent | undefined>>;
 }
 
 const SlotsContext = createContext<PullRequestSlots>({});