@gogitcms/design-system 0.15.0-next.3

package/src/components/BranchMenu.tsx

@@ -0,0 +1,192 @@
+import React, { 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 BranchRef = { id: string; name: string; protected?: boolean };
+
+export type BranchMenuProps = {
+  /** The branch currently being edited. */
+  current: string;
+  /**
+   * Every imported branch. Omitted (or a single entry) renders the inert badge —
+   * there is nothing to switch to, so no affordance is offered.
+   */
+  branches?: BranchRef[];
+  /** Marked in the list; it is also the base every branch's changes compare to. */
+  defaultBranch?: string;
+  onSelect?: (branch: BranchRef) => void;
+  /** Omitted → no "New branch" row. Rejecting the name should throw. */
+  onCreate?: (name: string) => Promise<void> | void;
+  /**
+   * testID prefix for the trigger and the badge, so two menus in the same bar
+   * (source and target) are addressable apart. Defaults to "branch"; a caller
+   * that renders two passes a distinct value for the second.
+   */
+  testID?: string;
+};
+
+/**
+ * The top bar's branch control. It is a plain badge until the host supplies
+ * branches to switch between, at which point it becomes a menu — so a
+ * deployment that only ever imports one branch shows no dead affordance.
+ *
+ * Branch names are metadata and always render mono, per the system's rule that
+ * paths, hashes and refs are set in Geist Mono.
+ */
+export function BranchMenu({ current, branches, defaultBranch, onSelect, onCreate, testID = "branch" }: BranchMenuProps) {
+  const t = useTheme();
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const switchable = (branches?.length ?? 0) > 1 || !!onCreate;
+  const currentProtected = !!branches?.find((b) => b.name === current)?.protected;
+
+  const badge = (
+    <View
+      style={{
+        flexDirection: "row", alignItems: "center", gap: 6,
+        paddingHorizontal: t.space(2), height: t.control.sm,
+        borderRadius: t.radius.md, borderWidth: 1, borderColor: t.color.borderDefault,
+      }}
+    >
+      <Icon name="gitBranch" size={13} color={t.color.textSecondary} />
+      <Text variant="monoSm" color="secondary">{current}</Text>
+      {currentProtected ? (
+        <Icon name="lock" size={12} color={t.color.textTertiary} />
+      ) : null}
+      {switchable ? <Icon name="chevronDown" size={13} color={t.color.textTertiary} /> : null}
+    </View>
+  );
+
+  if (!switchable) return <View testID={`${testID}-badge`}>{badge}</View>;
+
+  const close = () => {
+    setOpen(false);
+    setCreating(false);
+    setName("");
+    setError(null);
+  };
+
+  const submit = async () => {
+    const trimmed = name.trim();
+    if (!trimmed || !onCreate) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await onCreate(trimmed);
+      close();
+    } catch (e: unknown) {
+      setError((e as { message?: string })?.message || "Couldn’t create the branch.");
+      setBusy(false);
+    }
+  };
+
+  const rowStyle = ({ pressed, hovered }: { pressed: boolean; hovered?: boolean }) => ({
+    flexDirection: "row" as const, alignItems: "center" as const, gap: t.space(2),
+    paddingHorizontal: t.space(3), paddingVertical: t.space(2),
+    backgroundColor: hovered || pressed ? t.color.surfaceHover : "transparent",
+  });
+
+  return (
+    <View style={{ position: "relative" }}>
+      <Pressable
+        testID={`${testID}-menu`}
+        accessibilityRole="button"
+        accessibilityLabel={`Branch ${current}. Switch branch`}
+        onPress={() => (open ? close() : setOpen(true))}
+        style={({ pressed }) => ({ opacity: pressed ? 0.6 : 1 })}
+      >
+        {badge}
+      </Pressable>
+      {open ? (
+        <View
+          testID={`${testID}-menu-list`}
+          style={{
+            position: "absolute", top: t.control.sm + 4, left: 0, minWidth: 240, zIndex: 20,
+            backgroundColor: t.color.surfaceRaised, borderWidth: 1, borderColor: t.color.borderDefault,
+            borderRadius: t.radius.md, paddingVertical: t.space(1),
+          }}
+        >
+          {creating ? (
+            <View style={{ padding: t.space(3), gap: t.space(2) }}>
+              <Input
+                label="New branch"
+                value={name}
+                onChangeText={setName}
+                placeholder="feat/my-change"
+                mono
+                error={!!error}
+                testID={`${testID}-create-input`}
+              />
+              <Text variant="monoSm" color="tertiary">
+                {`Branched from ${current}`}
+              </Text>
+              {error ? <Text 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="sm" onPress={close} testID={`${testID}-create-cancel`} />
+                <Button
+                  title={busy ? "Creating…" : "Create"}
+                  variant="primary"
+                  size="sm"
+                  disabled={busy || name.trim() === ""}
+                  onPress={submit}
+                  testID={`${testID}-create-submit`}
+                />
+              </View>
+            </View>
+          ) : (
+            <>
+              {(branches ?? []).map((b) => {
+                const active = b.name === current;
+                return (
+                  <Pressable
+                    key={b.id}
+                    testID={`${testID}-option-${b.id}`}
+                    onPress={() => { close(); if (!active) onSelect?.(b); }}
+                    style={rowStyle}
+                  >
+                    <Icon
+                      name={active ? "check" : "gitBranch"}
+                      size={14}
+                      color={active ? t.color.textPrimary : t.color.textTertiary}
+                    />
+                    <Text variant="monoSm" weight={active ? "semibold" : "regular"} style={{ flex: 1 }}>
+                      {b.name}
+                    </Text>
+                    {b.protected ? (
+                      <Icon name="lock" size={12} color={t.color.textTertiary} />
+                    ) : null}
+                    {b.name === defaultBranch ? (
+                      <Text variant="monoSm" color="tertiary">default</Text>
+                    ) : null}
+                  </Pressable>
+                );
+              })}
+              {onCreate ? (
+                <Pressable
+                  testID={`${testID}-create`}
+                  onPress={() => { setCreating(true); setError(null); }}
+                  style={(state: { pressed: boolean; hovered?: boolean }) => ({
+                    ...rowStyle(state),
+                    borderTopWidth: 1,
+                    borderTopColor: t.color.borderSubtle,
+                  })}
+                >
+                  <Icon name="plus" size={14} color={t.color.textSecondary} />
+                  <Text variant="sm">New branch</Text>
+                </Pressable>
+              ) : null}
+            </>
+          )}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { Pressable, StyleProp, ViewStyle } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import type { IconName } from "../icons";
+
+export type ButtonVariant = "primary" | "default" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export type ButtonProps = {
+  title: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  iconLeft?: IconName;
+  fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+export function Button({
+  title,
+  onPress,
+  variant = "default",
+  size = "md",
+  disabled,
+  iconLeft,
+  fullWidth,
+  style,
+  testID,
+}: ButtonProps) {
+  const t = useTheme();
+  const height = t.control[size];
+  const padH = size === "sm" ? t.space(3) : t.space(4);
+
+  function bg(pressed: boolean) {
+    switch (variant) {
+      case "primary": return pressed ? t.ink[800] : t.color.surfaceInverted;
+      case "default": return pressed ? t.color.surfaceActive : t.color.surfaceRaised;
+      case "ghost": return pressed ? t.color.surfaceHover : "transparent";
+      case "danger": return pressed ? t.color.diffDelBg : "transparent";
+    }
+  }
+  const fg =
+    variant === "primary" ? t.color.textInverted
+    : variant === "danger" ? t.color.diffDelFg
+    : t.color.textPrimary;
+  const borderColor =
+    variant === "default" ? t.color.borderDefault
+    : variant === "danger" ? t.color.borderDefault
+    : "transparent";
+
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={title}
+      onPress={onPress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        {
+          height,
+          paddingHorizontal: padH,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: t.space(1.5),
+          borderRadius: t.radius.md,
+          borderWidth: 1,
+          borderColor,
+          backgroundColor: bg(pressed),
+          opacity: disabled ? 0.4 : 1,
+          alignSelf: fullWidth ? "stretch" : "flex-start",
+        },
+        style,
+      ]}
+    >
+      {iconLeft ? <Icon name={iconLeft} size={size === "sm" ? 14 : 16} color={fg} /> : null}
+      <Text variant={size === "sm" ? "sm" : "body"} weight="medium" color={fg}>
+        {title}
+      </Text>
+    </Pressable>
+  );
+}
+
+export type IconButtonProps = {
+  name: IconName;
+  onPress: () => void;
+  size?: ButtonSize;
+  active?: boolean;
+  label: string; // accessibility
+  disabled?: boolean;
+  testID?: string;
+};
+
+export function IconButton({
+  name,
+  onPress,
+  size = "md",
+  active,
+  label,
+  disabled,
+  testID,
+}: IconButtonProps) {
+  const t = useTheme();
+  const box = t.control[size];
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      disabled={disabled}
+      style={({ pressed }) => ({
+        width: box,
+        height: box,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: t.radius.md,
+        borderWidth: 1,
+        borderColor: active ? t.color.borderDefault : "transparent",
+        backgroundColor: active || pressed ? t.color.surfaceHover : "transparent",
+        opacity: disabled ? 0.4 : 1,
+      })}
+    >
+      <Icon name={name} size={size === "sm" ? 16 : 18} color={t.color.textSecondary} />
+    </Pressable>
+  );
+}