@parlr/react-native 0.1.0

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@parlr/react-native",
+  "version": "0.1.0",
+  "description": "Official Parlr live chat SDK for React Native",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/commonjs/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/typescript/module/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/index.d.ts",
+        "default": "./lib/commonjs/index.js"
+      },
+      "react-native": "./src/index.ts",
+      "source": "./src/index.ts"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "build": "bob build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/ --ext .ts,.tsx",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "clean": "rm -rf lib/",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "expo-document-picker": ">=12.0.0",
+    "expo-image-picker": ">=15.0.0",
+    "expo-secure-store": ">=13.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "expo-document-picker": {
+      "optional": true
+    },
+    "expo-image-picker": {
+      "optional": true
+    },
+    "expo-secure-store": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "axios": "^1.7.0"
+  },
+  "devDependencies": {
+    "@testing-library/react-native": "^13.0.0",
+    "@types/react": "~19.1.0",
+    "@types/react-native": "~0.73.0",
+    "eslint": "^9.0.0",
+    "jest": "~29.7.0",
+    "prettier": "^3.7.0",
+    "react": "^18.3.0",
+    "react-native": "^0.76.0",
+    "react-native-builder-bob": "^0.40.0",
+    "react-native-reanimated": "^3.16.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.2.0",
+    "typescript": "~5.7.0"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      "typescript"
+    ]
+  },
+  "keywords": [
+    "parlr",
+    "chat",
+    "live-chat",
+    "react-native",
+    "support",
+    "customer-support",
+    "messaging"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "homepage": "https://parlr.chat/docs/sdk/react-native",
+  "bugs": "https://github.com/parlr/parlr/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parlr/parlr",
+    "directory": "parlr-react-native"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/AttachmentPicker.tsx

@@ -0,0 +1,310 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Attachment Picker
+// ---------------------------------------------------------------------------
+//
+// Provides image and file picking capabilities for chat attachments.
+// Uses expo-image-picker and expo-document-picker when available.
+// Falls back gracefully with a user-facing alert if not installed.
+// ---------------------------------------------------------------------------
+
+import React, { useCallback, useContext } from 'react';
+import {
+  Alert,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { ParlrContext } from '../provider/ParlrContext';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PickedFile {
+  uri: string;
+  name: string;
+  type: string;
+  size: number;
+}
+
+export interface AttachmentPickerProps {
+  /** Called when a file is selected. */
+  onFilePicked: (file: PickedFile) => void;
+  /** Called to dismiss the picker. */
+  onDismiss: () => void;
+  /** Max file size in bytes. Default: 25MB. */
+  maxFileSize?: number;
+  /** Allowed MIME types. Default: images + documents. */
+  allowedTypes?: string[];
+  /** Accent color. */
+  accentColor?: string;
+  /** Locale. */
+  locale?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const MAX_FILE_SIZE_DEFAULT = 25 * 1024 * 1024; // 25 MB
+
+// ---------------------------------------------------------------------------
+// i18n
+// ---------------------------------------------------------------------------
+
+function getI18n(locale?: string) {
+  if (locale?.startsWith('en')) {
+    return {
+      photo: 'Photo',
+      camera: 'Camera',
+      file: 'File',
+      cancel: 'Cancel',
+      tooLarge: 'File is too large (max 25 MB)',
+      permissionDenied: 'Permission denied',
+      permissionMessage: 'Please allow access in your device settings.',
+      missingLib: 'Feature unavailable',
+      missingLibMessage: 'The required library is not installed.',
+      ok: 'OK',
+    };
+  }
+  return {
+    photo: 'Photo',
+    camera: 'Cam\u00e9ra',
+    file: 'Fichier',
+    cancel: 'Annuler',
+    tooLarge: 'Fichier trop volumineux (max 25 Mo)',
+    permissionDenied: 'Permission refus\u00e9e',
+    permissionMessage: 'Veuillez autoriser l\u2019acc\u00e8s dans les r\u00e9glages.',
+    missingLib: 'Fonctionnalit\u00e9 indisponible',
+    missingLibMessage: 'La librairie requise n\u2019est pas install\u00e9e.',
+    ok: 'OK',
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Dynamic imports (these packages are optional peer dependencies)
+// ---------------------------------------------------------------------------
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+let ImagePicker: any = null;
+let DocumentPicker: any = null;
+/* eslint-enable @typescript-eslint/no-explicit-any */
+
+try {
+  ImagePicker = require('expo-image-picker');
+} catch {
+  // expo-image-picker not installed
+}
+
+try {
+  DocumentPicker = require('expo-document-picker');
+} catch {
+  // expo-document-picker not installed
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AttachmentPicker({
+  onFilePicked,
+  onDismiss,
+  maxFileSize = MAX_FILE_SIZE_DEFAULT,
+  accentColor: accentColorProp,
+  locale,
+}: AttachmentPickerProps) {
+  const { theme } = useContext(ParlrContext);
+  const accentColor = accentColorProp ?? theme.colors.primary;
+  const i18n = getI18n(locale);
+
+  const checkFileSize = useCallback(
+    (size: number): boolean => {
+      if (size > maxFileSize) {
+        Alert.alert(i18n.tooLarge);
+        return false;
+      }
+      return true;
+    },
+    [maxFileSize, i18n.tooLarge],
+  );
+
+  const handlePickPhoto = useCallback(async () => {
+    if (!ImagePicker) {
+      Alert.alert(i18n.missingLib, i18n.missingLibMessage);
+      return;
+    }
+
+    const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (!permission.granted) {
+      Alert.alert(i18n.permissionDenied, i18n.permissionMessage);
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      quality: 0.8,
+      allowsEditing: false,
+    });
+
+    if (result.canceled || !result.assets?.[0]) return;
+
+    const asset = result.assets[0];
+    const size = asset.fileSize ?? 0;
+    if (!checkFileSize(size)) return;
+
+    onFilePicked({
+      uri: asset.uri,
+      name: asset.fileName ?? `photo_${Date.now()}.jpg`,
+      type: asset.mimeType ?? 'image/jpeg',
+      size,
+    });
+  }, [onFilePicked, checkFileSize, i18n]);
+
+  const handlePickCamera = useCallback(async () => {
+    if (!ImagePicker) {
+      Alert.alert(i18n.missingLib, i18n.missingLibMessage);
+      return;
+    }
+
+    const permission = await ImagePicker.requestCameraPermissionsAsync();
+    if (!permission.granted) {
+      Alert.alert(i18n.permissionDenied, i18n.permissionMessage);
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      mediaTypes: ['images'],
+      quality: 0.8,
+      allowsEditing: false,
+    });
+
+    if (result.canceled || !result.assets?.[0]) return;
+
+    const asset = result.assets[0];
+    const size = asset.fileSize ?? 0;
+    if (!checkFileSize(size)) return;
+
+    onFilePicked({
+      uri: asset.uri,
+      name: asset.fileName ?? `camera_${Date.now()}.jpg`,
+      type: asset.mimeType ?? 'image/jpeg',
+      size,
+    });
+  }, [onFilePicked, checkFileSize, i18n]);
+
+  const handlePickFile = useCallback(async () => {
+    if (!DocumentPicker) {
+      Alert.alert(i18n.missingLib, i18n.missingLibMessage);
+      return;
+    }
+
+    const result = await DocumentPicker.getDocumentAsync({
+      copyToCacheDirectory: true,
+    });
+
+    if (result.canceled || !result.assets?.[0]) return;
+
+    const asset = result.assets[0];
+    const size = asset.size ?? 0;
+    if (!checkFileSize(size)) return;
+
+    onFilePicked({
+      uri: asset.uri,
+      name: asset.name ?? `file_${Date.now()}`,
+      type: asset.mimeType ?? 'application/octet-stream',
+      size,
+    });
+  }, [onFilePicked, checkFileSize, i18n]);
+
+  return (
+    <View style={[styles.root, { backgroundColor: theme.colors.surface, borderTopColor: theme.colors.border }]}>
+      <View style={styles.optionsRow}>
+        <Pressable
+          onPress={handlePickPhoto}
+          style={[styles.option, { backgroundColor: accentColor + '15' }]}
+          accessibilityRole="button"
+          accessibilityLabel={i18n.photo}
+        >
+          <Text style={[styles.optionIcon, { color: accentColor }]}>{'\ud83d\uddbc'}</Text>
+          <Text style={[styles.optionLabel, { color: theme.colors.textSecondary }]}>
+            {i18n.photo}
+          </Text>
+        </Pressable>
+
+        <Pressable
+          onPress={handlePickCamera}
+          style={[styles.option, { backgroundColor: accentColor + '15' }]}
+          accessibilityRole="button"
+          accessibilityLabel={i18n.camera}
+        >
+          <Text style={[styles.optionIcon, { color: accentColor }]}>{'\ud83d\udcf7'}</Text>
+          <Text style={[styles.optionLabel, { color: theme.colors.textSecondary }]}>
+            {i18n.camera}
+          </Text>
+        </Pressable>
+
+        <Pressable
+          onPress={handlePickFile}
+          style={[styles.option, { backgroundColor: accentColor + '15' }]}
+          accessibilityRole="button"
+          accessibilityLabel={i18n.file}
+        >
+          <Text style={[styles.optionIcon, { color: accentColor }]}>{'\ud83d\udcc4'}</Text>
+          <Text style={[styles.optionLabel, { color: theme.colors.textSecondary }]}>
+            {i18n.file}
+          </Text>
+        </Pressable>
+      </View>
+
+      <Pressable
+        onPress={onDismiss}
+        style={styles.cancelButton}
+        accessibilityRole="button"
+        accessibilityLabel={i18n.cancel}
+      >
+        <Text style={[styles.cancelText, { color: theme.colors.textSecondary }]}>
+          {i18n.cancel}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  root: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  optionsRow: {
+    flexDirection: 'row',
+    gap: 12,
+    marginBottom: 8,
+  },
+  option: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 16,
+    borderRadius: 12,
+  },
+  optionIcon: {
+    fontSize: 24,
+    marginBottom: 4,
+  },
+  optionLabel: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  cancelButton: {
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  cancelText: {
+    fontSize: 14,
+  },
+});

package/src/components/AttachmentPreview.tsx

@@ -0,0 +1,209 @@
+// ---------------------------------------------------------------------------
+// Parlr React Native SDK - Attachment Preview
+// ---------------------------------------------------------------------------
+//
+// Shows a preview of the selected attachment before sending it.
+// Supports image thumbnails and file name/size display.
+// ---------------------------------------------------------------------------
+
+import React from 'react';
+import {
+  Image,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  useColorScheme,
+} from 'react-native';
+import type { PickedFile } from './AttachmentPicker';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface AttachmentPreviewProps {
+  /** The file to preview. */
+  file: PickedFile;
+  /** Called when the user removes the attachment. */
+  onRemove: () => void;
+  /** Called when the user confirms and sends. */
+  onSend: () => void;
+  /** Accent color. */
+  accentColor?: string;
+  /** Locale. */
+  locale?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function isImage(type: string): boolean {
+  return type.startsWith('image/');
+}
+
+function getI18n(locale?: string) {
+  if (locale?.startsWith('en')) {
+    return { send: 'Send', remove: 'Remove' };
+  }
+  return { send: 'Envoyer', remove: 'Supprimer' };
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function AttachmentPreview({
+  file,
+  onRemove,
+  onSend,
+  accentColor: accentColorProp,
+  locale,
+}: AttachmentPreviewProps) {
+  const isDark = useColorScheme() === 'dark';
+  const accentColor = accentColorProp ?? '#6366f1';
+  const i18n = getI18n(locale);
+
+  return (
+    <View style={[styles.root, isDark && styles.rootDark]}>
+      <View style={[styles.previewCard, isDark && styles.previewCardDark]}>
+        {isImage(file.type) ? (
+          <Image
+            source={{ uri: file.uri }}
+            style={styles.imagePreview}
+            resizeMode="cover"
+            accessibilityLabel={file.name}
+          />
+        ) : (
+          <View style={styles.filePreview}>
+            <Text style={styles.fileIcon}>{'\ud83d\udcc4'}</Text>
+            <View style={styles.fileInfo}>
+              <Text
+                style={[styles.fileName, isDark && styles.fileNameDark]}
+                numberOfLines={1}
+              >
+                {file.name}
+              </Text>
+              <Text style={[styles.fileSize, isDark && styles.fileSizeDark]}>
+                {formatFileSize(file.size)}
+              </Text>
+            </View>
+          </View>
+        )}
+
+        {/* Remove button */}
+        <Pressable
+          onPress={onRemove}
+          style={styles.removeButton}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel={i18n.remove}
+        >
+          <Text style={styles.removeIcon}>{'\u2715'}</Text>
+        </Pressable>
+      </View>
+
+      {/* Send button */}
+      <Pressable
+        onPress={onSend}
+        style={[styles.sendButton, { backgroundColor: accentColor }]}
+        accessibilityRole="button"
+        accessibilityLabel={i18n.send}
+      >
+        <Text style={styles.sendText}>{i18n.send}</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: '#ffffff',
+    padding: 12,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#e2e8f0',
+  },
+  rootDark: {
+    backgroundColor: '#0f172a',
+    borderTopColor: '#1e293b',
+  },
+  previewCard: {
+    backgroundColor: '#f8fafc',
+    borderRadius: 12,
+    overflow: 'hidden',
+    marginBottom: 10,
+    position: 'relative',
+  },
+  previewCardDark: {
+    backgroundColor: '#1e293b',
+  },
+  imagePreview: {
+    width: '100%',
+    height: 200,
+    borderRadius: 12,
+  },
+  filePreview: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 14,
+  },
+  fileIcon: {
+    fontSize: 32,
+    marginRight: 12,
+  },
+  fileInfo: {
+    flex: 1,
+  },
+  fileName: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#0f172a',
+    marginBottom: 2,
+  },
+  fileNameDark: {
+    color: '#f1f5f9',
+  },
+  fileSize: {
+    fontSize: 12,
+    color: '#64748b',
+  },
+  fileSizeDark: {
+    color: '#94a3b8',
+  },
+  removeButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  removeIcon: {
+    color: '#ffffff',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  sendButton: {
+    paddingVertical: 12,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  sendText: {
+    color: '#ffffff',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+});