@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,340 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { AlertCircle, CheckCircle2, XCircle, Eye, Database, Shield } from "@buoy-gg/shared-ui";
+import { getStorageTypeHexColor } from "../utils/storageQueryUtils";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Variable type configurations matching env vars design
+const variableTypeData = [{
+  key: "valid",
+  label: "Valid Keys",
+  description: "Correctly stored and accessible",
+  icon: CheckCircle2,
+  color: "#10B981",
+  textColor: "#10B981",
+  bgColor: "rgba(16, 185, 129, 0.1)"
+}, {
+  key: "missing",
+  label: "Missing Keys",
+  description: "Required but not found",
+  icon: AlertCircle,
+  color: "#EF4444",
+  textColor: "#EF4444",
+  bgColor: "rgba(239, 68, 68, 0.1)"
+}, {
+  key: "wrongValue",
+  label: "Wrong Values",
+  description: "Stored but incorrect value",
+  icon: XCircle,
+  color: "#F97316",
+  textColor: "#F97316",
+  bgColor: "rgba(249, 115, 22, 0.1)"
+}, {
+  key: "wrongType",
+  label: "Wrong Types",
+  description: "Value has incorrect data type",
+  icon: XCircle,
+  color: "#0891B2",
+  textColor: "#0891B2",
+  bgColor: "rgba(8, 145, 178, 0.1)"
+}, {
+  key: "optional",
+  label: "Optional Keys",
+  description: "Available but not required",
+  icon: Eye,
+  color: "#8B5CF6",
+  textColor: "#8B5CF6",
+  bgColor: "rgba(139, 92, 246, 0.1)"
+}];
+
+// Storage type breakdown data
+const storageTypeData = [{
+  key: "mmkv",
+  label: "MMKV",
+  description: "High-performance key-value storage",
+  icon: Database
+}, {
+  key: "async",
+  label: "AsyncStorage",
+  description: "React Native async storage",
+  icon: Database
+}, {
+  key: "secure",
+  label: "SecureStorage",
+  description: "Encrypted secure storage",
+  icon: Shield
+}];
+
+/**
+ * Storage key stats component following composition principles [[rule3]]
+ *
+ * Applied principles:
+ * - Decompose by Responsibility: Single purpose component for storage stats display
+ * - Prefer Composition over Configuration: Reuses patterns from EnvVarStats
+ * - Extract Reusable Logic: Shares visualization patterns with env vars
+ */
+export function StorageKeyStatsSection({
+  stats
+}) {
+  const {
+    totalCount,
+    missingCount,
+    wrongValueCount,
+    wrongTypeCount,
+    presentRequiredCount,
+    optionalCount,
+    mmkvCount,
+    asyncCount,
+    secureCount
+  } = stats;
+
+  // If no storage keys at all, show minimal stats
+  if (totalCount === 0) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.statsContainer,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "STORAGE BREAKDOWN"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.emptyState,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyStateText,
+          children: "No storage keys detected"
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.statsContainer,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.breakdownSection,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "KEY STATUS BREAKDOWN"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.breakdownList,
+        children: variableTypeData.map(item => {
+          let count = 0;
+          let shouldShow = false;
+          switch (item.key) {
+            case "valid":
+              count = presentRequiredCount;
+              shouldShow = count > 0;
+              break;
+            case "missing":
+              count = missingCount;
+              shouldShow = count > 0;
+              break;
+            case "wrongValue":
+              count = wrongValueCount;
+              shouldShow = count > 0;
+              break;
+            case "wrongType":
+              count = wrongTypeCount;
+              shouldShow = count > 0;
+              break;
+            case "optional":
+              count = optionalCount;
+              shouldShow = count > 0;
+              break;
+          }
+          if (!shouldShow) return null;
+          const percentage = totalCount > 0 ? (count / totalCount * 100).toFixed(1) : "0";
+          const IconComponent = item.icon;
+          return /*#__PURE__*/_jsx(View, {
+            style: styles.breakdownItem,
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.breakdownItemRow,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.breakdownItemLeft,
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.breakdownIcon, {
+                    backgroundColor: item.bgColor
+                  }],
+                  children: /*#__PURE__*/_jsx(IconComponent, {
+                    size: 14,
+                    color: item.color
+                  })
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.breakdownItemInfo,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.breakdownItemLabel,
+                    children: item.label
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.breakdownItemDesc,
+                    children: item.description
+                  })]
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.breakdownItemRight,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.breakdownCount, {
+                    color: item.textColor
+                  }],
+                  children: count
+                }), /*#__PURE__*/_jsxs(Text, {
+                  style: styles.breakdownPercentage,
+                  children: [percentage, "%"]
+                })]
+              })]
+            })
+          }, item.key);
+        })
+      })]
+    }), (mmkvCount > 0 || asyncCount > 0 || secureCount > 0) && /*#__PURE__*/_jsxs(View, {
+      style: styles.breakdownSection,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "STORAGE TYPE BREAKDOWN"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.breakdownList,
+        children: storageTypeData.map(item => {
+          let count = 0;
+          let shouldShow = false;
+          switch (item.key) {
+            case "mmkv":
+              count = mmkvCount;
+              shouldShow = count > 0;
+              break;
+            case "async":
+              count = asyncCount;
+              shouldShow = count > 0;
+              break;
+            case "secure":
+              count = secureCount;
+              shouldShow = count > 0;
+              break;
+          }
+          if (!shouldShow) return null;
+          const percentage = totalCount > 0 ? (count / totalCount * 100).toFixed(1) : "0";
+          const IconComponent = item.icon;
+          const storageColor = getStorageTypeHexColor(item.key);
+          return /*#__PURE__*/_jsx(View, {
+            style: styles.breakdownItem,
+            children: /*#__PURE__*/_jsxs(View, {
+              style: styles.breakdownItemRow,
+              children: [/*#__PURE__*/_jsxs(View, {
+                style: styles.breakdownItemLeft,
+                children: [/*#__PURE__*/_jsx(View, {
+                  style: [styles.breakdownIcon, {
+                    backgroundColor: `${storageColor}15`
+                  }],
+                  children: /*#__PURE__*/_jsx(IconComponent, {
+                    size: 14,
+                    color: storageColor
+                  })
+                }), /*#__PURE__*/_jsxs(View, {
+                  style: styles.breakdownItemInfo,
+                  children: [/*#__PURE__*/_jsx(Text, {
+                    style: styles.breakdownItemLabel,
+                    children: item.label
+                  }), /*#__PURE__*/_jsx(Text, {
+                    style: styles.breakdownItemDesc,
+                    children: item.description
+                  })]
+                })]
+              }), /*#__PURE__*/_jsxs(View, {
+                style: styles.breakdownItemRight,
+                children: [/*#__PURE__*/_jsx(Text, {
+                  style: [styles.breakdownCount, {
+                    color: storageColor
+                  }],
+                  children: count
+                }), /*#__PURE__*/_jsxs(Text, {
+                  style: styles.breakdownPercentage,
+                  children: [percentage, "%"]
+                })]
+              })]
+            })
+          }, item.key);
+        })
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  statsContainer: {
+    marginBottom: 24,
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderRadius: 8,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.08)"
+  },
+  // Section titles
+  sectionTitle: {
+    color: "#9CA3AF",
+    fontSize: 12,
+    fontWeight: "500",
+    marginBottom: 16,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  // Breakdown section
+  breakdownSection: {
+    gap: 12,
+    marginBottom: 20
+  },
+  breakdownList: {
+    gap: 12
+  },
+  breakdownItem: {
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    padding: 12,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.05)"
+  },
+  breakdownItemRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  breakdownItemLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    flex: 1,
+    minWidth: 0
+  },
+  breakdownIcon: {
+    padding: 8,
+    borderRadius: 8
+  },
+  breakdownItemInfo: {
+    flex: 1,
+    minWidth: 0
+  },
+  breakdownItemLabel: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  breakdownItemDesc: {
+    color: "#9CA3AF",
+    fontSize: 12
+  },
+  breakdownItemRight: {
+    alignItems: "flex-end"
+  },
+  breakdownCount: {
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  breakdownPercentage: {
+    color: "#6B7280",
+    fontSize: 10
+  },
+  // Empty state
+  emptyState: {
+    padding: 16,
+    backgroundColor: "rgba(255, 255, 255, 0.02)",
+    borderRadius: 6,
+    alignItems: "center"
+  },
+  emptyStateText: {
+    color: "#6B7280",
+    fontSize: 11,
+    textAlign: "center"
+  }
+});