@player-ui/reference-assets-plugin-react 0.4.0 → 0.4.1-next.0

package/dist/index.cjs.js

@@ -16,19 +16,19 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var makeClass__default = /*#__PURE__*/_interopDefaultLegacy(makeClass);
 
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
@@ -45,7 +45,7 @@ const defaultKeyStrings = [
   "Escape"
 ];
 const getConfig = (userConfig = {}) => {
-  return __spreadValues$7({
+  return __spreadValues$8({
     liveFormat: true,
     suppressBeacons: false,
     quickFormatDelay: 200,
@@ -199,19 +199,19 @@ const useInputAsset = (props, config) => {
   };
 };
 
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
@@ -222,27 +222,27 @@ const Input = (props) => {
     isInvalid: Boolean(validation)
   }, label && /* @__PURE__ */ React__default["default"].createElement(react.FormLabel, {
     htmlFor: id
-  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$6({}, label))), /* @__PURE__ */ React__default["default"].createElement(react.Input, __spreadValues$6({
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$7({}, label))), /* @__PURE__ */ React__default["default"].createElement(react.Input, __spreadValues$7({
     id,
     size: "md"
-  }, inputProps)), validation && /* @__PURE__ */ React__default["default"].createElement(react.FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React__default["default"].createElement(react.FormHelperText, null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$6({}, note))));
+  }, inputProps)), validation && /* @__PURE__ */ React__default["default"].createElement(react.FormErrorMessage, null, validation.message), note && /* @__PURE__ */ React__default["default"].createElement(react.FormHelperText, null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$7({}, note))));
 };
 
-var __defProp$5 = Object.defineProperty;
+var __defProp$6 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
@@ -254,25 +254,25 @@ const useText = (props) => {
   if (props.modifiers && (modifierContext == null ? void 0 : modifierContext.getClassForModifier)) {
     className = makeClass__default["default"](...props.modifiers.map(modifierContext.getClassForModifier));
   }
-  return __spreadProps(__spreadValues$5({}, react$1.useAssetProps(props)), {
+  return __spreadProps(__spreadValues$6({}, react$1.useAssetProps(props)), {
     className,
     children: props.value
   });
 };
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
@@ -292,7 +292,33 @@ const Text = (props) => {
       href: linkModifier.metaData.ref
     }, value);
   }
-  return /* @__PURE__ */ React__default["default"].createElement("span", __spreadValues$4({}, spanProps), value);
+  return /* @__PURE__ */ React__default["default"].createElement("span", __spreadValues$5({}, spanProps), value);
+};
+
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+const Collection = (props) => {
+  var _a;
+  return /* @__PURE__ */ React__default["default"].createElement(react.Flex, {
+    direction: "column",
+    gap: "5"
+  }, props.label && /* @__PURE__ */ React__default["default"].createElement("h3", null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$4({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$4({
+    key: a.asset.id
+  }, a))));
 };
 
 var __defProp$3 = Object.defineProperty;
@@ -311,14 +337,21 @@ var __spreadValues$3 = (a, b) => {
     }
   return a;
 };
-const Collection = (props) => {
-  var _a;
-  return /* @__PURE__ */ React__default["default"].createElement(react.Flex, {
-    direction: "column",
-    gap: "5"
-  }, props.label && /* @__PURE__ */ React__default["default"].createElement("h3", null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$3({}, props.label))), (_a = props.values) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$3({
-    key: a.asset.id
-  }, a))));
+const useAction = (props) => {
+  const { label } = props;
+  const beacon = beaconPluginReact.useBeacon({
+    asset: props,
+    action: "clicked",
+    element: "button"
+  });
+  return {
+    id: props.id,
+    onClick: () => {
+      beacon();
+      props.run();
+    },
+    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$3({}, label == null ? void 0 : label.asset)) : null
+  };
 };
 
 var __defProp$2 = Object.defineProperty;
