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

package/src/assets/input/hooks.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { useBeacon } from '@player-ui/beacon-plugin-react';
-import type { TransformedInput } from '@player-ui/reference-assets-plugin';
-import type { KeyDownHandler } from './types';
+import React from "react";
+import { useBeacon } from "@player-ui/beacon-plugin-react";
+import type { TransformedInput } from "@player-ui/reference-assets-plugin";
+import type { KeyDownHandler } from "./types";
 
 export interface InputHookConfig {
   /** Format the input as the user keys down */
@@ -30,21 +30,21 @@ export interface InputHookConfig {
 }
 
 const defaultKeyStrings = [
-  'Delete',
-  'Backspace',
-  'Tab',
-  'Home',
-  'End',
-  'ArrowLeft',
-  'ArrowRight',
-  'ArrowUp',
-  'ArrowDown',
-  'Escape',
+  "Delete",
+  "Backspace",
+  "Tab",
+  "Home",
+  "End",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp",
+  "ArrowDown",
+  "Escape",
 ];
 
 /** Create a valid config mixing in defaults and user overrides */
 export const getConfig = (
-  userConfig: InputHookConfig = {}
+  userConfig: InputHookConfig = {},
 ): Required<InputHookConfig> => {
   return {
     liveFormat: true,
@@ -52,28 +52,28 @@ export const getConfig = (
     quickFormatDelay: 200,
     slowFormatDelay: 1000,
     slowFormatKeys: defaultKeyStrings,
-    decimalSymbol: '.',
-    prefix: '',
-    suffix: '',
+    decimalSymbol: ".",
+    prefix: "",
+    suffix: "",
     ...userConfig,
   };
 };
 
 /** A hook to manage beacon changes for input assets */
 export const useInputBeacon = (props: TransformedInput) => {
-  const beaconHandler = useBeacon({ element: 'text_input', asset: props });
+  const beaconHandler = useBeacon({ element: "text_input", asset: props });
 
   return (newValue: string) => {
-    let action = 'modified';
+    let action = "modified";
 
     if (newValue === props.value) {
       return;
     }
 
     if (newValue && !props.value) {
-      action = 'added';
+      action = "added";
     } else if (!newValue && props.value) {
-      action = 'deleted';
+      action = "deleted";
     }
 
     beaconHandler({ action });
@@ -90,9 +90,9 @@ export const useInputBeacon = (props: TransformedInput) => {
  */
 export const useInputAsset = (
   props: TransformedInput,
-  config?: InputHookConfig
+  config?: InputHookConfig,
 ) => {
-  const [localValue, setLocalValue] = React.useState(props.value ?? '');
+  const [localValue, setLocalValue] = React.useState(props.value ?? "");
   const formatTimerRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
   const inputBeacon = useInputBeacon(props);
 
@@ -117,7 +117,7 @@ export const useInputAsset = (
 
   /** Determines whether pressed key should trigger slow format or quick format delay */
   function getFormatDelaySpeed(e: React.KeyboardEvent<HTMLInputElement>) {
-    const key = slowFormatKeys.every((k) => typeof k === 'number')
+    const key = slowFormatKeys.every((k) => typeof k === "number")
       ? e.which
       : e.key;
 
@@ -150,9 +150,9 @@ export const useInputAsset = (
       e.preventDefault();
       target.setSelectionRange(pl, end - start + pl);
     } else if (
-      (e.key === 'ArrowLeft' && atStart) ||
-      (e.key === 'Backspace' && atStart && atEnd) ||
-      e.key === 'Home'
+      (e.key === "ArrowLeft" && atStart) ||
+      (e.key === "Backspace" && atStart && atEnd) ||
+      e.key === "Home"
     ) {
       e.preventDefault();
       target.setSelectionRange(prefix.length, prefix.length);
@@ -161,7 +161,7 @@ export const useInputAsset = (
 
   /** Helper to add affixes to value where appropriate  */
   function formatValueWithAffix(value: string | undefined) {
-    if (!value) return '';
+    if (!value) return "";
 
     return `${prefix}${value}${suffix}`;
   }
@@ -169,7 +169,7 @@ export const useInputAsset = (
   /** Value handling logic on key down */
   const onKeyDownHandler: KeyDownHandler = (currentValue: string) => {
     const symbolPosition = currentValue.indexOf(decimalSymbol);
-    const newValue = props.format(currentValue) ?? '';
+    const newValue = props.format(currentValue) ?? "";
     const newSymbolPosition = newValue.indexOf(decimalSymbol);
 
     if (
@@ -200,15 +200,15 @@ export const useInputAsset = (
 
     const formatted =
       (prefix
-        ? e.target.value.replace(prefix, '')
-        : props.format(e.target.value)) ?? '';
+        ? e.target.value.replace(prefix, "")
+        : props.format(e.target.value)) ?? "";
 
     if (formatted) {
       props.set(formatted);
       setLocalValue(formatValueWithAffix(formatted));
     } else {
-      props.set('');
-      setLocalValue('');
+      props.set("");
+      setLocalValue("");
     }
 
     if (!suppressBeacons) {
@@ -251,7 +251,7 @@ export const useInputAsset = (
   /** Format value onFocus if affixes exist */
   const onFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
     const target = e.target as HTMLInputElement;
-    const inputEmpty = target.value === '';
+    const inputEmpty = target.value === "";
 
     if ((!inputEmpty && suffix) || (inputEmpty && prefix)) {
       setLocalValue(handleAffixOnFocus(target));

package/src/assets/input/index.tsx

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

package/src/assets/input/types.ts

@@ -1,6 +1,6 @@
-import type { TransformedInput } from '@player-ui/reference-assets-plugin';
+import type { TransformedInput } from "@player-ui/reference-assets-plugin";
 
 export type KeyDownHandler = (
   currentValue: string,
-  props?: TransformedInput
+  props?: TransformedInput,
 ) => any;

package/src/assets/text/Text.tsx

@@ -1,17 +1,16 @@
-import React from 'react';
-import { Link } from '@chakra-ui/react';
+import React from "react";
 import type {
   TextAsset,
   LinkModifier,
-} from '@player-ui/reference-assets-plugin';
-import { useText } from './hooks';
+} from "@player-ui/reference-assets-plugin";
+import { useText } from "./hooks";
 
 /** Find any link modifiers on the text */
 export const getLinkModifier = (asset: TextAsset): LinkModifier | undefined => {
   return asset.modifiers?.find(
     (mod) =>
-      mod.type === 'link' &&
-      (mod.metaData as LinkModifier['metaData'])?.ref !== undefined
+      mod.type === "link" &&
+      (mod.metaData as LinkModifier["metaData"])?.ref !== undefined,
   ) as LinkModifier;
 };
 
@@ -22,7 +21,14 @@ export const Text = (props: TextAsset) => {
   const { value } = props;
 
   if (linkModifier) {
-    return <Link href={linkModifier.metaData.ref}>{value}</Link>;
+    return (
+      <a
+        className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
+        href={linkModifier.metaData.ref}
+      >
+        {value}
+      </a>
+    );
   }
 
   return <span {...spanProps}>{value}</span>;

package/src/assets/text/hooks.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
-import makeClass from 'clsx';
-import { useAssetProps } from '@player-ui/react';
-import type { TextAsset } from '@player-ui/reference-assets-plugin';
+import React, { useContext } from "react";
+import makeClass from "clsx";
+import { useAssetProps } from "@player-ui/react";
+import type { TextAsset } from "@player-ui/reference-assets-plugin";
 
 export interface TextModifierContextType {
   getClassForModifier?<T>(modifier: T): string | undefined;
@@ -12,14 +12,14 @@ export const TextModifierContext = React.createContext<
 >(undefined);
 
 /** Get the props for a basic text element */
-export const useText = (props: TextAsset): JSX.IntrinsicElements['span'] => {
+export const useText = (props: TextAsset): JSX.IntrinsicElements["span"] => {
   let className: string | undefined;
 
   const modifierContext = useContext(TextModifierContext);
 
   if (props.modifiers && modifierContext?.getClassForModifier) {
     className = makeClass(
-      ...props.modifiers.map(modifierContext.getClassForModifier)
+      ...props.modifiers.map(modifierContext.getClassForModifier),
     );
   }
 

package/src/assets/text/index.tsx

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

package/src/components/Button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/ChoiceItem.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ReactAsset } from "@player-ui/react";
+import { Input as InputComp } from "./Input";
+import { Label } from "./Label";
+import type { ChoiceItem as ChoiceItemType } from "@player-ui/reference-assets-plugin";
+
+export type ChoiceItemProps = React.InputHTMLAttributes<HTMLInputElement> &
+  Pick<ChoiceItemType, "label">;
+
+/** A choice item */
+export const ChoiceItem = (props: ChoiceItemProps) => {
+  const { label, id, ...rest } = props;
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <InputComp
+        type="radio"
+        className="h-fit w-fit shadow-none"
+        id={id}
+        {...rest}
+      />
+      {label && (
+        <Label htmlFor={id}>
+          <ReactAsset {...label} />
+        </Label>
+      )}
+    </div>
+  );
+};
+
+export default ChoiceItem;

package/src/components/Input.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import * as React from "react";
+
+import { cn } from "../utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/components/Label.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/Separator.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "../utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  SeparatorPrimitive.SeparatorProps
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/global.css

@@ -0,0 +1,83 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+}

package/src/index.tsx

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

package/src/intro.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Reference Assets/Intro" />
 
@@ -7,20 +7,20 @@ import { Meta } from '@storybook/addon-docs/blocks';
 The assets in this section are an example implementation of an Asset Library for Player.
 Each of the Asset components follows the same basic pattern:
 
-| Export                   | Description                                                                                                                                                                                                     |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `<Name>Asset`            | Typescript type interface representing the authored player content                                                                                                                                              |
-| `Transformed<Name>Asset` | (optional) - A Typescript interface representing the _transformed_ version of the asset interface. This extends the base interface and includes any state/properties added by the associated transform.         |
-| `transform`              | (optional) - A function (used by the `AssetTransformPlugin`) to adopt Player's current state with the component state. If no `transfrom` is present, the component state is the same as the authored content.   |
-| `Component`              | React component rendering of the given asset. The props are the _transformed_ type (if supplied) or the _authored_ type.                                                                                        |
+| Export                   | Description                                                                                                                                                                                                   |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<Name>Asset`            | Typescript type interface representing the authored player content                                                                                                                                            |
+| `Transformed<Name>Asset` | (optional) - A Typescript interface representing the _transformed_ version of the asset interface. This extends the base interface and includes any state/properties added by the associated transform.       |
+| `transform`              | (optional) - A function (used by the `AssetTransformPlugin`) to adopt Player's current state with the component state. If no `transfrom` is present, the component state is the same as the authored content. |
+| `Component`              | React component rendering of the given asset. The props are the _transformed_ type (if supplied) or the _authored_ type.                                                                                      |
 
 ## Usage
 
 To import and use these Assets in your App, simply import the `plugin` and attach it to Player:
 
 ```tsx
-import { useReactPlayer, ReactPlayerPlugin } from '@player-ui/react';
-import ReferenceAssetsPlugin from '@player-ui/reference-assets/plugin-react';
+import { useReactPlayer, ReactPlayerPlugin } from "@player-ui/react";
+import ReferenceAssetsPlugin from "@player-ui/reference-assets/plugin-react";
 
 const plugins: Array<ReactPlayerPlugin> = [new ReferenceAssetsPlugin()];
 

package/src/plugin.tsx

@@ -1,33 +1,21 @@
-import React from 'react';
-import type { ReactPlayer, ReactPlayerPlugin } from '@player-ui/react';
-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 React from "react";
+import type {
+  ReactPlayer,
+  ReactPlayerPlugin,
+  Player,
+  ExtendedPlayerPlugin,
+} from "@player-ui/react";
+import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-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, Image } from './assets';
-
-/**
- *
- */
-const OptionalChakraThemeProvider = (
-  props: React.PropsWithChildren<unknown>
-) => {
-  const theme = useTheme();
-
-  if (theme) {
-    // eslint-disable-next-line react/jsx-no-useless-fragment
-    return <>{props.children}</>;
-  }
-
-  return <ChakraProvider>{props.children}</ChakraProvider>;
-};
+  ChoiceAsset,
+} from "@player-ui/reference-assets-plugin";
+import { ReferenceAssetsPlugin as ReferenceAssetsCorePlugin } from "@player-ui/reference-assets-plugin";
+import { Input, Text, Collection, Action, Info, Image, Choice } from "./assets";
 
 /**
  * A plugin to register the base reference assets
@@ -36,33 +24,24 @@ export class ReferenceAssetsPlugin
   implements
     ReactPlayerPlugin,
     ExtendedPlayerPlugin<
-      [InputAsset, TextAsset, ActionAsset, CollectionAsset],
+      [InputAsset, TextAsset, ActionAsset, CollectionAsset, ChoiceAsset],
       [InfoAsset]
     >
 {
-  name = 'reference-assets-web-plugin';
+  name = "reference-assets-web-plugin";
 
   applyReact(reactPlayer: ReactPlayer) {
     reactPlayer.registerPlugin(
       new AssetProviderPlugin([
-        ['input', Input],
-        ['text', Text],
-        ['action', Action],
-        ['info', Info],
-        ['collection', Collection],
-        ['image', Image],
-      ])
+        ["input", Input],
+        ["text", Text],
+        ["action", Action],
+        ["info", Info],
+        ["collection", Collection],
+        ["image", Image],
+        ["choice", Choice],
+      ]),
     );
-
-    reactPlayer.hooks.webComponent.tap(this.name, (Comp) => {
-      return () => {
-        return (
-          <OptionalChakraThemeProvider>
-            <Comp />
-          </OptionalChakraThemeProvider>
-        );
-      };
-    });
   }
 
   apply(player: Player) {

package/src/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/types/assets/action/Action.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { TransformedAction } from "@player-ui/reference-assets-plugin";
+/**
+ * An action that a user can take
+ */
+export declare const Action: (props: TransformedAction) => React.JSX.Element;
+//# sourceMappingURL=Action.d.ts.map

package/types/assets/action/hooks.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { TransformedAction } from "@player-ui/reference-assets-plugin";
+/** Hook to get all the props for a button */
+export declare const useAction: (props: TransformedAction) => {
+    readonly id: string;
+    readonly onClick: () => void;
+    readonly children: React.JSX.Element | null;
+};
+//# sourceMappingURL=hooks.d.ts.map