@appsupportkit/support-sdk 0.1.0

package/src/components/icons.tsx

@@ -0,0 +1,189 @@
+// Minimal geometric icons built from Views — keeps the SDK free of
+// react-native-svg / icon-font dependencies. 1.5px strokes to match the
+// Lucide icons used on the web dashboard.
+import { View, type ViewStyle } from 'react-native';
+
+const STROKE = 1.5;
+
+export function ChatIcon({ color, size = 16 }: { color: string; size?: number }) {
+  const dot: ViewStyle = {
+    width: size * 0.11,
+    height: size * 0.11,
+    borderRadius: size,
+    backgroundColor: color,
+  };
+  return (
+    <View
+      style={{
+        width: size,
+        height: size * 0.8,
+        borderWidth: STROKE,
+        borderColor: color,
+        borderRadius: size * 0.25,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: size * 0.11,
+      }}
+    >
+      <View style={dot} />
+      <View style={dot} />
+      <View style={dot} />
+    </View>
+  );
+}
+
+export function PlusCircleIcon({ color, size = 16 }: { color: string; size?: number }) {
+  const bar = size * 0.45;
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderWidth: STROKE,
+        borderColor: color,
+        borderRadius: size,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <View style={{ width: bar, height: STROKE, backgroundColor: color }} />
+      <View
+        style={{
+          width: STROKE,
+          height: bar,
+          backgroundColor: color,
+          position: 'absolute',
+        }}
+      />
+    </View>
+  );
+}
+
+export function AlertCircleIcon({ color, size = 16 }: { color: string; size?: number }) {
+  return (
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderWidth: STROKE,
+        borderColor: color,
+        borderRadius: size,
+        alignItems: 'center',
+        paddingTop: size * 0.2,
+      }}
+    >
+      <View style={{ width: STROKE, height: size * 0.32, backgroundColor: color }} />
+      <View
+        style={{
+          width: STROKE + 0.5,
+          height: STROKE + 0.5,
+          borderRadius: 2,
+          backgroundColor: color,
+          marginTop: size * 0.09,
+        }}
+      />
+    </View>
+  );
+}
+
+/** Chevron built from two borders, rotated. direction: right | left | down. */
+export function Chevron({
+  color,
+  size = 10,
+  direction = 'right',
+}: {
+  color: string;
+  size?: number;
+  direction?: 'right' | 'left' | 'down';
+}) {
+  const rotation =
+    direction === 'right' ? '-45deg' : direction === 'left' ? '135deg' : '45deg';
+  return (
+    <View
+      style={{
+        width: size * 0.7,
+        height: size * 0.7,
+        borderRightWidth: STROKE,
+        borderBottomWidth: STROKE,
+        borderColor: color,
+        transform: [{ rotate: rotation }],
+      }}
+    />
+  );
+}
+
+export function CloseIcon({ color, size = 14 }: { color: string; size?: number }) {
+  const bar: ViewStyle = {
+    position: 'absolute',
+    width: size,
+    height: STROKE,
+    backgroundColor: color,
+    borderRadius: 1,
+  };
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={[bar, { transform: [{ rotate: '45deg' }] }]} />
+      <View style={[bar, { transform: [{ rotate: '-45deg' }] }]} />
+    </View>
+  );
+}
+
+export function CheckIcon({ color, size = 16 }: { color: string; size?: number }) {
+  return (
+    <View
+      style={{
+        width: size * 0.9,
+        height: size * 0.5,
+        borderLeftWidth: STROKE + 0.5,
+        borderBottomWidth: STROKE + 0.5,
+        borderColor: color,
+        transform: [{ rotate: '-45deg' }],
+        marginBottom: size * 0.15,
+      }}
+    />
+  );
+}
+
+/** The chat-bubble mark on the floating support button. */
+export function BubbleMark({ color, size = 20 }: { color: string; size?: number }) {
+  const dot: ViewStyle = {
+    width: size * 0.12,
+    height: size * 0.12,
+    borderRadius: size,
+    backgroundColor: color,
+  };
+  return (
+    <View style={{ alignItems: 'flex-start' }}>
+      <View
+        style={{
+          width: size,
+          height: size * 0.78,
+          borderWidth: STROKE + 0.25,
+          borderColor: color,
+          borderRadius: size * 0.28,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: size * 0.1,
+        }}
+      >
+        <View style={dot} />
+        <View style={dot} />
+        <View style={dot} />
+      </View>
+      <View
+        style={{
+          width: size * 0.22,
+          height: size * 0.22,
+          borderLeftWidth: STROKE + 0.25,
+          borderBottomWidth: STROKE + 0.25,
+          borderColor: color,
+          marginLeft: size * 0.18,
+          marginTop: -STROKE,
+          transform: [{ skewX: '-12deg' }],
+        }}
+      />
+    </View>
+  );
+}