@@ -337,21 +370,13 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
-const useAction = (props) => {
+const Action = (props) => {
+  var _a;
   const { label } = props;
-  const beacon = beaconPluginReact.useBeacon({
-    asset: props,
-    action: "clicked",
-    element: "button"
-  });
-  return {
-    id: props.id,
-    onClick: () => {
-      beacon();
-      props.run();
-    },
-    children: (label == null ? void 0 : label.asset) ? /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$2({}, label == null ? void 0 : label.asset)) : null
-  };
+  const buttonProps = useAction(props);
+  return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Button, __spreadValues$2({
+    variant: referenceAssetsPlugin.isBackAction(props) ? "ghost" : "solid"
+  }, buttonProps), ((_a = props == null ? void 0 : props.metaData) == null ? void 0 : _a.role) === "back" && /* @__PURE__ */ React__default["default"].createElement(icons.ChevronLeftIcon, null), label && /* @__PURE__ */ React__default["default"].createElement(react.Text, null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$2({}, label)))));
 };
 
 var __defProp$1 = Object.defineProperty;
@@ -370,42 +395,8 @@ var __spreadValues$1 = (a, b) => {
     }
   return a;
 };
-const Action = (props) => {
-  const { label } = props;
-  const buttonProps = useAction(props);
-  return /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement(react.Button, __spreadValues$1({
-    variant: referenceAssetsPlugin.isBackAction(props) ? "ghost" : "solid"
-  }, buttonProps), referenceAssetsPlugin.isBackAction(props) && /* @__PURE__ */ React__default["default"].createElement(icons.ChevronLeftIcon, null), label && /* @__PURE__ */ React__default["default"].createElement(react.Text, null, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, label)))));
-};
-
-var __defProp = Object.defineProperty;
-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;
-};
 const Info = (props) => {
-  var _a, _b;
-  const segmentedActions = React__default["default"].useMemo(() => {
-    var _a2, _b2;
-    if (!((_a2 = props.actions) == null ? void 0 : _a2.length)) {
-      return;
-    }
-    return (_b2 = props.actions) == null ? void 0 : _b2.reduce((memo, next) => {
-      memo[referenceAssetsPlugin.isBackAction(next.asset) ? "prev" : "next"].push(next);
-      return memo;
-    }, { prev: [], next: [] });
-  }, [props.actions]);
+  var _a, _b, _c, _d;
   return /* @__PURE__ */ React__default["default"].createElement(react.Box, {
     minW: { base: void 0, md: "md" }
   }, /* @__PURE__ */ React__default["default"].createElement(react.Stack, {
@@ -413,24 +404,55 @@ const Info = (props) => {
   }, props.title && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
     size: "lg",
     as: "h1"
-  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, props.title))), props.subTitle && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, props.title))), props.subTitle && /* @__PURE__ */ React__default["default"].createElement(react.Heading, {
     size: "md",
     as: "h3"
-  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, props.subTitle))), /* @__PURE__ */ React__default["default"].createElement(react.Box, null, props.primaryInfo && /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, props.primaryInfo))), /* @__PURE__ */ React__default["default"].createElement(react.Stack, {
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, props.subTitle))), /* @__PURE__ */ React__default["default"].createElement(react.Box, null, props.primaryInfo && /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({}, props.primaryInfo))), /* @__PURE__ */ React__default["default"].createElement(react.Stack, {
     gap: "4"
-  }, segmentedActions && /* @__PURE__ */ React__default["default"].createElement(react.Divider, null), /* @__PURE__ */ React__default["default"].createElement(react.HStack, {
+  }, (props == null ? void 0 : props.segmentedActions) && /* @__PURE__ */ React__default["default"].createElement(react.Divider, null), /* @__PURE__ */ React__default["default"].createElement(react.HStack, {
     justifyContent: "space-between"
   }, /* @__PURE__ */ React__default["default"].createElement(react.ButtonGroup, {
     spacing: "6"
-  }, (_a = segmentedActions == null ? void 0 : segmentedActions.prev) == null ? void 0 : _a.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({
+  }, (_b = (_a = props == null ? void 0 : props.segmentedActions) == null ? void 0 : _a.prev) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({
     key: a.asset.id
   }, a)))), /* @__PURE__ */ React__default["default"].createElement(react.ButtonGroup, {
     spacing: "6"
-  }, (_b = segmentedActions == null ? void 0 : segmentedActions.next) == null ? void 0 : _b.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({
+  }, (_d = (_c = props == null ? void 0 : props.segmentedActions) == null ? void 0 : _c.next) == null ? void 0 : _d.map((a) => /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues$1({
     key: a.asset.id
   }, a))))))));
 };
 
