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

package/src/attachments/FeedbackSheet.tsx

@@ -0,0 +1,400 @@
+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'];
+
+export interface FeedbackSheetProps {
+  /** Called when feedback is successfully submitted */
+  onSuccess?: (result: FeedbackSubmissionResponse) => void;
+  /** Called when submission fails */
+  onError?: (error: Error) => void;
+  /** Called when user cancels/dismisses the form */
+  onCancel?: () => void;
+
+  /** Title text */
+  title?: string;
+  /** Placeholder text for message input */
+  placeholder?: string;
+  /** Submit button text */
+  submitLabel?: string;
+  /** Cancel button text */
+  cancelLabel?: string;
+
+  /** Custom categories */
+  categories?: CategoryOption[];
+  /** Whether category selection is required */
+  requireCategory?: boolean;
+
+  /** Minimum message length */
+  minMessageLength?: number;
+  /** Maximum message length */
+  maxMessageLength?: number;
+
+  /** Whether to enable attachment support. @default true */
+  enableAttachments?: boolean;
+  /** Maximum number of attachments. @default 5 */
+  maxAttachments?: number;
+  /**
+   * Configure which attachment sources are available.
+   * If only one source is enabled, the picker modal is skipped.
+   * @default { camera: true, library: true, files: true }
+   */
+  attachmentSources?: AttachmentSourceConfig;
+
+  /** Message shown in success alert. Set to null to disable alert. */
+  successMessage?: string | null;
+  /** Whether to show success alert. @default true */
+  showSuccessAlert?: boolean;
+  /** Whether to clear form on success. @default true */
+  clearOnSuccess?: boolean;
+
+  /** Container style override */
+  containerStyle?: ViewStyle;
+  /** Form content style override */
+  formStyle?: ViewStyle;
+}
+
+/**
+ * A batteries-included feedback form component with full attachment support.
+ *
+ * This version is exported from '@harkenapp/sdk-react-native/attachments' and
+ * includes support for picking images, documents, and uploading them.
+ *
+ * For the version without attachment dependencies, import from the main entry point.
+ *
+ * @example
+ * ```tsx
+ * import { FeedbackSheet } from '@harkenapp/sdk-react-native/attachments';
+ *
+ * // Minimal usage with attachments
+ * <FeedbackSheet onSuccess={() => navigation.goBack()} />
+ *
+ * // With customization
+ * <FeedbackSheet
+ *   title="Report a Bug"
+ *   requireCategory
+ *   enableAttachments
+ *   maxAttachments={3}
+ *   onSuccess={(result) => {
+ *     analytics.track('feedback_submitted');
+ *     navigation.goBack();
+ *   }}
+ *   onCancel={() => navigation.goBack()}
+ * />
+ *
+ * // With restricted attachment sources (photo library only)
+ * <FeedbackSheet
+ *   attachmentSources={{ camera: false, library: true, files: false }}
+ *   onSuccess={() => navigation.goBack()}
+ * />
+ * ```
+ */
+export function FeedbackSheet({
+  onSuccess,
+  onError,
+  onCancel,
+  title = 'Send Feedback',
+  placeholder = 'What would you like to share?',
+  submitLabel = 'Submit',
+  cancelLabel = 'Cancel',
+  categories = DEFAULT_CATEGORIES,
+  requireCategory = false,
+  minMessageLength = 1,
+  maxMessageLength = 5000,
+  enableAttachments = true,
+  maxAttachments = 5,
+  attachmentSources,
+  successMessage = 'Thank you for your feedback!',
+  showSuccessAlert = true,
+  clearOnSuccess = true,
+  containerStyle,
+  formStyle,
+}: FeedbackSheetProps): React.JSX.Element {
+  const theme = useHarkenTheme();
+  const { submitFeedback, isSubmitting, error, clearError, isInitializing } =
+    useFeedback();
+  const {
+    attachments,
+    removeAttachment,
+    retryAttachment,
+    getAttachmentIds,
+    hasActiveUploads,
+    openPicker,
+    pickerProps,
+    enabledSourceCount,
+  } = useAttachmentPicker(attachmentSources);
+
+  const [message, setMessage] = useState('');
+  const [category, setCategory] = useState<FeedbackCategory | null>(null);
+
+  const trimmedMessage = message.trim();
+  const isMessageValid =
+    trimmedMessage.length >= minMessageLength &&
+    trimmedMessage.length <= maxMessageLength;
+  const isCategoryValid = !requireCategory || category !== null;
+  const canSubmit = isMessageValid && isCategoryValid && !isSubmitting && !isInitializing;
+
+  const resetForm = useCallback(() => {
+    setMessage('');
+    setCategory(null);
+    clearError();
+    // Note: We don't clear attachments since they may still be uploading
+    // and can be reused. Users can manually remove them if needed.
+  }, [clearError]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!canSubmit) return;
+
+    clearError();
+
+    try {
+      const result = await submitFeedback({
+        message: trimmedMessage,
+        category: category ?? 'other',
+        attachments: enableAttachments ? getAttachmentIds() : undefined,
+      });
+
+      const uploadNote = enableAttachments && hasActiveUploads
+        ? '\n\nAttachments are still uploading in the background.'
+        : '';
+
+      if (showSuccessAlert && successMessage) {
+        Alert.alert('Success', `${successMessage}${uploadNote}`, [
+          {
+            text: 'OK',
+            onPress: () => {
+              if (clearOnSuccess) {
+                resetForm();
+              }
+              onSuccess?.(result);
+            },
+          },
+        ]);
+      } else {
+        if (clearOnSuccess) {
+          resetForm();
+        }
+        onSuccess?.(result);
+      }
+    } catch (e) {
+      const 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));
+    }
+  }, [
+    canSubmit,
+    clearError,
+    submitFeedback,
+    trimmedMessage,
+    category,
+    enableAttachments,
+    getAttachmentIds,
+    hasActiveUploads,
+    showSuccessAlert,
+    successMessage,
+    clearOnSuccess,
+    resetForm,
+    onSuccess,
+    onError,
+  ]);
+
+  const handleCancel = useCallback(() => {
+    resetForm();
+    onCancel?.();
+  }, [resetForm, onCancel]);
+
+  const baseContainerStyle: ViewStyle = {
+    flex: 1,
+    backgroundColor: theme.colors.background,
+  };
+
+  const contentStyle: ViewStyle = {
+    flexGrow: 1,
+    padding: theme.spacing.lg,
+  };
+
+  const sectionStyle: ViewStyle = {
+    marginBottom: theme.spacing.lg,
+  };
+
+  const buttonRowStyle: ViewStyle = {
+    flexDirection: 'row',
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.md,
+  };
+
+  const characterCount = trimmedMessage.length;
+  const showCharacterWarning = characterCount > maxMessageLength * 0.9;
+
+  if (isInitializing) {
+    return (
+      <View style={[baseContainerStyle, containerStyle, { justifyContent: 'center', alignItems: 'center' }]}>
+        <ThemedText variant="body" secondary>
+          Initializing...
+        </ThemedText>
+      </View>
+    );
+  }
+
+  return (
+    <>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={[baseContainerStyle, containerStyle]}
+      >
+        <ScrollView
+          contentContainerStyle={[contentStyle, formStyle]}
+          keyboardShouldPersistTaps="handled"
+        >
+          {/* Title */}
+          <View style={sectionStyle}>
+            <ThemedText variant="title">{title}</ThemedText>
+          </View>
+
+          {/* Category selector */}
+          <View style={sectionStyle}>
+            <ThemedText
+              variant="label"
+              secondary
+              style={{ marginBottom: theme.spacing.sm }}
+            >
+              Category{requireCategory ? '' : ' (optional)'}
+            </ThemedText>
+            <CategorySelector
+              value={category}
+              onChange={setCategory}
+              categories={categories}
+              disabled={isSubmitting}
+            />
+          </View>
+
+          {/* Message input */}
+          <View style={sectionStyle}>
+            <ThemedText
+              variant="label"
+              secondary
+              style={{ marginBottom: theme.spacing.sm }}
+            >
+              Message
+            </ThemedText>
+            <ThemedTextInput
+              value={message}
+              onChangeText={setMessage}
+              placeholder={placeholder}
+              multiline
+              numberOfLines={4}
+              textAlignVertical="top"
+              editable={!isSubmitting}
+              style={{ minHeight: 120 }}
+              maxLength={maxMessageLength + 100}
+            />
+            {showCharacterWarning && (
+              <ThemedText
+                variant="caption"
+                color={
+                  characterCount > maxMessageLength
+                    ? theme.colors.error
+                    : theme.colors.textSecondary
+                }
+                style={{ marginTop: theme.spacing.xs, textAlign: 'right' }}
+              >
+                {characterCount}/{maxMessageLength}
+              </ThemedText>
+            )}
+          </View>
+
+          {/* Attachments */}
+          {enableAttachments && (
+            <View style={sectionStyle}>
+              <ThemedText
+                variant="label"
+                secondary
+                style={{ marginBottom: theme.spacing.sm }}
+              >
+                Attachments
+              </ThemedText>
+              <AttachmentGrid
+                attachments={attachments}
+                onRemove={removeAttachment}
+                onRetry={retryAttachment}
+                onAdd={openPicker}
+                maxAttachments={maxAttachments}
+                showAddButton={enabledSourceCount > 0}
+              />
+            </View>
+          )}
+
+          {/* Error display */}
+          {error && (
+            <View style={{ marginBottom: theme.spacing.md }}>
+              <ThemedText variant="caption" color={theme.colors.error}>
+                {error.message}
+              </ThemedText>
+            </View>
+          )}
+
+          {/* Buttons */}
+          <View style={buttonRowStyle}>
+            {onCancel && (
+              <View style={{ flex: 1 }}>
+                <ThemedButton
+                  title={cancelLabel}
+                  variant="secondary"
+                  onPress={handleCancel}
+                  disabled={isSubmitting}
+                  fullWidth
+                />
+              </View>
+            )}
+            <View style={{ flex: onCancel ? 1 : undefined }}>
+              <ThemedButton
+                title={submitLabel}
+                variant="primary"
+                onPress={handleSubmit}
+                disabled={!canSubmit}
+                loading={isSubmitting}
+                fullWidth={!!onCancel}
+              />
+            </View>
+          </View>
+
+          {/* Upload status indicator */}
+          {enableAttachments && hasActiveUploads && (
+            <View style={{ marginTop: theme.spacing.sm }}>
+              <ThemedText
+                variant="caption"
+                color={theme.colors.primary}
+                style={{ textAlign: 'center' }}
+              >
+                Uploads in progress - you can still submit now
+              </ThemedText>
+            </View>
+          )}
+        </ScrollView>
+      </KeyboardAvoidingView>
+
+      {/* Attachment picker modal */}
+      {enableAttachments && <AttachmentPicker {...pickerProps} />}
+    </>
+  );
+}

