Plup script improvement/ Radiogroup DSL test pass

Author: lexfm

docs/site/config/navigation.ts

@@ -82,8 +82,8 @@ const navigation: Navigation = {
               path: '/assets/toggle',
             },
             {
-              title: 'RadioGroup',
-              path: '/assets/radioGroup',
+              title: 'Radio Group',
+              path: '/assets/radio-group',
             },
           ]
         },

docs/site/pages/assets/radioGroup.mdx renamed to docs/site/pages/assets/radio-group.mdx

@@ -92,7 +92,3 @@ export class AssetsRegistryPlugin implements ReactPlayerPlugin, ExtendedPlayerPl
   }
 }
 ```
-
-## Contributing
-
-We welcome contributions to `@devtools-ui/radio-group`! Please see the [CONTRIBUTING.md](TODO: link to the file) file for more information on how to contribute.

docs/storybook/src/assets/RadioGroup.stories.tsx

@@ -9,6 +9,6 @@ const meta: Meta<typeof RadioGroup> = {
 
 export default meta;
 
-export const Basic = createDSLStory(() => import("../flows/radio-group/basic?raw"));
-
-
+export const Basic = createDSLStory(
+  () => import("../flows/radio-group/basic?raw")
+);

plopfile.mjs

@@ -39,6 +39,8 @@ export default function (plop) {
 
   plop.setHelper("kebabCase", toKebabCase);
 
+  plop.setHelper("spacedPascal", toSpacedPascal)
+
   plop.setGenerator("asset", {
     description: "Create a new asset",
     prompts: [
@@ -71,6 +73,11 @@ export default function (plop) {
       .replace(/^-/, "") // remove leading - if any
       .toLowerCase(); // Converting all to lowercase
   }
+
+  function toSpacedPascal(text) {
+    return text
+      .replace(/(?<=[a-z])([A-Z])/g, " $1") // adds space before inner capitalized lettes in pascal-cased words
+  }
 }
 
 const extendedActions = {
@@ -91,16 +98,16 @@ const extendedActions = {
   },
   mdxDocsiteDoc: {
     type: "add",
-    path: "./docs/site/pages/assets/{{camelCase assetName}}.mdx",
+    path: "./docs/site/pages/assets/{{kebabCase assetName}}.mdx",
     templateFile: "./asset-template/README.md.hbs",
   },
   mdxDocsiteNavigation: {
     type: "append",
     path: "./docs/site/config/navigation.ts",
     pattern: /(?=\s+])/,
     template: `            {
-              title: '{{pascalCase assetName}}',
-              path: '/assets/{{camelCase assetName}}',
+              title: '{{spacedPascal (pascalCase assetName)}}',
+              path: '/assets/{{kebabCase assetName}}',
             },`,
   },
   linkingAssetToSBPreviewImport: {

plugin/src/plugins/AssetsRegistryPlugin.tsx

@@ -62,7 +62,7 @@ export class AssetsRegistryPlugin
         CopyToClipboardAsset,
         CodeEditorAsset,
         ToggleAsset,
-        RadioGroupAsset,
+        RadioGroupAsset
       ]
     >
 {

pnpm-lock.yaml

@@ -27,7 +27,6 @@ js_pipeline(
         "//:node_modules/@player-ui/types",
         "//:node_modules/@types/react",
         "//:node_modules/dlv",
-        "//:node_modules/eslint-plugin-storybook",
         "//:node_modules/framer-motion",
         "//:node_modules/react",
     ],

radio-group/BUILD

@@ -93,6 +93,3 @@ export class AssetsRegistryPlugin implements ReactPlayerPlugin, ExtendedPlayerPl
 }
 ```
 
-## Contributing
-
-We welcome contributions to `@devtools-ui/radio-group`! Please see the [CONTRIBUTING.md](TODO: link to the file) file for more information on how to contribute.

radio-group/README.md

@@ -17,5 +17,5 @@ export const RadioGroupComponent = (props: TransformedRadioGroup) => {
   const { children, ...rest } = useRadioGroupProps(props);
 
   // Replace with the Elements that render your component:
-  return <div {...rest}>{children}</div>;
+  return <div {...rest}>Something</div>;
 };

radio-group/src/component/index.tsx

