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

package/src/components/CategorySelector.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
+import { useHarkenTheme } from '../hooks';
+import { ThemedText } from './ThemedText';
+import type { FeedbackCategory } from '../types';
+
+export interface CategoryOption {
+  value: FeedbackCategory;
+  label: string;
+  emoji?: string;
+  /** Custom icon element (replaces emoji) */
+  icon?: React.ReactNode;
+}
+
+export const DEFAULT_CATEGORIES: CategoryOption[] = [
+  { value: 'bug', label: 'Bug', emoji: '🐛' },
+  { value: 'idea', label: 'Idea', emoji: '💡' },
+  { value: 'ux', label: 'UX', emoji: '✨' },
+  { value: 'other', label: 'Other', emoji: '💬' },
+];
+
+export interface CategorySelectorProps {
+  /** Currently selected category */
+  value: FeedbackCategory | null;
+  /** Callback when category is selected */
+  onChange: (category: FeedbackCategory) => void;
+  /** Custom categories (defaults to bug, idea, ux, other) */
+  categories?: CategoryOption[];
+  /** Disable interaction */
+  disabled?: boolean;
+  /** Custom renderer for category chips */
+  renderCategory?: (
+    option: CategoryOption,
+    isSelected: boolean,
+    onSelect: () => void
+  ) => React.ReactNode;
+  /** Style for the container */
+  style?: StyleProp<ViewStyle>;
+  /** Style for unselected chips */
+  chipStyle?: StyleProp<ViewStyle>;
+  /** Style for selected chips */
+  selectedChipStyle?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Category selector for feedback type.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <CategorySelector
+ *   value={category}
+ *   onChange={setCategory}
+ * />
+ *
+ * // Custom categories without emojis
+ * <CategorySelector
+ *   value={category}
+ *   onChange={setCategory}
+ *   categories={[
+ *     { value: 'bug', label: 'Report Bug' },
+ *     { value: 'idea', label: 'Feature Request' },
+ *   ]}
+ * />
+ *
+ * // With custom icons
+ * <CategorySelector
+ *   value={category}
+ *   onChange={setCategory}
+ *   categories={[
+ *     { value: 'bug', label: 'Bug', icon: <BugIcon /> },
+ *     { value: 'idea', label: 'Idea', icon: <LightbulbIcon /> },
+ *   ]}
+ * />
+ *
+ * // Fully custom rendering
+ * <CategorySelector
+ *   value={category}
+ *   onChange={setCategory}
+ *   renderCategory={(option, isSelected, onSelect) => (
+ *     <MyCustomChip
+ *       key={option.value}
+ *       selected={isSelected}
+ *       onPress={onSelect}
+ *       label={option.label}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export function CategorySelector({
+  value,
+  onChange,
+  categories = DEFAULT_CATEGORIES,
+  disabled = false,
+  renderCategory,
+  style,
+  chipStyle,
+  selectedChipStyle,
+}: CategorySelectorProps): React.JSX.Element {
+  const theme = useHarkenTheme();
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: theme.spacing.sm,
+  };
+
+  return (
+    <View style={[containerStyle, style]}>
+      {categories.map((category) => {
+        const isSelected = value === category.value;
+        const onSelect = () => onChange(category.value);
+
+        // Use custom renderer if provided
+        if (renderCategory) {
+          return (
+            <React.Fragment key={category.value}>
+              {renderCategory(category, isSelected, onSelect)}
+            </React.Fragment>
+          );
+        }
+
+        const baseChipStyle: ViewStyle = {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: theme.spacing.sm,
+          paddingHorizontal: theme.spacing.md,
+          borderRadius: theme.radii.full,
+          borderWidth: 1,
+          borderColor: isSelected ? theme.colors.primary : theme.colors.border,
+          backgroundColor: isSelected
+            ? theme.colors.primary
+            : theme.colors.backgroundSecondary,
+          opacity: disabled ? 0.6 : 1,
+        };
+
+        const textColor = isSelected
+          ? theme.colors.textOnPrimary
+          : theme.colors.text;
+
+        return (
+          <Pressable
+            key={category.value}
+            onPress={onSelect}
+            disabled={disabled}
+            style={({ pressed }) => [
+              baseChipStyle,
+              chipStyle,
+              isSelected && selectedChipStyle,
+              pressed && !disabled && {
+                opacity: 0.8,
+              },
+            ]}
+          >
+            {category.icon ? (
+              <View style={{ marginRight: theme.spacing.xs }}>
+                {category.icon}
+              </View>
+            ) : category.emoji ? (
+              <ThemedText style={{ marginRight: theme.spacing.xs }}>
+                {category.emoji}
+              </ThemedText>
+            ) : null}
+            <ThemedText variant="label" color={textColor}>
+              {category.label}
+            </ThemedText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/FeedbackForm.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useCallback } from 'react';
+import { View, KeyboardAvoidingView, Platform, ScrollView } from 'react-native';
+import type { ViewStyle } from 'react-native';
+import { useHarkenTheme } from '../hooks';
+import { ThemedText } from './ThemedText';
+import { ThemedTextInput } from './ThemedTextInput';
+import { ThemedButton } from './ThemedButton';
+import { CategorySelector } from './CategorySelector';
+import type { CategoryOption } from './CategorySelector';
+import type { FeedbackCategory } from '../types';
+
+export interface FeedbackFormData {
+  message: string;
+  category: FeedbackCategory | null;
+}
+
+export interface FeedbackFormProps {
+  /** Called when form is submitted */
+  onSubmit: (data: FeedbackFormData) => void | Promise<void>;
+  /** Called when form is cancelled/dismissed */
+  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;
+  /** Loading state (disables form) */
+  loading?: boolean;
+  /** Initial form values */
+  initialValues?: Partial<FeedbackFormData>;
+}
+
+/**
+ * Feedback composer form component.
+ *
+ * A minimal, themed form for collecting user feedback.
+ *
+ * @example
+ * ```tsx
+ * <FeedbackForm
+ *   onSubmit={async (data) => {
+ *     await submitFeedback(data);
+ *   }}
+ *   onCancel={() => setVisible(false)}
+ * />
+ * ```
+ */
+export function FeedbackForm({
+  onSubmit,
+  onCancel,
+  title = 'Send Feedback',
+  placeholder = 'What would you like to share?',
+  submitLabel = 'Submit',
+  cancelLabel = 'Cancel',
+  categories,
+  requireCategory = false,
+  minMessageLength = 1,
+  maxMessageLength = 5000,
+  loading = false,
+  initialValues,
+}: FeedbackFormProps): React.JSX.Element {
+  const theme = useHarkenTheme();
+
+  const [message, setMessage] = useState(initialValues?.message ?? '');
+  const [category, setCategory] = useState<FeedbackCategory | null>(
+    initialValues?.category ?? null
+  );
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const trimmedMessage = message.trim();
+  const isMessageValid =
+    trimmedMessage.length >= minMessageLength &&
+    trimmedMessage.length <= maxMessageLength;
+  const isCategoryValid = !requireCategory || category !== null;
+  const canSubmit = isMessageValid && isCategoryValid && !loading && !isSubmitting;
+
+  const handleSubmit = useCallback(async () => {
+    if (!canSubmit) return;
+
+    setIsSubmitting(true);
+    try {
+      await onSubmit({
+        message: trimmedMessage,
+        category,
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [canSubmit, onSubmit, trimmedMessage, category]);
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: theme.colors.background,
+    padding: theme.spacing.lg,
+    borderRadius: theme.radii.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;
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+    >
+      <ScrollView
+        contentContainerStyle={{ flexGrow: 1 }}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={containerStyle}>
+          {/* 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={loading || 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={!loading && !isSubmitting}
+              style={{ minHeight: 120 }}
+              maxLength={maxMessageLength + 100} // Allow slight overflow to show warning
+            />
+            {showCharacterWarning && (
+              <ThemedText
+                variant="caption"
+                color={
+                  characterCount > maxMessageLength
+                    ? theme.colors.error
+                    : theme.colors.textSecondary
+                }
+                style={{ marginTop: theme.spacing.xs, textAlign: 'right' }}
+              >
+                {characterCount}/{maxMessageLength}
+              </ThemedText>
+            )}
+          </View>
+
+          {/* Buttons */}
+          <View style={buttonRowStyle}>
+            {onCancel && (
+              <View style={{ flex: 1 }}>
+                <ThemedButton
+                  title={cancelLabel}
+                  variant="secondary"
+                  onPress={onCancel}
+                  disabled={isSubmitting}
+                  fullWidth
+                />
+              </View>
+            )}
+            <View style={{ flex: onCancel ? 1 : undefined }}>
+              <ThemedButton
+                title={submitLabel}
+                variant="primary"
+                onPress={handleSubmit}
+                disabled={!canSubmit}
+                loading={isSubmitting || loading}
+                fullWidth={!!onCancel}
+              />
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}

package/src/components/FeedbackSheet.tsx

@@ -0,0 +1,321 @@
+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 './ThemedText';
+import { ThemedTextInput } from './ThemedTextInput';
+import { ThemedButton } from './ThemedButton';
+import { CategorySelector, DEFAULT_CATEGORIES } from './CategorySelector';
+import type { CategoryOption } from './CategorySelector';
+import type { FeedbackCategory } from '../types';
+
+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;
+
+  /** 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.
+ *
+ * Unlike `FeedbackForm` which is a "dumb" UI component requiring manual
+ * wiring, `FeedbackSheet` handles everything internally:
+ * - API submission via `useFeedback` hook
+ * - Success/error alerts
+ * - Form state management
+ * - Keyboard handling
+ *
+ * For attachment support, import from '@harkenapp/sdk-react-native/attachments'.
+ *
+ * @example
+ * ```tsx
+ * // Minimal usage
+ * <FeedbackSheet onSuccess={() => navigation.goBack()} />
+ *
+ * // With customization
+ * <FeedbackSheet
+ *   title="Report a Bug"
+ *   requireCategory
+ *   categories={[
+ *     { value: 'crash', label: 'App Crash', icon: '💥' },
+ *     { value: 'visual', label: 'Visual Bug', icon: '👁️' },
+ *   ]}
+ *   onSuccess={(result) => {
+ *     analytics.track('feedback_submitted');
+ *     navigation.goBack();
+ *   }}
+ *   onCancel={() => 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,
+  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 [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();
+  }, [clearError]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!canSubmit) return;
+
+    clearError();
+
+    try {
+      const result = await submitFeedback({
+        message: trimmedMessage,
+        category: category ?? 'other',
+      });
+
+      if (showSuccessAlert && successMessage) {
+        Alert.alert('Success', successMessage, [
+          {
+            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,
+    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>
+
+        {/* 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>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}