@buoy-gg/redux 2.1.12 → 2.1.13

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

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