@buoy-gg/storage 1.7.7 → 2.1.1

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StorageEventCard = void 0;
+exports.getValueType = getValueType;
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _storageActionHelpers = require("../utils/storageActionHelpers");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ */
+
+/** Value type for storage events */
+
+/**
+ * Compute value type from a value
+ */
+function getValueType(value) {
+  const parsed = (0, _sharedUi.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 _sharedUi.macOSColors.semantic.success;
+
+    // AsyncStorage & MMKV - Remove/Delete operations
+    case "removeItem":
+    case "multiRemove":
+    case "clear":
+    case "delete":
+    case "clearAll":
+      return _sharedUi.macOSColors.semantic.error;
+
+    // AsyncStorage - Merge operations
+    case "mergeItem":
+    case "multiMerge":
+      return _sharedUi.macOSColors.semantic.info;
+
+    // MMKV - Get operations
+    case "get.string":
+    case "get.number":
+    case "get.boolean":
+    case "get.buffer":
+      return _sharedUi.macOSColors.semantic.warning;
+    default:
+      return _sharedUi.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" : ""}`;
+}
+const StorageEventCard = exports.StorageEventCard = /*#__PURE__*/(0, _react.memo)(function StorageEventCard({
+  data,
+  onPress,
+  isSelected = false,
+  showChevron = true
+}) {
+  const actionColor = getActionColor(data.lastAction);
+  const actionLabel = (0, _storageActionHelpers.translateStorageAction)(data.lastAction);
+  const totalOps = data.totalOperations ?? 1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.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: (0, _sharedUi.formatRelativeTime)(data.lastEventTimestamp)
+    // Interaction
+    ,
+    isSelected: isSelected,
+    onPress: onPress
+  });
+});