@gogitcms/design-system 0.16.0-next.0 → 0.16.0-next.10

package/src/components/Notifications.tsx

@@ -4,10 +4,11 @@ import { useTheme, useThemeMode, ThemeScope } from "../ThemeProvider";
 import { lightTheme, darkTheme } from "../theme";
 import { Text } from "./Text";
 import { Icon } from "./Icon";
+import type { IconName } from "../icons";
 import { Spinner } from "./Spinner";
 
 // One notification, shaped for display. Transport-agnostic: the frontend/mobile
-// apps map GraphQL rows and the desktop maps REST rows into this.
+// apps map GraphQL rows and the desktop and dashboard map REST rows into this.
 export type NotificationItem = {
   id: string;
   title: string;
@@ -16,8 +17,39 @@ export type NotificationItem = {
   read: boolean;
   createdAt: string; // ISO 8601
   author?: string; // display name/email of who caused it, when known
+  // What produced it — picks the icon. Unknown kinds fall back to the bell.
+  kind?: NotificationKind | string;
+  // Where it happened, for a list that spans several repositories/projects.
+  // Omit whichever the list is already scoped to.
+  repository?: string;
+  project?: string;
 };
 
+export type NotificationKind = "import" | "export" | "merge" | "change_request" | "member" | "branch" | "project";
+
+// The icon for a notification kind. Exported so hosts that draw their own rows
+// (a scope picker's section headers, say) agree with the list.
+export function notificationKindIcon(kind?: string): IconName {
+  switch (kind) {
+    case "import":
+      return "download";
+    case "export":
+      return "upload";
+    case "merge":
+      return "gitMerge";
+    case "change_request":
+      return "gitPullRequest";
+    case "member":
+      return "user";
+    case "branch":
+      return "gitBranch";
+    case "project":
+      return "folder";
+    default:
+      return "bell";
+  }
+}
+
 // relativeTime renders a compact age ("just now", "5m", "3h", "2d").
 function relativeTime(iso: string): string {
   const then = Date.parse(iso);
@@ -32,7 +64,65 @@ function relativeTime(iso: string): string {
   return `${days}d`;
 }
 
-// A single notification row: an unread dot + level-tinted title, body, and age.
+// InlineCode renders a sentence whose backticked spans (`main`, `#12`'s
+// branch) are set in the mono face, so a title like "Created `zyx` branch"
+// reads as prose around a name rather than as punctuation. An unmatched
+// backtick is left as typed.
+export function InlineCode({
+  text,
+  variant = "sm",
+  weight,
+  color,
+  numberOfLines,
+  testID,
+}: {
+  text: string;
+  variant?: "sm" | "body" | "monoSm" | "xs";
+  weight?: "regular" | "medium" | "semibold";
+  color?: string;
+  numberOfLines?: number;
+  testID?: string;
+}) {
+  const t = useTheme();
+  const parts = text.split("`");
+  // An even number of parts means an odd number of backticks: not a pair, so
+  // render the text untouched.
+  if (parts.length % 2 === 0) {
+    return (
+      <Text variant={variant} weight={weight} color={color} numberOfLines={numberOfLines} testID={testID}>
+        {text}
+      </Text>
+    );
+  }
+  return (
+    <Text variant={variant} weight={weight} color={color} numberOfLines={numberOfLines} testID={testID}>
+      {parts.map((part, i) =>
+        i % 2 === 1 ? (
+          <Text
+            key={i}
+            variant={variant}
+            weight={weight}
+            color={color}
+            mono
+            style={{
+              backgroundColor: t.color.surfaceSunken,
+              borderRadius: t.radius.sm,
+              paddingHorizontal: 3,
+            }}
+          >
+            {part}
+          </Text>
+        ) : (
+          part
+        ),
+      )}
+    </Text>
+  );
+}
+
+// A single notification row: a kind icon, the title (unread rows in bold, error
+// rows tinted), the body, and a context line — where it happened and who did
+// it — with the age on the right.
 function NotificationRow({
   item,
   divided,
@@ -44,12 +134,16 @@ function NotificationRow({
 }) {
   const t = useTheme();
   const titleColor = item.level === "error" ? t.color.diffDelFg : t.color.textPrimary;
+  const context = [item.repository, item.project].filter(Boolean).join(" · ");
+  const meta = [context, item.author ? `by ${item.author}` : ""].filter(Boolean).join(" · ");
   return (
     <Pressable
       onPress={onPress}
+      disabled={!onPress}
+      testID={`notification-${item.id}`}
       style={({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
         flexDirection: "row",
-        gap: t.space(2.5),
+        gap: t.space(3),
         paddingHorizontal: t.space(4),
         paddingVertical: t.space(3),
         borderBottomWidth: divided ? 1 : 0,
@@ -57,33 +151,57 @@ function NotificationRow({
         backgroundColor: hovered || pressed ? t.color.surfaceHover : "transparent",
       })}
     >
-      <View
-        style={{
-          width: 8,
-          height: 8,
-          marginTop: 5,
-          borderRadius: t.radius.pill,
-          backgroundColor: item.read ? "transparent" : t.color.diffDelFg,
-        }}
-      />
-      <View style={{ flex: 1, gap: 2 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
-          <Text
-            variant="sm"
-            weight={item.read ? "medium" : "semibold"}
-            color={titleColor}
-            numberOfLines={2}
-            style={{ flex: 1 }}
-          >
-            {item.title}
-          </Text>
+      <View style={{ width: 28, height: 28, alignItems: "center", justifyContent: "center", position: "relative" }}>
+        <View
+          style={{
+            width: 28,
+            height: 28,
+            borderRadius: t.radius.pill,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: item.level === "error" ? t.color.diffDelBg : t.color.surfaceSunken,
+          }}
+        >
+          <Icon
+            name={notificationKindIcon(item.kind)}
+            size={14}
+            color={item.level === "error" ? t.color.diffDelFg : t.color.textSecondary}
+          />
+        </View>
+        {/* Unread dot, riding on the icon's corner. */}
+        {item.read ? null : (
+          <View
+            testID="notification-unread"
+            style={{
+              position: "absolute",
+              top: -1,
+              right: -1,
+              width: 8,
+              height: 8,
+              borderRadius: t.radius.pill,
+              backgroundColor: t.color.diffDelFg,
+              borderWidth: 1,
+              borderColor: t.color.surfaceRaised,
+            }}
+          />
+        )}
+      </View>
+      <View style={{ flex: 1, gap: 2, minWidth: 0 }}>
+        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: t.space(2) }}>
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <InlineCode
+              text={item.title}
+              variant="sm"
+              weight={item.read ? "medium" : "semibold"}
+              color={titleColor}
+              numberOfLines={2}
+            />
+          </View>
           <Text variant="monoSm" color="tertiary">{relativeTime(item.createdAt)}</Text>
         </View>
-        {item.body ? (
-          <Text variant="monoSm" color="secondary" numberOfLines={2}>{item.body}</Text>
-        ) : null}
-        {item.author ? (
-          <Text variant="monoSm" color="tertiary" numberOfLines={1}>{`by ${item.author}`}</Text>
+        {item.body ? <InlineCode text={item.body} variant="monoSm" color={t.color.textSecondary} numberOfLines={2} /> : null}
+        {meta ? (
+          <Text variant="monoSm" color="tertiary" numberOfLines={1}>{meta}</Text>
         ) : null}
       </View>
     </Pressable>

package/src/components/ProtectedBranchModal.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+import { View, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Input } from "./Input";
+import { Button } from "./Button";
+
+export type ProtectedBranchModalProps = {
+  /** The protected branch the save was refused on. */
+  branch: string;
+  /** The document that could not be saved, for naming what is at stake. */
+  documentLabel?: string;
+  /** Prefills the field — the host derives it from the document. */
+  suggestedName?: string;
+  /** True while the branch is being created and the save applied. */
+  busy?: boolean;
+  /** The server's message, when the attempt failed. */
+  error?: string | null;
+  /** Create `name` from `branch` and save the pending edit onto it. */
+  onCreate: (name: string) => void;
+  /** Dismiss. The edit stays as an unsaved draft on the protected branch. */
+  onCancel: () => void;
+};
+
+/**
+ * Shown when a save is refused because the branch is protected.
+ *
+ * It is a prompt rather than an error banner because the refusal has exactly one
+ * remedy and the editor knows what it is: the work is intact, it just needs
+ * somewhere it can land. Presenting that as "here is a message, now go find the
+ * branch menu" would make the author reconstruct a plan the product already has.
+ *
+ * The draft is deliberately NOT discarded on cancel — a protected branch is
+ * often noticed mid-thought, and the author may want to keep writing and pick a
+ * branch name later. It stays in storage exactly as any other unsaved work does.
+ */
+export function ProtectedBranchModal({
+  branch, documentLabel, suggestedName, busy, error, onCreate, onCancel,
+}: ProtectedBranchModalProps) {
+  const t = useTheme();
+  const [name, setName] = useState(suggestedName ?? "");
+  // The suggestion is derived from the document, which the host may resolve a
+  // render after the modal opens. Adopted only while the field is untouched.
+  const [touched, setTouched] = useState(false);
+  useEffect(() => {
+    if (!touched && suggestedName) setName(suggestedName);
+  }, [suggestedName, touched]);
+
+  const trimmed = name.trim();
+  const submit = () => {
+    if (!trimmed || busy) return;
+    onCreate(trimmed);
+  };
+
+  return (
+    <View
+      testID="protected-branch-modal"
+      style={{
+        position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 50,
+        alignItems: "center", justifyContent: "center", padding: t.space(4),
+        backgroundColor: "rgba(0,0,0,0.45)",
+      }}
+    >
+      <View
+        style={{
+          width: 460, maxWidth: "100%", gap: t.space(4), padding: t.space(5),
+          borderRadius: t.radius.lg, borderWidth: 1, borderColor: t.color.borderDefault,
+          backgroundColor: t.color.surfaceRaised,
+        }}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between" }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+            <Icon name="lock" size={16} color={t.color.textSecondary} />
+            <Text variant="h3" weight="semibold">This branch is protected</Text>
+          </View>
+          {busy ? null : (
+            <Pressable
+              testID="protected-branch-close"
+              accessibilityRole="button"
+              accessibilityLabel="Cancel"
+              onPress={onCancel}
+              style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
+            >
+              <Icon name="x" size={18} color={t.color.textSecondary} />
+            </Pressable>
+          )}
+        </View>
+
+        <Text variant="body" color="secondary">
+          {documentLabel
+            ? `${branch} doesn’t accept changes directly, so “${documentLabel}” can’t be saved to it. Name a branch to save it to instead — your edit lands there.`
+            : `${branch} doesn’t accept changes directly. Name a branch to save your edit to instead.`}
+        </Text>
+
+        <Input
+          label="New branch"
+          value={name}
+          onChangeText={(v) => { setTouched(true); setName(v); }}
+          onSubmitEditing={submit}
+          placeholder="feat/my-change"
+          autoCapitalize="none"
+          autoFocus
+          mono
+          editable={!busy}
+          error={!!error}
+          testID="protected-branch-name"
+        />
+        <Text variant="monoSm" color="tertiary">{`Branched from ${branch}`}</Text>
+
+        {error ? (
+          <Text testID="protected-branch-error" variant="monoSm" color={t.color.diffDelFg}>{error}</Text>
+        ) : null}
+
+        <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: t.space(2) }}>
+          <Button
+            title="Cancel"
+            variant="ghost"
+            size="md"
+            disabled={busy}
+            onPress={onCancel}
+            testID="protected-branch-cancel"
+          />
+          <Button
+            title={busy ? "Creating…" : "Create branch and save"}
+            variant="primary"
+            size="md"
+            disabled={busy || trimmed === ""}
+            onPress={submit}
+            testID="protected-branch-submit"
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/components/primitives.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { View, StyleProp, ViewStyle } from "react-native";
+import { View, Pressable, StyleProp, ViewStyle } from "react-native";
 import { useTheme } from "../ThemeProvider";
 import { Text } from "./Text";
+import { Icon } from "./Icon";
 
 /** Bordered surface card — defined by a hairline border, never a shadow. */
 export function Card({
@@ -141,3 +142,47 @@ export function SectionLabel({ children, style }: { children: React.ReactNode; s
     </View>
   );
 }
+
+/**
+ * A square check box: filled and ticked when on, an empty hairline box when
+ * off.
+ *
+ * Lives here rather than beside its first caller because two surfaces select
+ * things now — entry rows in the browser, and the fields of a past version in
+ * the history diff — and they have to look like the same control. The press
+ * stops propagating: every current caller puts this inside a larger Pressable
+ * (a list row, a field block), and a tick that also opened the row would be
+ * unusable.
+ */
+export function CheckBox({
+  value,
+  onToggle,
+  testID = "check-box",
+}: {
+  value: boolean;
+  onToggle: () => void;
+  testID?: string;
+}) {
+  const t = useTheme();
+  return (
+    <Pressable
+      onPress={(e?: { stopPropagation?: () => void }) => {
+        e?.stopPropagation?.();
+        onToggle();
+      }}
+      testID={testID}
+      style={{
+        width: 18,
+        height: 18,
+        borderRadius: t.radius.sm,
+        borderWidth: 1,
+        borderColor: value ? t.color.borderStrong : t.color.borderDefault,
+        backgroundColor: value ? t.color.surfaceInverted : t.color.surfaceRaised,
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {value ? <Icon name="check" size={12} color={t.color.textInverted} /> : null}
+    </Pressable>
+  );
+}

package/src/history.ts

@@ -0,0 +1,82 @@
+import type { DocumentChange } from "./components/ChangeDetail";
+
+/**
+ * One commit in a document's history — a row in the version list.
+ *
+ * This is the provider's history for the document's CURRENT path. GitHub's
+ * commits API has no equivalent of `git log --follow`, so a renamed document's
+ * history stops at the rename; the list says so at its end rather than letting
+ * the absence read as "this is where the document began".
+ */
+export type DocumentVersion = {
+  sha: string;
+  /** First 7 characters — an identity without the noise. */
+  shortSha: string;
+  /** The full commit message; the list shows its first line. */
+  message: string;
+  authorName: string;
+  authorEmail?: string | null;
+  /** ISO 8601, in UTC. */
+  authoredAt: string;
+  /** The commit's page on the provider. */
+  url: string;
+  /** How many files the commit touched — this document is one of them. */
+  filesChanged: number;
+};
+
+/**
+ * HistoryApi is the data seam between the design system and its host, the same
+ * split MediaApi and FormsApi use: the DS owns the version browser's UI and its
+ * (ephemeral) open/selected state, the host owns fetching. Omitting it from
+ * ContentBrowser hides the history affordance entirely, which is what a
+ * deployment with no provider — local mode, the desktop app — should look like.
+ */
+export interface HistoryApi {
+  /**
+   * One page of a document's versions, newest first. The DS pages as the list
+   * scrolls; a short page (fewer than `limit`) ends it.
+   */
+  list: (params: { documentId: string; limit: number; offset: number }) => Promise<DocumentVersion[]>;
+  /**
+   * The document as it was at one commit, diffed against what it is now:
+   * `before` on each field is the value at that version, `after` its current
+   * value. Unchanged fields are included, which is what makes the result a
+   * readable preview of the whole document rather than a list of differences.
+   *
+   * Null when the version can't be read (a commit that has gone away under a
+   * force push, say) — the pane says so instead of showing an empty document.
+   */
+  get: (params: { documentId: string; sha: string }) => Promise<DocumentChange | null>;
+}
+
+/**
+ * firstLine is the summary a version row shows. A commit message's first line is
+ * its subject by convention, and the body below it is prose that would push
+ * every other row off the screen.
+ */
+export function firstLine(message: string): string {
+  const line = message.split("\n", 1)[0].trim();
+  return line || "(no commit message)";
+}
+
+/**
+ * relativeTime renders a commit's age the way a history reads — "3d ago" —
+ * falling back to the date once "ago" stops being informative.
+ *
+ * `now` is injectable so a test can assert a fixed string rather than race the
+ * clock.
+ */
+export function relativeTime(iso: string, now: Date = new Date()): string {
+  const then = new Date(iso);
+  const seconds = Math.round((now.getTime() - then.getTime()) / 1000);
+  if (!Number.isFinite(seconds)) return "";
+  if (seconds < 60) return "just now";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  // Past a month, "5 weeks ago" is harder to place than the date itself.
+  return then.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" });
+}

package/src/icons.ts

@@ -28,6 +28,7 @@ export const icons = {
   chevronDown: ["m6 9 6 6 6-6"],
   chevronUp: ["m18 15-6-6-6 6"],
   folder: ["M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"],
+  user: ["M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"],
   building: ["M3 21h18", "M6 21V7l7-4v18", "M18 21V11l-5-3"],
   menu: ["M3 6h18", "M3 12h18", "M3 18h18"],
   plus: ["M5 12h14", "M12 5v14"],

package/src/index.ts

@@ -55,6 +55,10 @@ export type {
 } from "./components/ApplyChangesModal";
 
 // Change-request summary surface (developer escalation)
+export { ProtectedBranchModal } from "./components/ProtectedBranchModal";
+export type { ProtectedBranchModalProps } from "./components/ProtectedBranchModal";
+export { BranchDeletedModal } from "./components/BranchDeletedModal";
+export type { BranchDeletedModalProps } from "./components/BranchDeletedModal";
 export { ChangeRequestSummary } from "./components/ChangeRequestSummary";
 export type {
   ChangeRequestSummaryProps,
@@ -63,7 +67,11 @@ export type {
 } from "./components/ChangeRequestSummary";
 
 // Changes surface: one document's diff between a branch and its base
-export { ChangeDetail } from "./components/ChangeDetail";
+export { ChangeDetail, BODY_FIELD } from "./components/ChangeDetail";
+export { DocumentHistory } from "./components/DocumentHistory";
+export type { DocumentHistoryProps } from "./components/DocumentHistory";
+export { firstLine, relativeTime } from "./history";
+export type { DocumentVersion, HistoryApi } from "./history";
 export type {
   ChangeDetailProps,
   DocumentChange,
@@ -109,9 +117,10 @@ export { Spinner } from "./components/Spinner";
 export type { SpinnerProps } from "./components/Spinner";
 
 // Notifications
-export { NotificationBell, NotificationList } from "./components/Notifications";
+export { NotificationBell, NotificationList, InlineCode, notificationKindIcon } from "./components/Notifications";
 export type {
   NotificationItem,
+  NotificationKind,
   NotificationBellProps,
   NotificationListProps,
 } from "./components/Notifications";
@@ -127,7 +136,7 @@ export {
 } from "./components/layout";
 
 // Media: the picker control, its previews, and the host data seam
-export { MediaField, MediaPicker, MediaProvider, DocumentPathProvider, useMediaApi, pathForStoreAs } from "./components/MediaField";
+export { MediaField, MediaPicker, MediaProvider, DocumentPathProvider, useMediaApi, useFieldMedia, pathForStoreAs } from "./components/MediaField";
 export type { MediaFieldProps, MediaPickerProps } from "./components/MediaField";
 export { MediaPreview, MediaChip } from "./components/MediaPreview";
 export type { MediaPreviewProps } from "./components/MediaPreview";
@@ -155,6 +164,7 @@ export type {
   MediaResolution,
   MediaSetInfo,
   MediaApi,
+  FieldMediaApi,
   MediaCondition,
   MediaFilterField,
   MediaFilterOp,

package/src/media.ts

@@ -166,6 +166,21 @@ export interface MediaApi {
   }) => Promise<MediaAsset>;
 }
 
+// FieldMediaApi is the slice of media access a host-supplied field control
+// (the markdown body editor, a plugin field) gets through the renderField slot.
+// It is scoped to one field: the picker opens on that field's set and writes
+// paths in its store_as form, and resolution is relative to the open document.
+// Absent from the slot args when the host has no media wiring.
+export interface FieldMediaApi {
+  // Opens the picker. Resolves with the chosen asset plus the string to write
+  // for it (in the field's store_as form), or null when the picker is dismissed.
+  pick: (opts?: { kinds?: MediaKind[] }) => Promise<{ asset: MediaAsset; path: string } | null>;
+  // Resolves reference strings as they appear in the document (an image's src,
+  // a frontmatter path) to assets, so a control can show the real file behind a
+  // path the CMS origin does not serve.
+  resolve: (paths: string[]) => Promise<MediaResolution[]>;
+}
+
 // MediaKind is the render class a preview switches on. It is derived server-side
 // on import and delivered on every Media object, so clients never re-derive it
 // from a filename (and never disagree with the server about it).