@appsupportkit/support-sdk 0.1.1 → 0.2.0

package/src/components/BottomSheet.tsx

@@ -1,10 +1,15 @@
 // Bottom sheet built on the built-in Modal + Animated APIs.
 //
 // Why no sheet library: the SDK needs exactly one detent, a drag handle, a
-// backdrop fade, and a 180ms ease-out slide — all achievable with core APIs.
+// backdrop fade, and a short ease-out slide — all achievable with core APIs.
 // Skipping reanimated/gesture-handler keeps the package free of native
 // dependencies and install friction for consumers.
-import { useCallback, useEffect, useRef, type ReactNode } from 'react';
+//
+// `visible` drives a single animation path: the sheet stays mounted until
+// its exit finishes, so closing from the header button, the backdrop, the
+// hardware back button, or a drag all animate identically — and a reopen
+// always starts from off-screen instead of appearing already in place.
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
 import {
   Animated,
   Easing,
@@ -17,7 +22,8 @@ import {
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import type { SupportTheme } from '../theme';
 
-const SLIDE_MS = 180; // motion.slow — ease-out, no springs, no bounce.
+const SLIDE_MS = 260;
+const FADE_MS = 200;
 
 export function BottomSheet({
   visible,
@@ -31,57 +37,67 @@ export function BottomSheet({
   children: ReactNode;
 }) {
   const { height: windowHeight } = useWindowDimensions();
-  const sheetHeight = Math.min(windowHeight * 0.82, 640);
+  const sheetHeight = Math.min(windowHeight * 0.88, 720);
 
+  const [rendered, setRendered] = useState(false);
   const translateY = useRef(new Animated.Value(sheetHeight)).current;
   const backdrop = useRef(new Animated.Value(0)).current;
+  /** Whether the entrance has already played for the current open. */
+  const shown = useRef(false);
 
-  const animateIn = useCallback(() => {
-    Animated.parallel([
-      Animated.timing(translateY, {
-        toValue: 0,
-        duration: SLIDE_MS,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-      Animated.timing(backdrop, {
-        toValue: 1,
-        duration: SLIDE_MS,
-        easing: Easing.out(Easing.cubic),
-        useNativeDriver: true,
-      }),
-    ]).start();
-  }, [translateY, backdrop]);
+  useEffect(() => {
+    if (visible) setRendered(true);
+  }, [visible]);
 
-  const animateOut = useCallback(
-    (done: () => void) => {
+  useEffect(() => {
+    if (!rendered) return;
+
+    if (visible && !shown.current) {
+      shown.current = true;
+      translateY.setValue(sheetHeight);
       Animated.parallel([
         Animated.timing(translateY, {
-          toValue: sheetHeight,
+          toValue: 0,
           duration: SLIDE_MS,
+          easing: Easing.bezier(0.16, 1, 0.3, 1),
+          useNativeDriver: true,
+        }),
+        Animated.timing(backdrop, {
+          toValue: 1,
+          duration: FADE_MS,
           easing: Easing.out(Easing.cubic),
           useNativeDriver: true,
         }),
+      ]).start();
+      return;
+    }
+
+    if (!visible && shown.current) {
+      shown.current = false;
+      // Starts from wherever the sheet is now, so a drag that crosses the
+      // dismiss threshold continues rather than jumping.
+      Animated.parallel([
+        Animated.timing(translateY, {
+          toValue: sheetHeight,
+          duration: theme.motion.slow,
+          easing: Easing.in(Easing.cubic),
+          useNativeDriver: true,
+        }),
         Animated.timing(backdrop, {
           toValue: 0,
-          duration: SLIDE_MS,
-          easing: Easing.out(Easing.cubic),
+          duration: theme.motion.slow,
+          easing: Easing.in(Easing.cubic),
           useNativeDriver: true,
         }),
       ]).start(({ finished }) => {
-        if (finished) done();
+        if (finished) setRendered(false);
       });
-    },
-    [translateY, backdrop, sheetHeight],
-  );
-
-  useEffect(() => {
-    if (visible) animateIn();
-  }, [visible, animateIn]);
+    }
+  }, [rendered, visible, sheetHeight, translateY, backdrop, theme.motion.slow]);
 
   const requestClose = useCallback(() => {
-    animateOut(onClose);
-  }, [animateOut, onClose]);
+    onClose();
+  }, [onClose]);
 
   // Drag handle: follow the finger downward; past 25% (or a flick), dismiss.
   const panResponder = useRef(
@@ -97,7 +113,7 @@ export function BottomSheet({
         } else {
           Animated.timing(translateY, {
             toValue: 0,
-            duration: SLIDE_MS,
+            duration: theme.motion.slow,
             easing: Easing.out(Easing.cubic),
             useNativeDriver: true,
           }).start();
@@ -106,7 +122,7 @@ export function BottomSheet({
     }),
   ).current;
 
-  if (!visible) return null;
+  if (!rendered) return null;
 
   return (
     <Modal
@@ -125,7 +141,7 @@ export function BottomSheet({
               right: 0,
               bottom: 0,
               left: 0,
-              backgroundColor: 'rgba(0,0,0,0.5)',
+              backgroundColor: 'rgba(0,0,0,0.55)',
               opacity: backdrop,
             }}
           >
@@ -139,25 +155,27 @@ export function BottomSheet({
           <Animated.View
             style={{
               height: sheetHeight,
-              backgroundColor: theme.colors.overlay,
+              backgroundColor: theme.colors.bg,
               borderTopLeftRadius: theme.radii.sheet,
               borderTopRightRadius: theme.radii.sheet,
               borderWidth: 1,
               borderBottomWidth: 0,
               borderColor: theme.colors.border,
+              overflow: 'hidden',
               transform: [{ translateY }],
+              ...theme.shadows.sheet,
             }}
           >
             {/* Drag handle */}
             <View
               {...panResponder.panHandlers}
-              style={{ alignItems: 'center', paddingVertical: 10 }}
+              style={{ alignItems: 'center', paddingTop: 10, paddingBottom: 6 }}
             >
               <View
                 style={{
-                  width: 32,
-                  height: 4,
-                  borderRadius: 2,
+                  width: 40,
+                  height: 5,
+                  borderRadius: 3,
                   backgroundColor: theme.colors.borderStrong,
                 }}
               />

package/src/components/LauncherButton.tsx

@@ -0,0 +1,217 @@
+// The launcher: the one piece of the SDK that lives inside the host app's
+// own UI, so it has to look intentional next to anything. Three variants
+// cover the placements that actually occur — a floating action button, a
+// bordered button in a header, and a bare icon in a toolbar.
+import { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Easing,
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import type { SupportTheme } from '../theme';
+import type { LauncherVariant } from '../types';
+import { ChatBubbleMark } from './icons';
+
+const PRESS_SCALE = 0.93;
+
+/** Counts stay legible: three digits in a pill is not a design. */
+function badgeLabel(unread: number): string {
+  return unread > 99 ? '99+' : String(unread);
+}
+
+export function LauncherButton({
+  theme,
+  unread,
+  variant = 'solid',
+  size = 52,
+  label,
+  style,
+  onPress,
+}: {
+  theme: SupportTheme;
+  unread: number;
+  variant?: LauncherVariant;
+  size?: number;
+  /** Renders a pill with text next to the mark instead of a circle. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+  onPress: () => void;
+}) {
+  const scale = useRef(new Animated.Value(1)).current;
+  const pulse = useRef(new Animated.Value(0)).current;
+  const previousUnread = useRef(unread);
+
+  // A new reply pulses the halo twice, then stops. Enough to catch the eye
+  // on the way past; not a permanently animating element in someone's app.
+  useEffect(() => {
+    if (unread > previousUnread.current) {
+      pulse.setValue(0);
+      const animation = Animated.loop(
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 1600,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        { iterations: 2 },
+      );
+      animation.start(() => pulse.setValue(0));
+      previousUnread.current = unread;
+      return () => animation.stop();
+    }
+    previousUnread.current = unread;
+    return undefined;
+  }, [unread, pulse]);
+
+  const press = (to: number) =>
+    Animated.timing(scale, {
+      toValue: to,
+      duration: to === 1 ? theme.motion.base : theme.motion.fast,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+
+  const solid = variant === 'solid';
+  const soft = variant === 'soft';
+  const fill = solid
+    ? theme.colors.accent
+    : soft
+      ? theme.colors.surface
+      : 'transparent';
+  const markColor = solid
+    ? theme.colors.accentForeground
+    : soft
+      ? theme.colors.accent
+      : theme.launcher.minimalMark;
+  // Dots are punched out of the bubble in whatever sits behind the mark —
+  // the button's own fill, or the app background when there isn't one.
+  const markHoleColor = solid
+    ? theme.colors.accent
+    : soft
+      ? theme.colors.surface
+      : theme.colors.bg;
+  // Dark: a hairline separates the fill from a near-black app background.
+  // Light: the accent-tinted shadow already does that, so the ring only has
+  // to keep the edge from looking soft.
+  const border = solid
+    ? { borderWidth: 1, borderColor: theme.launcher.solidRing }
+    : soft
+      ? { borderWidth: 1, borderColor: theme.colors.border }
+      : { borderWidth: 0, borderColor: 'transparent' };
+  const badgeBg = solid ? theme.colors.accentForeground : theme.colors.accent;
+  const badgeFg = solid ? theme.colors.accent : theme.colors.accentForeground;
+
+  const height = label ? Math.max(44, size * 0.84) : size;
+  const markSize = Math.round(size * (label ? 0.36 : 0.42));
+
+  return (
+    <Animated.View
+      style={[{ transform: [{ scale }] }, style]}
+      // The halo and badge sit outside the button's bounds.
+      pointerEvents="box-none"
+    >
+      {unread > 0 && (
+        <Animated.View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: label ? undefined : size,
+            right: label ? 0 : undefined,
+            height,
+            borderRadius: theme.radii.pill,
+            backgroundColor: theme.colors.accent,
+            opacity: pulse.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0.28, 0],
+            }),
+            transform: [
+              {
+                scale: pulse.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [1, 1.5],
+                }),
+              },
+            ],
+          }}
+        />
+      )}
+
+      <Pressable
+        onPress={onPress}
+        onPressIn={() => press(PRESS_SCALE)}
+        onPressOut={() => press(1)}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel={
+          unread > 0
+            ? `Support, ${unread} unread ${unread === 1 ? 'reply' : 'replies'}`
+            : 'Support'
+        }
+        style={{
+          height,
+          width: label ? undefined : size,
+          paddingHorizontal: label ? 18 : 0,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: 9,
+          borderRadius: theme.radii.pill,
+          backgroundColor: fill,
+          ...border,
+          ...(variant === 'minimal' ? null : theme.shadows.launcher),
+        }}
+      >
+        <ChatBubbleMark color={markColor} dotColor={markHoleColor} size={markSize} />
+        {label !== undefined && (
+          <Text
+            style={{
+              fontSize: 15,
+              fontWeight: '600',
+              letterSpacing: -0.1,
+              color: solid ? theme.colors.accentForeground : theme.colors.textPrimary,
+            }}
+          >
+            {label}
+          </Text>
+        )}
+      </Pressable>
+
+      {unread > 0 && (
+        <View
+          pointerEvents="none"
+          style={{
+            position: 'absolute',
+            top: -5,
+            right: -5,
+            minWidth: 19,
+            height: 19,
+            borderRadius: theme.radii.pill,
+            paddingHorizontal: 5,
+            backgroundColor: badgeBg,
+            alignItems: 'center',
+            justifyContent: 'center',
+            ...theme.shadows.badge,
+          }}
+        >
+          <Text
+            style={{
+              fontSize: 11,
+              lineHeight: 14,
+              fontWeight: '700',
+              color: badgeFg,
+              fontVariant: ['tabular-nums'],
+            }}
+          >
+            {badgeLabel(unread)}
+          </Text>
+        </View>
+      )}
+    </Animated.View>
+  );
+}