fix: remove text value from props and render bound property (#70)

Resolves #67

packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap

@@ -67,7 +67,6 @@ export default function CustomText(props: CustomTextProps): JSX.Element {
     <Text
       color=\\"#ff0000\\"
       width=\\"20px\\"
-      value=\\"Text Value\\"
       {...props}
       {...getOverrideProps(props.overrides, \\"Text\\")}
     >
@@ -162,6 +161,38 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
 "
 `;
 
+exports[`amplify render tests component with binding should render build property on Text 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  Text,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type TextWithDataBindingProps = {
+  textValue?: String,
+} & {
+  overrides?: EscapeHatchProps | undefined | null,
+};
+export default function TextWithDataBinding(
+  props: TextWithDataBindingProps
+): JSX.Element {
+  const { textValue } = props;
+  return (
+    <Text
+      color=\\"#ff0000\\"
+      width=\\"20px\\"
+      {...props}
+      {...getOverrideProps(props.overrides, \\"Text\\")}
+    >
+      {textValue}
+    </Text>
+  );
+}
+"
+`;
+
 exports[`amplify render tests component with data binding should add model imports 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts

@@ -92,6 +92,13 @@ describe('amplify render tests', () => {
     });
   });
 
+  describe('component with binding', () => {
+    it('should render build property on Text', () => {
+      const generatedCode = generateWithAmplifyRenderer('textWithDataBinding');
+      expect(generatedCode).toMatchSnapshot();
+    });
+  });
+
   describe('custom render config', () => {
     it('should render ES5', () => {
       expect(

packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/textWithDataBinding.json

@@ -0,0 +1,23 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "TextWithDataBinding",
+  "properties": {
+    "color": {
+      "value": "#ff0000"
+    },
+    "width": {
+      "value": "20px"
+    },
+    "value": {
+      "bindingProperties": {
+        "property": "textValue"
+      }
+    }
+  },
+  "bindingProperties": {
+    "textValue": {
+      "type": "String"
+    }
+  }
+}

packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts

@@ -6,22 +6,39 @@ import {
   StudioComponentProperties,
 } from '@amzn/amplify-ui-codegen-schema';
 
-import { factory, JsxElement } from 'typescript';
+import { factory, JsxElement, JsxChild } from 'typescript';
 import { ReactComponentRenderer } from '../react-component-renderer';
+import { isBoundProperty } from '../react-component-render-helper';
 
 export default class TextRenderer extends ReactComponentRenderer<TextProps> {
   renderElement(): JsxElement {
     const tagName = 'Text';
-    const textValue = this.component.properties.value
-      ? (this.component.properties.value as FixedStudioComponentProperty).value ?? ''
-      : '';
+
+    // value should be child of Text, not a prop
+    const { value, ...properties } = this.component.properties;
+
     const element = factory.createJsxElement(
-      this.renderOpeningElement(factory, this.component.properties, tagName),
-      [factory.createJsxText(textValue.toString())],
+      this.renderOpeningElement(factory, properties, tagName),
+      this.getChildren(),
       factory.createJsxClosingElement(factory.createIdentifier(tagName)),
     );
 
     this.importCollection.addImport('@aws-amplify/ui-react', tagName);
     return element;
   }
+
+  getChildren(): JsxChild[] {
+    const { value } = this.component.properties;
+    if (isBoundProperty(value)) {
+      const {
+        bindingProperties: { property },
+      } = value;
+      return [factory.createJsxExpression(undefined, factory.createIdentifier(property))];
+    }
+    return [
+      factory.createJsxText(
+        (value ? (this.component.properties.value as FixedStudioComponentProperty).value ?? '' : '').toString(),
+      ),
+    ];
+  }
 }

packages/test-generator/lib/index.ts

@@ -9,3 +9,4 @@ export { default as SampleCodeSnippet } from './sampleCodeSnippet.json';
 export { default as TextGolden } from './textGolden.json';
 export { default as CollectionWithBinding } from './collectionWithBinding.json';
 export { default as ComponentWithDataBinding } from './componentWithDataBinding.json';
+export { default as TextWithDataBinding } from './textWithDataBinding.json';

packages/test-generator/lib/textWithDataBinding.json

@@ -0,0 +1,23 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "TextWithDataBinding",
+  "properties": {
+    "color": {
+      "value": "#ff0000"
+    },
+    "width": {
+      "value": "20px"
+    },
+    "value": {
+      "bindingProperties": {
+        "property": "textValue"
+      }
+    }
+  },
+  "bindingProperties": {
+    "textValue": {
+      "type": "String"
+    }
+  }
+}