@gogitcms/design-system 0.15.0-next.3

package/src/components/ProjectMenu.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { View, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+
+export type ProjectRef = { name: string; label: string };
+
+export type ProjectMenuProps = {
+  /** The project currently being edited, by manifest name. */
+  current?: string;
+  /**
+   * Every project of the repository. Omitted, empty, or a single entry renders
+   * nothing at all — see the component note.
+   */
+  projects?: ProjectRef[];
+  onSelect?: (project: ProjectRef) => void;
+  /**
+   * True when cms.config.js pins the deployment to one project. The current
+   * project is still shown — the operator should be able to see which one they
+   * are in — but it is inert and marked, so a locked editor never looks like a
+   * broken picker.
+   */
+  locked?: boolean;
+  testID?: string;
+};
+
+/**
+ * The top bar's project control, sitting to the LEFT of the branch menu: which
+ * project you are editing is a coarser choice than which branch of it, and the
+ * bar should read the same direction the URL does.
+ *
+ * It renders NOTHING when there is nothing to choose — no manifest, one project,
+ * or a repository whose projects have not loaded. That is deliberate and is the
+ * difference between this and BranchMenu, which always shows a badge: a branch
+ * is a fact worth displaying even when there is one, while "you are in the only
+ * project" is noise that would appear in every single-project repository — that
+ * is to say, in almost all of them.
+ *
+ * Project names are identifiers (they appear in URLs and in cms.config.js), so
+ * the name renders mono; the human label renders alongside it when it differs.
+ */
+export function ProjectMenu({ current, projects, onSelect, locked, testID = "project" }: ProjectMenuProps) {
+  const t = useTheme();
+  const [open, setOpen] = useState(false);
+
+  const list = projects ?? [];
+  // A locked editor shows its one project; otherwise there must be a real choice.
+  if (list.length === 0) return null;
+  if (list.length < 2 && !locked) return null;
+
+  const active = list.find((p) => p.name === current);
+  const shown = active?.label || active?.name || current || "";
+
+  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="folder" size={13} color={t.color.textSecondary} />
+      <Text variant="monoSm" color="secondary" numberOfLines={1}>{shown}</Text>
+      {locked ? <Icon name="lock" size={12} color={t.color.textTertiary} /> : null}
+      {!locked ? <Icon name="chevronDown" size={12} color={t.color.textTertiary} /> : null}
+    </View>
+  );
+
+  if (locked || !onSelect) {
+    return <View testID={`${testID}-badge`}>{badge}</View>;
+  }
+
+  return (
+    <View style={{ position: "relative" }}>
+      <Pressable onPress={() => setOpen((v) => !v)} testID={`${testID}-trigger`}>
+        {badge}
+      </Pressable>
+      {open ? (
+        <>
+          {/* Full-screen catcher so a click anywhere dismisses, matching how the
+              other top-bar menus close. */}
+          <Pressable
+            onPress={() => setOpen(false)}
+            style={{ position: "absolute", top: -2000, left: -2000, right: -2000, bottom: -2000 }}
+            testID={`${testID}-backdrop`}
+          />
+          <View
+            style={{
+              position: "absolute", top: t.control.sm + 4, left: 0, minWidth: 220,
+              backgroundColor: t.color.surfaceRaised, borderRadius: t.radius.md,
+              borderWidth: 1, borderColor: t.color.borderDefault,
+              paddingVertical: t.space(1), zIndex: 50,
+            }}
+          >
+            {list.map((p) => (
+              <Pressable
+                key={p.name}
+                onPress={() => { setOpen(false); onSelect(p); }}
+                style={{
+                  flexDirection: "row", alignItems: "center", gap: 8,
+                  paddingHorizontal: t.space(3), paddingVertical: t.space(2),
+                }}
+                testID={`${testID}-option-${p.name || "default"}`}
+              >
+                <Icon
+                  name={p.name === current ? "check" : "folder"}
+                  size={13}
+                  color={p.name === current ? t.color.textPrimary : t.color.textTertiary}
+                />
+                <View style={{ flex: 1 }}>
+                  <Text variant="sm" numberOfLines={1}>{p.label || p.name}</Text>
+                  {p.label && p.label !== p.name ? (
+                    <Text variant="monoSm" color="tertiary" numberOfLines={1}>{p.name}</Text>
+                  ) : null}
+                </View>
+              </Pressable>
+            ))}
+          </View>
+        </>
+      ) : null}
+    </View>
+  );
+}

