@player-ui/reference-assets-plugin-components 0.8.0-next.0

package/dist/cjs/index.cjs

@@ -0,0 +1,144 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/components/src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  Action: () => Action,
+  ActionsSlot: () => ActionsSlot,
+  Choice: () => Choice,
+  Collection: () => Collection,
+  Image: () => Image,
+  Info: () => Info,
+  Input: () => Input,
+  ItemsSlot: () => ItemsSlot,
+  LabelSlot: () => LabelSlot,
+  NoteSlot: () => NoteSlot,
+  PrimaryInfoSlot: () => PrimaryInfoSlot,
+  SubtitleSlot: () => SubtitleSlot,
+  Text: () => Text,
+  TitleSlot: () => TitleSlot,
+  ValueSlot: () => ValueSlot,
+  dataRefs: () => dataRefs,
+  validationRefs: () => validationRefs
+});
+module.exports = __toCommonJS(src_exports);
+var import_react = __toESM(require("react"));
+var import_dsl = require("@player-tools/dsl");
+var import_common_types_plugin = require("@player-ui/common-types-plugin");
+var dataRefs = (0, import_dsl.getObjectReferences)(import_common_types_plugin.dataTypes);
+var validationRefs = (0, import_dsl.getObjectReferences)(import_common_types_plugin.validators);
+var Text = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.Asset, { type: "text", ...props }, /* @__PURE__ */ import_react.default.createElement("property", { name: "value" }, props.children));
+};
+var Collection = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.Asset, { type: "collection", ...props });
+};
+var CollectionComp = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(Collection, null, /* @__PURE__ */ import_react.default.createElement(Collection.Values, null, props.children));
+};
+var slotFactory = (name, isArray = false, wrapInAsset = true) => (0, import_dsl.createSlot)({
+  name,
+  TextComp: Text,
+  CollectionComp,
+  isArray,
+  wrapInAsset
+});
+var LabelSlot = slotFactory("label");
+var ValueSlot = slotFactory("value");
+var TitleSlot = slotFactory("title");
+var NoteSlot = slotFactory("note");
+var SubtitleSlot = slotFactory("subtitle");
+var ActionsSlot = slotFactory("actions", true);
+var PrimaryInfoSlot = slotFactory("primaryInfo");
+var ItemsSlot = slotFactory("items", true, false);
+Collection.Values = (0, import_dsl.createSlot)({
+  name: "values",
+  isArray: true,
+  TextComp: Text,
+  wrapInAsset: true
+});
+Collection.Label = LabelSlot;
+var Action = (props) => {
+  const { exp, children, ...rest } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.Asset, { type: "action", ...rest }, /* @__PURE__ */ import_react.default.createElement("property", { name: "exp" }, exp?.toValue()), children);
+};
+Action.Label = LabelSlot;
+var Image = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.Asset, { type: "image", ...props });
+};
+Image.Caption = slotFactory("caption");
+var Input = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.Asset, { type: "input", ...rest }, /* @__PURE__ */ import_react.default.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Input.Label = LabelSlot;
+Input.Note = NoteSlot;
+var Info = (props) => {
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.View, { type: "info", ...props });
+};
+Info.Title = TitleSlot;
+Info.Subtitle = SubtitleSlot;
+Info.PrimaryInfo = PrimaryInfoSlot;
+Info.Actions = ActionsSlot;
+Info.Footer = slotFactory("footer");
+var Choice = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.Asset, { type: "choice", ...rest }, /* @__PURE__ */ import_react.default.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Choice.Title = TitleSlot;
+Choice.Note = NoteSlot;
+Choice.Items = ItemsSlot;
+var ChoiceItem = (props) => {
+  const { children, id, ...rest } = props;
+  return /* @__PURE__ */ import_react.default.createElement(import_dsl.ObjectWithIndexTracking, null, id && /* @__PURE__ */ import_react.default.createElement("property", { name: "id" }, /* @__PURE__ */ import_react.default.createElement("value", null, id)), !id && /* @__PURE__ */ import_react.default.createElement(import_dsl.GeneratedIDProperty, null), (0, import_dsl.toJsonProperties)(rest, { propertiesToSkip: ["applicability"] }), children);
+};
+ChoiceItem.Label = LabelSlot;
+Choice.Item = ChoiceItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Action,
+  ActionsSlot,
+  Choice,
+  Collection,
+  Image,
+  Info,
+  Input,
+  ItemsSlot,
+  LabelSlot,
+  NoteSlot,
+  PrimaryInfoSlot,
+  SubtitleSlot,
+  Text,
+  TitleSlot,
+  ValueSlot,
+  dataRefs,
+  validationRefs
+});
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/components/src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {\n  WithChildren,\n  AssetPropsWithChildren,\n  BindingTemplateInstance,\n  ExpressionTemplateInstance,\n  DSLSchema as PlayerDSLSchema,\n  DataTypeReference,\n  DataTypeRefs,\n  ValidatorFunctionRefs,\n  WithPlayerTypes,\n} from \"@player-tools/dsl\";\nimport {\n  createSlot,\n  Asset,\n  View,\n  getObjectReferences,\n  toJsonProperties,\n  ObjectWithIndexTracking,\n  GeneratedIDProperty,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport type {\n  ActionAsset,\n  TextAsset,\n  CollectionAsset,\n  InfoAsset,\n  InputAsset,\n  ImageAsset,\n  ChoiceAsset,\n  ChoiceItem as ChoiceItemType,\n} from \"@player-ui/reference-assets-plugin\";\nimport { dataTypes, validators } from \"@player-ui/common-types-plugin\";\n\nexport const dataRefs = getObjectReferences<\n  typeof dataTypes,\n  DataTypeRefs<typeof dataTypes>\n>(dataTypes);\n\nexport const validationRefs = getObjectReferences<\n  typeof validators,\n  ValidatorFunctionRefs<typeof validators>\n>(validators);\n\nexport type DSLSchema = PlayerDSLSchema<\n  DataTypeReference<typeof dataTypes, ValidatorFunctionRefs<typeof validators>>\n>;\n\nexport const Text = (\n  props: Omit<AssetPropsWithChildren<TextAsset>, \"value\"> & {\n    value?: string;\n  },\n) => {\n  return (\n    <Asset type=\"text\" {...props}>\n      <property name=\"value\">{props.children}</property>\n    </Asset>\n  );\n};\n\nexport const Collection = (props: AssetPropsWithChildren<CollectionAsset>) => {\n  return <Asset type=\"collection\" {...props} />;\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\n/** A utility for quickly creating named slots using the text and collection factories */\nconst slotFactory = (name: string, isArray = false, wrapInAsset = true) =>\n  createSlot({\n    name,\n    TextComp: Text,\n    CollectionComp,\n    isArray,\n    wrapInAsset,\n  });\n\nexport const LabelSlot = slotFactory(\"label\");\nexport const ValueSlot = slotFactory(\"value\");\nexport const TitleSlot = slotFactory(\"title\");\nexport const NoteSlot = slotFactory(\"note\");\nexport const SubtitleSlot = slotFactory(\"subtitle\");\nexport const ActionsSlot = slotFactory(\"actions\", true);\nexport const PrimaryInfoSlot = slotFactory(\"primaryInfo\");\nexport const ItemsSlot = slotFactory(\"items\", true, false);\n\nCollection.Values = createSlot({\n  name: \"values\",\n  isArray: true,\n  TextComp: Text,\n  wrapInAsset: true,\n});\n\nCollection.Label = LabelSlot;\n\nexport const Action = (\n  props: Omit<AssetPropsWithChildren<ActionAsset>, \"exp\"> & {\n    /** An optional expression to execute before transitioning */\n    exp?: ExpressionTemplateInstance;\n  },\n) => {\n  const { exp, children, ...rest } = props;\n\n  return (\n    <Asset type=\"action\" {...rest}>\n      <property name=\"exp\">{exp?.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nAction.Label = LabelSlot;\n\nexport const Image = (props: AssetPropsWithChildren<ImageAsset>) => {\n  return <Asset type=\"image\" {...props} />;\n};\n\nImage.Caption = slotFactory(\"caption\");\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  },\n) => {\n  const { binding, children, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = LabelSlot;\nInput.Note = NoteSlot;\n\nexport const Info = (props: AssetPropsWithChildren<InfoAsset>) => {\n  return <View type=\"info\" {...props} />;\n};\n\nInfo.Title = TitleSlot;\nInfo.Subtitle = SubtitleSlot;\nInfo.PrimaryInfo = PrimaryInfoSlot;\nInfo.Actions = ActionsSlot;\nInfo.Footer = slotFactory(\"footer\");\n\nexport const Choice = (\n  props: Omit<AssetPropsWithChildren<ChoiceAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  },\n) => {\n  const { binding, children, ...rest } = props;\n  return (\n    <Asset type=\"choice\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nChoice.Title = TitleSlot;\nChoice.Note = NoteSlot;\nChoice.Items = ItemsSlot;\n\nconst ChoiceItem = (\n  props: WithChildren<\n    WithPlayerTypes<\n      Omit<ChoiceItemType, \"id\"> & {\n        id?: string;\n      }\n    >\n  >,\n) => {\n  const { children, id, ...rest } = props;\n\n  return (\n    <ObjectWithIndexTracking>\n      {id && (\n        <property name=\"id\">\n          <value>{id}</value>\n        </property>\n      )}\n      {!id && <GeneratedIDProperty />}\n      {toJsonProperties(rest, { propertiesToSkip: [\"applicability\"] })}\n      {children}\n    </ObjectWithIndexTracking>\n  );\n};\n\nChoiceItem.Label = LabelSlot;\nChoice.Item = ChoiceItem;\n"],"mappings":"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","names":["React"]}

