@comergehq/studio 0.1.2 → 0.1.3

package/src/components/preview/StatsBar.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Pressable, View, type ViewStyle } from 'react-native';
+import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { Heart, MessageCircle } from 'lucide-react-native';
+
+import { useTheme } from '../../theme';
+import { Text } from '../primitives/Text';
+import { MergeIcon } from '../icons/MergeIcon';
+
+export type StatsBarProps = {
+  likeCount: number;
+  commentCount: number;
+  forkCount: number;
+  isLiked?: boolean;
+  onPressLike?: () => void;
+  onPressComments?: () => void;
+  style?: ViewStyle;
+  centered?: boolean;
+  fixedWidth?: number;
+};
+
+export function StatsBar({
+  likeCount,
+  commentCount,
+  forkCount,
+  isLiked = false,
+  onPressLike,
+  onPressComments,
+  style,
+  centered = false,
+  fixedWidth,
+}: StatsBarProps) {
+  const theme = useTheme();
+  const statsBgColor = theme.scheme === 'dark' ? 'rgba(24, 24, 27, 0.5)' : 'rgba(255, 255, 255, 0.5)';
+
+  return (
+    <View
+      style={[
+        { position: 'absolute', bottom: 12, width: '100%', paddingHorizontal: 12 },
+        centered && { alignItems: 'center' },
+        style,
+      ]}
+    >
+      <LiquidGlassView
+        style={[
+          { borderRadius: 100, overflow: 'hidden' },
+          fixedWidth ? { width: fixedWidth } : undefined,
+          !isLiquidGlassSupported && { backgroundColor: statsBgColor },
+        ]}
+        effect="clear"
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16 }}>
+          <Pressable
+            disabled={!onPressLike}
+            onPress={onPressLike}
+            hitSlop={8}
+            style={{ paddingVertical: 8 }}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <Heart
+                size={16}
+                strokeWidth={2.5}
+                color={isLiked ? theme.colors.danger : '#FFFFFF'}
+                fill={isLiked ? theme.colors.danger : 'transparent'}
+              />
+              <View style={{ width: 4 }} />
+              <Text
+                variant="caption"
+                style={{
+                  color: isLiked ? theme.colors.danger : '#FFFFFF',
+                  fontWeight: theme.typography.fontWeight.bold,
+                }}
+              >
+                {likeCount}
+              </Text>
+            </View>
+          </Pressable>
+
+          <Pressable
+            disabled={!onPressComments}
+            onPress={onPressComments}
+            hitSlop={8}
+            style={{ paddingVertical: 8 }}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              <MessageCircle size={16} strokeWidth={2.5} color="#FFFFFF" />
+              <View style={{ width: 4 }} />
+              <Text variant="caption" style={{ color: '#FFFFFF', fontWeight: theme.typography.fontWeight.bold }}>
+                {commentCount}
+              </Text>
+            </View>
+          </Pressable>
+
+          <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 8 }}>
+            <View style={{ transform: [{ scaleY: -1 }] }}>
+              <MergeIcon width={14} height={14} color="#FFFFFF" />
+            </View>
+            <View style={{ width: 4 }} />
+            <Text variant="caption" style={{ color: '#FFFFFF', fontWeight: theme.typography.fontWeight.bold }}>
+              {forkCount}
+            </Text>
+          </View>
+        </View>
+      </LiquidGlassView>
+    </View>
+  );
+}
+
+

package/src/components/preview/index.ts

