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

package/package.json

@@ -1,73 +1,44 @@
 {
   "name": "@player-ui/reference-assets-plugin-react",
-  "version": "0.8.0--canary.307.9621",
-  "private": false,
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "peerDependencies": {
-    "@types/node": "^16.11.12",
-    "@player-ui/react": "0.8.0--canary.307.9621"
-  },
+  "version": "0.8.0-next.0",
+  "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@player-ui/reference-assets-plugin": "0.8.0--canary.307.9621",
-    "@player-ui/partial-match-registry": "0.8.0--canary.307.9621",
-    "@player-ui/asset-provider-plugin-react": "0.8.0--canary.307.9621",
-    "@player-ui/beacon-plugin-react": "0.8.0--canary.307.9621",
+    "@player-ui/asset-provider-plugin-react": "0.8.0-next.0",
+    "@player-ui/beacon-plugin-react": "0.8.0-next.0",
+    "@player-ui/partial-match-registry": "0.8.0-next.0",
+    "@player-ui/reference-assets-plugin": "0.8.0-next.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.1.1",
-    "@chakra-ui/react": "^1.7.3",
-    "@chakra-ui/icons": "^1.1.1",
-    "@babel/runtime": "7.15.4"
+    "lucide-react": "^0.316.0",
+    "tailwind-merge": "^2.2.1",
+    "tslib": "^2.6.2"
   },
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "typings": "dist/index.d.ts",
-  "sideEffects": false,
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/player-ui/player-ui"
+  "devDependencies": {
+    "@player-ui/make-flow": "workspace:*"
   },
-  "bugs": {
-    "url": "https://github.com/player-ui/player-ui/issues"
+  "peerDependencies": {
+    "@player-ui/react": "0.8.0-next.0",
+    "react": "^18.2.0",
+    "@types/react": "^18.2.39"
   },
-  "homepage": "https://player-ui.github.io",
-  "contributors": [
-    {
-      "name": "Adam Dierkens",
-      "url": "https://github.com/adierkens"
-    },
-    {
-      "name": "Spencer Hamm",
-      "url": "https://github.com/spentacular"
-    },
-    {
-      "name": "Harris Borawski",
-      "url": "https://github.com/hborawski"
-    },
-    {
-      "name": "Jeremiah Zucker",
-      "url": "https://github.com/sugarmanz"
-    },
-    {
-      "name": "Ketan Reddy",
-      "url": "https://github.com/KetanReddy"
-    },
-    {
-      "name": "Brocollie08",
-      "url": "https://github.com/brocollie08"
-    },
-    {
-      "name": "Kelly Harrop",
-      "url": "https://github.com/kharrop"
-    },
-    {
-      "name": "Alejandro Fimbres",
-      "url": "https://github.com/lexfm"
-    },
-    {
-      "name": "Rafael Campos",
-      "url": "https://github.com/rafbcampos"
+  "module": "dist/index.legacy-esm.js",
+  "types": "types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    "./package.json": "./package.json",
+    "./dist/index.css": "./dist/index.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/cjs/index.cjs"
     }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
   ]
 }

package/src/__tests__/integration.test.tsx

