@buoy-gg/redux 2.1.10 → 2.1.12

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

@@ -1 +1,397 @@
-"use strict";import{useState}from"react";import{View,Text,StyleSheet,ScrollView}from"react-native";import{macOSColors,TabSelector,DataInspector,CollapsibleSection,CopyButton}from"@buoy-gg/shared-ui";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export function ReduxActionDetailView({action:e}){const[t,a]=useState("action"),o=new Date(e.timestamp).toLocaleTimeString();return _jsxs(View,{style:styles.container,children:[_jsxs(View,{style:styles.header,children:[_jsxs(View,{style:styles.headerContent,children:[_jsx(Text,{style:styles.actionType,numberOfLines:2,children:e.type}),_jsxs(View,{style:styles.headerMeta,children:[_jsx(Text,{style:styles.metaText,children:o}),void 0!==e.duration&&_jsxs(Text,{style:styles.durationText,children:[e.duration.toFixed(2),"ms"]}),e.hasStateChange&&_jsx(View,{style:styles.changeBadge,children:_jsx(Text,{style:styles.changeBadgeText,children:"State Changed"})})]})]}),_jsx(CopyButton,{value:JSON.stringify({type:e.type,payload:e.payload,timestamp:e.timestamp,duration:e.duration,hasStateChange:e.hasStateChange},null,2),size:16})]}),_jsx(View,{style:styles.tabContainer,children:_jsx(TabSelector,{tabs:[{key:"action",label:"Action"},{key:"state",label:"State"},{key:"diff",label:"Diff"}],activeTab:t,onTabChange:e=>a(e)})}),_jsxs(ScrollView,{style:styles.content,showsVerticalScrollIndicator:!0,children:["action"===t&&_jsxs(View,{style:styles.section,children:[_jsx(CollapsibleSection,{title:"Payload",defaultOpen:!0,children:void 0!==e.payload?_jsx(DataInspector,{data:e.payload}):_jsx(Text,{style:styles.emptyText,children:"No payload"})}),_jsx(CollapsibleSection,{title:"Full Action",defaultOpen:!1,children:_jsx(DataInspector,{data:e.action})})]}),"state"===t&&_jsxs(View,{style:styles.section,children:[_jsx(CollapsibleSection,{title:"Previous State",defaultOpen:!1,children:_jsx(DataInspector,{data:e.prevState})}),_jsx(CollapsibleSection,{title:"Next State",defaultOpen:!0,children:_jsx(DataInspector,{data:e.nextState})})]}),"diff"===t&&_jsx(View,{style:styles.section,children:e.hasStateChange?_jsx(StateDiff,{prevState:e.prevState,nextState:e.nextState}):_jsx(View,{style:styles.noChangeContainer,children:_jsx(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?_jsx(View,{style:styles.noChangeContainer,children:_jsx(Text,{style:styles.noChangeText,children:"No differences detected"})}):_jsx(View,{children:a.map((e,t)=>_jsxs(View,{style:styles.diffItem,children:[_jsxs(View,{style:styles.diffHeader,children:[_jsx(View,{style:[styles.diffTypeBadge,{backgroundColor:"added"===e.type?macOSColors.semantic.successBackground:"removed"===e.type?macOSColors.semantic.errorBackground:macOSColors.semantic.warningBackground}],children:_jsx(Text,{style:[styles.diffTypeText,{color:"added"===e.type?macOSColors.semantic.success:"removed"===e.type?macOSColors.semantic.error:macOSColors.semantic.warning}],children:e.type.toUpperCase()})}),_jsx(Text,{style:styles.diffPath,children:e.path})]}),"modified"===e.type&&_jsxs(View,{style:styles.diffValues,children:[_jsxs(View,{style:styles.diffValue,children:[_jsx(Text,{style:styles.diffLabel,children:"Before:"}),_jsx(DataInspector,{data:e.oldValue})]}),_jsxs(View,{style:styles.diffValue,children:[_jsx(Text,{style:styles.diffLabel,children:"After:"}),_jsx(DataInspector,{data:e.newValue})]})]}),"added"===e.type&&_jsx(View,{style:styles.diffValue,children:_jsx(DataInspector,{data:e.newValue})}),"removed"===e.type&&_jsx(View,{style:styles.diffValue,children:_jsx(DataInspector,{data:e.oldValue})})]},t))})}function findChanges(e,t,a=""){const o=[];if("object"!=typeof e||"object"!=typeof t)return e!==t&&o.push({type:"modified",path:a||"root",oldValue:e,newValue:t}),o;if(null===e||null===t)return e!==t&&o.push({type:"modified",path:a||"root",oldValue:e,newValue:t}),o;const s=e,n=t,l=new Set([...Object.keys(s),...Object.keys(n)]);for(const e of l){const t=a?`${a}.${e}`:e,l=s[e],i=n[e];e in s?e in n?l!==i&&("object"!=typeof l||"object"!=typeof i||null===l||null===i||Array.isArray(l)||Array.isArray(i)?o.push({type:"modified",path:t,oldValue:l,newValue:i}):t.split(".").length<3?o.push(...findChanges(l,i,t)):o.push({type:"modified",path:t,oldValue:l,newValue:i})):o.push({type:"removed",path:t,oldValue:l}):o.push({type:"added",path:t,newValue:i})}return o}const styles=StyleSheet.create({container:{flex:1},header:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:12,backgroundColor:macOSColors.background.card,borderBottomWidth:1,borderBottomColor:macOSColors.border.default},headerContent:{flex:1,marginRight:12},actionType:{fontSize:14,fontWeight:"600",color:macOSColors.text.primary,fontFamily:"monospace",marginBottom:6},headerMeta:{flexDirection:"row",alignItems:"center",gap:12},metaText:{fontSize:11,color:macOSColors.text.muted},durationText:{fontSize:11,color:macOSColors.text.muted,fontFamily:"monospace"},changeBadge:{backgroundColor:macOSColors.semantic.warningBackground,paddingHorizontal:6,paddingVertical:2,borderRadius:4},changeBadgeText:{fontSize:10,color:macOSColors.semantic.warning,fontWeight:"600"},tabContainer:{paddingHorizontal:12,paddingVertical:8},content:{flex:1},section:{paddingHorizontal:12,paddingBottom:20},emptyText:{fontSize:12,color:macOSColors.text.muted,fontStyle:"italic",padding:8},noChangeContainer:{padding:20,alignItems:"center"},noChangeText:{fontSize:13,color:macOSColors.text.muted},diffItem:{marginBottom:12,backgroundColor:macOSColors.background.card,borderRadius:8,borderWidth:1,borderColor:macOSColors.border.default,overflow:"hidden"},diffHeader:{flexDirection:"row",alignItems:"center",gap:8,padding:8,borderBottomWidth:1,borderBottomColor:macOSColors.border.default},diffTypeBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},diffTypeText:{fontSize:10,fontWeight:"700"},diffPath:{fontSize:12,color:macOSColors.text.primary,fontFamily:"monospace"},diffValues:{padding:8,gap:8},diffValue:{padding:8},diffLabel:{fontSize:11,color:macOSColors.text.muted,marginBottom:4,fontWeight:"600"}});
+"use strict";
+
+/**
+ * Detail view for inspecting a single Redux action
+ */
+
+import { useState } from "react";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { macOSColors, TabSelector, DataInspector, CollapsibleSection, CopyButton } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ReduxActionDetailView({
+  action
+}) {
+  const [activeTab, setActiveTab] = 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__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerContent,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.actionType,
+          numberOfLines: 2,
+          children: action.type
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.headerMeta,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.metaText,
+            children: formattedTime
+          }), action.duration !== undefined && /*#__PURE__*/_jsxs(Text, {
+            style: styles.durationText,
+            children: [action.duration.toFixed(2), "ms"]
+          }), action.hasStateChange && /*#__PURE__*/_jsx(View, {
+            style: styles.changeBadge,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.changeBadgeText,
+              children: "State Changed"
+            })
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(CopyButton, {
+        value: getCopyText(),
+        size: 16
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.tabContainer,
+      children: /*#__PURE__*/_jsx(TabSelector, {
+        tabs: tabs,
+        activeTab: activeTab,
+        onTabChange: tab => setActiveTab(tab)
+      })
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.content,
+      showsVerticalScrollIndicator: true,
+      children: [activeTab === "action" && /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(CollapsibleSection, {
+          title: "Payload",
+          defaultOpen: true,
+          children: action.payload !== undefined ? /*#__PURE__*/_jsx(DataInspector, {
+            data: action.payload
+          }) : /*#__PURE__*/_jsx(Text, {
+            style: styles.emptyText,
+            children: "No payload"
+          })
+        }), /*#__PURE__*/_jsx(CollapsibleSection, {
+          title: "Full Action",
+          defaultOpen: false,
+          children: /*#__PURE__*/_jsx(DataInspector, {
+            data: action.action
+          })
+        })]
+      }), activeTab === "state" && /*#__PURE__*/_jsxs(View, {
+        style: styles.section,
+        children: [/*#__PURE__*/_jsx(CollapsibleSection, {
+          title: "Previous State",
+          defaultOpen: false,
+          children: /*#__PURE__*/_jsx(DataInspector, {
+            data: action.prevState
+          })
+        }), /*#__PURE__*/_jsx(CollapsibleSection, {
+          title: "Next State",
+          defaultOpen: true,
+          children: /*#__PURE__*/_jsx(DataInspector, {
+            data: action.nextState
+          })
+        })]
+      }), activeTab === "diff" && /*#__PURE__*/_jsx(View, {
+        style: styles.section,
+        children: action.hasStateChange ? /*#__PURE__*/_jsx(StateDiff, {
+          prevState: action.prevState,
+          nextState: action.nextState
+        }) : /*#__PURE__*/_jsx(View, {
+          style: styles.noChangeContainer,
+          children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
+      style: styles.noChangeContainer,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.noChangeText,
+        children: "No differences detected"
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    children: changes.map((change, index) => /*#__PURE__*/_jsxs(View, {
+      style: styles.diffItem,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.diffHeader,
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.diffTypeBadge, {
+            backgroundColor: change.type === "added" ? macOSColors.semantic.successBackground : change.type === "removed" ? macOSColors.semantic.errorBackground : macOSColors.semantic.warningBackground
+          }],
+          children: /*#__PURE__*/_jsx(Text, {
+            style: [styles.diffTypeText, {
+              color: change.type === "added" ? macOSColors.semantic.success : change.type === "removed" ? macOSColors.semantic.error : macOSColors.semantic.warning
+            }],
+            children: change.type.toUpperCase()
+          })
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.diffPath,
+          children: change.path
+        })]
+      }), change.type === "modified" && /*#__PURE__*/_jsxs(View, {
+        style: styles.diffValues,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.diffValue,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.diffLabel,
+            children: "Before:"
+          }), /*#__PURE__*/_jsx(DataInspector, {
+            data: change.oldValue
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.diffValue,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.diffLabel,
+            children: "After:"
+          }), /*#__PURE__*/_jsx(DataInspector, {
+            data: change.newValue
+          })]
+        })]
+      }), change.type === "added" && /*#__PURE__*/_jsx(View, {
+        style: styles.diffValue,
+        children: /*#__PURE__*/_jsx(DataInspector, {
+          data: change.newValue
+        })
+      }), change.type === "removed" && /*#__PURE__*/_jsx(View, {
+        style: styles.diffValue,
+        children: /*#__PURE__*/_jsx(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 = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: macOSColors.background.card,
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default
+  },
+  headerContent: {
+    flex: 1,
+    marginRight: 12
+  },
+  actionType: {
+    fontSize: 14,
+    fontWeight: "600",
+    color: macOSColors.text.primary,
+    fontFamily: "monospace",
+    marginBottom: 6
+  },
+  headerMeta: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  metaText: {
+    fontSize: 11,
+    color: macOSColors.text.muted
+  },
+  durationText: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    fontFamily: "monospace"
+  },
+  changeBadge: {
+    backgroundColor: macOSColors.semantic.warningBackground,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  changeBadgeText: {
+    fontSize: 10,
+    color: macOSColors.semantic.warning,
+    fontWeight: "600"
+  },
+  tabContainer: {
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  content: {
+    flex: 1
+  },
+  section: {
+    paddingHorizontal: 12,
+    paddingBottom: 20
+  },
+  emptyText: {
+    fontSize: 12,
+    color: macOSColors.text.muted,
+    fontStyle: "italic",
+    padding: 8
+  },
+  noChangeContainer: {
+    padding: 20,
+    alignItems: "center"
+  },
+  noChangeText: {
+    fontSize: 13,
+    color: macOSColors.text.muted
+  },
+  diffItem: {
+    marginBottom: 12,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    overflow: "hidden"
+  },
+  diffHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default
+  },
+  diffTypeBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  diffTypeText: {
+    fontSize: 10,
+    fontWeight: "700"
+  },
+  diffPath: {
+    fontSize: 12,
+    color: macOSColors.text.primary,
+    fontFamily: "monospace"
+  },
+  diffValues: {
+    padding: 8,
+    gap: 8
+  },
+  diffValue: {
+    padding: 8
+  },
+  diffLabel: {
+    fontSize: 11,
+    color: macOSColors.text.muted,
+    marginBottom: 4,
+    fontWeight: "600"
+  }
+});