@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,513 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { AlertCircle, CheckCircle2, Eye, XCircle, HardDrive, Database, Shield, gameUIColors, macOSColors } from "@buoy-gg/shared-ui";
+import { getStorageTypeLabel, getStorageTypeHexColor } from "../utils/storageQueryUtils";
+import { getValueTypeLabel } from "../utils/valueType";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+
+// Stable constants moved to module scope to prevent re-renders [[memory:4875251]]
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HIT_SLOP = {
+  top: 6,
+  bottom: 6,
+  left: 6,
+  right: 6
+};
+
+// MMKV Instance color palette - consistent colors per instance
+const INSTANCE_COLORS = [macOSColors.semantic.info,
+// Blue
+macOSColors.semantic.success,
+// Green
+macOSColors.semantic.warning,
+// Orange
+macOSColors.semantic.debug,
+// Purple
+'#FF6B9D',
+// Pink
+'#00D9FF' // Cyan
+];
+
+/**
+ * Get consistent color for an MMKV instance based on its ID
+ * Uses simple hash to ensure same instance always gets same color
+ */
+function getInstanceColor(instanceId) {
+  const hash = instanceId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
+}
+const getStatusConfig = status => {
+  switch (status) {
+    case "required_present":
+      return {
+        icon: CheckCircle2,
+        color: macOSColors.semantic.success,
+        bgColor: macOSColors.semantic.successBackground,
+        borderColor: macOSColors.semantic.success + "40",
+        label: "REQUIRED",
+        labelColor: macOSColors.semantic.success
+      };
+    case "required_missing":
+      return {
+        icon: AlertCircle,
+        color: macOSColors.semantic.error,
+        bgColor: macOSColors.semantic.errorBackground,
+        borderColor: macOSColors.semantic.error + "50",
+        label: "MISSING",
+        labelColor: macOSColors.semantic.error
+      };
+    case "required_wrong_value":
+      return {
+        icon: XCircle,
+        color: macOSColors.semantic.warning,
+        bgColor: macOSColors.semantic.warningBackground,
+        borderColor: macOSColors.semantic.warning + "50",
+        label: "WRONG S",
+        labelColor: macOSColors.semantic.warning
+      };
+    case "required_wrong_type":
+      return {
+        icon: XCircle,
+        color: macOSColors.semantic.info,
+        bgColor: macOSColors.semantic.infoBackground,
+        borderColor: macOSColors.semantic.info + "50",
+        label: "WRONG TYPE",
+        labelColor: macOSColors.semantic.info
+      };
+    case "optional_present":
+      return {
+        icon: Eye,
+        color: macOSColors.semantic.debug,
+        bgColor: macOSColors.semantic.infoBackground,
+        borderColor: macOSColors.semantic.debug + "40",
+        label: "OPTIONAL",
+        labelColor: macOSColors.semantic.debug
+      };
+  }
+};
+const getStorageIcon = storageType => {
+  switch (storageType) {
+    case "mmkv":
+      return HardDrive;
+    case "async":
+      return Database;
+    case "secure":
+      return Shield;
+    default:
+      return Database;
+    // Default fallback
+  }
+};
+
+/**
+ * Storage key card component following composition principles [[rule3]]
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Single purpose component for storage key display
+ * - Prefer Composition over Configuration: Reuses existing patterns from EnvVarCard
+ * - Extract Reusable Logic: Shares formatValue and status config patterns
+ */
+export function StorageKeyCard({
+  storageKey,
+  isExpanded,
+  onToggle
+}) {
+  const config = getStatusConfig(storageKey.status);
+  const StatusIcon = config.icon;
+  const StorageIcon = getStorageIcon(storageKey.storageType);
+  const hasValue = storageKey.value !== undefined && storageKey.value !== null;
+  const hasExpectedValue = storageKey.expectedValue !== undefined;
+  const hasExpectedType = storageKey.expectedType !== undefined;
+  const storageTypeColor = getStorageTypeHexColor(storageKey.storageType);
+  const storageTypeLabel = getStorageTypeLabel(storageKey.storageType);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.storageKeyCard, {
+      borderColor: config.borderColor
+    }],
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      accessibilityLabel: "Storage key card",
+      accessibilityHint: "View storage key card",
+      "sentry-label": `ignore storage key card ${storageKey.key}`,
+      accessibilityRole: "button",
+      style: styles.cardHeader,
+      onPress: onToggle,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.cardHeaderLeft,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.iconContainer, {
+            backgroundColor: config.bgColor
+          }],
+          children: /*#__PURE__*/_jsx(StatusIcon, {
+            size: 14,
+            color: config.color
+          })
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.cardHeaderInfo,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.storageKeyText,
+            children: storageKey.key
+          }), storageKey.description && /*#__PURE__*/_jsx(Text, {
+            style: styles.descriptionText,
+            children: storageKey.description
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.cardHeaderMeta,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.statusBadge, {
+                backgroundColor: config.bgColor
+              }],
+              children: /*#__PURE__*/_jsx(Text, {
+                style: [styles.statusText, {
+                  color: config.labelColor
+                }],
+                children: config.label
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: [styles.storageBadge, {
+                backgroundColor: `${storageTypeColor}15`
+              }],
+              children: [/*#__PURE__*/_jsx(StorageIcon, {
+                size: 10,
+                color: storageTypeColor
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.storageText, {
+                  color: storageTypeColor
+                }],
+                children: storageTypeLabel
+              })]
+            }), storageKey.storageType === 'mmkv' && storageKey.instanceId && /*#__PURE__*/_jsxs(View, {
+              style: [styles.instanceBadge, {
+                backgroundColor: getInstanceColor(storageKey.instanceId) + '20',
+                borderColor: getInstanceColor(storageKey.instanceId) + '40'
+              }],
+              children: [/*#__PURE__*/_jsx(HardDrive, {
+                size: 9,
+                color: getInstanceColor(storageKey.instanceId)
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.instanceText, {
+                  color: getInstanceColor(storageKey.instanceId)
+                }],
+                children: storageKey.instanceId
+              })]
+            }), hasValue && /*#__PURE__*/_jsx(View, {
+              style: styles.valueBadge,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.valueText,
+                children: storageKey.valueType ? storageKey.valueType.toUpperCase() : getValueTypeLabel(storageKey.value)
+              })
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.cardHeaderRight,
+        children: /*#__PURE__*/_jsx(TouchableOpacity, {
+          accessibilityLabel: "Expand",
+          accessibilityHint: "Expand storage key card",
+          "sentry-label": `ignore storage key card ${storageKey.key} expand`,
+          accessibilityRole: "button",
+          style: styles.actionButton,
+          onPress: onToggle,
+          hitSlop: HIT_SLOP,
+          children: /*#__PURE__*/_jsx(Eye, {
+            size: 12,
+            color: macOSColors.text.secondary
+          })
+        })
+      })]
+    }), isExpanded && hasValue && /*#__PURE__*/_jsxs(View, {
+      style: styles.cardBody,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.dataViewerContainer,
+        children: typeof storageKey.value === "string" || typeof storageKey.value === "number" || typeof storageKey.value === "boolean" ? /*#__PURE__*/_jsxs(View, {
+          style: styles.simpleValueContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.simpleValueLabel,
+            children: "Current Value:"
+          }), /*#__PURE__*/_jsx(View, {
+            style: styles.simpleValueBox,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.simpleValueContent,
+              selectable: true,
+              children: String(storageKey.value)
+            })
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.valueTypeText,
+            children: ["Type: ", getValueTypeLabel(storageKey.value)]
+          })]
+        }) : /*#__PURE__*/_jsx(DataViewer, {
+          title: "Current Value",
+          data: storageKey.value,
+          showTypeFilter: false,
+          rawMode: true
+        })
+      }), hasExpectedValue && /*#__PURE__*/_jsxs(View, {
+        style: styles.valueContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.valueLabel,
+          children: "Expected Value:"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.expectedValueBox,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.expectedValueContent,
+            selectable: true,
+            children: storageKey.expectedValue
+          })
+        })]
+      }), hasExpectedType && storageKey.expectedType && /*#__PURE__*/_jsxs(View, {
+        style: styles.valueContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.valueLabel,
+          children: "Expected Type:"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.expectedValueBox,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.expectedValueContent,
+            selectable: true,
+            children: storageKey.expectedType.toUpperCase()
+          })
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.typeHelperText,
+          children: ["Current type: ", getValueTypeLabel(storageKey.value)]
+        })]
+      }), storageKey.lastUpdated && /*#__PURE__*/_jsx(View, {
+        style: styles.metaInfo,
+        children: /*#__PURE__*/_jsxs(Text, {
+          style: styles.metaLabel,
+          children: ["Last updated123: ", storageKey.lastUpdated.toLocaleString()]
+        })
+      })]
+    }), isExpanded && !hasValue && /*#__PURE__*/_jsxs(View, {
+      style: styles.cardBody,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.emptyValueContainer,
+        children: [/*#__PURE__*/_jsx(AlertCircle, {
+          size: 16,
+          color: macOSColors.semantic.warning
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyValueText,
+          children: "Storage key not found or empty"
+        })]
+      }), hasExpectedValue && /*#__PURE__*/_jsxs(View, {
+        style: styles.valueContainer,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.valueLabel,
+          children: "Expected Value:"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.expectedValueBox,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.expectedValueContent,
+            selectable: true,
+            children: storageKey.expectedValue
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  storageKeyCard: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    overflow: "hidden"
+  },
+  cardHeader: {
+    padding: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  cardHeaderLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    minWidth: 0
+  },
+  iconContainer: {
+    padding: 6,
+    borderRadius: 6,
+    marginRight: 10
+  },
+  cardHeaderInfo: {
+    flex: 1,
+    minWidth: 0,
+    gap: 4
+  },
+  storageKeyText: {
+    color: "#FFFFFF",
+    fontWeight: "500",
+    fontSize: 12,
+    flexWrap: "wrap",
+    flex: 1
+  },
+  descriptionText: {
+    color: macOSColors.text.secondary,
+    fontSize: 10,
+    marginTop: 2,
+    flexWrap: "wrap"
+  },
+  cardHeaderMeta: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    flexWrap: "wrap"
+  },
+  statusBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  statusText: {
+    fontSize: 9,
+    fontWeight: "600",
+    letterSpacing: 0.5
+  },
+  storageBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  storageText: {
+    fontSize: 9,
+    fontWeight: "600"
+  },
+  instanceBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    borderRadius: 4,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4
+  },
+  instanceText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 0.3
+  },
+  valueBadge: {
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 3
+  },
+  valueText: {
+    fontSize: 8,
+    color: macOSColors.text.secondary,
+    fontWeight: "500"
+  },
+  cardHeaderRight: {
+    marginLeft: 8
+  },
+  actionButton: {
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: macOSColors.background.input
+  },
+  cardBody: {
+    borderTopWidth: 1,
+    borderTopColor: macOSColors.border.default,
+    padding: 12,
+    gap: 12
+  },
+  dataViewerContainer: {
+    marginTop: 8
+  },
+  simpleValueContainer: {
+    gap: 8
+  },
+  simpleValueLabel: {
+    color: macOSColors.text.secondary,
+    fontSize: 10,
+    fontWeight: "500",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  simpleValueBox: {
+    backgroundColor: gameUIColors.background + "4D",
+    borderRadius: 4,
+    padding: 10,
+    borderWidth: 1,
+    borderColor: gameUIColors.primary + "0D"
+  },
+  simpleValueContent: {
+    color: gameUIColors.success,
+    fontSize: 12,
+    fontFamily: "monospace",
+    lineHeight: 16
+  },
+  valueTypeText: {
+    color: gameUIColors.muted,
+    fontSize: 9,
+    fontStyle: "italic"
+  },
+  valueContainer: {
+    gap: 6
+  },
+  valueLabel: {
+    color: macOSColors.text.secondary,
+    fontSize: 10,
+    fontWeight: "500",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  valueBox: {
+    backgroundColor: gameUIColors.background + "4D",
+    borderRadius: 4,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: gameUIColors.primary + "0D"
+  },
+  valueContent: {
+    color: gameUIColors.primaryLight,
+    fontSize: 10,
+    fontFamily: "monospace",
+    lineHeight: 14
+  },
+  expectedValueBox: {
+    backgroundColor: gameUIColors.background + "4D",
+    borderRadius: 4,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: gameUIColors.primary + "0D"
+  },
+  expectedValueContent: {
+    color: gameUIColors.primaryLight,
+    fontSize: 10,
+    fontFamily: "monospace",
+    lineHeight: 14
+  },
+  emptyValueContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    padding: 8,
+    backgroundColor: gameUIColors.warning + "0D",
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: gameUIColors.warning + "1A"
+  },
+  emptyValueText: {
+    color: gameUIColors.warning,
+    fontSize: 10,
+    fontStyle: "italic"
+  },
+  typeHelperText: {
+    color: macOSColors.text.secondary,
+    fontSize: 9,
+    marginTop: 4,
+    textAlign: "center"
+  },
+  metaInfo: {
+    marginTop: 8
+  },
+  metaLabel: {
+    color: gameUIColors.muted,
+    fontSize: 9,
+    fontStyle: "italic"
+  }
+});