@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,353 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { macOSColors, CompactRow, TypeBadge, HardDrive, Square, CheckSquare } from "@buoy-gg/shared-ui";
+import { getStorageTypeLabel } from "../utils/storageQueryUtils";
+import { getValueTypeLabel } from "../utils/valueType";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+
+// MMKV Instance color palette - consistent colors per instance
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 {
+        label: "Valid",
+        color: macOSColors.semantic.success,
+        sublabel: "Required"
+      };
+    case "required_missing":
+      return {
+        label: "Missing",
+        color: macOSColors.semantic.error,
+        sublabel: "Required"
+      };
+    case "required_wrong_value":
+      return {
+        label: "Wrong",
+        color: macOSColors.semantic.warning,
+        sublabel: "Invalid value"
+      };
+    case "required_wrong_type":
+      return {
+        label: "Type Error",
+        color: macOSColors.semantic.info,
+        sublabel: "Wrong type"
+      };
+    case "optional_present":
+      return {
+        label: "Set",
+        color: macOSColors.semantic.debug,
+        sublabel: "Optional"
+      };
+  }
+};
+const formatValue = value => {
+  if (value === undefined || value === null) {
+    return "undefined";
+  }
+  const str = typeof value === "string" ? value : JSON.stringify(value);
+  return str;
+};
+export function StorageKeyRow({
+  storageKey,
+  isExpanded,
+  onPress,
+  isSelectMode = false,
+  isSelected = false,
+  onSelectionChange
+}) {
+  const config = getStatusConfig(storageKey.status);
+  const hasValue = storageKey.value !== undefined && storageKey.value !== null;
+
+  // Format primary text - show the key
+  const primaryText = storageKey.key;
+
+  // Show storage type as secondary text
+  const storageTypeLabel = getStorageTypeLabel(storageKey.storageType);
+
+  // Check if value is JSON object/array for DataViewer
+  const isJsonData = storageKey.value && (typeof storageKey.value === "object" || typeof storageKey.value === "string" && (storageKey.value.startsWith("{") || storageKey.value.startsWith("[")));
+
+  // Parse JSON string if needed
+  let parsedValue = storageKey.value;
+  if (typeof storageKey.value === "string" && isJsonData) {
+    try {
+      parsedValue = JSON.parse(storageKey.value);
+    } catch {
+      // Keep original if parse fails
+    }
+  }
+
+  // Create expanded content for value and storage details
+  const expandedContent = /*#__PURE__*/_jsxs(View, {
+    style: styles.expandedContainer,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Storage:"
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.storageBadge, {
+          backgroundColor: getStorageTypeColor(storageKey.storageType) + "12",
+          borderColor: getStorageTypeColor(storageKey.storageType) + "25"
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.storageBadgeText, {
+            color: getStorageTypeColor(storageKey.storageType)
+          }],
+          children: storageTypeLabel
+        })
+      })]
+    }), storageKey.storageType === 'mmkv' && storageKey.instanceId && /*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Instance:"
+      }), /*#__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
+        })]
+      })]
+    }), isJsonData && typeof parsedValue === "object" ? /*#__PURE__*/_jsx(View, {
+      style: styles.dataViewerContainer,
+      children: /*#__PURE__*/_jsx(DataViewer, {
+        data: parsedValue,
+        title: "Value"
+      })
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Value:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.expandedValue,
+        numberOfLines: 3,
+        children: formatValue(storageKey.value) || "undefined"
+      })]
+    }), storageKey.status === "required_wrong_type" && storageKey.expectedType && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.expandedRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.expandedLabel,
+          children: "Type:"
+        }), /*#__PURE__*/_jsx(TypeBadge, {
+          type: getValueTypeLabel(storageKey.value)
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.expandedRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.expandedLabel,
+          children: "Expected:"
+        }), /*#__PURE__*/_jsx(TypeBadge, {
+          type: storageKey.expectedType
+        })]
+      })]
+    }), storageKey.status === "required_wrong_value" && storageKey.expectedValue && /*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Expected:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.expandedExpected,
+        children: String(storageKey.expectedValue)
+      })]
+    }), storageKey.description && /*#__PURE__*/_jsxs(View, {
+      style: styles.expandedRow,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.expandedLabel,
+        children: "Info:"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.expandedDescription,
+        children: storageKey.description
+      })]
+    })]
+  });
+
+  // Create storage type badge
+  const storageBadge = /*#__PURE__*/_jsx(View, {
+    style: [styles.storageBadge, {
+      backgroundColor: getStorageTypeColor(storageKey.storageType) + "12",
+      borderColor: getStorageTypeColor(storageKey.storageType) + "25"
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.storageBadgeText, {
+        color: getStorageTypeColor(storageKey.storageType)
+      }],
+      children: storageTypeLabel
+    })
+  });
+
+  // Handle checkbox press in select mode
+  const handleCheckboxPress = () => {
+    onSelectionChange?.(storageKey, !isSelected);
+  };
+
+  // Create checkbox element for select mode
+  const selectionCheckbox = isSelectMode ? /*#__PURE__*/_jsx(TouchableOpacity, {
+    onPress: handleCheckboxPress,
+    style: styles.checkboxContainer,
+    hitSlop: {
+      top: 8,
+      bottom: 8,
+      left: 8,
+      right: 8
+    },
+    children: isSelected ? /*#__PURE__*/_jsx(CheckSquare, {
+      size: 18,
+      color: macOSColors.semantic.info
+    }) : /*#__PURE__*/_jsx(Square, {
+      size: 18,
+      color: macOSColors.text.muted
+    })
+  }) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.rowContainer, isSelected && styles.rowContainerSelected],
+    children: [selectionCheckbox, /*#__PURE__*/_jsx(View, {
+      style: styles.compactRowWrapper,
+      children: /*#__PURE__*/_jsx(CompactRow, {
+        statusDotColor: config.color,
+        statusLabel: config.label,
+        statusSublabel: config.sublabel,
+        primaryText: primaryText,
+        secondaryText: hasValue ? getValueTypeLabel(storageKey.value) : undefined,
+        expandedContent: expandedContent,
+        isExpanded: isExpanded,
+        expandedGlowColor: config.color,
+        customBadge: storageBadge,
+        showChevron: !isSelectMode,
+        onPress: isSelectMode ? handleCheckboxPress : onPress ? () => onPress(storageKey) : undefined
+      })
+    })]
+  });
+}
+const getStorageTypeColor = storageType => {
+  switch (storageType) {
+    case "mmkv":
+      return macOSColors.semantic.info;
+    case "async":
+      return macOSColors.semantic.warning;
+    case "secure":
+      return macOSColors.semantic.success;
+    default:
+      return macOSColors.text.secondary;
+  }
+};
+const styles = StyleSheet.create({
+  expandedContainer: {
+    gap: 8
+  },
+  expandedRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10
+  },
+  expandedLabel: {
+    fontSize: 10,
+    color: macOSColors.text.muted,
+    fontWeight: "600",
+    minWidth: 70,
+    fontFamily: "monospace"
+  },
+  expandedValue: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  expandedExpected: {
+    fontSize: 11,
+    color: macOSColors.semantic.warning,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  expandedDescription: {
+    fontSize: 11,
+    color: macOSColors.text.secondary,
+    flex: 1
+  },
+  dataViewerContainer: {
+    marginTop: 6,
+    marginBottom: 6,
+    backgroundColor: macOSColors.background.base,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    padding: 6
+  },
+  storageBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 999,
+    borderWidth: 1
+  },
+  storageBadgeText: {
+    fontSize: 10,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  },
+  instanceBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 999,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4
+  },
+  instanceText: {
+    fontSize: 10,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 0.3
+  },
+  rowContainer: {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  },
+  rowContainerSelected: {
+    backgroundColor: macOSColors.semantic.info + "08",
+    borderRadius: 8
+  },
+  checkboxContainer: {
+    paddingLeft: 4,
+    paddingRight: 8,
+    paddingTop: 10,
+    alignSelf: "flex-start"
+  },
+  compactRowWrapper: {
+    flex: 1
+  }
+});

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

