@comergehq/studio 0.1.1 → 0.1.3

package/src/components/dialogs/ConfirmMergeRequestDialog.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+
+import type { MergeRequestSummary } from '../models/types';
+import { Modal } from '../primitives/Modal';
+import { Text } from '../primitives/Text';
+import { useTheme } from '../../theme';
+
+export type ConfirmMergeRequestDialogProps = {
+  visible: boolean;
+  onOpenChange: (open: boolean) => void;
+  mergeRequest: MergeRequestSummary | null;
+  approveDisabled?: boolean;
+  /**
+   * disables the "Test edits first" button and changes its label to "Preparing…".
+   */
+  isBuilding?: boolean;
+  onConfirm: () => void | Promise<void>;
+  onTestFirst: (mr: MergeRequestSummary) => void | Promise<void>;
+};
+
+export function ConfirmMergeRequestDialog({
+  visible,
+  onOpenChange,
+  mergeRequest,
+  approveDisabled,
+  isBuilding,
+  onConfirm,
+  onTestFirst,
+}: ConfirmMergeRequestDialogProps) {
+  const theme = useTheme();
+
+  const close = React.useCallback(() => onOpenChange(false), [onOpenChange]);
+
+  const canConfirm = Boolean(mergeRequest) && !approveDisabled;
+
+  const handleConfirm = React.useCallback(() => {
+    if (!mergeRequest) return;
+    onOpenChange(false);
+    void onConfirm();
+  }, [mergeRequest, onConfirm, onOpenChange]);
+
+  const handleTestFirst = React.useCallback(() => {
+    if (!mergeRequest) return;
+    onOpenChange(false);
+    void onTestFirst(mergeRequest);
+  }, [mergeRequest, onOpenChange, onTestFirst]);
+
+  const fullWidthButtonBase = {
+    height: 40,
+    borderRadius: 999,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    alignSelf: 'stretch' as const,
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      onRequestClose={close}
+      contentStyle={{
+        borderRadius: theme.radii.sm,
+        padding: 24,
+        backgroundColor: theme.colors.background,
+      }}
+    >
+      <View>
+        <Text
+          style={{
+            color: theme.colors.text,
+            fontSize: 18,
+            lineHeight: 24,
+            fontWeight: theme.typography.fontWeight.semibold,
+          }}
+        >
+          Are you sure you want to approve this merge request?
+        </Text>
+      </View>
+
+      <View style={{ marginTop: 16 }}>
+        {/* Primary */}
+        <View
+          style={[
+            fullWidthButtonBase,
+            {
+              backgroundColor: theme.colors.primary,
+              opacity: canConfirm ? 1 : 0.5,
+            },
+          ]}
+        >
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Approve Merge"
+            disabled={!canConfirm}
+            onPress={handleConfirm}
+            style={[fullWidthButtonBase, { flex: 1 }]}
+          >
+            <Text style={{ textAlign: 'center', color: theme.colors.onPrimary }}>
+              Approve Merge
+            </Text>
+          </Pressable>
+        </View>
+
+        {/* Test first (outline) */}
+        <View style={{ height: 8 }} />
+        <View
+          style={[
+            fullWidthButtonBase,
+            {
+              backgroundColor: theme.colors.background,
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+              opacity: isBuilding || !mergeRequest ? 0.5 : 1,
+            },
+          ]}
+        >
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={isBuilding ? 'Preparing…' : 'Test edits first'}
+            disabled={isBuilding || !mergeRequest}
+            onPress={handleTestFirst}
+            style={[fullWidthButtonBase, { flex: 1 }]}
+          >
+            <Text style={{ textAlign: 'center', color: theme.colors.text }}>
+              {isBuilding ? 'Preparing…' : 'Test edits first'}
+            </Text>
+          </Pressable>
+        </View>
+
+        {/* Cancel (outline) */}
+        <View style={{ height: 8 }} />
+        <View
+          style={[
+            fullWidthButtonBase,
+            {
+              backgroundColor: theme.colors.background,
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+            },
+          ]}
+        >
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Cancel"
+            onPress={close}
+            style={[fullWidthButtonBase, { flex: 1 }]}
+          >
+            <Text style={{ textAlign: 'center', color: theme.colors.text }}>Cancel</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+

package/src/components/dialogs/index.ts

@@ -0,0 +1,4 @@
+export { ConfirmMergeRequestDialog } from './ConfirmMergeRequestDialog';
+export type { ConfirmMergeRequestDialogProps } from './ConfirmMergeRequestDialog';
+
+

package/src/components/draw/DrawColorPicker.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { Pressable, View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+
+export type DrawColorPickerProps = {
+  colors: string[];
+  selected: string;
+  expanded: boolean;
+  onToggle: () => void;
+  onSelect: (color: string) => void;
+  style?: ViewStyle;
+};
+
+export function DrawColorPicker({
+  colors,
+  selected,
+  expanded,
+  onToggle,
+  onSelect,
+  style,
+}: DrawColorPickerProps) {
+  useTheme();
+
+  const isWhite = (c: string) => c.toUpperCase() === '#FFFFFF';
+
+  const swatchStyle = (c: string, isSelected: boolean): ViewStyle => {
+    const base: ViewStyle = {
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      backgroundColor: c,
+      borderWidth: 2,
+      borderColor: 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center',
+    };
+
+    const selectedStyle: ViewStyle = isSelected
+      ? {
+          borderColor: '#FFFFFF',
+          shadowColor: '#000',
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.3,
+          shadowRadius: 3,
+          elevation: 4,
+        }
+      : {};
+
+    const whiteStyle: ViewStyle = isWhite(c) ? { borderColor: 'rgba(0, 0, 0, 0.2)' } : {};
+
+    return { ...base, ...selectedStyle, ...whiteStyle };
+  };
+
+  if (!expanded) {
+    return (
+      <Pressable onPress={onToggle} style={[swatchStyle(selected, true), style]} />
+    );
+  }
+
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center', gap: 8 }, style]}>
+      {colors.map((c, idx) => (
+        <Pressable
+          key={`${c}-${idx}`}
+          onPress={() => {
+            onSelect(c);
+            onToggle();
+          }}
+          style={swatchStyle(c, selected === c)}
+        />
+      ))}
+    </View>
+  );
+}
+
+

package/src/components/draw/DrawModeOverlay.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { captureRef } from 'react-native-view-shot';
+
+import { useTheme } from '../../theme';
+import { EdgeGlowFrame } from '../overlays/EdgeGlowFrame';
+import { DrawSurface } from './DrawSurface';
+import { DrawToolbar } from './DrawToolbar';
+import type { Stroke } from './types';
+
+export type DrawModeOverlayProps = {
+  visible: boolean;
+  captureTargetRef: React.RefObject<View | null>;
+  onCancel: () => void;
+  onCapture: (dataUrl: string) => void;
+  /**
+   * Custom palette (theme-first). If omitted, uses a theme-derived palette.
+   */
+  palette?: string[];
+  strokeWidth?: number;
+  style?: ViewStyle;
+  /**
+   * Render icons for toolbar actions.
+   */
+  renderUndoIcon?: () => React.ReactNode;
+  renderCancelIcon?: () => React.ReactNode;
+  renderDoneIcon?: () => React.ReactNode;
+  renderDragHandle?: () => React.ReactNode;
+};
+
+export function DrawModeOverlay({
+  visible,
+  captureTargetRef,
+  onCancel,
+  onCapture,
+  palette,
+  strokeWidth = 4,
+  style,
+  renderUndoIcon,
+  renderCancelIcon,
+  renderDoneIcon,
+  renderDragHandle,
+}: DrawModeOverlayProps) {
+  const theme = useTheme();
+
+  const defaultPalette = React.useMemo(
+    () => [
+      '#EF4444', // Red
+      '#EAB308', // Yellow
+      '#22C55E', // Green
+      '#3B82F6', // Blue
+      '#FFFFFF', // White
+      '#000000', // Black
+    ],
+    []
+  );
+
+  const colors = palette && palette.length > 0 ? palette : defaultPalette;
+  const [selectedColor, setSelectedColor] = React.useState(colors[0] ?? '#EF4444');
+  const [strokes, setStrokes] = React.useState<Stroke[]>([]);
+  const [capturing, setCapturing] = React.useState(false);
+  const [hideUi, setHideUi] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!visible) return;
+    setStrokes([]);
+    setSelectedColor(colors[0] ?? '#EF4444');
+    setCapturing(false);
+    setHideUi(false);
+  }, [colors, visible]);
+
+  const canUndo = strokes.length > 0;
+
+  const handleUndo = React.useCallback(() => {
+    setStrokes((prev) => prev.slice(0, -1));
+  }, []);
+
+  const handleCancel = React.useCallback(() => {
+    setStrokes([]);
+    onCancel();
+  }, [onCancel]);
+
+  const handleDone = React.useCallback(async () => {
+    if (!captureTargetRef.current || capturing) return;
+    try {
+      setCapturing(true);
+      setHideUi(true);
+      await new Promise((r) => requestAnimationFrame(() => r(null)));
+      await new Promise((r) => requestAnimationFrame(() => r(null)));
+
+      const base64 = await captureRef(captureTargetRef, {
+        format: 'png',
+        quality: 0.9,
+        result: 'base64',
+      });
+      setCapturing(false);
+      setHideUi(false);
+      setStrokes([]);
+      onCapture(`data:image/png;base64,${base64}`);
+    } catch {
+      setCapturing(false);
+      setHideUi(false);
+    }
+  }, [captureTargetRef, capturing, onCapture]);
+
+  if (!visible) return null;
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.root, style]} pointerEvents="box-none">
+      <EdgeGlowFrame visible={!hideUi} role="danger" thickness={50} intensity={1} />
+
+      <DrawSurface
+        color={selectedColor}
+        strokeWidth={strokeWidth}
+        strokes={strokes}
+        onAddStroke={(stroke) => setStrokes((prev) => [...prev, stroke])}
+      />
+
+      <DrawToolbar
+        hidden={hideUi}
+        capturing={capturing}
+        colors={colors}
+        selectedColor={selectedColor}
+        onSelectColor={setSelectedColor}
+        canUndo={canUndo}
+        onUndo={handleUndo}
+        onCancel={handleCancel}
+        onDone={() => void handleDone()}
+        renderUndoIcon={renderUndoIcon}
+        renderCancelIcon={renderCancelIcon}
+        renderDoneIcon={renderDoneIcon}
+        renderDragHandle={renderDragHandle}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    zIndex: 9999,
+  },
+});
+
+

