@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,341 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { macOSColors } from "@buoy-gg/shared-ui";
+import { isMMKVAvailable } from "../utils/mmkvAvailability";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Feature flags - set to true when implemented
+const IS_MMKV_IMPLEMENTED = true; // ✅ MMKV support is now implemented
+const IS_SECURE_STORE_IMPLEMENTED = false;
+
+// Runtime availability checks
+const IS_MMKV_AVAILABLE = isMMKVAvailable();
+export function StorageFilterCards({
+  stats,
+  tabStats,
+  healthPercentage,
+  healthStatus,
+  healthColor,
+  activeFilter = "all",
+  onFilterChange,
+  activeStorageType = "all",
+  onStorageTypeChange
+}) {
+  // Use tabStats if provided (for filtered counts), otherwise fall back to stats
+  const displayStats = tabStats || {
+    validCount: stats.presentRequiredCount + stats.optionalCount,
+    missingCount: stats.missingCount,
+    issuesCount: stats.wrongValueCount + stats.wrongTypeCount,
+    asyncCount: stats.asyncCount || 0,
+    mmkvCount: stats.mmkvCount || 0,
+    secureCount: stats.secureCount || 0,
+    totalCount: stats.totalCount
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.filtersRow,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.filterChip, activeFilter === "all" && [styles.filterChipActive, {
+          backgroundColor: macOSColors.background.hover,
+          borderColor: macOSColors.border.hover,
+          shadowColor: macOSColors.text.primary
+        }]],
+        onPress: () => onFilterChange?.("all"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.filterValue, {
+            color: macOSColors.text.primary
+          }],
+          children: displayStats.validCount
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.filterLabel,
+          children: "Valid"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.filterChip, activeFilter === "missing" && [styles.filterChipActive, {
+          backgroundColor: macOSColors.semantic.error + "10",
+          borderColor: macOSColors.semantic.error + "30",
+          shadowColor: macOSColors.semantic.error
+        }]],
+        onPress: () => onFilterChange?.("missing"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.filterValue, {
+            color: displayStats.missingCount > 0 ? macOSColors.semantic.error : macOSColors.text.muted
+          }],
+          children: displayStats.missingCount
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.filterLabel,
+          children: "Missing"
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.filterChip, activeFilter === "issues" && [styles.filterChipActive, {
+          backgroundColor: macOSColors.semantic.warning + "10",
+          borderColor: macOSColors.semantic.warning + "30",
+          shadowColor: macOSColors.semantic.warning
+        }]],
+        onPress: () => onFilterChange?.("issues"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.filterValue, {
+            color: displayStats.issuesCount > 0 ? macOSColors.semantic.warning : macOSColors.text.muted
+          }],
+          children: displayStats.issuesCount
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.filterLabel,
+          children: "Issues"
+        })]
+      })]
+    }), onStorageTypeChange && /*#__PURE__*/_jsxs(View, {
+      style: styles.typesRow,
+      children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.typePill, {
+          borderColor: macOSColors.border.default
+        }, activeStorageType === "all" && [styles.typePillActive, {
+          backgroundColor: macOSColors.background.hover,
+          borderColor: macOSColors.border.hover
+        }]],
+        onPress: () => onStorageTypeChange?.("all"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillLabel, activeStorageType === "all" && {
+            color: macOSColors.text.primary,
+            fontWeight: "600"
+          }],
+          children: "All Types"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillValue, activeStorageType === "all" && {
+            color: macOSColors.text.primary
+          }, activeStorageType !== "all" && {
+            color: macOSColors.text.muted
+          }],
+          children: displayStats.totalCount
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.typePill, {
+          borderColor: macOSColors.border.default
+        }, activeStorageType === "async" && [styles.typePillActive, {
+          backgroundColor: macOSColors.semantic.warning + "15",
+          borderColor: macOSColors.semantic.warning + "40"
+        }]],
+        onPress: () => onStorageTypeChange?.("async"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillLabel, activeStorageType === "async" && {
+            color: macOSColors.semantic.warning,
+            fontWeight: "600"
+          }],
+          children: "Async"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillValue, activeStorageType === "async" ? {
+            color: macOSColors.semantic.warning
+          } : {
+            color: macOSColors.text.muted
+          }],
+          children: displayStats.asyncCount
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.typePill, {
+          borderColor: macOSColors.border.default
+        }, activeStorageType === "mmkv" && [styles.typePillActive, {
+          backgroundColor: macOSColors.semantic.info + "15",
+          borderColor: macOSColors.semantic.info + "40"
+        }]],
+        onPress: () => onStorageTypeChange?.("mmkv"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillLabel, activeStorageType === "mmkv" && {
+            color: macOSColors.semantic.info,
+            fontWeight: "600"
+          }],
+          children: "MMKV"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillValue, activeStorageType === "mmkv" ? {
+            color: macOSColors.semantic.info
+          } : {
+            color: macOSColors.text.muted
+          }],
+          children: displayStats.mmkvCount
+        })]
+      }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+        style: [styles.typePill, {
+          borderColor: macOSColors.border.default
+        }, activeStorageType === "secure" && [styles.typePillActive, {
+          backgroundColor: macOSColors.semantic.success + "15",
+          borderColor: macOSColors.semantic.success + "40"
+        }]],
+        onPress: () => onStorageTypeChange?.("secure"),
+        activeOpacity: 0.8,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillLabel, activeStorageType === "secure" && {
+            color: macOSColors.semantic.success,
+            fontWeight: "600"
+          }],
+          children: "Secure"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.typePillValue, activeStorageType === "secure" ? {
+            color: macOSColors.semantic.success
+          } : {
+            color: macOSColors.text.muted
+          }],
+          children: "Coming Soon"
+        })]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default + "50",
+    gap: 14,
+    shadowColor: "#000000",
+    shadowOpacity: 0.03,
+    shadowRadius: 12,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    }
+  },
+  topRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  titleLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flexShrink: 1
+  },
+  healthDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  titleText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  titleDivider: {
+    width: 4,
+    height: 1,
+    backgroundColor: macOSColors.border.default + "60",
+    marginHorizontal: 4
+  },
+  subtitleText: {
+    color: macOSColors.text.muted,
+    fontSize: 11
+  },
+  healthBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  healthBadgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
+  },
+  // Health progress bar
+  healthProgressBar: {
+    height: 3,
+    borderRadius: 1.5,
+    backgroundColor: macOSColors.background.input,
+    overflow: "hidden"
+  },
+  healthProgressFill: {
+    height: 3,
+    borderRadius: 1.5
+  },
+  // Status filters
+  filtersRow: {
+    flexDirection: "row",
+    gap: 10
+  },
+  filterChip: {
+    flex: 1,
+    backgroundColor: macOSColors.background.input + "80",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default + "30",
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 44
+  },
+  filterChipActive: {
+    borderWidth: 1,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 6,
+    elevation: 2,
+    transform: [{
+      scale: 1.005
+    }]
+  },
+  filterLabel: {
+    fontSize: 9,
+    color: macOSColors.text.muted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    fontWeight: "500",
+    marginTop: 3
+  },
+  filterValue: {
+    fontSize: 18,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    lineHeight: 20
+  },
+  // Storage type pills
+  typesRow: {
+    flexDirection: "row",
+    gap: 8,
+    marginTop: 2
+  },
+  typePill: {
+    flex: 1,
+    backgroundColor: macOSColors.background.input + "80",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default + "30",
+    paddingVertical: 6,
+    paddingHorizontal: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    minHeight: 32
+  },
+  typePillActive: {
+    borderWidth: 1,
+    transform: [{
+      scale: 1.005
+    }]
+  },
+  typePillLabel: {
+    fontSize: 9,
+    color: macOSColors.text.secondary,
+    textTransform: "uppercase",
+    letterSpacing: 0.4,
+    fontWeight: "500",
+    marginBottom: 1
+  },
+  typePillValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    lineHeight: 14
+  }
+});

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

