@buoy-gg/redux 7.0.40 → 7.0.42

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