@swiftpatch/react-native 2.0.0

package/src/modal/SwiftPatchModal.tsx

@@ -0,0 +1,657 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  FlatList,
+  ActivityIndicator,
+  StyleSheet,
+  SafeAreaView,
+  ScrollView,
+} from 'react-native';
+import { useSwiftPatch } from '../useSwiftPatch';
+import {
+  verifySDKPin,
+  listBuckets,
+  listBundles,
+} from '../utils/api';
+import NativeSwiftPatch from '../native/NativeSwiftPatch';
+import { EnvironmentMode } from '../types';
+import type { SlotMetadata } from '../types';
+
+interface SwiftPatchModalProps {
+  visible: boolean;
+  onClose: () => void;
+  serverUrl: string;
+  deploymentKey: string;
+  customHeaders?: Record<string, string>;
+}
+
+type ModalScreen = 'login' | 'dashboard' | 'bundles';
+
+interface BucketItem {
+  id: string;
+  name: string;
+  slug: string;
+  isDefault: boolean;
+  totalReleases: number;
+}
+
+interface BundleItem {
+  id: string;
+  version: string;
+  buildNumber: number;
+  platform: string;
+  bundleHash: string;
+  bundleSize: number;
+  releaseNote?: string;
+  status: string;
+  isMandatory: boolean;
+  createdAt: string;
+}
+
+export function SwiftPatchModal({
+  visible,
+  onClose,
+  serverUrl,
+  deploymentKey,
+  customHeaders = {},
+}: SwiftPatchModalProps) {
+  const ctx = useSwiftPatch();
+
+  const [screen, setScreen] = useState<ModalScreen>('login');
+  const [sdkToken, setSdkToken] = useState<string | null>(null);
+  const [pin, setPin] = useState('');
+  const [loginError, setLoginError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [buckets, setBuckets] = useState<BucketItem[]>([]);
+  const [bundles, setBundles] = useState<BundleItem[]>([]);
+  const [selectedBucket, setSelectedBucket] = useState<BucketItem | null>(null);
+  const [hasMoreBundles, setHasMoreBundles] = useState(false);
+  const [pageOffset, setPageOffset] = useState(0);
+  const [downloadingHash, setDownloadingHash] = useState<string | null>(null);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [metadata, setMetadata] = useState<SlotMetadata | null>(null);
+
+  // Fetch metadata on open
+  useEffect(() => {
+    if (visible) {
+      NativeSwiftPatch.getSlotMetadata().then(setMetadata).catch(() => {});
+    }
+  }, [visible]);
+
+  // Login handler
+  const handleLogin = useCallback(async () => {
+    if (pin.length < 4) {
+      setLoginError('PIN must be at least 4 characters');
+      return;
+    }
+
+    setIsLoading(true);
+    setLoginError('');
+
+    const result = await verifySDKPin({
+      serverUrl,
+      deploymentKey,
+      pin,
+      customHeaders,
+    });
+
+    setIsLoading(false);
+
+    if (result) {
+      setSdkToken(result.sdkToken);
+      setScreen('dashboard');
+      // Fetch buckets
+      const bucketsData = await listBuckets({ serverUrl, sdkToken: result.sdkToken, deploymentKey, customHeaders });
+      setBuckets(bucketsData);
+    } else {
+      setLoginError('Invalid PIN. Please try again.');
+    }
+  }, [pin, serverUrl, deploymentKey, customHeaders]);
+
+  // Load bundles for a bucket
+  const loadBundles = useCallback(async (bucket: BucketItem, offset = 0) => {
+    if (!sdkToken) return;
+    setIsLoading(true);
+    setSelectedBucket(bucket);
+    setPageOffset(offset);
+
+    const result = await listBundles({
+      serverUrl,
+      sdkToken,
+      deploymentKey,
+      channelId: bucket.id,
+      pageOffset: offset,
+      customHeaders,
+    });
+
+    if (offset === 0) {
+      setBundles(result.bundles);
+    } else {
+      setBundles(prev => [...prev, ...result.bundles]);
+    }
+    setHasMoreBundles(result.hasMore);
+    setIsLoading(false);
+    setScreen('bundles');
+  }, [sdkToken, serverUrl, deploymentKey, customHeaders]);
+
+  // Download a specific bundle (stage)
+  const handleDownloadBundle = useCallback(async (bundle: BundleItem) => {
+    try {
+      setDownloadingHash(bundle.bundleHash);
+      setDownloadProgress(0);
+
+      // Download as stage bundle for testing
+      await ctx.downloadStageBundle(
+        `${serverUrl}/releases/${bundle.id}/download`,
+        bundle.bundleHash
+      );
+
+      setDownloadingHash(null);
+      setDownloadProgress(100);
+
+      // Refresh metadata
+      const meta = await NativeSwiftPatch.getSlotMetadata();
+      setMetadata(meta);
+    } catch (e) {
+      setDownloadingHash(null);
+      setDownloadProgress(0);
+    }
+  }, [ctx, serverUrl]);
+
+  // Switch environment
+  const handleSwitchEnvironment = useCallback(async () => {
+    const currentEnv = metadata?.environment || 'PROD';
+    const newEnv = currentEnv === 'PROD' ? EnvironmentMode.STAGING : EnvironmentMode.PRODUCTION;
+    const meta = await ctx.switchEnvironment(newEnv);
+    setMetadata(meta);
+  }, [ctx, metadata]);
+
+  // Stabilize
+  const handleStabilize = useCallback(async () => {
+    try {
+      const meta = await ctx.stabilize();
+      setMetadata(meta);
+    } catch (_e) {}
+  }, [ctx]);
+
+  // Rollback
+  const handleRollback = useCallback(async () => {
+    try {
+      await ctx.rollback();
+      const meta = await NativeSwiftPatch.getSlotMetadata();
+      setMetadata(meta);
+    } catch (_e) {}
+  }, [ctx]);
+
+  // Restart
+  const handleRestart = useCallback(() => {
+    ctx.restart();
+  }, [ctx]);
+
+  const handleClose = useCallback(() => {
+    setPin('');
+    setLoginError('');
+    setScreen(sdkToken ? 'dashboard' : 'login');
+    onClose();
+  }, [onClose, sdkToken]);
+
+  // ─── Render Login Screen ───────────────────────────────────
+
+  const renderLogin = () => (
+    <View style={styles.screenContainer}>
+      <Text style={styles.title}>SwiftPatch Dashboard</Text>
+      <Text style={styles.subtitle}>Enter your SDK PIN to access</Text>
+
+      <TextInput
+        style={styles.pinInput}
+        value={pin}
+        onChangeText={(text) => {
+          setPin(text.replace(/[^0-9a-zA-Z]/g, ''));
+          setLoginError('');
+        }}
+        placeholder="Enter PIN"
+        placeholderTextColor="#666"
+        secureTextEntry
+        maxLength={8}
+        autoFocus
+      />
+
+      {loginError ? <Text style={styles.errorText}>{loginError}</Text> : null}
+
+      <TouchableOpacity
+        style={[styles.button, pin.length < 4 && styles.buttonDisabled]}
+        onPress={handleLogin}
+        disabled={pin.length < 4 || isLoading}
+      >
+        {isLoading ? (
+          <ActivityIndicator color="#fff" size="small" />
+        ) : (
+          <Text style={styles.buttonText}>Unlock</Text>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+
+  // ─── Render Dashboard Screen ───────────────────────────────
+
+  const renderDashboard = () => (
+    <ScrollView style={styles.screenContainer}>
+      <Text style={styles.title}>Dashboard</Text>
+
+      {/* Current Status */}
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>Current Status</Text>
+        <View style={styles.row}>
+          <Text style={styles.label}>Environment:</Text>
+          <TouchableOpacity style={styles.envBadge} onPress={handleSwitchEnvironment}>
+            <Text style={styles.envBadgeText}>
+              {metadata?.environment || 'PROD'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.label}>Slot:</Text>
+          <Text style={styles.value}>{metadata?.prod?.currentSlot || 'DEFAULT'}</Text>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.label}>New Hash:</Text>
+          <Text style={styles.value}>{metadata?.prod?.newHash?.substring(0, 12) || 'none'}...</Text>
+        </View>
+        <View style={styles.row}>
+          <Text style={styles.label}>Stable Hash:</Text>
+          <Text style={styles.value}>{metadata?.prod?.stableHash?.substring(0, 12) || 'none'}...</Text>
+        </View>
+        {metadata?.prod?.tempHash && (
+          <View style={styles.row}>
+            <Text style={styles.label}>Pending:</Text>
+            <Text style={[styles.value, { color: '#f59e0b' }]}>
+              {metadata.prod.tempHash.substring(0, 12)}... (restart required)
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {/* Actions */}
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>Actions</Text>
+        <View style={styles.actionsRow}>
+          {metadata?.prod?.currentSlot === 'NEW_SLOT' && (
+            <TouchableOpacity style={styles.actionButton} onPress={handleStabilize}>
+              <Text style={styles.actionButtonText}>Stabilize</Text>
+            </TouchableOpacity>
+          )}
+          {metadata?.prod?.currentSlot !== 'DEFAULT_SLOT' && (
+            <TouchableOpacity style={[styles.actionButton, styles.dangerButton]} onPress={handleRollback}>
+              <Text style={styles.actionButtonText}>Rollback</Text>
+            </TouchableOpacity>
+          )}
+          {ctx.isRestartRequired && (
+            <TouchableOpacity style={[styles.actionButton, styles.successButton]} onPress={handleRestart}>
+              <Text style={styles.actionButtonText}>Restart</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      </View>
+
+      {/* Buckets */}
+      <View style={styles.card}>
+        <Text style={styles.cardTitle}>Channels</Text>
+        {buckets.length === 0 ? (
+          <Text style={styles.emptyText}>No channels found</Text>
+        ) : (
+          buckets.map((bucket) => (
+            <TouchableOpacity
+              key={bucket.id}
+              style={styles.bucketItem}
+              onPress={() => loadBundles(bucket)}
+            >
+              <View>
+                <Text style={styles.bucketName}>{bucket.name}</Text>
+                <Text style={styles.bucketMeta}>
+                  {bucket.totalReleases} releases {bucket.isDefault ? '(default)' : ''}
+                </Text>
+              </View>
+              <Text style={styles.chevron}>›</Text>
+            </TouchableOpacity>
+          ))
+        )}
+      </View>
+    </ScrollView>
+  );
+
+  // ─── Render Bundles Screen ─────────────────────────────────
+
+  const renderBundles = () => (
+    <View style={styles.screenContainer}>
+      <TouchableOpacity onPress={() => setScreen('dashboard')} style={styles.backButton}>
+        <Text style={styles.backText}>‹ Back</Text>
+      </TouchableOpacity>
+
+      <Text style={styles.title}>{selectedBucket?.name || 'Bundles'}</Text>
+
+      <FlatList
+        data={bundles}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <View style={styles.bundleCard}>
+            <View style={styles.bundleHeader}>
+              <Text style={styles.bundleVersion}>v{item.version} ({item.buildNumber})</Text>
+              <View style={[styles.statusBadge, item.status === 'RELEASED' ? styles.releasedBadge : styles.readyBadge]}>
+                <Text style={styles.statusBadgeText}>{item.status}</Text>
+              </View>
+            </View>
+            <Text style={styles.bundlePlatform}>{item.platform}</Text>
+            {item.releaseNote && <Text style={styles.bundleNote}>{item.releaseNote}</Text>}
+            <View style={styles.bundleFooter}>
+              <Text style={styles.bundleSize}>{formatSize(item.bundleSize)}</Text>
+              <TouchableOpacity
+                style={[styles.downloadButton, downloadingHash === item.bundleHash && styles.buttonDisabled]}
+                onPress={() => handleDownloadBundle(item)}
+                disabled={downloadingHash !== null}
+              >
+                {downloadingHash === item.bundleHash ? (
+                  <ActivityIndicator color="#fff" size="small" />
+                ) : (
+                  <Text style={styles.downloadButtonText}>Download</Text>
+                )}
+              </TouchableOpacity>
+            </View>
+          </View>
+        )}
+        ListEmptyComponent={
+          <Text style={styles.emptyText}>No bundles found</Text>
+        }
+        onEndReached={() => {
+          if (hasMoreBundles && !isLoading && selectedBucket) {
+            loadBundles(selectedBucket, pageOffset + 1);
+          }
+        }}
+        onEndReachedThreshold={0.5}
+        ListFooterComponent={
+          isLoading ? <ActivityIndicator style={{ margin: 20 }} color="#007AFF" /> : null
+        }
+      />
+    </View>
+  );
+
+  // ─── Main Render ───────────────────────────────────────────
+
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      presentationStyle="pageSheet"
+      onRequestClose={handleClose}
+    >
+      <SafeAreaView style={styles.container}>
+        {/* Header */}
+        <View style={styles.header}>
+          <Text style={styles.headerTitle}>SwiftPatch</Text>
+          <TouchableOpacity onPress={handleClose}>
+            <Text style={styles.closeButton}>✕</Text>
+          </TouchableOpacity>
+        </View>
+
+        {/* Download Progress Overlay */}
+        {downloadingHash && (
+          <View style={styles.progressBar}>
+            <View style={[styles.progressFill, { width: `${downloadProgress}%` }]} />
+          </View>
+        )}
+
+        {/* Content */}
+        {screen === 'login' && renderLogin()}
+        {screen === 'dashboard' && renderDashboard()}
+        {screen === 'bundles' && renderBundles()}
+      </SafeAreaView>
+    </Modal>
+  );
+}
+
+function formatSize(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`;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#0f0f23',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#1a1a3e',
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#fff',
+  },
+  closeButton: {
+    fontSize: 20,
+    color: '#888',
+    padding: 4,
+  },
+  progressBar: {
+    height: 3,
+    backgroundColor: '#1a1a3e',
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#007AFF',
+  },
+  screenContainer: {
+    flex: 1,
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: '700',
+    color: '#fff',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#888',
+    marginBottom: 24,
+  },
+  pinInput: {
+    backgroundColor: '#1a1a3e',
+    color: '#fff',
+    fontSize: 24,
+    textAlign: 'center',
+    letterSpacing: 8,
+    padding: 16,
+    borderRadius: 12,
+    marginBottom: 16,
+  },
+  errorText: {
+    color: '#ef4444',
+    fontSize: 14,
+    marginBottom: 16,
+    textAlign: 'center',
+  },
+  button: {
+    backgroundColor: '#007AFF',
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: 'center',
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  card: {
+    backgroundColor: '#1a1a3e',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+  },
+  cardTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#fff',
+    marginBottom: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 6,
+  },
+  label: {
+    color: '#888',
+    fontSize: 14,
+  },
+  value: {
+    color: '#fff',
+    fontSize: 14,
+    fontFamily: 'Courier',
+  },
+  envBadge: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  envBadgeText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  actionButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 8,
+    flex: 1,
+    alignItems: 'center',
+  },
+  dangerButton: {
+    backgroundColor: '#ef4444',
+  },
+  successButton: {
+    backgroundColor: '#22c55e',
+  },
+  actionButtonText: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  bucketItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#252550',
+  },
+  bucketName: {
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  bucketMeta: {
+    color: '#666',
+    fontSize: 12,
+    marginTop: 2,
+  },
+  chevron: {
+    color: '#666',
+    fontSize: 20,
+  },
+  emptyText: {
+    color: '#666',
+    textAlign: 'center',
+    paddingVertical: 20,
+  },
+  backButton: {
+    marginBottom: 12,
+  },
+  backText: {
+    color: '#007AFF',
+    fontSize: 16,
+  },
+  bundleCard: {
+    backgroundColor: '#1a1a3e',
+    borderRadius: 10,
+    padding: 14,
+    marginBottom: 10,
+  },
+  bundleHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  bundleVersion: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  statusBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  releasedBadge: {
+    backgroundColor: '#22c55e33',
+  },
+  readyBadge: {
+    backgroundColor: '#f59e0b33',
+  },
+  statusBadgeText: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: '#fff',
+  },
+  bundlePlatform: {
+    color: '#888',
+    fontSize: 12,
+    marginBottom: 4,
+  },
+  bundleNote: {
+    color: '#aaa',
+    fontSize: 13,
+    marginBottom: 8,
+  },
+  bundleFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  bundleSize: {
+    color: '#666',
+    fontSize: 12,
+  },
+  downloadButton: {
+    backgroundColor: '#007AFF',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 6,
+  },
+  downloadButtonText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+});

package/src/modal/useSwiftPatchModal.ts

@@ -0,0 +1,24 @@
+import { useState, useCallback } from 'react';
+import type { UseSwiftPatchModalReturn } from '../types';
+
+/**
+ * Hook for controlling the SwiftPatch in-app dashboard modal.
+ * Use this to show/hide the modal for bundle management.
+ */
+export function useSwiftPatchModal(): UseSwiftPatchModalReturn {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const showModal = useCallback(() => {
+    setIsModalVisible(true);
+  }, []);
+
+  const hideModal = useCallback(() => {
+    setIsModalVisible(false);
+  }, []);
+
+  return {
+    showModal,
+    hideModal,
+    isModalVisible,
+  };
+}