@comergehq/studio 0.1.2 → 0.1.3

package/src/components/floating-draggable-button/types.ts

@@ -0,0 +1,63 @@
+import type * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type FloatingButtonOffset = {
+  /** Distance from the left edge (in px). */
+  left?: number;
+  /** Distance from the bottom edge (in px). */
+  bottom?: number;
+};
+
+export type FloatingDraggableButtonProps = {
+  /**
+   * Whether the button should be shown. When toggled, the button animates in/out.
+   * The component stays mounted to preserve its last drag position.
+   */
+  visible?: boolean;
+
+  /** Called after the "press → animate out" sequence completes. */
+  onPress?: () => void | Promise<void>;
+
+  disabled?: boolean;
+
+  /** Button diameter (square hit area). */
+  size?: number;
+
+  /** Padding from screen edges while dragging. */
+  edgePadding?: number;
+
+  /**
+   * Initial placement when it animates in.
+   * `left` is measured from the left edge; `bottom` from the bottom edge.
+   */
+  offset?: FloatingButtonOffset;
+
+  /** Accessible label for screen readers (kept as `ariaLabel` for compatibility). */
+  ariaLabel?: string;
+
+  /** Small badge rendered in the top-right corner. */
+  badgeCount?: number;
+
+  /** When true, renders a pulsing border ring. */
+  isLoading?: boolean;
+
+  variant?: 'default' | 'danger';
+
+  /** Override button background color (takes precedence over `variant`). */
+  backgroundColor?: string;
+
+  /**
+   * Increment to force the button to animate in again.
+   */
+  forceShowTrigger?: number;
+
+  /** Optional custom content inside the button (icon, etc.). */
+  children?: React.ReactNode;
+
+  /** Optional style for the outer container (positioning handled internally). */
+  style?: StyleProp<ViewStyle>;
+
+  testID?: string;
+};
+
+

package/src/components/icons/MergeIcon.tsx

@@ -0,0 +1,14 @@
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+export function MergeIcon({ color = 'currentColor', width = 24, height = 24, ...props }: SvgProps) {
+  return (
+    <Svg viewBox="0 0 486 486" width={width} height={height} {...props}>
+      <Path
+        d="M237.025 0H243.664C254.876 95.0361 275.236 175.597 304.743 241.684C334.249 307.478 367.002 357.774 403 392.572L389.722 486C361.691 458.22 338.233 429.417 319.349 399.59C300.464 369.764 284.531 335.843 271.548 297.829C258.565 259.522 246.615 214.343 235.697 162.292L237.91 161.415C228.468 214.928 217.993 261.569 206.485 301.338C194.978 341.107 179.634 375.904 160.455 405.731C141.571 435.265 115.752 462.022 83 486L96.278 392.572C124.014 369.179 147.62 336.72 167.094 295.197C186.864 253.381 202.65 206.886 214.452 155.713C226.255 104.247 233.779 52.343 237.025 0Z"
+        fill={color}
+      />
+    </Svg>
+  );
+}
+
+

