@buoy-gg/shared-ui 1.7.2

package/lib/module/ui/components/CollapsibleSection.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import { useState, useRef } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, Animated } from "react-native";
+import { ChevronDown } from "../../icons/index.js";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CollapsibleSection({
+  title,
+  children,
+  icon: Icon,
+  badge,
+  defaultOpen = false,
+  variant = "bordered",
+  style,
+  headerStyle,
+  titleStyle,
+  contentStyle,
+  onToggle
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const rotateAnim = useRef(new Animated.Value(defaultOpen ? 1 : 0)).current;
+  const toggle = () => {
+    const newState = !isOpen;
+    setIsOpen(newState);
+    onToggle?.(newState);
+    Animated.timing(rotateAnim, {
+      toValue: newState ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  };
+  const rotation = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"]
+  });
+  const containerStyles = [styles.container, variant === "bordered" && styles.borderedVariant, variant === "card" && styles.cardVariant, style];
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyles,
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.header, headerStyle],
+      onPress: toggle,
+      activeOpacity: 0.7,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerLeft,
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {
+          size: 16,
+          color: variant === "card" ? gameUIColors.primary : gameUIColors.secondary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [styles.title, titleStyle],
+          children: title
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerRight,
+        children: [badge !== undefined && /*#__PURE__*/_jsx(View, {
+          style: styles.badgeContainer,
+          children: typeof badge === "string" || typeof badge === "number" ? /*#__PURE__*/_jsx(View, {
+            style: styles.badge,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.badgeText,
+              children: badge
+            })
+          }) : badge
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: {
+            transform: [{
+              rotate: rotation
+            }]
+          },
+          children: /*#__PURE__*/_jsx(ChevronDown, {
+            size: 16,
+            color: gameUIColors.secondary
+          })
+        })]
+      })]
+    }), isOpen && /*#__PURE__*/_jsx(View, {
+      style: [styles.content, contentStyle],
+      children: children
+    })]
+  });
+}
+CollapsibleSection.Simple = function Simple({
+  title,
+  children,
+  defaultOpen
+}) {
+  return /*#__PURE__*/_jsx(CollapsibleSection, {
+    title: title,
+    defaultOpen: defaultOpen,
+    variant: "plain",
+    children: children
+  });
+};
+CollapsibleSection.WithIcon = function WithIcon({
+  title,
+  icon,
+  children,
+  defaultOpen,
+  badge
+}) {
+  return /*#__PURE__*/_jsx(CollapsibleSection, {
+    title: title,
+    icon: icon,
+    badge: badge,
+    defaultOpen: defaultOpen,
+    variant: "card",
+    children: children
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 8
+  },
+  borderedVariant: {
+    borderWidth: 1,
+    borderColor: gameUIColors.border + "30",
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  cardVariant: {
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 12
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+    gap: 8
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: gameUIColors.text,
+    flex: 1
+  },
+  badgeContainer: {
+    marginRight: 4
+  },
+  badge: {
+    backgroundColor: gameUIColors.primary + "20",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: gameUIColors.primary
+  },
+  content: {
+    paddingHorizontal: 12,
+    paddingBottom: 12
+  }
+});

package/lib/module/ui/components/CompactFilterChips.js

@@ -0,0 +1,110 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CompactFilterChips({
+  groups,
+  onChipPress
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: groups.map(group => /*#__PURE__*/_jsxs(View, {
+      style: styles.group,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.groupTitle,
+        children: group.title
+      }), /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        style: styles.chipsScroll,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.chipsRow,
+          children: group.chips.map(chip => /*#__PURE__*/_jsxs(TouchableOpacity, {
+            style: [styles.chip, chip.isActive && styles.chipActive, chip.isActive && chip.color && {
+              backgroundColor: chip.color + "15",
+              borderColor: chip.color + "40"
+            }],
+            onPress: () => onChipPress(group.id, chip.id, chip.value),
+            children: [chip.icon && /*#__PURE__*/_jsx(chip.icon, {
+              size: 10,
+              color: chip.isActive ? chip.color || macOSColors.semantic.info : macOSColors.text.muted
+            }), /*#__PURE__*/_jsx(Text, {
+              style: [styles.chipLabel, chip.isActive && styles.chipLabelActive, chip.isActive && chip.color && {
+                color: chip.color
+              }],
+              children: chip.label
+            }), chip.count !== undefined && /*#__PURE__*/_jsx(Text, {
+              style: [styles.chipCount, chip.isActive && styles.chipCountActive, chip.isActive && chip.color && {
+                color: chip.color
+              }],
+              children: chip.count
+            })]
+          }, chip.id))
+        })
+      })]
+    }, group.id))
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    gap: 8
+  },
+  group: {
+    gap: 6
+  },
+  groupTitle: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    paddingHorizontal: 4
+  },
+  chipsScroll: {
+    flexGrow: 0
+  },
+  chipsRow: {
+    flexDirection: "row",
+    gap: 4,
+    paddingHorizontal: 4
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    height: 24
+  },
+  chipActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info + "40"
+  },
+  chipLabel: {
+    fontSize: 10,
+    fontWeight: "500",
+    color: macOSColors.text.secondary
+  },
+  chipLabelActive: {
+    color: macOSColors.semantic.info,
+    fontWeight: "600"
+  },
+  chipCount: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: macOSColors.text.muted,
+    backgroundColor: macOSColors.background.hover,
+    paddingHorizontal: 4,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  chipCountActive: {
+    backgroundColor: macOSColors.semantic.info + "20",
+    color: macOSColors.semantic.info
+  }
+});

