@player-ui/storybook 0.4.0-next.7 → 0.4.0-next.9

package/dist/index.cjs.js

@@ -13,12 +13,14 @@ var makeClass = require('clsx');
 var components = require('@storybook/components');
 var api = require('@storybook/api');
 var coreEvents = require('@storybook/core-events');
+var beaconPluginReact = require('@player-ui/beacon-plugin-react');
 var react$1 = require('@player-ui/react');
 var react = require('@chakra-ui/react');
 var makeFlow = require('@player-ui/make-flow');
 var addonDocs = require('@storybook/addon-docs');
 var lzString = require('lz-string');
 var metricsPluginReact = require('@player-ui/metrics-plugin-react');
+var player = require('@player-ui/player');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -177,6 +179,9 @@ const EditorPanel = (props) => {
     theme: darkMode ? "vs-dark" : "light",
     value: editorValue,
     language: "json",
+    options: {
+      formatOnPaste: true
+    },
     onChange
   }));
 };
@@ -469,14 +474,29 @@ class StorybookPlayerPlugin {
 }
 
 const PlayerFlowSummary = (props) => {
-  var _a;
+  var _a, _b, _c;
+  React.useEffect(() => {
+    var _a2, _b2;
+    const model = new player.LocalModel((_a2 = props.completedState) == null ? void 0 : _a2.data);
+    const parser = new player.BindingParser({
+      get: (binding) => model.get(binding)
+    });
+    window.__PLAYER_COMPLETED_DATA__ = {
+      completedState: props.completedState,
+      get: (path) => model.get(parser.parse(path)),
+      beacons: (_b2 = props.beacons) != null ? _b2 : []
+    };
+    return () => {
+      delete window.__PLAYER_COMPLETED_DATA__;
+    };
+  }, [props.completedState, props.beacons]);
   return /* @__PURE__ */ React__default["default"].createElement(react.VStack, {
     gap: "10"
-  }, /* @__PURE__ */ React__default["default"].createElement(react.Heading, null, "Flow Completed ", props.error ? "with Error" : ""), props.outcome && /* @__PURE__ */ React__default["default"].createElement(react.Code, null, "Outcome: ", /* @__PURE__ */ React__default["default"].createElement(react.Text, {
+  }, /* @__PURE__ */ React__default["default"].createElement(react.Heading, null, "Flow Completed ", props.error ? "with Error" : ""), ((_a = props.completedState) == null ? void 0 : _a.endState.outcome) && /* @__PURE__ */ React__default["default"].createElement(react.Code, null, "Outcome:", " ", /* @__PURE__ */ React__default["default"].createElement(react.Text, {
     as: "strong"
-  }, props.outcome)), props.error && /* @__PURE__ */ React__default["default"].createElement(react.Code, {
+  }, (_b = props.completedState) == null ? void 0 : _b.endState.outcome)), props.error && /* @__PURE__ */ React__default["default"].createElement(react.Code, {
     colorScheme: "red"
-  }, /* @__PURE__ */ React__default["default"].createElement("pre", null, (_a = props.error) == null ? void 0 : _a.message)), /* @__PURE__ */ React__default["default"].createElement(react.Button, {
+  }, /* @__PURE__ */ React__default["default"].createElement("pre", null, (_c = props.error) == null ? void 0 : _c.message)), /* @__PURE__ */ React__default["default"].createElement(react.Button, {
     variant: "solid",
     onClick: props.reset
   }, "Reset"));
@@ -552,18 +572,26 @@ const LocalPlayerStory = (props) => {
   const stateActions = useStateActions(addons__default["default"].getChannel());
   const plugins = (_b = (_a = props.webPlugins) != null ? _a : pluginContext == null ? void 0 : pluginContext.plugins) != null ? _b : [];
   const [playerState, setPlayerState] = React__default["default"].useState("not-started");
+  const [trackedBeacons, setTrackedBeacons] = React__default["default"].useState([]);
   const rp = React__default["default"].useMemo(() => {
     var _a2;
+    const beaconPlugin = new beaconPluginReact.BeaconPlugin({
+      callback: (beacon) => {
+        setTrackedBeacons((t) => [...t, beacon]);
+      }
+    });
     return new react$1.ReactPlayer(__spreadProps(__spreadValues({}, options), {
       plugins: [
         new StorybookPlayerPlugin(stateActions),
+        beaconPlugin,
         ...plugins,
         ...(_a2 = options == null ? void 0 : options.plugins) != null ? _a2 : []
       ]
     }));
-  }, [plugins]);
+  }, [plugins, flow]);
   const startFlow = () => {
     setPlayerState("in-progress");
+    setTrackedBeacons([]);
     rp.start(flow).then(() => {
       setPlayerState("completed");
     }).catch((e) => {
@@ -573,7 +601,7 @@ const LocalPlayerStory = (props) => {
   };
   React__default["default"].useEffect(() => {
     startFlow();
-  }, [rp, flow]);
+  }, [rp]);
   React__default["default"].useEffect(() => {
     var _a2;
     if (controlsContext) {
@@ -587,7 +615,7 @@ const LocalPlayerStory = (props) => {
     return subscribe(addons__default["default"].getChannel(), "@@player/flow/reset", () => {
       startFlow();
     });
-  }, [rp, flow]);
+  }, [rp]);
   if (renderContext.platform !== "web" && renderContext.token) {
     return /* @__PURE__ */ React__default["default"].createElement(Appetize, {
       flow,
@@ -601,7 +629,8 @@ const LocalPlayerStory = (props) => {
   if (playerState === "completed" && currentState.status === "completed") {
     return /* @__PURE__ */ React__default["default"].createElement(PlayerFlowSummary, {
       reset: startFlow,
-      outcome: currentState.endState.outcome
+      completedState: currentState,
+      beacons: trackedBeacons
     });
   }
   if (playerState === "error" && currentState.status === "error") {

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import addons, { types } from '@storybook/addons';
 import { useDarkMode } from 'storybook-dark-mode';
 import { dequal } from 'dequal';
@@ -9,12 +9,14 @@ import makeClass from 'clsx';
 import { Separator, IconButton, Icons, WithTooltip, TooltipLinkList } from '@storybook/components';
 import { useParameter } from '@storybook/api';
 import { STORY_CHANGED } from '@storybook/core-events';
+import { BeaconPlugin } from '@player-ui/beacon-plugin-react';
 import { ReactPlayer } from '@player-ui/react';
 import { VStack, Heading, Code, Text, Button, ChakraProvider, Spinner } from '@chakra-ui/react';
 import { makeFlow } from '@player-ui/make-flow';
 import { DocsContext } from '@storybook/addon-docs';
 import { compressToEncodedURIComponent } from 'lz-string';
 import { MetricsPlugin } from '@player-ui/metrics-plugin-react';
+import { LocalModel, BindingParser } from '@player-ui/player';
 
 const ADDON_ID = "web-player/addon";
 const FLOW_PANEL_ID = `${ADDON_ID}/flow-editor-panel`;
@@ -166,6 +168,9 @@ const EditorPanel = (props) => {
     theme: darkMode ? "vs-dark" : "light",
     value: editorValue,
     language: "json",
+    options: {
+      formatOnPaste: true
+    },
     onChange
   }));
 };
@@ -458,14 +463,29 @@ class StorybookPlayerPlugin {
 }
 
 const PlayerFlowSummary = (props) => {
-  var _a;
+  var _a, _b, _c;
+  useEffect(() => {
+    var _a2, _b2;
+    const model = new LocalModel((_a2 = props.completedState) == null ? void 0 : _a2.data);
+    const parser = new BindingParser({
+      get: (binding) => model.get(binding)
+    });
+    window.__PLAYER_COMPLETED_DATA__ = {
+      completedState: props.completedState,
+      get: (path) => model.get(parser.parse(path)),
+      beacons: (_b2 = props.beacons) != null ? _b2 : []
+    };
+    return () => {
+      delete window.__PLAYER_COMPLETED_DATA__;
+    };
+  }, [props.completedState, props.beacons]);
   return /* @__PURE__ */ React.createElement(VStack, {
     gap: "10"
-  }, /* @__PURE__ */ React.createElement(Heading, null, "Flow Completed ", props.error ? "with Error" : ""), props.outcome && /* @__PURE__ */ React.createElement(Code, null, "Outcome: ", /* @__PURE__ */ React.createElement(Text, {
+  }, /* @__PURE__ */ React.createElement(Heading, null, "Flow Completed ", props.error ? "with Error" : ""), ((_a = props.completedState) == null ? void 0 : _a.endState.outcome) && /* @__PURE__ */ React.createElement(Code, null, "Outcome:", " ", /* @__PURE__ */ React.createElement(Text, {
     as: "strong"
-  }, props.outcome)), props.error && /* @__PURE__ */ React.createElement(Code, {
+  }, (_b = props.completedState) == null ? void 0 : _b.endState.outcome)), props.error && /* @__PURE__ */ React.createElement(Code, {
     colorScheme: "red"
-  }, /* @__PURE__ */ React.createElement("pre", null, (_a = props.error) == null ? void 0 : _a.message)), /* @__PURE__ */ React.createElement(Button, {
+  }, /* @__PURE__ */ React.createElement("pre", null, (_c = props.error) == null ? void 0 : _c.message)), /* @__PURE__ */ React.createElement(Button, {
     variant: "solid",
     onClick: props.reset
   }, "Reset"));
@@ -541,18 +561,26 @@ const LocalPlayerStory = (props) => {
   const stateActions = useStateActions(addons.getChannel());
   const plugins = (_b = (_a = props.webPlugins) != null ? _a : pluginContext == null ? void 0 : pluginContext.plugins) != null ? _b : [];
   const [playerState, setPlayerState] = React.useState("not-started");
+  const [trackedBeacons, setTrackedBeacons] = React.useState([]);
   const rp = React.useMemo(() => {
     var _a2;
+    const beaconPlugin = new BeaconPlugin({
+      callback: (beacon) => {
+        setTrackedBeacons((t) => [...t, beacon]);
+      }
+    });
     return new ReactPlayer(__spreadProps(__spreadValues({}, options), {
       plugins: [
         new StorybookPlayerPlugin(stateActions),
+        beaconPlugin,
         ...plugins,
         ...(_a2 = options == null ? void 0 : options.plugins) != null ? _a2 : []
       ]
     }));
-  }, [plugins]);
+  }, [plugins, flow]);
   const startFlow = () => {
     setPlayerState("in-progress");
+    setTrackedBeacons([]);
     rp.start(flow).then(() => {
       setPlayerState("completed");
     }).catch((e) => {
@@ -562,7 +590,7 @@ const LocalPlayerStory = (props) => {
   };
   React.useEffect(() => {
     startFlow();
-  }, [rp, flow]);
+  }, [rp]);
   React.useEffect(() => {
     var _a2;
     if (controlsContext) {
@@ -576,7 +604,7 @@ const LocalPlayerStory = (props) => {
     return subscribe(addons.getChannel(), "@@player/flow/reset", () => {
       startFlow();
     });
-  }, [rp, flow]);
+  }, [rp]);
   if (renderContext.platform !== "web" && renderContext.token) {
     return /* @__PURE__ */ React.createElement(Appetize, {
       flow,
@@ -590,7 +618,8 @@ const LocalPlayerStory = (props) => {
   if (playerState === "completed" && currentState.status === "completed") {
     return /* @__PURE__ */ React.createElement(PlayerFlowSummary, {
       reset: startFlow,
-      outcome: currentState.endState.outcome
+      completedState: currentState,
+      beacons: trackedBeacons
     });
   }
   if (playerState === "error" && currentState.status === "error") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@player-ui/storybook",
-  "version": "0.4.0-next.7",
+  "version": "0.4.0-next.9",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -11,8 +11,8 @@
     "@storybook/addon-docs": "^6.4.15",
     "react": "^17.0.2",
     "@types/react": "^17.0.25",
-    "@player-ui/react": "0.4.0-next.7",
-    "@player-ui/make-flow": "0.4.0-next.7"
+    "@player-ui/react": "0.4.0-next.9",
+    "@player-ui/make-flow": "0.4.0-next.9"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.3.1",
@@ -28,7 +28,8 @@
     "dequal": "^2.0.2",
     "ts-debounce": "^4.0.0",
     "uuid": "^8.3.2",
-    "@player-ui/metrics-plugin-react": "0.4.0-next.7",
+    "@player-ui/metrics-plugin-react": "0.4.0-next.9",
+    "@player-ui/beacon-plugin-react": "0.4.0-next.9",
     "@babel/runtime": "7.15.4"
   },
   "main": "dist/index.cjs.js",
@@ -72,6 +73,14 @@
     {
       "name": "Kelly Harrop",
       "url": "https://github.com/kharrop"
+    },
+    {
+      "name": "Alejandro Fimbres",
+      "url": "https://github.com/lexfm"
+    },
+    {
+      "name": "Rafael Campos",
+      "url": "https://github.com/rafbcampos"
     }
   ]
 }

package/src/addons/editor/index.tsx

@@ -78,6 +78,9 @@ export const EditorPanel = (props: EditorPanelProps) => {
         theme={darkMode ? 'vs-dark' : 'light'}
         value={editorValue}
         language="json"
+        options={{
+          formatOnPaste: true,
+        }}
         onChange={onChange}
       />
     </div>

package/src/player/PlayerFlowSummary.tsx

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import type { CompletedState } from '@player-ui/player';
+import { BindingParser, LocalModel } from '@player-ui/player';
 import { VStack, Code, Heading, Button, Text } from '@chakra-ui/react';
 
 export type PlayerFlowSummaryProps = {
@@ -6,19 +8,57 @@ export type PlayerFlowSummaryProps = {
   reset: () => void;
   /** The outcome of the flow */
   outcome?: string;
+  /** The completed state of the flow */
+  completedState?: CompletedState;
+  /** Beacons sent in the flow */
+  beacons?: unknown[];
   /** any error */
   error?: Error;
 };
 
+interface CompletedStorybookFlowData {
+  /** The CompletedState of the flow */
+  completedState?: CompletedState;
+
+  get(path: string): unknown;
+
+  /** Beacons that were fired during the flow */
+  beacons: any[];
+}
+
+declare global {
+  interface Window {
+    /** Completed data from the player flow if it was successful */
+    __PLAYER_COMPLETED_DATA__?: CompletedStorybookFlowData;
+  }
+}
+
 /** A component to show at the end of a flow */
 export const PlayerFlowSummary = (props: PlayerFlowSummaryProps) => {
+  useEffect(() => {
+    const model = new LocalModel(props.completedState?.data);
+    // Point back to local model for data lookups when
+    // parsing a path
+    const parser = new BindingParser({
+      get: (binding) => model.get(binding),
+    });
+    window.__PLAYER_COMPLETED_DATA__ = {
+      completedState: props.completedState,
+      get: (path) => model.get(parser.parse(path)),
+      beacons: props.beacons ?? [],
+    };
+    return () => {
+      delete window.__PLAYER_COMPLETED_DATA__;
+    };
+  }, [props.completedState, props.beacons]);
+
   return (
     <VStack gap="10">
       <Heading>Flow Completed {props.error ? 'with Error' : ''}</Heading>
-
-      {props.outcome && (
+      {props.completedState?.endState.outcome && (
         <Code>
-          Outcome: <Text as="strong">{props.outcome}</Text>
+          Outcome:{' '}
+          <Text as="strong">{props.completedState?.endState.outcome}</Text>
         </Code>
       )}
 

package/src/player/PlayerStory.tsx

@@ -5,6 +5,7 @@ import type {
   Flow,
   ReactPlayerOptions,
 } from '@player-ui/react';
+import { BeaconPlugin } from '@player-ui/beacon-plugin-react';
 import { ReactPlayer } from '@player-ui/react';
 import { ChakraProvider, Spinner } from '@chakra-ui/react';
 import { makeFlow } from '@player-ui/make-flow';
@@ -59,20 +60,30 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
   const [playerState, setPlayerState] =
     React.useState<PlayerFlowStatus>('not-started');
 
+  const [trackedBeacons, setTrackedBeacons] = React.useState<any[]>([]);
+
   const rp = React.useMemo(() => {
+    const beaconPlugin = new BeaconPlugin({
+      callback: (beacon) => {
+        setTrackedBeacons((t) => [...t, beacon]);
+      },
+    });
+
     return new ReactPlayer({
       ...options,
       plugins: [
         new StorybookPlayerPlugin(stateActions),
+        beaconPlugin,
         ...plugins,
         ...(options?.plugins ?? []),
       ],
     });
-  }, [plugins]);
+  }, [plugins, flow]);
 
   /** A callback to start the flow */
   const startFlow = () => {
     setPlayerState('in-progress');
+    setTrackedBeacons([]);
     rp.start(flow)
       .then(() => {
         setPlayerState('completed');
@@ -85,7 +96,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
 
   React.useEffect(() => {
     startFlow();
-  }, [rp, flow]);
+  }, [rp]);
 
   React.useEffect(() => {
     // merge new data from storybook controls
@@ -105,7 +116,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
     return subscribe(addons.getChannel(), '@@player/flow/reset', () => {
       startFlow();
     });
-  }, [rp, flow]);
+  }, [rp]);
 
   if (renderContext.platform !== 'web' && renderContext.token) {
     return (
@@ -125,7 +136,8 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
     return (
       <PlayerFlowSummary
         reset={startFlow}
-        outcome={currentState.endState.outcome}
+        completedState={currentState}
+        beacons={trackedBeacons}
       />
     );
   }