@player-ui/reference-assets-plugin 0.8.0--canary.307.9621 → 0.8.0-next.0

package/src/assets/choice/__tests__/transform.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from "vitest";
+import { runTransform } from "@player-ui/asset-testing-library";
+import { CommonTypesPlugin } from "@player-ui/common-types-plugin";
+import { choiceTransform } from "..";
+
+describe("choice transform", () => {
+  it("adds a clearSelection method that clears choice selection", async () => {
+    const choice = {
+      views: [
+        {
+          id: "choice",
+          type: "choice",
+          binding: "foo.bar",
+          items: [
+            {
+              id: "item-1",
+              value: "item-1",
+            },
+          ],
+        },
+      ],
+      data: {
+        foo: {
+          bar: "item-1",
+        },
+      },
+    };
+
+    const ref = runTransform("choice", choiceTransform, choice);
+
+    expect(ref.controllers?.data.get("foo.bar")).toBe("item-1");
+    ref.current?.clearSelection();
+    expect(ref.controllers?.data.get("foo.bar")).toBe(null);
+  });
+
+  it("adds a select method to each choice", async () => {
+    const choice = {
+      id: "choice",
+      type: "choice",
+      binding: "foo.bar",
+      items: [
+        {
+          id: "item-1",
+          value: "item-1",
+        },
+        {
+          id: "item-2",
+          value: "item-2",
+        },
+      ],
+    };
+
+    const ref = runTransform("choice", choiceTransform, choice);
+
+    expect(ref.controllers?.data.get("foo.bar")).toBeUndefined();
+
+    ref.current?.items[0].select();
+    expect(ref.controllers?.data.get("foo.bar")).toBe("item-1");
+
+    ref.current?.items[1].select();
+    expect(ref.controllers?.data.get("foo.bar")).toBe("item-2");
+  });
+
+  it("adds an unselect method to each choice", async () => {
+    const choice = {
+      id: "choice",
+      type: "choice",
+      binding: "foo.bar",
+      items: [
+        {
+          id: "item-1",
+          value: "item-1",
+        },
+        {
+          id: "item-2",
+          value: "item-2",
+        },
+      ],
+    };
+
+    const ref = runTransform("choice", choiceTransform, choice);
+
+    ref.current?.items[0].select();
+    expect(ref.controllers?.data.get("foo.bar")).toBe("item-1");
+    ref.current?.items[0].unselect();
+    expect(ref.controllers?.data.get("foo.bar")).toBe(null);
+
+    ref.current?.items[1].select();
+    expect(ref.controllers?.data.get("foo.bar")).toBe("item-2");
+    ref.current?.items[1].unselect();
+    expect(ref.controllers?.data.get("foo.bar")).toBe(null);
+  });
+
+  it("exposes validations", async () => {
+    const validations = [
+      {
+        type: "required",
+      },
+    ];
+
+    const choice = {
+      views: [
+        {
+          id: "choice",
+          type: "choice",
+          binding: "foo.bar",
+          items: [
+            {
+              id: "item-1",
+              value: "item-1",
+            },
+            {
+              id: "item-2",
+              value: "item-2",
+            },
+          ],
+        },
+      ],
+      schema: {
+        ROOT: {
+          foo: {
+            type: "FooType",
+          },
+        },
+        FooType: {
+          bar: {
+            type: "StringType",
+            validation: [
+              {
+                type: "required",
+                trigger: "load",
+              },
+            ],
+          },
+        },
+      },
+    };
+
+    const ref = runTransform("choice", choiceTransform, choice, [
+      new CommonTypesPlugin(),
+    ]);
+
+    expect(ref.current?.validation?.type).toBe(validations[0].type);
+  });
+});

package/src/assets/choice/index.ts

@@ -0,0 +1,2 @@
+export * from "./transform";
+export * from "./types";

package/src/assets/choice/transform.ts