@@ -9,25 +9,18 @@ import {
 import { RadioGroup } from "../";
 
 describe("DSL: RadioGroup", () => {
-  test("Renders radioGroup", async () => {
+  test("Renders radioGroup with a couple options", async () => {
     const rendered = await render(
-      <RadioGroup exp={e`my_expression`} binding={b`my_binding`}>
-        <RadioGroup.Label>
-          <Asset type="text">
-            <property name="value">Label</property>
-          </Asset>
-        </RadioGroup.Label>
-        <RadioGroup.Value>
-          <Asset type="text">
-            <property name="value">Value</property>
-          </Asset>
-        </RadioGroup.Value>
+      <RadioGroup binding={b`my_binding`}>
+        <RadioGroup.Label>RadioGroup Label</RadioGroup.Label>
         <RadioGroup.Values>
           <Asset type="text">
-            <property name="value">Test 1</property>
+            <property name="value">Option 1</property>
+            <property name="radio">opt1</property>
           </Asset>
           <Asset type="text">
-            <property name="value">Test 2</property>
+            <property name="value">Option 2</property>
+            <property name="radio">opt2</property>
           </Asset>
         </RadioGroup.Values>
       </RadioGroup>
@@ -36,33 +29,29 @@ describe("DSL: RadioGroup", () => {
     expect(rendered.jsonValue).toStrictEqual({
       id: "root",
       type: "radio-group",
+      binding: "my_binding",
       label: {
         asset: {
           id: "label",
           type: "text",
-          value: "Label",
-        },
-      },
-      value: {
-        asset: {
-          id: "value",
-          type: "text",
-          value: "Value",
+          value: "RadioGroup Label",
         },
       },
       values: [
         {
           asset: {
             id: "values-0",
             type: "text",
-            value: "Test 1",
+            value: "Option 1",
+            radio: "opt1",
           },
         },
         {
           asset: {
             id: "values-1",
             type: "text",
-            value: "Test 2",
+            value: "Option 2",
+            radio: "opt2",
           },
         },
       ],

radio-group/src/dsl/__tests__/index.test.tsx

@@ -10,10 +10,6 @@ import { Collection } from "@devtools-ui/collection";
 import { Text } from "@devtools-ui/text";
 import type { RadioGroupAsset } from "../types";
 
-/**
-* Defines the component DSL representation, so users of this plugin can author Player-UI
-* content leveraging .jsx/.tsx syntax.
-*/
 export const RadioGroup = (
   props: Omit<AssetPropsWithChildren<RadioGroupAsset>, "binding"> & {
     /** The binding as a tagged template instance */
@@ -46,19 +42,10 @@ RadioGroup.Label = createSlot({
   wrapInAsset: true,
 });
 
-RadioGroup.Value = createSlot({
-  name: "value",
-  TextComp: Text,
-  CollectionComp,
-  isArray: false,
-  wrapInAsset: true,
-});
-
 RadioGroup.Values = createSlot({
   name: "values",
   TextComp: Text,
   CollectionComp,
   isArray: true,
   wrapInAsset: true,
 });
-

radio-group/src/dsl/index.tsx

@@ -1,19 +1,20 @@
 import type { TransformFunction } from "@player-ui/player";
 import { RadioGroupAsset, TransformedRadioGroup } from "../types";
 
-/**
- * Platform-agnostic transform function that takes the properties we get from the Player Content (DSL > JSON)
- * and embeds Player state and methods:
- */
-export const radioGroupTransform: TransformFunction<RadioGroupAsset, TransformedRadioGroup> = (
-  asset,
-  options
-) => {
-  // GET/SET properties from the data model and/or embed Player methods
-  // e.g.: options.data.model.get(asset.binding, { includeInvalid: true, formatted: false });
-  // e.g.: options.evaluate(asset.exp);
-  // e.g.: options.transition?.(asset.value, { force: skipValidation });
+export const radioGroupTransform: TransformFunction<
+  RadioGroupAsset,
+  TransformedRadioGroup
+> = (asset, options) => {
   return {
     ...asset,
+    setRadio(val) {
+      if (asset.binding === undefined) {
+        return;
+      }
+
+      return options.data.model.set([[asset.binding, val]]);
+    },
+    value:
+      asset.binding === undefined ? "" : options.data.model.get(asset.binding),
   };
 };

radio-group/src/transform/index.ts

@@ -1,20 +1,19 @@
-import type { Asset } from "@player-ui/types";
+import type { Asset, AssetWrapper } from "@player-ui/types";
+import type { TextAsset } from "@devtools-ui/text";
 
 export interface RadioGroupAsset extends Asset<"radio-group"> {
-  // DSL properties
-  // /** Value */
-  // value?: AssetWrapper;
-  // /** list of assets in the collection */
-  // values?: Array<AssetWrapper>;
-  // /** Label */
-  // label?: AssetWrapper<TextAsset>;
-  // /** Callable function that allow dynamic behavior for the view */
-  // exp?: Expression;
-  // /** Dot sepparated string Representation of a path within the data-model */
-  // binding?: string;
+  /** list of assets in the collection */
+  values?: Array<AssetWrapper>;
+  /** Label */
+  label?: AssetWrapper<TextAsset>;
+  /** Dot sepparated string Representation of a path within the data-model */
+  binding?: string;
 }
 
 /** A stateful instance of the asset */
 export interface TransformedRadioGroup extends RadioGroupAsset {
-  // The result of the transformation (transform/index.ts)
+  /** A function to commit the new value to the data-model */
+  setRadio: (newValue: boolean) => void;
+  /** The current value of the radio group from the data-model */
+  value: string;
 }