@buoy-gg/jotai 3.0.1 → 4.0.1

package/lib/module/jotai/components/JotaiAtomChangeItem.js

@@ -1 +1,109 @@
-"use strict";import{View,Text,StyleSheet}from"react-native";import{CompactRow,buoyColors,Zap,useRelativeTime}from"@buoy-gg/shared-ui";import{jotaiStateStore}from"../utils/jotaiStateStore";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function getStatusLabel(e,t){return"initial"===e?"Initial":t.charAt(0).toUpperCase()+t.slice(1)}function getCategoryColor(e,t){return"initial"===e?buoyColors.textMuted:jotaiStateStore.getAtomColor(t)}function formatCompact(e,t=20){if(void 0===e)return"undefined";if(null===e)return"null";if("boolean"==typeof e)return String(e);if("number"==typeof e)return String(e);if("string"==typeof e)return`"${e.length>t?e.slice(0,t-1)+"…":e}"`;if(Array.isArray(e))return 0===e.length?"[]":`[${e.length} item${1===e.length?"":"s"}]`;if("object"==typeof e){const t=Object.keys(e);return 0===t.length?"{}":`{${t.slice(0,2).join(", ")}${t.length>2?"…":""}}`}return String(e).slice(0,t)}function getSublabel(e){return e.hasValueChange?`${formatCompact(e.prevValue)} → ${formatCompact(e.nextValue)}`:"no change"}function getBadgeText(e){return"initial"===e.category?"INIT":"WRITE"}function getPrimaryText(e){return e.changedKeys.length>0&&e.changedKeys.length<=3?e.changedKeys.join(", "):e.changedKeys.length>3?`${e.changedKeys.slice(0,2).join(", ")} +${e.changedKeys.length-2}`:e.valuePreview||"atom()"}export function JotaiAtomChangeItem({change:e,onPress:t}){const o=getCategoryColor(e.category,e.atomLabel),a=getStatusLabel(e.category,e.atomLabel),n=getSublabel(e),r=getPrimaryText(e),i=getBadgeText(e),s=useRelativeTime(e.timestamp),l=e.hasValueChange?_jsxs(View,{style:styles.badgeContainer,children:[_jsx(Text,{style:[styles.badgeText,{color:o}],children:i}),_jsx(View,{style:styles.changeBadge,children:_jsx(Zap,{size:12,color:buoyColors.warning})})]}):void 0;return _jsx(CompactRow,{statusDotColor:o,statusLabel:a,statusSublabel:n,primaryText:r,bottomRightText:s,customBadge:l,badgeText:l?void 0:i,badgeColor:o,showChevron:!0,onPress:()=>t(e)})}const styles=StyleSheet.create({badgeContainer:{flexDirection:"row",alignItems:"center",gap:4},badgeText:{fontSize:11,fontWeight:"600",fontFamily:"monospace"},changeBadge:{paddingHorizontal:4}});
+"use strict";
+
+/**
+ * Compact list item for displaying a Jotai atom change
+ *
+ * Mirrors ZustandStateChangeItem.tsx — uses shared CompactRow for consistent styling
+ */
+
+import { View, Text, StyleSheet } from "react-native";
+import { CompactRow, buoyColors, Zap, useRelativeTime } from "@buoy-gg/shared-ui";
+import { jotaiStateStore } from "../utils/jotaiStateStore";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getStatusLabel(category, atomLabel) {
+  if (category === "initial") return "Initial";
+  return atomLabel.charAt(0).toUpperCase() + atomLabel.slice(1);
+}
+function getCategoryColor(category, atomLabel) {
+  if (category === "initial") return buoyColors.textMuted;
+  return jotaiStateStore.getAtomColor(atomLabel);
+}
+function formatCompact(value, maxLen = 20) {
+  if (value === undefined) return "undefined";
+  if (value === null) return "null";
+  if (typeof value === "boolean") return String(value);
+  if (typeof value === "number") return String(value);
+  if (typeof value === "string") {
+    const truncated = value.length > maxLen ? value.slice(0, maxLen - 1) + "…" : value;
+    return `"${truncated}"`;
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0 ? "[]" : `[${value.length} item${value.length === 1 ? "" : "s"}]`;
+  }
+  if (typeof value === "object") {
+    const keys = Object.keys(value);
+    if (keys.length === 0) return "{}";
+    return `{${keys.slice(0, 2).join(", ")}${keys.length > 2 ? "…" : ""}}`;
+  }
+  return String(value).slice(0, maxLen);
+}
+function getSublabel(change) {
+  if (!change.hasValueChange) return "no change";
+  return `${formatCompact(change.prevValue)} → ${formatCompact(change.nextValue)}`;
+}
+function getBadgeText(change) {
+  if (change.category === "initial") return "INIT";
+  return "WRITE";
+}
+function getPrimaryText(change) {
+  if (change.changedKeys.length > 0 && change.changedKeys.length <= 3) {
+    return change.changedKeys.join(", ");
+  }
+  if (change.changedKeys.length > 3) {
+    return `${change.changedKeys.slice(0, 2).join(", ")} +${change.changedKeys.length - 2}`;
+  }
+  return change.valuePreview || "atom()";
+}
+export function JotaiAtomChangeItem({
+  change,
+  onPress
+}) {
+  const statusColor = getCategoryColor(change.category, change.atomLabel);
+  const statusLabel = getStatusLabel(change.category, change.atomLabel);
+  const sublabel = getSublabel(change);
+  const primaryText = getPrimaryText(change);
+  const badgeText = getBadgeText(change);
+  const relativeTime = useRelativeTime(change.timestamp);
+  const customBadge = change.hasValueChange ? /*#__PURE__*/_jsxs(View, {
+    style: styles.badgeContainer,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.badgeText, {
+        color: statusColor
+      }],
+      children: badgeText
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.changeBadge,
+      children: /*#__PURE__*/_jsx(Zap, {
+        size: 12,
+        color: buoyColors.warning
+      })
+    })]
+  }) : undefined;
+  return /*#__PURE__*/_jsx(CompactRow, {
+    statusDotColor: statusColor,
+    statusLabel: statusLabel,
+    statusSublabel: sublabel,
+    primaryText: primaryText,
+    bottomRightText: relativeTime,
+    customBadge: customBadge,
+    badgeText: customBadge ? undefined : badgeText,
+    badgeColor: statusColor,
+    showChevron: true,
+    onPress: () => onPress(change)
+  });
+}
+const styles = StyleSheet.create({
+  badgeContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4
+  },
+  badgeText: {
+    fontSize: 11,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  changeBadge: {
+    paddingHorizontal: 4
+  }
+});