@buoy-gg/zustand 7.0.38 → 7.0.39
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.
- package/lib/commonjs/index.js +105 -1
- package/lib/commonjs/preset.js +102 -1
- package/lib/commonjs/zustand/components/ZustandActionButton.js +118 -1
- package/lib/commonjs/zustand/components/ZustandDetailViewToggle.js +48 -1
- package/lib/commonjs/zustand/components/ZustandEventFilterView.js +43 -1
- package/lib/commonjs/zustand/components/ZustandIcon.js +18 -1
- package/lib/commonjs/zustand/components/ZustandModal.js +772 -1
- package/lib/commonjs/zustand/components/ZustandStateChangeItem.js +117 -1
- package/lib/commonjs/zustand/components/ZustandStateDetailContent.js +372 -1
- package/lib/commonjs/zustand/components/ZustandStateInfoView.js +488 -1
- package/lib/commonjs/zustand/components/ZustandStoreBrowser.js +204 -1
- package/lib/commonjs/zustand/components/ZustandStoreDetailContent.js +471 -1
- package/lib/commonjs/zustand/components/ZustandStoreEditorScreen.js +393 -1
- package/lib/commonjs/zustand/hooks/useZustandStateChanges.js +74 -1
- package/lib/commonjs/zustand/sync/zustandSyncAdapter.js +382 -1
- package/lib/commonjs/zustand/utils/buoyZustandMiddleware.js +284 -1
- package/lib/commonjs/zustand/utils/editableState.js +146 -1
- package/lib/commonjs/zustand/utils/snapshotProvider.js +209 -1
- package/lib/commonjs/zustand/utils/testIDs.js +82 -1
- package/lib/commonjs/zustand/utils/zustandStateStore.js +379 -1
- package/lib/module/index.js +90 -1
- package/lib/module/preset.js +98 -1
- package/lib/module/zustand/components/ZustandActionButton.js +114 -1
- package/lib/module/zustand/components/ZustandDetailViewToggle.js +43 -1
- package/lib/module/zustand/components/ZustandEventFilterView.js +39 -1
- package/lib/module/zustand/components/ZustandIcon.js +11 -1
- package/lib/module/zustand/components/ZustandModal.js +767 -1
- package/lib/module/zustand/components/ZustandStateChangeItem.js +113 -1
- package/lib/module/zustand/components/ZustandStateDetailContent.js +368 -1
- package/lib/module/zustand/components/ZustandStateInfoView.js +483 -1
- package/lib/module/zustand/components/ZustandStoreBrowser.js +200 -1
- package/lib/module/zustand/components/ZustandStoreDetailContent.js +469 -1
- package/lib/module/zustand/components/ZustandStoreEditorScreen.js +389 -1
- package/lib/module/zustand/hooks/useZustandStateChanges.js +70 -1
- package/lib/module/zustand/sync/zustandSyncAdapter.js +380 -1
- package/lib/module/zustand/utils/buoyZustandMiddleware.js +278 -1
- package/lib/module/zustand/utils/editableState.js +138 -1
- package/lib/module/zustand/utils/snapshotProvider.js +209 -1
- package/lib/module/zustand/utils/testIDs.js +74 -1
- package/lib/module/zustand/utils/zustandStateStore.js +375 -1
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/preset.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandActionButton.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandDetailViewToggle.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandEventFilterView.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandIcon.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandModal.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandStateChangeItem.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandStateDetailContent.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandStateInfoView.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandStoreBrowser.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandStoreDetailContent.d.ts.map +1 -0
- package/lib/typescript/zustand/components/ZustandStoreEditorScreen.d.ts.map +1 -0
- package/lib/typescript/zustand/hooks/useZustandStateChanges.d.ts.map +1 -0
- package/lib/typescript/zustand/sync/zustandSyncAdapter.d.ts.map +1 -0
- package/lib/typescript/zustand/types/index.d.ts.map +1 -0
- package/lib/typescript/zustand/utils/buoyZustandMiddleware.d.ts.map +1 -0
- package/lib/typescript/zustand/utils/editableState.d.ts.map +1 -0
- package/lib/typescript/zustand/utils/snapshotProvider.d.ts.map +1 -0
- package/lib/typescript/zustand/utils/testIDs.d.ts.map +1 -0
- package/lib/typescript/zustand/utils/zustandStateStore.d.ts.map +1 -0
- package/package.json +3 -3
package/lib/commonjs/index.js
CHANGED
|
@@ -1 +1,105 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "ZUSTAND_ICON_COLOR", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _ZustandIcon.ZUSTAND_ICON_COLOR;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "ZustandIcon", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _ZustandIcon.ZustandIcon;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "ZustandModal", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _ZustandModal.ZustandModal;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "ZustandStateChangeItem", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _ZustandStateChangeItem.ZustandStateChangeItem;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(exports, "ZustandStateDetailContent", {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: function () {
|
|
33
|
+
return _ZustandStateDetailContent.ZustandStateDetailContent;
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
Object.defineProperty(exports, "ZustandStateDetailFooter", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _ZustandStateDetailContent.ZustandStateDetailFooter;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
Object.defineProperty(exports, "ZustandToolView", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function () {
|
|
45
|
+
return _ZustandModal.ZustandToolView;
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
Object.defineProperty(exports, "buoyDevTools", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function () {
|
|
51
|
+
return _buoyZustandMiddleware.buoyDevTools;
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
Object.defineProperty(exports, "createZustandTool", {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function () {
|
|
57
|
+
return _preset.createZustandTool;
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
Object.defineProperty(exports, "isStoreInstrumented", {
|
|
61
|
+
enumerable: true,
|
|
62
|
+
get: function () {
|
|
63
|
+
return _buoyZustandMiddleware.isStoreInstrumented;
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
Object.defineProperty(exports, "useZustandStateChanges", {
|
|
67
|
+
enumerable: true,
|
|
68
|
+
get: function () {
|
|
69
|
+
return _useZustandStateChanges.useZustandStateChanges;
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
Object.defineProperty(exports, "watchStores", {
|
|
73
|
+
enumerable: true,
|
|
74
|
+
get: function () {
|
|
75
|
+
return _buoyZustandMiddleware.watchStores;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
Object.defineProperty(exports, "zustandStateStore", {
|
|
79
|
+
enumerable: true,
|
|
80
|
+
get: function () {
|
|
81
|
+
return _zustandStateStore.zustandStateStore;
|
|
82
|
+
}
|
|
83
|
+
});
|
|
84
|
+
Object.defineProperty(exports, "zustandSyncAdapter", {
|
|
85
|
+
enumerable: true,
|
|
86
|
+
get: function () {
|
|
87
|
+
return _zustandSyncAdapter.zustandSyncAdapter;
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
Object.defineProperty(exports, "zustandToolPreset", {
|
|
91
|
+
enumerable: true,
|
|
92
|
+
get: function () {
|
|
93
|
+
return _preset.zustandToolPreset;
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
require("./zustand/utils/snapshotProvider");
|
|
97
|
+
var _preset = require("./preset");
|
|
98
|
+
var _buoyZustandMiddleware = require("./zustand/utils/buoyZustandMiddleware");
|
|
99
|
+
var _useZustandStateChanges = require("./zustand/hooks/useZustandStateChanges");
|
|
100
|
+
var _ZustandModal = require("./zustand/components/ZustandModal");
|
|
101
|
+
var _ZustandStateChangeItem = require("./zustand/components/ZustandStateChangeItem");
|
|
102
|
+
var _ZustandStateDetailContent = require("./zustand/components/ZustandStateDetailContent");
|
|
103
|
+
var _ZustandIcon = require("./zustand/components/ZustandIcon");
|
|
104
|
+
var _zustandSyncAdapter = require("./zustand/sync/zustandSyncAdapter");
|
|
105
|
+
var _zustandStateStore = require("./zustand/utils/zustandStateStore");
|
package/lib/commonjs/preset.js
CHANGED
|
@@ -1 +1,102 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createZustandTool = createZustandTool;
|
|
7
|
+
exports.zustandToolPreset = void 0;
|
|
8
|
+
var _ZustandModal = require("./zustand/components/ZustandModal");
|
|
9
|
+
var _ZustandIcon = require("./zustand/components/ZustandIcon");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
/**
|
|
12
|
+
* Pre-configured Zustand DevTools preset for FloatingDevTools
|
|
13
|
+
*
|
|
14
|
+
* ZERO-CONFIG: This preset is auto-discovered by FloatingDevTools!
|
|
15
|
+
* Just install @buoy-gg/zustand and wrap your stores with buoyDevTools().
|
|
16
|
+
*
|
|
17
|
+
* @example Automatic (recommended)
|
|
18
|
+
* ```tsx
|
|
19
|
+
* import { create } from 'zustand';
|
|
20
|
+
* import { buoyDevTools } from '@buoy-gg/zustand';
|
|
21
|
+
*
|
|
22
|
+
* const useCounterStore = create(
|
|
23
|
+
* buoyDevTools(
|
|
24
|
+
* (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
|
|
25
|
+
* { name: 'counterStore' }
|
|
26
|
+
* )
|
|
27
|
+
* );
|
|
28
|
+
*
|
|
29
|
+
* // The Zustand tool appears automatically in FloatingDevTools!
|
|
30
|
+
* <FloatingDevTools />
|
|
31
|
+
* ```
|
|
32
|
+
*
|
|
33
|
+
* @example Manual (only for custom configuration)
|
|
34
|
+
* ```tsx
|
|
35
|
+
* import { createZustandTool } from '@buoy-gg/zustand';
|
|
36
|
+
*
|
|
37
|
+
* const customZustandTool = createZustandTool({
|
|
38
|
+
* name: "STATE",
|
|
39
|
+
* iconColor: "#463B3F",
|
|
40
|
+
* });
|
|
41
|
+
*
|
|
42
|
+
* <FloatingDevTools apps={[customZustandTool]} />
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Pre-configured Zustand DevTools preset for FloatingDevTools.
|
|
48
|
+
* Includes:
|
|
49
|
+
* - Live state change monitoring
|
|
50
|
+
* - State inspection (JSON viewer)
|
|
51
|
+
* - State diff visualization (tree + split)
|
|
52
|
+
* - Filter by store name
|
|
53
|
+
* - Changed keys tracking
|
|
54
|
+
*/
|
|
55
|
+
const zustandToolPreset = exports.zustandToolPreset = {
|
|
56
|
+
id: "zustand",
|
|
57
|
+
name: "ZUSTAND",
|
|
58
|
+
description: "Zustand store & state inspector",
|
|
59
|
+
slot: "both",
|
|
60
|
+
icon: ({
|
|
61
|
+
size
|
|
62
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandIcon.ZustandIcon, {
|
|
63
|
+
size: size
|
|
64
|
+
}),
|
|
65
|
+
component: _ZustandModal.ZustandModal,
|
|
66
|
+
props: {
|
|
67
|
+
enableSharedModalDimensions: false
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* Create a custom Zustand DevTools configuration.
|
|
73
|
+
* Use this if you want to override default settings.
|
|
74
|
+
*
|
|
75
|
+
* @example
|
|
76
|
+
* ```tsx
|
|
77
|
+
* import { createZustandTool } from '@buoy-gg/zustand';
|
|
78
|
+
*
|
|
79
|
+
* const myZustandTool = createZustandTool({
|
|
80
|
+
* name: "STATE",
|
|
81
|
+
* iconColor: "#463B3F",
|
|
82
|
+
* });
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
85
|
+
function createZustandTool(options) {
|
|
86
|
+
return {
|
|
87
|
+
id: options?.id || "zustand",
|
|
88
|
+
name: options?.name || "ZUSTAND",
|
|
89
|
+
description: options?.description || "Zustand store & state inspector",
|
|
90
|
+
slot: "both",
|
|
91
|
+
icon: ({
|
|
92
|
+
size
|
|
93
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandIcon.ZustandIcon, {
|
|
94
|
+
size: size,
|
|
95
|
+
color: options?.iconColor
|
|
96
|
+
}),
|
|
97
|
+
component: _ZustandModal.ZustandModal,
|
|
98
|
+
props: {
|
|
99
|
+
enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
}
|
|
@@ -1 +1,118 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ZustandActionButton = ZustandActionButton;
|
|
7
|
+
var _reactNative = require("react-native");
|
|
8
|
+
var _sharedUi = require("@buoy-gg/shared-ui");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
/**
|
|
11
|
+
* ZustandActionButton
|
|
12
|
+
*
|
|
13
|
+
* Generic action button for Zustand DevTools footer.
|
|
14
|
+
* Mirrors ReduxActionButton.tsx
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
const buttonConfigs = {
|
|
18
|
+
copy: {
|
|
19
|
+
color: _sharedUi.night.color.accent,
|
|
20
|
+
backgroundColor: _sharedUi.night.color.accentSoft,
|
|
21
|
+
borderColor: _sharedUi.night.color.accentBorder,
|
|
22
|
+
textColor: _sharedUi.night.color.accent
|
|
23
|
+
},
|
|
24
|
+
reset: {
|
|
25
|
+
color: _sharedUi.night.color.warning,
|
|
26
|
+
backgroundColor: _sharedUi.night.color.warningSoft,
|
|
27
|
+
borderColor: _sharedUi.night.color.warning + "40",
|
|
28
|
+
textColor: _sharedUi.night.color.warning
|
|
29
|
+
},
|
|
30
|
+
clear: {
|
|
31
|
+
color: _sharedUi.night.color.danger,
|
|
32
|
+
backgroundColor: _sharedUi.night.color.dangerSoft,
|
|
33
|
+
borderColor: _sharedUi.night.color.danger + "40",
|
|
34
|
+
textColor: _sharedUi.night.color.danger
|
|
35
|
+
},
|
|
36
|
+
jump: {
|
|
37
|
+
color: _sharedUi.night.color.warning,
|
|
38
|
+
backgroundColor: _sharedUi.night.color.warningSoft,
|
|
39
|
+
borderColor: _sharedUi.night.color.warning + "40",
|
|
40
|
+
textColor: _sharedUi.night.color.warning
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
function ZustandActionButton({
|
|
44
|
+
onPress,
|
|
45
|
+
text,
|
|
46
|
+
type,
|
|
47
|
+
disabled = false,
|
|
48
|
+
testID
|
|
49
|
+
}) {
|
|
50
|
+
const config = buttonConfigs[type];
|
|
51
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
|
|
52
|
+
disabled: disabled,
|
|
53
|
+
onPress: onPress,
|
|
54
|
+
style: [styles.button, {
|
|
55
|
+
backgroundColor: disabled ? _sharedUi.night.color.textTertiary + "1A" : config.backgroundColor,
|
|
56
|
+
borderColor: disabled ? _sharedUi.night.color.textTertiary + "33" : config.borderColor,
|
|
57
|
+
opacity: disabled ? 0.5 : 1
|
|
58
|
+
}],
|
|
59
|
+
activeOpacity: 0.7,
|
|
60
|
+
testID: testID,
|
|
61
|
+
accessibilityRole: "button",
|
|
62
|
+
accessibilityLabel: text,
|
|
63
|
+
accessibilityState: {
|
|
64
|
+
disabled
|
|
65
|
+
},
|
|
66
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
67
|
+
style: [styles.dot, {
|
|
68
|
+
backgroundColor: disabled ? _sharedUi.night.color.textTertiary : config.color
|
|
69
|
+
}]
|
|
70
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
|
|
71
|
+
style: [styles.text, {
|
|
72
|
+
color: disabled ? _sharedUi.night.color.textTertiary : config.textColor
|
|
73
|
+
}],
|
|
74
|
+
children: text
|
|
75
|
+
})]
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
const styles = _reactNative.StyleSheet.create({
|
|
79
|
+
button: {
|
|
80
|
+
flexDirection: "row",
|
|
81
|
+
alignItems: "center",
|
|
82
|
+
justifyContent: "center",
|
|
83
|
+
borderRadius: 6,
|
|
84
|
+
borderWidth: 1,
|
|
85
|
+
paddingHorizontal: 12,
|
|
86
|
+
paddingVertical: 6,
|
|
87
|
+
height: 25,
|
|
88
|
+
minWidth: 80,
|
|
89
|
+
shadowOffset: {
|
|
90
|
+
width: 0,
|
|
91
|
+
height: 1
|
|
92
|
+
},
|
|
93
|
+
shadowOpacity: 0.2,
|
|
94
|
+
shadowRadius: 2,
|
|
95
|
+
elevation: 2
|
|
96
|
+
},
|
|
97
|
+
dot: {
|
|
98
|
+
width: 5,
|
|
99
|
+
height: 5,
|
|
100
|
+
borderRadius: 3,
|
|
101
|
+
marginRight: 6,
|
|
102
|
+
shadowColor: _sharedUi.night.color.text,
|
|
103
|
+
shadowOffset: {
|
|
104
|
+
width: 0,
|
|
105
|
+
height: 0
|
|
106
|
+
},
|
|
107
|
+
shadowOpacity: 0.6,
|
|
108
|
+
shadowRadius: 2
|
|
109
|
+
},
|
|
110
|
+
text: {
|
|
111
|
+
fontSize: 10,
|
|
112
|
+
fontWeight: "600",
|
|
113
|
+
letterSpacing: 0.5,
|
|
114
|
+
textTransform: "uppercase",
|
|
115
|
+
fontFamily: _sharedUi.monoFont,
|
|
116
|
+
height: 12
|
|
117
|
+
}
|
|
118
|
+
});
|
|
@@ -1 +1,48 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ZustandDetailViewToggle = void 0;
|
|
7
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
8
|
+
var _sharedUi = require("@buoy-gg/shared-ui");
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
11
|
+
/**
|
|
12
|
+
* ZustandDetailViewToggle
|
|
13
|
+
*
|
|
14
|
+
* Three-card toggle for switching between Change, State, and Diff views.
|
|
15
|
+
* The cards themselves are the shared `DetailViewToggle`; this file owns
|
|
16
|
+
* the zustand view list and testID prefix.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
const VIEWS = [{
|
|
20
|
+
key: "change",
|
|
21
|
+
label: "CHANGE",
|
|
22
|
+
description: "View change details",
|
|
23
|
+
icon: _sharedUi.FileText
|
|
24
|
+
}, {
|
|
25
|
+
key: "state",
|
|
26
|
+
label: "STATE",
|
|
27
|
+
description: "View current state",
|
|
28
|
+
icon: _sharedUi.Database
|
|
29
|
+
}, {
|
|
30
|
+
key: "diff",
|
|
31
|
+
label: "DIFF",
|
|
32
|
+
description: "Compare changes",
|
|
33
|
+
icon: _sharedUi.GitBranch
|
|
34
|
+
}];
|
|
35
|
+
const DIFF_DISABLED = ["diff"];
|
|
36
|
+
const ZustandDetailViewToggle = exports.ZustandDetailViewToggle = /*#__PURE__*/(0, _react.memo)(function ZustandDetailViewToggle({
|
|
37
|
+
activeView,
|
|
38
|
+
onViewChange,
|
|
39
|
+
diffDisabled = false
|
|
40
|
+
}) {
|
|
41
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DetailViewToggle, {
|
|
42
|
+
views: VIEWS,
|
|
43
|
+
activeView: activeView,
|
|
44
|
+
onViewChange: onViewChange,
|
|
45
|
+
disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
|
|
46
|
+
testIDPrefix: "buoy-zustand"
|
|
47
|
+
});
|
|
48
|
+
});
|
|
@@ -1 +1,43 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ZustandEventFilterView = ZustandEventFilterView;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _sharedUi = require("@buoy-gg/shared-ui");
|
|
9
|
+
var _zustandStateStore = require("../utils/zustandStateStore");
|
|
10
|
+
var _testIDs = require("../utils/testIDs");
|
|
11
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
|
+
/**
|
|
13
|
+
* ZustandEventFilterView
|
|
14
|
+
*
|
|
15
|
+
* The shared `EntityFilterView` with zustand's nouns: registered stores you
|
|
16
|
+
* can tap to hide, active store-name patterns, and how it works.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
const EXAMPLES = ["• auth → hides authStore from stores & events", "• temp → hides tempStore, tempUserStore", "• cart → hides cartStore from both tabs"];
|
|
20
|
+
function ZustandEventFilterView({
|
|
21
|
+
ignoredPatterns,
|
|
22
|
+
onTogglePattern,
|
|
23
|
+
onAddPattern,
|
|
24
|
+
stores
|
|
25
|
+
}) {
|
|
26
|
+
const entities = (0, _react.useMemo)(() => stores.map(store => ({
|
|
27
|
+
name: store.name,
|
|
28
|
+
color: _zustandStateStore.zustandStateStore.getStoreColor(store.name)
|
|
29
|
+
})), [stores]);
|
|
30
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EntityFilterView, {
|
|
31
|
+
entities: entities,
|
|
32
|
+
ignoredPatterns: ignoredPatterns,
|
|
33
|
+
onTogglePattern: onTogglePattern,
|
|
34
|
+
onAddPattern: onAddPattern,
|
|
35
|
+
entityNoun: "STORES",
|
|
36
|
+
entitySingular: "store",
|
|
37
|
+
entityKey: "store",
|
|
38
|
+
testIDPrefix: _testIDs.ZUSTAND_TEST_ID,
|
|
39
|
+
slug: _testIDs.slugForTestID,
|
|
40
|
+
howItWorks: "Patterns hide matching stores from both the Stores tab and the Events tab. Tap a store above to quickly add it as a filter.",
|
|
41
|
+
examples: EXAMPLES
|
|
42
|
+
});
|
|
43
|
+
}
|
|
@@ -1 +1,18 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "ZUSTAND_ICON_COLOR", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _sharedUi.ZUSTAND_ICON_COLOR;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "ZustandIcon", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _sharedUi.ZustandIcon;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _sharedUi = require("@buoy-gg/shared-ui");
|