@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,253 @@
+"use strict";
+
+import { useState, useRef, useCallback, memo, useEffect } from "react";
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { copyToClipboard } from "../../clipboard/copyToClipboard.js";
+import { gameUIColors } from "../gameUI/constants/gameUIColors.js";
+import { Copy, CheckCircle2, AlertTriangle } from "../../icons/lucide-icons.js";
+import { ClipboardHintBanner } from "./ClipboardHintBanner.js";
+import { devToolsStorageKeys } from "../../storage/devToolsStorageKeys.js";
+import { safeGetItem, safeSetItem } from "../../utils/safeAsyncStorage.js";
+import { useHintsDisabled } from "../../context/index.js";
+import { ProUpgradeModal } from "../../license/FeatureGate.js";
+
+// Lazy load the license hooks to avoid circular dependencies
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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.clipboard.hintAcknowledged();
+        const acknowledged = await safeGetItem(hintKey);
+        globalHintAcknowledged = acknowledged === "true";
+        return globalHintAcknowledged;
+      } catch {
+        globalHintAcknowledged = false;
+        return false;
+      }
+    })();
+  }
+  return globalHintLoadPromise;
+}
+async function setHintAcknowledged() {
+  try {
+    const hintKey = devToolsStorageKeys.clipboard.hintAcknowledged();
+    await safeSetItem(hintKey, "true");
+    globalHintAcknowledged = true;
+  } catch {
+    // Failed to save, just update local state
+    globalHintAcknowledged = true;
+  }
+}
+export const CopyButton = /*#__PURE__*/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] = useState("idle");
+  const [showHint, setShowHint] = useState(false);
+  const [showLicenseModal, setShowLicenseModal] = useState(false);
+  const hintsDisabled = useHintsDisabled();
+  const valueRef = useRef(value);
+  const timeoutRef = useRef(null);
+  valueRef.current = value;
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Handle hint acknowledgment
+  const handleHintAcknowledge = useCallback(async () => {
+    setShowHint(false);
+    await setHintAcknowledged();
+  }, []);
+
+  // Handle press - either show license modal (if not Pro) or copy
+  const handlePress = useCallback(() => {
+    if (!isPro) {
+      setShowLicenseModal(true);
+      return;
+    }
+    handleCopyInternal();
+  }, [isPro]);
+  const handleCopyInternal = useCallback(async () => {
+    // Clear existing timeout if any
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    try {
+      const copied = await 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 = useCallback(() => {
+    switch (copyState) {
+      case "success":
+        return colors.success || gameUIColors.success;
+      case "error":
+        return colors.error || gameUIColors.error;
+      default:
+        return isFocused ? colors.idleFocused || gameUIColors.info : colors.idle || gameUIColors.secondary;
+    }
+  }, [copyState, isFocused, colors]);
+
+  // Render the appropriate icon - always show copy icon, modal handles gating
+  const renderIcon = () => {
+    if (copyState === "success") {
+      return /*#__PURE__*/_jsx(CheckCircle2, {
+        size: size,
+        color: getColor(),
+        strokeWidth: 2
+      });
+    }
+    if (copyState === "error") {
+      return /*#__PURE__*/_jsx(AlertTriangle, {
+        size: size,
+        color: getColor(),
+        strokeWidth: 2
+      });
+    }
+    return /*#__PURE__*/_jsx(Copy, {
+      size: size,
+      color: getColor(),
+      strokeWidth: 2
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(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__*/_jsx(ClipboardHintBanner, {
+      visible: showHint,
+      onAcknowledge: handleHintAcknowledge
+    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
+      visible: showLicenseModal,
+      onClose: () => setShowLicenseModal(false),
+      featureName: "Copy"
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  button: {
+    padding: 4,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+
+/**
+ * Preset copy button for inline use (smaller size)
+ */
+export const InlineCopyButton = /*#__PURE__*/memo(function InlineCopyButton(props) {
+  return /*#__PURE__*/_jsx(CopyButton, {
+    size: 12,
+    ...props
+  });
+});
+
+/**
+ * Preset copy button for header/toolbar use (medium size)
+ */
+export const ToolbarCopyButton = /*#__PURE__*/memo(function ToolbarCopyButton(props) {
+  return /*#__PURE__*/_jsx(CopyButton, {
+    size: 14,
+    ...props
+  });
+});
+
+/**
+ * Preset copy button for main actions (larger size)
+ */
+export const ActionCopyButton = /*#__PURE__*/memo(function ActionCopyButton(props) {
+  return /*#__PURE__*/_jsx(CopyButton, {
+    size: 18,
+    ...props
+  });
+});

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

@@ -0,0 +1,318 @@
+"use strict";
+
+import { useState } from "react";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity, TextInput } from "react-native";
+import { Search, Edit3, Check, X } from "../../icons/index.js";
+import { gameUIColors } from "../gameUI/index.js";
+import { CopyButton } from "./CopyButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DataInspector({
+  data,
+  mode = "view",
+  syntax = "json",
+  theme = "dark",
+  collapsible = true,
+  searchable = true,
+  onEdit,
+  style,
+  title
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedData, setEditedData] = useState("");
+  const formatData = () => {
+    if (syntax === "json") {
+      try {
+        return JSON.stringify(data, null, 2);
+      } catch {
+        return String(data);
+      }
+    }
+    return String(data);
+  };
+  const highlightSearch = text => {
+    if (!searchQuery) return text;
+    const parts = text.split(new RegExp(`(${searchQuery})`, "gi"));
+    return parts.map((part, index) => {
+      if (part.toLowerCase() === searchQuery.toLowerCase()) {
+        return /*#__PURE__*/_jsx(Text, {
+          style: styles.highlight,
+          children: part
+        }, index);
+      }
+      return part;
+    });
+  };
+  const handleEdit = () => {
+    if (!isEditing) {
+      setEditedData(formatData());
+      setIsEditing(true);
+    } else {
+      try {
+        const newData = syntax === "json" ? JSON.parse(editedData) : editedData;
+        onEdit?.(newData);
+        setIsEditing(false);
+      } catch (error) {
+        console.error("Failed to parse edited data", error);
+      }
+    }
+  };
+  const cancelEdit = () => {
+    setIsEditing(false);
+    setEditedData("");
+  };
+  const formattedData = formatData();
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [(title || searchable || mode === "edit") && /*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [title && /*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.controls,
+        children: [searchable && !isEditing && /*#__PURE__*/_jsxs(View, {
+          style: styles.searchContainer,
+          children: [/*#__PURE__*/_jsx(Search, {
+            size: 12,
+            color: gameUIColors.secondary
+          }), /*#__PURE__*/_jsx(TextInput, {
+            style: styles.searchInput,
+            placeholder: "Search...",
+            placeholderTextColor: gameUIColors.tertiary,
+            value: searchQuery,
+            onChangeText: setSearchQuery
+          })]
+        }), mode === "edit" && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.editButton,
+          onPress: isEditing ? handleEdit : () => handleEdit(),
+          children: isEditing ? /*#__PURE__*/_jsx(Check, {
+            size: 14,
+            color: gameUIColors.success
+          }) : /*#__PURE__*/_jsx(Edit3, {
+            size: 14,
+            color: gameUIColors.primary
+          })
+        }), isEditing && /*#__PURE__*/_jsx(TouchableOpacity, {
+          style: styles.cancelButton,
+          onPress: cancelEdit,
+          children: /*#__PURE__*/_jsx(X, {
+            size: 14,
+            color: gameUIColors.error
+          })
+        }), !isEditing && /*#__PURE__*/_jsx(CopyButton, {
+          value: formattedData,
+          size: 12
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: styles.scrollView,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        showsVerticalScrollIndicator: false,
+        children: isEditing ? /*#__PURE__*/_jsx(TextInput, {
+          style: styles.editor,
+          value: editedData,
+          onChangeText: setEditedData,
+          multiline: true,
+          autoCapitalize: "none",
+          autoCorrect: false
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: styles.codeText,
+          children: searchQuery ? highlightSearch(formattedData) : formattedData
+        })
+      })
+    })]
+  });
+}
+DataInspector.Json = function JsonViewer({
+  data,
+  searchable,
+  style
+}) {
+  return /*#__PURE__*/_jsx(DataInspector, {
+    data: data,
+    syntax: "json",
+    mode: "view",
+    searchable: searchable,
+    style: style
+  });
+};
+DataInspector.Editable = function Editable({
+  data,
+  onSave,
+  style
+}) {
+  return /*#__PURE__*/_jsx(DataInspector, {
+    data: data,
+    mode: "edit",
+    onEdit: onSave,
+    style: style
+  });
+};
+DataInspector.Diff = function DiffView({
+  oldData,
+  newData,
+  style
+}) {
+  const [showMode, setShowMode] = useState("diff");
+  return /*#__PURE__*/_jsxs(View, {
+    style: style,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.diffControls,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.diffButton, showMode === "old" && styles.diffButtonActive],
+        onPress: () => setShowMode("old"),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.diffButtonText,
+          children: "Old"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.diffButton, showMode === "new" && styles.diffButtonActive],
+        onPress: () => setShowMode("new"),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.diffButtonText,
+          children: "New"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        style: [styles.diffButton, showMode === "diff" && styles.diffButtonActive],
+        onPress: () => setShowMode("diff"),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.diffButtonText,
+          children: "Diff"
+        })
+      })]
+    }), showMode === "old" && /*#__PURE__*/_jsx(DataInspector, {
+      data: oldData,
+      searchable: false
+    }), showMode === "new" && /*#__PURE__*/_jsx(DataInspector, {
+      data: newData,
+      searchable: false
+    }), showMode === "diff" && /*#__PURE__*/_jsxs(View, {
+      style: styles.diffContainer,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.diffPane,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.diffPaneTitle,
+          children: "Old"
+        }), /*#__PURE__*/_jsx(DataInspector, {
+          data: oldData,
+          searchable: false
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.diffPane,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.diffPaneTitle,
+          children: "New"
+        }), /*#__PURE__*/_jsx(DataInspector, {
+          data: newData,
+          searchable: false
+        })]
+      })]
+    })]
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: gameUIColors.background,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: gameUIColors.border + "20"
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: gameUIColors.text
+  },
+  controls: {
+    flexDirection: "row",
+    gap: 8
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    gap: 4
+  },
+  searchInput: {
+    fontSize: 11,
+    color: gameUIColors.text,
+    minWidth: 100,
+    paddingVertical: 4
+  },
+  editButton: {
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: gameUIColors.primary + "20"
+  },
+  cancelButton: {
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: gameUIColors.error + "20"
+  },
+  scrollView: {
+    maxHeight: 300
+  },
+  codeText: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: gameUIColors.text,
+    padding: 12,
+    lineHeight: 16
+  },
+  editor: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: gameUIColors.text,
+    padding: 12,
+    lineHeight: 16,
+    minHeight: 200
+  },
+  highlight: {
+    backgroundColor: gameUIColors.warning + "40",
+    color: gameUIColors.text
+  },
+  diffControls: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 8
+  },
+  diffButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 4,
+    backgroundColor: gameUIColors.panel
+  },
+  diffButtonActive: {
+    backgroundColor: gameUIColors.primary
+  },
+  diffButtonText: {
+    fontSize: 11,
+    color: gameUIColors.text,
+    fontWeight: "500"
+  },
+  diffContainer: {
+    flexDirection: "row",
+    gap: 8
+  },
+  diffPane: {
+    flex: 1
+  },
+  diffPaneTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: gameUIColors.secondary,
+    padding: 8,
+    textTransform: "uppercase"
+  }
+});