package/dist/index.legacy-esm.js

@@ -0,0 +1,101 @@
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/components/src/index.tsx
+import React from "react";
+import {
+  createSlot,
+  Asset,
+  View,
+  getObjectReferences,
+  toJsonProperties,
+  ObjectWithIndexTracking,
+  GeneratedIDProperty
+} from "@player-tools/dsl";
+import { dataTypes, validators } from "@player-ui/common-types-plugin";
+var dataRefs = getObjectReferences(dataTypes);
+var validationRefs = getObjectReferences(validators);
+var Text = (props) => {
+  return /* @__PURE__ */ React.createElement(Asset, { type: "text", ...props }, /* @__PURE__ */ React.createElement("property", { name: "value" }, props.children));
+};
+var Collection = (props) => {
+  return /* @__PURE__ */ React.createElement(Asset, { type: "collection", ...props });
+};
+var CollectionComp = (props) => {
+  return /* @__PURE__ */ React.createElement(Collection, null, /* @__PURE__ */ React.createElement(Collection.Values, null, props.children));
+};
+var slotFactory = (name, isArray = false, wrapInAsset = true) => createSlot({
+  name,
+  TextComp: Text,
+  CollectionComp,
+  isArray,
+  wrapInAsset
+});
+var LabelSlot = slotFactory("label");
+var ValueSlot = slotFactory("value");
+var TitleSlot = slotFactory("title");
+var NoteSlot = slotFactory("note");
+var SubtitleSlot = slotFactory("subtitle");
+var ActionsSlot = slotFactory("actions", true);
+var PrimaryInfoSlot = slotFactory("primaryInfo");
+var ItemsSlot = slotFactory("items", true, false);
+Collection.Values = createSlot({
+  name: "values",
+  isArray: true,
+  TextComp: Text,
+  wrapInAsset: true
+});
+Collection.Label = LabelSlot;
+var Action = (props) => {
+  const { exp, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Asset, { type: "action", ...rest }, /* @__PURE__ */ React.createElement("property", { name: "exp" }, exp?.toValue()), children);
+};
+Action.Label = LabelSlot;
+var Image = (props) => {
+  return /* @__PURE__ */ React.createElement(Asset, { type: "image", ...props });
+};
+Image.Caption = slotFactory("caption");
+var Input = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Asset, { type: "input", ...rest }, /* @__PURE__ */ React.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Input.Label = LabelSlot;
+Input.Note = NoteSlot;
+var Info = (props) => {
+  return /* @__PURE__ */ React.createElement(View, { type: "info", ...props });
+};
+Info.Title = TitleSlot;
+Info.Subtitle = SubtitleSlot;
+Info.PrimaryInfo = PrimaryInfoSlot;
+Info.Actions = ActionsSlot;
+Info.Footer = slotFactory("footer");
+var Choice = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Asset, { type: "choice", ...rest }, /* @__PURE__ */ React.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Choice.Title = TitleSlot;
+Choice.Note = NoteSlot;
+Choice.Items = ItemsSlot;
+var ChoiceItem = (props) => {
+  const { children, id, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(ObjectWithIndexTracking, null, id && /* @__PURE__ */ React.createElement("property", { name: "id" }, /* @__PURE__ */ React.createElement("value", null, id)), !id && /* @__PURE__ */ React.createElement(GeneratedIDProperty, null), toJsonProperties(rest, { propertiesToSkip: ["applicability"] }), children);
+};
+ChoiceItem.Label = LabelSlot;
+Choice.Item = ChoiceItem;
+export {
+  Action,
+  ActionsSlot,
+  Choice,
+  Collection,
+  Image,
+  Info,
+  Input,
+  ItemsSlot,
+  LabelSlot,
+  NoteSlot,
+  PrimaryInfoSlot,
+  SubtitleSlot,
+  Text,
+  TitleSlot,
+  ValueSlot,
+  dataRefs,
+  validationRefs
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs

@@ -0,0 +1,101 @@
+// ../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/components/src/index.tsx
+import React from "react";
+import {
+  createSlot,
+  Asset,
+  View,
+  getObjectReferences,
+  toJsonProperties,
+  ObjectWithIndexTracking,
+  GeneratedIDProperty
+} from "@player-tools/dsl";
+import { dataTypes, validators } from "@player-ui/common-types-plugin";
+var dataRefs = getObjectReferences(dataTypes);
+var validationRefs = getObjectReferences(validators);
+var Text = (props) => {
+  return /* @__PURE__ */ React.createElement(Asset, { type: "text", ...props }, /* @__PURE__ */ React.createElement("property", { name: "value" }, props.children));
+};
+var Collection = (props) => {
+  return /* @__PURE__ */ React.createElement(Asset, { type: "collection", ...props });
+};
+var CollectionComp = (props) => {
+  return /* @__PURE__ */ React.createElement(Collection, null, /* @__PURE__ */ React.createElement(Collection.Values, null, props.children));
+};
+var slotFactory = (name, isArray = false, wrapInAsset = true) => createSlot({
+  name,
+  TextComp: Text,
+  CollectionComp,
+  isArray,
+  wrapInAsset
+});
+var LabelSlot = slotFactory("label");
+var ValueSlot = slotFactory("value");
+var TitleSlot = slotFactory("title");
+var NoteSlot = slotFactory("note");
+var SubtitleSlot = slotFactory("subtitle");
+var ActionsSlot = slotFactory("actions", true);
+var PrimaryInfoSlot = slotFactory("primaryInfo");
+var ItemsSlot = slotFactory("items", true, false);
+Collection.Values = createSlot({
+  name: "values",
+  isArray: true,
+  TextComp: Text,
+  wrapInAsset: true
+});
+Collection.Label = LabelSlot;
+var Action = (props) => {
+  const { exp, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Asset, { type: "action", ...rest }, /* @__PURE__ */ React.createElement("property", { name: "exp" }, exp?.toValue()), children);
+};
+Action.Label = LabelSlot;
+var Image = (props) => {
+  return /* @__PURE__ */ React.createElement(Asset, { type: "image", ...props });
+};
+Image.Caption = slotFactory("caption");
+var Input = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Asset, { type: "input", ...rest }, /* @__PURE__ */ React.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Input.Label = LabelSlot;
+Input.Note = NoteSlot;
+var Info = (props) => {
+  return /* @__PURE__ */ React.createElement(View, { type: "info", ...props });
+};
+Info.Title = TitleSlot;
+Info.Subtitle = SubtitleSlot;
+Info.PrimaryInfo = PrimaryInfoSlot;
+Info.Actions = ActionsSlot;
+Info.Footer = slotFactory("footer");
+var Choice = (props) => {
+  const { binding, children, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(Asset, { type: "choice", ...rest }, /* @__PURE__ */ React.createElement("property", { name: "binding" }, binding.toValue()), children);
+};
+Choice.Title = TitleSlot;
+Choice.Note = NoteSlot;
+Choice.Items = ItemsSlot;
+var ChoiceItem = (props) => {
+  const { children, id, ...rest } = props;
+  return /* @__PURE__ */ React.createElement(ObjectWithIndexTracking, null, id && /* @__PURE__ */ React.createElement("property", { name: "id" }, /* @__PURE__ */ React.createElement("value", null, id)), !id && /* @__PURE__ */ React.createElement(GeneratedIDProperty, null), toJsonProperties(rest, { propertiesToSkip: ["applicability"] }), children);
+};
+ChoiceItem.Label = LabelSlot;
+Choice.Item = ChoiceItem;
+export {
+  Action,
+  ActionsSlot,
+  Choice,
+  Collection,
+  Image,
+  Info,
+  Input,
+  ItemsSlot,
+  LabelSlot,
+  NoteSlot,
+  PrimaryInfoSlot,
+  SubtitleSlot,
+  Text,
+  TitleSlot,
+  ValueSlot,
+  dataRefs,
+  validationRefs
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/plugins/reference-assets/components/src/index.tsx"],"sourcesContent":["import React from \"react\";\nimport type {\n  WithChildren,\n  AssetPropsWithChildren,\n  BindingTemplateInstance,\n  ExpressionTemplateInstance,\n  DSLSchema as PlayerDSLSchema,\n  DataTypeReference,\n  DataTypeRefs,\n  ValidatorFunctionRefs,\n  WithPlayerTypes,\n} from \"@player-tools/dsl\";\nimport {\n  createSlot,\n  Asset,\n  View,\n  getObjectReferences,\n  toJsonProperties,\n  ObjectWithIndexTracking,\n  GeneratedIDProperty,\n} from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport type {\n  ActionAsset,\n  TextAsset,\n  CollectionAsset,\n  InfoAsset,\n  InputAsset,\n  ImageAsset,\n  ChoiceAsset,\n  ChoiceItem as ChoiceItemType,\n} from \"@player-ui/reference-assets-plugin\";\nimport { dataTypes, validators } from \"@player-ui/common-types-plugin\";\n\nexport const dataRefs = getObjectReferences<\n  typeof dataTypes,\n  DataTypeRefs<typeof dataTypes>\n>(dataTypes);\n\nexport const validationRefs = getObjectReferences<\n  typeof validators,\n  ValidatorFunctionRefs<typeof validators>\n>(validators);\n\nexport type DSLSchema = PlayerDSLSchema<\n  DataTypeReference<typeof dataTypes, ValidatorFunctionRefs<typeof validators>>\n>;\n\nexport const Text = (\n  props: Omit<AssetPropsWithChildren<TextAsset>, \"value\"> & {\n    value?: string;\n  },\n) => {\n  return (\n    <Asset type=\"text\" {...props}>\n      <property name=\"value\">{props.children}</property>\n    </Asset>\n  );\n};\n\nexport const Collection = (props: AssetPropsWithChildren<CollectionAsset>) => {\n  return <Asset type=\"collection\" {...props} />;\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\n/** A utility for quickly creating named slots using the text and collection factories */\nconst slotFactory = (name: string, isArray = false, wrapInAsset = true) =>\n  createSlot({\n    name,\n    TextComp: Text,\n    CollectionComp,\n    isArray,\n    wrapInAsset,\n  });\n\nexport const LabelSlot = slotFactory(\"label\");\nexport const ValueSlot = slotFactory(\"value\");\nexport const TitleSlot = slotFactory(\"title\");\nexport const NoteSlot = slotFactory(\"note\");\nexport const SubtitleSlot = slotFactory(\"subtitle\");\nexport const ActionsSlot = slotFactory(\"actions\", true);\nexport const PrimaryInfoSlot = slotFactory(\"primaryInfo\");\nexport const ItemsSlot = slotFactory(\"items\", true, false);\n\nCollection.Values = createSlot({\n  name: \"values\",\n  isArray: true,\n  TextComp: Text,\n  wrapInAsset: true,\n});\n\nCollection.Label = LabelSlot;\n\nexport const Action = (\n  props: Omit<AssetPropsWithChildren<ActionAsset>, \"exp\"> & {\n    /** An optional expression to execute before transitioning */\n    exp?: ExpressionTemplateInstance;\n  },\n) => {\n  const { exp, children, ...rest } = props;\n\n  return (\n    <Asset type=\"action\" {...rest}>\n      <property name=\"exp\">{exp?.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nAction.Label = LabelSlot;\n\nexport const Image = (props: AssetPropsWithChildren<ImageAsset>) => {\n  return <Asset type=\"image\" {...props} />;\n};\n\nImage.Caption = slotFactory(\"caption\");\n\nexport const Input = (\n  props: Omit<AssetPropsWithChildren<InputAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  },\n) => {\n  const { binding, children, ...rest } = props;\n  return (\n    <Asset type=\"input\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nInput.Label = LabelSlot;\nInput.Note = NoteSlot;\n\nexport const Info = (props: AssetPropsWithChildren<InfoAsset>) => {\n  return <View type=\"info\" {...props} />;\n};\n\nInfo.Title = TitleSlot;\nInfo.Subtitle = SubtitleSlot;\nInfo.PrimaryInfo = PrimaryInfoSlot;\nInfo.Actions = ActionsSlot;\nInfo.Footer = slotFactory(\"footer\");\n\nexport const Choice = (\n  props: Omit<AssetPropsWithChildren<ChoiceAsset>, \"binding\"> & {\n    /** The binding */\n    binding: BindingTemplateInstance;\n  },\n) => {\n  const { binding, children, ...rest } = props;\n  return (\n    <Asset type=\"choice\" {...rest}>\n      <property name=\"binding\">{binding.toValue()}</property>\n      {children}\n    </Asset>\n  );\n};\n\nChoice.Title = TitleSlot;\nChoice.Note = NoteSlot;\nChoice.Items = ItemsSlot;\n\nconst ChoiceItem = (\n  props: WithChildren<\n    WithPlayerTypes<\n      Omit<ChoiceItemType, \"id\"> & {\n        id?: string;\n      }\n    >\n  >,\n) => {\n  const { children, id, ...rest } = props;\n\n  return (\n    <ObjectWithIndexTracking>\n      {id && (\n        <property name=\"id\">\n          <value>{id}</value>\n        </property>\n      )}\n      {!id && <GeneratedIDProperty />}\n      {toJsonProperties(rest, { propertiesToSkip: [\"applicability\"] })}\n      {children}\n    </ObjectWithIndexTracking>\n  );\n};\n\nChoiceItem.Label = LabelSlot;\nChoice.Item = ChoiceItem;\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@player-ui/reference-assets-plugin-components",
+  "version": "0.8.0-next.0",
+  "main": "dist/cjs/index.cjs",
+  "peerDependencies": {
+    "@player-ui/player": "0.8.0-next.0",
+    "react": "^18.2.0",
+    "@types/react": "^18.2.39",
+    "@player-tools/dsl": "0.6.1-next.2"
+  },
+  "dependencies": {
+    "@player-ui/common-types-plugin": "0.8.0-next.0",
+    "@player-ui/reference-assets-plugin": "0.8.0-next.0",
+    "tslib": "^2.6.2"
+  },
+  "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/index.test.tsx

@@ -0,0 +1,284 @@
+import React from "react";
+import { describe, test, expect } from "vitest";
+import { render, binding as b } from "@player-tools/dsl";
+import { Text, Action, Info, Collection, Input, Choice } from ".";
+
+describe("JSON serialization", () => {
+  describe("text", () => {
+    test("works for basic text", async () => {
+      expect((await render(<Text>Hello World</Text>)).jsonValue).toStrictEqual({
+        id: "root",
+        type: "text",
+        value: "Hello World",
+      });
+    });
+
+    test("works for value prop", async () => {
+      expect(
+        (await render(<Text value="Hello World" />)).jsonValue,
+      ).toStrictEqual({
+        id: "root",
+        type: "text",
+        value: "Hello World",
+      });
+    });
+  });
+
+  describe("collection", () => {
+    test("adds a label", async () => {
+      expect(
+        (
+          await render(
+            <Collection id="test-id">
+              <Collection.Label>Test</Collection.Label>
+            </Collection>,
+          )
+        ).jsonValue,
+      ).toStrictEqual({
+        id: "test-id",
+        type: "collection",
+        label: {
+          asset: {
+            id: "test-id-label",
+            type: "text",
+            value: "Test",
+          },
+        },
+      });
+    });
+
+    test("adds values", async () => {
+      expect(
+        (
+          await render(
+            <Collection>
+              <Collection.Values>
+                <Text>First</Text>
+                <Text>Second</Text>
+              </Collection.Values>
+            </Collection>,
+          )
+        ).jsonValue,
+      ).toStrictEqual({
+        id: "root",
+        type: "collection",
+        values: [
+          {
+            asset: {
+              id: "values-0",
+              type: "text",
+              value: "First",
+            },
+          },
+          {
+            asset: {
+              id: "values-1",
+              type: "text",
+              value: "Second",
+            },
+          },
+        ],
+      });
+    });
+  });
+
+  describe("info", () => {
+    test("works for a large view", async () => {
+      expect(
+        (
+          await render(
+            <Info id="info-view">
+              <Info.Title>Info Title</Info.Title>
+              <Info.PrimaryInfo>
+                <Input binding={b`foo.bar`}>
+                  <Input.Label>Input Label</Input.Label>
+                </Input>
+                <Text id="input-result" value={b`foo.bar`.toString()} />
+              </Info.PrimaryInfo>
+              <Info.Actions>
+                <Action value="next">
+                  <Action.Label>Continue</Action.Label>
+                </Action>
+              </Info.Actions>
+            </Info>,
+          )
+        ).jsonValue,
+      ).toStrictEqual({
+        id: "info-view",
+        type: "info",
+        title: {
+          asset: {
+            id: "info-view-title",
+            type: "text",
+            value: "Info Title",
+          },
+        },
+        primaryInfo: {
+          asset: {
+            id: "info-view-primaryInfo",
+            type: "collection",
+            values: [
+              {
+                asset: {
+                  id: "info-view-primaryInfo-values-0",
+                  type: "input",
+                  binding: "foo.bar",
+                  label: {
+                    asset: {
+                      id: "info-view-primaryInfo-values-0-label",
+                      type: "text",
+                      value: "Input Label",
+                    },
+                  },
+                },
+              },
+              {
+                asset: {
+                  id: "input-result",
+                  type: "text",
+                  value: "{{foo.bar}}",
+                },
+              },
+            ],
+          },
+        },
+        actions: [
+          {
+            asset: {
+              id: "info-view-actions-0",
+              type: "action",
+              value: "next",
+              label: {
+                asset: {
+                  id: "info-view-actions-0-label",
+                  type: "text",
+                  value: "Continue",
+                },
+              },
+            },
+          },
+        ],
+      });
+    });
+  });
+
+  describe("choice", () => {
+    test("works for title and choices", async () => {
+      expect(
+        (
+          await render(
+            <Choice id="choice-without-note" binding={b`foo.bar`}>
+              <Choice.Title>This is a list of choices</Choice.Title>
+              <Choice.Items>
+                <Choice.Item id="item-1" value="Item 1">
+                  <Choice.Item.Label>Item 1</Choice.Item.Label>
+                </Choice.Item>
+                <Choice.Item id="item-2" value="Item 2">
+                  <Choice.Item.Label>Item 2</Choice.Item.Label>
+                </Choice.Item>
+              </Choice.Items>
+            </Choice>,
+          )
+        ).jsonValue,
+      ).toStrictEqual({
+        id: "choice-without-note",
+        type: "choice",
+        binding: "foo.bar",
+        title: {
+          asset: {
+            id: "choice-without-note-title",
+            type: "text",
+            value: "This is a list of choices",
+          },
+        },
+        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",
+              },
+            },
+          },
+        ],
+      });
+    });
+
+    test("works with a note", async () => {
+      expect(
+        (
+          await render(
+            <Choice id="choice-with-note" binding={b`foo.bar`}>
+              <Choice.Title>This is a list of choices</Choice.Title>
+              <Choice.Note>This is a note</Choice.Note>
+              <Choice.Items>
+                <Choice.Item id="item-1" value="Item 1">
+                  <Choice.Item.Label>Item 1</Choice.Item.Label>
+                </Choice.Item>
+                <Choice.Item id="item-2" value="Item 2">
+                  <Choice.Item.Label>Item 2</Choice.Item.Label>
+                </Choice.Item>
+              </Choice.Items>
+            </Choice>,
+          )
+        ).jsonValue,
+      ).toStrictEqual({
+        id: "choice-with-note",
+        type: "choice",
+        binding: "foo.bar",
+        title: {
+          asset: {
+            id: "choice-with-note-title",
+            type: "text",
+            value: "This is a list of choices",
+          },
+        },
+        note: {
+          asset: {
+            id: "choice-with-note-note",
+            type: "text",
+            value: "This is a note",
+          },
+        },
+        items: [
+          {
+            id: "item-1",
+            value: "Item 1",
+            label: {
+              asset: {
+                id: "choice-with-note-items-0-label",
+                type: "text",
+                value: "Item 1",
+              },
+            },
+          },
+          {
+            id: "item-2",
+            value: "Item 2",
+            label: {
+              asset: {
+                id: "choice-with-note-items-1-label",
+                type: "text",
+                value: "Item 2",
+              },
+            },
+          },
+        ],
+      });
+    });
+  });
+});

