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

package/dist/xlr/InputAsset.json

@@ -0,0 +1,109 @@
+{
+    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+    "name": "InputAsset",
+    "type": "object",
+    "properties": {
+        "label": {
+            "required": false,
+            "node": {
+                "type": "ref",
+                "ref": "AssetWrapper<AnyTextAsset>",
+                "genericArguments": [
+                    {
+                        "type": "ref",
+                        "ref": "AnyTextAsset"
+                    }
+                ],
+                "title": "InputAsset.label",
+                "description": "Asset container for a field label."
+            }
+        },
+        "note": {
+            "required": false,
+            "node": {
+                "type": "ref",
+                "ref": "AssetWrapper<AnyTextAsset>",
+                "genericArguments": [
+                    {
+                        "type": "ref",
+                        "ref": "AnyTextAsset"
+                    }
+                ],
+                "title": "InputAsset.note",
+                "description": "Asset container for a note."
+            }
+        },
+        "binding": {
+            "required": true,
+            "node": {
+                "type": "ref",
+                "ref": "Binding",
+                "title": "InputAsset.binding",
+                "description": "The location in the data-model to store the data"
+            }
+        },
+        "metaData": {
+            "required": false,
+            "node": {
+                "type": "object",
+                "properties": {
+                    "beacon": {
+                        "required": false,
+                        "node": {
+                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/beacon-plugin/dist/index.d.ts",
+                            "name": "BeaconDataType",
+                            "type": "or",
+                            "or": [
+                                {
+                                    "type": "string",
+                                    "title": "BeaconDataType"
+                                },
+                                {
+                                    "type": "record",
+                                    "keyType": {
+                                        "type": "string"
+                                    },
+                                    "valueType": {
+                                        "type": "any"
+                                    },
+                                    "title": "BeaconDataType"
+                                }
+                            ],
+                            "title": "InputAsset.metaData.beacon",
+                            "description": "Additional data to beacon when this input changes"
+                        }
+                    }
+                },
+                "additionalProperties": false,
+                "title": "InputAsset.metaData",
+                "description": "Optional additional data"
+            }
+        }
+    },
+    "additionalProperties": false,
+    "title": "InputAsset",
+    "description": "This is the most generic way of gathering data. The input is bound to a data model using the 'binding' property.\nPlayers can get field type information from the 'schema' definition, thus to decide the input controls for visual rendering.",
+    "genericTokens": [
+        {
+            "symbol": "AnyTextAsset",
+            "constraints": {
+                "type": "ref",
+                "ref": "Asset"
+            },
+            "default": {
+                "type": "ref",
+                "ref": "Asset"
+            }
+        }
+    ],
+    "extends": {
+        "type": "ref",
+        "ref": "Asset<'input'>",
+        "genericArguments": [
+            {
+                "type": "string",
+                "const": "input"
+            }
+        ]
+    }
+}

package/dist/xlr/TextAsset.json

@@ -0,0 +1,125 @@
+{
+    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+    "name": "TextAsset",
+    "type": "object",
+    "properties": {
+        "value": {
+            "required": true,
+            "node": {
+                "type": "string",
+                "title": "TextAsset.value",
+                "description": "The text to display"
+            }
+        },
+        "modifiers": {
+            "required": false,
+            "node": {
+                "type": "array",
+                "elementType": {
+                    "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+                    "name": "TextModifier",
+                    "type": "or",
+                    "or": [
+                        {
+                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+                            "name": "BasicTextModifier",
+                            "type": "object",
+                            "properties": {
+                                "type": {
+                                    "required": true,
+                                    "node": {
+                                        "type": "string",
+                                        "title": "BasicTextModifier.type",
+                                        "description": "The modifier type"
+                                    }
+                                },
+                                "name": {
+                                    "required": false,
+                                    "node": {
+                                        "type": "string",
+                                        "title": "BasicTextModifier.name",
+                                        "description": "Modifiers can be named when used in strings"
+                                    }
+                                }
+                            },
+                            "additionalProperties": {
+                                "type": "unknown"
+                            },
+                            "title": "BasicTextModifier"
+                        },
+                        {
+                            "source": "/home/circleci/.cache/bazel/_bazel_circleci/e8362d362e14c7d23506d1dfa3aea8b8/sandbox/processwrapper-sandbox/2798/execroot/player/node_modules/@player-ui/reference-assets-plugin/dist/index.d.ts",
+                            "name": "LinkModifier",
+                            "type": "object",
+                            "properties": {
+                                "type": {
+                                    "required": true,
+                                    "node": {
+                                        "type": "string",
+                                        "const": "link",
+                                        "title": "LinkModifier.type",
+                                        "description": "The link type denotes this as a link"
+                                    }
+                                },
+                                "exp": {
+                                    "required": false,
+                                    "node": {
+                                        "type": "ref",
+                                        "ref": "Expression",
+                                        "title": "LinkModifier.exp",
+                                        "description": "An optional expression to run before the link is opened"
+                                    }
+                                },
+                                "metaData": {
+                                    "required": true,
+                                    "node": {
+                                        "type": "object",
+                                        "properties": {
+                                            "ref": {
+                                                "required": true,
+                                                "node": {
+                                                    "type": "string",
+                                                    "title": "LinkModifier.metaData.ref",
+                                                    "description": "The location of the link to load"
+                                                }
+                                            },
+                                            "'mime-type'": {
+                                                "required": false,
+                                                "node": {
+                                                    "type": "string",
+                                                    "title": "LinkModifier.metaData.'mime-type'",
+                                                    "description": "Used to indicate an application specific resolver to use"
+                                                }
+                                            }
+                                        },
+                                        "additionalProperties": false,
+                                        "title": "LinkModifier.metaData",
+                                        "description": "metaData about the link's target"
+                                    }
+                                }
+                            },
+                            "additionalProperties": false,
+                            "title": "LinkModifier",
+                            "description": "A modifier to turn the text into a link"
+                        }
+                    ],
+                    "title": "TextModifier"
+                },
+                "title": "TextAsset.modifiers",
+                "description": "Any modifiers on the text"
+            }
+        }
+    },
+    "additionalProperties": false,
+    "title": "TextAsset",
+    "extends": {
+        "type": "ref",
+        "ref": "Asset<'text'>",
+        "genericArguments": [
+            {
+                "type": "string",
+                "const": "text"
+            }
+        ]
+    }
+}