package/src/components/Segment.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { View, Pressable } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+
+export type SegmentItem = {
+  key: string;
+  label: string;
+  /** Rendered dimmed and unpressable. Used for a surface with nothing to show. */
+  disabled?: boolean;
+};
+
+export type SegmentProps = {
+  items: SegmentItem[];
+  activeKey: string;
+  onSelect: (key: string) => void;
+  testID?: string;
+};
+
+/**
+ * Segmented control for switching between surfaces of the same content — the
+ * editor's Edit / Changes switch, which lives in the top bar's center slot.
+ *
+ * The track is a sunken well with a hairline border; the active item is a raised
+ * pill on the page surface. That inversion (active = lighter) is what makes the
+ * selection legible against the permanently dark top bar without introducing a
+ * colour, which the monochrome system doesn't have.
+ */
+export function Segment({ items, activeKey, onSelect, testID }: SegmentProps) {
+  const t = useTheme();
+  return (
+    <View
+      testID={testID}
+      accessibilityRole="tablist"
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 2,
+        gap: 2,
+        borderRadius: t.radius.md,
+        borderWidth: 1,
+        borderColor: t.color.borderSubtle,
+        backgroundColor: t.color.surfaceSunken,
+      }}
+    >
+      {items.map((item) => {
+        const active = item.key === activeKey;
+        return (
+          <Pressable
+            key={item.key}
+            testID={`segment-${item.key}`}
+            accessibilityRole="tab"
+            // aria-selected is set directly rather than through
+            // accessibilityState: react-native-web drops the `selected` flag but
+            // does forward aria-* props. The active item is also NOT marked
+            // `disabled` — only a genuinely unavailable one is — because
+            // react-native-web renders disabled as aria-disabled, which would
+            // announce the tab you are currently on as unavailable.
+            aria-selected={active}
+            disabled={item.disabled}
+            onPress={() => {
+              if (!active) onSelect(item.key);
+            }}
+            style={({ pressed }) => ({
+              height: t.control.sm - 6,
+              paddingHorizontal: t.space(3),
+              justifyContent: "center",
+              borderRadius: t.radius.sm,
+              backgroundColor: active ? t.color.surfaceRaised : "transparent",
+              // Hover/press fades rather than shifting hue — the only motion the
+              // system allows on a control this small.
+              opacity: item.disabled ? 0.4 : pressed && !active ? 0.6 : 1,
+            })}
+          >
+            <Text
+              variant="sm"
+              weight={active ? "semibold" : "regular"}
+              color={active ? "primary" : "secondary"}
+            >
+              {item.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/Skeleton.tsx

@@ -0,0 +1,216 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { Animated, View, Easing, StyleProp, ViewStyle } from "react-native";
+import { useTheme, useResponsive } from "../ThemeProvider";
+import { AppShell, MobileScreen, Pane, TopBar } from "./layout";
+import { SectionLabel } from "./primitives";
+
+// A single pulsing opacity, shared by every SkeletonBox on screen so the shimmer
+// stays in phase. Created once per skeleton tree and provided via context.
+const PulseContext = createContext<Animated.AnimatedInterpolation<number> | null>(null);
+
+function usePulse(): Animated.AnimatedInterpolation<number> {
+  const shared = useContext(PulseContext);
+  // Fallback for a SkeletonBox used outside a provider — its own local loop.
+  const local = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (shared) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(local, { toValue: 1, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: false }),
+        Animated.timing(local, { toValue: 0, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: false }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [shared, local]);
+  return shared ?? local.interpolate({ inputRange: [0, 1], outputRange: [0.55, 1] });
+}
+
+function PulseProvider({ children }: { children: React.ReactNode }) {
+  const progress = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(progress, { toValue: 1, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: false }),
+        Animated.timing(progress, { toValue: 0, duration: 700, easing: Easing.inOut(Easing.ease), useNativeDriver: false }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [progress]);
+  const opacity = useMemo(
+    () => progress.interpolate({ inputRange: [0, 1], outputRange: [0.55, 1] }),
+    [progress],
+  );
+  return <PulseContext.Provider value={opacity}>{children}</PulseContext.Provider>;
+}
+
+/** A single pulsing placeholder block. Width/height/radius are caller-controlled. */
+export function SkeletonBox({
+  width,
+  height,
+  radius,
+  style,
+}: {
+  width?: number | `${number}%`;
+  height?: number;
+  radius?: number;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const t = useTheme();
+  const opacity = usePulse();
+  return (
+    <Animated.View
+      style={[
+        {
+          width,
+          height: height ?? 12,
+          borderRadius: radius ?? t.radius.sm,
+          backgroundColor: t.color.surfaceSunken,
+          opacity,
+        },
+        style,
+      ]}
+    />
+  );
+}
+
+// One placeholder nav item: icon square + label line.
+function NavRowSkeleton() {
+  const t = useTheme();
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2.5), paddingHorizontal: t.space(4), height: t.control.md }}>
+      <SkeletonBox width={16} height={16} radius={t.radius.sm} />
+      <SkeletonBox width={110} height={12} />
+    </View>
+  );
+}
+
+// One placeholder entry: title line over path line.
+function EntryRowSkeleton() {
+  const t = useTheme();
+  return (
+    <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(2), gap: t.space(1.5) }}>
+      <SkeletonBox width="70%" height={12} />
+      <SkeletonBox width="45%" height={10} />
+    </View>
+  );
+}
+
+function DesktopSkeleton() {
+  const t = useTheme();
+  return (
+    <AppShell
+      testID="autologin-skeleton"
+      topBar={
+        <TopBar
+          left={
+            <>
+              <SkeletonBox width={24} height={24} radius={t.radius.sm} />
+              <SkeletonBox width={130} height={14} />
+              <SkeletonBox width={72} height={t.control.sm} radius={t.radius.md} />
+            </>
+          }
+          right={
+            <>
+              <SkeletonBox width={t.control.sm} height={t.control.sm} radius={t.radius.md} />
+              <SkeletonBox width={t.control.sm} height={t.control.sm} radius={t.radius.md} />
+              <SkeletonBox width={28} height={28} radius={t.radius.sm} />
+            </>
+          }
+        />
+      }
+    >
+      {/* nav */}
+      <Pane width={t.layout.sidebar} testID="skeleton-pane-nav">
+        <SectionLabel><SkeletonBox width={60} height={9} /></SectionLabel>
+        {[0, 1, 2].map((i) => <NavRowSkeleton key={i} />)}
+        <View style={{ height: t.space(2) }} />
+        <SectionLabel><SkeletonBox width={72} height={9} /></SectionLabel>
+        {[0, 1].map((i) => <NavRowSkeleton key={i} />)}
+      </Pane>
+
+      {/* entries */}
+      <Pane
+        width={340}
+        testID="skeleton-pane-entries"
+        header={
+          <>
+            <View style={{ flex: 1 }}><SkeletonBox width={120} height={16} /></View>
+            <SkeletonBox width={72} height={t.control.sm} radius={t.radius.md} />
+          </>
+        }
+      >
+        <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(2) }}>
+          <SkeletonBox width={150} height={10} />
+        </View>
+        {[0, 1, 2, 3, 4, 5].map((i) => <EntryRowSkeleton key={i} />)}
+      </Pane>
+
+      {/* detail */}
+      <Pane flex={1} borderRight={false} scroll={false} testID="skeleton-pane-detail">
+        <View
+          style={{
+            height: t.layout.topbar, paddingHorizontal: t.space(5),
+            flexDirection: "row", alignItems: "center", gap: t.space(2),
+            borderBottomWidth: 1, borderBottomColor: t.color.borderSubtle,
+          }}
+        >
+          <SkeletonBox width={220} height={12} />
+        </View>
+        <View style={{ padding: t.space(5), gap: t.space(4), flex: 1 }}>
+          <View style={{ gap: t.space(2) }}>
+            <SkeletonBox width={48} height={10} />
+            <SkeletonBox width="55%" height={24} radius={t.radius.md} />
+          </View>
+          <View style={{ gap: t.space(2), flex: 1 }}>
+            <SkeletonBox width={48} height={10} />
+            <SkeletonBox width="100%" height={0} radius={t.radius.md} style={{ flex: 1, minHeight: 160 }} />
+          </View>
+        </View>
+      </Pane>
+    </AppShell>
+  );
+}
+
+function MobileSkeleton() {
+  const t = useTheme();
+  return (
+    <MobileScreen
+      testID="autologin-skeleton"
+      header={
+        <>
+          <SkeletonBox width={32} height={32} radius={t.radius.sm} />
+          <View style={{ flex: 1, gap: t.space(1.5) }}>
+            <SkeletonBox width={140} height={14} />
+            <SkeletonBox width={90} height={10} />
+          </View>
+          <SkeletonBox width={t.control.md} height={t.control.md} radius={t.radius.md} />
+        </>
+      }
+    >
+      <View style={{ paddingHorizontal: t.space(4), paddingTop: t.space(3), paddingBottom: t.space(3) }}>
+        <SkeletonBox width={160} height={30} radius={t.radius.md} />
+      </View>
+      <SectionLabel><SkeletonBox width={60} height={9} /></SectionLabel>
+      {[0, 1, 2, 3].map((i) => (
+        <View key={i} style={{ paddingVertical: t.space(1) }}>
+          <NavRowSkeleton />
+        </View>
+      ))}
+    </MobileScreen>
+  );
+}
+
+/**
+ * Full-shell loading placeholder shown while an autologin token is being
+ * exchanged. Mirrors the ContentBrowser layout (same panes, widths, and borders)
+ * so the real content mounts into place without a jarring layout shift — and the
+ * login form never flashes on the way in.
+ */
+export function ContentBrowserSkeleton() {
+  const { isDesktop } = useResponsive();
+  return (
+    <PulseProvider>{isDesktop ? <DesktopSkeleton /> : <MobileSkeleton />}</PulseProvider>
+  );
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Icon } from "./Icon";
+
+export type SpinnerProps = {
+  size?: number;
+  color?: string;
+  testID?: string;
+};
+
+/**
+ * A continuously rotating ring — "something is happening, and it will finish".
+ *
+ * Deliberately the line-icon set's `loader` rather than the platform's
+ * ActivityIndicator: this one sits inline among other 16px icons (in place of
+ * the notification bell, most of all) and has to match their weight and color
+ * exactly. ActivityIndicator is still the right choice inside a button, where it
+ * stands alone.
+ */
+export function Spinner({ size = 16, color, testID }: SpinnerProps) {
+  const t = useTheme();
+  const spin = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.timing(spin, {
+        toValue: 1,
+        duration: 900,
+        easing: Easing.linear,
+        // The web renderer drives transforms off the main thread anyway, and the
+        // native driver would forbid the interpolation below on some versions.
+        useNativeDriver: false,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [spin]);
+  const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "360deg"] });
+  return (
+    <Animated.View testID={testID} style={{ width: size, height: size, transform: [{ rotate }] }}>
+      <Icon name="loader" size={size} color={color ?? t.color.textSecondary} />
+    </Animated.View>
+  );
+}