package/src/components/icons/StudioIcons.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { LucideProps } from 'lucide-react-native';
+import {
+  ArrowDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  Home,
+  MessageSquare,
+  Pencil,
+  Play,
+  Send,
+  X,
+  Check,
+} from 'lucide-react-native';
+
+import { useTheme } from '../../theme';
+
+export type StudioIconProps = Omit<LucideProps, 'color'> & {
+  colorToken?: 'floatingContent' | 'text' | 'textMuted' | 'primary' | 'danger' | 'onPrimary' | 'onDanger';
+};
+
+function useResolvedIconColor(token: NonNullable<StudioIconProps['colorToken']>) {
+  const theme = useTheme();
+  switch (token) {
+    case 'text':
+      return theme.colors.text;
+    case 'textMuted':
+      return theme.colors.textMuted;
+    case 'primary':
+      return theme.colors.primary;
+    case 'danger':
+      return theme.colors.danger;
+    case 'onPrimary':
+      return theme.colors.onPrimary;
+    case 'onDanger':
+      return theme.colors.onDanger;
+    case 'floatingContent':
+    default:
+      return theme.colors.floatingContent;
+  }
+}
+
+function makeIcon(Comp: React.ComponentType<LucideProps>) {
+  return function StudioIcon({ size = 20, strokeWidth = 2, colorToken = 'floatingContent', ...rest }: StudioIconProps) {
+    const color = useResolvedIconColor(colorToken);
+    return <Comp size={size} strokeWidth={strokeWidth} color={color} {...rest} />;
+  };
+}
+
+// Header / nav
+export const IconHome = makeIcon(Home);
+export const IconClose = makeIcon(X);
+export const IconBack = makeIcon(ChevronLeft);
+export const IconChevronRight = makeIcon(ChevronRight);
+export const IconChevronDown = makeIcon(ChevronDown);
+
+// Actions
+export const IconChat = makeIcon(MessageSquare);
+export const IconDraw = makeIcon(Pencil);
+export const IconSend = makeIcon(Send);
+export const IconPlay = makeIcon(Play);
+export const IconArrowDown = makeIcon(ArrowDown);
+export const IconApprove = makeIcon(Check);
+
+

package/src/components/index.ts

@@ -0,0 +1,17 @@
+export { FloatingDraggableButton } from './floating-draggable-button';
+export type { FloatingDraggableButtonProps, FloatingButtonOffset } from './floating-draggable-button';
+
+export * from './icons/StudioIcons';
+
+export * from './primitives';
+export * from './comments';
+export * from './studio-sheet';
+export * from './preview';
+export * from './models';
+export * from './merge-requests';
+export * from './chat';
+export * from './dialogs';
+export * from './overlays';
+export * from './draw';
+
+

