@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,227 @@
+"use strict";
+
+import { useEffect, useRef } from "react";
+import { View, Text, StyleSheet, Animated } from "react-native";
+import { CheckCircle, XCircle, AlertCircle, Clock, Info } from "../../icons/index.js";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const statusConfig = {
+  success: {
+    color: gameUIColors.success,
+    icon: CheckCircle,
+    label: "Success",
+    bgColor: gameUIColors.success + "20"
+  },
+  error: {
+    color: gameUIColors.error,
+    icon: XCircle,
+    label: "Error",
+    bgColor: gameUIColors.error + "20"
+  },
+  warning: {
+    color: gameUIColors.warning,
+    icon: AlertCircle,
+    label: "Warning",
+    bgColor: gameUIColors.warning + "20"
+  },
+  pending: {
+    color: gameUIColors.warning,
+    icon: Clock,
+    label: "Pending",
+    bgColor: gameUIColors.warning + "20"
+  },
+  info: {
+    color: gameUIColors.primary,
+    icon: Info,
+    label: "Info",
+    bgColor: gameUIColors.primary + "20"
+  }
+};
+export function StatusIndicator({
+  status,
+  size = "medium",
+  showLabel = false,
+  label,
+  showIcon = true,
+  animated = false,
+  style,
+  labelStyle,
+  variant = "icon"
+}) {
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  const config = statusConfig[status];
+  const sizeConfig = {
+    small: {
+      iconSize: 12,
+      fontSize: 10,
+      dotSize: 6,
+      padding: 4
+    },
+    medium: {
+      iconSize: 16,
+      fontSize: 12,
+      dotSize: 8,
+      padding: 6
+    },
+    large: {
+      iconSize: 20,
+      fontSize: 14,
+      dotSize: 10,
+      padding: 8
+    }
+  };
+  const sizes = sizeConfig[size];
+  const Icon = config.icon;
+  const displayLabel = label || config.label;
+  useEffect(() => {
+    if (animated && status === "pending") {
+      const animation = Animated.loop(Animated.sequence([Animated.timing(pulseAnim, {
+        toValue: 1.2,
+        duration: 600,
+        useNativeDriver: true
+      }), Animated.timing(pulseAnim, {
+        toValue: 1,
+        duration: 600,
+        useNativeDriver: true
+      })]));
+      animation.start();
+      return () => animation.stop();
+    }
+  }, [animated, status, pulseAnim]);
+  if (variant === "dot") {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.dot, {
+        width: sizes.dotSize,
+        height: sizes.dotSize,
+        backgroundColor: config.color,
+        transform: animated && status === "pending" ? [{
+          scale: pulseAnim
+        }] : []
+      }, style]
+    });
+  }
+  if (variant === "text") {
+    return /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: config.color,
+        fontSize: sizes.fontSize
+      }, labelStyle],
+      children: displayLabel
+    });
+  }
+  if (variant === "badge") {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, {
+        backgroundColor: config.bgColor,
+        paddingHorizontal: sizes.padding,
+        paddingVertical: sizes.padding / 2
+      }, style],
+      children: [showIcon && /*#__PURE__*/_jsx(Icon, {
+        size: sizes.iconSize,
+        color: config.color
+      }), showLabel && /*#__PURE__*/_jsx(Text, {
+        style: [styles.badgeLabel, {
+          color: config.color,
+          fontSize: sizes.fontSize
+        }, !showIcon && {
+          marginLeft: 0
+        }, labelStyle],
+        children: displayLabel
+      })]
+    });
+  }
+
+  // Default icon variant
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [styles.iconContainer, {
+      transform: animated && status === "pending" ? [{
+        scale: pulseAnim
+      }] : []
+    }, style],
+    children: [/*#__PURE__*/_jsx(Icon, {
+      size: sizes.iconSize,
+      color: config.color
+    }), showLabel && /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        color: config.color,
+        fontSize: sizes.fontSize
+      }, labelStyle],
+      children: displayLabel
+    })]
+  });
+}
+StatusIndicator.Dot = function StatusDot({
+  status,
+  size = 8,
+  animated = false,
+  style
+}) {
+  return /*#__PURE__*/_jsx(StatusIndicator, {
+    status: status,
+    variant: "dot",
+    animated: animated,
+    style: {
+      width: size,
+      height: size,
+      borderRadius: size / 2,
+      ...style
+    }
+  });
+};
+StatusIndicator.Badge = function StatusBadge({
+  status,
+  label,
+  size = "medium",
+  showIcon = true,
+  style
+}) {
+  return /*#__PURE__*/_jsx(StatusIndicator, {
+    status: status,
+    variant: "badge",
+    size: size,
+    showIcon: showIcon,
+    showLabel: true,
+    label: label,
+    style: style
+  });
+};
+StatusIndicator.Text = function StatusText({
+  status,
+  label,
+  size = "medium",
+  style
+}) {
+  return /*#__PURE__*/_jsx(StatusIndicator, {
+    status: status,
+    variant: "text",
+    size: size,
+    label: label,
+    labelStyle: style
+  });
+};
+const styles = StyleSheet.create({
+  iconContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  label: {
+    fontWeight: "500"
+  },
+  dot: {
+    borderRadius: 100
+  },
+  text: {
+    fontWeight: "600"
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    borderRadius: 4
+  },
+  badgeLabel: {
+    fontWeight: "600",
+    marginLeft: 4
+  }
+});

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