package/src/components/Text.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { Text as RNText, StyleProp, TextStyle } from "react-native";
+import { useTheme } from "../ThemeProvider";
+
+type Variant =
+  | "display" | "h1" | "h2" | "h3"
+  | "body" | "bodyLg" | "sm" | "xs"
+  | "mono" | "monoSm" | "label";
+
+type ColorRole = "primary" | "secondary" | "tertiary" | "disabled" | "inverted";
+type Weight = "light" | "regular" | "medium" | "semibold" | "bold";
+
+export type TextProps = {
+  children: React.ReactNode;
+  variant?: Variant;
+  color?: ColorRole | string;
+  weight?: Weight;
+  mono?: boolean;
+  align?: "left" | "center" | "right";
+  numberOfLines?: number;
+  style?: StyleProp<TextStyle>;
+  testID?: string;
+};
+
+export function Text({
+  children,
+  variant = "body",
+  color = "primary",
+  weight,
+  mono,
+  align,
+  numberOfLines,
+  style,
+  testID,
+  ...props
+}: TextProps) {
+  const t = useTheme();
+
+  const spec = variant === "label" ? t.type.xs : t.type[variant];
+  const isMono = mono || variant === "mono" || variant === "monoSm" || variant === "label";
+  const isLabel = variant === "label";
+
+  const roleColor: Record<ColorRole, string> = {
+    primary: t.color.textPrimary,
+    secondary: t.color.textSecondary,
+    tertiary: t.color.textTertiary,
+    disabled: t.color.textDisabled,
+    inverted: t.color.textInverted,
+  };
+  const resolvedColor =
+    color in roleColor ? roleColor[color as ColorRole] : (color as string);
+
+  const defaultWeight: Weight =
+    variant === "display" || variant === "h1" ? "bold"
+    : variant === "h2" || variant === "h3" ? "semibold"
+    : isLabel ? "medium"
+    : "regular";
+
+  return (
+    <RNText
+      testID={testID}
+      numberOfLines={numberOfLines}
+      style={[
+        {
+          fontFamily: isMono ? t.font.mono : t.font.sans,
+          fontSize: isLabel ? t.type.xs.size : spec.size,
+          lineHeight: isLabel ? t.type.xs.line : spec.line,
+          color: resolvedColor,
+          fontWeight: t.weight[weight ?? defaultWeight],
+          letterSpacing:
+            isLabel ? t.letterSpacing.label
+            : variant === "display" || variant === "h1" || variant === "h2"
+            ? t.letterSpacing.tight
+            : t.letterSpacing.normal,
+          textTransform: isLabel ? "uppercase" : "none",
+          textAlign: align,
+        },
+        style,
+      ]}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+}