package/src/components/draw/DrawSurface.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { PanResponder, StyleSheet, View, type GestureResponderEvent, type PanResponderGestureState, type ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import type { Point, Stroke } from './types';
+import { pointsToSmoothPath } from './strokes';
+
+export type DrawSurfaceProps = {
+  color: string;
+  strokeWidth: number;
+  strokes: Stroke[];
+  onAddStroke: (stroke: Stroke) => void;
+  style?: ViewStyle;
+  minDistance?: number;
+};
+
+export function DrawSurface({
+  color,
+  strokeWidth,
+  strokes,
+  onAddStroke,
+  style,
+  minDistance = 1,
+}: DrawSurfaceProps) {
+  const [renderTick, setRenderTick] = React.useState(0);
+  const currentPointsRef = React.useRef<Point[]>([]);
+  const rafRef = React.useRef<number | null>(null);
+
+  const triggerRender = React.useCallback(() => {
+    if (rafRef.current !== null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      setRenderTick((n) => n + 1);
+    });
+  }, []);
+
+  React.useEffect(() => () => {
+    if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+  }, []);
+
+  const onStart = React.useCallback((e: GestureResponderEvent) => {
+    const { locationX, locationY } = e.nativeEvent;
+    currentPointsRef.current = [{ x: locationX, y: locationY }];
+    triggerRender();
+  }, [triggerRender]);
+
+  const onMove = React.useCallback((e: GestureResponderEvent, _g: PanResponderGestureState) => {
+    const { locationX, locationY } = e.nativeEvent;
+    const pts = currentPointsRef.current;
+    if (pts.length > 0) {
+      const last = pts[pts.length - 1];
+      const dx = locationX - last.x;
+      const dy = locationY - last.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist < minDistance) return;
+    }
+    currentPointsRef.current = [...pts, { x: locationX, y: locationY }];
+    triggerRender();
+  }, [minDistance, triggerRender]);
+
+  const onEnd = React.useCallback(() => {
+    const points = currentPointsRef.current;
+    if (points.length > 0) {
+      onAddStroke({ points, color, width: strokeWidth });
+    }
+    currentPointsRef.current = [];
+    triggerRender();
+  }, [color, onAddStroke, strokeWidth, triggerRender]);
+
+  const panResponder = React.useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: onStart,
+        onPanResponderMove: onMove,
+        onPanResponderRelease: onEnd,
+        onPanResponderTerminate: onEnd,
+      }),
+    [onEnd, onMove, onStart]
+  );
+
+  const currentPath = pointsToSmoothPath(currentPointsRef.current);
+
+  // renderTick is used to force re-render when refs change
+  void renderTick;
+
+  return (
+    <View style={[StyleSheet.absoluteFill, styles.container, style]} {...panResponder.panHandlers}>
+      <Svg style={StyleSheet.absoluteFill} width="100%" height="100%">
+        {strokes.map((s, idx) => {
+          const d = pointsToSmoothPath(s.points);
+          if (!d) return null;
+          return (
+            <Path
+              key={idx}
+              d={d}
+              stroke={s.color}
+              strokeWidth={s.width}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              fill="none"
+            />
+          );
+        })}
+        {currentPath ? (
+          <Path
+            d={currentPath}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            fill="none"
+          />
+        ) : null}
+      </Svg>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 5,
+  },
+});
+
+