@gogitcms/design-system 0.15.0-next.3

package/src/ThemeProvider.tsx

@@ -0,0 +1,86 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { useColorScheme, useWindowDimensions } from "react-native";
+import { makeTheme, lightTheme, Theme, ThemeMode, DESKTOP_BREAKPOINT } from "./theme";
+
+type ThemeContextValue = {
+  theme: Theme;
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  toggleMode: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export type ThemeProviderProps = {
+  children: React.ReactNode;
+  /** Force a mode; omit to follow the system color scheme. */
+  initialMode?: ThemeMode;
+};
+
+export function ThemeProvider({ children, initialMode }: ThemeProviderProps) {
+  const system = useColorScheme();
+  const [override, setOverride] = useState<ThemeMode | undefined>(initialMode);
+  const mode: ThemeMode = override ?? (system === "dark" ? "dark" : "light");
+
+  const theme = useMemo(() => makeTheme(mode), [mode]);
+  const setMode = useCallback((m: ThemeMode) => setOverride(m), []);
+  const toggleMode = useCallback(
+    () => setOverride((m) => ((m ?? mode) === "dark" ? "light" : "dark")),
+    [mode]
+  );
+
+  const value = useMemo(
+    () => ({ theme, mode, setMode, toggleMode }),
+    [theme, mode, setMode, toggleMode]
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+/**
+ * Overrides the theme palette for a subtree while keeping the app's real
+ * mode/setMode/toggleMode intact — so a nested control (e.g. the top bar's
+ * theme toggle) still drives the whole app, not just the scoped subtree.
+ * Used to render the dark-chrome top bar's inline contents against a dark
+ * palette regardless of the active app theme.
+ */
+export function ThemeScope({ theme, children }: { theme: Theme; children: React.ReactNode }) {
+  const ctx = useContext(ThemeContext);
+  const value = useMemo<ThemeContextValue>(
+    () => ({
+      theme,
+      mode: ctx?.mode ?? "light",
+      setMode: ctx?.setMode ?? (() => {}),
+      toggleMode: ctx?.toggleMode ?? (() => {}),
+    }),
+    [theme, ctx]
+  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}
+
+// Both hooks fall back to the light theme when no provider is mounted, so
+// components never crash in isolation (tests, Storybook-style previews).
+export function useTheme(): Theme {
+  const ctx = useContext(ThemeContext);
+  return ctx ? ctx.theme : lightTheme;
+}
+
+export function useThemeMode() {
+  const ctx = useContext(ThemeContext);
+  if (ctx) return { mode: ctx.mode, setMode: ctx.setMode, toggleMode: ctx.toggleMode };
+  return { mode: "light" as ThemeMode, setMode: () => {}, toggleMode: () => {} };
+}
+
+/**
+ * Responsive layout switch. Works on native and web (react-native-web) via
+ * useWindowDimensions, so the same components pick desktop vs mobile layout
+ * from the viewport width — no CSS media queries needed.
+ */
+export function useResponsive() {
+  const { width, height } = useWindowDimensions();
+  return {
+    width,
+    height,
+    isDesktop: width >= DESKTOP_BREAKPOINT,
+    isMobile: width < DESKTOP_BREAKPOINT,
+  };
+}

package/src/__tests__/ApplyChangesModal.test.tsx

@@ -0,0 +1,148 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ApplyChangesModal, type MergeProgress } from "../components/ApplyChangesModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const base: MergeProgress = {
+  status: "running",
+  step: "comparing",
+  sourceBranch: "draft/spring",
+  targetBranch: "main",
+};
+
+const branches = { sourceBranch: "draft/spring", targetBranch: "main" };
+
+test("without a run it shows a confirmation step explaining the effects", () => {
+  const onConfirm = jest.fn();
+  render(wrap(<ApplyChangesModal {...branches} summary="3 collections changed" onConfirm={onConfirm} onClose={() => {}} />));
+
+  const confirm = screen.getByTestId("apply-confirm");
+  // The irreversible, outward-facing effects are spelled out.
+  expect(confirm).toHaveTextContent("merges draft/spring into main");
+  expect(confirm).toHaveTextContent("pushes a merge commit to origin/main");
+  expect(confirm).toHaveTextContent("draft/spring is then deleted");
+  expect(confirm).toHaveTextContent("can’t be undone");
+  expect(confirm).toHaveTextContent("3 collections changed");
+
+  // The checklist is not shown until the merge actually starts.
+  expect(screen.queryByTestId("merge-step-active")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("apply-confirm-submit"));
+  expect(onConfirm).toHaveBeenCalledTimes(1);
+});
+
+test("the checklist advances: earlier steps done, current active, later pending", () => {
+  render(wrap(<ApplyChangesModal {...branches} progress={{ ...base, step: "merging" }} onClose={() => {}} />));
+
+  // comparing is behind us → done; merging is current → active; pushing → pending.
+  expect(screen.getAllByTestId("merge-step-done")).toHaveLength(1);
+  expect(screen.getAllByTestId("merge-step-active")).toHaveLength(1);
+  expect(screen.getAllByTestId("merge-step-pending")).toHaveLength(1);
+});
+
+test("the header shows source → target", () => {
+  render(wrap(<ApplyChangesModal {...branches} progress={base} onClose={() => {}} />));
+  expect(screen.getByText("draft/spring")).toBeInTheDocument();
+  expect(screen.getByText("main")).toBeInTheDocument();
+});
+
+test("success shows the merge panel with commit and stats, and a Done button", () => {
+  const onDone = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        progress={{
+          ...base,
+          status: "succeeded",
+          step: "pushing",
+          commit: "b7e1a2c9deadbeef",
+          filesChanged: 3,
+          added: 64,
+          removed: 6,
+        }}
+        onClose={() => {}}
+        onDone={onDone}
+      />,
+    ),
+  );
+
+  const panel = screen.getByTestId("merge-success");
+  expect(panel).toHaveTextContent("Merged draft/spring into main");
+  expect(panel).toHaveTextContent("b7e1a2c"); // short sha
+  expect(panel).toHaveTextContent("3 files");
+  expect(panel).toHaveTextContent("+64 −6");
+
+  // Every step reads as done on success.
+  expect(screen.getAllByTestId("merge-step-done")).toHaveLength(3);
+  expect(screen.getByTestId("apply-done")).toBeInTheDocument();
+});
+
+test("needs_review lists the conflicting files and escalates with an explanation", () => {
+  const onCreateChangeRequest = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        progress={{ ...base, status: "needs_review", step: "merging", escalationFiles: ["src/app.go", "package.json"] }}
+        onCreateChangeRequest={onCreateChangeRequest}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const panel = screen.getByTestId("merge-needs-review");
+  expect(panel).toHaveTextContent("Code conflicts need a developer");
+  expect(screen.getByTestId("escalation-file-src/app.go")).toBeInTheDocument();
+  expect(screen.getByTestId("escalation-file-package.json")).toBeInTheDocument();
+
+  // The submit is disabled until an explanation is entered.
+  const submit = screen.getByTestId("create-change-request-submit");
+  fireEvent.click(submit);
+  expect(onCreateChangeRequest).not.toHaveBeenCalled();
+
+  fireEvent.change(screen.getByTestId("change-request-explanation"), { target: { value: "Updated pricing copy" } });
+  fireEvent.click(submit);
+  expect(onCreateChangeRequest).toHaveBeenCalledWith("Updated pricing copy");
+});
+
+test("an open change request replaces the confirm step with a shareable link and view button", () => {
+  const onViewChangeRequest = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        changeRequestOpen
+        changeRequestUrl="https://github.com/acme/site/pull/42"
+        onViewChangeRequest={onViewChangeRequest}
+        onClose={() => {}}
+      />,
+    ),
+  );
+  const panel = screen.getByTestId("apply-cr-open");
+  expect(panel).toHaveTextContent("A change request is already open");
+  expect(panel).toHaveTextContent("Send them this link");
+  // The normal apply confirmation is not offered.
+  expect(screen.queryByTestId("apply-confirm-submit")).not.toBeInTheDocument();
+  // The PR link is shown read-only with a copy button.
+  expect(screen.getByTestId("change-request-link")).toHaveValue("https://github.com/acme/site/pull/42");
+  expect(screen.getByTestId("copy-change-request-link")).toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("apply-view-change-request"));
+  expect(onViewChangeRequest).toHaveBeenCalledTimes(1);
+});
+
+test("failure surfaces the error and a dismiss button", () => {
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        progress={{ ...base, status: "failed", step: "pushing", error: "main moved while merging" }}
+        onClose={() => {}}
+      />,
+    ),
+  );
+  expect(screen.getByTestId("merge-error")).toHaveTextContent("main moved while merging");
+  expect(screen.getByTestId("apply-dismiss")).toBeInTheDocument();
+});

