@buoy-gg/shared-ui 1.7.2

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

@@ -0,0 +1,353 @@
+"use strict";
+
+import { useState } from "react";
+import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
+import { gameUIColors } from "../gameUI/index.js";
+import { ModalHeader } from "./ModalHeader.js";
+import { CopyButton } from "./CopyButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DetailView({
+  children,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, style],
+    children: children
+  });
+}
+DetailView.Header = function Header({
+  title,
+  subtitle,
+  onClose,
+  onBack,
+  actions
+}) {
+  return /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: onBack,
+      onClose: onClose
+    }), /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: title,
+      subtitle: subtitle
+    }), actions && /*#__PURE__*/_jsx(ModalHeader.Actions, {
+      children: actions
+    })]
+  });
+};
+DetailView.Section = function Section({
+  title,
+  icon: Icon,
+  children,
+  defaultOpen = true,
+  collapsible = true,
+  style,
+  badge
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  if (!collapsible) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.section, style],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.sectionHeader,
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {
+          size: 14,
+          color: gameUIColors.primary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: title
+        }), badge !== undefined && /*#__PURE__*/_jsx(View, {
+          style: styles.sectionBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.sectionBadgeText,
+            children: badge
+          })
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.sectionContent,
+        children: children
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.section, style],
+    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.sectionHeaderTouchable,
+      onPress: () => setIsOpen(!isOpen),
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.sectionHeader,
+        children: [Icon && /*#__PURE__*/_jsx(Icon, {
+          size: 14,
+          color: gameUIColors.primary
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.sectionTitle,
+          children: title
+        }), badge !== undefined && /*#__PURE__*/_jsx(View, {
+          style: styles.sectionBadge,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: styles.sectionBadgeText,
+            children: badge
+          })
+        })]
+      })
+    }), isOpen && /*#__PURE__*/_jsx(View, {
+      style: styles.sectionContent,
+      children: children
+    })]
+  });
+};
+DetailView.Row = function Row({
+  label,
+  value,
+  copyable = false,
+  style,
+  labelStyle,
+  valueStyle
+}) {
+  const stringValue = typeof value === "string" || typeof value === "number" ? String(value) : null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.rowLabel, labelStyle],
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.rowValueContainer,
+      children: [typeof value === "string" || typeof value === "number" ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.rowValue, valueStyle],
+        numberOfLines: 1,
+        children: value
+      }) : value, copyable && stringValue && /*#__PURE__*/_jsx(CopyButton, {
+        value: stringValue,
+        size: 12
+      })]
+    })]
+  });
+};
+DetailView.DataSection = function DataSection({
+  title,
+  data,
+  icon,
+  defaultOpen = false,
+  style
+}) {
+  return /*#__PURE__*/_jsx(DetailView.Section, {
+    title: title,
+    icon: icon,
+    defaultOpen: defaultOpen,
+    style: style,
+    children: /*#__PURE__*/_jsx(View, {
+      style: styles.dataContainer,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.dataText,
+          children: JSON.stringify(data, null, 2)
+        })
+      })
+    })
+  });
+};
+DetailView.StatusBar = function StatusBar({
+  status,
+  message,
+  style
+}) {
+  const statusColors = {
+    success: gameUIColors.success,
+    error: gameUIColors.error,
+    warning: gameUIColors.warning,
+    pending: gameUIColors.warning,
+    info: gameUIColors.primary
+  };
+  const color = statusColors[status];
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.statusBar, {
+      backgroundColor: color + "20",
+      borderColor: color + "40"
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.statusDot, {
+        backgroundColor: color
+      }]
+    }), message && /*#__PURE__*/_jsx(Text, {
+      style: [styles.statusMessage, {
+        color
+      }],
+      children: message
+    })]
+  });
+};
+DetailView.Timeline = function Timeline({
+  items,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.timeline, style],
+    children: items.map((item, index) => /*#__PURE__*/_jsxs(View, {
+      style: styles.timelineItem,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.timelineDot
+      }), index < items.length - 1 && /*#__PURE__*/_jsx(View, {
+        style: styles.timelineLine
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.timelineContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.timelineLabel,
+          children: item.label
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.timelineValue,
+          children: item.value
+        })]
+      })]
+    }, index))
+  });
+};
+DetailView.Content = function Content({
+  children,
+  scrollable = true,
+  style
+}) {
+  if (scrollable) {
+    return /*#__PURE__*/_jsx(ScrollView, {
+      style: [styles.content, style],
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.content, style],
+    children: children
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: gameUIColors.background
+  },
+  content: {
+    flex: 1,
+    padding: 16
+  },
+  section: {
+    marginBottom: 16,
+    backgroundColor: gameUIColors.panel,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  sectionHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    gap: 8
+  },
+  sectionHeaderTouchable: {},
+  sectionTitle: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "600",
+    color: gameUIColors.text
+  },
+  sectionBadge: {
+    backgroundColor: gameUIColors.primary + "20",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  sectionBadgeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    color: gameUIColors.primary
+  },
+  sectionContent: {
+    padding: 12,
+    paddingTop: 0
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: gameUIColors.border + "20"
+  },
+  rowLabel: {
+    flex: 1,
+    fontSize: 13,
+    color: gameUIColors.secondary
+  },
+  rowValueContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 2,
+    gap: 8
+  },
+  rowValue: {
+    flex: 1,
+    fontSize: 13,
+    color: gameUIColors.text,
+    textAlign: "right"
+  },
+  dataContainer: {
+    backgroundColor: gameUIColors.background,
+    borderRadius: 6,
+    padding: 12
+  },
+  dataText: {
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: gameUIColors.text
+  },
+  statusBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12,
+    borderWidth: 1,
+    borderRadius: 8,
+    gap: 8,
+    marginVertical: 8
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4
+  },
+  statusMessage: {
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  timeline: {
+    paddingVertical: 8
+  },
+  timelineItem: {
+    flexDirection: "row",
+    position: "relative"
+  },
+  timelineDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: gameUIColors.primary,
+    marginTop: 4,
+    marginRight: 12
+  },
+  timelineLine: {
+    position: "absolute",
+    left: 3.5,
+    top: 12,
+    bottom: -4,
+    width: 1,
+    backgroundColor: gameUIColors.border + "40"
+  },
+  timelineContent: {
+    flex: 1,
+    marginBottom: 12
+  },
+  timelineLabel: {
+    fontSize: 12,
+    color: gameUIColors.secondary,
+    marginBottom: 2
+  },
+  timelineValue: {
+    fontSize: 13,
+    color: gameUIColors.text
+  }
+});

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