package/lib/module/ui/components/CompactRow.js

@@ -0,0 +1,226 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { ChevronDown, ChevronRight } from "../../icons/index.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CompactRow({
+  statusDotColor,
+  statusLabel,
+  statusSublabel,
+  primaryText,
+  secondaryText,
+  expandedContent,
+  isExpanded,
+  badgeText,
+  badgeColor,
+  customBadge,
+  showChevron,
+  bottomRightText,
+  isSelected,
+  onPress,
+  disabled,
+  expandedGlowColor
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.rowWrapper,
+    children: /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [styles.row, isSelected && styles.selectedRow, isExpanded && [styles.expandedRowActive, {
+        borderColor: expandedGlowColor || buoyColors.primary,
+        shadowColor: expandedGlowColor || buoyColors.primary
+      }]],
+      onPress: onPress,
+      activeOpacity: 0.8,
+      disabled: disabled || !onPress,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.rowContent,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.statusSection,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.statusDot, {
+              backgroundColor: statusDotColor
+            }]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.statusInfo,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [styles.statusLabel, {
+                color: statusDotColor
+              }],
+              numberOfLines: 1,
+              children: statusLabel
+            }), statusSublabel && /*#__PURE__*/_jsx(Text, {
+              style: styles.observerText,
+              numberOfLines: 1,
+              children: statusSublabel
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.querySection,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.queryHash,
+            numberOfLines: isExpanded ? undefined : 2,
+            children: primaryText
+          }), !isExpanded && secondaryText && /*#__PURE__*/_jsx(Text, {
+            style: styles.secondaryText,
+            numberOfLines: 1,
+            children: secondaryText
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.rightSection,
+          children: [(customBadge || badgeText !== undefined) && /*#__PURE__*/_jsx(View, {
+            style: styles.badgeContainer,
+            children: customBadge ? customBadge : /*#__PURE__*/_jsx(Text, {
+              style: [styles.statusBadge, {
+                color: badgeColor || statusDotColor
+              }],
+              children: badgeText
+            })
+          }), showChevron && /*#__PURE__*/_jsx(View, {
+            style: styles.chevronContainer,
+            children: isExpanded ? /*#__PURE__*/_jsx(ChevronDown, {
+              size: 14,
+              color: buoyColors.textMuted
+            }) : /*#__PURE__*/_jsx(ChevronRight, {
+              size: 14,
+              color: buoyColors.textMuted
+            })
+          })]
+        })]
+      }), isExpanded && expandedContent && /*#__PURE__*/_jsx(View, {
+        style: styles.expandedContent,
+        children: expandedContent
+      }), !isExpanded && bottomRightText && /*#__PURE__*/_jsx(View, {
+        style: styles.bottomRightContainer,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.bottomRightText,
+          children: bottomRightText
+        })
+      })]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  rowWrapper: {
+    position: "relative",
+    marginHorizontal: 8,
+    marginVertical: 3
+  },
+  row: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border + "40",
+    padding: 12,
+    transform: [{
+      scale: 1
+    }]
+  },
+  selectedRow: {
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary + "50",
+    transform: [{
+      scale: 1.01
+    }],
+    shadowColor: buoyColors.primary,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 2
+  },
+  expandedRowActive: {
+    transform: [{
+      scale: 1.02
+    }],
+    borderWidth: 2,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.8,
+    shadowRadius: 20,
+    elevation: 10
+  },
+  rowContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between"
+  },
+  statusSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    width: 90,
+    // Fixed width instead of flex to ensure consistent alignment
+    minWidth: 90
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  statusInfo: {
+    flex: 1,
+    maxWidth: 70 // Ensure status text doesn't overflow
+  },
+  statusLabel: {
+    fontSize: 11,
+    fontWeight: "600",
+    lineHeight: 14
+  },
+  observerText: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 1
+  },
+  querySection: {
+    flex: 2,
+    paddingHorizontal: 12
+  },
+  queryHash: {
+    fontFamily: "monospace",
+    fontSize: 12,
+    color: buoyColors.text,
+    lineHeight: 16
+  },
+  secondaryText: {
+    fontSize: 10,
+    color: buoyColors.textMuted,
+    marginTop: 1
+  },
+  rightSection: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  badgeContainer: {
+    alignItems: "flex-end"
+  },
+  statusBadge: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontVariant: ["tabular-nums"]
+  },
+  chevronContainer: {
+    padding: 2
+  },
+  expandedContent: {
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border + "20",
+    marginLeft: 24 // Align with content after status dot
+  },
+  bottomRightContainer: {
+    position: "absolute",
+    bottom: 4,
+    right: 8
+  },
+  bottomRightText: {
+    fontSize: 9,
+    color: buoyColors.textMuted,
+    fontFamily: "monospace"
+  }
+});