@buoy-gg/shared-ui 7.0.6 → 7.0.8

package/lib/module/license/ManageDevicesModal.js

@@ -1,540 +0,0 @@
-"use strict";
-
-/**
- * ManageDevicesModal - Modal for viewing and managing registered devices
- *
- * Shows all devices registered to the license with details and allows
- * deactivating devices to free up slots.
- */
-
-import React, { useState, useCallback, useEffect } from "react";
-import { View, Text, TouchableOpacity, StyleSheet, ActivityIndicator, Modal, ScrollView, Alert, Platform } from "react-native";
-import { absoluteFill } from "../utils/absoluteFill.js";
-import { gameUIColors } from "../ui/gameUI/constants/gameUIColors.js";
-import { X, Smartphone, Trash2, RefreshCw, CheckCircle, AlertTriangle } from "../icons/lucide-icons.js";
-
-// Types
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Lazy load license hooks to avoid circular dependencies
-let _useDevices = null;
-let _useSeats = null;
-function getUseDevices() {
-  if (!_useDevices) {
-    try {
-      const mod = require("@buoy-gg/license");
-      _useDevices = mod.useDevices;
-    } catch {
-      // License package not available
-    }
-  }
-  return _useDevices;
-}
-function getUseSeats() {
-  if (!_useSeats) {
-    try {
-      const mod = require("@buoy-gg/license");
-      _useSeats = mod.useSeats;
-    } catch {
-      // License package not available
-    }
-  }
-  return _useSeats;
-}
-const DeviceIcon = ({
-  platform
-}) => {
-  // Use Smartphone icon for all device types since we don't have Tablet/Monitor icons
-  return /*#__PURE__*/_jsx(Smartphone, {
-    size: 20,
-    color: gameUIColors.text
-  });
-};
-const formatDate = date => {
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
-  if (diffDays === 0) {
-    return "Today";
-  } else if (diffDays === 1) {
-    return "Yesterday";
-  } else if (diffDays < 7) {
-    return `${diffDays} days ago`;
-  } else {
-    return date.toLocaleDateString(undefined, {
-      month: "short",
-      day: "numeric",
-      year: date.getFullYear() !== now.getFullYear() ? "numeric" : undefined
-    });
-  }
-};
-const DeviceRow = ({
-  device,
-  onDeactivate,
-  isDeactivating
-}) => {
-  const handleDeactivate = () => {
-    const message = device.isCurrentDevice ? "This will deactivate your current device. You'll need to enter your license key again to use Pro features." : `Deactivate "${device.name}" from your license?`;
-    Alert.alert("Deactivate Device", message, [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Deactivate",
-      style: "destructive",
-      onPress: onDeactivate
-    }]);
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.deviceRow, device.isCurrentDevice && styles.currentDeviceRow],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.deviceIcon,
-      children: /*#__PURE__*/_jsx(DeviceIcon, {
-        platform: device.platform
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.deviceInfo,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.deviceNameRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.deviceName,
-          numberOfLines: 1,
-          children: device.name
-        }), device.isCurrentDevice && /*#__PURE__*/_jsxs(View, {
-          style: styles.currentBadge,
-          children: [/*#__PURE__*/_jsx(CheckCircle, {
-            size: 10,
-            color: gameUIColors.success
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.currentBadgeText,
-            children: "This device"
-          })]
-        })]
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: styles.deviceDetails,
-        children: [device.platform, device.osVersion ? ` ${device.osVersion}` : "", device.model ? ` • ${device.model}` : ""]
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: styles.deviceDate,
-        children: ["Registered ", formatDate(device.registeredAt)]
-      })]
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      style: styles.deactivateButton,
-      onPress: handleDeactivate,
-      disabled: isDeactivating,
-      children: isDeactivating ? /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "small",
-        color: gameUIColors.error
-      }) : /*#__PURE__*/_jsx(Trash2, {
-        size: 18,
-        color: gameUIColors.error
-      })
-    })]
-  });
-};
-export const ManageDevicesModal = ({
-  visible,
-  onClose,
-  onDeviceChange
-}) => {
-  const [deactivatingId, setDeactivatingId] = useState(null);
-  const useDevicesHook = getUseDevices();
-  const useSeatsHook = getUseSeats();
-  const devicesData = useDevicesHook?.();
-  const seatsData = useSeatsHook?.();
-  const devices = devicesData?.devices || [];
-  const isLoading = devicesData?.isLoading || false;
-  const error = devicesData?.error || null;
-  const refreshDevices = devicesData?.refreshDevices;
-  const deactivateDevice = devicesData?.deactivateDevice;
-  const registerDevice = devicesData?.registerDevice;
-  const isCurrentDeviceRegistered = devicesData?.isCurrentDeviceRegistered || false;
-  const used = seatsData?.used || 0;
-  const total = seatsData?.total || null;
-
-  // Refresh when modal opens
-  useEffect(() => {
-    if (visible && refreshDevices) {
-      refreshDevices();
-    }
-  }, [visible, refreshDevices]);
-  const handleDeactivate = useCallback(async machineId => {
-    if (!deactivateDevice) return;
-    setDeactivatingId(machineId);
-    const success = await deactivateDevice(machineId);
-    setDeactivatingId(null);
-    if (success) {
-      onDeviceChange?.();
-    }
-  }, [deactivateDevice, onDeviceChange]);
-  const handleRegisterCurrentDevice = useCallback(async () => {
-    if (!registerDevice) return;
-
-    // Generate a default device name
-    const platformName = Platform.OS === "ios" ? "iOS" : Platform.OS === "android" ? "Android" : Platform.OS;
-    const defaultName = `My ${platformName} Device`;
-    const result = await registerDevice(defaultName);
-    if (result.success) {
-      onDeviceChange?.();
-    }
-  }, [registerDevice, onDeviceChange]);
-  const handleRefresh = useCallback(() => {
-    refreshDevices?.();
-  }, [refreshDevices]);
-  const renderContent = () => {
-    if (isLoading && devices.length === 0) {
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.loadingContainer,
-        children: [/*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "large",
-          color: gameUIColors.primary
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.loadingText,
-          children: "Loading devices..."
-        })]
-      });
-    }
-    if (error) {
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.errorContainer,
-        children: [/*#__PURE__*/_jsx(AlertTriangle, {
-          size: 32,
-          color: gameUIColors.error
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.errorText,
-          children: error
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.retryButton,
-          onPress: handleRefresh,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.retryButtonText,
-            children: "Try Again"
-          })
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.statsContainer,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.statItem,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.statValue,
-            children: used
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.statLabel,
-            children: "Devices"
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.statDivider
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.statItem,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.statValue,
-            children: total || "∞"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.statLabel,
-            children: "Limit"
-          })]
-        }), total !== null && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(View, {
-            style: styles.statDivider
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.statItem,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: [styles.statValue, total - used <= 0 && styles.statValueDanger],
-              children: Math.max(0, total - used)
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.statLabel,
-              children: "Available"
-            })]
-          })]
-        })]
-      }), !isCurrentDeviceRegistered && /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.registerButton,
-        onPress: handleRegisterCurrentDevice,
-        disabled: isLoading,
-        children: isLoading ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: "#fff"
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Smartphone, {
-            size: 16,
-            color: "#fff"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.registerButtonText,
-            children: "Register This Device"
-          })]
-        })
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        style: styles.deviceList,
-        showsVerticalScrollIndicator: false,
-        children: devices.length === 0 ? /*#__PURE__*/_jsxs(View, {
-          style: styles.emptyContainer,
-          children: [/*#__PURE__*/_jsx(Smartphone, {
-            size: 40,
-            color: gameUIColors.muted
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.emptyText,
-            children: "No devices registered"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.emptySubtext,
-            children: "Register this device to start using Pro features"
-          })]
-        }) : devices.map(device => /*#__PURE__*/_jsx(DeviceRow, {
-          device: device,
-          onDeactivate: () => handleDeactivate(device.id),
-          isDeactivating: deactivatingId === device.id
-        }, device.id))
-      })]
-    });
-  };
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: visible,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: onClose,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.overlay,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: styles.backdrop,
-        activeOpacity: 1,
-        onPress: onClose
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.modal,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.header,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.title,
-            children: "Manage Devices"
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.headerActions,
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              style: styles.refreshButton,
-              onPress: handleRefresh,
-              disabled: isLoading,
-              children: /*#__PURE__*/_jsx(RefreshCw, {
-                size: 18,
-                color: gameUIColors.muted,
-                style: isLoading ? {
-                  opacity: 0.5
-                } : undefined
-              })
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              style: styles.closeButton,
-              onPress: onClose,
-              children: /*#__PURE__*/_jsx(X, {
-                size: 20,
-                color: gameUIColors.muted
-              })
-            })]
-          })]
-        }), renderContent()]
-      })]
-    })
-  });
-};
-const styles = StyleSheet.create({
-  overlay: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  backdrop: {
-    ...absoluteFill,
-    backgroundColor: "rgba(0, 0, 0, 0.7)"
-  },
-  modal: {
-    backgroundColor: gameUIColors.panel,
-    borderRadius: 16,
-    width: "90%",
-    maxWidth: 420,
-    maxHeight: "80%",
-    borderWidth: 1,
-    borderColor: gameUIColors.border
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    padding: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: gameUIColors.border
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "700",
-    color: gameUIColors.text
-  },
-  headerActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  refreshButton: {
-    padding: 4
-  },
-  closeButton: {
-    padding: 4
-  },
-  statsContainer: {
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    paddingVertical: 16,
-    paddingHorizontal: 20,
-    backgroundColor: gameUIColors.background
-  },
-  statItem: {
-    alignItems: "center",
-    paddingHorizontal: 20
-  },
-  statValue: {
-    fontSize: 24,
-    fontWeight: "700",
-    color: gameUIColors.text
-  },
-  statValueDanger: {
-    color: gameUIColors.error
-  },
-  statLabel: {
-    fontSize: 12,
-    color: gameUIColors.muted,
-    marginTop: 2
-  },
-  statDivider: {
-    width: 1,
-    height: 30,
-    backgroundColor: gameUIColors.border
-  },
-  registerButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 8,
-    backgroundColor: gameUIColors.success,
-    marginHorizontal: 16,
-    marginTop: 16,
-    paddingVertical: 12,
-    borderRadius: 8
-  },
-  registerButtonText: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#fff"
-  },
-  deviceList: {
-    flex: 1,
-    padding: 16
-  },
-  deviceRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 12,
-    backgroundColor: gameUIColors.background,
-    borderRadius: 8,
-    marginBottom: 8,
-    borderWidth: 1,
-    borderColor: gameUIColors.border
-  },
-  currentDeviceRow: {
-    borderColor: gameUIColors.success + "60",
-    backgroundColor: gameUIColors.success + "10"
-  },
-  deviceIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: gameUIColors.panel,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  deviceInfo: {
-    flex: 1,
-    marginLeft: 12
-  },
-  deviceNameRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  deviceName: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: gameUIColors.text,
-    flexShrink: 1
-  },
-  currentBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: gameUIColors.success + "20",
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  currentBadgeText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: gameUIColors.success
-  },
-  deviceDetails: {
-    fontSize: 12,
-    color: gameUIColors.muted,
-    marginTop: 2
-  },
-  deviceDate: {
-    fontSize: 11,
-    color: gameUIColors.muted,
-    marginTop: 4
-  },
-  deactivateButton: {
-    padding: 8,
-    marginLeft: 8
-  },
-  loadingContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 40
-  },
-  loadingText: {
-    fontSize: 14,
-    color: gameUIColors.muted,
-    marginTop: 12
-  },
-  errorContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 40
-  },
-  errorText: {
-    fontSize: 14,
-    color: gameUIColors.error,
-    marginTop: 12,
-    textAlign: "center"
-  },
-  retryButton: {
-    marginTop: 16,
-    paddingVertical: 8,
-    paddingHorizontal: 16
-  },
-  retryButtonText: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: gameUIColors.primary
-  },
-  emptyContainer: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 40
-  },
-  emptyText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: gameUIColors.text,
-    marginTop: 16
-  },
-  emptySubtext: {
-    fontSize: 13,
-    color: gameUIColors.muted,
-    marginTop: 4,
-    textAlign: "center"
-  }
-});