@@ -0,0 +1,158 @@
+import { describe, test, vitest, expect, beforeEach } from "vitest";
+import React from "react";
+import {
+  screen,
+  render,
+  act,
+  fireEvent,
+  waitFor,
+  configure,
+} from "@testing-library/react";
+import { BeaconPlugin } from "@player-ui/beacon-plugin-react";
+import { ReactPlayer } from "@player-ui/react";
+import { makeFlow } from "@player-ui/make-flow";
+import { ReferenceAssetsPlugin } from "../plugin";
+
+configure({
+  testIdAttribute: "id",
+});
+
+describe("Integration tests", () => {
+  describe("Input", () => {
+    test("beacons the correct custom data value", async () => {
+      const handler = vitest.fn();
+      const beaconPlugin = new BeaconPlugin({ callback: handler });
+
+      const rp = new ReactPlayer({
+        plugins: [beaconPlugin, new ReferenceAssetsPlugin()],
+      });
+
+      const flow = makeFlow({
+        id: "first_view",
+        type: "input",
+        binding: "foo.bar",
+        metaData: { beacon: { custom_data: "{{foo.bar}}" } },
+      });
+
+      render(
+        <React.Suspense fallback="fallback">
+          <rp.Component />
+        </React.Suspense>,
+      );
+
+      await act(async () => {
+        rp.start(flow);
+      });
+
+      const viewNode = await screen.findByTestId("first_view");
+
+      act(() => {
+        fireEvent.change(viewNode, { target: { value: "new value" } });
+      });
+
+      act(() => {
+        fireEvent.blur(viewNode, { target: { value: "new value" } });
+      });
+
+      await waitFor(() => {
+        expect(handler.mock.calls).toHaveLength(2);
+      });
+
+      expect(handler.mock.calls[1][0]).toMatchObject({
+        assetId: "first_view",
+        data: { custom_data: "new value" },
+      });
+    });
+  });
+
+  describe("Choice", () => {
+    let handler, beaconPlugin, rp, items, flow;
+
+    beforeEach(async () => {
+      handler = vitest.fn();
+      beaconPlugin = new BeaconPlugin({ callback: handler });
+
+      rp = new ReactPlayer({
+        plugins: [beaconPlugin, new ReferenceAssetsPlugin()],
+      });
+
+      items = [
+        {
+          id: "item-1",
+          value: "Item 1",
+          label: {
+            asset: {
+              id: "choice-without-note-items-0-label",
+              type: "text",
+              value: "Item 1",
+            },
+          },
+        },
+        {
+          id: "item-2",
+          value: "Item 2",
+          label: {
+            asset: {
+              id: "choice-without-note-items-1-label",
+              type: "text",
+              value: "Item 2",
+            },
+          },
+        },
+      ];
+
+      flow = makeFlow({
+        id: "choice",
+        type: "choice",
+        binding: "foo.bar",
+        metaData: { beacon: { custom_data: "{{foo.bar}}" } },
+        items,
+      });
+
+      render(
+        <React.Suspense fallback="fallback">
+          <rp.Component />
+        </React.Suspense>,
+      );
+
+      await act(async () => {
+        rp.start(flow);
+      });
+    });
+
+    test("beacon handler is called on each item click", async () => {
+      for (const item of items) {
+        const itemNode = await screen.findByTestId(item.id);
+
+        act(() => {
+          fireEvent.click(itemNode);
+        });
+
+        await waitFor(() => {
+          expect(handler.mock.calls).toHaveLength(2);
+        });
+
+        expect(handler.mock.calls[1][0]).toMatchObject({
+          assetId: "choice",
+          action: "clicked",
+        });
+      }
+    });
+
+    test("each item is set to checked on click", async () => {
+      for (const item of items) {
+        let itemNode;
+
+        itemNode = await screen.findByTestId(item.id);
+        expect(itemNode.checked).toEqual(false);
+
+        act(() => {
+          fireEvent.click(itemNode);
+        });
+
+        itemNode = await screen.findByTestId(item.id);
+        expect(itemNode.checked).toEqual(true);
+      }
+    });
+  });
+});