@@ -0,0 +1,55 @@
+import type { TransformFunction } from "@player-ui/player";
+import type {
+  ChoiceAsset,
+  TransformedChoice,
+  TransformedChoiceItem,
+} from "./types";
+
+/**
+ * Docs about the asset transform
+ */
+export const choiceTransform: TransformFunction<
+  ChoiceAsset,
+  TransformedChoice
+> = (asset, options) => {
+  const { items, binding, ...rest } = asset;
+
+  const assetHasBinding = binding !== undefined;
+
+  const currentValue = assetHasBinding
+    ? options.data.model.get(binding, {
+        includeInvalid: true,
+      })
+    : undefined;
+
+  const resetValue = () => {
+    if (assetHasBinding) {
+      return options.data.model.set([[binding, null]]);
+    }
+  };
+
+  const transformedChoiceItems: TransformedChoiceItem[] = (items || []).map(
+    (item, index) => ({
+      ...item,
+      id: item.id ?? `${asset.id}-choice-${index}`,
+      select() {
+        if (assetHasBinding) {
+          return options.data.model.set([[binding, item.value]]);
+        }
+      },
+      unselect: resetValue,
+    }),
+  );
+
+  return {
+    ...rest,
+    binding,
+    clearSelection: resetValue,
+    items: transformedChoiceItems,
+    value: currentValue,
+    validation: assetHasBinding
+      ? options.validation?.get(binding, { track: true })
+      : undefined,
+    dataType: assetHasBinding ? options.validation?.type(binding) : undefined,
+  };
+};

package/src/assets/choice/types.ts

@@ -0,0 +1,73 @@
+import type {
+  Asset,
+  AssetWrapper,
+  Binding,
+  ValidationResponse,
+  Schema,
+} from "@player-ui/player";
+import type { BeaconMetaData } from "@player-ui/beacon-plugin";
+
+/**
+ * A choice asset represents a single selection choice, often displayed as radio buttons in a web context.
+ * This will allow users to test out more complex flows than just inputs + buttons.
+ */
+export interface ChoiceAsset<AnyTextAsset extends Asset = Asset>
+  extends Asset<"choice"> {
+  /** A text-like asset for the choice's label */
+  title?: AssetWrapper<AnyTextAsset>;
+
+  /** Asset container for a note. */
+  note?: AssetWrapper<AnyTextAsset>;
+
+  /** The location in the data-model to store the data */
+  binding?: Binding;
+
+  /** The options to select from */
+  items?: Array<ChoiceItem>;
+
+  /** Optional additional data */
+  metaData?: BeaconMetaData;
+}
+
+export type ValueType = string | number | boolean | null;
+
+export interface ChoiceItem<AnyTextAsset extends Asset = Asset> {
+  /** The id associated with the choice item */
+  id: string;
+
+  /** A text-like asset for the choice's label */
+  label?: AssetWrapper<AnyTextAsset>;
+
+  /** The value of the input from the data-model */
+  value?: ValueType;
+}
+
+/** A stateful instance of a choice */
+export interface TransformedChoice extends ChoiceAsset {
+  /**
+   * A function to unselect all of the options
+   * This is typically used when selecting a placeholder value
+   */
+  clearSelection: () => void;
+
+  /** The transformed options to select from */
+  items?: Array<TransformedChoiceItem>;
+
+  /** The value of the selected choice from the data-model */
+  value?: ValueType;
+
+  /** Any validation associated with the current choice's value */
+  validation?: ValidationResponse;
+
+  /** The dataType defined from the schema */
+  dataType?: Schema.DataType;
+}
+
+/** A stateful instance of a Choice Item */
+export interface TransformedChoiceItem extends ChoiceItem {
+  /** The function that is called when a choice item is selected */
+  select: () => void;
+
+  /** The function that is called when a choice item is unSelected */
+  unselect: () => void;
+}

package/src/assets/collection/index.ts

@@ -1 +1 @@
-export * from './types';
+export * from "./types";

package/src/assets/collection/types.ts

