@player-ui/storybook 0.0.1-next.10

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { DecoratorFn } from '@storybook/react';
+import React from 'react';
+import { WebPlayerPlugin, Flow } from '@player-ui/react';
+
+/** register all the storybook addons */
+declare function register(): void;
+
+/**
+ * A story decorator for rendering player content
+ */
+declare const PlayerDecorator: DecoratorFn;
+
+interface AppetizeVersions {
+    /** The iOS version to load */
+    ios: string;
+    /** The Android version to load */
+    android: string;
+}
+
+declare type AsyncImportFactory<T> = () => Promise<{
+    /** default export of the module */
+    default: T;
+}>;
+declare type RenderTarget = {
+    /** platform to render on */
+    platform: 'ios' | 'android' | 'web';
+    /** the token to use if applicable */
+    token?: string;
+    /** A different base URL for appetize if necessary */
+    baseUrl?: string;
+    /** The OS Versions to use for appetize */
+    appetizeVersions?: AppetizeVersions;
+};
+
+declare const WebPlayerPluginContext: React.Context<{
+    /** Plugins to use for the player */
+    plugins?: WebPlayerPlugin[] | undefined;
+}>;
+declare const PlayerRenderContext: React.Context<RenderTarget>;
+declare const StorybookControlsContext: React.Context<{
+    /** any storybook controls to include */
+    controls?: Flow['data'];
+}>;
+declare type Mock = Record<string, unknown>;
+declare type MockFactory = () => Mock;
+declare type MockFactoryOrPromise = MockFactory | Mock;
+interface PlayerStoryProps {
+    /** The mock to load */
+    flow: AsyncImportFactory<MockFactoryOrPromise> | MockFactoryOrPromise;
+    /** Custom data to use in the flow */
+    data?: Flow['data'];
+    /** props from storybook controls */
+    storybookControls?: Flow['data'];
+}
+/**
+ * Takes an initial flow and renders it as a story in storybook.
+ * This handles all of the wiring of the mock into the flow editor, events, etc
+ */
+declare const PlayerStory: (props: PlayerStoryProps) => JSX.Element;
+
+export { PlayerDecorator, PlayerRenderContext, PlayerStory, PlayerStoryProps, StorybookControlsContext, WebPlayerPluginContext, register };

package/dist/index.esm.js

