@buoy-gg/redux 2.1.12 → 2.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/lib/commonjs/index.js +1 -179
  2. package/lib/commonjs/preset.js +1 -98
  3. package/lib/commonjs/redux/components/ReduxActionButton.js +1 -129
  4. package/lib/commonjs/redux/components/ReduxActionDetailContent.js +1 -380
  5. package/lib/commonjs/redux/components/ReduxActionDetailView.js +1 -401
  6. package/lib/commonjs/redux/components/ReduxActionInfoView.js +1 -838
  7. package/lib/commonjs/redux/components/ReduxActionItem.js +1 -366
  8. package/lib/commonjs/redux/components/ReduxDetailViewToggle.js +1 -134
  9. package/lib/commonjs/redux/components/ReduxIcon.js +1 -18
  10. package/lib/commonjs/redux/components/ReduxModal.js +1 -530
  11. package/lib/commonjs/redux/components/index.js +1 -52
  12. package/lib/commonjs/redux/hooks/index.js +1 -25
  13. package/lib/commonjs/redux/hooks/useAutoInstrumentRedux.js +1 -197
  14. package/lib/commonjs/redux/hooks/useReduxActions.js +1 -75
  15. package/lib/commonjs/redux/index.js +1 -49
  16. package/lib/commonjs/redux/utils/autoInstrument.js +1 -270
  17. package/lib/commonjs/redux/utils/buoyReduxMiddleware.js +1 -166
  18. package/lib/commonjs/redux/utils/createReduxHistoryAdapter.js +1 -146
  19. package/lib/commonjs/redux/utils/index.js +1 -111
  20. package/lib/commonjs/redux/utils/reduxActionStore.js +1 -358
  21. package/lib/module/index.js +1 -87
  22. package/lib/module/preset.js +1 -94
  23. package/lib/module/redux/components/ReduxActionButton.js +1 -126
  24. package/lib/module/redux/components/ReduxActionDetailContent.js +1 -376
  25. package/lib/module/redux/components/ReduxActionDetailView.js +1 -397
  26. package/lib/module/redux/components/ReduxActionInfoView.js +1 -833
  27. package/lib/module/redux/components/ReduxActionItem.js +1 -362
  28. package/lib/module/redux/components/ReduxDetailViewToggle.js +1 -129
  29. package/lib/module/redux/components/ReduxIcon.js +1 -8
  30. package/lib/module/redux/components/ReduxModal.js +1 -525
  31. package/lib/module/redux/components/index.js +1 -7
  32. package/lib/module/redux/hooks/index.js +1 -4
  33. package/lib/module/redux/hooks/useAutoInstrumentRedux.js +1 -193
  34. package/lib/module/redux/hooks/useReduxActions.js +1 -71
  35. package/lib/module/redux/index.js +1 -13
  36. package/lib/module/redux/utils/autoInstrument.js +1 -260
  37. package/lib/module/redux/utils/buoyReduxMiddleware.js +1 -157
  38. package/lib/module/redux/utils/createReduxHistoryAdapter.js +1 -142
  39. package/lib/module/redux/utils/index.js +1 -8
  40. package/lib/module/redux/utils/reduxActionStore.js +1 -354
  41. package/package.json +4 -4
  42. package/lib/typescript/index.d.ts.map +0 -1
  43. package/lib/typescript/preset.d.ts.map +0 -1
  44. package/lib/typescript/redux/components/ReduxActionButton.d.ts.map +0 -1
  45. package/lib/typescript/redux/components/ReduxActionDetailContent.d.ts.map +0 -1
  46. package/lib/typescript/redux/components/ReduxActionDetailView.d.ts.map +0 -1
  47. package/lib/typescript/redux/components/ReduxActionInfoView.d.ts.map +0 -1
  48. package/lib/typescript/redux/components/ReduxActionItem.d.ts.map +0 -1
  49. package/lib/typescript/redux/components/ReduxDetailViewToggle.d.ts.map +0 -1
  50. package/lib/typescript/redux/components/ReduxIcon.d.ts.map +0 -1
  51. package/lib/typescript/redux/components/ReduxModal.d.ts.map +0 -1
  52. package/lib/typescript/redux/components/index.d.ts.map +0 -1
  53. package/lib/typescript/redux/hooks/index.d.ts.map +0 -1
  54. package/lib/typescript/redux/hooks/useAutoInstrumentRedux.d.ts.map +0 -1
  55. package/lib/typescript/redux/hooks/useReduxActions.d.ts.map +0 -1
  56. package/lib/typescript/redux/index.d.ts.map +0 -1
  57. package/lib/typescript/redux/types/index.d.ts.map +0 -1
  58. package/lib/typescript/redux/utils/autoInstrument.d.ts.map +0 -1
  59. package/lib/typescript/redux/utils/buoyReduxMiddleware.d.ts.map +0 -1
  60. package/lib/typescript/redux/utils/createReduxHistoryAdapter.d.ts.map +0 -1
  61. package/lib/typescript/redux/utils/index.d.ts.map +0 -1
  62. package/lib/typescript/redux/utils/reduxActionStore.d.ts.map +0 -1
