@swiftpatch/react-native 2.0.0

package/lib/module/modal/SwiftPatchModal.js

@@ -0,0 +1,661 @@
+"use strict";
+
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SwiftPatchModal({
+  visible,
+  onClose,
+  serverUrl,
+  deploymentKey,
+  customHeaders = {}
+}) {
+  const ctx = useSwiftPatch();
+  const [screen, setScreen] = useState('login');
+  const [sdkToken, setSdkToken] = useState(null);
+  const [pin, setPin] = useState('');
+  const [loginError, setLoginError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [buckets, setBuckets] = useState([]);
+  const [bundles, setBundles] = useState([]);
+  const [selectedBucket, setSelectedBucket] = useState(null);
+  const [hasMoreBundles, setHasMoreBundles] = useState(false);
+  const [pageOffset, setPageOffset] = useState(0);
+  const [downloadingHash, setDownloadingHash] = useState(null);
+  const [downloadProgress, setDownloadProgress] = useState(0);
+  const [metadata, setMetadata] = useState(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, 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 => {
+    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 = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.screenContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.title,
+      children: "SwiftPatch Dashboard"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.subtitle,
+      children: "Enter your SDK PIN to access"
+    }), /*#__PURE__*/_jsx(TextInput, {
+      style: styles.pinInput,
+      value: pin,
+      onChangeText: text => {
+        setPin(text.replace(/[^0-9a-zA-Z]/g, ''));
+        setLoginError('');
+      },
+      placeholder: "Enter PIN",
+      placeholderTextColor: "#666",
+      secureTextEntry: true,
+      maxLength: 8,
+      autoFocus: true
+    }), loginError ? /*#__PURE__*/_jsx(Text, {
+      style: styles.errorText,
+      children: loginError
+    }) : null, /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: [styles.button, pin.length < 4 && styles.buttonDisabled],
+      onPress: handleLogin,
+      disabled: pin.length < 4 || isLoading,
+      children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        color: "#fff",
+        size: "small"
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: styles.buttonText,
+        children: "Unlock"
+      })
+    })]
+  });
+
+  // ─── Render Dashboard Screen ───────────────────────────────
+
+  const renderDashboard = () => /*#__PURE__*/_jsxs(ScrollView, {
+    style: styles.screenContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.title,
+      children: "Dashboard"
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.card,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.cardTitle,
+        children: "Current Status"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.row,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          children: "Environment:"
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.envBadge,
+          onPress: handleSwitchEnvironment,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.envBadgeText,
+            children: metadata?.environment || 'PROD'
+          })
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.row,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          children: "Slot:"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.value,
+          children: metadata?.prod?.currentSlot || 'DEFAULT'
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.row,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          children: "New Hash:"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.value,
+          children: [metadata?.prod?.newHash?.substring(0, 12) || 'none', "..."]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.row,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          children: "Stable Hash:"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.value,
+          children: [metadata?.prod?.stableHash?.substring(0, 12) || 'none', "..."]
+        })]
+      }), metadata?.prod?.tempHash && /*#__PURE__*/_jsxs(View, {
+        style: styles.row,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.label,
+          children: "Pending:"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: [styles.value, {
+            color: '#f59e0b'
+          }],
+          children: [metadata.prod.tempHash.substring(0, 12), "... (restart required)"]
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.card,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.cardTitle,
+        children: "Actions"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.actionsRow,
+        children: [metadata?.prod?.currentSlot === 'NEW_SLOT' && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.actionButton,
+          onPress: handleStabilize,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.actionButtonText,
+            children: "Stabilize"
+          })
+        }), metadata?.prod?.currentSlot !== 'DEFAULT_SLOT' && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.actionButton, styles.dangerButton],
+          onPress: handleRollback,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.actionButtonText,
+            children: "Rollback"
+          })
+        }), ctx.isRestartRequired && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: [styles.actionButton, styles.successButton],
+          onPress: handleRestart,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.actionButtonText,
+            children: "Restart"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.card,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.cardTitle,
+        children: "Channels"
+      }), buckets.length === 0 ? /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: "No channels found"
+      }) : buckets.map(bucket => /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: styles.bucketItem,
+        onPress: () => loadBundles(bucket),
+        children: [/*#__PURE__*/_jsxs(View, {
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.bucketName,
+            children: bucket.name
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.bucketMeta,
+            children: [bucket.totalReleases, " releases ", bucket.isDefault ? '(default)' : '']
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.chevron,
+          children: "\u203A"
+        })]
+      }, bucket.id))]
+    })]
+  });
+
+  // ─── Render Bundles Screen ─────────────────────────────────
+
+  const renderBundles = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.screenContainer,
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      onPress: () => setScreen('dashboard'),
+      style: styles.backButton,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.backText,
+        children: "\u2039 Back"
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.title,
+      children: selectedBucket?.name || 'Bundles'
+    }), /*#__PURE__*/_jsx(FlatList, {
+      data: bundles,
+      keyExtractor: item => item.id,
+      renderItem: ({
+        item
+      }) => /*#__PURE__*/_jsxs(View, {
+        style: styles.bundleCard,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.bundleHeader,
+          children: [/*#__PURE__*/_jsxs(Text, {
+            style: styles.bundleVersion,
+            children: ["v", item.version, " (", item.buildNumber, ")"]
+          }), /*#__PURE__*/_jsx(View, {
+            style: [styles.statusBadge, item.status === 'RELEASED' ? styles.releasedBadge : styles.readyBadge],
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.statusBadgeText,
+              children: item.status
+            })
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.bundlePlatform,
+          children: item.platform
+        }), item.releaseNote && /*#__PURE__*/_jsx(Text, {
+          style: styles.bundleNote,
+          children: item.releaseNote
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.bundleFooter,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.bundleSize,
+            children: formatSize(item.bundleSize)
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            style: [styles.downloadButton, downloadingHash === item.bundleHash && styles.buttonDisabled],
+            onPress: () => handleDownloadBundle(item),
+            disabled: downloadingHash !== null,
+            children: downloadingHash === item.bundleHash ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              color: "#fff",
+              size: "small"
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: styles.downloadButtonText,
+              children: "Download"
+            })
+          })]
+        })]
+      }),
+      ListEmptyComponent: /*#__PURE__*/_jsx(Text, {
+        style: styles.emptyText,
+        children: "No bundles found"
+      }),
+      onEndReached: () => {
+        if (hasMoreBundles && !isLoading && selectedBucket) {
+          loadBundles(selectedBucket, pageOffset + 1);
+        }
+      },
+      onEndReachedThreshold: 0.5,
+      ListFooterComponent: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        style: {
+          margin: 20
+        },
+        color: "#007AFF"
+      }) : null
+    })]
+  });
+
+  // ─── Main Render ───────────────────────────────────────────
+
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    animationType: "slide",
+    presentationStyle: "pageSheet",
+    onRequestClose: handleClose,
+    children: /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.headerTitle,
+          children: "SwiftPatch"
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleClose,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.closeButton,
+            children: "\u2715"
+          })
+        })]
+      }), downloadingHash && /*#__PURE__*/_jsx(View, {
+        style: styles.progressBar,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.progressFill, {
+            width: `${downloadProgress}%`
+          }]
+        })
+      }), screen === 'login' && renderLogin(), screen === 'dashboard' && renderDashboard(), screen === 'bundles' && renderBundles()]
+    })
+  });
+}
+function formatSize(bytes) {
+  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'
+  }
+});
+//# sourceMappingURL=SwiftPatchModal.js.map