@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/ui/components/CompactRow.js

@@ -0,0 +1,230 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CompactRow = CompactRow;
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function CompactRow({
+  statusDotColor,
+  statusLabel,
+  statusSublabel,
+  primaryText,
+  secondaryText,
+  expandedContent,
+  isExpanded,
+  badgeText,
+  badgeColor,
+  customBadge,
+  showChevron,
+  bottomRightText,
+  isSelected,
+  onPress,
+  disabled,
+  expandedGlowColor
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.rowWrapper,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+      style: [styles.row, isSelected && styles.selectedRow, isExpanded && [styles.expandedRowActive, {
+        borderColor: expandedGlowColor || _gameUIColors.buoyColors.primary,
+        shadowColor: expandedGlowColor || _gameUIColors.buoyColors.primary
+      }]],
+      onPress: onPress,
+      activeOpacity: 0.8,
+      disabled: disabled || !onPress,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.rowContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.statusSection,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.statusDot, {
+              backgroundColor: statusDotColor
+            }]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.statusInfo,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.statusLabel, {
+                color: statusDotColor
+              }],
+              numberOfLines: 1,
+              children: statusLabel
+            }), statusSublabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.observerText,
+              numberOfLines: 1,
+              children: statusSublabel
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.querySection,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.queryHash,
+            numberOfLines: isExpanded ? undefined : 2,
+            children: primaryText
+          }), !isExpanded && secondaryText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.secondaryText,
+            numberOfLines: 1,
+            children: secondaryText
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.rightSection,
+          children: [(customBadge || badgeText !== undefined) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.badgeContainer,
+            children: customBadge ? customBadge : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.statusBadge, {
+                color: badgeColor || statusDotColor
+              }],
+              children: badgeText
+            })
+          }), showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.chevronContainer,
+            children: isExpanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronDown, {
+              size: 14,
+              color: _gameUIColors.buoyColors.textMuted
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronRight, {
+              size: 14,
+              color: _gameUIColors.buoyColors.textMuted
+            })
+          })]
+        })]
+      }), isExpanded && expandedContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.expandedContent,
+        children: expandedContent
+      }), !isExpanded && bottomRightText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.bottomRightContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.bottomRightText,
+          children: bottomRightText
+        })
+      })]
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  rowWrapper: {
+    position: "relative",
+    marginHorizontal: 8,
+    marginVertical: 3
+  },
+  row: {
+    backgroundColor: _gameUIColors.buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _gameUIColors.buoyColors.border + "40",
+    padding: 12,
+    transform: [{
+      scale: 1
+    }]
+  },
+  selectedRow: {
+    backgroundColor: _gameUIColors.buoyColors.primary + "15",
+    borderColor: _gameUIColors.buoyColors.primary + "50",
+    transform: [{
+      scale: 1.01
+    }],
+    shadowColor: _gameUIColors.buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 2
+  },
+  expandedRowActive: {
+    transform: [{
+      scale: 1.02
+    }],
+    borderWidth: 2,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.8,
+    shadowRadius: 20,
+    elevation: 10
+  },
+  rowContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  statusSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    width: 90,
+    // Fixed width instead of flex to ensure consistent alignment
+    minWidth: 90
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  statusInfo: {
+    flex: 1,
+    maxWidth: 70 // Ensure status text doesn't overflow
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    lineHeight: 14
+  },
+  observerText: {
+    fontSize: 10,
+    color: _gameUIColors.buoyColors.textMuted,
+    marginTop: 1
+  },
+  querySection: {
+    flex: 2,
+    paddingHorizontal: 12
+  },
+  queryHash: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    color: _gameUIColors.buoyColors.text,
+    lineHeight: 16
+  },
+  secondaryText: {
+    fontSize: 10,
+    color: _gameUIColors.buoyColors.textMuted,
+    marginTop: 1
+  },
+  rightSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  badgeContainer: {
+    alignItems: "flex-end"
+  },
+  statusBadge: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
+  },
+  chevronContainer: {
+    padding: 2
+  },
+  expandedContent: {
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: _gameUIColors.buoyColors.border + "20",
+    marginLeft: 24 // Align with content after status dot
+  },
+  bottomRightContainer: {
+    position: "absolute",
+    bottom: 4,
+    right: 8
+  },
+  bottomRightText: {
+    fontSize: 9,
+    color: _gameUIColors.buoyColors.textMuted,
+    fontFamily: "monospace"
+  }
+});

