@player-ui/storybook 0.0.1-next.13 → 0.0.1-next.16

package/dist/index.cjs.js

@@ -540,19 +540,27 @@ const PlayerRenderContext = React__default["default"].createContext({
 const StorybookControlsContext = React__default["default"].createContext({
   controls: {}
 });
+const PlayerOptionsContext = React__default["default"].createContext({ options: {} });
 const LocalPlayerStory = (props) => {
   var _a, _b;
   let flow = useEditorFlow(props.flow);
   const renderContext = React__default["default"].useContext(PlayerRenderContext);
   const pluginContext = React__default["default"].useContext(WebPlayerPluginContext);
   const controlsContext = React__default["default"].useContext(StorybookControlsContext);
+  const optionsContext = React__default["default"].useContext(PlayerOptionsContext);
+  const options = __spreadValues({}, optionsContext == null ? void 0 : optionsContext.options);
   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 wp = React__default["default"].useMemo(() => {
-    return new react$1.WebPlayer({
-      plugins: [new StorybookPlayerPlugin(stateActions), ...plugins]
-    });
+    var _a2;
+    return new react$1.WebPlayer(__spreadProps(__spreadValues({}, options), {
+      plugins: [
+        new StorybookPlayerPlugin(stateActions),
+        ...plugins,
+        ...(_a2 = options == null ? void 0 : options.plugins) != null ? _a2 : []
+      ]
+    }));
   }, [plugins]);
   const startFlow = () => {
     setPlayerState("in-progress");
@@ -620,13 +628,17 @@ function wrapInLazy(Component, flowFactory, other) {
   return React__default["default"].lazy(asPlayer);
 }
 const PlayerStory = (props) => {
-  const _a = props, { flow, storybookControls } = _a, other = __objRest(_a, ["flow", "storybookControls"]);
+  const _a = props, { flow, storybookControls, options } = _a, other = __objRest(_a, ["flow", "storybookControls", "options"]);
   const MockComp = React__default["default"].useMemo(() => wrapInLazy(LocalPlayerStory, flow, other), []);
   return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.ChakraProvider, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Suspense, {
     fallback: /* @__PURE__ */ React__default["default"].createElement(react.Spinner, null)
   }, /* @__PURE__ */ React__default["default"].createElement(StorybookControlsContext.Provider, {
     value: __spreadValues({}, storybookControls)
-  }, /* @__PURE__ */ React__default["default"].createElement(MockComp, null)))));
+  }, /* @__PURE__ */ React__default["default"].createElement(PlayerOptionsContext.Provider, {
+    value: {
+      options
+    }
+  }, /* @__PURE__ */ React__default["default"].createElement(MockComp, null)), " "))));
 };
 
 const PlayerDecorator = (story, ctx) => {
@@ -651,6 +663,7 @@ const PlayerDecorator = (story, ctx) => {
 };
 
 exports.PlayerDecorator = PlayerDecorator;
+exports.PlayerOptionsContext = PlayerOptionsContext;
 exports.PlayerRenderContext = PlayerRenderContext;
 exports.PlayerStory = PlayerStory;
 exports.StorybookControlsContext = StorybookControlsContext;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { DecoratorFn } from '@storybook/react';
 import React from 'react';
-import { WebPlayerPlugin, Flow } from '@player-ui/react';
+import { WebPlayerPlugin, Flow, WebPlayerOptions } from '@player-ui/react';
 
 /** register all the storybook addons */
 declare function register(): void;
@@ -33,7 +33,7 @@ declare type RenderTarget = {
 };
 
 declare const WebPlayerPluginContext: React.Context<{
-    /** Plugins to use for the player */
+    /** Web plugins to load into Player */
     plugins?: WebPlayerPlugin[] | undefined;
 }>;
 declare const PlayerRenderContext: React.Context<RenderTarget>;
@@ -41,6 +41,10 @@ declare const StorybookControlsContext: React.Context<{
     /** any storybook controls to include */
     controls?: Flow['data'];
 }>;
+declare const PlayerOptionsContext: React.Context<{
+    /**  these are options such as suspend, or plugins */
+    options?: WebPlayerOptions | undefined;
+}>;
 declare type Mock = Record<string, unknown>;
 declare type MockFactory = () => Mock;
 declare type MockFactoryOrPromise = MockFactory | Mock;
@@ -51,6 +55,8 @@ interface PlayerStoryProps {
     data?: Flow['data'];
     /** props from storybook controls */
     storybookControls?: Flow['data'];
+    /**  options, like suspend and plugins */
+    options?: WebPlayerOptions;
 }
 /**
  * Takes an initial flow and renders it as a story in storybook.
@@ -58,4 +64,4 @@ interface PlayerStoryProps {
  */
 declare const PlayerStory: (props: PlayerStoryProps) => JSX.Element;
 
-export { PlayerDecorator, PlayerRenderContext, PlayerStory, PlayerStoryProps, StorybookControlsContext, WebPlayerPluginContext, register };
+export { PlayerDecorator, PlayerOptionsContext, PlayerRenderContext, PlayerStory, PlayerStoryProps, StorybookControlsContext, WebPlayerPluginContext, register };

package/dist/index.esm.js

@@ -529,19 +529,27 @@ const PlayerRenderContext = React.createContext({
 const StorybookControlsContext = React.createContext({
   controls: {}
 });
+const PlayerOptionsContext = React.createContext({ options: {} });
 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 optionsContext = React.useContext(PlayerOptionsContext);
+  const options = __spreadValues({}, optionsContext == null ? void 0 : optionsContext.options);
   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]
-    });
+    var _a2;
+    return new WebPlayer(__spreadProps(__spreadValues({}, options), {
+      plugins: [
+        new StorybookPlayerPlugin(stateActions),
+        ...plugins,
+        ...(_a2 = options == null ? void 0 : options.plugins) != null ? _a2 : []
+      ]
+    }));
   }, [plugins]);
   const startFlow = () => {
     setPlayerState("in-progress");
@@ -609,13 +617,17 @@ function wrapInLazy(Component, flowFactory, other) {
   return React.lazy(asPlayer);
 }
 const PlayerStory = (props) => {
-  const _a = props, { flow, storybookControls } = _a, other = __objRest(_a, ["flow", "storybookControls"]);
+  const _a = props, { flow, storybookControls, options } = _a, other = __objRest(_a, ["flow", "storybookControls", "options"]);
   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)))));