package/src/__tests__/BranchImport.test.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { BranchImportingScreen, BranchImportFailedScreen } from "../components/BranchImport";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+test("the importing screen names the branch it is waiting on", () => {
+  render(wrap(<BranchImportingScreen branch="release/2.0" repository="acme/site" />));
+  expect(screen.getByTestId("branch-importing")).toBeInTheDocument();
+  expect(screen.getByText("Importing release/2.0")).toBeInTheDocument();
+  expect(screen.getByText(/acme\/site/)).toBeInTheDocument();
+});
+
+test("a missing config reads as a setup step, not an error", () => {
+  render(
+    wrap(
+      <BranchImportFailedScreen
+        branch="main"
+        repository="acme/site"
+        error="no go-git-cms config found"
+        errorCode="config_not_found"
+      />,
+    ),
+  );
+  expect(screen.getByText("main has no CMS config yet")).toBeInTheDocument();
+  expect(screen.getByText(/go-git-cms\.yml/)).toBeInTheDocument();
+  // The raw message is redundant once the screen has said what to commit.
+  expect(screen.queryByTestId("branch-import-error")).not.toBeInTheDocument();
+});
+
+test("any other failure shows the run's own message", () => {
+  render(wrap(<BranchImportFailedScreen branch="main" error="clone: permission denied" />));
+  expect(screen.getByText("Couldn’t import main")).toBeInTheDocument();
+  expect(screen.getByTestId("branch-import-error")).toHaveTextContent("clone: permission denied");
+});
+
+test("check again is offered only when the host can re-read the state", () => {
+  const onRecheck = jest.fn();
+  const { rerender } = render(wrap(<BranchImportFailedScreen branch="main" errorCode="config_not_found" />));
+  expect(screen.queryByTestId("branch-import-recheck")).not.toBeInTheDocument();
+
+  rerender(wrap(<BranchImportFailedScreen branch="main" errorCode="config_not_found" onRecheck={onRecheck} />));
+  fireEvent.click(screen.getByTestId("branch-import-recheck"));
+  expect(onRecheck).toHaveBeenCalled();
+});