package/dist/xlr/manifest.js

@@ -0,0 +1,16 @@
+const InputAsset = require('./InputAsset.json')
+const TextAsset = require('./TextAsset.json')
+const ActionAsset = require('./ActionAsset.json')
+const CollectionAsset = require('./CollectionAsset.json')
+const InfoAsset = require('./InfoAsset.json')
+
+    module.exports = {
+      "pluginName": "reference-assets-web-plugin",
+      "capabilities": {
+        "Assets":[InputAsset,TextAsset,ActionAsset,CollectionAsset],
+		"Views":[InfoAsset],
+      },
+      "customPrimitives": [
+        'Expression','Asset','Binding','AssetWrapper','Schema.DataType','ExpressionHandler'
+      ]
+    }

package/dist/xlr/manifest.json

@@ -0,0 +1,22 @@
+{
+    "pluginName": "reference-assets-web-plugin",
+    "capabilities": {
+        "Assets": [
+            "InputAsset",
+            "TextAsset",
+            "ActionAsset",
+            "CollectionAsset"
+        ],
+        "Views": [
+            "InfoAsset"
+        ]
+    },
+    "customPrimitives": [
+        "Expression",
+        "Asset",
+        "Binding",
+        "AssetWrapper",
+        "Schema.DataType",
+        "ExpressionHandler"
+    ]
+}

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@player-ui/reference-assets-plugin-react",
-  "version": "0.4.0",
+  "version": "0.4.1-next.1",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
   "peerDependencies": {
     "@types/node": "^16.11.12",
-    "@player-ui/react": "0.4.0"
+    "@player-ui/react": "0.4.1-next.1"
   },
   "dependencies": {
-    "@player-ui/reference-assets-plugin": "0.4.0",
-    "@player-ui/partial-match-registry": "0.4.0",
-    "@player-ui/asset-provider-plugin-react": "0.4.0",
-    "@player-ui/beacon-plugin-react": "0.4.0",
+    "@player-ui/reference-assets-plugin": "0.4.1-next.1",
+    "@player-ui/partial-match-registry": "0.4.1-next.1",
+    "@player-ui/asset-provider-plugin-react": "0.4.1-next.1",
+    "@player-ui/beacon-plugin-react": "0.4.1-next.1",
     "clsx": "^1.1.1",
     "@chakra-ui/react": "^1.7.3",
     "@chakra-ui/icons": "^1.1.1",
@@ -60,6 +60,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/assets/action/Action.tsx

@@ -19,7 +19,7 @@ export const Action = (props: TransformedAction) => {
         variant={isBackAction(props) ? 'ghost' : 'solid'}
         {...buttonProps}
       >
-        {isBackAction(props) && <ChevronLeftIcon />}
+        {props?.metaData?.role === 'back' && <ChevronLeftIcon />}
         {label && (
           <Text>
             <ReactAsset {...label} />

package/src/assets/image/Image.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactAsset } from '@player-ui/react';
+import type { TransformedImage } from '@player-ui/reference-assets-plugin';
+
+export const Image = (props: TransformedImage) => {
+  const { metaData, caption, altText } = props;
+  console.log(props);
+  return (
+    <figure className="figure">
+      <img className="figure-img img-fluid" src={metaData.ref} alt={altText} />
+      {caption && (
+        <figcaption className="figure-caption" style={{ marginTop: 15 }}>
+          <ReactAsset {...caption} />
+        </figcaption>
+      )}
+    </figure>
+  );
+};

package/src/assets/image/index.tsx

@@ -0,0 +1 @@
+export * from './Image';

package/src/assets/index.tsx

@@ -3,3 +3,4 @@ export * from './text';
 export * from './collection';
 export * from './action';
 export * from './info';
+export * from './image';

package/src/assets/info/Info.tsx

@@ -1,9 +1,5 @@
 import React from 'react';
-import type {
-  ActionAsset,
-  InfoAsset,
-} from '@player-ui/reference-assets-plugin';
-import { isBackAction } from '@player-ui/reference-assets-plugin';
+import type { InfoAssetTransform } from '@player-ui/reference-assets-plugin';
 import { ReactAsset } from '@player-ui/react';
 import {
   ButtonGroup,
@@ -13,29 +9,9 @@ import {
   Stack,
   HStack,
 } from '@chakra-ui/react';
-import type { AssetWrapper } from '@player-ui/react';
 
 /** The info view type is used to show information to the user */
-export const Info = (props: InfoAsset) => {
-  const segmentedActions = React.useMemo(() => {
-    if (!props.actions?.length) {
-      return;
-    }
-
-    return props.actions?.reduce(
-      (memo, next) => {
-        memo[isBackAction(next.asset as ActionAsset) ? 'prev' : 'next'].push(
-          next as AssetWrapper<ActionAsset>
-        );
-        return memo;
-      },
-      { prev: [], next: [] } as {
-        prev: Array<AssetWrapper<ActionAsset>>;
-        next: Array<AssetWrapper<ActionAsset>>;
-      }
-    );
-  }, [props.actions]);
-
+export const Info = (props: InfoAssetTransform) => {
   return (
     <Box minW={{ base: undefined, md: 'md' }}>
       <Stack gap="10">
@@ -51,15 +27,15 @@ export const Info = (props: InfoAsset) => {
         )}
         <Box>{props.primaryInfo && <ReactAsset {...props.primaryInfo} />}</Box>
         <Stack gap="4">
-          {segmentedActions && <Divider />}
+          {props?.segmentedActions && <Divider />}
           <HStack justifyContent="space-between">
             <ButtonGroup spacing="6">
-              {segmentedActions?.prev?.map((a) => (
+              {props?.segmentedActions?.prev?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}
             </ButtonGroup>
             <ButtonGroup spacing="6">
-              {segmentedActions?.next?.map((a) => (
+              {props?.segmentedActions?.next?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}
             </ButtonGroup>

package/src/plugin.tsx

@@ -1,11 +1,21 @@
 import React from 'react';
 import type { ReactPlayer, ReactPlayerPlugin } from '@player-ui/react';
-import type { Player } from '@player-ui/player';
+import type { Player, ExtendedPlayerPlugin } from '@player-ui/player';
 import { AssetProviderPlugin } from '@player-ui/asset-provider-plugin-react';
 import { ChakraProvider, useTheme } from '@chakra-ui/react';
+import type {
+  InputAsset,
+  TextAsset,
+  CollectionAsset,
+  ActionAsset,
+  InfoAsset,
+} from '@player-ui/reference-assets-plugin';
 import { ReferenceAssetsPlugin as ReferenceAssetsCorePlugin } from '@player-ui/reference-assets-plugin';
-import { Input, Text, Collection, Action, Info } from './assets';
+import { Input, Text, Collection, Action, Info, Image } from './assets';
 
+/**
+ *
+ */
 const OptionalChakraThemeProvider = (
   props: React.PropsWithChildren<unknown>
 ) => {
@@ -22,7 +32,14 @@ const OptionalChakraThemeProvider = (
 /**
  * A plugin to register the base reference assets
  */
-export class ReferenceAssetsPlugin implements ReactPlayerPlugin {
+export class ReferenceAssetsPlugin
+  implements
+    ReactPlayerPlugin,
+    ExtendedPlayerPlugin<
+      [InputAsset, TextAsset, ActionAsset, CollectionAsset],
+      [InfoAsset]
+    >
+{
   name = 'reference-assets-web-plugin';
 
   applyReact(reactPlayer: ReactPlayer) {
@@ -33,6 +50,7 @@ export class ReferenceAssetsPlugin implements ReactPlayerPlugin {
         ['action', Action],
         ['info', Info],
         ['collection', Collection],
+        ['image', Image],
       ])
     );