@buoy-gg/shared-ui 1.7.2

package/lib/commonjs/ui/components/DataInspector.js

@@ -0,0 +1,322 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataInspector = DataInspector;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../icons/index.js");
+var _index2 = require("../gameUI/index.js");
+var _CopyButton = require("./CopyButton.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function DataInspector({
+  data,
+  mode = "view",
+  syntax = "json",
+  theme = "dark",
+  collapsible = true,
+  searchable = true,
+  onEdit,
+  style,
+  title
+}) {
+  const [searchQuery, setSearchQuery] = (0, _react.useState)("");
+  const [isEditing, setIsEditing] = (0, _react.useState)(false);
+  const [editedData, setEditedData] = (0, _react.useState)("");
+  const formatData = () => {
+    if (syntax === "json") {
+      try {
+        return JSON.stringify(data, null, 2);
+      } catch {
+        return String(data);
+      }
+    }
+    return String(data);
+  };
+  const highlightSearch = text => {
+    if (!searchQuery) return text;
+    const parts = text.split(new RegExp(`(${searchQuery})`, "gi"));
+    return parts.map((part, index) => {
+      if (part.toLowerCase() === searchQuery.toLowerCase()) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.highlight,
+          children: part
+        }, index);
+      }
+      return part;
+    });
+  };
+  const handleEdit = () => {
+    if (!isEditing) {
+      setEditedData(formatData());
+      setIsEditing(true);
+    } else {
+      try {
+        const newData = syntax === "json" ? JSON.parse(editedData) : editedData;
+        onEdit?.(newData);
+        setIsEditing(false);
+      } catch (error) {
+        console.error("Failed to parse edited data", error);
+      }
+    }
+  };
+  const cancelEdit = () => {
+    setIsEditing(false);
+    setEditedData("");
+  };
+  const formattedData = formatData();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    children: [(title || searchable || mode === "edit") && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.header,
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.controls,
+        children: [searchable && !isEditing && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.searchContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Search, {
+            size: 12,
+            color: _index2.gameUIColors.secondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            style: styles.searchInput,
+            placeholder: "Search...",
+            placeholderTextColor: _index2.gameUIColors.tertiary,
+            value: searchQuery,
+            onChangeText: setSearchQuery
+          })]
+        }), mode === "edit" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.editButton,
+          onPress: isEditing ? handleEdit : () => handleEdit(),
+          children: isEditing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Check, {
+            size: 14,
+            color: _index2.gameUIColors.success
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Edit3, {
+            size: 14,
+            color: _index2.gameUIColors.primary
+          })
+        }), isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          style: styles.cancelButton,
+          onPress: cancelEdit,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.X, {
+            size: 14,
+            color: _index2.gameUIColors.error
+          })
+        }), !isEditing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CopyButton.CopyButton, {
+          value: formattedData,
+          size: 12
+        })]
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: styles.scrollView,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        showsVerticalScrollIndicator: false,
+        children: isEditing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+          style: styles.editor,
+          value: editedData,
+          onChangeText: setEditedData,
+          multiline: true,
+          autoCapitalize: "none",
+          autoCorrect: false
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.codeText,
+          children: searchQuery ? highlightSearch(formattedData) : formattedData
+        })
+      })
+    })]
+  });
+}
+DataInspector.Json = function JsonViewer({
+  data,
+  searchable,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DataInspector, {
+    data: data,
+    syntax: "json",
+    mode: "view",
+    searchable: searchable,
+    style: style
+  });
+};
+DataInspector.Editable = function Editable({
+  data,
+  onSave,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DataInspector, {
+    data: data,
+    mode: "edit",
+    onEdit: onSave,
+    style: style
+  });
+};
+DataInspector.Diff = function DiffView({
+  oldData,
+  newData,
+  style
+}) {
+  const [showMode, setShowMode] = (0, _react.useState)("diff");
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.diffControls,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.diffButton, showMode === "old" && styles.diffButtonActive],
+        onPress: () => setShowMode("old"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.diffButtonText,
+          children: "Old"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.diffButton, showMode === "new" && styles.diffButtonActive],
+        onPress: () => setShowMode("new"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.diffButtonText,
+          children: "New"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: [styles.diffButton, showMode === "diff" && styles.diffButtonActive],
+        onPress: () => setShowMode("diff"),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.diffButtonText,
+          children: "Diff"
+        })
+      })]
+    }), showMode === "old" && /*#__PURE__*/(0, _jsxRuntime.jsx)(DataInspector, {
+      data: oldData,
+      searchable: false
+    }), showMode === "new" && /*#__PURE__*/(0, _jsxRuntime.jsx)(DataInspector, {
+      data: newData,
+      searchable: false
+    }), showMode === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.diffContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.diffPane,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.diffPaneTitle,
+          children: "Old"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataInspector, {
+          data: oldData,
+          searchable: false
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.diffPane,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.diffPaneTitle,
+          children: "New"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DataInspector, {
+          data: newData,
+          searchable: false
+        })]
+      })]
+    })]
+  });
+};
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    backgroundColor: _index2.gameUIColors.background,
+    borderRadius: 8,
+    overflow: "hidden"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _index2.gameUIColors.border + "20"
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _index2.gameUIColors.text
+  },
+  controls: {
+    flexDirection: "row",
+    gap: 8
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _index2.gameUIColors.panel,
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    gap: 4
+  },
+  searchInput: {
+    fontSize: 11,
+    color: _index2.gameUIColors.text,
+    minWidth: 100,
+    paddingVertical: 4
+  },
+  editButton: {
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: _index2.gameUIColors.primary + "20"
+  },
+  cancelButton: {
+    padding: 4,
+    borderRadius: 4,
+    backgroundColor: _index2.gameUIColors.error + "20"
+  },
+  scrollView: {
+    maxHeight: 300
+  },
+  codeText: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: _index2.gameUIColors.text,
+    padding: 12,
+    lineHeight: 16
+  },
+  editor: {
+    fontFamily: "monospace",
+    fontSize: 11,
+    color: _index2.gameUIColors.text,
+    padding: 12,
+    lineHeight: 16,
+    minHeight: 200
+  },
+  highlight: {
+    backgroundColor: _index2.gameUIColors.warning + "40",
+    color: _index2.gameUIColors.text
+  },
+  diffControls: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 8
+  },
+  diffButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 4,
+    backgroundColor: _index2.gameUIColors.panel
+  },
+  diffButtonActive: {
+    backgroundColor: _index2.gameUIColors.primary
+  },
+  diffButtonText: {
+    fontSize: 11,
+    color: _index2.gameUIColors.text,
+    fontWeight: "500"
+  },
+  diffContainer: {
+    flexDirection: "row",
+    gap: 8
+  },
+  diffPane: {
+    flex: 1
+  },
+  diffPaneTitle: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: _index2.gameUIColors.secondary,
+    padding: 8,
+    textTransform: "uppercase"
+  }
+});

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function Divider() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: 1,
+      height: 12,
+      backgroundColor: "rgba(107, 114, 128, 0.4)",
+      flexShrink: 0
+    }
+  });
+}