@buoy-gg/redux 2.1.10 → 2.1.12

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

@@ -1 +1,380 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ReduxActionDetailContent=ReduxActionDetailContent,exports.ReduxActionDetailFooter=ReduxActionDetailFooter;var _reactNative=require("react-native"),_react=require("react"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_ReduxDetailViewToggle=require("./ReduxDetailViewToggle"),_ReduxActionInfoView=require("./ReduxActionInfoView"),_jsxRuntime=require("react/jsx-runtime");function getActionColor(e){return e.includes("/pending")?_sharedUi.macOSColors.semantic.warning:e.includes("/fulfilled")?_sharedUi.macOSColors.semantic.success:e.includes("/rejected")?_sharedUi.macOSColors.semantic.error:e.startsWith("@@")?_sharedUi.macOSColors.text.muted:_sharedUi.macOSColors.semantic.info}function getActionLabel(e){if(e.includes("/pending"))return"PENDING";if(e.includes("/fulfilled"))return"FULFILLED";if(e.includes("/rejected"))return"REJECTED";if(e.startsWith("@@"))return"INTERNAL";const t=e.split("/");return t[t.length-1]?.toUpperCase()||"ACTION"}function getValueType(e){return null===e?"null":void 0===e?"undefined":Array.isArray(e)?"array":typeof e}function formatTimestamp(e){return new Date(e).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}const DIFF_MODE_TABS=[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}];function ReduxActionDetailContent({action:e,actions:t,selectedIndex:a,onIndexChange:i,disableInternalFooter:r=!1}){const[n,o]=(0,_react.useState)("action"),[s,l]=(0,_react.useState)("tree"),d=t.length,c=getActionColor(e.type),u=getActionLabel(e.type),m=getValueType(e.nextState),x=d-a,_=x-1,g=a<d-1?a+1:null,f=null!==g?t[g]:null,h=(0,_react.useMemo)(()=>({index:g??0,label:_>0?`#${_}`:"Initial",timestamp:f?formatTimestamp(f.timestamp):"",relativeTime:f?(0,_sharedUi.formatRelativeTime)(new Date(f.timestamp)):"state",badge:f?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.actionBadgeSmall,{backgroundColor:`${getActionColor(f.type)}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionTextSmall,{color:getActionColor(f.type)}],children:getActionLabel(f.type)})}):void 0}),[g,f,_]),p=(0,_react.useMemo)(()=>({index:a,label:`#${x}`,timestamp:formatTimestamp(e.timestamp),relativeTime:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.actionBadgeSmall,{backgroundColor:`${c}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionTextSmall,{color:c}],children:u})})}),[a,e.timestamp,c,u,x]),y=(0,_react.useCallback)(()=>{const t=(0,_sharedUi.parseValue)(e.nextState);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentCard,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.valueHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.valueLabel,children:"STATE AFTER ACTION"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.valueHeaderBadges,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.actionBadge,{backgroundColor:`${c}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.actionText,{color:c}],children:u})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.typeText,children:m.toUpperCase()})})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.valueBox,children:"object"!==m&&"array"!==m||!t?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.valueText,children:null===t?"null":void 0===t?"undefined":"string"===m?`"${t}"`:String(t)}):(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:t,showTypeFilter:!1})})]})},[e.nextState,c,u,m]),j=(0,_react.useCallback)(()=>{const t=(0,_sharedUi.parseValue)(e.prevState),a=(0,_sharedUi.parseValue)(e.nextState);return"split"===s?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},showsVerticalScrollIndicator:!0,children:(0,_jsxRuntime.jsx)(_dataViewer.SplitDiffViewer,{oldValue:t,newValue:a,theme:_dataViewer.diffThemes.devToolsDefault,options:{hideLineNumbers:!1,disableWordDiff:!1,showDiffOnly:!1,compareMethod:"words",contextLines:3},showThemeName:!1})}):(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:t,newValue:a})},[e.prevState,e.nextState,s]),b=(0,_react.useCallback)(()=>{i(Math.min(d-1,a+1))},[a,d,i]),R=(0,_react.useCallback)(()=>{i(Math.max(0,a-1))},[a,i]),v=d<=1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsx)(_ReduxDetailViewToggle.ReduxDetailViewToggle,{activeView:n,onViewChange:o,diffDisabled:v}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentArea,children:["action"===n&&(0,_jsxRuntime.jsx)(_ReduxActionInfoView.ReduxActionInfoView,{action:e}),"state"===n&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.stateContainer,children:y()}),"diff"===n&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.DiffModeTabs,{tabs:DIFF_MODE_TABS,activeTab:s,onTabChange:l}),(0,_jsxRuntime.jsx)(_sharedUi.CompareBar,{leftEvent:h,rightEvent:p}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffContent,children:j()})]})]}),!r&&d>1&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:x-1,totalItems:d,onPrevious:b,onNext:R,itemLabel:"Action",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),absolute:!0})]})}function ReduxActionDetailFooter({action:e,actions:t,selectedIndex:a,onIndexChange:i}){const r=t.length;if(r<=1)return null;const n=r-a;return(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:n-1,totalItems:r,onPrevious:()=>i(Math.min(r-1,a+1)),onNext:()=>i(Math.max(0,a-1)),itemLabel:"Action",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp))})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.macOSColors.background.base},contentArea:{flex:1,paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:_sharedUi.macOSColors.background.card,borderRadius:14,padding:14,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color:_sharedUi.macOSColors.text.secondary,fontFamily:"monospace",letterSpacing:.5,fontWeight:"600"},valueHeaderBadges:{flexDirection:"row",alignItems:"center",gap:6},actionBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4},actionText:{fontSize:9,fontWeight:"700",fontFamily:"monospace",letterSpacing:.3},typeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4,backgroundColor:_sharedUi.macOSColors.background.input},typeText:{fontSize:9,fontWeight:"600",color:_sharedUi.macOSColors.text.muted,fontFamily:"monospace"},valueBox:{backgroundColor:_sharedUi.macOSColors.background.base,borderRadius:6,borderWidth:1,borderColor:_sharedUi.macOSColors.border.input,padding:8},valueText:{fontSize:12,color:_sharedUi.macOSColors.text.primary,fontFamily:"monospace",lineHeight:18},diffContainer:{flex:1},diffContent:{flex:1,paddingHorizontal:14},actionBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},actionTextSmall:{fontSize:8,fontWeight:"700",fontFamily:"monospace"}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReduxActionDetailContent = ReduxActionDetailContent;
+exports.ReduxActionDetailFooter = ReduxActionDetailFooter;
+var _reactNative = require("react-native");
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _ReduxDetailViewToggle = require("./ReduxDetailViewToggle");
+var _ReduxActionInfoView = require("./ReduxActionInfoView");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ReduxActionDetailContent
+ *
+ * Enhanced detail view for a Redux action with 3 view modes:
+ * - ACTION: View action details, payload, meta, error
+ * - STATE: View current state after action
+ * - DIFF: Compare prev vs next state
+ */
+
+/**
+ * Get color for action type
+ */
+function getActionColor(type) {
+  if (type.includes("/pending")) return _sharedUi.macOSColors.semantic.warning;
+  if (type.includes("/fulfilled")) return _sharedUi.macOSColors.semantic.success;
+  if (type.includes("/rejected")) return _sharedUi.macOSColors.semantic.error;
+  if (type.startsWith("@@")) return _sharedUi.macOSColors.text.muted;
+  return _sharedUi.macOSColors.semantic.info;
+}
+
+/**
+ * Get short action label
+ */
+function getActionLabel(type) {
+  if (type.includes("/pending")) return "PENDING";
+  if (type.includes("/fulfilled")) return "FULFILLED";
+  if (type.includes("/rejected")) return "REJECTED";
+  if (type.startsWith("@@")) return "INTERNAL";
+  const parts = type.split("/");
+  return parts[parts.length - 1]?.toUpperCase() || "ACTION";
+}
+
+/**
+ * Get the type (object, array, string, etc.)
+ */
+function getValueType(value) {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (Array.isArray(value)) return "array";
+  return typeof value;
+}
+
+/**
+ * Format timestamp for display
+ */
+function formatTimestamp(timestamp) {
+  const date = new Date(timestamp);
+  return date.toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+
+/**
+ * Diff mode tabs configuration
+ */
+const DIFF_MODE_TABS = [{
+  key: "tree",
+  label: "TREE VIEW"
+}, {
+  key: "split",
+  label: "SPLIT VIEW"
+}];
+function ReduxActionDetailContent({
+  action,
+  actions,
+  selectedIndex,
+  onIndexChange,
+  disableInternalFooter = false
+}) {
+  // View state
+  const [activeView, setActiveView] = (0, _react.useState)("action");
+  const [diffMode, setDiffMode] = (0, _react.useState)("tree");
+  const totalActions = actions.length;
+  const actionColor = getActionColor(action.type);
+  const actionLabel = getActionLabel(action.type);
+  const stateType = getValueType((0, _sharedUi.parseValue)(action.nextState));
+
+  // Actions are in reverse chronological order (newest first, oldest last)
+  const chronologicalNumber = totalActions - selectedIndex;
+  const prevChronologicalNumber = chronologicalNumber - 1;
+
+  // Get the previous action in chronological order (which is the NEXT index in the array)
+  const prevActionIndex = selectedIndex < totalActions - 1 ? selectedIndex + 1 : null;
+  const prevAction = prevActionIndex !== null ? actions[prevActionIndex] : null;
+
+  // Compare bar info for diff view
+  const leftEvent = (0, _react.useMemo)(() => ({
+    index: prevActionIndex ?? 0,
+    label: prevChronologicalNumber > 0 ? `#${prevChronologicalNumber}` : "Initial",
+    timestamp: prevAction ? formatTimestamp(prevAction.timestamp) : "",
+    relativeTime: prevAction ? (0, _sharedUi.formatRelativeTime)(new Date(prevAction.timestamp)) : "state",
+    badge: prevAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${getActionColor(prevAction.type)}20`
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.actionTextSmall, {
+          color: getActionColor(prevAction.type)
+        }],
+        children: getActionLabel(prevAction.type)
+      })
+    }) : undefined
+  }), [prevActionIndex, prevAction, prevChronologicalNumber]);
+  const rightEvent = (0, _react.useMemo)(() => ({
+    index: selectedIndex,
+    label: `#${chronologicalNumber}`,
+    timestamp: formatTimestamp(action.timestamp),
+    relativeTime: (0, _sharedUi.formatRelativeTime)(new Date(action.timestamp)),
+    badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.actionBadgeSmall, {
+        backgroundColor: `${actionColor}20`
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.actionTextSmall, {
+          color: actionColor
+        }],
+        children: actionLabel
+      })
+    })
+  }), [selectedIndex, action.timestamp, actionColor, actionLabel, chronologicalNumber]);
+
+  // Render state view
+  const renderStateView = (0, _react.useCallback)(() => {
+    const parsed = (0, _sharedUi.parseValue)(action.nextState);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.contentCard,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.valueHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.valueLabel,
+          children: "STATE AFTER ACTION"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.valueHeaderBadges,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.actionBadge, {
+              backgroundColor: `${actionColor}20`
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.actionText, {
+                color: actionColor
+              }],
+              children: actionLabel
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.typeBadge,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.typeText,
+              children: stateType.toUpperCase()
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.dataViewerContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          title: "",
+          data: parsed,
+          showTypeFilter: true,
+          rawMode: true,
+          initialExpanded: true
+        })
+      })]
+    });
+  }, [action.nextState, actionColor, actionLabel, stateType]);
+
+  // Render diff content
+  const renderDiffContent = (0, _react.useCallback)(() => {
+    const prevState = (0, _sharedUi.parseValue)(action.prevState);
+    const nextState = (0, _sharedUi.parseValue)(action.nextState);
+    if (diffMode === "split") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: {
+          flex: 1
+        },
+        showsVerticalScrollIndicator: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.SplitDiffViewer, {
+          oldValue: prevState,
+          newValue: nextState,
+          theme: _dataViewer.diffThemes.devToolsDefault,
+          options: {
+            hideLineNumbers: false,
+            disableWordDiff: false,
+            showDiffOnly: false,
+            compareMethod: "words",
+            contextLines: 3
+          },
+          showThemeName: false
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.TreeDiffViewer, {
+      oldValue: prevState,
+      newValue: nextState
+    });
+  }, [action.prevState, action.nextState, diffMode]);
+
+  // Navigation handlers
+  const handleFooterPrevious = (0, _react.useCallback)(() => {
+    onIndexChange(Math.min(totalActions - 1, selectedIndex + 1));
+  }, [selectedIndex, totalActions, onIndexChange]);
+  const handleFooterNext = (0, _react.useCallback)(() => {
+    onIndexChange(Math.max(0, selectedIndex - 1));
+  }, [selectedIndex, onIndexChange]);
+  const diffDisabled = totalActions <= 1;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxDetailViewToggle.ReduxDetailViewToggle, {
+      activeView: activeView,
+      onViewChange: setActiveView,
+      diffDisabled: diffDisabled
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.contentArea,
+      children: [activeView === "action" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionInfoView.ReduxActionInfoView, {
+        action: action
+      }), activeView === "state" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.stateContainer,
+        children: renderStateView()
+      }), activeView === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.diffContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DiffModeTabs, {
+          tabs: DIFF_MODE_TABS,
+          activeTab: diffMode,
+          onTabChange: setDiffMode
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompareBar, {
+          leftEvent: leftEvent,
+          rightEvent: rightEvent
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.diffContent,
+          children: renderDiffContent()
+        })]
+      })]
+    }), !disableInternalFooter && totalActions > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+      currentIndex: chronologicalNumber - 1,
+      totalItems: totalActions,
+      onPrevious: handleFooterPrevious,
+      onNext: handleFooterNext,
+      itemLabel: "Action",
+      subtitle: (0, _sharedUi.formatRelativeTime)(new Date(action.timestamp)),
+      absolute: true
+    })]
+  });
+}
+
+/**
+ * External footer component for modal use
+ */
+function ReduxActionDetailFooter({
+  action,
+  actions,
+  selectedIndex,
+  onIndexChange
+}) {
+  const totalActions = actions.length;
+  if (totalActions <= 1) return null;
+  const chronologicalNumber = totalActions - selectedIndex;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+    currentIndex: chronologicalNumber - 1,
+    totalItems: totalActions,
+    onPrevious: () => onIndexChange(Math.min(totalActions - 1, selectedIndex + 1)),
+    onNext: () => onIndexChange(Math.max(0, selectedIndex - 1)),
+    itemLabel: "Action",
+    subtitle: (0, _sharedUi.formatRelativeTime)(new Date(action.timestamp))
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.macOSColors.background.base
+  },
+  contentArea: {
+    flex: 1,
+    paddingBottom: 96
+  },
+  // State view styles
+  stateContainer: {
+    flex: 1,
+    padding: 14
+  },
+  contentCard: {
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  valueHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 8
+  },
+  valueLabel: {
+    fontSize: 10,
+    color: _sharedUi.macOSColors.text.secondary,
+    fontFamily: "monospace",
+    letterSpacing: 0.5,
+    fontWeight: "600"
+  },
+  valueHeaderBadges: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  actionBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  actionText: {
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace",
+    letterSpacing: 0.3
+  },
+  typeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.macOSColors.background.input
+  },
+  typeText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.muted,
+    fontFamily: "monospace"
+  },
+  valueBox: {
+    backgroundColor: _sharedUi.macOSColors.background.base,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.input,
+    padding: 8
+  },
+  valueText: {
+    fontSize: 12,
+    color: _sharedUi.macOSColors.text.primary,
+    fontFamily: "monospace",
+    lineHeight: 18
+  },
+  // Diff view styles
+  diffContainer: {
+    flex: 1
+  },
+  diffContent: {
+    flex: 1,
+    paddingHorizontal: 14
+  },
+  // Action badges for compare bar
+  actionBadgeSmall: {
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  actionTextSmall: {
+    fontSize: 8,
+    fontWeight: "700",
+    fontFamily: "monospace"
+  },
+  dataViewerContainer: {
+    marginTop: -12,
+    marginHorizontal: -12,
+    marginBottom: -12
+  }
+});