@@ -1,525 +1 @@
1
- "use strict";
2
-
3
- /**
4
- * Main Redux DevTools modal
5
- *
6
- * This component auto-instruments the Redux store when it mounts,
7
- * providing zero-config action capture for the DevTools.
8
- */
9
-
10
- import { useState, useMemo, useRef, useCallback } from "react";
11
- import { View, Text, StyleSheet, FlatList, TextInput, TouchableOpacity } from "react-native";
12
- import { JsModal, ModalHeader, macOSColors, buoyColors, Search, Trash2, Power, X, Zap, CheckCircle, Copy, Lock, AlertTriangle, devToolsStorageKeys, copyToClipboard, ProUpgradeModal, PowerToggleButton, TickProvider } from "@buoy-gg/shared-ui";
13
- import { useIsPro } from "@buoy-gg/license";
14
- import { useReduxActions } from "../hooks/useReduxActions";
15
- import { useAutoInstrumentRedux } from "../hooks/useAutoInstrumentRedux";
16
- import { ReduxActionItem } from "./ReduxActionItem";
17
- import { ReduxActionDetailContent, ReduxActionDetailFooter } from "./ReduxActionDetailContent";
18
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
19
- /** Free tier limit for action history */
20
- export const FREE_TIER_ACTION_LIMIT = 25;
21
- function EmptyState({
22
- isEnabled
23
- }) {
24
- return /*#__PURE__*/_jsxs(View, {
25
- style: styles.emptyState,
26
- children: [/*#__PURE__*/_jsx(Zap, {
27
- size: 32,
28
- color: macOSColors.text.muted
29
- }), /*#__PURE__*/_jsx(Text, {
30
- style: styles.emptyTitle,
31
- children: "No Redux actions"
32
- }), /*#__PURE__*/_jsx(Text, {
33
- style: styles.emptyText,
34
- children: isEnabled ? "Actions will appear here as they are dispatched" : "Enable capture to start recording actions"
35
- })]
36
- });
37
- }
38
- export function ReduxModal({
39
- visible,
40
- onClose,
41
- onBack,
42
- onMinimize,
43
- enableSharedModalDimensions = false
44
- }) {
45
- const isPro = useIsPro();
46
- const [showProModal, setShowProModal] = useState(false);
47
-
48
- // Auto-instrument the Redux store (zero-config)
49
- const {
50
- isInstrumented,
51
- isLoading: isInstrumentLoading,
52
- error: instrumentError,
53
- isReactReduxAvailable
54
- } = useAutoInstrumentRedux();
55
- const {
56
- filteredActions,
57
- filter,
58
- setFilter,
59
- stats,
60
- clearActions,
61
- isEnabled,
62
- toggleCapture
63
- } = useReduxActions();
64
-
65
- // For free users, limit visible actions to FREE_TIER_ACTION_LIMIT
66
- const visibleActions = useMemo(() => {
67
- if (isPro) return filteredActions;
68
- return filteredActions.slice(0, FREE_TIER_ACTION_LIMIT);
69
- }, [filteredActions, isPro]);
70
-
71
- // Calculate how many actions are locked
72
- const lockedActionCount = useMemo(() => {
73
- if (isPro) return 0;
74
- return Math.max(0, filteredActions.length - FREE_TIER_ACTION_LIMIT);
75
- }, [filteredActions.length, isPro]);
76
- const hasLockedActions = lockedActionCount > 0;
77
-
78
- // Selection state - track index for navigation
79
- const [selectedActionIndex, setSelectedActionIndex] = useState(null);
80
- const actionsRef = useRef([]);
81
-
82
- // Keep actions ref in sync (using visible actions for navigation)
83
- actionsRef.current = visibleActions;
84
-
85
- // Get selected action from index
86
- const selectedAction = selectedActionIndex !== null ? visibleActions[selectedActionIndex] : null;
87
- const [searchText, setSearchText] = useState("");
88
- const [isSearchActive, setIsSearchActive] = useState(false);
89
- const searchInputRef = useRef(null);
90
- const flatListRef = useRef(null);
91
- const handleModeChange = useCallback(_mode => {
92
- // Mode changes handled by JsModal
93
- }, []);
94
- const handleSearch = text => {
95
- setSearchText(text);
96
- setFilter(prev => ({
97
- ...prev,
98
- searchText: text
99
- }));
100
- };
101
- const handleActionPress = useCallback(action => {
102
- const index = actionsRef.current.findIndex(a => a.id === action.id);
103
- setSelectedActionIndex(index >= 0 ? index : 0);
104
- }, []);
105
- const handleUpgradePress = useCallback(() => {
106
- setShowProModal(true);
107
- }, []);
108
- const handleBack = useCallback(() => {
109
- setSelectedActionIndex(null);
110
- }, []);
111
- const handleIndexChange = useCallback(newIndex => {
112
- setSelectedActionIndex(newIndex);
113
- }, []);
114
- const handleCopyAll = async () => {
115
- if (!isPro) {
116
- setShowProModal(true);
117
- return;
118
- }
119
- const actionsData = filteredActions.map(action => ({
120
- id: action.id,
121
- type: action.type,
122
- ...(action.payload !== undefined && {
123
- payload: action.payload
124
- }),
125
- timestamp: action.timestamp,
126
- prevState: action.prevState,
127
- nextState: action.nextState,
128
- hasStateChange: action.hasStateChange
129
- }));
130
- await copyToClipboard(actionsData);
131
- };
132
-
133
- // FlatList optimization
134
- const keyExtractor = useCallback(item => item.id, []);
135
- const renderItem = useCallback(({
136
- item
137
- }) => {
138
- return /*#__PURE__*/_jsx(ReduxActionItem, {
139
- action: item,
140
- onPress: handleActionPress
141
- });
142
- }, [handleActionPress]);
143
- const renderHeaderContent = () => {
144
- // Detail view header - show action type
145
- if (selectedAction) {
146
- return /*#__PURE__*/_jsxs(ModalHeader, {
147
- children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
148
- onBack: handleBack
149
- }), /*#__PURE__*/_jsx(ModalHeader.Content, {
150
- title: selectedAction.type,
151
- centered: true
152
- })]
153
- });
154
- }
155
-
156
- // Main list view header
157
- return /*#__PURE__*/_jsxs(ModalHeader, {
158
- children: [onBack && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
159
- onBack: onBack
160
- }), /*#__PURE__*/_jsx(ModalHeader.Content, {
161
- title: "",
162
- children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
163
- style: styles.headerSearchContainer,
164
- children: [/*#__PURE__*/_jsx(Search, {
165
- size: 14,
166
- color: macOSColors.text.secondary
167
- }), /*#__PURE__*/_jsx(TextInput, {
168
- ref: searchInputRef,
169
- style: styles.headerSearchInput,
170
- placeholder: "Search action types...",
171
- placeholderTextColor: macOSColors.text.muted,
172
- value: searchText,
173
- onChangeText: handleSearch,
174
- onSubmitEditing: () => setIsSearchActive(false),
175
- onBlur: () => setIsSearchActive(false),
176
- autoCapitalize: "none",
177
- autoCorrect: false,
178
- returnKeyType: "search"
179
- }), searchText.length > 0 && /*#__PURE__*/_jsx(TouchableOpacity, {
180
- onPress: () => {
181
- handleSearch("");
182
- setIsSearchActive(false);
183
- },
184
- style: styles.headerSearchClear,
185
- children: /*#__PURE__*/_jsx(X, {
186
- size: 14,
187
- color: macOSColors.text.secondary
188
- })
189
- })]
190
- }) : /*#__PURE__*/_jsxs(View, {
191
- style: styles.headerChipRow,
192
- children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
193
- style: [styles.headerChip, !filter.onlyWithChanges && styles.headerChipActive],
194
- onPress: () => setFilter(prev => ({
195
- ...prev,
196
- onlyWithChanges: false
197
- })),
198
- children: [/*#__PURE__*/_jsx(Text, {
199
- style: styles.headerChipLabel,
200
- children: "ALL"
201
- }), /*#__PURE__*/_jsx(Text, {
202
- style: [styles.headerChipValue, {
203
- color: macOSColors.text.primary
204
- }],
205
- children: stats.totalActions
206
- })]
207
- }), /*#__PURE__*/_jsxs(TouchableOpacity, {
208
- style: [styles.headerChip, filter.onlyWithChanges && styles.headerChipActive],
209
- onPress: () => setFilter(prev => ({
210
- ...prev,
211
- onlyWithChanges: true
212
- })),
213
- children: [/*#__PURE__*/_jsx(Zap, {
214
- size: 12,
215
- color: macOSColors.semantic.warning
216
- }), /*#__PURE__*/_jsx(Text, {
217
- style: [styles.headerChipValue, {
218
- color: macOSColors.semantic.warning
219
- }],
220
- children: stats.actionsWithChanges
221
- })]
222
- }), /*#__PURE__*/_jsxs(View, {
223
- style: styles.headerChip,
224
- children: [/*#__PURE__*/_jsx(CheckCircle, {
225
- size: 12,
226
- color: macOSColors.semantic.success
227
- }), /*#__PURE__*/_jsx(Text, {
228
- style: [styles.headerChipValue, {
229
- color: macOSColors.semantic.success
230
- }],
231
- children: stats.uniqueActionTypes
232
- })]
233
- })]
234
- })
235
- }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
236
- children: [/*#__PURE__*/_jsx(TouchableOpacity, {
237
- onPress: () => setIsSearchActive(true),
238
- style: styles.headerActionButton,
239
- children: /*#__PURE__*/_jsx(Search, {
240
- size: 14,
241
- color: macOSColors.text.secondary
242
- })
243
- }), /*#__PURE__*/_jsx(TouchableOpacity, {
244
- onPress: handleCopyAll,
245
- style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
246
- disabled: filteredActions.length === 0,
247
- children: /*#__PURE__*/_jsx(Copy, {
248
- size: 14,
249
- color: filteredActions.length > 0 ? macOSColors.text.secondary : macOSColors.text.disabled
250
- })
251
- }), /*#__PURE__*/_jsx(PowerToggleButton, {
252
- isEnabled: isEnabled,
253
- onToggle: toggleCapture,
254
- accessibilityLabel: "Toggle Redux action capture"
255
- }), /*#__PURE__*/_jsx(TouchableOpacity, {
256
- onPress: clearActions,
257
- style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
258
- disabled: filteredActions.length === 0,
259
- children: /*#__PURE__*/_jsx(Trash2, {
260
- size: 14,
261
- color: filteredActions.length > 0 ? macOSColors.text.muted : macOSColors.text.disabled
262
- })
263
- })]
264
- })]
265
- });
266
- };
267
- const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : "buoy-redux-modal";
268
- if (!visible) return null;
269
-
270
- // Footer for detail view navigation
271
- const footerNode = selectedAction && selectedActionIndex !== null ? /*#__PURE__*/_jsx(ReduxActionDetailFooter, {
272
- action: selectedAction,
273
- actions: visibleActions,
274
- selectedIndex: selectedActionIndex,
275
- onIndexChange: handleIndexChange
276
- }) : null;
277
- const footerHeight = selectedAction && visibleActions.length > 1 ? 68 : 0;
278
- return /*#__PURE__*/_jsxs(TickProvider, {
279
- children: [/*#__PURE__*/_jsx(JsModal, {
280
- visible: visible,
281
- onClose: onClose,
282
- onMinimize: onMinimize,
283
- persistenceKey: persistenceKey,
284
- header: {
285
- showToggleButton: true,
286
- customContent: renderHeaderContent()
287
- },
288
- onModeChange: handleModeChange,
289
- enablePersistence: true,
290
- initialMode: "bottomSheet",
291
- enableGlitchEffects: true,
292
- styles: {},
293
- footer: footerNode,
294
- footerHeight: footerHeight,
295
- children: /*#__PURE__*/_jsx(View, {
296
- style: styles.container,
297
- children: selectedAction && selectedActionIndex !== null ? /*#__PURE__*/_jsx(ReduxActionDetailContent, {
298
- action: selectedAction,
299
- actions: visibleActions,
300
- selectedIndex: selectedActionIndex,
301
- onIndexChange: handleIndexChange,
302
- disableInternalFooter: true
303
- }) : /*#__PURE__*/_jsxs(_Fragment, {
304
- children: [instrumentError && !isInstrumented && /*#__PURE__*/_jsxs(View, {
305
- style: styles.errorBanner,
306
- children: [/*#__PURE__*/_jsx(AlertTriangle, {
307
- size: 14,
308
- color: macOSColors.semantic.error
309
- }), /*#__PURE__*/_jsx(Text, {
310
- style: styles.errorText,
311
- children: isReactReduxAvailable ? "Not inside a Redux Provider. Wrap your app with <Provider store={store}>." : "react-redux not installed. Run: npm install react-redux"
312
- })]
313
- }), !isEnabled && isInstrumented && /*#__PURE__*/_jsxs(View, {
314
- style: styles.disabledBanner,
315
- children: [/*#__PURE__*/_jsx(Power, {
316
- size: 14,
317
- color: macOSColors.semantic.warning
318
- }), /*#__PURE__*/_jsx(Text, {
319
- style: styles.disabledText,
320
- children: "Action capture is disabled"
321
- })]
322
- }), hasLockedActions && /*#__PURE__*/_jsxs(TouchableOpacity, {
323
- style: styles.lockedBanner,
324
- onPress: handleUpgradePress,
325
- activeOpacity: 0.8,
326
- children: [/*#__PURE__*/_jsx(Lock, {
327
- size: 14,
328
- color: buoyColors.primary
329
- }), /*#__PURE__*/_jsxs(Text, {
330
- style: styles.lockedText,
331
- children: [lockedActionCount, " older ", lockedActionCount === 1 ? "action" : "actions", " locked"]
332
- }), /*#__PURE__*/_jsx(View, {
333
- style: styles.upgradeBadge,
334
- children: /*#__PURE__*/_jsx(Text, {
335
- style: styles.upgradeBadgeText,
336
- children: "UPGRADE"
337
- })
338
- })]
339
- }), visibleActions.length > 0 ? /*#__PURE__*/_jsx(FlatList, {
340
- ref: flatListRef,
341
- data: visibleActions,
342
- renderItem: renderItem,
343
- keyExtractor: keyExtractor,
344
- contentContainerStyle: styles.listContent,
345
- showsVerticalScrollIndicator: true,
346
- removeClippedSubviews: true,
347
- initialNumToRender: 15,
348
- maxToRenderPerBatch: 10,
349
- windowSize: 10,
350
- scrollEnabled: false
351
- }) : /*#__PURE__*/_jsx(EmptyState, {
352
- isEnabled: isEnabled
353
- })]
354
- })
355
- })
356
- }), /*#__PURE__*/_jsx(ProUpgradeModal, {
357
- visible: showProModal,
358
- onClose: () => setShowProModal(false),
359
- featureName: "Full Action History"
360
- })]
361
- });
362
- }
363
- const styles = StyleSheet.create({
364
- container: {
365
- flex: 1,
366
- backgroundColor: macOSColors.background.base
367
- },
368
- headerSearchContainer: {
369
- flexDirection: "row",
370
- alignItems: "center",
371
- backgroundColor: macOSColors.background.input,
372
- borderRadius: 10,
373
- borderWidth: 1,
374
- borderColor: macOSColors.border.default,
375
- paddingHorizontal: 12,
376
- paddingVertical: 5
377
- },
378
- headerSearchInput: {
379
- flex: 1,
380
- color: macOSColors.text.primary,
381
- fontSize: 13,
382
- marginLeft: 6,
383
- paddingVertical: 2
384
- },
385
- headerSearchClear: {
386
- marginLeft: 6,
387
- padding: 4
388
- },
389
- headerChipRow: {
390
- flexDirection: "row",
391
- alignItems: "center",
392
- gap: 8
393
- },
394
- headerChip: {
395
- flexDirection: "row",
396
- alignItems: "center",
397
- gap: 4,
398
- backgroundColor: macOSColors.background.hover,
399
- paddingHorizontal: 10,
400
- paddingVertical: 5,
401
- borderRadius: 12,
402
- borderWidth: 1,
403
- borderColor: macOSColors.border.default
404
- },
405
- headerChipActive: {
406
- backgroundColor: macOSColors.semantic.infoBackground,
407
- borderColor: macOSColors.semantic.info + "50"
408
- },
409
- headerChipLabel: {
410
- fontSize: 10,
411
- fontWeight: "700",
412
- color: macOSColors.text.muted
413
- },
414
- headerChipValue: {
415
- fontSize: 12,
416
- fontWeight: "600",
417
- fontFamily: "monospace"
418
- },
419
- headerActionButton: {
420
- width: 32,
421
- height: 32,
422
- borderRadius: 8,
423
- backgroundColor: macOSColors.background.hover,
424
- borderWidth: 1,
425
- borderColor: macOSColors.border.default,
426
- alignItems: "center",
427
- justifyContent: "center"
428
- },
429
- headerActionButtonDisabled: {
430
- opacity: 0.55
431
- },
432
- startButton: {
433
- backgroundColor: macOSColors.semantic.successBackground,
434
- borderColor: macOSColors.semantic.success + "40"
435
- },
436
- stopButton: {
437
- backgroundColor: macOSColors.semantic.errorBackground,
438
- borderColor: macOSColors.semantic.error + "40"
439
- },
440
- errorBanner: {
441
- flexDirection: "row",
442
- alignItems: "center",
443
- gap: 8,
444
- padding: 10,
445
- marginHorizontal: 12,
446
- marginTop: 8,
447
- backgroundColor: macOSColors.semantic.errorBackground,
448
- borderRadius: 8,
449
- borderWidth: 1,
450
- borderColor: macOSColors.semantic.error + "20"
451
- },
452
- errorText: {
453
- color: macOSColors.semantic.error,
454
- fontSize: 11,
455
- flex: 1
456
- },
457
- disabledBanner: {
458
- flexDirection: "row",
459
- alignItems: "center",
460
- gap: 8,
461
- padding: 10,
462
- marginHorizontal: 12,
463
- marginTop: 8,
464
- backgroundColor: macOSColors.semantic.warningBackground,
465
- borderRadius: 8,
466
- borderWidth: 1,
467
- borderColor: macOSColors.semantic.warning + "20"
468
- },
469
- disabledText: {
470
- color: macOSColors.semantic.warning,
471
- fontSize: 11,
472
- flex: 1
473
- },
474
- listContent: {
475
- paddingTop: 8,
476
- paddingBottom: 20
477
- },
478
- emptyState: {
479
- alignItems: "center",
480
- paddingVertical: 40
481
- },
482
- emptyTitle: {
483
- color: macOSColors.text.primary,
484
- fontSize: 14,
485
- fontWeight: "600",
486
- marginTop: 12,
487
- marginBottom: 6
488
- },
489
- emptyText: {
490
- color: macOSColors.text.muted,
491
- fontSize: 12,
492
- textAlign: "center"
493
- },
494
- // Locked actions banner styles
495
- lockedBanner: {
496
- flexDirection: "row",
497
- alignItems: "center",
498
- gap: 8,
499
- padding: 10,
500
- marginHorizontal: 12,
501
- marginTop: 8,
502
- backgroundColor: buoyColors.primary + "15",
503
- borderRadius: 8,
504
- borderWidth: 1,
505
- borderColor: buoyColors.primary + "33"
506
- },
507
- lockedText: {
508
- color: buoyColors.primary,
509
- fontSize: 11,
510
- fontWeight: "500",
511
- flex: 1
512
- },
513
- upgradeBadge: {
514
- backgroundColor: buoyColors.primary,
515
- paddingHorizontal: 8,
516
- paddingVertical: 3,
517
- borderRadius: 4
518
- },
519
- upgradeBadgeText: {
520
- color: "#fff",
521
- fontSize: 9,
522
- fontWeight: "700",
523
- letterSpacing: 0.5
524
- }
525
- });
1
+ "use strict";import{useState,useMemo,useRef,useCallback}from"react";import{View,Text,StyleSheet,FlatList,TextInput,TouchableOpacity}from"react-native";import{JsModal,ModalHeader,macOSColors,buoyColors,Search,Trash2,Power,X,Zap,CheckCircle,Copy,Lock,AlertTriangle,devToolsStorageKeys,copyToClipboard,ProUpgradeModal,PowerToggleButton,TickProvider}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import{useReduxActions}from"../hooks/useReduxActions";import{useAutoInstrumentRedux}from"../hooks/useAutoInstrumentRedux";import{ReduxActionItem}from"./ReduxActionItem";import{ReduxActionDetailContent,ReduxActionDetailFooter}from"./ReduxActionDetailContent";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";export const FREE_TIER_ACTION_LIMIT=25;function EmptyState({isEnabled:e}){return _jsxs(View,{style:styles.emptyState,children:[_jsx(Zap,{size:32,color:macOSColors.text.muted}),_jsx(Text,{style:styles.emptyTitle,children:"No Redux actions"}),_jsx(Text,{style:styles.emptyText,children:e?"Actions will appear here as they are dispatched":"Enable capture to start recording actions"})]})}export function ReduxModal({visible:e,onClose:o,onBack:t,onMinimize:r,enableSharedModalDimensions:a=!1}){const s=useIsPro(),[l,n]=useState(!1),{isInstrumented:i,isLoading:c,error:d,isReactReduxAvailable:u}=useAutoInstrumentRedux(),{filteredActions:h,filter:m,setFilter:x,stats:g,clearActions:C,isEnabled:p,toggleCapture:y}=useReduxActions(),b=useMemo(()=>s?h:h.slice(0,25),[h,s]),S=useMemo(()=>s?0:Math.max(0,h.length-25),[h.length,s]),f=S>0,[T,_]=useState(null),j=useRef([]);j.current=b;const O=null!==T?b[T]:null,[k,A]=useState(""),[R,w]=useState(!1),B=useRef(null),I=useRef(null),z=useCallback(e=>{},[]),v=e=>{A(e),x(o=>({...o,searchText:e}))},P=useCallback(e=>{const o=j.current.findIndex(o=>o.id===e.id);_(o>=0?o:0)},[]),M=useCallback(()=>{n(!0)},[]),V=useCallback(()=>{_(null)},[]),W=useCallback(e=>{_(e)},[]),D=useCallback(e=>e.id,[]),E=useCallback(({item:e})=>_jsx(ReduxActionItem,{action:e,onPress:P}),[P]),H=a?devToolsStorageKeys.modal.root():"buoy-redux-modal";if(!e)return null;const L=O&&null!==T?_jsx(ReduxActionDetailFooter,{action:O,actions:b,selectedIndex:T,onIndexChange:W}):null,F=O&&b.length>1?68:0;return _jsxs(TickProvider,{children:[_jsx(JsModal,{visible:e,onClose:o,onMinimize:r,persistenceKey:H,header:{showToggleButton:!0,customContent:_jsxs(ModalHeader,O?{children:[_jsx(ModalHeader.Navigation,{onBack:V}),_jsx(ModalHeader.Content,{title:O.type,centered:!0})]}:{children:[t&&_jsx(ModalHeader.Navigation,{onBack:t}),_jsx(ModalHeader.Content,{title:"",children:_jsxs(View,R?{style:styles.headerSearchContainer,children:[_jsx(Search,{size:14,color:macOSColors.text.secondary}),_jsx(TextInput,{ref:B,style:styles.headerSearchInput,placeholder:"Search action types...",placeholderTextColor:macOSColors.text.muted,value:k,onChangeText:v,onSubmitEditing:()=>w(!1),onBlur:()=>w(!1),autoCapitalize:"none",autoCorrect:!1,returnKeyType:"search"}),k.length>0&&_jsx(TouchableOpacity,{onPress:()=>{v(""),w(!1)},style:styles.headerSearchClear,children:_jsx(X,{size:14,color:macOSColors.text.secondary})})]}:{style:styles.headerChipRow,children:[_jsxs(TouchableOpacity,{style:[styles.headerChip,!m.onlyWithChanges&&styles.headerChipActive],onPress:()=>x(e=>({...e,onlyWithChanges:!1})),children:[_jsx(Text,{style:styles.headerChipLabel,children:"ALL"}),_jsx(Text,{style:[styles.headerChipValue,{color:macOSColors.text.primary}],children:g.totalActions})]}),_jsxs(TouchableOpacity,{style:[styles.headerChip,m.onlyWithChanges&&styles.headerChipActive],onPress:()=>x(e=>({...e,onlyWithChanges:!0})),children:[_jsx(Zap,{size:12,color:macOSColors.semantic.warning}),_jsx(Text,{style:[styles.headerChipValue,{color:macOSColors.semantic.warning}],children:g.actionsWithChanges})]}),_jsxs(View,{style:styles.headerChip,children:[_jsx(CheckCircle,{size:12,color:macOSColors.semantic.success}),_jsx(Text,{style:[styles.headerChipValue,{color:macOSColors.semantic.success}],children:g.uniqueActionTypes})]})]})}),_jsxs(ModalHeader.Actions,{children:[_jsx(TouchableOpacity,{onPress:()=>w(!0),style:styles.headerActionButton,children:_jsx(Search,{size:14,color:macOSColors.text.secondary})}),_jsx(TouchableOpacity,{onPress:async()=>{if(!s)return void n(!0);const e=h.map(e=>({id:e.id,type:e.type,...void 0!==e.payload&&{payload:e.payload},timestamp:e.timestamp,prevState:e.prevState,nextState:e.nextState,hasStateChange:e.hasStateChange}));await copyToClipboard(e)},style:[styles.headerActionButton,0===h.length&&styles.headerActionButtonDisabled],disabled:0===h.length,children:_jsx(Copy,{size:14,color:h.length>0?macOSColors.text.secondary:macOSColors.text.disabled})}),_jsx(PowerToggleButton,{isEnabled:p,onToggle:y,accessibilityLabel:"Toggle Redux action capture"}),_jsx(TouchableOpacity,{onPress:C,style:[styles.headerActionButton,0===h.length&&styles.headerActionButtonDisabled],disabled:0===h.length,children:_jsx(Trash2,{size:14,color:h.length>0?macOSColors.text.muted:macOSColors.text.disabled})})]})]})},onModeChange:z,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:L,footerHeight:F,children:_jsx(View,{style:styles.container,children:O&&null!==T?_jsx(ReduxActionDetailContent,{action:O,actions:b,selectedIndex:T,onIndexChange:W,disableInternalFooter:!0}):_jsxs(_Fragment,{children:[d&&!i&&_jsxs(View,{style:styles.errorBanner,children:[_jsx(AlertTriangle,{size:14,color:macOSColors.semantic.error}),_jsx(Text,{style:styles.errorText,children:u?"Not inside a Redux Provider. Wrap your app with <Provider store={store}>.":"react-redux not installed. Run: npm install react-redux"})]}),!p&&i&&_jsxs(View,{style:styles.disabledBanner,children:[_jsx(Power,{size:14,color:macOSColors.semantic.warning}),_jsx(Text,{style:styles.disabledText,children:"Action capture is disabled"})]}),f&&_jsxs(TouchableOpacity,{style:styles.lockedBanner,onPress:M,activeOpacity:.8,children:[_jsx(Lock,{size:14,color:buoyColors.primary}),_jsxs(Text,{style:styles.lockedText,children:[S," older ",1===S?"action":"actions"," locked"]}),_jsx(View,{style:styles.upgradeBadge,children:_jsx(Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),b.length>0?_jsx(FlatList,{ref:I,data:b,renderItem:E,keyExtractor:D,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1}):_jsx(EmptyState,{isEnabled:p})]})})}),_jsx(ProUpgradeModal,{visible:l,onClose:()=>n(!1),featureName:"Full Action History"})]})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:macOSColors.background.base},headerSearchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:macOSColors.background.input,borderRadius:10,borderWidth:1,borderColor:macOSColors.border.default,paddingHorizontal:12,paddingVertical:5},headerSearchInput:{flex:1,color:macOSColors.text.primary,fontSize:13,marginLeft:6,paddingVertical:2},headerSearchClear:{marginLeft:6,padding:4},headerChipRow:{flexDirection:"row",alignItems:"center",gap:8},headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:macOSColors.background.hover,paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:macOSColors.border.default},headerChipActive:{backgroundColor:macOSColors.semantic.infoBackground,borderColor:macOSColors.semantic.info+"50"},headerChipLabel:{fontSize:10,fontWeight:"700",color:macOSColors.text.muted},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:"monospace"},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:macOSColors.background.hover,borderWidth:1,borderColor:macOSColors.border.default,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},startButton:{backgroundColor:macOSColors.semantic.successBackground,borderColor:macOSColors.semantic.success+"40"},stopButton:{backgroundColor:macOSColors.semantic.errorBackground,borderColor:macOSColors.semantic.error+"40"},errorBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:macOSColors.semantic.errorBackground,borderRadius:8,borderWidth:1,borderColor:macOSColors.semantic.error+"20"},errorText:{color:macOSColors.semantic.error,fontSize:11,flex:1},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:macOSColors.semantic.warningBackground,borderRadius:8,borderWidth:1,borderColor:macOSColors.semantic.warning+"20"},disabledText:{color:macOSColors.semantic.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:macOSColors.text.primary,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:macOSColors.text.muted,fontSize:12,textAlign:"center"},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:buoyColors.primary+"15",borderRadius:8,borderWidth:1,borderColor:buoyColors.primary+"33"},lockedText:{color:buoyColors.primary,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:buoyColors.primary,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:"#fff",fontSize:9,fontWeight:"700",letterSpacing:.5}});
@@ -1,7 +1 @@
1
- "use strict";
2
-
3
- export { ReduxModal, FREE_TIER_ACTION_LIMIT } from "./ReduxModal";
4
- export { ReduxActionItem } from "./ReduxActionItem";
5
- export { ReduxActionDetailView } from "./ReduxActionDetailView";
6
- export { ReduxActionDetailContent, ReduxActionDetailFooter } from "./ReduxActionDetailContent";
7
- export { ReduxIcon } from "./ReduxIcon";
1
+ "use strict";export{ReduxModal,FREE_TIER_ACTION_LIMIT}from"./ReduxModal";export{ReduxActionItem}from"./ReduxActionItem";export{ReduxActionDetailView}from"./ReduxActionDetailView";export{ReduxActionDetailContent,ReduxActionDetailFooter}from"./ReduxActionDetailContent";export{ReduxIcon}from"./ReduxIcon";
@@ -1,4 +1 @@
1
- "use strict";
2
-
3
- export { useReduxActions } from "./useReduxActions";
4
- export { useAutoInstrumentRedux, useReduxAvailability } from "./useAutoInstrumentRedux";
1
+ "use strict";export{useReduxActions}from"./useReduxActions";export{useAutoInstrumentRedux,useReduxAvailability}from"./useAutoInstrumentRedux";