package/lib/commonjs/ui/components/CopyButton.js

@@ -0,0 +1,256 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarCopyButton = exports.InlineCopyButton = exports.CopyButton = exports.ActionCopyButton = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _copyToClipboard = require("../../clipboard/copyToClipboard.js");
+var _gameUIColors = require("../gameUI/constants/gameUIColors.js");
+var _lucideIcons = require("../../icons/lucide-icons.js");
+var _ClipboardHintBanner = require("./ClipboardHintBanner.js");
+var _devToolsStorageKeys = require("../../storage/devToolsStorageKeys.js");
+var _safeAsyncStorage = require("../../utils/safeAsyncStorage.js");
+var _index = require("../../context/index.js");
+var _FeatureGate = require("../../license/FeatureGate.js");
+var _jsxRuntime = require("react/jsx-runtime");
+// Lazy load the license hooks to avoid circular dependencies
+let _useIsPro = null;
+let _licenseLoadAttempted = false;
+function loadLicenseModule() {
+  if (_licenseLoadAttempted) return;
+  _licenseLoadAttempted = true;
+  try {
+    const mod = require("@buoy-gg/license");
+    if (mod) {
+      _useIsPro = mod.useIsPro ?? null;
+    }
+  } catch {
+    // License package not available - will use fallback (assume not Pro)
+  }
+}
+function getUseIsPro() {
+  loadLicenseModule();
+  return _useIsPro ?? (() => false);
+}
+/**
+ * Reusable copy button component with visual feedback
+ * Shows different icons for idle, success, and error states
+ * Based on the React Query dev tools copy button implementation
+ */
+// Global state to track if hint has been shown (shared across all CopyButton instances)
+let globalHintAcknowledged = null;
+let globalHintLoadPromise = null;
+async function loadHintAcknowledged() {
+  if (globalHintAcknowledged !== null) {
+    return globalHintAcknowledged;
+  }
+  if (!globalHintLoadPromise) {
+    globalHintLoadPromise = (async () => {
+      try {
+        const hintKey = _devToolsStorageKeys.devToolsStorageKeys.clipboard.hintAcknowledged();
+        const acknowledged = await (0, _safeAsyncStorage.safeGetItem)(hintKey);
+        globalHintAcknowledged = acknowledged === "true";
+        return globalHintAcknowledged;
+      } catch {
+        globalHintAcknowledged = false;
+        return false;
+      }
+    })();
+  }
+  return globalHintLoadPromise;
+}
+async function setHintAcknowledged() {
+  try {
+    const hintKey = _devToolsStorageKeys.devToolsStorageKeys.clipboard.hintAcknowledged();
+    await (0, _safeAsyncStorage.safeSetItem)(hintKey, "true");
+    globalHintAcknowledged = true;
+  } catch {
+    // Failed to save, just update local state
+    globalHintAcknowledged = true;
+  }
+}
+const CopyButton = exports.CopyButton = /*#__PURE__*/(0, _react.memo)(function CopyButton({
+  value,
+  isFocused = false,
+  size = 16,
+  buttonStyle,
+  onCopySuccess,
+  onCopyError,
+  feedbackDuration = 1500,
+  colors = {},
+  disabled: _deprecated,
+  // Ignored - Pro status checked internally
+  ...touchableProps
+}) {
+  // Check Pro status internally - copy is a Pro-only feature
+  const useIsPro = getUseIsPro();
+  const isPro = useIsPro();
+  const [copyState, setCopyState] = (0, _react.useState)("idle");
+  const [showHint, setShowHint] = (0, _react.useState)(false);
+  const [showLicenseModal, setShowLicenseModal] = (0, _react.useState)(false);
+  const hintsDisabled = (0, _index.useHintsDisabled)();
+  const valueRef = (0, _react.useRef)(value);
+  const timeoutRef = (0, _react.useRef)(null);
+  valueRef.current = value;
+
+  // Cleanup timeout on unmount
+  (0, _react.useEffect)(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Handle hint acknowledgment
+  const handleHintAcknowledge = (0, _react.useCallback)(async () => {
+    setShowHint(false);
+    await setHintAcknowledged();
+  }, []);
+
+  // Handle press - either show license modal (if not Pro) or copy
+  const handlePress = (0, _react.useCallback)(() => {
+    if (!isPro) {
+      setShowLicenseModal(true);
+      return;
+    }
+    handleCopyInternal();
+  }, [isPro]);
+  const handleCopyInternal = (0, _react.useCallback)(async () => {
+    // Clear existing timeout if any
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    try {
+      const copied = await (0, _copyToClipboard.copyToClipboard)(valueRef.current);
+      if (copied) {
+        setCopyState("success");
+        onCopySuccess?.();
+
+        // Check if we should show the hint (first successful copy)
+        // Skip if hints are globally disabled
+        if (!hintsDisabled) {
+          const alreadyAcknowledged = await loadHintAcknowledged();
+          if (!alreadyAcknowledged) {
+            setShowHint(true);
+          }
+        }
+        timeoutRef.current = setTimeout(() => {
+          setCopyState("idle");
+          timeoutRef.current = null;
+        }, feedbackDuration);
+      } else {
+        setCopyState("error");
+        onCopyError?.();
+        timeoutRef.current = setTimeout(() => {
+          setCopyState("idle");
+          timeoutRef.current = null;
+        }, feedbackDuration);
+      }
+    } catch {
+      setCopyState("error");
+      onCopyError?.();
+      timeoutRef.current = setTimeout(() => {
+        setCopyState("idle");
+        timeoutRef.current = null;
+      }, feedbackDuration);
+    }
+  }, [feedbackDuration, onCopySuccess, onCopyError, hintsDisabled]);
+  const getColor = (0, _react.useCallback)(() => {
+    switch (copyState) {
+      case "success":
+        return colors.success || _gameUIColors.gameUIColors.success;
+      case "error":
+        return colors.error || _gameUIColors.gameUIColors.error;
+      default:
+        return isFocused ? colors.idleFocused || _gameUIColors.gameUIColors.info : colors.idle || _gameUIColors.gameUIColors.secondary;
+    }
+  }, [copyState, isFocused, colors]);
+
+  // Render the appropriate icon - always show copy icon, modal handles gating
+  const renderIcon = () => {
+    if (copyState === "success") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.CheckCircle2, {
+        size: size,
+        color: getColor(),
+        strokeWidth: 2
+      });
+    }
+    if (copyState === "error") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.AlertTriangle, {
+        size: size,
+        color: getColor(),
+        strokeWidth: 2
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideIcons.Copy, {
+      size: size,
+      color: getColor(),
+      strokeWidth: 2
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      ...touchableProps,
+      style: [styles.button, buttonStyle],
+      onPress: copyState === "idle" || !isPro ? handlePress : undefined,
+      activeOpacity: 0.7,
+      hitSlop: {
+        top: 8,
+        bottom: 8,
+        left: 8,
+        right: 8
+      },
+      accessibilityLabel: copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
+      accessibilityRole: "button",
+      children: renderIcon()
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClipboardHintBanner.ClipboardHintBanner, {
+      visible: showHint,
+      onAcknowledge: handleHintAcknowledge
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FeatureGate.ProUpgradeModal, {
+      visible: showLicenseModal,
+      onClose: () => setShowLicenseModal(false),
+      featureName: "Copy"
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    padding: 4,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+/**
+ * Preset copy button for inline use (smaller size)
+ */
+const InlineCopyButton = exports.InlineCopyButton = /*#__PURE__*/(0, _react.memo)(function InlineCopyButton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
+    size: 12,
+    ...props
+  });
+});
+
+/**
+ * Preset copy button for header/toolbar use (medium size)
+ */
+const ToolbarCopyButton = exports.ToolbarCopyButton = /*#__PURE__*/(0, _react.memo)(function ToolbarCopyButton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
+    size: 14,
+    ...props
+  });
+});
+
+/**
+ * Preset copy button for main actions (larger size)
+ */
+const ActionCopyButton = exports.ActionCopyButton = /*#__PURE__*/(0, _react.memo)(function ActionCopyButton(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyButton, {
+    size: 18,
+    ...props
+  });
+});