package/src/index.tsx

@@ -0,0 +1,198 @@
+import React from "react";
+import type {
+  WithChildren,
+  AssetPropsWithChildren,
+  BindingTemplateInstance,
+  ExpressionTemplateInstance,
+  DSLSchema as PlayerDSLSchema,
+  DataTypeReference,
+  DataTypeRefs,
+  ValidatorFunctionRefs,
+  WithPlayerTypes,
+} from "@player-tools/dsl";
+import {
+  createSlot,
+  Asset,
+  View,
+  getObjectReferences,
+  toJsonProperties,
+  ObjectWithIndexTracking,
+  GeneratedIDProperty,
+} from "@player-tools/dsl";
+import type { Asset as AssetType } from "@player-ui/player";
+import type {
+  ActionAsset,
+  TextAsset,
+  CollectionAsset,
+  InfoAsset,
+  InputAsset,
+  ImageAsset,
+  ChoiceAsset,
+  ChoiceItem as ChoiceItemType,
+} from "@player-ui/reference-assets-plugin";
+import { dataTypes, validators } from "@player-ui/common-types-plugin";
+
+export const dataRefs = getObjectReferences<
+  typeof dataTypes,
+  DataTypeRefs<typeof dataTypes>
+>(dataTypes);
+
+export const validationRefs = getObjectReferences<
+  typeof validators,
+  ValidatorFunctionRefs<typeof validators>
+>(validators);
+
+export type DSLSchema = PlayerDSLSchema<
+  DataTypeReference<typeof dataTypes, ValidatorFunctionRefs<typeof validators>>
+>;
+
+export const Text = (
+  props: Omit<AssetPropsWithChildren<TextAsset>, "value"> & {
+    value?: string;
+  },
+) => {
+  return (
+    <Asset type="text" {...props}>
+      <property name="value">{props.children}</property>
+    </Asset>
+  );
+};
+
+export const Collection = (props: AssetPropsWithChildren<CollectionAsset>) => {
+  return <Asset type="collection" {...props} />;
+};
+
+const CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {
+  return (
+    <Collection>
+      <Collection.Values>{props.children}</Collection.Values>
+    </Collection>
+  );
+};
+
+/** A utility for quickly creating named slots using the text and collection factories */
+const slotFactory = (name: string, isArray = false, wrapInAsset = true) =>
+  createSlot({
+    name,
+    TextComp: Text,
+    CollectionComp,
+    isArray,
+    wrapInAsset,
+  });
+
+export const LabelSlot = slotFactory("label");
+export const ValueSlot = slotFactory("value");
+export const TitleSlot = slotFactory("title");
+export const NoteSlot = slotFactory("note");
+export const SubtitleSlot = slotFactory("subtitle");
+export const ActionsSlot = slotFactory("actions", true);
+export const PrimaryInfoSlot = slotFactory("primaryInfo");
+export const ItemsSlot = slotFactory("items", true, false);
+
+Collection.Values = createSlot({
+  name: "values",
+  isArray: true,
+  TextComp: Text,
+  wrapInAsset: true,
+});
+
+Collection.Label = LabelSlot;
+
+export const Action = (
+  props: Omit<AssetPropsWithChildren<ActionAsset>, "exp"> & {
+    /** An optional expression to execute before transitioning */
+    exp?: ExpressionTemplateInstance;
+  },
+) => {
+  const { exp, children, ...rest } = props;
+
+  return (
+    <Asset type="action" {...rest}>
+      <property name="exp">{exp?.toValue()}</property>
+      {children}
+    </Asset>
+  );
+};
+
+Action.Label = LabelSlot;
+
+export const Image = (props: AssetPropsWithChildren<ImageAsset>) => {
+  return <Asset type="image" {...props} />;
+};
+
+Image.Caption = slotFactory("caption");
+
+export const Input = (
+  props: Omit<AssetPropsWithChildren<InputAsset>, "binding"> & {
+    /** The binding */
+    binding: BindingTemplateInstance;
+  },
+) => {
+  const { binding, children, ...rest } = props;
+  return (
+    <Asset type="input" {...rest}>
+      <property name="binding">{binding.toValue()}</property>
+      {children}
+    </Asset>
+  );
+};
+
+Input.Label = LabelSlot;
+Input.Note = NoteSlot;
+
+export const Info = (props: AssetPropsWithChildren<InfoAsset>) => {
+  return <View type="info" {...props} />;
+};
+
+Info.Title = TitleSlot;
+Info.Subtitle = SubtitleSlot;
+Info.PrimaryInfo = PrimaryInfoSlot;
+Info.Actions = ActionsSlot;
+Info.Footer = slotFactory("footer");
+
+export const Choice = (
+  props: Omit<AssetPropsWithChildren<ChoiceAsset>, "binding"> & {
+    /** The binding */
+    binding: BindingTemplateInstance;
+  },
+) => {
+  const { binding, children, ...rest } = props;
+  return (
+    <Asset type="choice" {...rest}>
+      <property name="binding">{binding.toValue()}</property>
+      {children}
+    </Asset>
+  );
+};
+
+Choice.Title = TitleSlot;
+Choice.Note = NoteSlot;
+Choice.Items = ItemsSlot;
+
+const ChoiceItem = (
+  props: WithChildren<
+    WithPlayerTypes<
+      Omit<ChoiceItemType, "id"> & {
+        id?: string;
+      }
+    >
+  >,
+) => {
+  const { children, id, ...rest } = props;
+
+  return (
+    <ObjectWithIndexTracking>
+      {id && (
+        <property name="id">
+          <value>{id}</value>
+        </property>
+      )}
+      {!id && <GeneratedIDProperty />}
+      {toJsonProperties(rest, { propertiesToSkip: ["applicability"] })}
+      {children}
+    </ObjectWithIndexTracking>
+  );
+};
+
+ChoiceItem.Label = LabelSlot;
+Choice.Item = ChoiceItem;