+var __defProp = Object.defineProperty;
+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;
+};
+const Image = (props) => {
+  const { metaData, caption, altText } = props;
+  console.log(props);
+  return /* @__PURE__ */ React__default["default"].createElement("figure", {
+    className: "figure"
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "figure-img img-fluid",
+    src: metaData.ref,
+    alt: altText
+  }), caption && /* @__PURE__ */ React__default["default"].createElement("figcaption", {
+    className: "figure-caption",
+    style: { marginTop: 15 }
+  }, /* @__PURE__ */ React__default["default"].createElement(react$1.ReactAsset, __spreadValues({}, caption))));
+};
+
 const OptionalChakraThemeProvider = (props) => {
   const theme = react.useTheme();
   if (theme) {
@@ -448,7 +470,8 @@ class ReferenceAssetsPlugin {
       ["text", Text],
       ["action", Action],
       ["info", Info],
-      ["collection", Collection]
+      ["collection", Collection],
+      ["image", Image]
     ]));
     reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
       return () => {
@@ -463,6 +486,7 @@ class ReferenceAssetsPlugin {
 
 exports.Action = Action;
 exports.Collection = Collection;
+exports.Image = Image;
 exports.Info = Info;
 exports.Input = Input;
 exports.ReferenceAssetsPlugin = ReferenceAssetsPlugin;

package/dist/index.d.ts

@@ -1,12 +1,19 @@
 import { ReactPlayerPlugin, ReactPlayer } from '@player-ui/react';
-import { Player } from '@player-ui/player';
-import { TransformedInput, TextAsset, LinkModifier, CollectionAsset, TransformedAction, InfoAsset } from '@player-ui/reference-assets-plugin';
+import { ExtendedPlayerPlugin, Player } from '@player-ui/player';
+import { InputAsset, TextAsset, ActionAsset, CollectionAsset, InfoAsset, TransformedInput, LinkModifier, TransformedAction, InfoAssetTransform, TransformedImage } from '@player-ui/reference-assets-plugin';
 import React from 'react';
 
 /**
  * A plugin to register the base reference assets
  */
-declare class ReferenceAssetsPlugin implements ReactPlayerPlugin {
+declare class ReferenceAssetsPlugin implements ReactPlayerPlugin, ExtendedPlayerPlugin<[
+    InputAsset,
+    TextAsset,
+    ActionAsset,
+    CollectionAsset
+], [
+    InfoAsset
+]> {
     name: string;
     applyReact(reactPlayer: ReactPlayer): void;
     apply(player: Player): void;
@@ -80,6 +87,8 @@ declare const useAction: (props: TransformedAction) => {
 };
 
 /** The info view type is used to show information to the user */
-declare const Info: (props: InfoAsset) => JSX.Element;
+declare const Info: (props: InfoAssetTransform) => JSX.Element;
 
-export { Action, Collection, Info, Input, InputHookConfig, ReferenceAssetsPlugin, Text, TextModifierContext, TextModifierContextType, getConfig, getLinkModifier, useAction, useInputAsset, useInputBeacon, useText };
+declare const Image: (props: TransformedImage) => JSX.Element;
+
+export { Action, Collection, Image, Info, Input, InputHookConfig, ReferenceAssetsPlugin, Text, TextModifierContext, TextModifierContextType, getConfig, getLinkModifier, useAction, useInputAsset, useInputBeacon, useText };