@@ -0,0 +1,14 @@
+"use strict";
+
+import { View } from "react-native";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Divider() {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: 1,
+      height: 12,
+      backgroundColor: "rgba(107, 114, 128, 0.4)",
+      flexShrink: 0
+    }
+  });
+}

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

@@ -0,0 +1,140 @@
+"use strict";
+
+import { useRef, useMemo, memo } from "react";
+import { View, PanResponder, Dimensions } from "react-native";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DraggableHeader - Reusable draggable component based on JsModal's working implementation
+ *
+ * This component provides smooth drag functionality with proper boundary checking.
+ * It uses the same proven pattern from JsModal that works reliably.
+ */
+export const DraggableHeader = /*#__PURE__*/memo(function DraggableHeader({
+  children,
+  position,
+  onDragStart,
+  onDragEnd,
+  onTap,
+  containerBounds = Dimensions.get("window"),
+  elementSize = {
+    width: 100,
+    height: 50
+  },
+  minPosition = {
+    x: 0,
+    y: 0
+  },
+  style,
+  enabled = true
+}) {
+  const isDraggingRef = useRef(false);
+  const dragDistanceRef = useRef(0);
+  const touchOffsetRef = useRef({
+    x: 0,
+    y: 0
+  });
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => enabled,
+    onMoveShouldSetPanResponder: (_, g) => enabled && (Math.abs(g.dx) > 1 || Math.abs(g.dy) > 1),
+    onPanResponderTerminationRequest: () => false,
+    // Resist touch steal
+
+    onPanResponderGrant: evt => {
+      isDraggingRef.current = false; // Start as not dragging
+      dragDistanceRef.current = 0;
+      // Don't call onDragStart immediately - wait to see if it's actually a drag
+
+      // Record where inside the bubble the user touched
+      touchOffsetRef.current = {
+        x: evt.nativeEvent.locationX,
+        y: evt.nativeEvent.locationY
+      };
+
+      // Stop any running timing/spring and capture final XY
+      position.stopAnimation(({
+        x,
+        y
+      }) => {
+        // Use that exact final value as the new offset for the gesture
+        position.setOffset({
+          x,
+          y
+        });
+        position.setValue({
+          x: 0,
+          y: 0
+        });
+      });
+    },
+    onPanResponderMove: (evt, gestureState) => {
+      // Track total drag distance
+      const totalDistance = Math.abs(gestureState.dx) + Math.abs(gestureState.dy);
+      dragDistanceRef.current = totalDistance;
+
+      // Mark as dragging if moved more than 5 pixels
+      if (totalDistance > 5 && !isDraggingRef.current) {
+        isDraggingRef.current = true;
+        onDragStart?.(); // Call onDragStart only when we confirm it's a drag
+      }
+
+      // Use absolute finger anchoring for better grip feel
+      const x = evt.nativeEvent.pageX - touchOffsetRef.current.x;
+      const y = evt.nativeEvent.pageY - touchOffsetRef.current.y;
+
+      // When using absolute follow, use the value directly (no offset on move)
+      position.setOffset({
+        x: 0,
+        y: 0
+      });
+      position.setValue({
+        x,
+        y
+      });
+    },
+    onPanResponderRelease: () => {
+      // Get current position before any operations
+      const currentX = Number(JSON.stringify(position.x));
+      const currentY = Number(JSON.stringify(position.y));
+
+      // Check if it was a tap (minimal movement)
+      if (dragDistanceRef.current <= 5 && !isDraggingRef.current) {
+        // Reset position to current values without offset for tap
+        position.setOffset({
+          x: 0,
+          y: 0
+        });
+        position.setValue({
+          x: currentX,
+          y: currentY
+        });
+        onTap?.();
+        // No need to call onDragEnd since onDragStart was never called for a tap
+        return;
+      }
+
+      // Apply boundary constraints
+      const clampedX = Math.max(minPosition.x, Math.min(currentX, containerBounds.width - elementSize.width));
+      const clampedY = Math.max(minPosition.y, Math.min(currentY, containerBounds.height - elementSize.height));
+
+      // Set to clamped position
+      position.setValue({
+        x: clampedX,
+        y: clampedY
+      });
+      onDragEnd?.({
+        x: clampedX,
+        y: clampedY
+      });
+      isDraggingRef.current = false;
+    },
+    onPanResponderTerminate: () => {
+      isDraggingRef.current = false;
+      // No need to flattenOffset since we're using absolute positioning
+    }
+  }), [enabled, position, onDragStart, onDragEnd, onTap, containerBounds, elementSize, minPosition]);
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    ...panResponder.panHandlers,
+    children: children
+  });
+});