@harkenapp/sdk-react-native 0.0.1-alpha.1 → 0.0.1-alpha.2

package/src/api/retry.test.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  calculateRetryDelay,
+  isRetryableError,
+  withRetry,
+  DEFAULT_RETRY_CONFIG,
+  sleep,
+} from "./retry";
+import { HarkenApiError, HarkenNetworkError } from "./errors";
+
+describe("calculateRetryDelay", () => {
+  beforeEach(() => {
+    // Mock Math.random for predictable jitter
+    vi.spyOn(Math, "random").mockReturnValue(0.5);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("calculates exponential backoff correctly", () => {
+    const config = { ...DEFAULT_RETRY_CONFIG, jitter: 0 };
+
+    expect(calculateRetryDelay(0, config)).toBe(1000); // 1000 * 2^0 = 1000
+    expect(calculateRetryDelay(1, config)).toBe(2000); // 1000 * 2^1 = 2000
+    expect(calculateRetryDelay(2, config)).toBe(4000); // 1000 * 2^2 = 4000
+    expect(calculateRetryDelay(3, config)).toBe(8000); // 1000 * 2^3 = 8000
+  });
+
+  it("caps delay at maxDelay", () => {
+    const config = { ...DEFAULT_RETRY_CONFIG, jitter: 0, maxDelay: 5000 };
+
+    expect(calculateRetryDelay(0, config)).toBe(1000);
+    expect(calculateRetryDelay(3, config)).toBe(5000); // capped
+    expect(calculateRetryDelay(10, config)).toBe(5000); // capped
+  });
+
+  it("adds jitter within expected range", () => {
+    const config = { ...DEFAULT_RETRY_CONFIG, jitter: 0.1 };
+
+    // With random = 0.5, jitter should be 0 (centered)
+    // For attempt 0: base = 1000, jitterRange = 100, jitter = 0
+    const delay = calculateRetryDelay(0, config);
+    expect(delay).toBe(1000);
+  });
+
+  it("respects Retry-After header when provided", () => {
+    const config = DEFAULT_RETRY_CONFIG;
+
+    // 5 seconds should be 5000ms
+    expect(calculateRetryDelay(0, config, 5)).toBe(5000);
+    expect(calculateRetryDelay(2, config, 10)).toBe(10000);
+  });
+
+  it("caps Retry-After at maxDelay", () => {
+    const config = { ...DEFAULT_RETRY_CONFIG, maxDelay: 5000 };
+
+    // 60 seconds should be capped to 5000ms
+    expect(calculateRetryDelay(0, config, 60)).toBe(5000);
+  });
+
+  it("ignores zero or negative Retry-After", () => {
+    const config = { ...DEFAULT_RETRY_CONFIG, jitter: 0 };
+
+    // Should fall back to exponential backoff
+    expect(calculateRetryDelay(0, config, 0)).toBe(1000);
+    expect(calculateRetryDelay(0, config, -5)).toBe(1000);
+  });
+});
+
+describe("isRetryableError", () => {
+  it("returns true for HarkenNetworkError", () => {
+    const error = new HarkenNetworkError("Network failed");
+    expect(isRetryableError(error)).toBe(true);
+  });
+
+  it("returns true for HarkenApiError with 429 status", () => {
+    const error = new HarkenApiError(429, {
+      error: { code: "rate_limited", message: "Too many requests" },
+    });
+    expect(isRetryableError(error)).toBe(true);
+  });
+
+  it("returns true for HarkenApiError with 5xx status", () => {
+    const error500 = new HarkenApiError(500, {
+      error: { code: "internal_error", message: "Server error" },
+    });
+    const error503 = new HarkenApiError(503, {
+      error: { code: "service_unavailable", message: "Service unavailable" },
+    });
+    expect(isRetryableError(error500)).toBe(true);
+    expect(isRetryableError(error503)).toBe(true);
+  });
+
+  it("returns false for HarkenApiError with 4xx status (except 429)", () => {
+    const error400 = new HarkenApiError(400, {
+      error: { code: "validation_error", message: "Invalid input" },
+    });
+    const error401 = new HarkenApiError(401, {
+      error: { code: "unauthorized", message: "Unauthorized" },
+    });
+    const error404 = new HarkenApiError(404, {
+      error: { code: "not_found", message: "Not found" },
+    });
+    expect(isRetryableError(error400)).toBe(false);
+    expect(isRetryableError(error401)).toBe(false);
+    expect(isRetryableError(error404)).toBe(false);
+  });
+
+  it("returns false for generic Error", () => {
+    expect(isRetryableError(new Error("Generic error"))).toBe(false);
+  });
+
+  it("returns false for non-Error values", () => {
+    expect(isRetryableError(null)).toBe(false);
+    expect(isRetryableError(undefined)).toBe(false);
+    expect(isRetryableError("error string")).toBe(false);
+    expect(isRetryableError({ code: "error" })).toBe(false);
+  });
+});
+
+describe("sleep", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("resolves after specified delay", async () => {
+    const promise = sleep(1000);
+    vi.advanceTimersByTime(1000);
+    await expect(promise).resolves.toBeUndefined();
+  });
+});
+
+describe("withRetry", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.spyOn(Math, "random").mockReturnValue(0.5);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("returns result on first successful attempt", async () => {
+    const fn = vi.fn().mockResolvedValue("success");
+
+    const result = await withRetry(fn);
+
+    expect(result).toBe("success");
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("retries on retryable error and succeeds", async () => {
+    const fn = vi
+      .fn()
+      .mockRejectedValueOnce(new HarkenNetworkError("Network failed"))
+      .mockResolvedValue("success");
+
+    const promise = withRetry(fn, { maxRetries: 3 });
+
+    // First call fails immediately
+    await vi.advanceTimersByTimeAsync(0);
+
+    // Wait for retry delay (1000ms for attempt 0)
+    await vi.advanceTimersByTimeAsync(1000);
+
+    const result = await promise;
+    expect(result).toBe("success");
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+
+  it("throws after max retries exceeded", async () => {
+    const networkError = new HarkenNetworkError("Network failed");
+    const fn = vi.fn().mockRejectedValue(networkError);
+
+    // Attach rejection handler immediately to avoid unhandled rejection warning
+    let caughtError: unknown;
+    const promise = withRetry(fn, { maxRetries: 2, jitter: 0 }).catch((e) => {
+      caughtError = e;
+    });
+
+    // Initial attempt + retries with delays
+    await vi.advanceTimersByTimeAsync(0);
+    await vi.advanceTimersByTimeAsync(1000);
+    await vi.advanceTimersByTimeAsync(2000);
+
+    await promise;
+
+    expect(caughtError).toBe(networkError);
+    expect(fn).toHaveBeenCalledTimes(3); // 1 initial + 2 retries
+  });
+
+  it("does not retry non-retryable errors", async () => {
+    const validationError = new HarkenApiError(400, {
+      error: { code: "validation_error", message: "Invalid input" },
+    });
+    const fn = vi.fn().mockRejectedValue(validationError);
+
+    await expect(withRetry(fn, { maxRetries: 3 })).rejects.toThrow(validationError);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("uses default config when none provided", async () => {
+    const fn = vi.fn().mockResolvedValue("success");
+
+    const result = await withRetry(fn);
+
+    expect(result).toBe("success");
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("merges partial config with defaults", async () => {
+    const fn = vi
+      .fn()
+      .mockRejectedValueOnce(new HarkenNetworkError("Network failed"))
+      .mockResolvedValue("success");
+
+    const promise = withRetry(fn, { baseDelay: 500 });
+
+    await vi.advanceTimersByTimeAsync(0);
+    // Should use custom baseDelay of 500ms
+    await vi.advanceTimersByTimeAsync(500);
+
+    const result = await promise;
+    expect(result).toBe("success");
+  });
+
+  it("respects Retry-After from HarkenApiError", async () => {
+    const rateLimitError = new HarkenApiError(
+      429,
+      { error: { code: "rate_limited", message: "Too many requests" } },
+      { retryAfter: 5 }
+    );
+    const fn = vi.fn().mockRejectedValueOnce(rateLimitError).mockResolvedValue("success");
+
+    const promise = withRetry(fn, { maxRetries: 3, jitter: 0 });
+
+    await vi.advanceTimersByTimeAsync(0);
+    // Should wait 5000ms (Retry-After: 5 seconds)
+    await vi.advanceTimersByTimeAsync(5000);
+
+    const result = await promise;
+    expect(result).toBe("success");
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+});

package/src/api/retry.ts

@@ -1,4 +1,4 @@
-import { HarkenApiError, HarkenNetworkError } from './errors';
+import { HarkenApiError, HarkenNetworkError } from "./errors";
 
 export interface RetryConfig {
   /** Maximum number of retry attempts (default: 3) */
@@ -45,9 +45,7 @@ export function calculateRetryDelay(
 /**
  * Check if an error is retryable.
  */
-export function isRetryableError(
-  error: unknown
-): error is HarkenApiError | HarkenNetworkError {
+export function isRetryableError(error: unknown): error is HarkenApiError | HarkenNetworkError {
   if (error instanceof HarkenApiError) {
     return error.isRetryable;
   }
@@ -86,8 +84,7 @@ export async function withRetry<T>(
       }
 
       // Calculate delay, respecting Retry-After header if present
-      const retryAfter =
-        error instanceof HarkenApiError ? error.retryAfter : undefined;
+      const retryAfter = error instanceof HarkenApiError ? error.retryAfter : undefined;
 
       const delay = calculateRetryDelay(attempt, fullConfig, retryAfter);
       await sleep(delay);

package/src/attachments/FeedbackSheet.tsx

@@ -1,26 +1,20 @@
-import React, { useState, useCallback } from 'react';
-import {
-  View,
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-  Alert,
-} from 'react-native';
-import type { ViewStyle } from 'react-native';
-import type { components } from '../types/index.js';
-import { useHarkenTheme, useFeedback } from '../hooks';
-import { ThemedText } from '../components/ThemedText';
-import { ThemedTextInput } from '../components/ThemedTextInput';
-import { ThemedButton } from '../components/ThemedButton';
-import { CategorySelector, DEFAULT_CATEGORIES } from '../components/CategorySelector';
-import type { CategoryOption } from '../components/CategorySelector';
-import type { FeedbackCategory } from '../types';
-import { useAttachmentPicker } from '../hooks/useAttachmentPicker';
-import type { AttachmentSourceConfig } from '../hooks/useAttachmentPicker';
-import { AttachmentGrid } from '../components/AttachmentGrid';
-import { AttachmentPicker } from '../components/AttachmentPicker';
-
-type FeedbackSubmissionResponse = components['schemas']['FeedbackSubmissionResponse'];
+import React, { useState, useCallback } from "react";
+import { View, KeyboardAvoidingView, Platform, ScrollView, Alert } from "react-native";
+import type { ViewStyle, StyleProp } from "react-native";
+import type { components } from "../types/index.js";
+import { useHarkenTheme, useFeedback } from "../hooks";
+import { ThemedText } from "../components/ThemedText";
+import { ThemedTextInput } from "../components/ThemedTextInput";
+import { ThemedButton } from "../components/ThemedButton";
+import { CategorySelector, DEFAULT_CATEGORIES } from "../components/CategorySelector";
+import type { CategoryOption } from "../components/CategorySelector";
+import type { FeedbackCategory } from "../types";
+import { useAttachmentPicker } from "../hooks/useAttachmentPicker";
+import type { AttachmentSourceConfig } from "../hooks/useAttachmentPicker";
+import { AttachmentGrid } from "../components/AttachmentGrid";
+import { AttachmentPicker } from "../components/AttachmentPicker";
+
+type FeedbackSubmissionResponse = components["schemas"]["FeedbackSubmissionResponse"];
 
 export interface FeedbackSheetProps {
   /** Called when feedback is successfully submitted */
@@ -30,7 +24,7 @@ export interface FeedbackSheetProps {
   /** Called when user cancels/dismisses the form */
   onCancel?: () => void;
 
-  /** Title text */
+  /** Title text. Set to empty string to hide title section entirely. */
   title?: string;
   /** Placeholder text for message input */
   placeholder?: string;
@@ -67,10 +61,21 @@ export interface FeedbackSheetProps {
   /** Whether to clear form on success. @default true */
   clearOnSuccess?: boolean;
 
-  /** Container style override */
-  containerStyle?: ViewStyle;
-  /** Form content style override */
-  formStyle?: ViewStyle;
+  /**
+   * Layout mode for the container.
+   * - 'flex': Uses flex: 1 (default, requires parent with explicit height)
+   * - 'auto': Content determines height (for bottom sheet modal embedding)
+   */
+  layout?: "flex" | "auto";
+
+  /** Container style override (outer KeyboardAvoidingView) */
+  containerStyle?: StyleProp<ViewStyle>;
+  /** Content style override (inner ScrollView content) */
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * @deprecated Use `contentStyle` instead
+   */
+  formStyle?: StyleProp<ViewStyle>;
 }
 
 /**
@@ -81,13 +86,26 @@ export interface FeedbackSheetProps {
  *
  * For the version without attachment dependencies, import from the main entry point.
  *
+ * Uses the following theme tokens:
+ * - `colors.formBackground` for background
+ * - `spacing.formPadding` for padding
+ * - `spacing.sectionGap` for section gaps
+ * - `radii.form` for border radius
+ *
  * @example
  * ```tsx
- * import { FeedbackSheet } from '@harkenapp/sdk-react-native/attachments';
+ * import { FeedbackSheet } from '@harkenapp/sdk-react-native';
  *
  * // Minimal usage with attachments
  * <FeedbackSheet onSuccess={() => navigation.goBack()} />
  *
+ * // For bottom sheet modal embedding
+ * <FeedbackSheet
+ *   layout="auto"
+ *   title=""
+ *   onSuccess={() => closeModal()}
+ * />
+ *
  * // With customization
  * <FeedbackSheet
  *   title="Report a Bug"
@@ -112,10 +130,10 @@ export function FeedbackSheet({
   onSuccess,
   onError,
   onCancel,
-  title = 'Send Feedback',
-  placeholder = 'What would you like to share?',
-  submitLabel = 'Submit',
-  cancelLabel = 'Cancel',
+  title = "Send Feedback",
+  placeholder = "What would you like to share?",
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
   categories = DEFAULT_CATEGORIES,
   requireCategory = false,
   minMessageLength = 1,
@@ -123,15 +141,17 @@ export function FeedbackSheet({
   enableAttachments = true,
   maxAttachments = 5,
   attachmentSources,
-  successMessage = 'Thank you for your feedback!',
+  successMessage = "Thank you for your feedback!",
   showSuccessAlert = true,
   clearOnSuccess = true,
+  layout = "flex",
   containerStyle,
+  contentStyle,
   formStyle,
 }: FeedbackSheetProps): React.JSX.Element {
   const theme = useHarkenTheme();
-  const { submitFeedback, isSubmitting, error, clearError, isInitializing } =
-    useFeedback();
+  const { form } = theme.components;
+  const { submitFeedback, isSubmitting, error, clearError, isInitializing } = useFeedback();
   const {
     attachments,
     removeAttachment,
@@ -143,18 +163,17 @@ export function FeedbackSheet({
     enabledSourceCount,
   } = useAttachmentPicker(attachmentSources);
 
-  const [message, setMessage] = useState('');
+  const [message, setMessage] = useState("");
   const [category, setCategory] = useState<FeedbackCategory | null>(null);
 
   const trimmedMessage = message.trim();
   const isMessageValid =
-    trimmedMessage.length >= minMessageLength &&
-    trimmedMessage.length <= maxMessageLength;
+    trimmedMessage.length >= minMessageLength && trimmedMessage.length <= maxMessageLength;
   const isCategoryValid = !requireCategory || category !== null;
   const canSubmit = isMessageValid && isCategoryValid && !isSubmitting && !isInitializing;
 
   const resetForm = useCallback(() => {
-    setMessage('');
+    setMessage("");
     setCategory(null);
     clearError();
     // Note: We don't clear attachments since they may still be uploading
@@ -169,18 +188,19 @@ export function FeedbackSheet({
     try {
       const result = await submitFeedback({
         message: trimmedMessage,
-        category: category ?? 'other',
+        category: category ?? "other",
         attachments: enableAttachments ? getAttachmentIds() : undefined,
       });
 
-      const uploadNote = enableAttachments && hasActiveUploads
-        ? '\n\nAttachments are still uploading in the background.'
-        : '';
+      const uploadNote =
+        enableAttachments && hasActiveUploads
+          ? "\n\nAttachments are still uploading in the background."
+          : "";
 
       if (showSuccessAlert && successMessage) {
-        Alert.alert('Success', `${successMessage}${uploadNote}`, [
+        Alert.alert("Success", `${successMessage}${uploadNote}`, [
           {
-            text: 'OK',
+            text: "OK",
             onPress: () => {
               if (clearOnSuccess) {
                 resetForm();
@@ -197,8 +217,8 @@ export function FeedbackSheet({
       }
     } catch (e) {
       const errorMessage =
-        e instanceof Error ? e.message : 'Failed to submit feedback. Please try again.';
-      Alert.alert('Submission Failed', errorMessage);
+        e instanceof Error ? e.message : "Failed to submit feedback. Please try again.";
+      Alert.alert("Submission Failed", errorMessage);
       onError?.(e instanceof Error ? e : new Error(errorMessage));
     }
   }, [
@@ -224,21 +244,25 @@ export function FeedbackSheet({
   }, [resetForm, onCancel]);
 
   const baseContainerStyle: ViewStyle = {
-    flex: 1,
-    backgroundColor: theme.colors.background,
+    ...(layout === "flex" ? { flex: 1 } : {}),
+    backgroundColor: form.background,
+    borderRadius: form.radius,
   };
 
-  const contentStyle: ViewStyle = {
-    flexGrow: 1,
-    padding: theme.spacing.lg,
+  const scrollContentStyle: ViewStyle = {
+    ...(layout === "flex" ? { flexGrow: 1 } : {}),
+    padding: form.padding,
   };
 
   const sectionStyle: ViewStyle = {
-    marginBottom: theme.spacing.lg,
+    marginBottom: form.sectionGap,
   };
 
+  // Support deprecated formStyle prop
+  const effectiveContentStyle = contentStyle ?? formStyle;
+
   const buttonRowStyle: ViewStyle = {
-    flexDirection: 'row',
+    flexDirection: "row",
     gap: theme.spacing.sm,
     marginTop: theme.spacing.md,
   };
@@ -248,7 +272,13 @@ export function FeedbackSheet({
 
   if (isInitializing) {
     return (
-      <View style={[baseContainerStyle, containerStyle, { justifyContent: 'center', alignItems: 'center' }]}>
+      <View
+        style={[
+          baseContainerStyle,
+          containerStyle,
+          { justifyContent: "center", alignItems: "center" },
+        ]}
+      >
         <ThemedText variant="body" secondary>
           Initializing...
         </ThemedText>
@@ -259,26 +289,24 @@ export function FeedbackSheet({
   return (
     <>
       <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
         style={[baseContainerStyle, containerStyle]}
       >
         <ScrollView
-          contentContainerStyle={[contentStyle, formStyle]}
+          contentContainerStyle={[scrollContentStyle, effectiveContentStyle]}
           keyboardShouldPersistTaps="handled"
         >
-          {/* Title */}
-          <View style={sectionStyle}>
-            <ThemedText variant="title">{title}</ThemedText>
-          </View>
+          {/* Title - only render if provided */}
+          {title ? (
+            <View style={sectionStyle}>
+              <ThemedText variant="title">{title}</ThemedText>
+            </View>
+          ) : null}
 
           {/* Category selector */}
           <View style={sectionStyle}>
-            <ThemedText
-              variant="label"
-              secondary
-              style={{ marginBottom: theme.spacing.sm }}
-            >
-              Category{requireCategory ? '' : ' (optional)'}
+            <ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
+              Category{requireCategory ? "" : " (optional)"}
             </ThemedText>
             <CategorySelector
               value={category}
@@ -290,11 +318,7 @@ export function FeedbackSheet({
 
           {/* Message input */}
           <View style={sectionStyle}>
-            <ThemedText
-              variant="label"
-              secondary
-              style={{ marginBottom: theme.spacing.sm }}
-            >
+            <ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
               Message
             </ThemedText>
             <ThemedTextInput
@@ -316,7 +340,7 @@ export function FeedbackSheet({
                     ? theme.colors.error
                     : theme.colors.textSecondary
                 }
-                style={{ marginTop: theme.spacing.xs, textAlign: 'right' }}
+                style={{ marginTop: theme.spacing.xs, textAlign: "right" }}
               >
                 {characterCount}/{maxMessageLength}
               </ThemedText>
@@ -326,11 +350,7 @@ export function FeedbackSheet({
           {/* Attachments */}
           {enableAttachments && (
             <View style={sectionStyle}>
-              <ThemedText
-                variant="label"
-                secondary
-                style={{ marginBottom: theme.spacing.sm }}
-              >
+              <ThemedText variant="label" secondary style={{ marginBottom: theme.spacing.sm }}>
                 Attachments
               </ThemedText>
               <AttachmentGrid
@@ -384,7 +404,7 @@ export function FeedbackSheet({
               <ThemedText
                 variant="caption"
                 color={theme.colors.primary}
-                style={{ textAlign: 'center' }}
+                style={{ textAlign: "center" }}
               >
                 Uploads in progress - you can still submit now
               </ThemedText>

package/src/attachments/index.ts

@@ -38,7 +38,7 @@ export {
   // Domain types
   UploadPhase,
   DEFAULT_UPLOAD_RETRY_CONFIG,
-} from '../index';
+} from "../index";
 
 export type {
   // Attachment hook types
@@ -67,4 +67,4 @@ export type {
   QueueStatus,
   UploadProgress,
   UploadRetryConfig,
-} from '../index';
+} from "../index";