package/types/index.d.ts

@@ -0,0 +1,112 @@
+import React from "react";
+import type { WithChildren, AssetPropsWithChildren, BindingTemplateInstance, ExpressionTemplateInstance, DSLSchema as PlayerDSLSchema, DataTypeReference, DataTypeRefs, ValidatorFunctionRefs, WithPlayerTypes } from "@player-tools/dsl";
+import type { ActionAsset, TextAsset, CollectionAsset, InfoAsset, InputAsset, ImageAsset, ChoiceAsset, ChoiceItem as ChoiceItemType } from "@player-ui/reference-assets-plugin";
+import { dataTypes, validators } from "@player-ui/common-types-plugin";
+export declare const dataRefs: DataTypeRefs<typeof dataTypes>;
+export declare const validationRefs: ValidatorFunctionRefs<typeof validators>;
+export type DSLSchema = PlayerDSLSchema<DataTypeReference<typeof dataTypes, ValidatorFunctionRefs<typeof validators>>>;
+export declare const Text: (props: Omit<AssetPropsWithChildren<TextAsset>, "value"> & {
+    value?: string;
+}) => React.JSX.Element;
+export declare const Collection: {
+    (props: AssetPropsWithChildren<CollectionAsset>): React.JSX.Element;
+    Values: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Label: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export declare const LabelSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ValueSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const TitleSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const NoteSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const SubtitleSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ActionsSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const PrimaryInfoSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ItemsSlot: (props: {
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const Action: {
+    (props: Omit<AssetPropsWithChildren<ActionAsset>, "exp"> & {
+        /** An optional expression to execute before transitioning */
+        exp?: ExpressionTemplateInstance;
+    }): React.JSX.Element;
+    Label: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export declare const Image: {
+    (props: AssetPropsWithChildren<ImageAsset>): React.JSX.Element;
+    Caption: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export declare const Input: {
+    (props: Omit<AssetPropsWithChildren<InputAsset>, "binding"> & {
+        /** The binding */
+        binding: BindingTemplateInstance;
+    }): React.JSX.Element;
+    Label: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Note: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export declare const Info: {
+    (props: AssetPropsWithChildren<InfoAsset>): React.JSX.Element;
+    Title: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Subtitle: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    PrimaryInfo: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Actions: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Footer: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+};
+export declare const Choice: {
+    (props: Omit<AssetPropsWithChildren<ChoiceAsset>, "binding"> & {
+        /** The binding */
+        binding: BindingTemplateInstance;
+    }): React.JSX.Element;
+    Title: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Note: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Items: (props: {
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    Item: {
+        (props: WithChildren<WithPlayerTypes<Omit<ChoiceItemType, "id"> & {
+            id?: string;
+        }>>): React.JSX.Element;
+        Label: (props: {
+            children?: React.ReactNode;
+        }) => React.JSX.Element;
+    };
+};
+//# sourceMappingURL=index.d.ts.map