@player-ui/storybook 0.3.0-next.3 → 0.3.0-next.4

package/dist/index.cjs.js

@@ -404,9 +404,9 @@ class StorybookPlayerPlugin {
   apply(player) {
     player.registerPlugin(this.metricsPlugin);
   }
-  applyWeb(wp) {
-    wp.registerPlugin(this.metricsPlugin);
-    wp.player.hooks.dataController.tap(this.name, (dc) => {
+  applyReact(rp) {
+    rp.registerPlugin(this.metricsPlugin);
+    rp.player.hooks.dataController.tap(this.name, (dc) => {
       this.actions.clearEvents();
       dc.hooks.onUpdate.tap(this.name, (dataUpdates) => {
         const events = dataUpdates.map((dataUpdate) => createEvent({
@@ -418,7 +418,7 @@ class StorybookPlayerPlugin {
         this.actions.addEvents(events);
       });
     });
-    wp.player.logger.hooks.log.tap(this.name, (severity, data) => {
+    rp.player.logger.hooks.log.tap(this.name, (severity, data) => {
       this.actions.addEvents([
         createEvent({
           type: "log",
@@ -427,7 +427,7 @@ class StorybookPlayerPlugin {
         })
       ]);
     });
-    wp.player.hooks.state.tap(this.name, (newState) => {
+    rp.player.hooks.state.tap(this.name, (newState) => {
       if ("error" in newState) {
         this.actions.addEvents([
           createEvent({
@@ -533,7 +533,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const WebPlayerPluginContext = React__default["default"].createContext({ plugins: [] });
+const ReactPlayerPluginContext = React__default["default"].createContext({ plugins: [] });
 const PlayerRenderContext = React__default["default"].createContext({
   platform: "web"
 });
@@ -545,16 +545,16 @@ 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 pluginContext = React__default["default"].useContext(ReactPlayerPluginContext);
   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(() => {
+  const rp = React__default["default"].useMemo(() => {
     var _a2;
-    return new react$1.WebPlayer(__spreadProps(__spreadValues({}, options), {
+    return new react$1.ReactPlayer(__spreadProps(__spreadValues({}, options), {
       plugins: [
         new StorybookPlayerPlugin(stateActions),
         ...plugins,
@@ -564,7 +564,7 @@ const LocalPlayerStory = (props) => {
   }, [plugins]);
   const startFlow = () => {
     setPlayerState("in-progress");
-    wp.start(flow).then(() => {
+    rp.start(flow).then(() => {
       setPlayerState("completed");
     }).catch((e) => {
       console.error("Error starting flow", e);
@@ -573,7 +573,7 @@ const LocalPlayerStory = (props) => {
   };
   React__default["default"].useEffect(() => {
     startFlow();
-  }, [wp, flow]);
+  }, [rp, flow]);
   React__default["default"].useEffect(() => {
     var _a2;
     if (controlsContext) {
@@ -587,7 +587,7 @@ const LocalPlayerStory = (props) => {
     return subscribe(addons__default["default"].getChannel(), "@@player/flow/reset", () => {
       startFlow();
     });
-  }, [wp, flow]);
+  }, [rp, flow]);
   if (renderContext.platform !== "web" && renderContext.token) {
     return /* @__PURE__ */ React__default["default"].createElement(Appetize, {
       flow,
@@ -597,7 +597,7 @@ const LocalPlayerStory = (props) => {
       osVersions: renderContext.appetizeVersions
     });
   }
-  const currentState = wp.player.getState();
+  const currentState = rp.player.getState();
   if (playerState === "completed" && currentState.status === "completed") {
     return /* @__PURE__ */ React__default["default"].createElement(PlayerFlowSummary, {
       reset: startFlow,
@@ -610,7 +610,7 @@ const LocalPlayerStory = (props) => {
       error: currentState.error
     });
   }
-  return /* @__PURE__ */ React__default["default"].createElement(wp.Component, null);
+  return /* @__PURE__ */ React__default["default"].createElement(rp.Component, null);
 };
 function wrapInLazy(Component, flowFactory, other) {
   const asPlayer = () => __async(this, null, function* () {
@@ -657,8 +657,8 @@ const PlayerDecorator = (story, ctx) => {
       baseUrl: playerParams.appetizeBaseUrl,
       appetizeVersions: playerParams.appetizeVersions
     }
-  }, /* @__PURE__ */ React__default["default"].createElement(WebPlayerPluginContext.Provider, {
-    value: { plugins: playerParams.webplayerPlugins }
+  }, /* @__PURE__ */ React__default["default"].createElement(ReactPlayerPluginContext.Provider, {
+    value: { plugins: playerParams.reactPlayerPlugins }
   }, story()));
 };
 
@@ -666,7 +666,7 @@ exports.PlayerDecorator = PlayerDecorator;
 exports.PlayerOptionsContext = PlayerOptionsContext;
 exports.PlayerRenderContext = PlayerRenderContext;
 exports.PlayerStory = PlayerStory;
+exports.ReactPlayerPluginContext = ReactPlayerPluginContext;
 exports.StorybookControlsContext = StorybookControlsContext;
-exports.WebPlayerPluginContext = WebPlayerPluginContext;
 exports.register = register;
 //# sourceMappingURL=index.cjs.js.map

package/dist/index.d.ts

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

package/dist/index.esm.js

@@ -9,7 +9,7 @@ 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 { 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';
@@ -393,9 +393,9 @@ class StorybookPlayerPlugin {
   apply(player) {
     player.registerPlugin(this.metricsPlugin);
   }
-  applyWeb(wp) {
-    wp.registerPlugin(this.metricsPlugin);
-    wp.player.hooks.dataController.tap(this.name, (dc) => {
+  applyReact(rp) {
+    rp.registerPlugin(this.metricsPlugin);
+    rp.player.hooks.dataController.tap(this.name, (dc) => {
       this.actions.clearEvents();
       dc.hooks.onUpdate.tap(this.name, (dataUpdates) => {
         const events = dataUpdates.map((dataUpdate) => createEvent({
@@ -407,7 +407,7 @@ class StorybookPlayerPlugin {
         this.actions.addEvents(events);
       });
     });
-    wp.player.logger.hooks.log.tap(this.name, (severity, data) => {
+    rp.player.logger.hooks.log.tap(this.name, (severity, data) => {
       this.actions.addEvents([
         createEvent({
           type: "log",
@@ -416,7 +416,7 @@ class StorybookPlayerPlugin {
         })
       ]);
     });
-    wp.player.hooks.state.tap(this.name, (newState) => {
+    rp.player.hooks.state.tap(this.name, (newState) => {
       if ("error" in newState) {
         this.actions.addEvents([
           createEvent({
@@ -522,7 +522,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const WebPlayerPluginContext = React.createContext({ plugins: [] });
+const ReactPlayerPluginContext = React.createContext({ plugins: [] });
 const PlayerRenderContext = React.createContext({
   platform: "web"
 });
@@ -534,16 +534,16 @@ const LocalPlayerStory = (props) => {
   var _a, _b;
   let flow = useEditorFlow(props.flow);
   const renderContext = React.useContext(PlayerRenderContext);
-  const pluginContext = React.useContext(WebPlayerPluginContext);
+  const pluginContext = React.useContext(ReactPlayerPluginContext);
   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(() => {
+  const rp = React.useMemo(() => {
     var _a2;
-    return new WebPlayer(__spreadProps(__spreadValues({}, options), {
+    return new ReactPlayer(__spreadProps(__spreadValues({}, options), {
       plugins: [
         new StorybookPlayerPlugin(stateActions),
         ...plugins,
@@ -553,7 +553,7 @@ const LocalPlayerStory = (props) => {
   }, [plugins]);
   const startFlow = () => {
     setPlayerState("in-progress");
-    wp.start(flow).then(() => {
+    rp.start(flow).then(() => {
       setPlayerState("completed");
     }).catch((e) => {
       console.error("Error starting flow", e);
@@ -562,7 +562,7 @@ const LocalPlayerStory = (props) => {
   };
   React.useEffect(() => {
     startFlow();
-  }, [wp, flow]);
+  }, [rp, flow]);
   React.useEffect(() => {
     var _a2;
     if (controlsContext) {
@@ -576,7 +576,7 @@ const LocalPlayerStory = (props) => {
     return subscribe(addons.getChannel(), "@@player/flow/reset", () => {
       startFlow();
     });
-  }, [wp, flow]);
+  }, [rp, flow]);
   if (renderContext.platform !== "web" && renderContext.token) {
     return /* @__PURE__ */ React.createElement(Appetize, {
       flow,
@@ -586,7 +586,7 @@ const LocalPlayerStory = (props) => {
       osVersions: renderContext.appetizeVersions
     });
   }
-  const currentState = wp.player.getState();
+  const currentState = rp.player.getState();
   if (playerState === "completed" && currentState.status === "completed") {
     return /* @__PURE__ */ React.createElement(PlayerFlowSummary, {
       reset: startFlow,
@@ -599,7 +599,7 @@ const LocalPlayerStory = (props) => {
       error: currentState.error
     });
   }
-  return /* @__PURE__ */ React.createElement(wp.Component, null);
+  return /* @__PURE__ */ React.createElement(rp.Component, null);
 };
 function wrapInLazy(Component, flowFactory, other) {
   const asPlayer = () => __async(this, null, function* () {
@@ -646,10 +646,10 @@ const PlayerDecorator = (story, ctx) => {
       baseUrl: playerParams.appetizeBaseUrl,
       appetizeVersions: playerParams.appetizeVersions
     }
-  }, /* @__PURE__ */ React.createElement(WebPlayerPluginContext.Provider, {
-    value: { plugins: playerParams.webplayerPlugins }
+  }, /* @__PURE__ */ React.createElement(ReactPlayerPluginContext.Provider, {
+    value: { plugins: playerParams.reactPlayerPlugins }
   }, story()));
 };
 
-export { PlayerDecorator, PlayerOptionsContext, PlayerRenderContext, PlayerStory, StorybookControlsContext, WebPlayerPluginContext, register };
+export { PlayerDecorator, PlayerOptionsContext, PlayerRenderContext, PlayerStory, ReactPlayerPluginContext, StorybookControlsContext, register };
 //# sourceMappingURL=index.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@player-ui/storybook",
-  "version": "0.3.0-next.3",
+  "version": "0.3.0-next.4",
   "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.3.0-next.3",
-    "@player-ui/make-flow": "0.3.0-next.3"
+    "@player-ui/react": "0.3.0-next.4",
+    "@player-ui/make-flow": "0.3.0-next.4"
   },
   "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.3.0-next.3",
+    "@player-ui/metrics-plugin-react": "0.3.0-next.4",
     "@babel/runtime": "7.15.4"
   },
   "main": "dist/index.cjs.js",

package/src/decorator/index.tsx

@@ -3,7 +3,7 @@ import type { DecoratorFn } from '@storybook/react';
 import addons from '@storybook/addons';
 import type { PlatformSetType } from '../state/hooks';
 import { subscribe } from '../state/hooks';
-import { WebPlayerPluginContext, PlayerRenderContext } from '../player';
+import { ReactPlayerPluginContext, PlayerRenderContext } from '../player';
 import type { PlayerParametersType, RenderTarget } from '../types';
 
 /**
@@ -36,11 +36,11 @@ export const PlayerDecorator: DecoratorFn = (story, ctx) => {
         appetizeVersions: playerParams.appetizeVersions,
       }}
     >
-      <WebPlayerPluginContext.Provider
-        value={{ plugins: playerParams.webplayerPlugins }}
+      <ReactPlayerPluginContext.Provider
+        value={{ plugins: playerParams.reactPlayerPlugins }}
       >
         {story()}
-      </WebPlayerPluginContext.Provider>
+      </ReactPlayerPluginContext.Provider>
     </PlayerRenderContext.Provider>
   );
 };

package/src/player/PlayerStory.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import type {
-  WebPlayerPlugin,
+  ReactPlayerPlugin,
   PlayerFlowStatus,
   Flow,
-  WebPlayerOptions,
+  ReactPlayerOptions,
 } from '@player-ui/react';
-import { WebPlayer } from '@player-ui/react';
+import { ReactPlayer } from '@player-ui/react';
 import { ChakraProvider, Spinner } from '@chakra-ui/react';
 import { makeFlow } from '@player-ui/make-flow';
 import addons from '@storybook/addons';
 import type { AsyncImportFactory, RenderTarget } from '../types';
 import { useEditorFlow } from './hooks';
 import { Appetize } from './Appetize';
-import { StorybookPlayerPlugin } from './storybookWebPlayerPlugin';
+import { StorybookPlayerPlugin } from './storybookReactPlayerPlugin';
 import { useStateActions, subscribe } from '../state/hooks';
 import { PlayerFlowSummary } from './PlayerFlowSummary';
 
@@ -21,12 +21,12 @@ interface LocalPlayerStory {
   flow: Flow;
 
   /** Web plugins to load into Player */
-  webPlugins?: Array<WebPlayerPlugin>;
+  webPlugins?: Array<ReactPlayerPlugin>;
 }
 
-export const WebPlayerPluginContext = React.createContext<{
+export const ReactPlayerPluginContext = React.createContext<{
   /** Web plugins to load into Player */
-  plugins?: Array<WebPlayerPlugin>;
+  plugins?: Array<ReactPlayerPlugin>;
 }>({ plugins: [] });
 
 export const PlayerRenderContext = React.createContext<RenderTarget>({
@@ -42,7 +42,7 @@ export const StorybookControlsContext = React.createContext<{
 
 export const PlayerOptionsContext = React.createContext<{
   /**  these are options such as suspend, or plugins */
-  options?: WebPlayerOptions;
+  options?: ReactPlayerOptions;
 }>({ options: {} });
 
 /** A component to render a player + flow */
@@ -50,7 +50,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
   let flow = useEditorFlow(props.flow);
 
   const renderContext = React.useContext(PlayerRenderContext);
-  const pluginContext = React.useContext(WebPlayerPluginContext);
+  const pluginContext = React.useContext(ReactPlayerPluginContext);
   const controlsContext = React.useContext(StorybookControlsContext);
   const optionsContext = React.useContext(PlayerOptionsContext);
   const options = { ...optionsContext?.options };
@@ -59,8 +59,8 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
   const [playerState, setPlayerState] =
     React.useState<PlayerFlowStatus>('not-started');
 
-  const wp = React.useMemo(() => {
-    return new WebPlayer({
+  const rp = React.useMemo(() => {
+    return new ReactPlayer({
       ...options,
       plugins: [
         new StorybookPlayerPlugin(stateActions),
@@ -73,7 +73,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
   /** A callback to start the flow */
   const startFlow = () => {
     setPlayerState('in-progress');
-    wp.start(flow)
+    rp.start(flow)
       .then(() => {
         setPlayerState('completed');
       })
@@ -85,7 +85,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
 
   React.useEffect(() => {
     startFlow();
-  }, [wp, flow]);
+  }, [rp, flow]);
 
   React.useEffect(() => {
     // merge new data from storybook controls
@@ -105,7 +105,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
     return subscribe(addons.getChannel(), '@@player/flow/reset', () => {
       startFlow();
     });
-  }, [wp, flow]);
+  }, [rp, flow]);
 
   if (renderContext.platform !== 'web' && renderContext.token) {
     return (
@@ -119,7 +119,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
     );
   }
 
-  const currentState = wp.player.getState();
+  const currentState = rp.player.getState();
 
   if (playerState === 'completed' && currentState.status === 'completed') {
     return (
@@ -134,7 +134,7 @@ const LocalPlayerStory = (props: LocalPlayerStory) => {
     return <PlayerFlowSummary reset={startFlow} error={currentState.error} />;
   }
 
-  return <wp.Component />;
+  return <rp.Component />;
 };
 
 type Mock = Record<string, unknown>;
@@ -185,7 +185,7 @@ export interface PlayerStoryProps {
   /** props from storybook controls */
   storybookControls?: Flow['data'];
   /**  options, like suspend and plugins */
-  options?: WebPlayerOptions;
+  options?: ReactPlayerOptions;
 }
 
 /**

package/src/player/{storybookWebPlayerPlugin.ts → storybookReactPlayerPlugin.ts}

@@ -1,4 +1,4 @@
-import type { WebPlayer, Player, WebPlayerPlugin } from '@player-ui/react';
+import type { ReactPlayer, Player, ReactPlayerPlugin } from '@player-ui/react';
 import type { Timing } from '@player-ui/metrics-plugin-react';
 import { MetricsPlugin } from '@player-ui/metrics-plugin-react';
 import type {
@@ -14,7 +14,7 @@ import { createEvent } from '../state';
  *
  * A web plugin for interacting with storybook
  */
-export class StorybookPlayerPlugin implements WebPlayerPlugin {
+export class StorybookPlayerPlugin implements ReactPlayerPlugin {
   public readonly name = 'Storybook';
 
   private actions: StateActions;
@@ -39,10 +39,10 @@ export class StorybookPlayerPlugin implements WebPlayerPlugin {
     player.registerPlugin(this.metricsPlugin);
   }
 
-  applyWeb(wp: WebPlayer) {
-    wp.registerPlugin(this.metricsPlugin);
+  applyReact(rp: ReactPlayer) {
+    rp.registerPlugin(this.metricsPlugin);
 
-    wp.player.hooks.dataController.tap(this.name, (dc) => {
+    rp.player.hooks.dataController.tap(this.name, (dc) => {
       this.actions.clearEvents();
 
       dc.hooks.onUpdate.tap(this.name, (dataUpdates) => {
@@ -59,7 +59,7 @@ export class StorybookPlayerPlugin implements WebPlayerPlugin {
       });
     });
 
-    wp.player.logger.hooks.log.tap(this.name, (severity, data) => {
+    rp.player.logger.hooks.log.tap(this.name, (severity, data) => {
       this.actions.addEvents([
         createEvent<LogEventType>({
           type: 'log',
@@ -69,7 +69,7 @@ export class StorybookPlayerPlugin implements WebPlayerPlugin {
       ]);
     });
 
-    wp.player.hooks.state.tap(this.name, (newState) => {
+    rp.player.hooks.state.tap(this.name, (newState) => {
       if ('error' in newState) {
         this.actions.addEvents([
           createEvent<StateChangeEventType>({

package/src/types.ts

@@ -1,9 +1,9 @@
-import type { WebPlayerPlugin } from '@player-ui/react';
+import type { ReactPlayerPlugin } from '@player-ui/react';
 import type { AppetizeVersions } from './player/Appetize';
 
 export interface PlayerParametersType {
   /** plugins to use for any loaded player */
-  webplayerPlugins?: Array<WebPlayerPlugin>;
+  reactPlayerPlugins?: Array<ReactPlayerPlugin>;
 
   /** Appetize tokens to use */
   appetizeTokens?: {