@@ -1,6 +1,6 @@
-import type { AssetWrapper, Asset } from '@player-ui/player';
+import type { AssetWrapper, Asset } from "@player-ui/player";
 
-export interface CollectionAsset extends Asset<'collection'> {
+export interface CollectionAsset extends Asset<"collection"> {
   /** An optional label to title the collection */
   label?: AssetWrapper;
   /** The string value to show */

package/src/assets/image/__tests__/transform.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+import { runTransform } from "@player-ui/asset-testing-library";
+import { imageTransform } from "..";
+
+describe("image transform", () => {
+  it("adds a prop altText which gets filled with the accessibility text if provided", () => {
+    const ref = runTransform("image", imageTransform, {
+      id: "image-1",
+      type: "image",
+      metaData: {
+        ref: "https://player-ui.github.io/latest/logo/logo-light-large.png",
+        accessibility: "This is accessibility text for an image",
+      },
+      placeholder: "This is placeholder text for an image",
+      caption: "This is a caption",
+    });
+
+    expect(ref.current?.altText).toBe(
+      "This is accessibility text for an image",
+    );
+  });
+  it("adds a prop altText which gets filled with the placeholder text if accessibility text not provided", () => {
+    const ref = runTransform("image", imageTransform, {
+      id: "image-1",
+      type: "image",
+      metaData: {
+        ref: "https://player-ui.github.io/latest/logo/logo-light-large.png",
+      },
+      placeholder: "This is placeholder text for an image",
+      caption: "This is a caption",
+    });
+
+    expect(ref.current?.altText).toBe("This is placeholder text for an image");
+  });
+});

package/src/assets/image/index.ts

@@ -1,2 +1,2 @@
-export * from './transform';
-export * from './types';
+export * from "./transform";
+export * from "./types";

package/src/assets/image/transform.ts

@@ -1,5 +1,5 @@
-import type { TransformFunction } from '@player-ui/player';
-import type { ImageAsset, TransformedImage } from './types';
+import type { TransformFunction } from "@player-ui/player";
+import type { ImageAsset, TransformedImage } from "./types";
 
 /**
  * Function to retrieve the desired alt text based on passed in props.
@@ -12,14 +12,14 @@ const getImageAlt = (props: ImageAsset): string => {
 
   if (placeholder) return placeholder;
 
-  return 'Image';
+  return "Image";
 };
 
 /**
  * Sets the Image's placeholder and accessibilty
  */
 export const imageTransform: TransformFunction<ImageAsset, TransformedImage> = (
-  props
+  props,
 ) => {
   const altText = getImageAlt(props);
 

package/src/assets/image/types.ts

@@ -1,6 +1,6 @@
-import type { Asset } from '@player-ui/player';
+import type { Asset, AssetWrapper } from "@player-ui/player";
 
-export interface ImageAsset extends Asset<'image'> {
+export interface ImageAsset extends Asset<"image"> {
   /** Reference to the image */
   metaData: ImageMetaData;
 
@@ -8,7 +8,7 @@ export interface ImageAsset extends Asset<'image'> {
   placeholder?: string;
 
   /** Optional caption */
-  caption?: Asset;
+  caption?: AssetWrapper;
 }
 
 /** A modifier to turn the text into a link */

package/src/assets/index.ts

@@ -1,6 +1,7 @@
-export * from './input';
-export * from './action';
-export * from './collection';
-export * from './info';
-export * from './text';
-export * from './image';
+export * from "./input";
+export * from "./action";
+export * from "./collection";
+export * from "./info";
+export * from "./text";
+export * from "./image";
+export * from "./choice";

package/src/assets/info/__tests__/transform.test.ts

@@ -0,0 +1,143 @@
+import { describe, it, expect } from "vitest";
+import { runTransform } from "@player-ui/asset-testing-library";
+import { infoTransform } from "..";
+
+describe("info transform", () => {
+  it("populates segmentedActions", () => {
+    const ref = runTransform("info", infoTransform, {
+      id: "generated-flow",
+      views: [
+        {
+          id: "info-view",
+          type: "info",
+          title: {
+            asset: {
+              id: "info-title",
+              type: "text",
+              value: "Info Title",
+            },
+          },
+          actions: [
+            {
+              asset: {
+                id: "next-action",
+                value: "Next",
+                type: "action",
+                label: {
+                  asset: {
+                    id: "next-action-label",
+                    type: "text",
+                    value: "Continue",
+                  },
+                },
+              },
+            },
+            {
+              asset: {
+                id: "prev-action",
+                value: "Prev",
+                type: "action",
+                label: {
+                  asset: {
+                    id: "next-action-label",
+                    type: "text",
+                    value: "Back",
+                  },
+                },
+              },
+            },
+          ],
+        },
+      ],
+      data: {},
+      navigation: {
+        BEGIN: "FLOW_1",
+        FLOW_1: {
+          startState: "VIEW_1",
+          VIEW_1: {
+            state_type: "VIEW",
+            ref: "info-view",
+            transitions: {
+              "*": "END_Done",
+            },
+          },
+          END_Done: {
+            state_type: "END",
+            outcome: "done",
+          },
+        },
+      },
+    });
+    expect(ref.current?.segmentedActions).toStrictEqual({
+      next: [
+        {
+          asset: {
+            id: "next-action",
+            label: {
+              asset: {
+                id: "next-action-label",
+                type: "text",
+                value: "Continue",
+              },
+            },
+            type: "action",
+            value: "Next",
+          },
+        },
+      ],
+      prev: [
+        {
+          asset: {
+            id: "prev-action",
+            label: {
+              asset: {
+                id: "next-action-label",
+                type: "text",
+                value: "Back",
+              },
+            },
+            type: "action",
+            value: "Prev",
+          },
+        },
+      ],
+    });
+  });
+  it("does not populate segmentedActions", () => {
+    const ref = runTransform("info", infoTransform, {
+      id: "generated-flow",
+      views: [
+        {
+          id: "info-view",
+          type: "info",
+          title: {
+            asset: {
+              id: "info-title",
+              type: "text",
+              value: "Info Title",
+            },
+          },
+        },
+      ],
+      data: {},
+      navigation: {
+        BEGIN: "FLOW_1",
+        FLOW_1: {
+          startState: "VIEW_1",
+          VIEW_1: {
+            state_type: "VIEW",
+            ref: "info-view",
+            transitions: {
+              "*": "END_Done",
+            },
+          },
+          END_Done: {
+            state_type: "END",
+            outcome: "done",
+          },
+        },
+      },
+    });
+    expect(ref.current?.segmentedActions).toBeUndefined();
+  });
+});

package/src/assets/info/index.ts

@@ -1,2 +1,2 @@
-export * from './transform';
-export * from './types';
+export * from "./transform";
+export * from "./types";

package/src/assets/info/transform.ts

@@ -1,21 +1,21 @@
-import type { TransformFunction } from '@player-ui/player';
-import type { AssetWrapper } from '@player-ui/player';
-import type { InfoAsset, InfoAssetTransform } from './types';
-import type { ActionAsset } from '../action/types';
-import { isBackAction } from '../action/transform';
+import type { TransformFunction } from "@player-ui/player";
+import type { AssetWrapper } from "@player-ui/player";
+import type { InfoAsset, InfoAssetTransform } from "./types";
+import type { ActionAsset } from "../action/types";
+import { isBackAction } from "../action/transform";
 
 /**
  * This transform should add segmentedActions to the info asset.
  * Segmented actions display side by side in larger viewports. Segmented Actions is an object of next and prev actions
  */
 export const infoTransform: TransformFunction<InfoAsset, InfoAssetTransform> = (
-  infoAsset
+  infoAsset,
 ) => {
   const actions = infoAsset?.actions;
   const segmentedActions = actions?.reduce(
     (segmentedActionsArray, action) => {
       segmentedActionsArray[
-        isBackAction(action.asset as ActionAsset) ? 'prev' : 'next'
+        isBackAction(action.asset as ActionAsset) ? "prev" : "next"
       ].push(action as AssetWrapper<ActionAsset>);
       return segmentedActionsArray;
     },
@@ -28,7 +28,7 @@ export const infoTransform: TransformFunction<InfoAsset, InfoAssetTransform> = (
        * prev is an array of prev actions
        */
       prev: Array<AssetWrapper<ActionAsset>>;
-    }
+    },
   );
 
   return {

package/src/assets/info/types.ts

@@ -1,7 +1,7 @@
-import type { AssetWrapper, Asset } from '@player-ui/player';
-import type { ActionAsset } from '../action/types';
+import type { AssetWrapper, Asset } from "@player-ui/player";
+import type { ActionAsset } from "../action/types";
 
-export interface InfoAsset extends Asset<'info'> {
+export interface InfoAsset extends Asset<"info"> {
   /** The string value to show */
   title?: AssetWrapper;
 

package/src/assets/input/index.ts

@@ -1,2 +1,2 @@
-export * from './types';
-export * from './transform';
+export * from "./types";
+export * from "./transform";

package/src/assets/input/transform.ts

@@ -1,12 +1,12 @@
-import type { TransformFunction } from '@player-ui/player';
-import type { InputAsset, TransformedInput } from './types';
+import type { TransformFunction } from "@player-ui/player";
+import type { InputAsset, TransformedInput } from "./types";
 
 /**
  * Docs about the asset transform
  */
 export const inputTransform: TransformFunction<InputAsset, TransformedInput> = (
   asset,
-  options
+  options,
 ) => {
   return {
     ...asset,
@@ -28,7 +28,7 @@ export const inputTransform: TransformFunction<InputAsset, TransformedInput> = (
     },
     value:
       asset.binding === undefined
-        ? ''
+        ? ""
         : options.data.model.get(asset.binding, {
             includeInvalid: true,
             formatted: true,

package/src/assets/input/types.ts

@@ -4,15 +4,15 @@ import type {
   Schema,
   Binding,
   ValidationResponse,
-} from '@player-ui/player';
-import type { BeaconDataType } from '@player-ui/beacon-plugin';
+} from "@player-ui/player";
+import type { BeaconDataType } from "@player-ui/beacon-plugin";
 
 /**
  * This is the most generic way of gathering data. The input is bound to a data model using the 'binding' property.
  * Players can get field type information from the 'schema' definition, thus to decide the input controls for visual rendering.
  * */
 export interface InputAsset<AnyTextAsset extends Asset = Asset>
-  extends Asset<'input'> {
+  extends Asset<"input"> {
   /** Asset container for a field label. */
   label?: AssetWrapper<AnyTextAsset>;
 

package/src/assets/text/index.ts

@@ -1 +1 @@
-export * from './types';
+export * from "./types";

package/src/assets/text/types.ts

@@ -1,6 +1,6 @@
-import type { Asset, Expression } from '@player-ui/player';
+import type { Asset, Expression } from "@player-ui/player";
 
-export interface TextAsset extends Asset<'text'> {
+export interface TextAsset extends Asset<"text"> {
   /** The text to display */
   value: string;
 
@@ -24,7 +24,7 @@ export interface BasicTextModifier {
 /** A modifier to turn the text into a link */
 export interface LinkModifier {
   /** The link type denotes this as a link */
-  type: 'link';
+  type: "link";
 
   /** An optional expression to run before the link is opened */
   exp?: Expression;
@@ -35,6 +35,6 @@ export interface LinkModifier {
     ref: string;
 
     /** Used to indicate an application specific resolver to use */
-    'mime-type'?: string;
+    "mime-type"?: string;
   };
 }

package/src/index.ts

@@ -1,2 +1,2 @@
-export * from './assets';
-export * from './plugin';
+export * from "./assets";
+export * from "./plugin";