@buoy-gg/zustand 7.0.41 → 7.0.42
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/README.md +11 -76
- package/lib/commonjs/index.js +1 -105
- package/lib/commonjs/preset.js +1 -102
- package/lib/commonjs/zustand/components/ZustandActionButton.js +1 -118
- package/lib/commonjs/zustand/components/ZustandDetailViewToggle.js +1 -48
- package/lib/commonjs/zustand/components/ZustandEventFilterView.js +1 -43
- package/lib/commonjs/zustand/components/ZustandIcon.js +1 -18
- package/lib/commonjs/zustand/components/ZustandModal.js +1 -772
- package/lib/commonjs/zustand/components/ZustandStateChangeItem.js +1 -117
- package/lib/commonjs/zustand/components/ZustandStateDetailContent.js +1 -372
- package/lib/commonjs/zustand/components/ZustandStateInfoView.js +1 -488
- package/lib/commonjs/zustand/components/ZustandStoreBrowser.js +1 -204
- package/lib/commonjs/zustand/components/ZustandStoreDetailContent.js +1 -471
- package/lib/commonjs/zustand/hooks/useZustandStateChanges.js +1 -74
- package/lib/commonjs/zustand/sync/zustandSyncAdapter.js +1 -418
- package/lib/commonjs/zustand/types/index.js +1 -1
- package/lib/commonjs/zustand/utils/buoyZustandMiddleware.js +1 -284
- package/lib/commonjs/zustand/utils/editableState.js +1 -146
- package/lib/commonjs/zustand/utils/snapshotProvider.js +1 -209
- package/lib/commonjs/zustand/utils/testIDs.js +1 -82
- package/lib/commonjs/zustand/utils/zustandStateStore.js +1 -379
- package/lib/module/index.js +1 -90
- package/lib/module/preset.js +1 -98
- package/lib/module/zustand/components/ZustandActionButton.js +1 -114
- package/lib/module/zustand/components/ZustandDetailViewToggle.js +1 -43
- package/lib/module/zustand/components/ZustandEventFilterView.js +1 -39
- package/lib/module/zustand/components/ZustandIcon.js +1 -11
- package/lib/module/zustand/components/ZustandModal.js +1 -767
- package/lib/module/zustand/components/ZustandStateChangeItem.js +1 -113
- package/lib/module/zustand/components/ZustandStateDetailContent.js +1 -368
- package/lib/module/zustand/components/ZustandStateInfoView.js +1 -483
- package/lib/module/zustand/components/ZustandStoreBrowser.js +1 -200
- package/lib/module/zustand/components/ZustandStoreDetailContent.js +1 -469
- package/lib/module/zustand/hooks/useZustandStateChanges.js +1 -70
- package/lib/module/zustand/sync/zustandSyncAdapter.js +1 -415
- package/lib/module/zustand/types/index.js +1 -1
- package/lib/module/zustand/utils/buoyZustandMiddleware.js +1 -278
- package/lib/module/zustand/utils/editableState.js +1 -138
- package/lib/module/zustand/utils/snapshotProvider.js +1 -209
- package/lib/module/zustand/utils/testIDs.js +1 -74
- package/lib/module/zustand/utils/zustandStateStore.js +1 -375
- package/lib/web/index.mjs +2 -3
- package/package.json +3 -3
- package/lib/typescript/index.d.ts.map +0 -1
- package/lib/typescript/preset.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandActionButton.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandDetailViewToggle.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandEventFilterView.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandIcon.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandModal.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandStateChangeItem.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandStateDetailContent.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandStateInfoView.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandStoreBrowser.d.ts.map +0 -1
- package/lib/typescript/zustand/components/ZustandStoreDetailContent.d.ts.map +0 -1
- package/lib/typescript/zustand/hooks/useZustandStateChanges.d.ts.map +0 -1
- package/lib/typescript/zustand/sync/zustandSyncAdapter.d.ts.map +0 -1
- package/lib/typescript/zustand/types/index.d.ts.map +0 -1
- package/lib/typescript/zustand/utils/buoyZustandMiddleware.d.ts.map +0 -1
- package/lib/typescript/zustand/utils/editableState.d.ts.map +0 -1
- package/lib/typescript/zustand/utils/snapshotProvider.d.ts.map +0 -1
- package/lib/typescript/zustand/utils/testIDs.d.ts.map +0 -1
- package/lib/typescript/zustand/utils/zustandStateStore.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -1,92 +1,27 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
# @buoy-gg/zustand
|
|
4
4
|
|
|
5
5
|
Inspect the Zustand stores you register with Buoy. Review changes, edit state, and restore retained snapshots.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
<a href="https://buoy.gg/buoy/latest/docs/tools/zustand"><b>Zustand guide</b></a> · <a href="https://buoy.gg">buoy.gg</a> · <a href="https://github.com/Buoy-gg/buoy">All tools</a>
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
[](https://www.npmjs.com/package/@buoy-gg/zustand) [](https://www.npmjs.com/package/@buoy-gg/zustand)
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
npm install @buoy-gg/core @buoy-gg/zustand
|
|
13
|
-
```
|
|
11
|
+
<a href="https://buoy.gg/buoy/latest/docs/tools/zustand"><img src="https://raw.githubusercontent.com/Buoy-gg/buoy/main/.github/readme/tools/zustand.png" alt="Watch the Zustand film on buoy.gg" width="640" /></a>
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
</div>
|
|
16
14
|
|
|
17
|
-
|
|
15
|
+
## Install
|
|
18
16
|
|
|
19
17
|
```bash
|
|
20
|
-
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
For Expo, initialize Buoy before rendering the menu:
|
|
24
|
-
|
|
25
|
-
```tsx
|
|
26
|
-
import { Buoy } from "@buoy-gg/core";
|
|
27
|
-
|
|
28
|
-
Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
|
|
32
|
-
|
|
33
|
-
## Quick start
|
|
34
|
-
|
|
35
|
-
Pass your stores to `FloatingDevTools` via the `zustandStores` prop — a named map of your store hooks. No middleware, no store changes; observation is subscribe-only, so your stores stay untouched.
|
|
36
|
-
|
|
37
|
-
```tsx
|
|
38
|
-
import { FloatingDevTools } from '@buoy-gg/core';
|
|
39
|
-
import { useCounterStore } from './stores/counter';
|
|
40
|
-
import { useAuthStore } from './stores/auth';
|
|
41
|
-
import { useCartStore } from './stores/cart';
|
|
42
|
-
|
|
43
|
-
export default function App() {
|
|
44
|
-
return (
|
|
45
|
-
<>
|
|
46
|
-
<YourApp />
|
|
47
|
-
<FloatingDevTools
|
|
48
|
-
zustandStores={{
|
|
49
|
-
counterStore: useCounterStore,
|
|
50
|
-
authStore: useAuthStore,
|
|
51
|
-
cartStore: useCartStore,
|
|
52
|
-
}}
|
|
53
|
-
/>
|
|
54
|
-
</>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
18
|
+
npm install @buoy-gg/core @buoy-gg/zustand
|
|
57
19
|
```
|
|
58
20
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
## Check the integration
|
|
62
|
-
|
|
63
|
-
Change a value in a registered store through your app and find its diff in Buoy. Edits and resets change the real store; test with disposable data. Register the same store instances that your screens use.
|
|
64
|
-
|
|
65
|
-
## What you get
|
|
21
|
+
Pass your store hooks to `<FloatingDevTools />` through the `zustandStores` prop. Buoy only subscribes, so your stores don't change.
|
|
66
22
|
|
|
67
|
-
|
|
68
|
-
- **Side-by-side diffs** — additions, removals, and modifications highlighted, in tree or split view
|
|
69
|
-
- **Jump to state** — restore any store to a previously captured state instantly
|
|
70
|
-
- **One-tap reset** — send any store back to its initial state without restarting the app
|
|
71
|
-
- **Persist awareness** — stores using Zustand's `persist` middleware are auto-detected and tagged
|
|
72
|
-
- **Store color coding** — each store keeps a consistent color across the UI for easy tracking
|
|
73
|
-
- **Search & filter** — find changes by store name or changed keys, or show only updates that modified state
|
|
74
|
-
- **Optional `buoyDevTools()` middleware** — wrap individual stores for partial-state capture and per-update timing (flags updates over the 16ms frame budget)
|
|
75
|
-
|
|
76
|
-
## Desktop & AI
|
|
77
|
-
|
|
78
|
-
To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
|
|
79
|
-
|
|
80
|
-
## Account and plan requirements
|
|
81
|
-
|
|
82
|
-
Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
|
|
23
|
+
The [Zustand guide](https://buoy.gg/buoy/latest/docs/tools/zustand) covers setup, what it captures and its limits. New to Buoy? Start with the [Quick start](https://buoy.gg/buoy/latest/docs/quick-start).
|
|
83
24
|
|
|
84
25
|
---
|
|
85
26
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)
|
|
89
|
-
|
|
90
|
-
## Web support (unreleased)
|
|
91
|
-
|
|
92
|
-
Register live stores with watchStores. The shared browser panel edits the same store objects used by the app. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.
|
|
27
|
+
<sub>Part of <a href="https://buoy.gg">Buoy</a>, developer tools that live inside your app. Proprietary software. © Buoy LLC. <a href="https://buoy.gg/terms">Terms</a></sub>
|
package/lib/commonjs/index.js
CHANGED
|
@@ -1,105 +1 @@
|
|
|
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");
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ZUSTAND_ICON_COLOR",{enumerable:true,get:function(){return _ZustandIcon.ZUSTAND_ICON_COLOR}});Object.defineProperty(exports,"ZustandIcon",{enumerable:true,get:function(){return _ZustandIcon.ZustandIcon}});Object.defineProperty(exports,"ZustandModal",{enumerable:true,get:function(){return _ZustandModal.ZustandModal}});Object.defineProperty(exports,"ZustandStateChangeItem",{enumerable:true,get:function(){return _ZustandStateChangeItem.ZustandStateChangeItem}});Object.defineProperty(exports,"ZustandStateDetailContent",{enumerable:true,get:function(){return _ZustandStateDetailContent.ZustandStateDetailContent}});Object.defineProperty(exports,"ZustandStateDetailFooter",{enumerable:true,get:function(){return _ZustandStateDetailContent.ZustandStateDetailFooter}});Object.defineProperty(exports,"ZustandToolView",{enumerable:true,get:function(){return _ZustandModal.ZustandToolView}});Object.defineProperty(exports,"buoyDevTools",{enumerable:true,get:function(){return _buoyZustandMiddleware.buoyDevTools}});Object.defineProperty(exports,"createZustandTool",{enumerable:true,get:function(){return _preset.createZustandTool}});Object.defineProperty(exports,"isStoreInstrumented",{enumerable:true,get:function(){return _buoyZustandMiddleware.isStoreInstrumented}});Object.defineProperty(exports,"useZustandStateChanges",{enumerable:true,get:function(){return _useZustandStateChanges.useZustandStateChanges}});Object.defineProperty(exports,"watchStores",{enumerable:true,get:function(){return _buoyZustandMiddleware.watchStores}});Object.defineProperty(exports,"zustandStateStore",{enumerable:true,get:function(){return _zustandStateStore.zustandStateStore}});Object.defineProperty(exports,"zustandSyncAdapter",{enumerable:true,get:function(){return _zustandSyncAdapter.zustandSyncAdapter}});Object.defineProperty(exports,"zustandToolPreset",{enumerable:true,get:function(){return _preset.zustandToolPreset}});require("./zustand/utils/snapshotProvider");var _preset=require("./preset");var _buoyZustandMiddleware=require("./zustand/utils/buoyZustandMiddleware");var _useZustandStateChanges=require("./zustand/hooks/useZustandStateChanges");var _ZustandModal=require("./zustand/components/ZustandModal");var _ZustandStateChangeItem=require("./zustand/components/ZustandStateChangeItem");var _ZustandStateDetailContent=require("./zustand/components/ZustandStateDetailContent");var _ZustandIcon=require("./zustand/components/ZustandIcon");var _zustandSyncAdapter=require("./zustand/sync/zustandSyncAdapter");var _zustandStateStore=require("./zustand/utils/zustandStateStore");
|
package/lib/commonjs/preset.js
CHANGED
|
@@ -1,102 +1 @@
|
|
|
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
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.createZustandTool=createZustandTool;exports.zustandToolPreset=void 0;var _ZustandModal=require("./zustand/components/ZustandModal");var _ZustandIcon=require("./zustand/components/ZustandIcon");var _jsxRuntime=require("react/jsx-runtime");const zustandToolPreset=exports.zustandToolPreset={id:"zustand",name:"ZUSTAND",description:"Zustand store & state inspector",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_ZustandIcon.ZustandIcon,{size:e}),component:_ZustandModal.ZustandModal,props:{enableSharedModalDimensions:false}};function createZustandTool(e){return{id:e?.id||"zustand",name:e?.name||"ZUSTAND",description:e?.description||"Zustand store & state inspector",slot:"both",icon:({size:n})=>(0,_jsxRuntime.jsx)(_ZustandIcon.ZustandIcon,{size:n,color:e?.iconColor}),component:_ZustandModal.ZustandModal,props:{enableSharedModalDimensions:e?.enableSharedModalDimensions!==void 0?e.enableSharedModalDimensions:false}}}
|
|
@@ -1,118 +1 @@
|
|
|
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
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ZustandActionButton=ZustandActionButton;var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const buttonConfigs={copy:{color:_sharedUi.night.color.accent,backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorder,textColor:_sharedUi.night.color.accent},reset:{color:_sharedUi.night.color.warning,backgroundColor:_sharedUi.night.color.warningSoft,borderColor:_sharedUi.night.color.warning+"40",textColor:_sharedUi.night.color.warning},clear:{color:_sharedUi.night.color.danger,backgroundColor:_sharedUi.night.color.dangerSoft,borderColor:_sharedUi.night.color.danger+"40",textColor:_sharedUi.night.color.danger},jump:{color:_sharedUi.night.color.warning,backgroundColor:_sharedUi.night.color.warningSoft,borderColor:_sharedUi.night.color.warning+"40",textColor:_sharedUi.night.color.warning}};function ZustandActionButton({onPress:e,text:r,type:n,disabled:o=false,testID:i}){const t=buttonConfigs[n];return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{disabled:o,onPress:e,style:[styles.button,{backgroundColor:o?_sharedUi.night.color.textTertiary+"1A":t.backgroundColor,borderColor:o?_sharedUi.night.color.textTertiary+"33":t.borderColor,opacity:o?.5:1}],activeOpacity:.7,testID:i,accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{disabled:o},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,{backgroundColor:o?_sharedUi.night.color.textTertiary:t.color}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,{color:o?_sharedUi.night.color.textTertiary:t.textColor}],children:r})]})}const styles=_reactNative.StyleSheet.create({button:{flexDirection:"row",alignItems:"center",justifyContent:"center",borderRadius:6,borderWidth:1,paddingHorizontal:12,paddingVertical:6,height:25,minWidth:80,shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:2},dot:{width:5,height:5,borderRadius:3,marginRight:6,shadowColor:_sharedUi.night.color.text,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:2},text:{fontSize:10,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:_sharedUi.monoFont,height:12}});
|
|
@@ -1,48 +1 @@
|
|
|
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
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ZustandDetailViewToggle=void 0;var _react=_interopRequireWildcard(require("react"));var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(u,a){if("function"==typeof WeakMap)var o=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,c){if(!c&&e&&e.__esModule)return e;var t,n,r={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return r;if(t=c?s:o){if(t.has(e))return t.get(e);t.set(e,r)}for(const i in e)"default"!==i&&{}.hasOwnProperty.call(e,i)&&((n=(t=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,i))&&(n.get||n.set)?t(r,i,n):r[i]=e[i]);return r})(u,a)}const VIEWS=[{key:"change",label:"CHANGE",description:"View change details",icon:_sharedUi.FileText},{key:"state",label:"STATE",description:"View current state",icon:_sharedUi.Database},{key:"diff",label:"DIFF",description:"Compare changes",icon:_sharedUi.GitBranch}];const DIFF_DISABLED=["diff"];const ZustandDetailViewToggle=exports.ZustandDetailViewToggle=(0,_react.memo)(function u({activeView:a,onViewChange:o,diffDisabled:s=false}){return(0,_jsxRuntime.jsx)(_sharedUi.DetailViewToggle,{views:VIEWS,activeView:a,onViewChange:o,disabledKeys:s?DIFF_DISABLED:void 0,testIDPrefix:"buoy-zustand"})});
|
|
@@ -1,43 +1 @@
|
|
|
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
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ZustandEventFilterView=ZustandEventFilterView;var _react=require("react");var _sharedUi=require("@buoy-gg/shared-ui");var _zustandStateStore=require("../utils/zustandStateStore");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");const EXAMPLES=["\u2022 auth \u2192 hides authStore from stores & events","\u2022 temp \u2192 hides tempStore, tempUserStore","\u2022 cart \u2192 hides cartStore from both tabs"];function ZustandEventFilterView({ignoredPatterns:r,onTogglePattern:s,onAddPattern:a,stores:t}){const o=(0,_react.useMemo)(()=>t.map(e=>({name:e.name,color:_zustandStateStore.zustandStateStore.getStoreColor(e.name)})),[t]);return(0,_jsxRuntime.jsx)(_sharedUi.EntityFilterView,{entities:o,ignoredPatterns:r,onTogglePattern:s,onAddPattern:a,entityNoun:"STORES",entitySingular:"store",entityKey:"store",testIDPrefix:_testIDs.ZUSTAND_TEST_ID,slug:_testIDs.slugForTestID,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.",examples:EXAMPLES})}
|
|
@@ -1,18 +1 @@
|
|
|
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");
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"ZUSTAND_ICON_COLOR",{enumerable:true,get:function(){return _sharedUi.ZUSTAND_ICON_COLOR}});Object.defineProperty(exports,"ZustandIcon",{enumerable:true,get:function(){return _sharedUi.ZustandIcon}});var _sharedUi=require("@buoy-gg/shared-ui");
|