package/src/components/merge-requests/MergeRequestStatusCard.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { Animated, Pressable, View, type ViewStyle } from 'react-native';
+import { Ban, Check, CheckCheck, ChevronDown } from 'lucide-react-native';
+
+import type { MergeRequestSummary } from '../models/types';
+import { useTheme } from '../../theme';
+import { withAlpha } from '../utils/color';
+import { Card } from '../primitives/Card';
+import { MarkdownText } from '../primitives/MarkdownText';
+import { Text } from '../primitives/Text';
+import { formatTimeAgo } from '../utils/formatTimeAgo';
+import { getMergeRequestStatusDisplay } from './mergeRequestStatusDisplay';
+import { toIsoString } from './toIsoString';
+import { useControlledExpansion } from './useControlledExpansion';
+
+export type MergeRequestStatusCardProps = {
+  mergeRequest: MergeRequestSummary;
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  headerRight?: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function MergeRequestStatusCard({
+  mergeRequest,
+  expanded: expandedProp,
+  onExpandedChange,
+  headerRight,
+  style,
+}: MergeRequestStatusCardProps) {
+  const theme = useTheme();
+  const { expanded, setExpanded } = useControlledExpansion({ expanded: expandedProp, onExpandedChange });
+  const isDark = theme.scheme === 'dark';
+  const textColor = isDark ? '#FFFFFF' : '#000000';
+  const subTextColor = isDark ? '#A1A1AA' : '#71717A';
+  const status = React.useMemo(() => getMergeRequestStatusDisplay(String(mergeRequest.status)), [mergeRequest.status]);
+
+  const { StatusIcon, iconColor, bgColor, statusText } = React.useMemo(() => {
+    switch (mergeRequest.status) {
+      case 'approved':
+      case 'merged':
+        return {
+          StatusIcon: CheckCheck,
+          iconColor: '#10B981',
+          bgColor: 'rgba(16, 185, 129, 0.1)',
+          statusText: 'Edit approved by developer',
+        };
+      case 'rejected':
+        return {
+          StatusIcon: Ban,
+          iconColor: '#F43F5E',
+          bgColor: 'rgba(244, 63, 94, 0.1)',
+          statusText: 'Edit rejected by developer',
+        };
+      case 'open':
+      default:
+        return {
+          StatusIcon: Check,
+          iconColor: '#FACC15',
+          bgColor: 'rgba(250, 204, 21, 0.1)',
+          statusText: 'Edit submitted to developer',
+        };
+    }
+  }, [mergeRequest.status]);
+
+  const updatedIso = toIsoString(mergeRequest.updatedAt ?? null) ?? toIsoString(mergeRequest.createdAt ?? null);
+  const createdIso = toIsoString(mergeRequest.createdAt ?? null);
+  const headerTimeAgo = updatedIso ? formatTimeAgo(updatedIso) : '';
+  const createdTimeAgo = createdIso ? formatTimeAgo(createdIso) : '';
+
+  const rotate = React.useRef(new Animated.Value(expanded ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(rotate, {
+      toValue: expanded ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [expanded, rotate]);
+
+  return (
+    <Pressable onPress={() => setExpanded(!expanded)} style={({ pressed }) => [{ opacity: pressed ? 0.95 : 1 }]}>
+      <Card
+        padded={false}
+        border={false}
+        style={[
+          {
+            padding: theme.spacing.lg,
+            backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
+          } as any,
+          style,
+        ]}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.lg }}>
+          <View style={{ width: 40, height: 40, borderRadius: 999, alignItems: 'center', justifyContent: 'center', backgroundColor: bgColor }}>
+            <StatusIcon size={20} color={iconColor} />
+          </View>
+
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Text
+                style={{
+                  fontSize: 16,
+                  lineHeight: 20,
+                  fontWeight: theme.typography.fontWeight.semibold,
+                  color: theme.colors.text,
+                  flex: 1,
+                }}
+                numberOfLines={1}
+              >
+                {statusText}
+              </Text>
+              {headerTimeAgo ? (
+                <Text style={{ fontSize: 10, lineHeight: 14, marginLeft: theme.spacing.sm, color: withAlpha(theme.colors.textMuted, 0.6) }}>
+                  {headerTimeAgo}
+                </Text>
+              ) : null}
+            </View>
+
+            <Text style={{ fontSize: 12, lineHeight: 16, color: theme.colors.textMuted }} numberOfLines={1}>
+              {mergeRequest.title ?? 'Untitled merge request'}
+            </Text>
+          </View>
+
+          {headerRight ? (
+            <View>{headerRight}</View>
+          ) : (
+            <Animated.View
+              style={{
+                transform: [
+                  {
+                    rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] }),
+                  },
+                ],
+              }}
+            >
+              <ChevronDown size={20} color={withAlpha(theme.colors.textMuted, 0.4)} />
+            </Animated.View>
+          )}
+        </View>
+
+        {expanded ? (
+          <View style={{ marginTop: 16, marginLeft: 56 }}>
+            <Text
+              style={{
+                fontSize: 10,
+                fontWeight: '700',
+                textTransform: 'uppercase',
+                letterSpacing: 0.5,
+                color: status.color,
+                marginBottom: 2,
+              }}
+            >
+              {status.text}
+            </Text>
+            {createdTimeAgo ? (
+              <Text
+                style={{
+                  fontSize: 11,
+                  color: subTextColor,
+                  marginBottom: 8,
+                }}
+              >
+                {createdTimeAgo}
+              </Text>
+            ) : null}
+
+            <Text style={{ fontSize: 16, fontWeight: '600', color: textColor, marginBottom: 8 }}>
+              {mergeRequest.title ?? 'Untitled merge request'}
+            </Text>
+
+            {mergeRequest.description ? <MarkdownText markdown={mergeRequest.description} variant="mergeRequest" /> : null}
+          </View>
+        ) : null}
+      </Card>
+    </Pressable>
+  );
+}
+
+

