@walkeros/storybook-addon 0.1.2 → 0.2.0
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 +87 -176
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/manager.js +1 -1
- package/dist/manager.js.map +1 -1
- package/dist/preview.cjs +143 -18
- package/dist/preview.cjs.map +1 -1
- package/dist/preview.js +143 -18
- package/dist/preview.js.map +1 -1
- package/package.json +13 -4
package/README.md
CHANGED
|
@@ -1,103 +1,59 @@
|
|
|
1
1
|
# @walkeros/storybook-addon
|
|
2
2
|
|
|
3
3
|
A Storybook addon that integrates walkerOS tagging support for data collection
|
|
4
|
-
and tracking validation.
|
|
5
|
-
|
|
6
|
-
implementation during development.
|
|
4
|
+
and tracking validation. Visualize, debug, and validate walkerOS events in your
|
|
5
|
+
stories.
|
|
7
6
|
|
|
8
7
|
## Features
|
|
9
8
|
|
|
10
|
-
-
|
|
11
|
-
|
|
12
|
-
-
|
|
13
|
-
|
|
14
|
-
-
|
|
15
|
-
|
|
16
|
-
-
|
|
17
|
-
|
|
9
|
+
- 📊 **Events Tab**: View all detected walkerOS events with JSON syntax
|
|
10
|
+
highlighting
|
|
11
|
+
- 🔴 **Live Events Tab**: Real-time event capture as you interact with
|
|
12
|
+
components
|
|
13
|
+
- 🎯 **Visual Highlighting**: Toggle highlights for Context, Entity, Property,
|
|
14
|
+
and Action attributes
|
|
15
|
+
- 🔄 **Auto-refresh**: Updates automatically when navigating stories or changing
|
|
16
|
+
controls
|
|
17
|
+
- ⚙️ **Custom Prefix Support**: Configure custom data attribute prefixes
|
|
18
18
|
- 🚀 **Zero Configuration**: Works out of the box with walkerOS data attributes
|
|
19
19
|
|
|
20
20
|
## Installation
|
|
21
21
|
|
|
22
|
-
Install the addon in your Storybook project:
|
|
23
|
-
|
|
24
22
|
```bash
|
|
25
23
|
npm install --save-dev @walkeros/storybook-addon
|
|
26
24
|
```
|
|
27
25
|
|
|
28
|
-
Then register it in your Storybook configuration:
|
|
29
|
-
|
|
30
26
|
```ts
|
|
31
27
|
// .storybook/main.ts
|
|
32
|
-
import type { StorybookConfig } from '@storybook/react'; // or your framework
|
|
33
|
-
|
|
34
28
|
const config: StorybookConfig = {
|
|
35
|
-
|
|
36
|
-
addons: [
|
|
37
|
-
'@storybook/addon-docs',
|
|
38
|
-
'@walkeros/storybook-addon', // 👈 Add the walkerOS addon
|
|
39
|
-
],
|
|
40
|
-
framework: {
|
|
41
|
-
name: '@storybook/react', // or your framework
|
|
42
|
-
options: {},
|
|
43
|
-
},
|
|
29
|
+
addons: ['@walkeros/storybook-addon'],
|
|
44
30
|
};
|
|
45
|
-
|
|
46
|
-
export default config;
|
|
47
31
|
```
|
|
48
32
|
|
|
49
33
|
## Usage
|
|
50
34
|
|
|
51
|
-
###
|
|
52
|
-
|
|
53
|
-
1. **Install and register** the addon (see Installation above)
|
|
54
|
-
|
|
55
|
-
2. **Add walkerOS tracking** to your components using the `dataElb` prop
|
|
56
|
-
pattern:
|
|
35
|
+
### Basic Setup
|
|
57
36
|
|
|
58
|
-
|
|
59
|
-
|
|
37
|
+
1. **Install and register** the addon
|
|
38
|
+
2. **Add walkerOS tracking** to your components:
|
|
60
39
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
dataElb?: DataElb;
|
|
64
|
-
}
|
|
40
|
+
```tsx
|
|
41
|
+
import { tagger } from '../utils/tagger';
|
|
65
42
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
return <button {...trackingProps}>{label}</button>;
|
|
69
|
-
};
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
3. **View your story** - the walkerOS addon panel will automatically appear and
|
|
73
|
-
show detected events
|
|
74
|
-
|
|
75
|
-
4. **Configure as needed** using the addon's Config tab or story parameters
|
|
76
|
-
|
|
77
|
-
### Configure Storybook Controls
|
|
78
|
-
|
|
79
|
-
Add `dataElb` controls to your stories for easy tracking configuration:
|
|
80
|
-
|
|
81
|
-
```ts
|
|
82
|
-
// Button.stories.ts
|
|
83
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
84
|
-
import { Button } from './Button';
|
|
43
|
+
export const Button = ({ label, onClick }) => {
|
|
44
|
+
const trackingProps = tagger('button').data({ label }).action('click').get();
|
|
85
45
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
control: { type: 'object' },
|
|
92
|
-
description: 'walkerOS tracking configuration',
|
|
93
|
-
},
|
|
94
|
-
// ... your other arg types
|
|
95
|
-
},
|
|
46
|
+
return (
|
|
47
|
+
<button {...trackingProps} onClick={onClick}>
|
|
48
|
+
{label}
|
|
49
|
+
</button>
|
|
50
|
+
);
|
|
96
51
|
};
|
|
52
|
+
```
|
|
97
53
|
|
|
98
|
-
|
|
99
|
-
type Story = StoryObj<typeof meta>;
|
|
54
|
+
3. **Use in stories**:
|
|
100
55
|
|
|
56
|
+
```ts
|
|
101
57
|
export const Primary: Story = {
|
|
102
58
|
args: {
|
|
103
59
|
label: 'Button',
|
|
@@ -110,153 +66,109 @@ export const Primary: Story = {
|
|
|
110
66
|
};
|
|
111
67
|
```
|
|
112
68
|
|
|
113
|
-
### Configuration
|
|
114
|
-
|
|
115
|
-
The addon works with default settings out of the box, but you can customize its
|
|
116
|
-
behavior:
|
|
69
|
+
### Custom Prefix Configuration
|
|
117
70
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
Configure the addon globally in your Storybook preview:
|
|
71
|
+
Configure a custom prefix in your Storybook preview:
|
|
121
72
|
|
|
122
73
|
```ts
|
|
123
74
|
// .storybook/preview.ts
|
|
124
|
-
import type { Preview } from '@storybook/react';
|
|
125
|
-
|
|
126
75
|
const preview: Preview = {
|
|
127
76
|
parameters: {
|
|
128
|
-
|
|
129
|
-
|
|
77
|
+
walkerOS: {
|
|
78
|
+
prefix: 'data-elb',
|
|
79
|
+
autoRefresh: true,
|
|
80
|
+
},
|
|
130
81
|
},
|
|
131
82
|
};
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Update your tagger configuration to match:
|
|
132
86
|
|
|
133
|
-
|
|
87
|
+
```ts
|
|
88
|
+
// utils/tagger.ts
|
|
89
|
+
const taggerInstance = createTagger({
|
|
90
|
+
prefix: 'data-elb',
|
|
91
|
+
});
|
|
134
92
|
```
|
|
135
93
|
|
|
136
|
-
|
|
94
|
+
## Addon Panels
|
|
137
95
|
|
|
138
|
-
|
|
96
|
+
### Events Tab
|
|
139
97
|
|
|
140
|
-
|
|
141
|
-
|
|
98
|
+
Shows all walkerOS events detected in the current story's DOM. Click "Update
|
|
99
|
+
events" to manually refresh.
|
|
142
100
|
|
|
143
|
-
|
|
101
|
+
### Live Events Tab
|
|
144
102
|
|
|
145
|
-
|
|
103
|
+
Captures events in real-time as you interact with components. Events are
|
|
104
|
+
automatically sent to the panel via the walker collector.
|
|
105
|
+
|
|
106
|
+
### Visual Highlighting
|
|
146
107
|
|
|
147
|
-
|
|
108
|
+
Use the highlight toggles to visually identify different types of walkerOS
|
|
109
|
+
attributes:
|
|
148
110
|
|
|
149
|
-
|
|
111
|
+
- **Context**: Yellow outline for context attributes
|
|
112
|
+
- **Entity**: Green outline for entity attributes
|
|
113
|
+
- **Property**: Red outline for property attributes
|
|
114
|
+
- **Action**: Purple outline for action attributes
|
|
115
|
+
|
|
116
|
+
## API Reference
|
|
150
117
|
|
|
151
118
|
```ts
|
|
152
|
-
import {
|
|
153
|
-
DataElb, // TypeScript interface for dataElb prop
|
|
154
|
-
} from '@walkeros/storybook-addon';
|
|
119
|
+
import { DataElb, dataElbArgTypes } from '@walkeros/storybook-addon';
|
|
155
120
|
```
|
|
156
121
|
|
|
157
122
|
### `DataElb` Interface
|
|
158
123
|
|
|
159
|
-
TypeScript interface for the tracking prop pattern:
|
|
160
|
-
|
|
161
124
|
```ts
|
|
162
125
|
interface DataElb {
|
|
163
126
|
entity?: string;
|
|
164
127
|
trigger?: string;
|
|
165
128
|
action?: string;
|
|
166
|
-
data?: WalkerOS.Properties;
|
|
167
|
-
context?: WalkerOS.Properties;
|
|
168
|
-
globals?: WalkerOS.Properties;
|
|
169
|
-
link?: Record<string, string>;
|
|
129
|
+
data?: WalkerOS.Properties;
|
|
130
|
+
context?: WalkerOS.Properties;
|
|
131
|
+
globals?: WalkerOS.Properties;
|
|
132
|
+
link?: Record<string, string>;
|
|
170
133
|
}
|
|
171
134
|
```
|
|
172
135
|
|
|
173
|
-
###
|
|
174
|
-
|
|
175
|
-
The addon provides these configuration options (accessible via the Config tab):
|
|
176
|
-
|
|
177
|
-
#### `autoRefresh`
|
|
178
|
-
|
|
179
|
-
- **Type**: `boolean`
|
|
180
|
-
- **Default**: `true`
|
|
181
|
-
- **Description**: Automatically refresh events when navigating between stories
|
|
182
|
-
or changing controls
|
|
183
|
-
|
|
184
|
-
#### `prefix`
|
|
185
|
-
|
|
186
|
-
- **Type**: `string`
|
|
187
|
-
- **Default**: `'data-elb'`
|
|
188
|
-
- **Description**: Data attribute prefix used by walkerOS (must match your
|
|
189
|
-
walkerOS setup)
|
|
190
|
-
|
|
191
|
-
## How It Works
|
|
192
|
-
|
|
193
|
-
The addon works by:
|
|
194
|
-
|
|
195
|
-
1. **Event Detection**: Uses `getAllEvents` from `@walkeros/web-source-browser`
|
|
196
|
-
to scan your story's DOM for walkerOS data attributes
|
|
197
|
-
2. **Real-time Updates**: Automatically refreshes when stories change or
|
|
198
|
-
controls are updated
|
|
199
|
-
3. **Event Display**: Shows detailed information about each detected event with
|
|
200
|
-
JSON syntax highlighting
|
|
201
|
-
4. **Interactive UI**: Provides an expandable list interface for easy event
|
|
202
|
-
inspection
|
|
203
|
-
5. **Zero Configuration**: Works without initializing walkerOS - just add the
|
|
204
|
-
`dataElb` prop to your components
|
|
136
|
+
### Story ArgTypes
|
|
205
137
|
|
|
206
|
-
|
|
138
|
+
```ts
|
|
139
|
+
export default {
|
|
140
|
+
argTypes: {
|
|
141
|
+
...dataElbArgTypes,
|
|
142
|
+
// Adds a walkerOS object control to your story
|
|
143
|
+
},
|
|
144
|
+
};
|
|
145
|
+
```
|
|
207
146
|
|
|
208
|
-
|
|
147
|
+
## Configuration
|
|
209
148
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
-
|
|
213
|
-
-
|
|
214
|
-
- HTML
|
|
215
|
-
- Svelte
|
|
149
|
+
| Option | Type | Default | Description |
|
|
150
|
+
| ------------- | --------- | ------------ | ---------------------------------------------------- |
|
|
151
|
+
| `prefix` | `string` | `'data-elb'` | Data attribute prefix (must match your walker setup) |
|
|
152
|
+
| `autoRefresh` | `boolean` | `true` | Auto-refresh events on story/control changes |
|
|
216
153
|
|
|
217
154
|
## Troubleshooting
|
|
218
155
|
|
|
219
156
|
### Events Not Showing
|
|
220
157
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
prop:
|
|
225
|
-
|
|
226
|
-
```tsx
|
|
227
|
-
<Button label="Click me" dataElb={{ entity: 'button', action: 'click' }} />
|
|
228
|
-
```
|
|
229
|
-
|
|
230
|
-
2. **Verify prefix**: Check that the prefix in the Config tab matches your
|
|
231
|
-
attributes (default: `data-elb`)
|
|
232
|
-
|
|
233
|
-
3. **Check rendering**: Ensure your components are actually rendered in the
|
|
234
|
-
story DOM
|
|
235
|
-
|
|
236
|
-
4. **Manual refresh**: Try clicking "Update events" button in the addon panel
|
|
237
|
-
|
|
238
|
-
5. **Console errors**: Check browser console for any JavaScript errors
|
|
239
|
-
|
|
240
|
-
### Common Issues
|
|
241
|
-
|
|
242
|
-
- **Empty event list**: Components may not have walkerOS attributes or the
|
|
243
|
-
prefix doesn't match
|
|
244
|
-
- **Outdated events**: Try disabling and re-enabling auto-refresh, or manually
|
|
245
|
-
refresh
|
|
246
|
-
- **Missing addon panel**: Ensure the addon is properly registered in
|
|
247
|
-
`.storybook/main.ts`
|
|
158
|
+
- Ensure components have walkerOS attributes: `data-elb`, `data-elb-*`, etc.
|
|
159
|
+
- Check prefix matches between addon config and tagger config
|
|
160
|
+
- Try manual refresh with "Update events" button
|
|
248
161
|
|
|
249
|
-
|
|
162
|
+
### Live Events Not Working
|
|
250
163
|
|
|
251
|
-
|
|
252
|
-
|
|
164
|
+
- Verify walker is properly initialized with matching prefix
|
|
165
|
+
- Check browser console for walker initialization errors
|
|
166
|
+
- Ensure components generate events when clicked/interacted with
|
|
253
167
|
|
|
254
|
-
|
|
168
|
+
### Highlighting Not Working
|
|
255
169
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
3. Make changes in `apps/storybook-addon/`
|
|
259
|
-
4. Test with the demo in `apps/demos/storybook/`
|
|
170
|
+
- Confirm prefix configuration matches in both addon and tagger
|
|
171
|
+
- Check that elements have the expected data attributes in DOM inspector
|
|
260
172
|
|
|
261
173
|
## License
|
|
262
174
|
|
|
@@ -266,4 +178,3 @@ MIT © [elbwalker GmbH](https://www.elbwalker.com)
|
|
|
266
178
|
|
|
267
179
|
- [walkerOS Documentation](https://docs.walkeros.com)
|
|
268
180
|
- [GitHub Repository](https://github.com/elbwalker/walkerOS)
|
|
269
|
-
- [walkerOS Website](https://www.walkeros.com)
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var t={dataElb:{name:"walkerOS Data",description:"walkerOS tracking configuration",control:{type:"object"},table:{category:"walkerOS"}}};var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`,HIGHLIGHT:`${e}/highlight`,LIVE_EVENT:`${e}/live-event`};exports.EVENTS=r;exports.dataElbArgTypes=t;//# sourceMappingURL=index.cjs.map
|
|
1
|
+
'use strict';var t={dataElb:{name:"walkerOS Data",description:"walkerOS tracking configuration",control:{type:"object"},table:{category:"walkerOS"}}};var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`,HIGHLIGHT:`${e}/highlight`,LIVE_EVENT:`${e}/live-event`,ATTRIBUTES_RESULT:`${e}/attributes-result`,ATTRIBUTES_REQUEST:`${e}/attributes-request`};exports.EVENTS=r;exports.dataElbArgTypes=t;//# sourceMappingURL=index.cjs.map
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts","../src/constants.ts"],"names":["dataElbArgTypes","ADDON_ID","EVENTS"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/types.ts","../src/constants.ts"],"names":["dataElbArgTypes","ADDON_ID","EVENTS"],"mappings":"aA0CO,IAAMA,CAAAA,CAAkB,CAC7B,OAAA,CAAS,CACP,IAAA,CAAM,gBACN,WAAA,CAAa,iCAAA,CACb,OAAA,CAAS,CAAE,IAAA,CAAM,QAAS,EAC1B,KAAA,CAAO,CACL,QAAA,CAAU,UACZ,CACF,CACF,ECnDO,IAAMC,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CAAA,CACpB,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,UAAA,CAAA,CACtB,UAAA,CAAY,CAAA,EAAGA,CAAQ,CAAA,WAAA,CAAA,CACvB,iBAAA,CAAmB,CAAA,EAAGA,CAAQ,CAAA,kBAAA,CAAA,CAC9B,kBAAA,CAAoB,CAAA,EAAGA,CAAQ,CAAA,mBAAA,CACjC","file":"index.cjs","sourcesContent":["// Import WalkerOS Property types\nimport type { WalkerOS } from '@walkeros/core';\nimport type { Walker } from '@walkeros/web-core';\n\nexport interface WalkerOSAddon {\n autoRefresh: boolean;\n prefix?: string;\n highlights?: {\n context: boolean;\n entity: boolean;\n property: boolean;\n action: boolean;\n globals: boolean;\n };\n}\n\nexport interface AttributeNode {\n element: string;\n path: string;\n htmlMarkup?: string; // Store the HTML string instead of DOM reference\n attributes: {\n entity?: string;\n action?: string;\n context?: WalkerOS.Properties;\n globals?: WalkerOS.Properties;\n properties?: WalkerOS.Properties;\n };\n children: AttributeNode[];\n}\n\n// walkerOS tracking interface for clean component APIs\nexport interface DataElb {\n entity?: string;\n trigger?: string;\n action?: string;\n data?: WalkerOS.Properties;\n context?: WalkerOS.Properties;\n globals?: WalkerOS.Properties;\n link?: Record<string, string>;\n}\n\n// Storybook argTypes for DataElb interface\nexport const dataElbArgTypes = {\n dataElb: {\n name: 'walkerOS Data',\n description: 'walkerOS tracking configuration',\n control: { type: 'object' },\n table: {\n category: 'walkerOS',\n },\n },\n};\n","export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n HIGHLIGHT: `${ADDON_ID}/highlight`,\n LIVE_EVENT: `${ADDON_ID}/live-event`,\n ATTRIBUTES_RESULT: `${ADDON_ID}/attributes-result`,\n ATTRIBUTES_REQUEST: `${ADDON_ID}/attributes-request`,\n};\n"]}
|
package/dist/index.d.cts
CHANGED
|
@@ -8,6 +8,7 @@ interface WalkerOSAddon {
|
|
|
8
8
|
entity: boolean;
|
|
9
9
|
property: boolean;
|
|
10
10
|
action: boolean;
|
|
11
|
+
globals: boolean;
|
|
11
12
|
};
|
|
12
13
|
}
|
|
13
14
|
interface DataElb {
|
|
@@ -37,6 +38,8 @@ declare const EVENTS: {
|
|
|
37
38
|
REQUEST: string;
|
|
38
39
|
HIGHLIGHT: string;
|
|
39
40
|
LIVE_EVENT: string;
|
|
41
|
+
ATTRIBUTES_RESULT: string;
|
|
42
|
+
ATTRIBUTES_REQUEST: string;
|
|
40
43
|
};
|
|
41
44
|
|
|
42
45
|
export { type DataElb, EVENTS, type WalkerOSAddon, dataElbArgTypes };
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ interface WalkerOSAddon {
|
|
|
8
8
|
entity: boolean;
|
|
9
9
|
property: boolean;
|
|
10
10
|
action: boolean;
|
|
11
|
+
globals: boolean;
|
|
11
12
|
};
|
|
12
13
|
}
|
|
13
14
|
interface DataElb {
|
|
@@ -37,6 +38,8 @@ declare const EVENTS: {
|
|
|
37
38
|
REQUEST: string;
|
|
38
39
|
HIGHLIGHT: string;
|
|
39
40
|
LIVE_EVENT: string;
|
|
41
|
+
ATTRIBUTES_RESULT: string;
|
|
42
|
+
ATTRIBUTES_REQUEST: string;
|
|
40
43
|
};
|
|
41
44
|
|
|
42
45
|
export { type DataElb, EVENTS, type WalkerOSAddon, dataElbArgTypes };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var t={dataElb:{name:"walkerOS Data",description:"walkerOS tracking configuration",control:{type:"object"},table:{category:"walkerOS"}}};var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`,HIGHLIGHT:`${e}/highlight`,LIVE_EVENT:`${e}/live-event`};export{r as EVENTS,t as dataElbArgTypes};//# sourceMappingURL=index.js.map
|
|
1
|
+
var t={dataElb:{name:"walkerOS Data",description:"walkerOS tracking configuration",control:{type:"object"},table:{category:"walkerOS"}}};var e="walkerOS";var r={RESULT:`${e}/result`,REQUEST:`${e}/request`,HIGHLIGHT:`${e}/highlight`,LIVE_EVENT:`${e}/live-event`,ATTRIBUTES_RESULT:`${e}/attributes-result`,ATTRIBUTES_REQUEST:`${e}/attributes-request`};export{r as EVENTS,t as dataElbArgTypes};//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts","../src/constants.ts"],"names":["dataElbArgTypes","ADDON_ID","EVENTS"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/types.ts","../src/constants.ts"],"names":["dataElbArgTypes","ADDON_ID","EVENTS"],"mappings":"AA0CO,IAAMA,CAAAA,CAAkB,CAC7B,OAAA,CAAS,CACP,IAAA,CAAM,gBACN,WAAA,CAAa,iCAAA,CACb,OAAA,CAAS,CAAE,IAAA,CAAM,QAAS,EAC1B,KAAA,CAAO,CACL,QAAA,CAAU,UACZ,CACF,CACF,ECnDO,IAAMC,CAAAA,CAAW,UAAA,CAIjB,IAAMC,CAAAA,CAAS,CACpB,MAAA,CAAQ,CAAA,EAAGD,CAAQ,UACnB,OAAA,CAAS,CAAA,EAAGA,CAAQ,CAAA,QAAA,CAAA,CACpB,SAAA,CAAW,CAAA,EAAGA,CAAQ,CAAA,UAAA,CAAA,CACtB,UAAA,CAAY,CAAA,EAAGA,CAAQ,CAAA,WAAA,CAAA,CACvB,iBAAA,CAAmB,CAAA,EAAGA,CAAQ,CAAA,kBAAA,CAAA,CAC9B,kBAAA,CAAoB,CAAA,EAAGA,CAAQ,CAAA,mBAAA,CACjC","file":"index.js","sourcesContent":["// Import WalkerOS Property types\nimport type { WalkerOS } from '@walkeros/core';\nimport type { Walker } from '@walkeros/web-core';\n\nexport interface WalkerOSAddon {\n autoRefresh: boolean;\n prefix?: string;\n highlights?: {\n context: boolean;\n entity: boolean;\n property: boolean;\n action: boolean;\n globals: boolean;\n };\n}\n\nexport interface AttributeNode {\n element: string;\n path: string;\n htmlMarkup?: string; // Store the HTML string instead of DOM reference\n attributes: {\n entity?: string;\n action?: string;\n context?: WalkerOS.Properties;\n globals?: WalkerOS.Properties;\n properties?: WalkerOS.Properties;\n };\n children: AttributeNode[];\n}\n\n// walkerOS tracking interface for clean component APIs\nexport interface DataElb {\n entity?: string;\n trigger?: string;\n action?: string;\n data?: WalkerOS.Properties;\n context?: WalkerOS.Properties;\n globals?: WalkerOS.Properties;\n link?: Record<string, string>;\n}\n\n// Storybook argTypes for DataElb interface\nexport const dataElbArgTypes = {\n dataElb: {\n name: 'walkerOS Data',\n description: 'walkerOS tracking configuration',\n control: { type: 'object' },\n table: {\n category: 'walkerOS',\n },\n },\n};\n","export const ADDON_ID = 'walkerOS';\nexport const PANEL_ID = `${ADDON_ID}/panel`;\nexport const KEY = `walkerOS`;\n\nexport const EVENTS = {\n RESULT: `${ADDON_ID}/result`,\n REQUEST: `${ADDON_ID}/request`,\n HIGHLIGHT: `${ADDON_ID}/highlight`,\n LIVE_EVENT: `${ADDON_ID}/live-event`,\n ATTRIBUTES_RESULT: `${ADDON_ID}/attributes-result`,\n ATTRIBUTES_REQUEST: `${ADDON_ID}/attributes-request`,\n};\n"]}
|
package/dist/manager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e,{memo,useState,Fragment,useCallback,useEffect}from'react';import {useStorybookApi,useGlobals,useChannel,addons,types}from'storybook/manager-api';import {AddonPanel,TabsState,Placeholder,Button,SyntaxHighlighter,Form}from'storybook/internal/components';import {styled,useTheme}from'storybook/theming';import {CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED}from'storybook/internal/core-events';import {ArrowDownIcon}from'@storybook/icons';var a="walkerOS",F=`${a}/panel`;var S={RESULT:`${a}/result`,REQUEST:`${a}/request`,HIGHLIGHT:`${a}/highlight`,LIVE_EVENT:`${a}/live-event`};var K=styled.ul({listStyle:"none",fontSize:14,padding:0,margin:0}),X=styled.div(({theme:t})=>({display:"flex",width:"100%",borderBottom:`1px solid ${t.appBorderColor}`,"&:hover":{background:t.background.hoverable}})),Z=styled(ArrowDownIcon)(({theme:t})=>({height:10,width:10,minWidth:10,color:t.color.mediumdark,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),R=styled.div(({theme:t})=>({padding:"6px 12px",paddingLeft:9,background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis","&:focus":{outline:"0 none",borderLeft:`3px solid ${t.color.secondary}`},"& .event-base":{color:"inherit",fontWeight:"500"},"& .event-separator":{color:t.color.mediumdark,fontWeight:"300"},"& .event-preview":{color:t.color.mediumdark,fontWeight:"400"}})),tt=styled.div(({theme:t})=>({padding:t.layoutMargin,background:t.background.content,fontFamily:t.typography.fonts.mono,whiteSpace:"pre-wrap",textAlign:"left"})),et=memo(({item:t})=>{let[i,n]=useState(false);return e.createElement(Fragment,null,e.createElement(X,null,e.createElement(R,{onClick:()=>n(!i),role:"button"},e.createElement(Z,{style:{transform:`rotate(${i?0:-90}deg)`}}),t.title)),i?e.createElement(tt,null,t.content):null)}),W=memo(({items:t})=>e.createElement(K,null,t.map((i,n)=>e.createElement(et,{key:`${i.title}-${n}`,item:i}))));var L=({config:t,toggleHighlight:i})=>{var p,o,d,g,s,c,w,h,k,v,b,u,m,C,O,$;let n=useTheme();return e.createElement("div",{style:{display:"flex",gap:"4px",alignItems:"center"}},e.createElement("span",{style:{fontSize:"12px",color:n.color.mediumdark,marginRight:"8px"}},"Highlight:"),e.createElement(Button,{size:"small",variant:(p=t.highlights)!=null&&p.context?"solid":"outline",onClick:()=>i("context"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(o=t.highlights)!=null&&o.context?"#ffbd44cc":"transparent",color:(d=t.highlights)!=null&&d.context?"#000":n.color.mediumdark,border:`1px solid ${(g=t.highlights)!=null&&g.context?"#ffbd44":n.color.border}`}},"Context"),e.createElement(Button,{size:"small",variant:(s=t.highlights)!=null&&s.entity?"solid":"outline",onClick:()=>i("entity"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(c=t.highlights)!=null&&c.entity?"#00ca4ecc":"transparent",color:(w=t.highlights)!=null&&w.entity?"#fff":n.color.mediumdark,border:`1px solid ${(h=t.highlights)!=null&&h.entity?"#00ca4e":n.color.border}`}},"Entity"),e.createElement(Button,{size:"small",variant:(k=t.highlights)!=null&&k.property?"solid":"outline",onClick:()=>i("property"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(v=t.highlights)!=null&&v.property?"#ff605ccc":"transparent",color:(b=t.highlights)!=null&&b.property?"#fff":n.color.mediumdark,border:`1px solid ${(u=t.highlights)!=null&&u.property?"#ff605c":n.color.border}`}},"Property"),e.createElement(Button,{size:"small",variant:(m=t.highlights)!=null&&m.action?"solid":"outline",onClick:()=>i("action"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:(C=t.highlights)!=null&&C.action?"#9900ffcc":"transparent",color:(O=t.highlights)!=null&&O.action?"#fff":n.color.mediumdark,border:`1px solid ${($=t.highlights)!=null&&$.action?"#9900ff":n.color.border}`}},"Action"))};function z(t){let i=[],n=o=>o==null?"null":typeof o=="string"?`"${o}"`:Array.isArray(o)?`[${o.map(g=>typeof g=="string"?`"${g}"`:String(g)).join(", ")}]`:typeof o=="object"?"{...}":String(o),p=(o,d)=>{if(!o||typeof o!="object"||o===null||Object.keys(o).length===0)return null;let g=Object.entries(o).map(([s,c])=>`${s}: ${n(c)}`).join(", ");return `${d}: { ${g} }`};if(t.data){let o=p(t.data,"data");o&&i.push(o);}if(t.context){let o=p(t.context,"context");o&&i.push(o);}return i.join("; ")}function P(t,i){let n=z(t),p=`#${i+1}`,o=`${t.entity} ${t.action}`,d=`${p} ${o}`;return n?e.createElement(e.Fragment,null,e.createElement("span",{className:"event-base"},d),e.createElement("span",{className:"event-separator"}," - "),e.createElement("span",{className:"event-preview"},n)):e.createElement("span",{className:"event-base"},d)}var Y=memo(function(i){var H;let n=useTheme(),p=useStorybookApi(),[o,d]=useGlobals(),g={autoRefresh:true,prefix:"data-elb",highlights:{context:false,entity:false,property:false,action:false}},s={...g,...o[a],highlights:{...g.highlights,...((H=o[a])==null?void 0:H.highlights)||{}}},[c,w]=useState([]),[h,k]=useState([]),v=(r,l)=>{let T={...s,[r]:l};d({[a]:T});},b=r=>{var B;let l={...s.highlights,[r]:!((B=s.highlights)!=null&&B[r])},T={...s,highlights:l};d({[a]:T}),u(S.HIGHLIGHT,T);},u=useChannel({[S.RESULT]:r=>{w(r);},[S.LIVE_EVENT]:r=>{k(l=>[{...r,timestamp:Date.now()}].concat(l).slice(0,50));}}),m=useCallback(()=>{u(S.REQUEST,s);},[s,u]);useEffect(()=>{s.autoRefresh&&m();},[]),useEffect(()=>{if(!s.autoRefresh)return;let r=[CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED];return r.forEach(l=>p.on(l,m)),()=>r.forEach(l=>p.off(l,m))},[p,m,s.autoRefresh]);let C=r=>{let l=r.length==1?"Event":"Events";return `${r.length} ${l}`},O=()=>{let r=h.length==1?"Event":"Events";return `${h.length} Live ${r}`},$=()=>{k([]);};return e.createElement(AddonPanel,{...i},e.createElement(TabsState,{initial:"live",backgroundColor:n.background.hoverable},e.createElement("div",{id:"events",title:C(c)},e.createElement(Placeholder,null,e.createElement(Fragment,null,e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"12px",padding:"8px",backgroundColor:n.background.app,borderRadius:"4px",border:`1px solid ${n.color.border}`}},e.createElement(Button,{onClick:m},"Update events"),e.createElement(L,{config:s,toggleHighlight:b}))),c.length>0?e.createElement(W,{items:c.map((r,l)=>({title:P(r,l),content:e.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(r,null,2))}))}):e.createElement("p",null,"No events yet"))),e.createElement("div",{id:"live",title:O()},e.createElement(Placeholder,null,e.createElement(Fragment,null,e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"12px",padding:"8px",backgroundColor:n.background.app,borderRadius:"4px",border:`1px solid ${n.color.border}`}},e.createElement("div",{style:{display:"flex",gap:"8px",alignItems:"center"}},e.createElement(Button,{size:"small",onClick:$},"Clear Events")),e.createElement(L,{config:s,toggleHighlight:b}))),h.length>0?e.createElement(W,{items:h.map((r,l)=>({title:P(r,h.length-l-1),content:e.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(r,null,2))}))}):e.createElement("p",{style:{textAlign:"center",color:n.color.mediumdark,padding:"20px"}},"Waiting for live events...",e.createElement("br",null),e.createElement("small",null,"Interact with components to see events appear here in real-time")))),e.createElement("div",{id:"config",title:"Config"},e.createElement(Placeholder,null,e.createElement(Fragment,null,e.createElement(Form.Field,{label:"Auto-refresh"},e.createElement("input",{type:"checkbox",id:"autoRefresh",checked:s.autoRefresh,onChange:r=>v("autoRefresh",r.target.checked)})),e.createElement(Form.Field,{label:"Prefix"},e.createElement(Form.Input,{name:"Prefix",value:s.prefix,placeholder:s.prefix,onChange:r=>v("prefix",r.target.value),size:"flex"})))))))});addons.register(a,t=>{addons.add(F,{type:types.PANEL,title:a,match:({viewMode:i})=>i==="story",render:({active:i})=>e.createElement(Y,{active:!!i})});});//# sourceMappingURL=manager.js.map
|
|
1
|
+
import n,{memo,useState,Fragment,useCallback,useEffect}from'react';import {useStorybookApi,useChannel,addons,types}from'storybook/manager-api';import {AddonPanel,TabsState,Placeholder,Button,SyntaxHighlighter}from'storybook/internal/components';import {styled,useTheme}from'storybook/theming';import {CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED}from'storybook/internal/core-events';import {ArrowDownIcon}from'@storybook/icons';var c="walkerOS",z=`${c}/panel`;var y={RESULT:`${c}/result`,REQUEST:`${c}/request`,HIGHLIGHT:`${c}/highlight`,LIVE_EVENT:`${c}/live-event`,ATTRIBUTES_RESULT:`${c}/attributes-result`,ATTRIBUTES_REQUEST:`${c}/attributes-request`};var dt=styled.ul({listStyle:"none",fontSize:14,padding:0,margin:0}),ct=styled.div(({theme:t})=>({display:"flex",width:"100%",borderBottom:`1px solid ${t.appBorderColor}`,"&:hover":{background:t.background.hoverable}})),ut=styled(ArrowDownIcon)(({theme:t})=>({height:10,width:10,minWidth:10,color:t.color.mediumdark,marginRight:10,transition:"transform 0.1s ease-in-out",alignSelf:"center",display:"inline-flex"})),ft=styled.div(({theme:t})=>({padding:"6px 12px",paddingLeft:9,background:"none",color:"inherit",textAlign:"left",cursor:"pointer",borderLeft:"3px solid transparent",width:"100%",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis","&:focus":{outline:"0 none",borderLeft:`3px solid ${t.color.secondary}`},"& .event-base":{color:"inherit",fontWeight:"500"},"& .event-separator":{color:t.color.mediumdark,fontWeight:"300"},"& .event-preview":{color:t.color.mediumdark,fontWeight:"400"}})),mt=styled.div(({theme:t})=>({padding:t.layoutMargin,background:t.background.content,fontFamily:t.typography.fonts.mono,whiteSpace:"pre-wrap",textAlign:"left"})),bt=memo(({item:t})=>{let[e,r]=useState(false);return n.createElement(Fragment,null,n.createElement(ct,null,n.createElement(ft,{onClick:()=>r(!e),role:"button"},n.createElement(ut,{style:{transform:`rotate(${e?0:-90}deg)`}}),t.title)),e?n.createElement(mt,null,t.content):null)}),D=memo(({items:t})=>n.createElement(dt,null,t.map((e,r)=>n.createElement(bt,{key:`${e.title}-${r}`,item:e}))));var I=({highlights:t,toggleHighlight:e})=>{let r=useTheme();return n.createElement("div",{style:{display:"flex",gap:"4px",alignItems:"center"}},n.createElement("span",{style:{fontSize:"12px",color:r.color.mediumdark,marginRight:"8px"}},"Highlight:"),n.createElement(Button,{size:"small",variant:t.globals?"solid":"outline",onClick:()=>e("globals"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:t.globals?"#4fc3f7cc":"transparent",color:t.globals?"#fff":r.color.mediumdark,border:`1px solid ${t.globals?"#4fc3f7":r.color.border}`}},"Globals"),n.createElement(Button,{size:"small",variant:t.context?"solid":"outline",onClick:()=>e("context"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:t.context?"#ffbd44cc":"transparent",color:t.context?"#000":r.color.mediumdark,border:`1px solid ${t.context?"#ffbd44":r.color.border}`}},"Context"),n.createElement(Button,{size:"small",variant:t.entity?"solid":"outline",onClick:()=>e("entity"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:t.entity?"#00ca4ecc":"transparent",color:t.entity?"#fff":r.color.mediumdark,border:`1px solid ${t.entity?"#00ca4e":r.color.border}`}},"Entity"),n.createElement(Button,{size:"small",variant:t.property?"solid":"outline",onClick:()=>e("property"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:t.property?"#ff605ccc":"transparent",color:t.property?"#fff":r.color.mediumdark,border:`1px solid ${t.property?"#ff605c":r.color.border}`}},"Property"),n.createElement(Button,{size:"small",variant:t.action?"solid":"outline",onClick:()=>e("action"),style:{fontSize:"11px",padding:"4px 8px",backgroundColor:t.action?"#9900ffcc":"transparent",color:t.action?"#fff":r.color.mediumdark,border:`1px solid ${t.action?"#9900ff":r.color.border}`}},"Action"))};var xt=t=>{if(typeof t=="string")return t;if(typeof t=="number"||typeof t=="boolean")return String(t);if(t==null)return "";if(typeof t=="object"){if(Array.isArray(t))return t.length<=3?t.join(", "):`${t.slice(0,3).join(", ")}...`;let e=Object.keys(t);return e.length===0?"":e.length<=3?e.join(", "):`${e.slice(0,3).join(", ")}...`}return String(t)},C=({type:t,label:e,value:r})=>{let p={entity:"#00ca4e",action:"#9900ff",context:"#ffbd44",globals:"#4fc3f7",data:"#ff605c"},o=r?`${e}: ${r}`:e;return n.createElement("span",{style:{display:"inline-block",padding:"2px 6px",margin:"0 4px",fontSize:"14px",color:"black",backgroundColor:p[t],borderRadius:"3px",maxWidth:"200px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},title:o},n.createElement("span",null,t==="data"?r?n.createElement(n.Fragment,null,n.createElement("strong",null,e,":")," ",r):n.createElement("strong",null,e):n.createElement(n.Fragment,null,n.createElement("strong",null,t,":")," ",o)))},Y=({node:t,depth:e})=>{let[r,p]=useState(true),[o,b]=useState(false),l=useTheme(),d=t.attributes.entity||t.attributes.action||t.attributes.context||t.attributes.globals||t.attributes.properties,S=t.children.length>0;return n.createElement("div",{style:{marginLeft:e*16,borderLeft:e>0?`1px solid ${l.color.border}`:"none",paddingLeft:e>0?"8px":"0"}},n.createElement("div",{style:{display:"flex",alignItems:"center",padding:"4px 0"}},S?n.createElement("span",{style:{marginRight:"8px",color:l.color.mediumdark,cursor:"pointer",userSelect:"none",display:"inline-block",width:"12px",textAlign:"center"},onClick:()=>p(!r),title:r?"Collapse":"Expand"},r?"\u25BC":"\u25B6"):n.createElement("span",{style:{marginRight:"8px",width:"12px",display:"inline-block"}}),n.createElement("div",{style:{display:"flex",alignItems:"center",cursor:d?"pointer":"default",flex:1},onClick:d?()=>b(!o):void 0},t.attributes.entity&&n.createElement(C,{type:"entity",label:t.attributes.entity}),t.attributes.action&&n.createElement(C,{type:"action",label:t.attributes.action}),t.attributes.context&&Object.keys(t.attributes.context).length>0&&n.createElement(C,{key:"context",type:"context",label:Object.keys(t.attributes.context).join(", ")}),t.attributes.globals&&Object.keys(t.attributes.globals).length>0&&n.createElement(C,{key:"globals",type:"globals",label:Object.keys(t.attributes.globals).join(", ")}),t.attributes.properties&&(()=>{let g=t.attributes.properties;return Object.entries(g).filter(([f,u])=>typeof u=="object"&&u!==null&&Object.keys(u).length===0?false:u!=null&&u!=="").map(([f,u])=>{let O=f?`data-${f}`:"data-generic",W=xt(u);return n.createElement(C,{key:`data-${f}`,type:"data",label:O,value:W})})})())),o&&d&&t.htmlMarkup&&n.createElement("div",{style:{marginTop:"8px",marginBottom:"8px",textAlign:"left"}},n.createElement(SyntaxHighlighter,{language:"html",copyable:true,bordered:true,padded:true},t.htmlMarkup)),r&&S&&n.createElement("div",null,t.children.map((g,$)=>n.createElement(Y,{key:$,node:g,depth:e+1}))))},Q=({tree:t,depth:e=0})=>{let r=useTheme();return t.length===0?n.createElement("div",{style:{color:r.color.mediumdark,padding:"20px"}},"No walker attributes found",n.createElement("br",null),n.createElement("small",null,"Make sure your components have walker attributes like data-elb, data-elbaction, etc.")):n.createElement("div",null,t.map((p,o)=>n.createElement(Y,{key:o,node:p,depth:e})))};function q(t){let e=[],r=o=>o==null?"null":typeof o=="string"?`"${o}"`:Array.isArray(o)?`[${o.map(l=>typeof l=="string"?`"${l}"`:String(l)).join(", ")}]`:typeof o=="object"?"{...}":String(o),p=(o,b)=>{if(!o||typeof o!="object"||o===null||Object.keys(o).length===0)return null;let l=Object.entries(o).map(([d,S])=>`${d}: ${r(S)}`).join(", ");return `${b}: { ${l} }`};if(t.data){let o=p(t.data,"data");o&&e.push(o);}if(t.context){let o=p(t.context,"context");o&&e.push(o);}return e.join("; ")}function H(t,e){let r=q(t),p=`#${e+1}`,o="name"in t?t.name:`${t.entity} ${t.action}`,b=`${p} ${o}`;return r?n.createElement(n.Fragment,null,n.createElement("span",{className:"event-base"},b),n.createElement("span",{className:"event-separator"}," - "),n.createElement("span",{className:"event-preview"},r)):n.createElement("span",{className:"event-base"},b)}var Z=memo(function(e){let r=useTheme(),p=useStorybookApi(),{parameters:o}=p.getCurrentStoryData()||{},l={...{autoRefresh:true,prefix:"data-elb"},...o==null?void 0:o[c]},[d,S]=useState({context:false,entity:false,property:false,action:false,globals:false}),[g,$]=useState([]),[f,u]=useState([]),[O,W]=useState([]),j=s=>{let a={...d,[s]:!d[s]};S(a),T(y.HIGHLIGHT,{...l,highlights:a});},T=useChannel({[y.RESULT]:s=>{$(s);},[y.LIVE_EVENT]:s=>{u(a=>[{...s,timestamp:Date.now()}].concat(a).slice(0,50));},[y.ATTRIBUTES_RESULT]:s=>{W(s);}}),L=useCallback(()=>{T(y.REQUEST,{...l,highlights:d});},[l,d,T]),N=useCallback(()=>{T(y.ATTRIBUTES_REQUEST,{...l,highlights:d});},[l,d,T]);useEffect(()=>{l.autoRefresh&&(L(),N());},[]),useEffect(()=>{if(!l.autoRefresh)return;let s=[CURRENT_STORY_WAS_SET,SELECT_STORY,STORY_RENDERED,STORY_ARGS_UPDATED],a=()=>{L(),N();};return s.forEach(P=>p.on(P,a)),()=>s.forEach(P=>p.off(P,a))},[p,L,N,l.autoRefresh]);let tt=s=>{let a=s.length==1?"Event":"Events";return `${s.length} ${a}`},et=()=>{let s=f.length==1?"Event":"Events";return `${f.length} Live ${s}`},rt=()=>{u([]);},ot=()=>{let s=nt=>nt.reduce((it,m)=>{let h=0;if(m.attributes.entity&&h++,m.attributes.action&&h++,m.attributes.context&&Object.keys(m.attributes.context).length>0&&h++,m.attributes.globals&&Object.keys(m.attributes.globals).length>0&&h++,m.attributes.properties){let st=Object.entries(m.attributes.properties).filter(([Pt,E])=>typeof E=="object"&&E!==null&&Object.keys(E).length===0?false:E!=null&&E!=="");h+=st.length;}return it+h+s(m.children||[])},0),a=s(O);return `${a} ${a===1?"Attribute":"Attributes"}`};return n.createElement(AddonPanel,{...e},n.createElement(TabsState,{initial:"live",backgroundColor:r.background.hoverable},n.createElement("div",{id:"events",title:tt(g)},n.createElement(Placeholder,null,n.createElement(Fragment,null,n.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"12px",padding:"8px",backgroundColor:r.background.app,borderRadius:"4px",border:`1px solid ${r.color.border}`}},n.createElement(Button,{onClick:L},"Update events"),n.createElement(I,{highlights:d,toggleHighlight:j}))),g.length>0?n.createElement(D,{items:g.map((s,a)=>({title:H(s,a),content:n.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(s,null,2))}))}):n.createElement("p",null,"No events yet"))),n.createElement("div",{id:"live",title:et()},n.createElement(Placeholder,null,n.createElement(Fragment,null,n.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"12px",padding:"8px",backgroundColor:r.background.app,borderRadius:"4px",border:`1px solid ${r.color.border}`}},n.createElement("div",{style:{display:"flex",gap:"8px",alignItems:"center"}},n.createElement(Button,{size:"small",onClick:rt},"Clear Events")),n.createElement(I,{highlights:d,toggleHighlight:j}))),f.length>0?n.createElement(D,{items:f.map((s,a)=>({title:H(s,f.length-a-1),content:n.createElement(SyntaxHighlighter,{language:"json",copyable:true,bordered:true,padded:true},JSON.stringify(s,null,2))}))}):n.createElement("p",{style:{textAlign:"center",color:r.color.mediumdark,padding:"20px"}},"Waiting for live events...",n.createElement("br",null),n.createElement("small",null,"Interact with components to see events appear here in real-time")))),n.createElement("div",{id:"attributes",title:ot()},n.createElement(Placeholder,null,n.createElement(Fragment,null,n.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"12px",padding:"8px",backgroundColor:r.background.app,borderRadius:"4px",border:`1px solid ${r.color.border}`}},n.createElement(Button,{onClick:N},"Update attributes"),n.createElement(I,{highlights:d,toggleHighlight:j}))),n.createElement(Q,{tree:O})))))});addons.register(c,t=>{addons.add(z,{type:types.PANEL,title:c,match:({viewMode:e})=>e==="story",render:({active:e})=>n.createElement(Z,{active:!!e})});});//# sourceMappingURL=manager.js.map
|
|
2
2
|
//# sourceMappingURL=manager.js.map
|