+  }, /* @__PURE__ */ React.createElement(PlayerOptionsContext.Provider, {
+    value: {
+      options
+    }
+  }, /* @__PURE__ */ React.createElement(MockComp, null)), " "))));
 };
 
 const PlayerDecorator = (story, ctx) => {
@@ -639,5 +651,5 @@ const PlayerDecorator = (story, ctx) => {
   }, story()));
 };
 
-export { PlayerDecorator, PlayerRenderContext, PlayerStory, StorybookControlsContext, WebPlayerPluginContext, register };
+export { PlayerDecorator, PlayerOptionsContext, PlayerRenderContext, PlayerStory, StorybookControlsContext, WebPlayerPluginContext, register };
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@player-ui/storybook",
-  "version": "0.0.1-next.13",
+  "version": "0.0.1-next.16",
   "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.0.1-next.13",
-    "@player-ui/make-flow": "0.0.1-next.13"
+    "@player-ui/react": "0.0.1-next.16",
+    "@player-ui/make-flow": "0.0.1-next.16"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.3.1",
@@ -28,7 +28,7 @@
     "dequal": "^2.0.2",
     "ts-debounce": "^4.0.0",
     "uuid": "^8.3.2",
-    "@player-ui/metrics-plugin-react": "0.0.1-next.13",
+    "@player-ui/metrics-plugin-react": "0.0.1-next.16",
     "@babel/runtime": "7.15.4"
   },
   "main": "dist/index.cjs.js",

package/src/player/PlayerStory.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import type { WebPlayerPlugin, PlayerFlowStatus, Flow } from '@player-ui/react';
+import type {
+  WebPlayerPlugin,
+  PlayerFlowStatus,
+  Flow,
+  WebPlayerOptions,
+} from '@player-ui/react';
 import { WebPlayer } from '@player-ui/react';
 import { ChakraProvider, Spinner } from '@chakra-ui/react';
 import { makeFlow } from '@player-ui/make-flow';
@@ -15,12 +20,12 @@ interface LocalPlayerStory {
   /** the mock to load */
   flow: Flow;
 
-  /** plugins to the player */
+  /** Web plugins to load into Player */
   webPlugins?: Array<WebPlayerPlugin>;
 }
 
 export const WebPlayerPluginContext = React.createContext<{
-  /** Plugins to use for the player */
+  /** Web plugins to load into Player */
   plugins?: Array<WebPlayerPlugin>;
 }>({ plugins: [] });
 
@@ -35,6 +40,11 @@ export const StorybookControlsContext = React.createContext<{
   controls: {},
 });
 
+export const PlayerOptionsContext = React.createContext<{
+  /**  these are options such as suspend, or plugins */
+  options?: WebPlayerOptions;
+}>({ options: {} });
+
 /** A component to render a player + flow */
 const LocalPlayerStory = (props: LocalPlayerStory) => {
   let flow = useEditorFlow(props.flow);
@@ -42,6 +52,8 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
   const renderContext = React.useContext(PlayerRenderContext);
   const pluginContext = React.useContext(WebPlayerPluginContext);
   const controlsContext = React.useContext(StorybookControlsContext);
+  const optionsContext = React.useContext(PlayerOptionsContext);
+  const options = { ...optionsContext?.options };
   const stateActions = useStateActions(addons.getChannel());
   const plugins = props.webPlugins ?? pluginContext?.plugins ?? [];
   const [playerState, setPlayerState] =
@@ -49,7 +61,12 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
 
   const wp = React.useMemo(() => {
     return new WebPlayer({
-      plugins: [new StorybookPlayerPlugin(stateActions), ...plugins],
+      ...options,
+      plugins: [
+        new StorybookPlayerPlugin(stateActions),
+        ...plugins,
+        ...(options?.plugins ?? []),
+      ],
     });
   }, [plugins]);
 
@@ -167,6 +184,8 @@ export interface PlayerStoryProps {
   data?: Flow['data'];
   /** props from storybook controls */
   storybookControls?: Flow['data'];
+  /**  options, like suspend and plugins */
+  options?: WebPlayerOptions;
 }
 
 /**
@@ -174,7 +193,8 @@ export interface PlayerStoryProps {
  * This handles all of the wiring of the mock into the flow editor, events, etc
  */
 export const PlayerStory = (props: PlayerStoryProps) => {
-  const { flow, storybookControls, ...other } = props;
+  const { flow, storybookControls, options, ...other } = props;
+
   const MockComp = React.useMemo(
     () => wrapInLazy(LocalPlayerStory, flow, other),
     []
@@ -189,7 +209,13 @@ export const PlayerStory = (props: PlayerStoryProps) => {
               ...storybookControls,
             }}
           >
-            <MockComp />
+            <PlayerOptionsContext.Provider
+              value={{
+                options,
+              }}
+            >
+              <MockComp />
+            </PlayerOptionsContext.Provider>{' '}
           </StorybookControlsContext.Provider>
         </React.Suspense>
       </ChakraProvider>