@player-ui/storybook 0.15.3-next.1 → 0.15.3-next.2
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/package.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"manager.mjs"
|
|
9
9
|
],
|
|
10
10
|
"name": "@player-ui/storybook",
|
|
11
|
-
"version": "0.15.3-next.
|
|
11
|
+
"version": "0.15.3-next.2",
|
|
12
12
|
"exports": {
|
|
13
13
|
".": {
|
|
14
14
|
"types": "./src/index.ts",
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
},
|
|
25
25
|
"main": "./dist/index.js",
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@player-ui/beacon-plugin-react": "0.15.3-next.
|
|
28
|
-
"@player-ui/make-flow": "0.15.3-next.
|
|
29
|
-
"@player-ui/react": "0.15.3-next.
|
|
30
|
-
"@player-ui/metrics-plugin-react": "0.15.3-next.
|
|
27
|
+
"@player-ui/beacon-plugin-react": "0.15.3-next.2",
|
|
28
|
+
"@player-ui/make-flow": "0.15.3-next.2",
|
|
29
|
+
"@player-ui/react": "0.15.3-next.2",
|
|
30
|
+
"@player-ui/metrics-plugin-react": "0.15.3-next.2",
|
|
31
31
|
"@vueless/storybook-dark-mode": "^10.0.4",
|
|
32
32
|
"storybook": "^10.1.4",
|
|
33
33
|
"@player-tools/xlr": "0.13.0-next.5",
|
|
@@ -61,7 +61,7 @@ function XLRObjectDocs(props: {
|
|
|
61
61
|
"",
|
|
62
62
|
ts.ScriptTarget.ES2017,
|
|
63
63
|
false, // setParentNodes
|
|
64
|
-
ts.ScriptKind.TS
|
|
64
|
+
ts.ScriptKind.TS,
|
|
65
65
|
);
|
|
66
66
|
|
|
67
67
|
return (
|
|
@@ -82,11 +82,11 @@ function XLRObjectDocs(props: {
|
|
|
82
82
|
{Object.entries(props.xlr.properties)
|
|
83
83
|
.sort((a, b) =>
|
|
84
84
|
// bubble up the required props first
|
|
85
|
-
a[1].required === b[1].required ? 0 : a[1].required ? -1 : 1
|
|
85
|
+
a[1].required === b[1].required ? 0 : a[1].required ? -1 : 1,
|
|
86
86
|
)
|
|
87
87
|
.map(([propKey, propType]) => {
|
|
88
88
|
let nodeText: React.JSX.Element | string = getKeyName(
|
|
89
|
-
propType.node
|
|
89
|
+
propType.node,
|
|
90
90
|
);
|
|
91
91
|
|
|
92
92
|
if (nodeText === "object") {
|
|
@@ -110,7 +110,7 @@ function XLRObjectDocs(props: {
|
|
|
110
110
|
const tsText = printer.printNode(
|
|
111
111
|
ts.EmitHint.Unspecified,
|
|
112
112
|
tsType.type,
|
|
113
|
-
resultFile
|
|
113
|
+
resultFile,
|
|
114
114
|
);
|
|
115
115
|
|
|
116
116
|
nodeText = (
|
|
@@ -146,10 +146,10 @@ function XLRObjectDocs(props: {
|
|
|
146
146
|
/** Panel to show doc info about asset props */
|
|
147
147
|
export function DocsPanel(props: DocsPanelProps) {
|
|
148
148
|
const assetDocsToRender = useParameter<Array<string> | undefined>(
|
|
149
|
-
"assetDocs"
|
|
149
|
+
"assetDocs",
|
|
150
150
|
);
|
|
151
151
|
const defaultXLRSources = useParameter<Array<any> | undefined>(
|
|
152
|
-
"assetXLRSources"
|
|
152
|
+
"assetXLRSources",
|
|
153
153
|
);
|
|
154
154
|
|
|
155
155
|
const darkMode = useDarkMode(props.api);
|
|
@@ -195,7 +195,7 @@ export function DocsPanel(props: DocsPanelProps) {
|
|
|
195
195
|
xlr={assetXLR}
|
|
196
196
|
darkMode={Boolean(darkMode)}
|
|
197
197
|
/>
|
|
198
|
-
)
|
|
198
|
+
),
|
|
199
199
|
)}
|
|
200
200
|
</div>
|
|
201
201
|
);
|
package/src/dsl/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
1
|
+
export * from "./transpile";
|
|
2
|
+
export * from "./createDSLStory";
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import type { ReactPlayer, Player, ReactPlayerPlugin } from
|
|
2
|
-
import type { Timing } from
|
|
3
|
-
import { MetricsPlugin } from
|
|
4
|
-
import type { Dispatch } from
|
|
1
|
+
import type { ReactPlayer, Player, ReactPlayerPlugin } from "@player-ui/react";
|
|
2
|
+
import type { Timing } from "@player-ui/metrics-plugin-react";
|
|
3
|
+
import { MetricsPlugin } from "@player-ui/metrics-plugin-react";
|
|
4
|
+
import type { Dispatch } from "redux";
|
|
5
5
|
import type {
|
|
6
6
|
DataChangeEventType,
|
|
7
7
|
LogEventType,
|
|
8
8
|
StateChangeEventType,
|
|
9
9
|
MetricChangeEventType,
|
|
10
|
-
} from
|
|
11
|
-
import { createEvent } from
|
|
12
|
-
import { addEvents, clearEvents } from
|
|
10
|
+
} from "../state";
|
|
11
|
+
import { createEvent } from "../state";
|
|
12
|
+
import { addEvents, clearEvents } from "../redux";
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
*
|
|
16
16
|
* A web plugin for interacting with storybook
|
|
17
17
|
*/
|
|
18
18
|
export class StorybookPlayerPlugin implements ReactPlayerPlugin {
|
|
19
|
-
public readonly name =
|
|
19
|
+
public readonly name = "Storybook";
|
|
20
20
|
|
|
21
21
|
private dispatch: Dispatch;
|
|
22
22
|
private metricsPlugin: MetricsPlugin;
|
|
@@ -29,10 +29,10 @@ export class StorybookPlayerPlugin implements ReactPlayerPlugin {
|
|
|
29
29
|
// actions.setMetrics(metrics);
|
|
30
30
|
},
|
|
31
31
|
onRenderEnd: (timing) => {
|
|
32
|
-
this.onMetricChange(timing,
|
|
32
|
+
this.onMetricChange(timing, "render");
|
|
33
33
|
},
|
|
34
34
|
onUpdateEnd: (timing) => {
|
|
35
|
-
this.onMetricChange(timing,
|
|
35
|
+
this.onMetricChange(timing, "update");
|
|
36
36
|
},
|
|
37
37
|
});
|
|
38
38
|
}
|
|
@@ -51,11 +51,11 @@ export class StorybookPlayerPlugin implements ReactPlayerPlugin {
|
|
|
51
51
|
const events: Array<DataChangeEventType> = dataUpdates.map(
|
|
52
52
|
(dataUpdate) =>
|
|
53
53
|
createEvent({
|
|
54
|
-
type:
|
|
54
|
+
type: "dataChange",
|
|
55
55
|
binding: dataUpdate.binding.asString(),
|
|
56
56
|
from: dataUpdate.oldValue,
|
|
57
57
|
to: dataUpdate.newValue,
|
|
58
|
-
})
|
|
58
|
+
}),
|
|
59
59
|
);
|
|
60
60
|
this.dispatch(addEvents(events));
|
|
61
61
|
});
|
|
@@ -65,43 +65,43 @@ export class StorybookPlayerPlugin implements ReactPlayerPlugin {
|
|
|
65
65
|
this.dispatch(
|
|
66
66
|
addEvents([
|
|
67
67
|
createEvent<LogEventType>({
|
|
68
|
-
type:
|
|
68
|
+
type: "log",
|
|
69
69
|
message: data,
|
|
70
70
|
severity,
|
|
71
71
|
}),
|
|
72
|
-
])
|
|
72
|
+
]),
|
|
73
73
|
);
|
|
74
74
|
});
|
|
75
75
|
|
|
76
76
|
rp.player.hooks.state.tap(this.name, (newState) => {
|
|
77
|
-
if (
|
|
77
|
+
if ("error" in newState) {
|
|
78
78
|
this.dispatch(
|
|
79
79
|
addEvents([
|
|
80
80
|
createEvent<StateChangeEventType>({
|
|
81
|
-
type:
|
|
81
|
+
type: "stateChange",
|
|
82
82
|
state: newState.status,
|
|
83
83
|
error: newState.error.message,
|
|
84
84
|
}),
|
|
85
|
-
])
|
|
85
|
+
]),
|
|
86
86
|
);
|
|
87
|
-
} else if (newState.status ===
|
|
87
|
+
} else if (newState.status === "completed") {
|
|
88
88
|
this.dispatch(
|
|
89
89
|
addEvents([
|
|
90
90
|
createEvent<StateChangeEventType>({
|
|
91
|
-
type:
|
|
91
|
+
type: "stateChange",
|
|
92
92
|
state: newState.status,
|
|
93
93
|
outcome: newState.endState.outcome,
|
|
94
94
|
}),
|
|
95
|
-
])
|
|
95
|
+
]),
|
|
96
96
|
);
|
|
97
97
|
} else {
|
|
98
98
|
this.dispatch(
|
|
99
99
|
addEvents([
|
|
100
100
|
createEvent<StateChangeEventType>({
|
|
101
|
-
type:
|
|
101
|
+
type: "stateChange",
|
|
102
102
|
state: newState.status,
|
|
103
103
|
}),
|
|
104
|
-
])
|
|
104
|
+
]),
|
|
105
105
|
);
|
|
106
106
|
}
|
|
107
107
|
});
|
|
@@ -115,11 +115,11 @@ export class StorybookPlayerPlugin implements ReactPlayerPlugin {
|
|
|
115
115
|
this.dispatch(
|
|
116
116
|
addEvents([
|
|
117
117
|
createEvent<MetricChangeEventType>({
|
|
118
|
-
type:
|
|
118
|
+
type: "metric",
|
|
119
119
|
metricType,
|
|
120
120
|
message: `Duration: ${timing.duration.toFixed(0)} ms`,
|
|
121
121
|
}),
|
|
122
|
-
])
|
|
122
|
+
]),
|
|
123
123
|
);
|
|
124
124
|
}
|
|
125
125
|
}
|