@@ -0,0 +1,38 @@
+"use strict";
+
+import { Filter, DynamicFilterView } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function StorageFilterViewV2({
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  availableKeys = []
+}) {
+  const filterConfig = {
+    addFilterSection: {
+      enabled: true,
+      placeholder: "Enter key pattern to hide...",
+      title: "ACTIVE FILTERS",
+      icon: Filter
+    },
+    availableItemsSection: {
+      enabled: true,
+      title: "AVAILABLE STORAGE KEYS",
+      emptyMessage: "No storage keys available. Keys will appear here once loaded.",
+      items: availableKeys
+    },
+    howItWorksSection: {
+      enabled: true,
+      title: "HOW STORAGE FILTERS WORK",
+      description: "Patterns hide matching storage keys from the list. Filters match if the storage key contains the provided text.",
+      examples: ["• react_buoy → hides keys containing react_buoy", "• @temp → hides @temp_user, @temp_data", "• redux → hides redux-persist:root", "• : → hides all keys with colons"],
+      icon: Filter
+    },
+    onPatternToggle: onTogglePattern,
+    onPatternAdd: onAddPattern,
+    activePatterns: ignoredPatterns
+  };
+  return /*#__PURE__*/_jsx(DynamicFilterView, {
+    ...filterConfig
+  });
+}