@buoy-gg/react-query 1.7.2

package/lib/module/react-query/components/query-browser/ActionButton.js

@@ -0,0 +1,124 @@
+"use strict";
+
+import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
+import { buoyColors } from "@buoy-gg/shared-ui";
+
+// Define the color mappings using Buoy theme colors
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const buttonConfigs = {
+  btnRefetch: {
+    color: buoyColors.success,
+    backgroundColor: buoyColors.success + "15",
+    borderColor: buoyColors.success + "40",
+    textColor: buoyColors.success
+  },
+  btnInvalidate: {
+    color: buoyColors.warning,
+    backgroundColor: buoyColors.warning + "15",
+    borderColor: buoyColors.warning + "40",
+    textColor: buoyColors.warning
+  },
+  btnReset: {
+    color: buoyColors.textSecondary,
+    backgroundColor: buoyColors.textSecondary + "26",
+    borderColor: buoyColors.textSecondary + "59",
+    textColor: buoyColors.textSecondary
+  },
+  btnRemove: {
+    color: buoyColors.error,
+    backgroundColor: buoyColors.error + "15",
+    borderColor: buoyColors.error + "40",
+    textColor: buoyColors.error
+  },
+  btnTriggerLoading: {
+    color: buoyColors.primary,
+    backgroundColor: buoyColors.primary + "15",
+    borderColor: buoyColors.primary + "40",
+    textColor: buoyColors.primary
+  },
+  btnTriggerLoadiError: {
+    color: buoyColors.textMuted,
+    backgroundColor: buoyColors.textMuted + "26",
+    borderColor: buoyColors.textMuted + "59",
+    textColor: buoyColors.textMuted
+  }
+};
+/** Generic rectangular action button used throughout the query modal footers. */
+export default function ActionButton({
+  onClick,
+  text,
+  _textColorClass,
+  bgColorClass,
+  disabled
+}) {
+  // Get the button configuration
+  const config = buttonConfigs[bgColorClass];
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    "sentry-label": "ignore devtools action button",
+    disabled: disabled,
+    onPress: onClick,
+    style: [styles.button, {
+      backgroundColor: disabled ? buoyColors.textMuted + "1A" : config.backgroundColor,
+      borderColor: disabled ? buoyColors.textMuted + "33" : config.borderColor,
+      opacity: disabled ? 0.5 : 1
+    }],
+    activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: text,
+    accessibilityState: {
+      disabled
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.dot, {
+        backgroundColor: disabled ? buoyColors.textMuted : config.color
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: disabled ? buoyColors.textMuted : config.textColor
+      }],
+      children: text
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    // rectangular button shape
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    height: 25,
+    minWidth: 80,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    marginRight: 6,
+    shadowColor: buoyColors.text,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 2
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace",
+    height: 12
+  }
+});

package/lib/module/react-query/components/query-browser/ClearCacheButton.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import { TouchableOpacity, StyleSheet } from "react-native";
+import { Trash, buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Icon-only button for clearing either the query or mutation cache from the dev tools UI.
+ */
+const ClearCacheButton = ({
+  type,
+  onClear,
+  disabled = false
+}) => {
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    "sentry-label": "ignore devtools clear cache button",
+    style: [styles.button, disabled && styles.disabledButton],
+    onPress: onClear,
+    disabled: disabled,
+    activeOpacity: 0.7,
+    accessibilityLabel: `Clear ${type} cache`,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled
+    },
+    children: /*#__PURE__*/_jsx(Trash, {
+      size: 16,
+      strokeWidth: 2,
+      color: disabled ? buoyColors.textSecondary : buoyColors.warning
+    })
+  });
+};
+const styles = StyleSheet.create({
+  button: {
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    backgroundColor: buoyColors.warning + "15",
+    justifyContent: "center",
+    alignItems: "center",
+    borderWidth: 1,
+    borderColor: buoyColors.warning + "33"
+  },
+  disabledButton: {
+    opacity: 0.5,
+    backgroundColor: buoyColors.textSecondary + "1A",
+    borderColor: buoyColors.textSecondary + "33"
+  }
+});
+export default ClearCacheButton;