@devtools-ui/input 0.4.1--canary.62.3837 → 0.4.1

package/README.md

@@ -0,0 +1,102 @@
+# @devtools-ui/input
+
+## Overview
+
+`@devtools-ui/input` is a component package designed to be leveraged by a [Player-UI assets plugin](https://player-ui.github.io/next/plugins).
+
+It provides an `Input` component that can be used to acquire data from the user.
+
+## Installation
+
+To install `@devtools-ui/input`, you can use pnpm or yarn:
+
+```sh
+pnpm i @devtools-ui/input
+```
+
+or
+
+```sh
+yarn add @devtools-ui/input
+```
+
+## Usage
+
+You can leverage this asset through the `@devtools-ui/plugin`:
+
+```ts
+import { Input } from "@devtools-ui/plugin";
+
+// and use it to define your Player-UI content:
+myFlow = {
+  id: "my_flow",
+  views: [
+    <MyView>
+      <Input
+        size={"md"}
+        placeholder={"User input"}
+        maxLength={10}
+        binding={b`binding`}
+      >
+        <Input.Label>Label</Input.Label>
+        <Input.Note>Some note</Input.Note>
+      </Input>
+    </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
+// TransformPlugin.ts
+import type { Player, PlayerPlugin } from "@player-ui/player";
+import { AssetTransformPlugin } from "@player-ui/asset-transform-plugin";
+import { inputTransform } from "@devtools-ui/input";
+
+export class TransformsPlugin implements PlayerPlugin {
+  name = "my-plugin-transforms";
+
+  apply(player: Player) {
+    player.registerPlugin(
+      new AssetTransformPlugin([[{ type: "input" }, inputTransform]])
+    );
+  }
+}
+```
+
+```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 { InputAsset, InputComponent } from "@devtools-ui/input";
+
+export class AssetsRegistryPlugin
+  implements ReactPlayerPlugin, ExtendedPlayerPlugin<[InputAsset]>
+{
+  name = "my-plugin";
+
+  applyReact(reactPlayer: ReactPlayer) {
+    reactPlayer.registerPlugin(
+      new AssetProviderPlugin([["input", InputComponent]])
+    );
+  }
+
+  apply(player: Player) {
+    player.registerPlugin(new TransformsPlugin());
+  }
+}
+```
+
+## Contributing
+
+We welcome contributions to `@devtools-ui/input`!

package/package.json

@@ -1,9 +1,15 @@
 {
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
   "name": "@devtools-ui/input",
-  "version": "0.4.1--canary.62.3837",
+  "version": "0.4.1",
   "main": "dist/cjs/index.cjs",
   "dependencies": {
-    "@devtools-ui/text": "0.4.1--canary.62.3837",
+    "@devtools-ui/text": "0.4.1",
     "@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,11 +30,6 @@
       "default": "./dist/cjs/index.cjs"
     }
   },
-  "files": [
-    "dist",
-    "src",
-    "types"
-  ],
   "peerDependencies": {
     "@player-lang/react-dsl": "1.0.1",
     "@player-ui/types": "0.15.5",

package/types/types/index.d.ts

@@ -1,8 +1,8 @@
 import type { TextAsset } from "@devtools-ui/text";
 import { Asset, Schema, AssetWrapper } from "@player-ui/types";
 import { ValidationResponse } from "@player-ui/player";
-export type InputSize = "xs" | "sm" | "md" | "lg";
-type ValueType = string | undefined;
+export declare type InputSize = "xs" | "sm" | "md" | "lg";
+declare type ValueType = string | undefined;
 export interface InputAsset extends Asset<"input"> {
     /** The location in the data-model to store the data */
     binding: ValueType;