@@ -0,0 +1,92 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { Database, Lock, HardDrive } from "../../icons/index.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function StorageTypeBadge({
+  type,
+  size = "small",
+  showIcon = true
+}) {
+  const isSmall = size === "small";
+  const getStorageColor = () => {
+    switch (type) {
+      case "async":
+        return buoyColors.textSecondary;
+      case "mmkv":
+        return buoyColors.success;
+      case "secure":
+        return buoyColors.warning;
+      default:
+        return buoyColors.textMuted;
+    }
+  };
+  const getStorageText = () => {
+    switch (type) {
+      case "async":
+        return "ASYNC";
+      case "mmkv":
+        return "MMKV";
+      case "secure":
+        return "SECURE";
+    }
+  };
+  const getStorageIcon = () => {
+    const color = getStorageColor();
+    const iconSize = isSmall ? 10 : 12;
+    switch (type) {
+      case "async":
+        return /*#__PURE__*/_jsx(Database, {
+          size: iconSize,
+          color: color
+        });
+      case "mmkv":
+        return /*#__PURE__*/_jsx(HardDrive, {
+          size: iconSize,
+          color: color
+        });
+      case "secure":
+        return /*#__PURE__*/_jsx(Lock, {
+          size: iconSize,
+          color: color
+        });
+      default:
+        return null;
+    }
+  };
+  const backgroundColor = getStorageColor() + "1A";
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.badge, {
+      backgroundColor
+    }, isSmall && styles.smallBadge],
+    children: [showIcon && getStorageIcon(), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: getStorageColor()
+      }, isSmall && styles.smallText],
+      children: getStorageText()
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  smallBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5
+  },
+  smallText: {
+    fontSize: 9
+  }
+});

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

@@ -0,0 +1,66 @@
+"use strict";
+
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TabSelector({
+  tabs,
+  activeTab,
+  onTabChange
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: tabs.map(tab => /*#__PURE__*/_jsx(TouchableOpacity, {
+      "sentry-label": "ignore user interaction",
+      accessibilityLabel: tab.label,
+      accessibilityHint: `View ${tab.label.toLowerCase()}`,
+      onPress: () => onTabChange(tab.key),
+      style: [styles.tabButton, activeTab === tab.key ? styles.tabButtonActive : styles.tabButtonInactive],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.tabButtonText, activeTab === tab.key ? styles.tabButtonTextActive : styles.tabButtonTextInactive],
+        children: tab.label
+      })
+    }, tab.key))
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    backgroundColor: buoyColors.hover,
+    borderRadius: 6,
+    padding: 2,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    justifyContent: "space-evenly",
+    height: 28
+  },
+  tabButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4,
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    marginHorizontal: 1
+  },
+  tabButtonActive: {
+    backgroundColor: buoyColors.primary + "20",
+    borderWidth: 1,
+    borderColor: buoyColors.primary
+  },
+  tabButtonInactive: {
+    backgroundColor: "transparent"
+  },
+  tabButtonText: {
+    fontSize: 12,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  tabButtonTextActive: {
+    color: buoyColors.primary
+  },
+  tabButtonTextInactive: {
+    color: buoyColors.textMuted
+  }
+});

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

