@buoy-gg/storage 1.7.7 → 2.1.1

package/lib/module/storage/components/StorageEventActionButton.js

@@ -0,0 +1,117 @@
+"use strict";
+
+/**
+ * StorageEventActionButton
+ *
+ * Action button for Storage DevTools detail view
+ * Matches Redux DevTools ActionButton styling
+ */
+
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
+import { buoyColors, Lock } from "@buoy-gg/shared-ui";
+
+// Button color configurations matching Redux/React Query pattern
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const buttonConfigs = {
+  copy: {
+    color: buoyColors.primary,
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary + "40",
+    textColor: buoyColors.primary
+  },
+  jump: {
+    color: buoyColors.warning,
+    backgroundColor: buoyColors.warning + "15",
+    borderColor: buoyColors.warning + "40",
+    textColor: buoyColors.warning
+  },
+  undo: {
+    color: buoyColors.info,
+    backgroundColor: buoyColors.info + "15",
+    borderColor: buoyColors.info + "40",
+    textColor: buoyColors.info
+  }
+};
+export function StorageEventActionButton({
+  onPress,
+  text,
+  type,
+  disabled = false,
+  locked = false
+}) {
+  const config = buttonConfigs[type];
+  const isDisabledOrLocked = disabled || locked;
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    disabled: isDisabledOrLocked,
+    onPress: onPress,
+    style: [styles.button, {
+      backgroundColor: isDisabledOrLocked ? buoyColors.textMuted + "1A" : config.backgroundColor,
+      borderColor: isDisabledOrLocked ? buoyColors.textMuted + "33" : config.borderColor,
+      opacity: disabled ? 0.5 : 1
+    }],
+    activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: text,
+    accessibilityState: {
+      disabled: isDisabledOrLocked
+    },
+    children: [locked ? /*#__PURE__*/_jsx(Lock, {
+      size: 10,
+      color: buoyColors.textMuted,
+      style: styles.lockIcon
+    }) : /*#__PURE__*/_jsx(View, {
+      style: [styles.dot, {
+        backgroundColor: isDisabledOrLocked ? buoyColors.textMuted : config.color
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: isDisabledOrLocked ? buoyColors.textMuted : config.textColor
+      }],
+      children: text
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    height: 25,
+    minWidth: 70,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    marginRight: 6,
+    shadowColor: buoyColors.text,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 2
+  },
+  lockIcon: {
+    marginRight: 4
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace",
+    height: 12
+  }
+});

package/lib/module/storage/components/StorageEventCard.js

@@ -0,0 +1,107 @@
+"use strict";
+
+/**
+ * StorageEventCard
+ *
+ * Shared card component for displaying storage events.
+ * Used by both Storage DevTools and Events DevTools for consistent UI.
+ * Uses CompactRow for consistent layout with Redux/React Query cards.
+ */
+
+import { memo } from "react";
+import { formatRelativeTime, macOSColors, parseValue, CompactRow } from "@buoy-gg/shared-ui";
+import { translateStorageAction } from "../utils/storageActionHelpers";
+
+/** Value type for storage events */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Compute value type from a value
+ */
+export function getValueType(value) {
+  const parsed = parseValue(value);
+  if (parsed === null) return "null";
+  if (parsed === undefined) return "undefined";
+  if (Array.isArray(parsed)) return "array";
+  if (typeof parsed === "boolean") return "boolean";
+  if (typeof parsed === "number") return "number";
+  if (typeof parsed === "string") return "string";
+  if (typeof parsed === "object") return "object";
+  return "undefined";
+}
+/**
+ * Get color for action type
+ */
+function getActionColor(action) {
+  switch (action) {
+    // AsyncStorage & MMKV - Set operations
+    case "setItem":
+    case "multiSet":
+    case "set.string":
+    case "set.number":
+    case "set.boolean":
+    case "set.buffer":
+      return macOSColors.semantic.success;
+
+    // AsyncStorage & MMKV - Remove/Delete operations
+    case "removeItem":
+    case "multiRemove":
+    case "clear":
+    case "delete":
+    case "clearAll":
+      return macOSColors.semantic.error;
+
+    // AsyncStorage - Merge operations
+    case "mergeItem":
+    case "multiMerge":
+      return macOSColors.semantic.info;
+
+    // MMKV - Get operations
+    case "get.string":
+    case "get.number":
+    case "get.boolean":
+    case "get.buffer":
+      return macOSColors.semantic.warning;
+    default:
+      return macOSColors.text.muted;
+  }
+}
+
+/**
+ * Get storage type label for sublabel
+ */
+function getStorageTypeSublabel(storageTypes, totalOps) {
+  const types = Array.from(storageTypes).map(t => t === "async" ? "Async" : "MMKV").join("/");
+  return `${types} · ${totalOps} op${totalOps !== 1 ? "s" : ""}`;
+}
+export const StorageEventCard = /*#__PURE__*/memo(function StorageEventCard({
+  data,
+  onPress,
+  isSelected = false,
+  showChevron = true
+}) {
+  const actionColor = getActionColor(data.lastAction);
+  const actionLabel = translateStorageAction(data.lastAction);
+  const totalOps = data.totalOperations ?? 1;
+  return /*#__PURE__*/_jsx(CompactRow
+  // Status section (left) - shows "Storage" with action-colored dot
+  , {
+    statusDotColor: actionColor,
+    statusLabel: "Storage",
+    statusSublabel: getStorageTypeSublabel(data.storageTypes, totalOps)
+    // Content section (middle) - shows the key name
+    ,
+    primaryText: data.key
+    // Badge section (right) - shows action label (SET, REMOVE, etc.)
+    ,
+    badgeText: actionLabel,
+    badgeColor: actionColor,
+    showChevron: showChevron
+    // Bottom right - timestamp
+    ,
+    bottomRightText: formatRelativeTime(data.lastEventTimestamp)
+    // Interaction
+    ,
+    isSelected: isSelected,
+    onPress: onPress
+  });
+});