@@ -0,0 +1,643 @@
+import React from 'react';
+import addons, { types } from '@storybook/addons';
+import { useDarkMode } from 'storybook-dark-mode';
+import { dequal } from 'dequal';
+import Editor from '@monaco-editor/react';
+import { v4 } from 'uuid';
+import { Table, Head, Row, HeadCell, Body, Cell } from '@devtools-ds/table';
+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 { WebPlayer } 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';
+
+const ADDON_ID = "web-player/addon";
+const FLOW_PANEL_ID = `${ADDON_ID}/flow-editor-panel`;
+const EVENT_PANEL_ID = `${ADDON_ID}/events-panel`;
+const FLOW_REFRESH_TOOL_ID = `${ADDON_ID}/flow-refresh-tool`;
+const RENDER_SELECT_TOOL_ID = `${ADDON_ID}/render-select-tool`;
+
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+function createEvent(base) {
+  return __spreadValues$2({
+    id: v4(),
+    time: Date.now()
+  }, base);
+}
+
+function subscribe(chan, eventName, callback) {
+  const handler = (payload) => {
+    callback(JSON.parse(payload));
+  };
+  chan.addListener(eventName, handler);
+  return () => {
+    chan.removeListener(eventName, handler);
+  };
+}
+function publish(chan, event) {
+  chan.emit(event.type, JSON.stringify(event));
+}
+function useStateActions(chan) {
+  return React.useMemo(() => ({
+    addEvents: (events) => {
+      publish(chan, {
+        type: "@@player/event/add",
+        events
+      });
+    },
+    setMetrics: (metrics) => {
+      publish(chan, {
+        type: "@@player/metrics/set",
+        metrics
+      });
+    },
+    clearEvents: () => {
+      publish(chan, {
+        type: "@@player/event/clear"
+      });
+    },
+    setFlow: (flow) => {
+      publish(chan, {
+        type: "@@player/flow/set",
+        flow
+      });
+    },
+    resetFlow: () => {
+      publish(chan, { type: "@@player/flow/reset" });
+    },
+    setPlatform: (platform) => {
+      publish(chan, { type: "@@player/platform/set", platform });
+    }
+  }), [chan]);
+}
+function useEventState(chan) {
+  const [events, setEvents] = React.useState([]);
+  React.useEffect(() => {
+    const unsubAdd = subscribe(chan, "@@player/event/add", (evt) => setEvents((old) => [...old, ...evt.events]));
+    const unsubClear = subscribe(chan, "@@player/event/clear", () => {
+      setEvents([]);
+    });
+    return () => {
+      unsubAdd();
+      unsubClear();
+    };
+  }, [chan]);
+  return events;
+}
+function useFlowState(chan) {
+  const [flow, setFlow] = React.useState();
+  React.useEffect(() => {
+    return subscribe(chan, "@@player/flow/set", (evt) => {
+      setFlow(evt.flow);
+    });
+  }, [chan]);
+  return flow;
+}
+
+const EditorPanel = (props) => {
+  const { active } = props;
+  const darkMode = useDarkMode();
+  const flow = useFlowState(props.api.getChannel());
+  const actions = useStateActions(props.api.getChannel());
+  const [editorValue, setEditorValue] = React.useState(flow ? JSON.stringify(flow, null, 2) : "{}");
+  const updateTimerRef = React.useRef(void 0);
+  function clearPending() {
+    if (updateTimerRef.current) {
+      clearTimeout(updateTimerRef.current);
+      updateTimerRef.current = void 0;
+    }
+  }
+  React.useEffect(() => {
+    if (!active) {
+      return;
+    }
+    try {
+      if (editorValue) {
+        const parsed = JSON.parse(editorValue);
+        if (dequal(flow, parsed)) {
+          return;
+        }
+      }
+    } catch (e) {
+    }
+    setEditorValue(JSON.stringify(flow, null, 2));
+  }, [flow, active]);
+  if (!active) {
+    return null;
+  }
+  const onChange = (val) => {
+    clearPending();
+    setEditorValue(val != null ? val : "");
+    try {
+      if (val) {
+        const parsed = JSON.parse(val);
+        if (!dequal(parsed, flow)) {
+          updateTimerRef.current = setTimeout(() => {
+            if (active) {
+              actions.setFlow(parsed);
+            }
+          }, 1e3);
+        }
+      }
+    } catch (e) {
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Editor, {
+    theme: darkMode ? "vs-dark" : "light",
+    value: editorValue,
+    language: "json",
+    onChange
+  }));
+};
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = "\n.events_header__1bcc1085 td {\n  width: 200px;\n}\n\n.events_body__1bcc1085 td {\n}\n";
+var modules_2563542d = {"header":"events_header__1bcc1085","body":"events_body__1bcc1085"};
+n(css,{});
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+const ExtraCells = (event) => {
+  var _a, _b;
+  if (event.type === "log") {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("td", null, event.severity), /* @__PURE__ */ React.createElement("td", null, event.message.map((a) => JSON.stringify(a)).join(" ")));
+  }
+  if (event.type === "dataChange") {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("td", null, event.binding), /* @__PURE__ */ React.createElement("td", null, `${JSON.stringify(event.from)} \u279C ${JSON.stringify(event.to)}`));
+  }
+  if (event.type === "stateChange") {
+    let name = event.state;
+    if (event.state === "completed") {
+      name = `${name} (${event.error ? "error" : "success"})`;
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("td", null, name), /* @__PURE__ */ React.createElement("td", null, (_b = (_a = event.outcome) != null ? _a : event.error) != null ? _b : ""));
+  }
+  if (event.type === "metric") {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("td", null, event.metricType), /* @__PURE__ */ React.createElement("td", null, event.message));
+  }
+  return null;
+};
+const EventsPanel = (props) => {
+  const events = useEventState(props.api.getChannel());
+  const darkMode = useDarkMode();
+  if (!props.active) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: makeClass(modules_2563542d.wrapper, {
+      [modules_2563542d.dark]: darkMode
+    })
+  }, /* @__PURE__ */ React.createElement(Table, {
+    colorScheme: darkMode ? "dark" : "light"
+  }, /* @__PURE__ */ React.createElement(Head, {
+    className: modules_2563542d.header
+  }, /* @__PURE__ */ React.createElement(Row, null, /* @__PURE__ */ React.createElement(HeadCell, null, "Time"), /* @__PURE__ */ React.createElement(HeadCell, null, "Type"), /* @__PURE__ */ React.createElement(HeadCell, null), /* @__PURE__ */ React.createElement(HeadCell, null))), /* @__PURE__ */ React.createElement(Body, {
+    className: modules_2563542d.body
+  }, events.map((evt) => /* @__PURE__ */ React.createElement(Row, {
+    key: evt.id
+  }, /* @__PURE__ */ React.createElement(Cell, null, evt.time), /* @__PURE__ */ React.createElement(Cell, null, evt.type), /* @__PURE__ */ React.createElement(ExtraCells, __spreadValues$1({}, evt)))))));
+};
+
+const FlowRefresh = ({ api }) => {
+  const actions = useStateActions(api.getChannel());
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Separator, null), /* @__PURE__ */ React.createElement(IconButton, {
+    title: "Reset the current flow",
+    onClick: () => {
+      actions.resetFlow();
+    }
+  }, /* @__PURE__ */ React.createElement(Icons, {
+    icon: "sync"
+  })));
+};
+
+const RenderSelection = ({ api }) => {
+  const params = useParameter("appetizeTokens", {});
+  const actions = useStateActions(api.getChannel());
+  const [selectedPlatform, setPlatform] = React.useState("web");
+  React.useEffect(() => {
+    const listener = () => {
+      setPlatform("web");
+    };
+    api.getChannel().addListener(STORY_CHANGED, listener);
+    return () => {
+      api.getChannel().removeListener(STORY_CHANGED, listener);
+    };
+  }, [api]);
+  const mobilePlatforms = Object.keys(params);
+  if (mobilePlatforms.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(WithTooltip, {
+    closeOnClick: true,
+    placement: "top",
+    trigger: "click",
+    tooltip: ({ onHide }) => /* @__PURE__ */ React.createElement(TooltipLinkList, {
+      links: ["web", ...mobilePlatforms].map((platform) => ({
+        id: platform,
+        title: platform,
+        onClick: () => {
+          setPlatform(platform);
+          actions.setPlatform(platform);
+          onHide();
+        },
+        value: platform,
+        active: platform === selectedPlatform
+      }))
+    })
+  }, /* @__PURE__ */ React.createElement(IconButton, {
+    title: "Change the render target"
+  }, /* @__PURE__ */ React.createElement(Icons, {
+    icon: selectedPlatform === "web" ? "browser" : "mobile"
+  })));
+};
+
+function register() {
+  addons.register(ADDON_ID, (api) => {
+    addons.addPanel(EVENT_PANEL_ID, {
+      title: "Events",
+      render: ({ active, key }) => /* @__PURE__ */ React.createElement(EventsPanel, {
+        key,
+        api,
+        active: Boolean(active)
+      })
+    });
+    addons.addPanel(FLOW_PANEL_ID, {
+      title: "Flow",
+      render: ({ active, key }) => /* @__PURE__ */ React.createElement(EditorPanel, {
+        key,
+        api,
+        active: Boolean(active)
+      })
+    });
+    addons.add(FLOW_REFRESH_TOOL_ID, {
+      title: "Refresh Flow",
+      type: types.TOOL,
+      render: () => /* @__PURE__ */ React.createElement(FlowRefresh, {
+        api
+      })
+    });
+    addons.add(RENDER_SELECT_TOOL_ID, {
+      title: "Render Selection",
+      type: types.TOOL,
+      render: () => /* @__PURE__ */ React.createElement(RenderSelection, {
+        api
+      })
+    });
+  });
+}
+
+function useEditorFlow(initialFlow) {
+  const stateActions = useStateActions(addons.getChannel());
+  const flow = useFlowState(addons.getChannel());
+  const docsContext = React.useContext(DocsContext);
+  React.useEffect(() => {
+    stateActions.setFlow(initialFlow);
+  }, [initialFlow]);
+  React.useEffect(() => {
+    if (!flow) {
+      stateActions.setFlow(initialFlow);
+    }
+  }, [flow]);
+  if (docsContext.id) {
+    return initialFlow;
+  }
+  return flow != null ? flow : initialFlow;
+}
+
+const DEVICE_HEIGHT = {
+  iphonexs: 845
+};
+const toAppetizeUrl = (baseUrl, key, params) => `https://${baseUrl}/embed/${key}?${Object.entries(params).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&")}`;
+const Appetize = (props) => {
+  const device = "iphonexs";
+  const height = DEVICE_HEIGHT[device];
+  const defaultVersions = {
+    ios: "13.7",
+    android: "8.1"
+  };
+  const {
+    baseUrl = "appetize.io",
+    token,
+    flow,
+    osVersions = defaultVersions,
+    platform
+  } = props;
+  const osVersion = osVersions[platform];
+  return /* @__PURE__ */ React.createElement("iframe", {
+    title: "native app",
+    style: { height: `${height}px`, border: "none", width: "100%" },
+    src: toAppetizeUrl(baseUrl, token, {
+      autoplay: true,
+      device: "iphonexs",
+      deviceColor: "black",
+      scale: 100,
+      osVersion,
+      params: encodeURIComponent(JSON.stringify({
+        json: compressToEncodedURIComponent(JSON.stringify(flow))
+      }))
+    })
+  });
+};
+
+class StorybookPlayerPlugin {
+  constructor(actions) {
+    this.name = "Storybook";
+    this.actions = actions;
+    this.metricsPlugin = new MetricsPlugin({
+      onUpdate: (metrics) => {
+        actions.setMetrics(metrics);
+      },
+      onRenderEnd: (timing) => {
+        this.onMetricChange(timing, "render");
+      },
+      onUpdateEnd: (timing) => {
+        this.onMetricChange(timing, "update");
+      }
+    });
+  }
+  apply(player) {
+    player.registerPlugin(this.metricsPlugin);
+  }
+  applyWeb(wp) {
+    wp.registerPlugin(this.metricsPlugin);
+    wp.player.hooks.dataController.tap(this.name, (dc) => {
+      this.actions.clearEvents();
+      dc.hooks.onUpdate.tap(this.name, (dataUpdates) => {
+        const events = dataUpdates.map((dataUpdate) => createEvent({
+          type: "dataChange",
+          binding: dataUpdate.binding.asString(),
+          from: dataUpdate.oldValue,
+          to: dataUpdate.newValue
+        }));
+        this.actions.addEvents(events);
+      });
+    });
+    wp.player.logger.hooks.log.tap(this.name, (severity, data) => {
+      this.actions.addEvents([
+        createEvent({
+          type: "log",
+          message: data,
+          severity
+        })
+      ]);
+    });
+    wp.player.hooks.state.tap(this.name, (newState) => {
+      if ("error" in newState) {
+        this.actions.addEvents([
+          createEvent({
+            type: "stateChange",
+            state: newState.status,
+            error: newState.error.message
+          })
+        ]);
+      } else if (newState.status === "completed") {
+        this.actions.addEvents([
+          createEvent({
+            type: "stateChange",
+            state: newState.status,
+            outcome: newState.endState.outcome
+          })
+        ]);
+      } else {
+        this.actions.addEvents([
+          createEvent({
+            type: "stateChange",
+            state: newState.status
+          })
+        ]);
+      }
+    });
+  }
+  onMetricChange(timing, metricType) {
+    if (!timing.completed) {
+      return;
+    }
+    this.actions.addEvents([
+      createEvent({
+        type: "metric",
+        metricType,
+        message: `Duration: ${timing.duration.toFixed(0)} ms`
+      })
+    ]);
+  }
+}
+
+const PlayerFlowSummary = (props) => {
+  var _a;
+  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, {
+    as: "strong"
+  }, props.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, {
+    variant: "solid",
+    onClick: props.reset
+  }, "Reset"));
+};
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const WebPlayerPluginContext = React.createContext({ plugins: [] });
+const PlayerRenderContext = React.createContext({
+  platform: "web"
+});
+const StorybookControlsContext = React.createContext({
+  controls: {}
+});
+const LocalPlayerStory = (props) => {
+  var _a, _b;
+  let flow = useEditorFlow(props.flow);
+  const renderContext = React.useContext(PlayerRenderContext);
+  const pluginContext = React.useContext(WebPlayerPluginContext);
+  const controlsContext = React.useContext(StorybookControlsContext);
+  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 wp = React.useMemo(() => {
+    return new WebPlayer({
+      plugins: [new StorybookPlayerPlugin(stateActions), ...plugins]
+    });
+  }, [plugins]);
+  const startFlow = () => {
+    setPlayerState("in-progress");
+    wp.start(flow).then(() => {
+      setPlayerState("completed");
+    }).catch((e) => {
+      console.error("Error starting flow", e);
+      setPlayerState("error");
+    });
+  };
+  React.useEffect(() => {
+    startFlow();
+  }, [wp, flow]);
+  React.useEffect(() => {
+    var _a2;
+    if (controlsContext) {
+      flow = __spreadProps(__spreadValues({}, flow), {
+        data: __spreadValues(__spreadValues({}, (_a2 = flow.data) != null ? _a2 : {}), controlsContext)
+      });
+      stateActions.setFlow(flow);
+    }
+  }, [controlsContext]);
+  React.useEffect(() => {
+    return subscribe(addons.getChannel(), "@@player/flow/reset", () => {
+      startFlow();
+    });
+  }, [wp, flow]);
+  if (renderContext.platform !== "web" && renderContext.token) {
+    return /* @__PURE__ */ React.createElement(Appetize, {
+      flow,
+      platform: renderContext.platform,
+      token: renderContext.token,
+      baseUrl: renderContext.baseUrl,
+      osVersions: renderContext.appetizeVersions
+    });
+  }
+  const currentState = wp.player.getState();
+  if (playerState === "completed" && currentState.status === "completed") {
+    return /* @__PURE__ */ React.createElement(PlayerFlowSummary, {
+      reset: startFlow,
+      outcome: currentState.endState.outcome
+    });
+  }
+  if (playerState === "error" && currentState.status === "error") {
+    return /* @__PURE__ */ React.createElement(PlayerFlowSummary, {
+      reset: startFlow,
+      error: currentState.error
+    });
+  }
+  return /* @__PURE__ */ React.createElement(wp.Component, null);
+};
+function wrapInLazy(Component, flowFactory, other) {
+  const asPlayer = () => __async(this, null, function* () {
+    const mock = typeof flowFactory === "function" ? yield flowFactory() : flowFactory;
+    const Comp = () => {
+      const flow = __spreadValues(__spreadValues({}, makeFlow("default" in mock ? mock.default : mock)), other != null ? other : {});
+      return /* @__PURE__ */ React.createElement(Component, {
+        flow
+      });
+    };
+    return {
+      default: Comp
+    };
+  });
+  return React.lazy(asPlayer);
+}
+const PlayerStory = (props) => {
+  const _a = props, { flow, storybookControls } = _a, other = __objRest(_a, ["flow", "storybookControls"]);
+  const MockComp = React.useMemo(() => wrapInLazy(LocalPlayerStory, flow, other), []);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(ChakraProvider, null, /* @__PURE__ */ React.createElement(React.Suspense, {
+    fallback: /* @__PURE__ */ React.createElement(Spinner, null)
+  }, /* @__PURE__ */ React.createElement(StorybookControlsContext.Provider, {
+    value: __spreadValues({}, storybookControls)
+  }, /* @__PURE__ */ React.createElement(MockComp, null)))));
+};
+
+const PlayerDecorator = (story, ctx) => {
+  var _a;
+  const playerParams = ctx.parameters;
+  const [selectedPlatform, setPlatform] = React.useState("web");
+  React.useEffect(() => {
+    return subscribe(addons.getChannel(), "@@player/platform/set", (evt) => {
+      setPlatform(evt.platform);
+    });
+  }, []);
+  return /* @__PURE__ */ React.createElement(PlayerRenderContext.Provider, {
+    value: {
+      platform: selectedPlatform,
+      token: selectedPlatform === "web" ? void 0 : (_a = playerParams == null ? void 0 : playerParams.appetizeTokens) == null ? void 0 : _a[selectedPlatform],
+      baseUrl: playerParams.appetizeBaseUrl,
+      appetizeVersions: playerParams.appetizeVersions
+    }
+  }, /* @__PURE__ */ React.createElement(WebPlayerPluginContext.Provider, {
+    value: { plugins: playerParams.webplayerPlugins }
+  }, story()));
+};
+
+export { PlayerDecorator, PlayerRenderContext, PlayerStory, StorybookControlsContext, WebPlayerPluginContext, register };
+//# sourceMappingURL=index.esm.js.map