@reviewflow/ui 0.0.0-stage → 6.22.0

package/src/components/copyable-code-block.tsx

@@ -0,0 +1,101 @@
+import type { CodeBlockProps } from "alouette";
+import { CodeBlock, IconButton, View } from "alouette";
+import { CheckRegularIcon } from "alouette-icons/phosphor-icons/Check";
+import { CopyRegularIcon } from "alouette-icons/phosphor-icons/Copy";
+import { WarningRegularIcon } from "alouette-icons/phosphor-icons/Warning";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+type CopyState = "copied" | "failed" | "idle";
+
+const copyFeedbackMs = 2000;
+
+/**
+ * `navigator.clipboard` exists only in a secure context, which the daemon's
+ * origins are (`localhost`, `127.0.0.1`, the remote-access tunnel); native has
+ * no `navigator.clipboard` at all, so there the block renders without a button
+ * rather than with one that cannot work.
+ */
+const clipboard = (): Clipboard | undefined =>
+  // oxlint-disable-next-line node-js/no-unsupported-features/node-builtins -- this runs in a browser or react-native, never node
+  typeof navigator === "undefined" ? undefined : navigator.clipboard;
+
+function CopyButton({ text }: { text: string }): ReactNode {
+  const [state, setState] = useState<CopyState>("idle");
+  const target = clipboard();
+  if (target === undefined) return null;
+
+  const settle = (next: CopyState): void => {
+    setState(next);
+    setTimeout(() => {
+      setState("idle");
+    }, copyFeedbackMs);
+  };
+
+  if (state === "copied") {
+    return (
+      <IconButton
+        accent="success"
+        variant="soft"
+        size="sm"
+        icon={<CheckRegularIcon />}
+        aria-label="Copied"
+      />
+    );
+  }
+
+  if (state === "failed") {
+    return (
+      <IconButton
+        accent="danger"
+        variant="soft"
+        size="sm"
+        icon={<WarningRegularIcon />}
+        aria-label="Copy failed"
+      />
+    );
+  }
+
+  return (
+    <IconButton
+      variant="soft"
+      size="sm"
+      icon={<CopyRegularIcon />}
+      aria-label="Copy"
+      onPress={() => {
+        target.writeText(text).then(
+          () => {
+            settle("copied");
+          },
+          (error: unknown) => {
+            console.error("copy to clipboard failed", error);
+            settle("failed");
+          },
+        );
+      }}
+    />
+  );
+}
+
+interface CopyableCodeBlockProps extends Omit<CodeBlockProps, "children"> {
+  text: string;
+}
+
+/**
+ * The button sits beside the block, not over it: alouette's `CodeBlock` is
+ * display-only, and a `soft` button floated on the frame has no ground, so the
+ * end of a long first line would show through its glyph.
+ */
+export function CopyableCodeBlock({
+  text,
+  ...codeBlockProps
+}: CopyableCodeBlockProps): ReactNode {
+  return (
+    <View className="flex-row items-end gap-xxs">
+      <View className="min-w-0 flex-1">
+        <CodeBlock {...codeBlockProps}>{text}</CodeBlock>
+      </View>
+      <CopyButton text={text} />
+    </View>
+  );
+}

package/src/components/label-pill.tsx

