@buoy-gg/redux 2.1.10 → 2.1.12

package/lib/commonjs/redux/components/ReduxActionDetailView.js

@@ -1 +1,401 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ReduxActionDetailView=ReduxActionDetailView;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_jsxRuntime=require("react/jsx-runtime");function ReduxActionDetailView({action:e}){const[t,a]=(0,_react.useState)("action"),i=new Date(e.timestamp).toLocaleTimeString();return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.header,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerContent,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.actionType,numberOfLines:2,children:e.type}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerMeta,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.metaText,children:i}),void 0!==e.duration&&(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.durationText,children:[e.duration.toFixed(2),"ms"]}),e.hasStateChange&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.changeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.changeBadgeText,children:"State Changed"})})]})]}),(0,_jsxRuntime.jsx)(_sharedUi.CopyButton,{value:JSON.stringify({type:e.type,payload:e.payload,timestamp:e.timestamp,duration:e.duration,hasStateChange:e.hasStateChange},null,2),size:16})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.tabContainer,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:[{key:"action",label:"Action"},{key:"state",label:"State"},{key:"diff",label:"Diff"}],activeTab:t,onTabChange:e=>a(e)})}),(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:styles.content,showsVerticalScrollIndicator:!0,children:["action"===t&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsx)(_sharedUi.CollapsibleSection,{title:"Payload",defaultOpen:!0,children:void 0!==e.payload?(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.payload}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:"No payload"})}),(0,_jsxRuntime.jsx)(_sharedUi.CollapsibleSection,{title:"Full Action",defaultOpen:!1,children:(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.action})})]}),"state"===t&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsx)(_sharedUi.CollapsibleSection,{title:"Previous State",defaultOpen:!1,children:(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.prevState})}),(0,_jsxRuntime.jsx)(_sharedUi.CollapsibleSection,{title:"Next State",defaultOpen:!0,children:(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.nextState})})]}),"diff"===t&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.section,children:e.hasStateChange?(0,_jsxRuntime.jsx)(StateDiff,{prevState:e.prevState,nextState:e.nextState}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noChangeContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noChangeText,children:"No state changes from this action"})})})]})]})}function StateDiff({prevState:e,nextState:t}){const a=findChanges(e,t);return 0===a.length?(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.noChangeContainer,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.noChangeText,children:"No differences detected"})}):(0,_jsxRuntime.jsx)(_reactNative.View,{children:a.map((e,t)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffItem,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.diffTypeBadge,{backgroundColor:"added"===e.type?_sharedUi.macOSColors.semantic.successBackground:"removed"===e.type?_sharedUi.macOSColors.semantic.errorBackground:_sharedUi.macOSColors.semantic.warningBackground}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.diffTypeText,{color:"added"===e.type?_sharedUi.macOSColors.semantic.success:"removed"===e.type?_sharedUi.macOSColors.semantic.error:_sharedUi.macOSColors.semantic.warning}],children:e.type.toUpperCase()})}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.diffPath,children:e.path})]}),"modified"===e.type&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffValues,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffValue,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.diffLabel,children:"Before:"}),(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.oldValue})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffValue,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.diffLabel,children:"After:"}),(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.newValue})]})]}),"added"===e.type&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffValue,children:(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.newValue})}),"removed"===e.type&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffValue,children:(0,_jsxRuntime.jsx)(_sharedUi.DataInspector,{data:e.oldValue})})]},t))})}function findChanges(e,t,a=""){const i=[];if("object"!=typeof e||"object"!=typeof t)return e!==t&&i.push({type:"modified",path:a||"root",oldValue:e,newValue:t}),i;if(null===e||null===t)return e!==t&&i.push({type:"modified",path:a||"root",oldValue:e,newValue:t}),i;const s=e,n=t,r=new Set([...Object.keys(s),...Object.keys(n)]);for(const e of r){const t=a?`${a}.${e}`:e,r=s[e],o=n[e];e in s?e in n?r!==o&&("object"!=typeof r||"object"!=typeof o||null===r||null===o||Array.isArray(r)||Array.isArray(o)?i.push({type:"modified",path:t,oldValue:r,newValue:o}):t.split(".").length<3?i.push(...findChanges(r,o,t)):i.push({type:"modified",path:t,oldValue:r,newValue:o})):i.push({type:"removed",path:t,oldValue:r}):i.push({type:"added",path:t,newValue:o})}return i}const styles=_reactNative.StyleSheet.create({container:{flex:1},header:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:12,backgroundColor:_sharedUi.macOSColors.background.card,borderBottomWidth:1,borderBottomColor:_sharedUi.macOSColors.border.default},headerContent:{flex:1,marginRight:12},actionType:{fontSize:14,fontWeight:"600",color:_sharedUi.macOSColors.text.primary,fontFamily:"monospace",marginBottom:6},headerMeta:{flexDirection:"row",alignItems:"center",gap:12},metaText:{fontSize:11,color:_sharedUi.macOSColors.text.muted},durationText:{fontSize:11,color:_sharedUi.macOSColors.text.muted,fontFamily:"monospace"},changeBadge:{backgroundColor:_sharedUi.macOSColors.semantic.warningBackground,paddingHorizontal:6,paddingVertical:2,borderRadius:4},changeBadgeText:{fontSize:10,color:_sharedUi.macOSColors.semantic.warning,fontWeight:"600"},tabContainer:{paddingHorizontal:12,paddingVertical:8},content:{flex:1},section:{paddingHorizontal:12,paddingBottom:20},emptyText:{fontSize:12,color:_sharedUi.macOSColors.text.muted,fontStyle:"italic",padding:8},noChangeContainer:{padding:20,alignItems:"center"},noChangeText:{fontSize:13,color:_sharedUi.macOSColors.text.muted},diffItem:{marginBottom:12,backgroundColor:_sharedUi.macOSColors.background.card,borderRadius:8,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,overflow:"hidden"},diffHeader:{flexDirection:"row",alignItems:"center",gap:8,padding:8,borderBottomWidth:1,borderBottomColor:_sharedUi.macOSColors.border.default},diffTypeBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},diffTypeText:{fontSize:10,fontWeight:"700"},diffPath:{fontSize:12,color:_sharedUi.macOSColors.text.primary,fontFamily:"monospace"},diffValues:{padding:8,gap:8},diffValue:{padding:8},diffLabel:{fontSize:11,color:_sharedUi.macOSColors.text.muted,marginBottom:4,fontWeight:"600"}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReduxActionDetailView = ReduxActionDetailView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Detail view for inspecting a single Redux action
+ */
+
+function ReduxActionDetailView({
+  action
+}) {
+  const [activeTab, setActiveTab] = (0, _react.useState)("action");
+  const tabs = [{
+    key: "action",
+    label: "Action"
+  }, {
+    key: "state",
+    label: "State"
+  }, {
+    key: "diff",
+    label: "Diff"
+  }];
+
+  // Format timestamp
+  const formattedTime = new Date(action.timestamp).toLocaleTimeString();
+
+  // Generate copy text for the action
+  const getCopyText = () => {
+    return JSON.stringify({
+      type: action.type,
+      payload: action.payload,
+      timestamp: action.timestamp,
+      duration: action.duration,
+      hasStateChange: action.hasStateChange
+    }, null, 2);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.headerContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.actionType,
+          numberOfLines: 2,
+          children: action.type
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headerMeta,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.metaText,
+            children: formattedTime
+          }), action.duration !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+            style: styles.durationText,
+            children: [action.duration.toFixed(2), "ms"]
+          }), action.hasStateChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.changeBadge,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.changeBadgeText,
+              children: "State Changed"
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CopyButton, {
+        value: getCopyText(),
+        size: 16
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.tabContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
+        tabs: tabs,
+        activeTab: activeTab,
+        onTabChange: tab => setActiveTab(tab)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+      style: styles.content,
+      showsVerticalScrollIndicator: true,
+      children: [activeTab === "action" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+          title: "Payload",
+          defaultOpen: true,
+          children: action.payload !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+            data: action.payload
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.emptyText,
+            children: "No payload"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+          title: "Full Action",
+          defaultOpen: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+            data: action.action
+          })
+        })]
+      }), activeTab === "state" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.section,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+          title: "Previous State",
+          defaultOpen: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+            data: action.prevState
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CollapsibleSection, {
+          title: "Next State",
+          defaultOpen: true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+            data: action.nextState
+          })
+        })]
+      }), activeTab === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.section,
+        children: action.hasStateChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StateDiff, {
+          prevState: action.prevState,
+          nextState: action.nextState
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.noChangeContainer,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.noChangeText,
+            children: "No state changes from this action"
+          })
+        })
+      })]
+    })]
+  });
+}
+
+/**
+ * Component to show state diff
+ */
+function StateDiff({
+  prevState,
+  nextState
+}) {
+  // Simple diff - find changed keys at top level
+  const changes = findChanges(prevState, nextState);
+  if (changes.length === 0) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.noChangeContainer,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.noChangeText,
+        children: "No differences detected"
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: changes.map((change, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.diffItem,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.diffHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.diffTypeBadge, {
+            backgroundColor: change.type === "added" ? _sharedUi.macOSColors.semantic.successBackground : change.type === "removed" ? _sharedUi.macOSColors.semantic.errorBackground : _sharedUi.macOSColors.semantic.warningBackground
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.diffTypeText, {
+              color: change.type === "added" ? _sharedUi.macOSColors.semantic.success : change.type === "removed" ? _sharedUi.macOSColors.semantic.error : _sharedUi.macOSColors.semantic.warning
+            }],
+            children: change.type.toUpperCase()
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.diffPath,
+          children: change.path
+        })]
+      }), change.type === "modified" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.diffValues,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.diffValue,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.diffLabel,
+            children: "Before:"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+            data: change.oldValue
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.diffValue,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.diffLabel,
+            children: "After:"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+            data: change.newValue
+          })]
+        })]
+      }), change.type === "added" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.diffValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+          data: change.newValue
+        })
+      }), change.type === "removed" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.diffValue,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DataInspector, {
+          data: change.oldValue
+        })
+      })]
+    }, index))
+  });
+}
+/**
+ * Find changes between two state objects
+ */
+function findChanges(prevState, nextState, path = "") {
+  const changes = [];
+
+  // Handle primitives
+  if (typeof prevState !== "object" || typeof nextState !== "object") {
+    if (prevState !== nextState) {
+      changes.push({
+        type: "modified",
+        path: path || "root",
+        oldValue: prevState,
+        newValue: nextState
+      });
+    }
+    return changes;
+  }
+
+  // Handle null
+  if (prevState === null || nextState === null) {
+    if (prevState !== nextState) {
+      changes.push({
+        type: "modified",
+        path: path || "root",
+        oldValue: prevState,
+        newValue: nextState
+      });
+    }
+    return changes;
+  }
+  const prevObj = prevState;
+  const nextObj = nextState;
+
+  // Find all keys
+  const allKeys = new Set([...Object.keys(prevObj), ...Object.keys(nextObj)]);
+  for (const key of allKeys) {
+    const newPath = path ? `${path}.${key}` : key;
+    const prevValue = prevObj[key];
+    const nextValue = nextObj[key];
+    if (!(key in prevObj)) {
+      // Key was added
+      changes.push({
+        type: "added",
+        path: newPath,
+        newValue: nextValue
+      });
+    } else if (!(key in nextObj)) {
+      // Key was removed
+      changes.push({
+        type: "removed",
+        path: newPath,
+        oldValue: prevValue
+      });
+    } else if (prevValue !== nextValue) {
+      // Value changed - check if we should recurse
+      if (typeof prevValue === "object" && typeof nextValue === "object" && prevValue !== null && nextValue !== null && !Array.isArray(prevValue) && !Array.isArray(nextValue)) {
+        // Recurse into objects (but limit depth)
+        if (newPath.split(".").length < 3) {
+          changes.push(...findChanges(prevValue, nextValue, newPath));
+        } else {
+          changes.push({
+            type: "modified",
+            path: newPath,
+            oldValue: prevValue,
+            newValue: nextValue
+          });
+        }
+      } else {
+        changes.push({
+          type: "modified",
+          path: newPath,
+          oldValue: prevValue,
+          newValue: nextValue
+        });
+      }
+    }
+  }
+  return changes;
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default
+  },
+  headerContent: {
+    flex: 1,
+    marginRight: 12
+  },
+  actionType: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.primary,
+    fontFamily: "monospace",
+    marginBottom: 6
+  },
+  headerMeta: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  metaText: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.muted
+  },
+  durationText: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.muted,
+    fontFamily: "monospace"
+  },
+  changeBadge: {
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  changeBadgeText: {
+    fontSize: 10,
+    color: _sharedUi.macOSColors.semantic.warning,
+    fontWeight: "600"
+  },
+  tabContainer: {
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  content: {
+    flex: 1
+  },
+  section: {
+    paddingHorizontal: 12,
+    paddingBottom: 20
+  },
+  emptyText: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.muted,
+    fontStyle: "italic",
+    padding: 8
+  },
+  noChangeContainer: {
+    padding: 20,
+    alignItems: "center"
+  },
+  noChangeText: {
+    fontSize: 13,
+    color: _sharedUi.macOSColors.text.muted
+  },
+  diffItem: {
+    marginBottom: 12,
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    overflow: "hidden"
+  },
+  diffHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default
+  },
+  diffTypeBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  diffTypeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  diffPath: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  diffValues: {
+    padding: 8,
+    gap: 8
+  },
+  diffValue: {
+    padding: 8
+  },
+  diffLabel: {
+    fontSize: 11,
+    color: _sharedUi.macOSColors.text.muted,
+    marginBottom: 4,
+    fontWeight: "600"
+  }
+});