package/lib/module/types/index.js

@@ -1,3 +0,0 @@
-"use strict";
-
-export * from "./types.js";

package/lib/module/ui/components/Divider.js

@@ -1,14 +0,0 @@
-"use strict";
-
-import { View } from "react-native";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function Divider() {
-  return /*#__PURE__*/_jsx(View, {
-    style: {
-      width: 1,
-      height: 12,
-      backgroundColor: "rgba(107, 114, 128, 0.4)",
-      flexShrink: 0
-    }
-  });
-}

package/lib/module/ui/components/ErrorBoundary.js

@@ -1,108 +0,0 @@
-"use strict";
-
-import { Component } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { AlertTriangle, RefreshCw } from "../../icons/index.js";
-import { buoyColors } from "../gameUI/constants/gameUIColors.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      hasError: false
-    };
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      hasError: true,
-      error
-    };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("RnBetterDevToolsBubble Error:", error, errorInfo);
-  }
-  handleRetry = () => {
-    this.setState({
-      hasError: false,
-      error: undefined
-    });
-  };
-  render() {
-    if (this.state.hasError) {
-      if (this.props.fallback) {
-        return this.props.fallback;
-      }
-      return /*#__PURE__*/_jsx(View, {
-        style: styles.errorContainer,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.errorContent,
-          children: [/*#__PURE__*/_jsx(AlertTriangle, {
-            color: "#EF4444",
-            size: 20
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.errorTitle,
-            children: "Dev Tools Error"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.errorMessage,
-            children: this.state.error?.message || "Something went wrong"
-          }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-            "sentry-label": "ignore devtools error boundary retry",
-            style: styles.retryButton,
-            onPress: this.handleRetry,
-            children: [/*#__PURE__*/_jsx(RefreshCw, {
-              color: "#60A5FA",
-              size: 16
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.retryText,
-              children: "Retry"
-            })]
-          })]
-        })
-      });
-    }
-    return this.props.children;
-  }
-}
-const styles = StyleSheet.create({
-  errorContainer: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: "#EF4444",
-    padding: 12,
-    minWidth: 200,
-    maxWidth: 300
-  },
-  errorContent: {
-    alignItems: "center",
-    gap: 8
-  },
-  errorTitle: {
-    color: "#EF4444",
-    fontSize: 14,
-    fontWeight: "600"
-  },
-  errorMessage: {
-    color: buoyColors.textSecondary,
-    fontSize: 12,
-    textAlign: "center",
-    lineHeight: 16
-  },
-  retryButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: "rgba(96, 165, 250, 0.1)",
-    borderWidth: 1,
-    borderColor: "#60A5FA",
-    borderRadius: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    marginTop: 4
-  },
-  retryText: {
-    color: "#60A5FA",
-    fontSize: 12,
-    fontWeight: "500"
-  }
-});