@comergehq/studio 0.1.2 → 0.1.4

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

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { Animated, FlatList, View, useWindowDimensions, type ViewStyle } from 'react-native';
+
+import type { MergeRequest } from '../../data/merge-requests/types';
+import type { UserStats } from '../../data/users/types';
+import { useTheme } from '../../theme';
+import { ReviewMergeRequestCard } from './ReviewMergeRequestCard';
+
+export type ReviewMergeRequestCarouselProps = {
+  mergeRequests: MergeRequest[];
+  creatorStatsById: Record<string, UserStats>;
+  processingMrId?: string | null;
+  isBuilding?: boolean;
+  testingMrId?: string | null;
+  onReject: (mr: MergeRequest) => void | Promise<void>;
+  onApprove: (mr: MergeRequest) => void;
+  onTest: (mr: MergeRequest) => void | Promise<void>;
+  style?: ViewStyle;
+};
+
+type CardRenderItem = { mr: MergeRequest; index: number; total: number };
+
+export function ReviewMergeRequestCarousel({
+  mergeRequests,
+  creatorStatsById,
+  processingMrId,
+  isBuilding,
+  testingMrId,
+  onReject,
+  onApprove,
+  onTest,
+  style,
+}: ReviewMergeRequestCarouselProps) {
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const [expanded, setExpanded] = React.useState<Record<string, boolean>>({});
+  const carouselScrollX = React.useRef(new Animated.Value(0)).current;
+
+  const peekAmount = 24;
+  const gap = 16;
+  const cardWidth = React.useMemo(() => Math.max(1, width - theme.spacing.lg * 2 - peekAmount), [peekAmount, theme.spacing.lg, width]);
+  const snapInterval = cardWidth + gap;
+  const dotColor = theme.scheme === 'dark' ? '#FFFFFF' : '#000000';
+
+  if (mergeRequests.length === 0) return null;
+
+  return (
+    <View style={[{ marginHorizontal: -theme.spacing.lg }, style]}>
+      <FlatList
+        horizontal
+        data={mergeRequests}
+        keyExtractor={(mr) => mr.id}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.sm }}
+        ItemSeparatorComponent={() => <View style={{ width: gap }} />}
+        snapToAlignment="start"
+        decelerationRate="fast"
+        snapToInterval={snapInterval}
+        disableIntervalMomentum
+        style={{ paddingRight: peekAmount }}
+        ListFooterComponent={<View style={{ width: peekAmount }} />}
+        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: carouselScrollX } } }], {
+          useNativeDriver: false,
+        })}
+        scrollEventThrottle={16}
+        renderItem={({ item, index }) => {
+          const total = mergeRequests.length;
+          const creator = creatorStatsById[item.createdBy];
+          const isExpanded = Boolean(expanded[item.id]);
+          const isProcessing = Boolean(processingMrId && processingMrId === item.id);
+          const isAnyProcessing = Boolean(processingMrId);
+          const isTestingThis = Boolean(testingMrId && testingMrId === item.id);
+          return (
+            <View style={{ width: cardWidth }}>
+              <ReviewMergeRequestCard
+                mr={item}
+                index={index}
+                total={total}
+                creator={creator}
+                isExpanded={isExpanded}
+                isProcessing={isProcessing}
+                isAnyProcessing={isAnyProcessing}
+                isBuilding={Boolean(isBuilding)}
+                isTestingThis={isTestingThis}
+                onToggle={() => setExpanded((prev) => ({ ...prev, [item.id]: !prev[item.id] }))}
+                onReject={() => void onReject(item)}
+                onApprove={() => onApprove(item)}
+                onTest={() => void onTest(item)}
+              />
+            </View>
+          );
+        }}
+      />
+
+      {mergeRequests.length >= 1 ? (
+        <View style={{ flexDirection: 'row', justifyContent: 'center', columnGap: 8, marginTop: theme.spacing.md }}>
+          {mergeRequests.map((mr, index) => {
+            const inputRange = [(index - 1) * snapInterval, index * snapInterval, (index + 1) * snapInterval];
+
+            const scale = carouselScrollX.interpolate({
+              inputRange,
+              outputRange: [0.8, 1.2, 0.8],
+              extrapolate: 'clamp',
+            });
+
+            const opacity = carouselScrollX.interpolate({
+              inputRange,
+              outputRange: [0.4, 1, 0.4],
+              extrapolate: 'clamp',
+            });
+
+            return (
+              <Animated.View
+                key={mr.id}
+                style={{
+                  width: 8,
+                  height: 8,
+                  borderRadius: 999,
+                  backgroundColor: dotColor,
+                  transform: [{ scale }],
+                  opacity,
+                }}
+              />
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+

package/src/components/merge-requests/index.ts

@@ -0,0 +1,7 @@
+export { MergeRequestStatusCard } from './MergeRequestStatusCard';
+export type { MergeRequestStatusCardProps } from './MergeRequestStatusCard';
+
+export { ReviewMergeRequestCarousel } from './ReviewMergeRequestCarousel';
+export type { ReviewMergeRequestCarouselProps } from './ReviewMergeRequestCarousel';
+
+

package/src/components/merge-requests/mergeRequestStatusDisplay.ts

@@ -0,0 +1,23 @@
+export type MergeRequestStatusDisplay = {
+  text: string;
+  color: string;
+};
+
+export function getMergeRequestStatusDisplay(status: string): MergeRequestStatusDisplay {
+  switch (status) {
+    case 'open':
+      return { text: 'Merge request is pending approval', color: '#FACC15' };
+    case 'approved':
+      return { text: 'Merge approved', color: '#10B981' };
+    case 'rejected':
+      return { text: 'Merge request rejected', color: '#F43F5E' };
+    case 'merged':
+      return { text: 'Your edit was merged to the original app', color: '#10B981' };
+    case 'closed':
+      return { text: 'Merge closed', color: '#10B981' };
+    default:
+      return { text: status, color: '#898994' };
+  }
+}
+
+

package/src/components/merge-requests/toIsoString.ts

@@ -0,0 +1,9 @@
+export function toIsoString(input: unknown): string | null {
+  if (!input) return null;
+  if (typeof input === 'string') return input;
+  if (typeof input === 'number') return new Date(input).toISOString();
+  if (input instanceof Date) return input.toISOString();
+  return null;
+}
+
+

package/src/components/merge-requests/useControlledExpansion.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export function useControlledExpansion(props: { expanded?: boolean; onExpandedChange?: (expanded: boolean) => void }) {
+  const [uncontrolled, setUncontrolled] = React.useState(false);
+  const expanded = props.expanded ?? uncontrolled;
+  const setExpanded = React.useCallback(
+    (next: boolean) => {
+      props.onExpandedChange?.(next);
+      if (props.expanded === undefined) setUncontrolled(next);
+    },
+    [props]
+  );
+  return { expanded, setExpanded };
+}
+
+

package/src/components/models/index.ts

@@ -0,0 +1,9 @@
+export type {
+  ChatAuthor,
+  ChatMessage,
+  MergeRequestStatus,
+  MergeRequestSummary,
+  UserSummary,
+} from './types';
+
+

package/src/components/models/types.ts

@@ -0,0 +1,43 @@
+export type UserSummary = {
+  id: string;
+  name?: string | null;
+  avatarUri?: string | null;
+};
+
+export type MergeRequestStatus = 'open' | 'approved' | 'rejected' | 'merged';
+
+export type MergeRequestSummary = {
+  id: string;
+  title?: string | null;
+  description?: string | null;
+  status: MergeRequestStatus;
+  creator?: UserSummary | null;
+  createdAt?: string | number | Date | null;
+  updatedAt?: string | number | Date | null;
+};
+
+export type ChatAuthor = 'human' | 'assistant';
+
+export type ChatMessageMetaStatus = 'success' | 'error' | 'info' | 'warning';
+
+export type ChatMessageMeta = {
+  kind?: string;
+  event?: string;
+  status?: ChatMessageMetaStatus;
+  mergeRequestId?: string;
+  sourceAppId?: string;
+  targetAppId?: string;
+  appId?: string;
+  threadId?: string;
+};
+
+export type ChatMessage = {
+  id: string;
+  author: ChatAuthor;
+  content: string;
+  createdAt?: string | number | Date | null;
+  kind?: string | null;
+  meta?: ChatMessageMeta | null;
+};
+
+

package/src/components/overlays/EdgeGlowFrame.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { Animated, View, type ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+
+import { useTheme } from '../../theme';
+import { withAlpha } from '../utils/color';
+
+export type EdgeGlowFrameProps = {
+  visible: boolean;
+  /**
+   * Which semantic color to use for the glow.
+   */
+  role?: 'accent' | 'danger' | 'success' | 'warning';
+  /**
+   * Thickness of each edge glow in dp.
+   */
+  thickness?: number;
+  /**
+   * Optional intensity multiplier for alpha (0..1).
+   */
+  intensity?: number;
+  style?: ViewStyle;
+};
+
+function baseColor(role: NonNullable<EdgeGlowFrameProps['role']>, theme: ReturnType<typeof useTheme>) {
+  switch (role) {
+    case 'danger':
+      return theme.colors.danger;
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'accent':
+    default:
+      return '#A855F7';
+  }
+}
+
+export function EdgeGlowFrame({
+  visible,
+  role = 'accent',
+  thickness = 40,
+  intensity = 1,
+  style,
+}: EdgeGlowFrameProps) {
+  const theme = useTheme();
+  const alpha = Math.max(0, Math.min(1, intensity));
+
+  const anim = React.useRef(new Animated.Value(visible ? 1 : 0)).current;
+
+  React.useEffect(() => {
+    Animated.timing(anim, {
+      toValue: visible ? 1 : 0,
+      duration: 300,
+      useNativeDriver: true,
+    }).start();
+  }, [anim, visible]);
+
+  const c = baseColor(role, theme);
+  const strong = withAlpha(c, 0.6 * alpha);
+  const soft = withAlpha(c, 0.22 * alpha);
+
+  return (
+    <Animated.View pointerEvents="none" style={[{ position: 'absolute', inset: 0, opacity: anim }, style]}>
+      {/* Top */}
+      <View style={{ position: 'absolute', top: 0, left: 0, right: 0, height: thickness }}>
+        <LinearGradient
+          colors={[strong, soft, 'transparent']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </View>
+      {/* Bottom */}
+      <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: thickness }}>
+        <LinearGradient
+          colors={['transparent', soft, strong]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </View>
+      {/* Left */}
+      <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: thickness }}>
+        <LinearGradient
+          colors={[strong, soft, 'transparent']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </View>
+      {/* Right */}
+      <View style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: thickness }}>
+        <LinearGradient
+          colors={['transparent', soft, strong]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </View>
+    </Animated.View>
+  );
+}
+
+

package/src/components/overlays/index.ts

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

package/src/components/preview/PreviewHeroCard.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Card } from '../primitives/Card';
+
+export type PreviewHeroCardProps = {
+  aspectRatio?: number;
+  overlayTopLeft?: React.ReactNode;
+  background?: React.ReactNode;
+  image?: React.ReactNode;
+  overlayBottom?: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function PreviewHeroCard({
+  aspectRatio = 4 / 3,
+  overlayTopLeft,
+  background,
+  image,
+  overlayBottom,
+  style,
+}: PreviewHeroCardProps) {
+  const theme = useTheme();
+  const radius = 16;
+
+  return (
+    <Card
+      variant="surfaceRaised"
+      padded={false}
+      border={false}
+      style={[
+        {
+          width: '100%',
+          aspectRatio,
+          borderRadius: radius,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      <View style={{ flex: 1 }}>
+        {background ? <View style={{ position: 'absolute', inset: 0 }}>{background}</View> : null}
+        {image ? <View style={{ position: 'absolute', inset: 0 }}>{image}</View> : null}
+
+        {overlayTopLeft ? (
+          <View style={{ position: 'absolute', top: theme.spacing.sm, left: theme.spacing.sm, zIndex: 2 }}>
+            {overlayTopLeft}
+          </View>
+        ) : null}
+
+        {overlayBottom ? <View style={{ flex: 1, justifyContent: 'flex-end' }}>{overlayBottom}</View> : null}
+      </View>
+    </Card>
+  );
+}
+
+

package/src/components/preview/PreviewImage.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Image, type ImageStyle } from 'react-native';
+
+export type PreviewImageProps = {
+  uri?: string | null;
+  onLoad?: () => void;
+  style?: ImageStyle;
+};
+
+export function PreviewImage({ uri, onLoad, style }: PreviewImageProps) {
+  if (!uri) return null;
+  return (
+    <Image
+      source={{ uri }}
+      resizeMode="cover"
+      onLoad={onLoad}
+      style={[{ width: '100%', height: '100%' }, style]}
+    />
+  );
+}
+
+

package/src/components/preview/PreviewMetaRow.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Avatar } from '../primitives/Avatar';
+import { Text } from '../primitives/Text';
+
+export type PreviewMetaRowProps = {
+  avatarUri?: string | null;
+  creatorName?: string | null;
+  title: string;
+  subtitle?: string | null;
+  tag?: React.ReactNode;
+  rightMetric?: React.ReactNode;
+  style?: ViewStyle;
+};
+
+export function PreviewMetaRow({
+  avatarUri,
+  creatorName,
+  title,
+  subtitle,
+  tag,
+  rightMetric,
+  style,
+}: PreviewMetaRowProps) {
+  const theme = useTheme();
+
+  return (
+    <View style={[{ alignSelf: 'stretch' }, style]}>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Avatar uri={avatarUri} name={creatorName} size={24} style={{ marginRight: theme.spacing.sm }} />
+
+        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, minWidth: 0, marginRight: theme.spacing.sm }}>
+          <Text
+            numberOfLines={1}
+            style={{
+              flexShrink: 1,
+              color: theme.colors.text,
+              fontSize: 16,
+              lineHeight: 20,
+              fontWeight: theme.typography.fontWeight.semibold,
+            }}
+          >
+            {title}
+          </Text>
+          {tag ? <View style={{ marginLeft: theme.spacing.sm }}>{tag}</View> : null}
+        </View>
+
+        {rightMetric ? <View>{rightMetric}</View> : null}
+      </View>
+
+      {subtitle ? (
+        <Text
+          numberOfLines={2}
+          style={{
+            marginTop: theme.spacing.sm,
+            color: theme.colors.textMuted,
+            fontSize: 14,
+            lineHeight: 18,
+          }}
+        >
+          {subtitle}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+

package/src/components/preview/PreviewPage.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { BottomSheetScrollView } from '@gorhom/bottom-sheet';
+
+import { useTheme } from '../../theme';
+
+export type PreviewPageProps = {
+  header?: React.ReactNode;
+  children: React.ReactNode;
+  contentStyle?: ViewStyle;
+};
+
+export function PreviewPage({ header, children, contentStyle }: PreviewPageProps) {
+  const theme = useTheme();
+
+  return (
+    <View style={{ flex: 1 }}>
+      {header ? <View>{header}</View> : null}
+      <BottomSheetScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={[
+          {
+            paddingHorizontal: theme.spacing.lg,
+            paddingBottom: theme.spacing.xl,
+            flexGrow: 1,
+          },
+          contentStyle,
+        ]}
+      >
+        {children}
+      </BottomSheetScrollView>
+    </View>
+  );
+}
+
+

package/src/components/preview/PreviewPlaceholder.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Animated, type ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+
+export type PreviewPlaceholderProps = {
+  visible: boolean;
+  style?: ViewStyle;
+};
+
+export function PreviewPlaceholder({ visible, style }: PreviewPlaceholderProps) {
+  if (!visible) return null;
+
+  const opacityAnim = React.useRef(new Animated.Value(0)).current;
+
+  React.useEffect(() => {
+    if (!visible) return;
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacityAnim, { toValue: 1, duration: 1500, useNativeDriver: true }),
+        Animated.timing(opacityAnim, { toValue: 2, duration: 1500, useNativeDriver: true }),
+        Animated.timing(opacityAnim, { toValue: 3, duration: 1500, useNativeDriver: true }),
+        Animated.timing(opacityAnim, { toValue: 0, duration: 1500, useNativeDriver: true }),
+      ])
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [opacityAnim, visible]);
+
+  const opacity1 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [1, 0, 0, 0.3] });
+  const opacity2 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 1, 0, 0] });
+  const opacity3 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 1, 0] });
+  const opacity4 = opacityAnim.interpolate({ inputRange: [0, 1, 2, 3], outputRange: [0, 0, 0, 1] });
+
+  return (
+    <>
+      <Animated.View style={[{ position: 'absolute', inset: 0, opacity: opacity1 }, style]}>
+        <LinearGradient
+          colors={['rgba(98, 0, 238, 0.45)', 'rgba(168, 85, 247, 0.35)']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </Animated.View>
+      <Animated.View style={[{ position: 'absolute', inset: 0, opacity: opacity2 }, style]}>
+        <LinearGradient
+          colors={['rgba(168, 85, 247, 0.45)', 'rgba(139, 92, 246, 0.35)']}
+          start={{ x: 1, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </Animated.View>
+      <Animated.View style={[{ position: 'absolute', inset: 0, opacity: opacity3 }, style]}>
+        <LinearGradient
+          colors={['rgba(139, 92, 246, 0.45)', 'rgba(126, 34, 206, 0.35)']}
+          start={{ x: 0, y: 1 }}
+          end={{ x: 1, y: 0 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </Animated.View>
+      <Animated.View style={[{ position: 'absolute', inset: 0, opacity: opacity4 }, style]}>
+        <LinearGradient
+          colors={['rgba(126, 34, 206, 0.45)', 'rgba(98, 0, 238, 0.35)']}
+          start={{ x: 0.5, y: 0 }}
+          end={{ x: 0.5, y: 1 }}
+          style={{ width: '100%', height: '100%' }}
+        />
+      </Animated.View>
+    </>
+  );
+}
+
+

package/src/components/preview/PreviewStatusBadge.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import {
+  AlertTriangle,
+  Archive,
+  CheckCircle2,
+  GitFork,
+  GitMerge,
+  Pencil,
+  Sparkles,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+import type { AppStatus } from '../../data/apps/types';
+import { APP_STATUS_LABEL } from '../../data/apps/types';
+import { Text } from '../primitives/Text';
+
+const STATUS_BG: Record<AppStatus, string> = {
+  ready: '#10B981', // emerald-500
+  creating: '#3B82F6', // blue-500
+  editing: '#F59E0B', // amber-500
+  forking: '#8B5CF6', // violet-500
+  merging: '#06B6D4', // cyan-500
+  error: '#F43F5E', // rose-500
+  archived: '#71717A', // zinc-500
+};
+
+const STATUS_ICON: Record<AppStatus, LucideIcon> = {
+  ready: CheckCircle2,
+  creating: Sparkles,
+  editing: Pencil,
+  forking: GitFork,
+  merging: GitMerge,
+  error: AlertTriangle,
+  archived: Archive,
+};
+
+export type PreviewStatusBadgeProps = {
+  status: AppStatus;
+};
+
+export function PreviewStatusBadge({ status }: PreviewStatusBadgeProps) {
+  const IconComp = STATUS_ICON[status];
+  const label = APP_STATUS_LABEL[status] ?? status;
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 999,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        backgroundColor: STATUS_BG[status],
+      }}
+    >
+      <IconComp size={12} color="#FFFFFF" style={{ marginRight: 4 }} />
+      <Text style={{ color: '#FFFFFF', fontSize: 11, lineHeight: 14 }}>{label}</Text>
+    </View>
+  );
+}
+
+