@buoy-gg/shared-ui 1.7.2

package/lib/module/ui/gameUI/components/GameUICompactStats.js

@@ -0,0 +1,331 @@
+"use strict";
+
+import { Fragment } from "react";
+import { StyleSheet, Text, View, Animated } from "react-native";
+import { gameUIColors } from "../constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reusable compact stats display component
+ * Shows stat cards with icons, labels, values, and optional progress bars
+ * Used in ENV and Storage pages for metrics display
+ */
+export function GameUICompactStats({
+  statsConfig,
+  totalCount,
+  header,
+  bottomStats,
+  style,
+  hideInactive = true
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [header && /*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerLeft,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.headerTitle,
+          children: header.title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.headerSubtitle,
+          children: header.subtitle
+        })]
+      }), header.healthPercentage !== undefined && /*#__PURE__*/_jsx(View, {
+        style: styles.headerRight,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: styles.statusIndicator,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.statusDot, {
+              backgroundColor: header.healthColor || gameUIColors.success
+            }]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.statusText, {
+              color: header.healthColor || gameUIColors.success
+            }],
+            children: header.healthStatus || "OPTIMAL"
+          })]
+        })
+      })]
+    }), header?.healthPercentage !== undefined && /*#__PURE__*/_jsxs(View, {
+      style: styles.healthSection,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.healthLabel,
+        children: "SYSTEM HEALTH"
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.healthBarWrapper,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.healthBarBg,
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            style: [styles.healthBarFill, {
+              width: `${header.healthPercentage}%`,
+              backgroundColor: header.healthColor || gameUIColors.success
+            }]
+          })
+        })
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: [styles.healthPercentage, {
+          color: header.healthColor || gameUIColors.success
+        }],
+        children: [header.healthPercentage, "%"]
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.statsGrid,
+      children: statsConfig.map(stat => {
+        const isActive = stat.value > 0;
+        if (hideInactive && !isActive) return null;
+        const IconComponent = stat.icon;
+        const percentage = totalCount ? stat.value / totalCount * 100 : 0;
+        return /*#__PURE__*/_jsxs(Animated.View, {
+          style: [styles.statCard, {
+            borderColor: stat.color + "30"
+          }],
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.cardContent,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: [styles.iconBadge, {
+                backgroundColor: stat.color + "1A",
+                borderColor: stat.color + "33"
+              }],
+              children: /*#__PURE__*/_jsx(IconComponent, {
+                size: 12,
+                color: stat.color
+              })
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.cardInfo,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: styles.cardLabel,
+                children: stat.label
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.cardSubtitle,
+                children: stat.subtitle
+              })]
+            }), /*#__PURE__*/_jsxs(View, {
+              style: styles.valueBlock,
+              children: [/*#__PURE__*/_jsx(Text, {
+                style: [styles.statNumber, {
+                  color: stat.color
+                }],
+                children: stat.value.toString().padStart(2, "0")
+              }), totalCount ? /*#__PURE__*/_jsxs(Text, {
+                style: styles.percentText,
+                children: [Math.round(percentage), "%"]
+              }) : null]
+            })]
+          }), stat.showBar !== false && totalCount && /*#__PURE__*/_jsx(View, {
+            style: [styles.statBar, {
+              backgroundColor: stat.color + "10"
+            }],
+            children: /*#__PURE__*/_jsx(View, {
+              style: [styles.statBarFill, {
+                width: `${percentage}%`,
+                backgroundColor: stat.color
+              }]
+            })
+          })]
+        }, stat.key);
+      })
+    }), bottomStats && bottomStats.length > 0 && /*#__PURE__*/_jsx(View, {
+      style: styles.bottomBar,
+      children: bottomStats.map((stat, index) => /*#__PURE__*/_jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.bottomStat,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.bottomStatLabel,
+            children: stat.label
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.bottomStatValue, stat.color && {
+              color: stat.color
+            }],
+            children: stat.value
+          })]
+        }), index < bottomStats.length - 1 && /*#__PURE__*/_jsx(View, {
+          style: styles.bottomDivider
+        })]
+      }, stat.label))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: gameUIColors.border + "40",
+    overflow: "hidden",
+    position: "relative"
+  },
+  // Header
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 8,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255, 255, 255, 0.05)"
+  },
+  headerLeft: {
+    gap: 1
+  },
+  headerRight: {
+    alignItems: "flex-end"
+  },
+  headerTitle: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: gameUIColors.primary,
+    fontFamily: "monospace",
+    letterSpacing: 1.5
+  },
+  headerSubtitle: {
+    fontSize: 8,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace",
+    opacity: 0.7
+  },
+  statusIndicator: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  statusDot: {
+    width: 5,
+    height: 5,
+    borderRadius: 2.5
+  },
+  statusText: {
+    fontSize: 9,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  },
+  // Health section
+  healthSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+    gap: 8
+  },
+  healthLabel: {
+    fontSize: 8,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace",
+    letterSpacing: 0.5
+  },
+  healthBarWrapper: {
+    flex: 1
+  },
+  healthBarBg: {
+    height: 4,
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderRadius: 2,
+    overflow: "hidden"
+  },
+  healthBarFill: {
+    height: "100%",
+    borderRadius: 2
+  },
+  healthPercentage: {
+    fontSize: 11,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  // Stats grid
+  statsGrid: {
+    gap: 6,
+    marginBottom: 8
+  },
+  statCard: {
+    backgroundColor: gameUIColors.blackTint2,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: gameUIColors.border,
+    padding: 10,
+    marginBottom: 4
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginBottom: 4
+  },
+  cardInfo: {
+    flex: 1
+  },
+  cardLabel: {
+    fontSize: 11,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    color: gameUIColors.primary
+  },
+  cardSubtitle: {
+    fontSize: 8,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace",
+    opacity: 0.7
+  },
+  statNumber: {
+    fontSize: 16,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    minWidth: 28
+  },
+  valueBlock: {
+    alignItems: "flex-end"
+  },
+  percentText: {
+    fontSize: 9,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace"
+  },
+  statBar: {
+    height: 3,
+    borderRadius: 1.5,
+    overflow: "hidden"
+  },
+  statBarFill: {
+    height: "100%",
+    borderRadius: 1.5
+  },
+  // Bottom bar
+  bottomBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: gameUIColors.border + "40"
+  },
+  bottomStat: {
+    flex: 1,
+    alignItems: "center"
+  },
+  bottomStatLabel: {
+    fontSize: 7,
+    color: gameUIColors.muted,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    marginBottom: 1
+  },
+  bottomStatValue: {
+    fontSize: 11,
+    fontWeight: "700",
+    color: gameUIColors.primary,
+    fontFamily: "monospace"
+  },
+  bottomDivider: {
+    width: 1,
+    height: 16,
+    backgroundColor: gameUIColors.border + "40"
+  },
+  iconBadge: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});