@@ -0,0 +1,22 @@
+export { PreviewPage } from './PreviewPage';
+export type { PreviewPageProps } from './PreviewPage';
+
+export { PreviewHeroCard } from './PreviewHeroCard';
+export type { PreviewHeroCardProps } from './PreviewHeroCard';
+
+export { PreviewImage } from './PreviewImage';
+export type { PreviewImageProps } from './PreviewImage';
+
+export { PreviewPlaceholder } from './PreviewPlaceholder';
+export type { PreviewPlaceholderProps } from './PreviewPlaceholder';
+
+export { StatsBar } from './StatsBar';
+export type { StatsBarProps } from './StatsBar';
+
+export { PreviewMetaRow } from './PreviewMetaRow';
+export type { PreviewMetaRowProps } from './PreviewMetaRow';
+
+export { PreviewStatusBadge } from './PreviewStatusBadge';
+export type { PreviewStatusBadgeProps } from './PreviewStatusBadge';
+
+

package/src/components/primitives/Avatar.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Image, View, type ImageStyle, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Text } from './Text';
+import type { WithStyle } from './types';
+
+export type AvatarProps = WithStyle<ViewStyle> & {
+  size?: number;
+  uri?: string | null;
+  name?: string | null;
+  /**
+   * Optional override for the fallback background.
+   * Prefer leaving this undefined so it uses theme.
+   */
+  fallbackBackgroundColor?: string;
+  imageStyle?: WithStyle<ImageStyle>['style'];
+};
+
+function initialsFrom(name?: string | null): string {
+  const trimmed = (name ?? '').trim();
+  if (!trimmed) return '?';
+  return trimmed[0]?.toUpperCase?.() ?? '?';
+}
+
+export function Avatar({
+  size = 32,
+  uri,
+  name,
+  fallbackBackgroundColor,
+  style,
+  imageStyle,
+}: AvatarProps) {
+  const theme = useTheme();
+  const radius = size / 2;
+  const fallbackBg = fallbackBackgroundColor ?? theme.colors.neutral;
+
+  return (
+    <View
+      style={[
+        {
+          width: size,
+          height: size,
+          borderRadius: radius,
+          overflow: 'hidden',
+          backgroundColor: fallbackBg,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+    >
+      {uri ? (
+        <Image
+          source={{ uri }}
+          style={[{ width: size, height: size }, imageStyle]}
+          resizeMode="cover"
+        />
+      ) : (
+        <Text variant="caption" style={{ color: theme.colors.onNeutral }}>
+          {initialsFrom(name)}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+

package/src/components/primitives/Button.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import {
+  Pressable,
+  type PressableProps,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+import type { ButtonSize, ButtonVariant, PressStateStyle, WithStyle } from './types';
+
+export type ButtonProps = Omit<PressableProps, 'style'> &
+  WithStyle<ViewStyle> &
+  PressStateStyle<ViewStyle> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children?: React.ReactNode;
+  };
+
+function backgroundFor(
+  variant: ButtonVariant,
+  theme: ReturnType<typeof useTheme>,
+  pressed: boolean,
+  disabled?: boolean
+): string {
+  const { colors } = theme;
+  if (variant === 'ghost') return 'transparent';
+
+  if (disabled) {
+    return colors.neutral;
+  }
+
+  const base =
+    variant === 'primary'
+      ? colors.primary
+      : variant === 'danger'
+        ? colors.danger
+        : colors.neutral;
+
+  // pressed state is a subtle overlay using borderStrong as tint source
+  if (!pressed) return base;
+  return base;
+}
+
+function borderFor(variant: ButtonVariant, theme: ReturnType<typeof useTheme>): { borderWidth?: number; borderColor?: string } {
+  if (variant !== 'ghost') return {};
+  return { borderWidth: 1, borderColor: theme.colors.border };
+}
+
+function paddingFor(size: ButtonSize, theme: ReturnType<typeof useTheme>): { paddingHorizontal: number; paddingVertical: number; minHeight: number; minWidth?: number } {
+  switch (size) {
+    case 'sm':
+      return { paddingHorizontal: theme.spacing.md, paddingVertical: theme.spacing.sm, minHeight: 36 };
+    case 'icon':
+      return { paddingHorizontal: 0, paddingVertical: 0, minHeight: 44, minWidth: 44 };
+    case 'md':
+    default:
+      return { paddingHorizontal: theme.spacing.lg, paddingVertical: theme.spacing.md, minHeight: 44 };
+  }
+}
+
+export function Button({
+  variant = 'neutral',
+  size = 'md',
+  disabled,
+  style,
+  children,
+  ...props
+}: ButtonProps) {
+  const theme = useTheme();
+  const isDisabled = disabled ?? undefined;
+
+  return (
+    <Pressable
+      {...props}
+      disabled={isDisabled}
+      style={(state) => {
+        const pressed = state.pressed;
+        const base: ViewStyle = {
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'row',
+          borderRadius: size === 'icon' ? theme.radii.pill : theme.radii.pill,
+          backgroundColor: backgroundFor(variant, theme, pressed, isDisabled),
+          opacity: pressed && !isDisabled ? 0.92 : 1,
+          ...paddingFor(size, theme),
+          ...(borderFor(variant, theme) as ViewStyle),
+        };
+
+        const resolved =
+          typeof style === 'function'
+            ? style({ pressed, disabled: isDisabled })
+            : style;
+
+        return [base, resolved] as any;
+      }}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+

package/src/components/primitives/Card.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { type ViewProps, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Surface } from './Surface';
+import type { CardVariant, WithStyle } from './types';
+
+export type CardProps = ViewProps &
+  WithStyle<ViewStyle> & {
+    variant?: CardVariant;
+    padded?: boolean;
+    border?: boolean;
+  };
+
+export function Card({ variant = 'surface', padded = true, border = true, style, ...props }: CardProps) {
+  const theme = useTheme();
+  const radius = theme.radii.lg;
+  const padding = padded ? theme.spacing.lg : 0;
+
+  return (
+    <Surface
+      {...props}
+      variant={variant === 'surfaceRaised' ? 'surfaceRaised' : 'surface'}
+      border={border}
+      style={[{ borderRadius: radius, padding }, style]}
+    />
+  );
+}
+
+

package/src/components/primitives/Divider.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import type { DividerVariant, WithStyle } from './types';
+
+export type DividerProps = WithStyle<ViewStyle> & {
+  variant?: DividerVariant;
+};
+
+export function Divider({ variant = 'default', style }: DividerProps) {
+  const theme = useTheme();
+  const color = variant === 'subtle' ? theme.colors.border : theme.colors.borderStrong;
+  return <View style={[{ height: 1, backgroundColor: color }, style]} />;
+}
+
+

package/src/components/primitives/Icon.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { useTheme } from '../../theme';
+import type { IconColorRole } from './types';
+
+export type IconProps = {
+  /**
+   * Any icon component that supports `color` and `size` props (e.g. lucide-react-native).
+   */
+  as: React.ComponentType<{ color?: string; size?: number }>;
+  size?: number;
+  role?: IconColorRole;
+  color?: string;
+};
+
+function colorFor(role: IconColorRole, theme: ReturnType<typeof useTheme>): string {
+  const { colors } = theme;
+  switch (role) {
+    case 'muted':
+      return colors.textMuted;
+    case 'primary':
+      return colors.primary;
+    case 'danger':
+      return colors.danger;
+    case 'success':
+      return colors.success;
+    case 'warning':
+      return colors.warning;
+    case 'default':
+    default:
+      return colors.text;
+  }
+}
+
+export function Icon({ as: Comp, size = 18, role = 'default', color }: IconProps) {
+  const theme = useTheme();
+  return <Comp size={size} color={color ?? colorFor(role, theme)} />;
+}
+
+

package/src/components/primitives/MarkdownText.tsx

@@ -0,0 +1,72 @@
+import { Platform, View, type ViewStyle } from 'react-native';
+
+import Markdown from 'react-native-markdown-display';
+
+import { useTheme } from '../../theme';
+
+export type MarkdownTextVariant = 'chat' | 'mergeRequest';
+
+export type MarkdownTextProps = {
+  markdown: string;
+  variant?: MarkdownTextVariant;
+  /**
+   * Optional override for the base text color (e.g. success/error outcomes in chat).
+   */
+  bodyColor?: string;
+  style?: ViewStyle;
+};
+
+export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: MarkdownTextProps) {
+  const theme = useTheme();
+  const isDark = theme.scheme === 'dark';
+
+  const baseBodyColor = variant === 'mergeRequest' ? theme.colors.textMuted : theme.colors.text;
+  const linkColor =
+    variant === 'mergeRequest' ? (isDark ? theme.colors.primary : '#3700B3') : theme.colors.link;
+  const linkWeight = variant === 'mergeRequest' ? theme.typography.fontWeight.semibold : undefined;
+
+  const codeBgColor = isDark ? '#27272A' : '#E4E4E7';
+  const codeTextColor = isDark ? '#FFFFFF' : theme.colors.text;
+
+  const paragraphBottom = variant === 'mergeRequest' ? 8 : 6;
+  const baseLineHeight = variant === 'mergeRequest' ? 22 : 20;
+
+  return (
+    <View style={style}>
+      <Markdown
+        style={{
+          body: { color: bodyColor ?? baseBodyColor, fontSize: 14, lineHeight: baseLineHeight },
+          paragraph: { marginTop: 0, marginBottom: paragraphBottom },
+          link: { color: linkColor, fontWeight: linkWeight },
+          code_inline: {
+            backgroundColor: codeBgColor,
+            color: codeTextColor,
+            paddingHorizontal: variant === 'mergeRequest' ? 6 : 4,
+            paddingVertical: variant === 'mergeRequest' ? 2 : 0,
+            borderRadius: variant === 'mergeRequest' ? 6 : 4,
+            fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+            fontSize: 13,
+          },
+          code_block: {
+            backgroundColor: codeBgColor,
+            color: codeTextColor,
+            padding: variant === 'mergeRequest' ? 12 : 8,
+            borderRadius: variant === 'mergeRequest' ? 8 : 6,
+            marginVertical: variant === 'mergeRequest' ? 8 : 0,
+          },
+          fence: {
+            backgroundColor: codeBgColor,
+            color: codeTextColor,
+            padding: variant === 'mergeRequest' ? 12 : 8,
+            borderRadius: variant === 'mergeRequest' ? 8 : 6,
+            marginVertical: variant === 'mergeRequest' ? 8 : 0,
+          },
+        }}
+      >
+        {markdown}
+      </Markdown>
+    </View>
+  );
+}
+
+

package/src/components/primitives/Modal.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {
+  Modal as RNModal,
+  Pressable,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+import { Card } from './Card';
+
+export type ModalProps = {
+  visible: boolean;
+  onRequestClose: () => void;
+  children: React.ReactNode;
+  /**
+   * When true, tapping the backdrop closes the modal.
+   */
+  dismissOnBackdropPress?: boolean;
+  contentStyle?: ViewStyle;
+};
+
+export function Modal({
+  visible,
+  onRequestClose,
+  dismissOnBackdropPress = true,
+  children,
+  contentStyle,
+}: ModalProps) {
+  const theme = useTheme();
+
+  return (
+    <RNModal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onRequestClose}
+    >
+      <View style={{ flex: 1, backgroundColor: theme.colors.backdrop, justifyContent: 'center', padding: theme.spacing.lg }}>
+        <Pressable
+          accessibilityRole="button"
+          onPress={dismissOnBackdropPress ? onRequestClose : undefined}
+          style={{ position: 'absolute', inset: 0 }}
+        />
+        <Card variant="surfaceRaised" padded style={[{ borderRadius: theme.radii.xl }, contentStyle]}>
+          {children}
+        </Card>
+      </View>
+    </RNModal>
+  );
+}
+
+

package/src/components/primitives/Surface.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import type { SurfaceVariant, WithStyle } from './types';
+
+export type SurfaceProps = ViewProps &
+  WithStyle<ViewStyle> & {
+    variant?: SurfaceVariant;
+    border?: boolean;
+  };
+
+function backgroundFor(variant: SurfaceVariant, theme: ReturnType<typeof useTheme>): string {
+  const { colors } = theme;
+  switch (variant) {
+    case 'background':
+      return colors.background;
+    case 'surfaceRaised':
+      return colors.surfaceRaised;
+    case 'floating':
+      return colors.floatingSurface;
+    case 'surface':
+    default:
+      return colors.surface;
+  }
+}
+
+export function Surface({ variant = 'surface', border = false, style, ...props }: SurfaceProps) {
+  const theme = useTheme();
+  return (
+    <View
+      {...props}
+      style={[
+        { backgroundColor: backgroundFor(variant, theme) },
+        border ? { borderWidth: 1, borderColor: theme.colors.border } : null,
+        style,
+      ]}
+    />
+  );
+}
+
+

package/src/components/primitives/Text.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { Text as RNText, type TextProps as RNTextProps, type TextStyle } from 'react-native';
+
+import { useTheme } from '../../theme';
+import type { TextAlign, TextVariant, WithStyle } from './types';
+
+export type TextProps = RNTextProps &
+  WithStyle<TextStyle> & {
+    variant?: TextVariant;
+    align?: TextAlign;
+    /**
+     * Optional explicit color override. Prefer `variant` + theme.
+     * Use sparingly for semantic emphasis.
+     */
+    color?: string;
+  };
+
+function getVariantStyle(variant: TextVariant, theme: ReturnType<typeof useTheme>): TextStyle {
+  const { colors, typography } = theme;
+  switch (variant) {
+    case 'title':
+      return {
+        color: colors.text,
+        fontSize: typography.fontSize.xl,
+        lineHeight: typography.lineHeight.xl,
+        fontWeight: typography.fontWeight.semibold,
+      };
+    case 'caption':
+      return {
+        color: colors.text,
+        fontSize: typography.fontSize.xs,
+        lineHeight: typography.lineHeight.xs,
+        fontWeight: typography.fontWeight.medium,
+      };
+    case 'captionMuted':
+      return {
+        color: colors.textSubtle,
+        fontSize: typography.fontSize.xs,
+        lineHeight: typography.lineHeight.xs,
+        fontWeight: typography.fontWeight.medium,
+      };
+    case 'bodyMuted':
+      return {
+        color: colors.textMuted,
+        fontSize: typography.fontSize.md,
+        lineHeight: typography.lineHeight.md,
+        fontWeight: typography.fontWeight.regular,
+      };
+    case 'body':
+    default:
+      return {
+        color: colors.text,
+        fontSize: typography.fontSize.md,
+        lineHeight: typography.lineHeight.md,
+        fontWeight: typography.fontWeight.regular,
+      };
+  }
+}
+
+export function Text({
+  variant = 'body',
+  align,
+  color,
+  style,
+  ...props
+}: TextProps) {
+  const theme = useTheme();
+  const base = getVariantStyle(variant, theme);
+
+  return (
+    <RNText
+      {...props}
+      style={[
+        base,
+        align ? { textAlign: align } : null,
+        color ? { color } : null,
+        style,
+      ]}
+    />
+  );
+}
+
+

package/src/components/primitives/index.ts

@@ -0,0 +1,35 @@
+export { Text } from './Text';
+export type { TextProps } from './Text';
+
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Surface } from './Surface';
+export type { SurfaceProps } from './Surface';
+
+export { Card } from './Card';
+export type { CardProps } from './Card';
+
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';
+
+export { Icon } from './Icon';
+export type { IconProps } from './Icon';
+
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';
+
+export type {
+  ButtonSize,
+  ButtonVariant,
+  CardVariant,
+  DividerVariant,
+  IconColorRole,
+  SurfaceVariant,
+  TextVariant,
+} from './types';
+
+