@buoy-gg/redux 2.1.11 → 2.1.13

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

@@ -1,401 +1 @@
-"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"
-  }
-});
+"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"}});