package/src/attachments/index.ts

@@ -0,0 +1,70 @@
+/**
+ * Harken SDK - Attachment Features
+ *
+ * @deprecated Import from '@harkenapp/sdk-react-native' instead.
+ * This entry point is maintained for backwards compatibility.
+ *
+ * @example
+ * ```tsx
+ * // Preferred (single entry point)
+ * import { HarkenProvider, FeedbackSheet, useAttachmentUpload } from '@harkenapp/sdk-react-native';
+ *
+ * // Legacy (still works)
+ * import { FeedbackSheet } from '@harkenapp/sdk-react-native/attachments';
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+// Re-export everything from the main entry point for backwards compatibility
+export {
+  // Attachment hooks
+  useAttachmentUpload,
+  useAttachmentPicker,
+  useAttachmentStatus,
+
+  // Attachment components
+  AttachmentPicker,
+  UploadStatusOverlay,
+  AttachmentPreview,
+  AttachmentGrid,
+  FeedbackSheet,
+
+  // Services
+  UploadQueueService,
+  uploadQueueService,
+  UploadQueueStorage,
+
+  // Domain types
+  UploadPhase,
+  DEFAULT_UPLOAD_RETRY_CONFIG,
+} from '../index';
+
+export type {
+  // Attachment hook types
+  AttachmentState,
+  UseAttachmentUploadResult,
+  AttachmentSourceConfig,
+  UseAttachmentPickerResult,
+  AttachmentStatus,
+
+  // Attachment component types
+  AttachmentPickerProps,
+  AttachmentSource,
+  PickerOptionConfig,
+  UploadStatusOverlayProps,
+  UploadStatusLabels,
+  AttachmentPreviewProps,
+  AttachmentGridProps,
+  FeedbackSheetProps,
+
+  // Service types
+  UploadQueueServiceConfig,
+  EnqueueParams,
+
+  // Domain types
+  QueueItem,
+  QueueStatus,
+  UploadProgress,
+  UploadRetryConfig,
+} from '../index';

package/src/components/AttachmentGrid.tsx

@@ -0,0 +1,247 @@
+import React from 'react';
+import { View, Pressable, StyleSheet } from 'react-native';
+import type { ViewStyle, StyleProp, ImageStyle } from 'react-native';
+import { useHarkenTheme } from '../hooks';
+import { ThemedText } from './ThemedText';
+import { AttachmentPreview } from './AttachmentPreview';
+import type { AttachmentState } from '../hooks/useAttachmentUpload';
+import type { UploadStatusLabels } from './UploadStatusOverlay';
+
+export interface AttachmentGridProps {
+  /** List of attachments to display */
+  attachments: AttachmentState[];
+  /** Callback to retry a failed attachment */
+  onRetry?: (attachmentId: string) => void;
+  /** Callback to remove an attachment */
+  onRemove?: (attachmentId: string) => void;
+  /** Callback when add button is pressed */
+  onAdd?: () => void;
+  /** Maximum number of attachments allowed (hides add button when reached) */
+  maxAttachments?: number;
+  /** Size of each preview tile */
+  tileSize?: number;
+  /** Gap between tiles */
+  gap?: number;
+  /** Whether to show the add button */
+  showAddButton?: boolean;
+  /** Disable interactions */
+  disabled?: boolean;
+  /** Additional container style */
+  style?: StyleProp<ViewStyle>;
+  /** Label for the add button (default: "Add") */
+  addButtonLabel?: string;
+  /** Icon for the add button (default: "+") */
+  addButtonIcon?: React.ReactNode | string;
+  /** Style for the add button */
+  addButtonStyle?: StyleProp<ViewStyle>;
+  /** Text to show when empty and no add button (default: "No attachments") */
+  emptyText?: string;
+  /** Custom renderer for the add button */
+  renderAddButton?: (onPress: () => void, disabled: boolean) => React.ReactNode;
+  /** Custom renderer for each attachment tile */
+  renderTile?: (
+    attachment: AttachmentState,
+    onRetry?: () => void,
+    onRemove?: () => void
+  ) => React.ReactNode;
+  /** Style for each tile container */
+  tileStyle?: StyleProp<ViewStyle>;
+  /** Style for tile images */
+  tileImageStyle?: StyleProp<ImageStyle>;
+  /** Custom labels for upload status overlay */
+  statusLabels?: UploadStatusLabels;
+  /** Custom file icon function (passed to AttachmentPreview) */
+  getFileIcon?: (mimeType: string) => React.ReactNode | string;
+  /** Custom placeholder renderer (passed to AttachmentPreview) */
+  renderPlaceholder?: (mimeType: string, fileName?: string) => React.ReactNode;
+}
+
+/**
+ * Grid component for displaying multiple attachments.
+ *
+ * Shows attachment previews with upload status and an optional add button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const { attachments, pickImage, retryAttachment, removeAttachment } = useAttachmentUpload();
+ *
+ * <AttachmentGrid
+ *   attachments={attachments}
+ *   onRetry={retryAttachment}
+ *   onRemove={removeAttachment}
+ *   onAdd={() => pickImage('library')}
+ *   maxAttachments={5}
+ * />
+ *
+ * // With custom add button
+ * <AttachmentGrid
+ *   attachments={attachments}
+ *   onAdd={showPicker}
+ *   addButtonIcon={<PlusIcon />}
+ *   addButtonLabel="Upload"
+ *   addButtonStyle={{ borderColor: 'blue' }}
+ * />
+ *
+ * // With fully custom renderers
+ * <AttachmentGrid
+ *   attachments={attachments}
+ *   renderAddButton={(onPress, disabled) => (
+ *     <MyButton onPress={onPress} disabled={disabled}>Add File</MyButton>
+ *   )}
+ *   renderTile={(attachment, onRetry, onRemove) => (
+ *     <MyTile
+ *       key={attachment.attachmentId}
+ *       {...attachment}
+ *       onRetry={onRetry}
+ *       onRemove={onRemove}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export function AttachmentGrid({
+  attachments,
+  onRetry,
+  onRemove,
+  onAdd,
+  maxAttachments = 10,
+  tileSize = 80,
+  gap,
+  showAddButton = true,
+  disabled = false,
+  style,
+  addButtonLabel = 'Add',
+  addButtonIcon = '+',
+  addButtonStyle,
+  emptyText = 'No attachments',
+  renderAddButton,
+  renderTile,
+  tileStyle,
+  tileImageStyle,
+  statusLabels,
+  getFileIcon,
+  renderPlaceholder,
+}: AttachmentGridProps): React.JSX.Element {
+  const theme = useHarkenTheme();
+  const effectiveGap = gap ?? theme.spacing.sm;
+
+  const canAddMore = attachments.length < maxAttachments;
+  const shouldShowAddButton = showAddButton && canAddMore && onAdd;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { gap: effectiveGap },
+        style,
+      ]}
+    >
+      {attachments.map((attachment) => {
+        const handleRetry = onRetry ? () => onRetry(attachment.attachmentId) : undefined;
+        const handleRemove = onRemove ? () => onRemove(attachment.attachmentId) : undefined;
+
+        // Use custom renderer if provided
+        if (renderTile) {
+          return (
+            <React.Fragment key={attachment.attachmentId}>
+              {renderTile(attachment, handleRetry, handleRemove)}
+            </React.Fragment>
+          );
+        }
+
+        return (
+          <AttachmentPreview
+            key={attachment.attachmentId}
+            uri={attachment.localUri}
+            mimeType={attachment.mimeType}
+            fileName={attachment.fileName}
+            phase={attachment.phase}
+            progress={attachment.progress}
+            error={attachment.error}
+            onRetry={handleRetry}
+            onRemove={handleRemove}
+            size={tileSize}
+            style={tileStyle}
+            imageStyle={tileImageStyle}
+            statusLabels={statusLabels}
+            getFileIcon={getFileIcon}
+            renderPlaceholder={renderPlaceholder}
+          />
+        );
+      })}
+
+      {shouldShowAddButton && (
+        renderAddButton ? (
+          renderAddButton(onAdd, disabled)
+        ) : (
+          <Pressable
+            onPress={onAdd}
+            disabled={disabled}
+            style={({ pressed }) => [
+              styles.addButton,
+              {
+                width: tileSize,
+                height: tileSize,
+                borderRadius: theme.radii.md,
+                backgroundColor: pressed
+                  ? theme.colors.border
+                  : theme.colors.backgroundSecondary,
+                borderWidth: 2,
+                borderColor: theme.colors.border,
+                borderStyle: 'dashed',
+                opacity: disabled ? 0.5 : 1,
+              },
+              addButtonStyle,
+            ]}
+          >
+            {typeof addButtonIcon === 'string' ? (
+              <ThemedText style={[styles.addIcon, { color: theme.colors.textSecondary }]}>
+                {addButtonIcon}
+              </ThemedText>
+            ) : (
+              addButtonIcon
+            )}
+            <ThemedText variant="caption" secondary>
+              {addButtonLabel}
+            </ThemedText>
+          </Pressable>
+        )
+      )}
+
+      {attachments.length === 0 && !shouldShowAddButton && (
+        <View
+          style={[
+            styles.emptyState,
+            {
+              padding: theme.spacing.md,
+            },
+          ]}
+        >
+          <ThemedText variant="caption" secondary>
+            {emptyText}
+          </ThemedText>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  addButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  addIcon: {
+    fontSize: 28,
+    fontWeight: '300',
+    lineHeight: 32,
+  },
+  emptyState: {
+    alignItems: 'center',
+  },
+});