package/src/assets/action/Action.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ReactAsset } from '@player-ui/react';
-import { Button, Text } from '@chakra-ui/react';
-import { ChevronLeftIcon } from '@chakra-ui/icons';
-import type { TransformedAction } from '@player-ui/reference-assets-plugin';
-import { isBackAction } from '@player-ui/reference-assets-plugin';
-import { useAction } from './hooks';
+import React from "react";
+import { ReactAsset } from "@player-ui/react";
+import { ChevronLeftIcon } from "lucide-react";
+import type { TransformedAction } from "@player-ui/reference-assets-plugin";
+import { isBackAction } from "@player-ui/reference-assets-plugin";
+import { useAction } from "./hooks";
+import { Button } from "../../components/Button";
 
 /**
  * An action that a user can take
@@ -16,15 +16,11 @@ export const Action = (props: TransformedAction) => {
   return (
     <div>
       <Button
-        variant={isBackAction(props) ? 'ghost' : 'solid'}
+        variant={isBackAction(props) ? "outline" : undefined}
         {...buttonProps}
       >
-        {props?.metaData?.role === 'back' && <ChevronLeftIcon />}
-        {label && (
-          <Text>
-            <ReactAsset {...label} />
-          </Text>
-        )}
+        {props?.metaData?.role === "back" && <ChevronLeftIcon />}
+        {label && <ReactAsset {...label} />}
       </Button>
     </div>
   );

package/src/assets/action/hooks.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-import { ReactAsset } from '@player-ui/react';
-import { useBeacon } from '@player-ui/beacon-plugin-react';
-import type { TransformedAction } from '@player-ui/reference-assets-plugin';
+import React from "react";
+import { ReactAsset } from "@player-ui/react";
+import { useBeacon } from "@player-ui/beacon-plugin-react";
+import type { TransformedAction } from "@player-ui/reference-assets-plugin";
 
 /** Hook to get all the props for a button */
 export const useAction = (props: TransformedAction) => {
   const { label } = props;
   const beacon = useBeacon({
     asset: props,
-    action: 'clicked',
-    element: 'button',
+    action: "clicked",
+    element: "button",
   });
 
   return {

package/src/assets/action/index.ts

@@ -1,2 +1,2 @@
-export * from './Action';
-export * from './hooks';
+export * from "./Action";
+export * from "./hooks";

package/src/assets/choice/Choice.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { ReactAsset } from "@player-ui/react";
+import type { TransformedChoice } from "@player-ui/reference-assets-plugin";
+import { ChoiceItem } from "../../components/ChoiceItem";
+import { Label } from "../../components/Label";
+import type { ChoiceItemProps } from "../../components/ChoiceItem";
+
+import { useChoiceItems } from "./hooks";
+
+/** A Choice */
+export const Choice = (props: TransformedChoice) => {
+  const { validation, title, id, note } = props;
+  const choiceItemProps: Array<ChoiceItemProps> = useChoiceItems(props);
+
+  const renderChoices = () =>
+    choiceItemProps.map((choiceItemProp) => (
+      <ChoiceItem key={choiceItemProp.id} {...choiceItemProp} />
+    ));
+
+  return (
+    <div className="grid w-full max-w-sm items-center gap-3">
+      {title && (
+        <Label htmlFor={id}>
+          <ReactAsset {...title} />
+        </Label>
+      )}
+      <div
+        id={props.id}
+        className="grid gap-2"
+        aria-invalid={Boolean(validation)}
+        aria-describedby={validation ? `${id}-validation` : undefined}
+      >
+        {renderChoices()}
+      </div>
+      {validation && (
+        <Label
+          id={`${id}-validation`}
+          className="text-[0.8rem] font-medium text-destructive"
+        >
+          {validation.message}
+        </Label>
+      )}
+      {note && (
+        <Label className="text-[0.8rem] text-muted-foreground">
+          <ReactAsset {...note} />
+        </Label>
+      )}
+    </div>
+  );
+};
+
+export default Choice;

package/src/assets/choice/hooks.tsx

@@ -0,0 +1,34 @@
+import { useBeacon } from "@player-ui/beacon-plugin-react";
+import type {
+  TransformedChoice,
+  TransformedChoiceItem,
+} from "@player-ui/reference-assets-plugin";
+import type { ChoiceItemProps } from "../../components/ChoiceItem";
+
+/** Hook to get the props for all choice asset items */
+export const useChoiceItems = (
+  props: TransformedChoice,
+): Array<ChoiceItemProps> => {
+  const beacon = useBeacon({
+    asset: props,
+    action: "clicked",
+    element: "choice",
+  });
+
+  return (
+    props.items?.map((item: TransformedChoiceItem) => {
+      const { id, value, label } = item;
+      return {
+        id,
+        label,
+        name: props.id,
+        value: (value ?? "").toString(),
+        checked: value === props.value,
+        onChange: () => {
+          beacon();
+          item.select();
+        },
+      };
+    }) ?? []
+  );
+};

package/src/assets/choice/index.ts

@@ -0,0 +1,2 @@
+export * from "./Choice";
+export * from "./hooks";

package/src/assets/collection/Collection.tsx

@@ -1,19 +1,16 @@
-import React from 'react';
-import { Flex } from '@chakra-ui/react';
-import { ReactAsset } from '@player-ui/react';
-import type { CollectionAsset } from '@player-ui/reference-assets-plugin';
+import React from "react";
+import { ReactAsset } from "@player-ui/react";
+import type { CollectionAsset } from "@player-ui/reference-assets-plugin";
 
 export const Collection = (props: CollectionAsset) => {
   return (
-    <Flex direction="column" gap="5">
+    <div className="flex flex-col gap-4">
       {props.label && (
         <h3>
           <ReactAsset {...props.label} />
         </h3>
       )}
-      {props.values?.map((a) => (
-        <ReactAsset key={a.asset.id} {...a} />
-      ))}
-    </Flex>
+      {props.values?.map((a) => <ReactAsset key={a.asset.id} {...a} />)}
+    </div>
   );
 };

package/src/assets/collection/index.tsx

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

package/src/assets/image/Image.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ReactAsset } from '@player-ui/react';
-import type { TransformedImage } from '@player-ui/reference-assets-plugin';
+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} />