@@ -0,0 +1,84 @@
+import type { PullRequestLabel } from "@reviewflow/sdk";
+import { Badge, Text, View, useCurrentMode } from "alouette";
+import type { ReactNode } from "react";
+import { emojify } from "../services/emojify.ts";
+
+interface Rgb {
+  r: number;
+  g: number;
+  b: number;
+}
+
+const rgbOf = (hex: string): Rgb | null => {
+  if (!/^[\da-f]{6}$/i.test(hex)) return null;
+  const channel = (offset: number): number =>
+    Number.parseInt(hex.slice(offset, offset + 2), 16);
+  return { r: channel(0), g: channel(2), b: channel(4) };
+};
+
+/** Perceived lightness, 0 to 1, with the luma weights of sRGB. */
+const lightnessOf = ({ r, g, b }: Rgb): number =>
+  (r * 0.2126 + g * 0.7152 + b * 0.0722) / 255;
+
+const rgba = ({ r, g, b }: Rgb, alpha: number): string =>
+  `rgba(${String(r)}, ${String(g)}, ${String(b)}, ${String(alpha)})`;
+
+const towardWhite = ({ r, g, b }: Rgb, amount: number): Rgb => ({
+  r: Math.round(r + (255 - r) * amount),
+  g: Math.round(g + (255 - g) * amount),
+  b: Math.round(b + (255 - b) * amount),
+});
+
+interface PillColors {
+  background: string;
+  border: string;
+  text: string;
+}
+
+/**
+ * GitHub's own reading of a label colour: solid with dark or light ink on a
+ * light page; tinted with the colour lifted toward white on a dark one, where
+ * a solid dark-blue pill would vanish into the ground.
+ */
+const pillColors = (rgb: Rgb, mode: "dark" | "light"): PillColors => {
+  const lightness = lightnessOf(rgb);
+  if (mode === "light") {
+    return {
+      background: rgba(rgb, 1),
+      border: lightness > 0.85 ? "rgba(31, 35, 40, 0.15)" : "transparent",
+      text: lightness > 0.5 ? "#1f2328" : "#ffffff",
+    };
+  }
+  return {
+    background: rgba(rgb, 0.18),
+    border: rgba(rgb, 0.3),
+    text: rgba(towardWhite(rgb, Math.max(0, 0.6 - lightness)), 1),
+  };
+};
+
+/**
+ * A GitHub label in its repository's colour. The colour is data, read at
+ * runtime, so it is the one colour in the app set through `style`: no class
+ * can name it. An unreadable colour falls back to a plain badge.
+ */
+export function LabelPill({ label }: { label: PullRequestLabel }): ReactNode {
+  const mode = useCurrentMode();
+  const rgb = rgbOf(label.color);
+  if (rgb === null) return <Badge accent="info">{emojify(label.name)}</Badge>;
+  const colors = pillColors(rgb, mode === "dark" ? "dark" : "light");
+
+  return (
+    <View
+      className="rounded-full border px-sm py-xxs"
+      style={{ backgroundColor: colors.background, borderColor: colors.border }}
+    >
+      <Text
+        className="font-body-bold text-sm"
+        style={{ color: colors.text }}
+        numberOfLines={1}
+      >
+        {emojify(label.name)}
+      </Text>
+    </View>
+  );
+}

package/src/components/link-in-row.ts

@@ -0,0 +1,6 @@
+/**
+ * For an `ExternalLinkText` inside a centred row of facts. It sets itself
+ * `self-start`, which pins it to the top of the row beside text and badges, and
+ * alouette merges no class there, so the override has to win on importance.
+ */
+export const linkInRow = "self-center!";

package/src/components/markdown-suggestion.tsx

@@ -0,0 +1,60 @@
+import type { Accent } from "alouette";
+import { Box, Text, View } from "alouette";
+import type { ReactNode } from "react";
+import { createContext, use } from "react";
+import { CopyableCodeBlock } from "./copyable-code-block.tsx";
+
+/**
+ * The lines a review comment's suggestion replaces. Only a thread knows them,
+ * so a suggestion rendered anywhere else stays a code block.
+ */
+export const SuggestionOriginalContext = createContext<string[] | null>(null);
+
+interface ChangeLineProps {
+  accent: Accent;
+  sign: string;
+  text: string;
+}
+
+function ChangeLine({ accent, sign, text }: ChangeLineProps): ReactNode {
+  return (
+    <Box accent={accent} className="flex-row gap-xs bg-highlight-accent px-xs">
+      <Text className="select-none font-mono text-xs text-accent">{sign}</Text>
+      <Text className="min-w-0 flex-1 select-auto font-mono text-xs text-sharp">
+        {text === "" ? " " : text}
+      </Text>
+    </Box>
+  );
+}
+
+/** A ```` ```suggestion ```` block, shown as the change it proposes. */
+export function SuggestedChange({ value }: { value: string }): ReactNode {
+  const original = use(SuggestionOriginalContext);
+  if (original === null) {
+    return <CopyableCodeBlock size="sm" title="suggestion" text={value} />;
+  }
+  const suggested = value === "" ? [] : value.split("\n");
+  return (
+    <View className="gap-xxs">
+      <Text className="text-xs text-muted">Suggested change</Text>
+      <Box className="lowered overflow-hidden rounded-md py-xxs">
+        {original.map((line, index) => (
+          <ChangeLine
+            key={`-${String(index)}`}
+            accent="danger"
+            sign="-"
+            text={line}
+          />
+        ))}
+        {suggested.map((line, index) => (
+          <ChangeLine
+            key={`+${String(index)}`}
+            accent="success"
+            sign="+"
+            text={line}
+          />
+        ))}
+      </Box>
+    </View>
+  );
+}