@@ -0,0 +1,138 @@
+"use strict";
+
+import { useEffect, useState } from "react";
+import { Text } from "react-native";
+import { gameUIColors } from "../gameUI/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TimeDisplay({
+  time,
+  format = "relative",
+  updateInterval = 60000,
+  style,
+  showSeconds = false,
+  prefix
+}) {
+  const [displayTime, setDisplayTime] = useState("");
+  const formatRelativeTime = date => {
+    const now = Date.now();
+    const diff = now - date.getTime();
+    const seconds = Math.floor(diff / 1000);
+    if (seconds < 60) return "just now";
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7) return `${days}d ago`;
+    const weeks = Math.floor(days / 7);
+    if (weeks < 4) return `${weeks}w ago`;
+    const months = Math.floor(days / 30);
+    if (months < 12) return `${months}mo ago`;
+    const years = Math.floor(days / 365);
+    return `${years}y ago`;
+  };
+  const formatAbsoluteTime = (date, withSeconds) => {
+    if (withSeconds) {
+      return date.toLocaleTimeString();
+    }
+    return date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  };
+  const formatDuration = ms => {
+    if (ms < 1000) return `${ms}ms`;
+    const seconds = Math.floor(ms / 1000);
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    if (minutes < 60) {
+      return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
+  };
+  useEffect(() => {
+    const formatMixed = date => {
+      const now = Date.now();
+      const diff = now - date.getTime();
+      const hours = Math.floor(diff / (1000 * 60 * 60));
+      if (hours < 24) {
+        return formatRelativeTime(date);
+      }
+      return date.toLocaleDateString([], {
+        month: "short",
+        day: "numeric",
+        year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined
+      });
+    };
+    const updateTime = () => {
+      if (format === "duration" && typeof time === "number") {
+        setDisplayTime(formatDuration(time));
+        return;
+      }
+      const date = new Date(time);
+      switch (format) {
+        case "relative":
+          setDisplayTime(formatRelativeTime(date));
+          break;
+        case "absolute":
+          setDisplayTime(formatAbsoluteTime(date, showSeconds));
+          break;
+        case "mixed":
+          setDisplayTime(formatMixed(date));
+          break;
+        default:
+          setDisplayTime(formatRelativeTime(date));
+      }
+    };
+    updateTime();
+    if (format === "relative" && updateInterval > 0) {
+      const interval = setInterval(updateTime, updateInterval);
+      return () => clearInterval(interval);
+    }
+  }, [time, format, updateInterval, showSeconds]);
+  return /*#__PURE__*/_jsx(Text, {
+    style: [defaultStyles.text, style],
+    children: prefix ? `${prefix} ${displayTime}` : displayTime
+  });
+}
+TimeDisplay.Timestamp = function Timestamp({
+  time,
+  style
+}) {
+  return /*#__PURE__*/_jsx(TimeDisplay, {
+    time: time,
+    format: "mixed",
+    style: style
+  });
+};
+TimeDisplay.Duration = function Duration({
+  milliseconds,
+  style
+}) {
+  return /*#__PURE__*/_jsx(TimeDisplay, {
+    time: milliseconds,
+    format: "duration",
+    style: style
+  });
+};
+TimeDisplay.Relative = function Relative({
+  time,
+  updateInterval = 60000,
+  style
+}) {
+  return /*#__PURE__*/_jsx(TimeDisplay, {
+    time: time,
+    format: "relative",
+    updateInterval: updateInterval,
+    style: style
+  });
+};
+const defaultStyles = {
+  text: {
+    fontSize: 12,
+    color: gameUIColors.tertiary
+  }
+};

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

@@ -0,0 +1,96 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getTypeConfig = type => {
+  const normalizedType = type.toLowerCase();
+
+  // Use consistent teal-based styling for all types
+  // This matches the Buoy theme where info = primary = teal
+  switch (normalizedType) {
+    case "string":
+      return {
+        backgroundColor: buoyColors.primary + "15",
+        borderColor: buoyColors.primary + "40",
+        textColor: buoyColors.primary,
+        label: "string"
+      };
+    case "number":
+      return {
+        backgroundColor: buoyColors.primary + "15",
+        borderColor: buoyColors.primary + "40",
+        textColor: buoyColors.primary,
+        label: "number"
+      };
+    case "boolean":
+      return {
+        backgroundColor: buoyColors.primary + "15",
+        borderColor: buoyColors.primary + "40",
+        textColor: buoyColors.primary,
+        label: "boolean"
+      };
+    case "object":
+      return {
+        backgroundColor: buoyColors.textMuted + "20",
+        borderColor: buoyColors.textMuted + "40",
+        textColor: buoyColors.textSecondary,
+        label: "object"
+      };
+    case "array":
+      return {
+        backgroundColor: buoyColors.textMuted + "20",
+        borderColor: buoyColors.textMuted + "40",
+        textColor: buoyColors.textSecondary,
+        label: "array"
+      };
+    case "function":
+      return {
+        backgroundColor: buoyColors.textMuted + "20",
+        borderColor: buoyColors.textMuted + "40",
+        textColor: buoyColors.textSecondary,
+        label: "fn"
+      };
+    default:
+      return {
+        backgroundColor: buoyColors.textMuted + "20",
+        borderColor: buoyColors.textMuted + "40",
+        textColor: buoyColors.textMuted,
+        label: normalizedType.slice(0, 6)
+      };
+  }
+};
+export function TypeBadge({
+  type
+}) {
+  if (!type) return null;
+  const config = getTypeConfig(type);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.badge, {
+      backgroundColor: config.backgroundColor,
+      borderColor: config.borderColor
+    }],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.badgeText, {
+        color: config.textColor
+      }],
+      children: config.label
+    })
+  });
+}
+const styles = StyleSheet.create({
+  badge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+    alignSelf: "flex-start"
+  },
+  badgeText: {
+    fontSize: 10,
+    fontWeight: "600",
+    fontFamily: "monospace",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  }
+});