package/src/components/merge-requests/ReviewMergeRequestActionButton.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Pressable, View } from 'react-native';
+
+export function ReviewMergeRequestActionButton({
+  accessibilityLabel,
+  backgroundColor,
+  disabled,
+  onPress,
+  children,
+  iconOnly,
+}: {
+  accessibilityLabel: string;
+  backgroundColor: string;
+  disabled?: boolean;
+  onPress: () => void;
+  children: React.ReactNode;
+  iconOnly: boolean;
+}) {
+  const [pressed, setPressed] = React.useState(false);
+  const height = iconOnly ? 36 : 40;
+  const width = iconOnly ? 36 : undefined;
+  const paddingHorizontal = iconOnly ? 0 : 16;
+  const paddingVertical = iconOnly ? 0 : 8;
+  const opacity = disabled ? 0.5 : pressed ? 0.9 : 1;
+
+  return (
+    <View
+      style={{
+        width,
+        minWidth: width,
+        height,
+        minHeight: height,
+        borderRadius: 999,
+        backgroundColor,
+        opacity,
+        paddingHorizontal,
+        paddingVertical,
+        justifyContent: 'center',
+      }}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        disabled={Boolean(disabled)}
+        onPress={onPress}
+        onPressIn={() => setPressed(true)}
+        onPressOut={() => setPressed(false)}
+        style={{
+          height: '100%',
+          width: '100%',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+        hitSlop={8}
+      >
+        {children}
+      </Pressable>
+    </View>
+  );
+}
+
+

package/src/components/merge-requests/ReviewMergeRequestCard.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { ActivityIndicator, Animated, Pressable, View } from 'react-native';
+import { Check, ChevronDown, Play, X } from 'lucide-react-native';
+
+import type { MergeRequest } from '../../data/merge-requests/types';
+import type { UserStats } from '../../data/users/types';
+import { useTheme } from '../../theme';
+import { Avatar } from '../primitives/Avatar';
+import { Card } from '../primitives/Card';
+import { MarkdownText } from '../primitives/MarkdownText';
+import { Text } from '../primitives/Text';
+import { withAlpha } from '../utils/color';
+import { getMergeRequestStatusDisplay } from './mergeRequestStatusDisplay';
+import { ReviewMergeRequestActionButton } from './ReviewMergeRequestActionButton';
+
+export type ReviewMergeRequestCardProps = {
+  mr: MergeRequest;
+  index: number;
+  total: number;
+  creator?: UserStats;
+  isExpanded: boolean;
+  isProcessing: boolean;
+  isAnyProcessing: boolean;
+  isBuilding: boolean;
+  isTestingThis: boolean;
+  onToggle: () => void;
+  onReject: () => void;
+  onApprove: () => void;
+  onTest: () => void;
+};
+
+export function ReviewMergeRequestCard({
+  mr,
+  index,
+  total,
+  creator,
+  isExpanded,
+  isProcessing,
+  isAnyProcessing,
+  isBuilding,
+  isTestingThis,
+  onToggle,
+  onReject,
+  onApprove,
+  onTest,
+}: ReviewMergeRequestCardProps) {
+  const theme = useTheme();
+  const status = React.useMemo(() => getMergeRequestStatusDisplay(mr.status), [mr.status]);
+  const canAct = mr.status === 'open';
+
+  const rotate = React.useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+  React.useEffect(() => {
+    Animated.timing(rotate, { toValue: isExpanded ? 1 : 0, duration: 200, useNativeDriver: true }).start();
+  }, [isExpanded, rotate]);
+
+  const position = total > 1 ? `${index + 1}/${total}` : 'Merge request';
+
+  return (
+    <Pressable onPress={onToggle} style={({ pressed }) => ({ opacity: pressed ? 0.95 : 1 })}>
+      <Card
+        padded={false}
+        style={[
+          {
+            padding: 16,
+            backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
+            borderWidth: 1,
+            borderColor: withAlpha('#3700B3', 0.2),
+          } as any,
+        ]}
+      >
+        {/* Collapsed header */}
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          <Avatar size={40} uri={creator?.avatar ?? null} name={creator?.name ?? undefined} />
+          <View style={{ flex: 1, minWidth: 0 }}>
+            <Text
+              style={{ fontWeight: theme.typography.fontWeight.semibold, color: theme.colors.text, fontSize: 16, lineHeight: 20 }}
+              numberOfLines={isExpanded ? undefined : 1}
+            >
+              {mr.title ?? 'Untitled merge request'}
+            </Text>
+            <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16 }} numberOfLines={1}>
+              {creator?.name ?? 'Loading...'} · {position}
+            </Text>
+          </View>
+          <Animated.View
+            style={{
+              transform: [{ rotate: rotate.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] }) }],
+            }}
+          >
+            <ChevronDown size={20} color={withAlpha(theme.colors.textMuted, 0.4)} />
+          </Animated.View>
+        </View>
+
+        {/* Expanded content */}
+        {isExpanded ? (
+          <View style={{ marginTop: 16 }}>
+            <Text
+              style={{
+                fontSize: 10,
+                fontWeight: '700',
+                textTransform: 'uppercase',
+                letterSpacing: 0.5,
+                color: status.color,
+                marginBottom: 8,
+              }}
+            >
+              {status.text}
+            </Text>
+
+            <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }}>
+              {creator
+                ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? 's' : ''}`
+                : 'Loading stats...'}
+            </Text>
+
+            {mr.description ? <MarkdownText markdown={mr.description} variant="mergeRequest" /> : null}
+          </View>
+        ) : null}
+
+        {/* Separator */}
+        <View style={{ height: 1, backgroundColor: withAlpha(theme.colors.borderStrong, 0.5), marginTop: 12, marginBottom: 12 }} />
+
+        {/* Action buttons - always visible */}
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+          <View style={{ flexDirection: 'row', gap: 8 }}>
+            <ReviewMergeRequestActionButton
+              accessibilityLabel="Reject"
+              backgroundColor={theme.colors.danger}
+              disabled={!canAct || isAnyProcessing}
+              onPress={onReject}
+              iconOnly={!isExpanded}
+            >
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: isExpanded ? 4 : 0 }}>
+                <X size={18} color="#FFFFFF" />
+                {isExpanded ? (
+                  <Text style={{ fontSize: 13, color: '#FFFFFF', fontWeight: theme.typography.fontWeight.semibold }}>Reject</Text>
+                ) : null}
+              </View>
+            </ReviewMergeRequestActionButton>
+
+            <ReviewMergeRequestActionButton
+              accessibilityLabel={!canAct ? 'Not actionable' : isProcessing ? 'Processing' : 'Approve'}
+              backgroundColor="#16A34A"
+              disabled={!canAct || isAnyProcessing}
+              onPress={onApprove}
+              iconOnly={!isExpanded}
+            >
+              {isProcessing ? (
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: isExpanded ? 4 : 0 }}>
+                  <ActivityIndicator size="small" color="#FFFFFF" />
+                  {isExpanded ? (
+                    <Text style={{ fontSize: 13, color: '#FFFFFF', fontWeight: theme.typography.fontWeight.semibold }}>
+                      Processing
+                    </Text>
+                  ) : null}
+                </View>
+              ) : (
+                <View style={{ flexDirection: 'row', alignItems: 'center', gap: isExpanded ? 4 : 0 }}>
+                  <Check size={18} color="#FFFFFF" />
+                  {isExpanded ? (
+                    <Text style={{ fontSize: 13, color: '#FFFFFF', fontWeight: theme.typography.fontWeight.semibold }}>Approve</Text>
+                  ) : null}
+                </View>
+              )}
+            </ReviewMergeRequestActionButton>
+          </View>
+
+          <ReviewMergeRequestActionButton
+            accessibilityLabel="Test"
+            backgroundColor={theme.colors.neutral}
+            disabled={isBuilding || isTestingThis}
+            onPress={onTest}
+            iconOnly={!isExpanded}
+          >
+            {isTestingThis ? (
+              <ActivityIndicator size="small" color="#888" />
+            ) : (
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: isExpanded ? 4 : 0 }}>
+                <Play size={14} color={theme.colors.text} />
+                {isExpanded ? (
+                  <Text style={{ fontSize: 13, color: theme.colors.text, fontWeight: theme.typography.fontWeight.semibold }}>Test</Text>
+                ) : null}
+              </View>
+            )}
+          </ReviewMergeRequestActionButton>
+        </View>
+      </Card>
+    </Pressable>
+  );
+}
+
+