package/src/assets/image/index.tsx

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

package/src/assets/index.tsx

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

package/src/assets/info/Info.tsx

@@ -1,47 +1,44 @@
-import React from 'react';
-import type { InfoAssetTransform } from '@player-ui/reference-assets-plugin';
-import { ReactAsset } from '@player-ui/react';
-import {
-  ButtonGroup,
-  Box,
-  Heading,
-  Divider,
-  Stack,
-  HStack,
-} from '@chakra-ui/react';
+import React from "react";
+import type { InfoAssetTransform } from "@player-ui/reference-assets-plugin";
+import { ReactAsset } from "@player-ui/react";
+import { Separator } from "../../components/Separator";
 
 /** The info view type is used to show information to the user */
 export const Info = (props: InfoAssetTransform) => {
   return (
-    <Box minW={{ base: undefined, md: 'md' }}>
-      <Stack gap="10">
+    <div className="max-w-full">
+      <div className="flex flex-col gap-4">
         {props.title && (
-          <Heading size="lg" as="h1">
+          <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
             <ReactAsset {...props.title} />
-          </Heading>
+          </h1>
         )}
         {props.subTitle && (
-          <Heading size="md" as="h3">
+          <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
             <ReactAsset {...props.subTitle} />
-          </Heading>
+          </h3>
         )}
-        <Box>{props.primaryInfo && <ReactAsset {...props.primaryInfo} />}</Box>
-        <Stack gap="4">
-          {props?.segmentedActions && <Divider />}
-          <HStack justifyContent="space-between">
-            <ButtonGroup spacing="6">
+        {props.primaryInfo && (
+          <div>
+            <ReactAsset {...props.primaryInfo} />
+          </div>
+        )}
+        <div className="flex flex-col gap-4">
+          {props?.segmentedActions && <Separator />}
+          <div className="flex justify-between sm:flex-row flex-col-reverse gap-4">
+            <div className="flex gap-4">
               {props?.segmentedActions?.prev?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}
-            </ButtonGroup>
-            <ButtonGroup spacing="6">
+            </div>
+            <div className="flex gap-4">
               {props?.segmentedActions?.next?.map((a) => (
                 <ReactAsset key={a.asset.id} {...a} />
               ))}
-            </ButtonGroup>
-          </HStack>
-        </Stack>
-      </Stack>
-    </Box>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };

package/src/assets/info/index.tsx

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

package/src/assets/input/Input.tsx

@@ -1,14 +1,10 @@
-import React from 'react';
-import { ReactAsset } from '@player-ui/react';
-import type { TransformedInput } from '@player-ui/reference-assets-plugin';
-import {
-  Input as ChakraInput,
-  FormControl,
-  FormLabel,
-  FormErrorMessage,
-  FormHelperText,
-} from '@chakra-ui/react';
-import { useInputAsset } from './hooks';
+import React from "react";
+import { ReactAsset } from "@player-ui/react";
+import type { TransformedInput } from "@player-ui/reference-assets-plugin";
+import { Input as InputComp } from "../../components/Input";
+import { Label } from "../../components/Label";
+
+import { useInputAsset } from "./hooks";
 
 /** An Input */
 export const Input = (props: TransformedInput) => {
@@ -16,20 +12,32 @@ export const Input = (props: TransformedInput) => {
   const inputProps = useInputAsset(props);
 
   return (
-    <FormControl isInvalid={Boolean(validation)}>
+    <div className="grid w-full max-w-sm items-center gap-1.5">
       {label && (
-        <FormLabel htmlFor={id}>
+        <Label htmlFor={id}>
           <ReactAsset {...label} />
-        </FormLabel>
+        </Label>
+      )}
+      <InputComp
+        id={id}
+        aria-invalid={Boolean(validation)}
+        aria-describedby={validation ? `${id}-validation` : undefined}
+        {...inputProps}
+      />
+      {validation && (
+        <Label
+          id={`${id}-validation`}
+          className="text-[0.8rem] font-medium text-destructive"
+        >
+          {validation.message}
+        </Label>
       )}
-      <ChakraInput id={id} size="md" {...inputProps} />
-      {validation && <FormErrorMessage>{validation.message}</FormErrorMessage>}
       {note && (
-        <FormHelperText>
+        <Label className="text-[0.8rem] text-muted-foreground">
           <ReactAsset {...note} />
-        </FormHelperText>
+        </Label>
       )}
-    </FormControl>
+    </div>
   );
 };