package/lib/module/ui/gameUI/components/GameUIIssuesList.js

@@ -0,0 +1,279 @@
+"use strict";
+
+import { useState, useCallback } from "react";
+import { StyleSheet, Text, View, TouchableOpacity, Animated } from "react-native";
+import { AlertOctagon, AlertTriangle, ChevronDown, ChevronUp } from "../../../icons/index.js";
+import { gameUIColors } from "../constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Reusable issues list component with expandable details
+ * Shows validation errors in a compact, game-styled format
+ * Used in ENV and Storage pages for displaying problems
+ */
+export function GameUIIssuesList({
+  issues,
+  onIssueClick,
+  hintText = "Tap any issue to view details",
+  style,
+  expandable = true,
+  statusLabels = {
+    missing: "Not found",
+    wrong_type: "Type error",
+    wrong_value: "Invalid value"
+  }
+}) {
+  const [expandedIssues, setExpandedIssues] = useState(new Set());
+  const toggleIssue = useCallback(key => {
+    if (!expandable) return;
+    setExpandedIssues(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(key)) {
+        newSet.delete(key);
+      } else {
+        newSet.add(key);
+      }
+      return newSet;
+    });
+  }, [expandable]);
+  const getStatusColor = status => {
+    return status === "missing" ? gameUIColors.warning : gameUIColors.info;
+  };
+  const getStatusIcon = status => {
+    return status === "missing" ? AlertOctagon : AlertTriangle;
+  };
+  const getStatusLabel = issue => {
+    switch (issue.status) {
+      case "missing":
+        return `• ${statusLabels.missing}`;
+      case "wrong_type":
+        return `• ${statusLabels.wrong_type}${issue.expectedType ? `: Expected ${issue.expectedType}` : ""}`;
+      case "wrong_value":
+        return `• ${statusLabels.wrong_value}${issue.value ? `: ${String(issue.value).substring(0, 20)}` : ""}`;
+      default:
+        return "";
+    }
+  };
+  if (issues.length === 0) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    children: [issues.map((issue, index) => {
+      const statusColor = getStatusColor(issue.status);
+      const StatusIcon = getStatusIcon(issue.status);
+      const isExpanded = expandedIssues.has(issue.key);
+      const ChevronIcon = isExpanded ? ChevronUp : ChevronDown;
+      return /*#__PURE__*/_jsxs(View, {
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          onPress: () => {
+            if (expandable) {
+              toggleIssue(issue.key);
+            }
+            onIssueClick?.(issue);
+          },
+          style: styles.issueRow,
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/_jsx(StatusIcon, {
+            size: 14,
+            color: statusColor
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.issueContent,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.issueKey, {
+                color: gameUIColors.primary
+              }],
+              children: issue.key
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.issueDesc,
+              children: getStatusLabel(issue)
+            })]
+          }), expandable && /*#__PURE__*/_jsx(ChevronIcon, {
+            size: 12,
+            color: gameUIColors.muted
+          })]
+        }), expandable && isExpanded && /*#__PURE__*/_jsxs(Animated.View, {
+          style: styles.issueDetails,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.detailRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.detailLabel,
+              children: "Status:"
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: [styles.detailValue, {
+                color: gameUIColors.primary,
+                fontWeight: "600"
+              }],
+              children: [issue.status === "missing" && "MISSING", issue.status === "wrong_type" && "TYPE ERROR", issue.status === "wrong_value" && "INVALID VALUE"]
+            })]
+          }), issue.value !== undefined && issue.status !== "missing" && /*#__PURE__*/_jsxs(View, {
+            style: styles.detailRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.detailLabel,
+              children: "Current:"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.detailValue, {
+                color: gameUIColors.warning
+              }],
+              children: `"${String(issue.value)}"`
+            })]
+          }), issue.expectedType && issue.status === "wrong_type" && /*#__PURE__*/_jsxs(View, {
+            style: styles.detailRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.detailLabel,
+              children: "Expected:"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.detailValue, {
+                color: gameUIColors.success
+              }],
+              children: issue.expectedType
+            })]
+          }), issue.expectedValue && issue.status === "wrong_value" && /*#__PURE__*/_jsxs(View, {
+            style: styles.detailRow,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.detailLabel,
+              children: "Expected:"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.detailValue, {
+                color: gameUIColors.success
+              }],
+              children: `"${issue.expectedValue}"`
+            })]
+          }), issue.description && /*#__PURE__*/_jsx(View, {
+            style: styles.descSection,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.descText,
+              children: issue.description
+            })
+          }), issue.fixSuggestion && /*#__PURE__*/_jsxs(View, {
+            style: styles.fixSection,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.fixLabel,
+              children: "HOW TO FIX"
+            }), /*#__PURE__*/_jsx(Text, {
+              style: styles.fixText,
+              children: issue.fixSuggestion
+            })]
+          })]
+        })]
+      }, `${issue.key}-${index}`);
+    }), hintText && /*#__PURE__*/_jsx(Text, {
+      style: styles.hint,
+      children: hintText
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 8,
+    padding: 8,
+    borderWidth: 1,
+    borderColor: gameUIColors.warning + "33"
+  },
+  issueRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    borderRadius: 6,
+    marginBottom: 4
+  },
+  issueContent: {
+    flex: 1,
+    marginLeft: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  issueKey: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  issueDesc: {
+    fontSize: 10,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace",
+    flex: 1
+  },
+  hint: {
+    fontSize: 9,
+    color: gameUIColors.muted,
+    fontFamily: "monospace",
+    textAlign: "center",
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: gameUIColors.primary + "0D"
+  },
+  // Expanded details
+  issueDetails: {
+    marginTop: 8,
+    marginLeft: 22,
+    marginRight: 8,
+    paddingLeft: 12,
+    paddingRight: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+    backgroundColor: gameUIColors.background + "4D",
+    borderLeftWidth: 2,
+    borderLeftColor: gameUIColors.primary + "1A",
+    borderRadius: 4
+  },
+  detailRow: {
+    flexDirection: "row",
+    marginTop: 8,
+    alignItems: "flex-start"
+  },
+  detailLabel: {
+    fontSize: 10,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace",
+    fontWeight: "600",
+    width: 70
+  },
+  detailValue: {
+    fontSize: 11,
+    color: gameUIColors.primary,
+    fontFamily: "monospace",
+    flex: 1,
+    lineHeight: 16
+  },
+  fixSection: {
+    marginTop: 12,
+    padding: 10,
+    backgroundColor: gameUIColors.info + "14",
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: gameUIColors.info + "33"
+  },
+  fixLabel: {
+    fontSize: 10,
+    color: gameUIColors.info,
+    fontFamily: "monospace",
+    fontWeight: "700",
+    marginBottom: 6,
+    letterSpacing: 0.5
+  },
+  fixText: {
+    fontSize: 11,
+    color: gameUIColors.primary,
+    fontFamily: "monospace",
+    lineHeight: 18,
+    backgroundColor: gameUIColors.background + "66",
+    padding: 8,
+    borderRadius: 4,
+    overflow: "hidden"
+  },
+  descSection: {
+    marginTop: 10,
+    paddingTop: 10,
+    borderTopWidth: 1,
+    borderTopColor: gameUIColors.primary + "0D"
+  },
+  descText: {
+    fontSize: 10,
+    color: gameUIColors.secondary,
+    fontFamily: "monospace",
+    marginTop: 4,
+    lineHeight: 14
+  }
+});