@devtools-ui/collection 0.4.0 → 0.4.1-next.0

package/README.md

@@ -0,0 +1,86 @@
+# @devtools-ui/collection
+
+## Overview
+
+`@devtools-ui/collection` is a component package designed to be leveraged by a [Player-UI assets plugin](https://player-ui.github.io/next/plugins).
+
+It provides a `Collection` component that can be used to group other Player assets into a stacked layout.
+
+## Installation
+
+To install `@devtools-ui/collection`, you can use pnpm or yarn:
+
+```sh
+pnpm i @devtools-ui/collection
+```
+
+or
+
+```sh
+yarn add @devtools-ui/collection
+```
+
+## Usage
+
+You can leverage this asset through the `@devtools-ui/plugin`:
+
+```ts
+import { Collection } from "@devtools-ui/plugin";
+
+// and use it to define your Player-UI content:
+myFlow = {
+  id: "my_flow",
+  views: [
+    <MyView>
+      <Collection>
+        <Collection.Values>
+          <Asset type="text">
+            <property name="value">Test 1</property>
+          </Asset>
+          <Asset type="text">
+            <property name="value">Test 2</property>
+          </Asset>
+        </Collection.Values>
+      </Collection>
+    </MyView>,
+  ],
+};
+```
+
+For more information on how to author Player-UI content using DSL, please check our [Player-UI docs](https://player-ui.github.io/next/dsl#tsxjsx-content-authoring-player-dsl).
+
+Or, your can leverage this asset in your own plugin:
+
+```ts
+// AssetRegistryPlugin.ts
+import React from "react";
+import type { Player } from "@player-ui/player";
+import type {
+  ExtendedPlayerPlugin,
+  ReactPlayer,
+  ReactPlayerPlugin,
+} from "@player-ui/react";
+import { AssetProviderPlugin } from "@player-ui/asset-provider-plugin-react";
+import { TransformsPlugin } from "./TransformPlugin";
+import { CollectionAsset, CollectionComponent } from "@devtools-ui/collection";
+
+export class AssetsRegistryPlugin
+  implements ReactPlayerPlugin, ExtendedPlayerPlugin<[CollectionAsset]>
+{
+  name = "my-plugin";
+
+  applyReact(reactPlayer: ReactPlayer) {
+    reactPlayer.registerPlugin(
+      new AssetProviderPlugin([["collection", CollectionComponent]])
+    );
+  }
+
+  apply(player: Player) {
+    player.registerPlugin(new TransformsPlugin());
+  }
+}
+```
+
+## Contributing
+
+We welcome contributions to `@devtools-ui/collection`!

package/dist/cjs/index.cjs

@@ -45,16 +45,16 @@ var CollectionComponent = (props) => {
 
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/dsl/Collection.tsx
 var import_react4 = __toESM(require("react"));
-var import_dsl = require("@player-tools/dsl");
+var import_react_dsl = require("@player-lang/react-dsl");
 var import_text = require("@devtools-ui/text");
 var Collection = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ import_react4.default.createElement(import_dsl.Asset, { type: "collection", ...rest }, children);
+  return /* @__PURE__ */ import_react4.default.createElement(import_react_dsl.Asset, { type: "collection", ...rest }, children);
 };
 var CollectionComp = (props) => {
   return /* @__PURE__ */ import_react4.default.createElement(Collection, null, /* @__PURE__ */ import_react4.default.createElement(Collection.Values, null, props.children));
 };
-Collection.Values = (0, import_dsl.createSlot)({
+Collection.Values = (0, import_react_dsl.createSlot)({
   name: "values",
   TextComp: import_text.Text,
   CollectionComp,

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/components/CollectionComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/dsl/Collection.tsx"],"sourcesContent":["export * from \"./types\";\nexport * from \"./components\";\nexport * from \"./dsl\";\n","import React from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { CollectionAsset } from \"../types\";\n\nexport const CollectionComponent = (props: CollectionAsset) => {\n  return (\n    <Flex direction=\"column\" gap=\"5\">\n      {props.values?.map((a) => (\n        <ReactAsset key={a.asset.id} {...a} />\n      ))}\n    </Flex>\n  );\n};\n","import React from \"react\";\nimport { AssetPropsWithChildren, Asset, createSlot } from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { CollectionAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Collection = (props: AssetPropsWithChildren<CollectionAsset>) => {\n  const { children, ...rest } = props;\n  return (\n    <Asset type=\"collection\" {...rest}>\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nCollection.Values = createSlot({\n  name: \"values\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: true,\n  wrapInAsset: true,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,gBAAqB;AACrB,IAAAA,gBAA2B;AAGpB,IAAM,sBAAsB,CAAC,UAA2B;AAC7D,SACE,6BAAAC,QAAA,cAAC,sBAAK,WAAU,UAAS,KAAI,OAC1B,MAAM,QAAQ,IAAI,CAAC,MAClB,6BAAAA,QAAA,cAAC,4BAAW,KAAK,EAAE,MAAM,IAAK,GAAG,GAAG,CACrC,CACH;AAEJ;;;ACbA,IAAAC,gBAAkB;AAClB,iBAA0D;AAG1D,kBAAqB;AAEd,IAAM,aAAa,CAAC,UAAmD;AAC5E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAC9B,SACE,8BAAAC,QAAA,cAAC,oBAAM,MAAK,cAAc,GAAG,QAC1B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,8BAAAA,QAAA,cAAC,kBACC,8BAAAA,QAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,WAAW,aAAS,uBAAW;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["import_react","React","import_react","React"]}
+{"version":3,"sources":["../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/index.ts","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/components/CollectionComponent.tsx","../../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/dsl/Collection.tsx"],"sourcesContent":["export * from \"./types\";\nexport * from \"./components\";\nexport * from \"./dsl\";\n","import React from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { CollectionAsset } from \"../types\";\n\nexport const CollectionComponent = (props: CollectionAsset) => {\n  return (\n    <Flex direction=\"column\" gap=\"5\">\n      {props.values?.map((a) => (\n        <ReactAsset key={a.asset.id} {...a} />\n      ))}\n    </Flex>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n} from \"@player-lang/react-dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { CollectionAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Collection = (props: AssetPropsWithChildren<CollectionAsset>) => {\n  const { children, ...rest } = props;\n  return (\n    <Asset type=\"collection\" {...rest}>\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nCollection.Values = createSlot({\n  name: \"values\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: true,\n  wrapInAsset: true,\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,gBAAqB;AACrB,IAAAA,gBAA2B;AAGpB,IAAM,sBAAsB,CAAC,UAA2B;AAC7D,SACE,6BAAAC,QAAA,cAAC,sBAAK,WAAU,UAAS,KAAI,OAC1B,MAAM,QAAQ,IAAI,CAAC,MAClB,6BAAAA,QAAA,cAAC,4BAAW,KAAK,EAAE,MAAM,IAAK,GAAG,GAAG,CACrC,CACH;AAEJ;;;ACbA,IAAAC,gBAAkB;AAClB,uBAIO;AAGP,kBAAqB;AAEd,IAAM,aAAa,CAAC,UAAmD;AAC5E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAC9B,SACE,8BAAAC,QAAA,cAAC,0BAAM,MAAK,cAAc,GAAG,QAC1B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,8BAAAA,QAAA,cAAC,kBACC,8BAAAA,QAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,WAAW,aAAS,6BAAW;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["import_react","React","import_react","React"]}

package/dist/index.legacy-esm.js

@@ -8,7 +8,10 @@ var CollectionComponent = (props) => {
 
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/dsl/Collection.tsx
 import React2 from "react";
-import { Asset, createSlot } from "@player-tools/dsl";
+import {
+  Asset,
+  createSlot
+} from "@player-lang/react-dsl";
 import { Text } from "@devtools-ui/text";
 var Collection = (props) => {
   const { children, ...rest } = props;

package/dist/index.mjs

@@ -8,7 +8,10 @@ var CollectionComponent = (props) => {
 
 // ../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/dsl/Collection.tsx
 import React2 from "react";
-import { Asset, createSlot } from "@player-tools/dsl";
+import {
+  Asset,
+  createSlot
+} from "@player-lang/react-dsl";
 import { Text } from "@devtools-ui/text";
 var Collection = (props) => {
   const { children, ...rest } = props;

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/components/CollectionComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/dsl/Collection.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { CollectionAsset } from \"../types\";\n\nexport const CollectionComponent = (props: CollectionAsset) => {\n  return (\n    <Flex direction=\"column\" gap=\"5\">\n      {props.values?.map((a) => (\n        <ReactAsset key={a.asset.id} {...a} />\n      ))}\n    </Flex>\n  );\n};\n","import React from \"react\";\nimport { AssetPropsWithChildren, Asset, createSlot } from \"@player-tools/dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { CollectionAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Collection = (props: AssetPropsWithChildren<CollectionAsset>) => {\n  const { children, ...rest } = props;\n  return (\n    <Asset type=\"collection\" {...rest}>\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nCollection.Values = createSlot({\n  name: \"values\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: true,\n  wrapInAsset: true,\n});\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAGpB,IAAM,sBAAsB,CAAC,UAA2B;AAC7D,SACE,oCAAC,QAAK,WAAU,UAAS,KAAI,OAC1B,MAAM,QAAQ,IAAI,CAAC,MAClB,oCAAC,cAAW,KAAK,EAAE,MAAM,IAAK,GAAG,GAAG,CACrC,CACH;AAEJ;;;ACbA,OAAOA,YAAW;AAClB,SAAiC,OAAO,kBAAkB;AAG1D,SAAS,YAAY;AAEd,IAAM,aAAa,CAAC,UAAmD;AAC5E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAC9B,SACE,gBAAAA,OAAA,cAAC,SAAM,MAAK,cAAc,GAAG,QAC1B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,gBAAAA,OAAA,cAAC,kBACC,gBAAAA,OAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,WAAW,SAAS,WAAW;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["React"]}
+{"version":3,"sources":["../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/components/CollectionComponent.tsx","../../../../../../../../../../execroot/_main/bazel-out/k8-fastbuild/bin/collection/src/dsl/Collection.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"@chakra-ui/react\";\nimport { ReactAsset } from \"@player-ui/react\";\nimport { CollectionAsset } from \"../types\";\n\nexport const CollectionComponent = (props: CollectionAsset) => {\n  return (\n    <Flex direction=\"column\" gap=\"5\">\n      {props.values?.map((a) => (\n        <ReactAsset key={a.asset.id} {...a} />\n      ))}\n    </Flex>\n  );\n};\n","import React from \"react\";\nimport {\n  AssetPropsWithChildren,\n  Asset,\n  createSlot,\n} from \"@player-lang/react-dsl\";\nimport type { Asset as AssetType } from \"@player-ui/player\";\nimport { CollectionAsset } from \"../types\";\nimport { Text } from \"@devtools-ui/text\";\n\nexport const Collection = (props: AssetPropsWithChildren<CollectionAsset>) => {\n  const { children, ...rest } = props;\n  return (\n    <Asset type=\"collection\" {...rest}>\n      {children}\n    </Asset>\n  );\n};\n\nconst CollectionComp = (props: AssetPropsWithChildren<AssetType>) => {\n  return (\n    <Collection>\n      <Collection.Values>{props.children}</Collection.Values>\n    </Collection>\n  );\n};\n\nCollection.Values = createSlot({\n  name: \"values\",\n  TextComp: Text,\n  CollectionComp,\n  isArray: true,\n  wrapInAsset: true,\n});\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAGpB,IAAM,sBAAsB,CAAC,UAA2B;AAC7D,SACE,oCAAC,QAAK,WAAU,UAAS,KAAI,OAC1B,MAAM,QAAQ,IAAI,CAAC,MAClB,oCAAC,cAAW,KAAK,EAAE,MAAM,IAAK,GAAG,GAAG,CACrC,CACH;AAEJ;;;ACbA,OAAOA,YAAW;AAClB;AAAA,EAEE;AAAA,EACA;AAAA,OACK;AAGP,SAAS,YAAY;AAEd,IAAM,aAAa,CAAC,UAAmD;AAC5E,QAAM,EAAE,UAAU,GAAG,KAAK,IAAI;AAC9B,SACE,gBAAAA,OAAA,cAAC,SAAM,MAAK,cAAc,GAAG,QAC1B,QACH;AAEJ;AAEA,IAAM,iBAAiB,CAAC,UAA6C;AACnE,SACE,gBAAAA,OAAA,cAAC,kBACC,gBAAAA,OAAA,cAAC,WAAW,QAAX,MAAmB,MAAM,QAAS,CACrC;AAEJ;AAEA,WAAW,SAAS,WAAW;AAAA,EAC7B,MAAM;AAAA,EACN,UAAU;AAAA,EACV;AAAA,EACA,SAAS;AAAA,EACT,aAAa;AACf,CAAC;","names":["React"]}

package/package.json

@@ -1,9 +1,15 @@
 {
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
   "name": "@devtools-ui/collection",
-  "version": "0.4.0",
+  "version": "0.4.1-next.0",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@devtools-ui/text": "0.4.0",
+    "@devtools-ui/text": "0.4.1-next.0",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
@@ -15,7 +21,6 @@
   },
   "module": "dist/index.legacy-esm.js",
   "types": "types/index.d.ts",
-  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     "./dist/index.css": "./dist/index.css",
@@ -25,15 +30,10 @@
       "default": "./dist/cjs/index.cjs"
     }
   },
-  "files": [
-    "dist",
-    "src",
-    "types"
-  ],
   "peerDependencies": {
-    "@player-ui/player": "0.9.1-next.0",
-    "@player-tools/dsl": "0.7.0-next.3",
-    "@player-ui/types": "0.9.1-next.0",
-    "@player-ui/react": "0.9.1-next.0"
+    "@player-ui/player": "0.15.5",
+    "@player-lang/react-dsl": "1.0.1",
+    "@player-ui/types": "0.15.5",
+    "@player-ui/react": "0.15.5"
   }
 }

package/src/dsl/Collection.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { AssetPropsWithChildren, Asset, createSlot } from "@player-tools/dsl";
+import {
+  AssetPropsWithChildren,
+  Asset,
+  createSlot,
+} from "@player-lang/react-dsl";
 import type { Asset as AssetType } from "@player-ui/player";
 import { CollectionAsset } from "../types";
 import { Text } from "@devtools-ui/text";

package/src/dsl/__tests__/Collection.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, expect, test } from "vitest";
-import { Asset, render } from "@player-tools/dsl";
+import { Asset, render } from "@player-lang/react-dsl";
 import { Collection } from "../Collection";
 
 describe("DSL: Collection", () => {

package/types/dsl/Collection.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AssetPropsWithChildren } from "@player-tools/dsl";
+import { AssetPropsWithChildren } from "@player-lang/react-dsl";
 import { CollectionAsset } from "../types";
 export declare const Collection: {
     (props: AssetPropsWithChildren<CollectionAsset>): React.JSX.Element;