@@ -0,0 +1,101 @@
+"use strict";
+
+import { useCallback, useState } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { StorageKeyRow } from "./StorageKeyRow";
+import { SectionHeader } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Storage key section component following composition principles [[rule3]]
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Single purpose component for grouped storage keys
+ * - Prefer Composition over Configuration: Reuses patterns from EnvVarSection
+ * - Extract Reusable Logic: Shares expansion state management pattern
+ */
+export function StorageKeySection({
+  title,
+  count,
+  keys,
+  emptyMessage,
+  headerColor,
+  isSelectMode = false,
+  selectedKeys = new Set(),
+  onSelectionChange
+}) {
+  const [expandedKey, setExpandedKey] = useState(null);
+  const handleKeyPress = useCallback(storageKey => {
+    setExpandedKey(prev => prev === storageKey.key ? null : storageKey.key);
+  }, []);
+
+  // Generate unique identifier for a storage key
+  const getKeyIdentifier = useCallback(storageKey => {
+    return storageKey.instanceId ? `${storageKey.storageType}-${storageKey.instanceId}-${storageKey.key}` : `${storageKey.storageType}-${storageKey.key}`;
+  }, []);
+  if (keys.length === 0 && title === "Required Keys") {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.sectionContainer,
+      children: [/*#__PURE__*/_jsxs(SectionHeader, {
+        children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
+          children: title
+        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
+          count: 0,
+          color: headerColor
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.emptySection,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptySectionText,
+          children: emptyMessage
+        })
+      })]
+    });
+  }
+  if (keys.length === 0) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.sectionContainer,
+    children: [title && /*#__PURE__*/_jsxs(SectionHeader, {
+      children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
+        children: title
+      }), count >= 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
+        count: count,
+        color: headerColor
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.sectionContent,
+      children: keys.map(storageKey => {
+        // Create unique key by combining storage type, instance ID (if present), and key name
+        const uniqueKey = getKeyIdentifier(storageKey);
+        return /*#__PURE__*/_jsx(StorageKeyRow, {
+          storageKey: storageKey,
+          isExpanded: !isSelectMode && expandedKey === storageKey.key,
+          onPress: handleKeyPress,
+          isSelectMode: isSelectMode,
+          isSelected: selectedKeys.has(uniqueKey),
+          onSelectionChange: onSelectionChange
+        }, uniqueKey);
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  sectionContainer: {
+    gap: 8
+  },
+  sectionContent: {
+    // No gap needed, StorageKeyRow has its own margins
+  },
+  emptySection: {
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    borderRadius: 6,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)",
+    alignItems: "center"
+  },
+  emptySectionText: {
+    color: "#6B7280",
+    fontSize: 11,
+    textAlign: "center"
+  }
+});