package/src/__tests__/Button.test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { Button } from "../components/Button";
+import { Badge } from "../components/primitives";
+import { NavRow } from "../components/NavRow";
+import { Icon } from "../components/Icon";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+test("Button fires onPress", () => {
+  const onPress = jest.fn();
+  render(wrap(<Button title="Commit" onPress={onPress} testID="commit" />));
+  fireEvent.click(screen.getByTestId("commit"));
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+
+test("Button does not fire when disabled", () => {
+  const onPress = jest.fn();
+  render(wrap(<Button title="Commit" onPress={onPress} disabled testID="commit" />));
+  fireEvent.click(screen.getByTestId("commit"));
+  expect(onPress).not.toHaveBeenCalled();
+});
+
+test("Badge renders its label", () => {
+  render(wrap(<Badge label="M" tone="strong" testID="status" />));
+  expect(screen.getByTestId("status")).toHaveTextContent("M");
+});
+
+test("NavRow shows label + count and fires onPress", () => {
+  const onPress = jest.fn();
+  render(wrap(<NavRow label="Blog posts" icon="newspaper" count={24} onPress={onPress} testID="row" />));
+  const row = screen.getByTestId("row");
+  expect(row).toHaveTextContent("Blog posts");
+  expect(row).toHaveTextContent("24");
+  fireEvent.click(row);
+  expect(onPress).toHaveBeenCalledTimes(1);
+});
+
+test("Icon (web) renders an svg with paths", () => {
+  const { container } = render(wrap(<Icon name="gitBranch" />));
+  const svg = container.querySelector("svg");
+  expect(svg).toBeTruthy();
+  expect(svg!.querySelectorAll("path").length).toBeGreaterThan(0);
+});

package/src/__tests__/ChangeRequestSummary.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ChangeRequestSummary, type ChangeRequestSummaryData } from "../components/ChangeRequestSummary";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const data: ChangeRequestSummaryData = {
+  id: "cr-1",
+  status: "open",
+  sourceBranch: "draft/spring",
+  targetBranch: "main",
+  prNumber: 42,
+  prUrl: "https://github.com/acme/site/pull/42",
+  explanation: "Updated the pricing table and checkout copy",
+  conflictFiles: ["src/app.go", "package.json"],
+  mergeBranch: "cms-merge/abc123",
+  description: "Opened by the CMS because a content merge conflicts in code files.",
+  comments: [{ author: "dev", body: "On it — resolving now.", createdAt: "2026-07-23T10:00:00Z" }],
+};
+
+test("renders the description, conflicting files, dev instructions and comments", () => {
+  render(wrap(<ChangeRequestSummary data={data} cloneUrl="https://github.com/acme/site.git" />));
+
+  // Status + PR number.
+  expect(screen.getByTestId("cr-status")).toHaveTextContent("open");
+  expect(screen.getByText("#42")).toBeInTheDocument();
+
+  // Explanation + live description.
+  expect(screen.getByText("Updated the pricing table and checkout copy")).toBeInTheDocument();
+  expect(screen.getByText(/content merge conflicts in code files/)).toBeInTheDocument();
+
+  // Conflicting files.
+  expect(screen.getByTestId("cr-file-src/app.go")).toBeInTheDocument();
+  expect(screen.getByTestId("cr-file-package.json")).toBeInTheDocument();
+
+  // Developer instructions reference the merge branch to check out.
+  expect(screen.getByText("git fetch origin main cms-merge/abc123")).toBeInTheDocument();
+  expect(screen.getByText("git checkout cms-merge/abc123")).toBeInTheDocument();
+
+  // Comments.
+  expect(screen.getByText("dev")).toBeInTheDocument();
+  expect(screen.getByText("On it — resolving now.")).toBeInTheDocument();
+});
+
+test("back button fires onBack", () => {
+  const onBack = jest.fn();
+  render(wrap(<ChangeRequestSummary data={data} onBack={onBack} />));
+  fireEvent.click(screen.getByTestId("cr-back"));
+  expect(onBack).toHaveBeenCalledTimes(1);
+});
+
+test("a completed request hides the resolve-it instructions", () => {
+  render(wrap(<ChangeRequestSummary data={{ ...data, status: "completed" }} />));
+  expect(screen.getByTestId("cr-status")).toHaveTextContent("completed");
+  expect(screen.queryByText(/git fetch origin/)).not.toBeInTheDocument();
+});