package/src/components/primitives.tsx

@@ -0,0 +1,298 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import {
+  Animated,
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import type { SupportTheme } from '../theme';
+import type { QueryStatus, QueryType } from '../types';
+import { QUERY_TYPE_LABEL } from '../types';
+import { AlertCircleIcon, ChatIcon, PlusCircleIcon } from './icons';
+
+export function typeIcon(type: QueryType, color: string, size = 15): ReactNode {
+  if (type === 'bug_report') return <AlertCircleIcon color={color} size={size} />;
+  if (type === 'feature_request') return <PlusCircleIcon color={color} size={size} />;
+  return <ChatIcon color={color} size={size} />;
+}
+
+export function typeColor(type: QueryType, theme: SupportTheme): string {
+  if (type === 'bug_report') return theme.colors.statusDanger;
+  if (type === 'feature_request') return theme.colors.statusProgress;
+  return theme.colors.statusOpen;
+}
+
+/** Status dot + label — same visual language as the dashboard. */
+export function StatusIndicator({
+  status,
+  theme,
+}: {
+  status: QueryStatus;
+  theme: SupportTheme;
+}) {
+  const color =
+    status === 'open' ? theme.colors.statusOpen : theme.colors.statusResolved;
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+      <View
+        style={{ width: 6, height: 6, borderRadius: 3, backgroundColor: color }}
+      />
+      <Text style={{ fontSize: 12, color }}>
+        {status === 'open' ? 'Open' : 'Resolved'}
+      </Text>
+    </View>
+  );
+}
+
+/** Pressable row with the standard hover/press wash. */
+export function PressableRow({
+  onPress,
+  children,
+  theme,
+  style,
+  accessibilityLabel,
+}: {
+  onPress: () => void;
+  children: ReactNode;
+  theme: SupportTheme;
+  style?: StyleProp<ViewStyle>;
+  accessibilityLabel?: string;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={({ pressed }) => [
+        { backgroundColor: pressed ? theme.colors.surfaceHover : 'transparent' },
+        style,
+      ]}
+    >
+      {children}
+    </Pressable>
+  );
+}
+
+export function PrimaryButton({
+  label,
+  onPress,
+  disabled,
+  theme,
+}: {
+  label: string;
+  onPress: () => void;
+  disabled?: boolean;
+  theme: SupportTheme;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      style={({ pressed }) => ({
+        height: 36,
+        paddingHorizontal: 14,
+        borderRadius: theme.radii.control,
+        backgroundColor: pressed
+          ? theme.colors.accentHover
+          : theme.colors.accent,
+        opacity: disabled ? 0.5 : 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <Text
+        style={{
+          color: theme.colors.accentForeground,
+          fontSize: 13,
+          fontWeight: '500',
+        }}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+export function SecondaryButton({
+  label,
+  onPress,
+  theme,
+}: {
+  label: string;
+  onPress: () => void;
+  theme: SupportTheme;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      style={({ pressed }) => ({
+        height: 32,
+        paddingHorizontal: 12,
+        borderRadius: theme.radii.control,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        backgroundColor: pressed
+          ? theme.colors.surfaceHover
+          : theme.colors.surface,
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <Text style={{ color: theme.colors.textPrimary, fontSize: 12, fontWeight: '500' }}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+/** Small muted icon + one line — no illustrations. */
+export function EmptyState({
+  message,
+  theme,
+  icon,
+}: {
+  message: string;
+  theme: SupportTheme;
+  icon?: ReactNode;
+}) {
+  return (
+    <View style={{ alignItems: 'center', paddingVertical: 40, gap: 8 }}>
+      {icon ?? <ChatIcon color={theme.colors.textTertiary} size={16} />}
+      <Text style={{ fontSize: 13, color: theme.colors.textSecondary }}>
+        {message}
+      </Text>
+    </View>
+  );
+}
+
+/** Inline failure state with retry — errors are designed, not toasted. */
+export function ErrorState({
+  message,
+  onRetry,
+  theme,
+}: {
+  message: string;
+  onRetry: () => void;
+  theme: SupportTheme;
+}) {
+  return (
+    <View style={{ alignItems: 'center', paddingVertical: 32, gap: 10 }}>
+      <Text style={{ fontSize: 13, color: theme.colors.textSecondary }}>
+        {message}
+      </Text>
+      <SecondaryButton label="Retry" onPress={onRetry} theme={theme} />
+    </View>
+  );
+}
+
+/** Pulsing block matching final layout dimensions. */
+export function SkeletonBlock({
+  width,
+  height,
+  theme,
+  style,
+}: {
+  width: number | `${number}%`;
+  height: number;
+  theme: SupportTheme;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const opacity = useRef(new Animated.Value(0.5)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.5,
+          duration: 600,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width,
+          height,
+          borderRadius: theme.radii.control,
+          backgroundColor: theme.colors.surfaceActive,
+          opacity,
+        },
+        style,
+      ]}
+    />
+  );
+}
+
+export const textStyles = {
+  title: (theme: SupportTheme): TextStyle => ({
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    color: theme.colors.textPrimary,
+  }),
+  body: (theme: SupportTheme): TextStyle => ({
+    fontSize: 14,
+    color: theme.colors.textPrimary,
+    lineHeight: 20,
+  }),
+  secondary: (theme: SupportTheme): TextStyle => ({
+    fontSize: 13,
+    color: theme.colors.textSecondary,
+  }),
+  meta: (theme: SupportTheme): TextStyle => ({
+    fontSize: 11,
+    color: theme.colors.textTertiary,
+    fontVariant: ['tabular-nums'],
+  }),
+};
+
+export function TypeChipView({
+  type,
+  theme,
+}: {
+  type: QueryType;
+  theme: SupportTheme;
+}) {
+  const color = typeColor(type, theme);
+  const bg =
+    type === 'bug_report'
+      ? theme.colors.statusDangerBg
+      : type === 'feature_request'
+        ? theme.colors.statusProgressBg
+        : theme.colors.statusOpenBg;
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: theme.radii.control,
+        backgroundColor: bg,
+        alignSelf: 'flex-start',
+      }}
+    >
+      {typeIcon(type, color, 11)}
+      <Text style={{ fontSize: 11, fontWeight: '500', color }}>
+        {QUERY_TYPE_LABEL[type]}
+      </Text>
+    </View>
+  );
+}

package/src/components/screens/ComposeScreen.tsx

@@ -0,0 +1,163 @@
+import { useState } from 'react';
+import { KeyboardAvoidingView, Platform, Text, TextInput, View } from 'react-native';
+import type { SupportTheme } from '../../theme';
+import type { QueryType } from '../../types';
+import { QUERY_TYPE_LABEL, USER_MESSAGE_MAX, USER_MESSAGE_MIN } from '../../types';
+import { CheckIcon, Chevron } from '../icons';
+import { PressableRow, PrimaryButton, textStyles } from '../primitives';
+
+export function ComposeScreen({
+  theme,
+  type,
+  onBack,
+  onSubmit,
+}: {
+  theme: SupportTheme;
+  type: QueryType;
+  onBack: () => void;
+  /** Resolves true on success. */
+  onSubmit: (message: string) => Promise<boolean>;
+}) {
+  const [message, setMessage] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  const trimmed = message.trim();
+  const valid =
+    trimmed.length >= USER_MESSAGE_MIN && trimmed.length <= USER_MESSAGE_MAX;
+  const overLimit = message.length > USER_MESSAGE_MAX;
+
+  async function handleSubmit() {
+    if (!valid || submitting) return;
+    setSubmitting(true);
+    setFailed(false);
+    const ok = await onSubmit(trimmed);
+    setSubmitting(false);
+    if (ok) setSent(true);
+    else setFailed(true);
+  }
+
+  if (sent) {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 12, padding: 24 }}>
+        <View
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: 20,
+            borderWidth: 1,
+            borderColor: theme.colors.statusResolved,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <CheckIcon color={theme.colors.statusResolved} size={14} />
+        </View>
+        <Text style={textStyles.body(theme)}>Sent</Text>
+        <Text style={[textStyles.secondary(theme), { textAlign: 'center' }]}>
+          We&apos;ll reply here. You&apos;ll see the thread under Open.
+        </Text>
+        <View style={{ marginTop: 8 }}>
+          <PrimaryButton label="Done" onPress={onBack} theme={theme} />
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      {/* Header: back + read-only chosen type */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+          paddingHorizontal: 12,
+          paddingBottom: 12,
+        }}
+      >
+        <PressableRow
+          onPress={onBack}
+          theme={theme}
+          accessibilityLabel="Back"
+          style={{ padding: 6, borderRadius: theme.radii.control }}
+        >
+          <Chevron color={theme.colors.textSecondary} direction="left" size={12} />
+        </PressableRow>
+        <Text style={textStyles.title(theme)}>{QUERY_TYPE_LABEL[type]}</Text>
+      </View>
+
+      <View style={{ flex: 1, paddingHorizontal: 16 }}>
+        <TextInput
+          value={message}
+          onChangeText={(v) => {
+            setMessage(v);
+            setFailed(false);
+          }}
+          multiline
+          autoFocus
+          placeholder={
+            type === 'bug_report'
+              ? 'What happened, and what did you expect?'
+              : type === 'feature_request'
+                ? 'What would you like to see?'
+                : 'What should we know?'
+          }
+          placeholderTextColor={theme.colors.textTertiary}
+          style={{
+            minHeight: 120,
+            maxHeight: 220,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radii.control,
+            backgroundColor: theme.colors.surface,
+            color: theme.colors.textPrimary,
+            fontSize: 14,
+            lineHeight: 20,
+            padding: 12,
+            textAlignVertical: 'top',
+          }}
+        />
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: 8,
+            gap: 12,
+          }}
+        >
+          <Text
+            style={[
+              textStyles.meta(theme),
+              overLimit && { color: theme.colors.statusDanger },
+            ]}
+          >
+            {message.length}/{USER_MESSAGE_MAX}
+          </Text>
+          {trimmed.length > 0 && trimmed.length < USER_MESSAGE_MIN && (
+            <Text style={textStyles.meta(theme)}>
+              At least {USER_MESSAGE_MIN} characters
+            </Text>
+          )}
+          {failed && (
+            <Text style={{ fontSize: 11, color: theme.colors.statusDanger }}>
+              Couldn&apos;t send — try again
+            </Text>
+          )}
+          <View style={{ marginLeft: 'auto' }}>
+            <PrimaryButton
+              label={submitting ? 'Sending…' : 'Send'}
+              onPress={handleSubmit}
+              disabled={!valid || submitting}
+              theme={theme}
+            />
+          </View>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}