fix: adding support for additional component types for string and tex…

…t types
aws-amplify · Oct 21, 2021 · 53d5537 · 53d5537
1 parent d765667
commit 53d5537
Show file tree

Hide file tree

Showing 13 changed files with 255 additions and 56 deletions.
diff --git a/packages/amplify-ui-codegen-schema/package-lock.json b/packages/amplify-ui-codegen-schema/package-lock.json
diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -100,7 +100,7 @@ export default function CustomText(props: CustomTextProps): React.ReactElement {
       {...props}
       {...getOverrideProps(overrides, \\"Text\\")}
     >
-      Text Value
+      {\\"Text Value\\"}
     </Text>
   );
 }
@@ -592,7 +592,7 @@ export default function SectionHeading(
           fontWeight=\\"300\\"
           {...getOverrideProps(overrides, \\"Flex.Flex.Text\\")}
         >
-          Heading 2
+          {\\"Heading 2\\"}
         </Text>
       </Flex>
       <Text
@@ -604,14 +604,43 @@ export default function SectionHeading(
         fontWeight=\\"400\\"
         {...getOverrideProps(overrides, \\"Flex.Text\\")}
       >
-        subtitle
+        {\\"subtitle\\"}
       </Text>
     </Flex>
   );
 }
 "
 `;
 
+exports[`amplify render tests component with data binding should render with data binding in child elements 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  Text,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type ChildComponentWithDataBindingProps = {
+  textValue?: String;
+} & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function ChildComponentWithDataBinding(
+  props: ChildComponentWithDataBindingProps
+): React.ReactElement {
+  const { textValue } = props;
+  const overrides = { ...props.overrides };
+  return (
+    <Button {...props} {...getOverrideProps(overrides, \\"Button\\")}>
+      <Text {...getOverrideProps(overrides, \\"Button.Text\\")}>{textValue}</Text>
+    </Button>
+  );
+}
+"
+`;
+
 exports[`amplify render tests component with variants should render variants with options provided 1`] = `
 Object {
   "componentText": "/* eslint-disable */
@@ -661,6 +690,66 @@ export default function CustomButton(
 }
 `;
 
+exports[`amplify render tests concat and conditional transform should render child component with data bound concatenation 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  Text,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type ChildComponentWithDataBoundConcatenationProps = {
+  textValue?: String;
+} & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function ChildComponentWithDataBoundConcatenation(
+  props: ChildComponentWithDataBoundConcatenationProps
+): React.ReactElement {
+  const { textValue } = props;
+  const overrides = { ...props.overrides };
+  return (
+    <Button {...props} {...getOverrideProps(overrides, \\"Button\\")}>
+      <Text {...getOverrideProps(overrides, \\"Button.Text\\")}>{\`\${
+        buttonUser?.firstname || \\"Harrison\\"
+      }\${\\" \\"}\${buttonUser?.lastname || \\"Spain\\"}\`}</Text>
+    </Button>
+  );
+}
+"
+`;
+
+exports[`amplify render tests concat and conditional transform should render child component with static concatenation 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  Text,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type ChildComponentWithStaticConcatenationProps = {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function ChildComponentWithStaticConcatenation(
+  props: ChildComponentWithStaticConcatenationProps
+): React.ReactElement {
+  const {} = props;
+  const overrides = { ...props.overrides };
+  return (
+    <Button {...props} {...getOverrideProps(overrides, \\"Button\\")}>
+      <Text
+        {...getOverrideProps(overrides, \\"Button.Text\\")}
+      >{\`\${\\"Concatenate\\"}\${\\" \\"}\${\\"Me!\\"}\`}</Text>
+    </Button>
+  );
+}
+"
+`;
+
 exports[`amplify render tests concat and conditional transform should render component with concatenation prop 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

diff --git a/...en-react/lib/__tests__/amplify-ui-renderers/__snapshots__/component-renderer.test.ts.snap b/...en-react/lib/__tests__/amplify-ui-renderers/__snapshots__/component-renderer.test.ts.snap
@@ -18,8 +18,8 @@ exports[`Component Renderers FlexRenderer 1`] = `"<Flex {...props} {...getOverri
 
 exports[`Component Renderers ImageRenderer 1`] = `"<Image {...props} {...getOverrideProps(overrides, \\"Image\\")}></Image>"`;
 
-exports[`Component Renderers StringRenderer basic 1`] = `"<>test</>"`;
+exports[`Component Renderers StringRenderer basic 1`] = `"<>{\\"test\\"}</>"`;
 
 exports[`Component Renderers StringRenderer missing props 1`] = `"Failed to render String - Unexpected component structure"`;
 
-exports[`Component Renderers TextRenderer 1`] = `"<Text {...props} {...getOverrideProps(overrides, \\"Text\\")}>test</Text>"`;
+exports[`Component Renderers TextRenderer 1`] = `"<Text {...props} {...getOverrideProps(overrides, \\"Text\\")}>{\\"test\\"}</Text>"`;
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -120,6 +120,11 @@ describe('amplify render tests', () => {
       const generatedCode = generateWithAmplifyRenderer('dataBindingWithoutPredicate');
       expect(generatedCode.componentText).toMatchSnapshot();
     });
+
+    it('should render with data binding in child elements', () => {
+      const generatedCode = generateWithAmplifyRenderer('childComponentWithDataBinding');
+      expect(generatedCode.componentText).toMatchSnapshot();
+    });
   });
 
   describe('collection', () => {
@@ -150,6 +155,16 @@ describe('amplify render tests', () => {
       expect(generatedCode.componentText).toMatchSnapshot();
     });
 
+    it('should render child component with static concatenation', () => {
+      const generatedCode = generateWithAmplifyRenderer('childComponentWithStaticConcatenation');
+      expect(generatedCode.componentText).toMatchSnapshot();
+    });
+
+    it('should render child component with data bound concatenation', () => {
+      const generatedCode = generateWithAmplifyRenderer('childComponentWithDataBoundConcatenation');
+      expect(generatedCode.componentText).toMatchSnapshot();
+    });
+
     it('should render component with conditional prop', () => {
       const generatedCode = generateWithAmplifyRenderer('conditionalTest');
       expect(generatedCode.componentText).toMatchSnapshot();

diff --git a/...s/studio-ui-codegen-react/lib/__tests__/studio-ui-json/childComponentWithDataBinding.json b/...s/studio-ui-codegen-react/lib/__tests__/studio-ui-json/childComponentWithDataBinding.json
@@ -0,0 +1,24 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Button",
+  "name": "ChildComponentWithDataBinding",
+  "bindingProperties": {
+    "textValue": {
+      "type": "String"
+    }
+  },
+  "properties": {},
+  "children": [
+    {
+      "componentType": "Text",
+      "name": "TextWithDataBinding",
+      "properties": {
+        "value": {
+          "bindingProperties": {
+            "property": "textValue"
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/...-codegen-react/lib/__tests__/studio-ui-json/childComponentWithDataBoundConcatenation.json b/...-codegen-react/lib/__tests__/studio-ui-json/childComponentWithDataBoundConcatenation.json
@@ -0,0 +1,40 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Button",
+  "name": "ChildComponentWithDataBoundConcatenation",
+  "bindingProperties": {
+    "textValue": {
+      "type": "String"
+    }
+  },
+  "properties": {},
+  "children": [
+    {
+      "componentType": "Text",
+      "name": "TextWithConcatenation",
+      "properties": {
+        "value": {
+          "concat": [
+            {
+              "bindingProperties": {
+                "property": "buttonUser",
+                "field": "firstname"
+              },
+              "defaultValue": "Harrison"
+            },
+            {
+              "value": " "
+            },
+            {
+              "bindingProperties": {
+                "property": "buttonUser",
+                "field": "lastname"
+              },
+              "defaultValue": "Spain"
+            }
+          ]
+        }
+      }
+    }
+  ]
+}
diff --git a/...-ui-codegen-react/lib/__tests__/studio-ui-json/childComponentWithStaticConcatenation.json b/...-ui-codegen-react/lib/__tests__/studio-ui-json/childComponentWithStaticConcatenation.json
@@ -0,0 +1,28 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Button",
+  "name": "ChildComponentWithStaticConcatenation",
+  "bindingProperties": {},
+  "properties": {},
+  "children": [
+    {
+      "componentType": "Text",
+      "name": "TextWithConcatenation",
+      "properties": {
+        "value": {
+          "concat": [
+            {
+              "value": "Concatenate"
+            },
+            {
+              "value": " "
+            },
+            {
+              "value": "Me!"
+            }
+          ]
+        }
+      }
+    }
+  ]
+}
diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/string.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/string.ts
@@ -14,24 +14,16 @@
   limitations under the License.
  */
 import { StudioComponentChild } from '@amzn/amplify-ui-codegen-schema';
-import ts, { JsxFragment } from 'typescript';
+import { factory, JsxChild, JsxFragment } from 'typescript';
+import { buildChildElement } from '../react-component-render-helper';
 
 export default function renderString(component: StudioComponentChild): JsxFragment {
-  const { factory } = ts;
-
-  if ('value' in component.properties) {
-    if ('value' in component.properties.value) {
-      const stringProp = component.properties.value;
-      const { value } = stringProp;
-
-      const element = factory.createJsxFragment(
-        factory.createJsxOpeningFragment(),
-        [factory.createJsxText(value.toString())],
-        factory.createJsxJsxClosingFragment(),
-      );
-      return element;
-    }
+  if (!('value' in component.properties)) {
+    throw new Error('Failed to render String - Unexpected component structure');
   }
 
-  throw new Error('Failed to render String - Unexpected component structure');
+  const childElement = buildChildElement(component.properties.value);
+  const children: JsxChild[] = childElement ? [childElement] : [];
+
+  return factory.createJsxFragment(factory.createJsxOpeningFragment(), children, factory.createJsxJsxClosingFragment());
 }
diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/text.ts
@@ -14,39 +14,24 @@
   limitations under the License.
  */
 import { TextProps } from '@aws-amplify/ui-react';
-
-import { FixedStudioComponentProperty } from '@amzn/amplify-ui-codegen-schema';
-
-import { factory, JsxElement, JsxChild } from 'typescript';
+import { factory, JsxChild, JsxElement } from 'typescript';
 import { ReactComponentRenderer } from '../react-component-renderer';
-import { isBoundProperty } from '../react-component-render-helper';
+import { buildChildElement } from '../react-component-render-helper';
 
 export default class TextRenderer extends ReactComponentRenderer<TextProps> {
   renderElement(): JsxElement {
     const tagName = 'Text';
 
+    const childElement = buildChildElement(this.component.properties.value);
+    const children: JsxChild[] = childElement ? [childElement] : [];
+
     const element = factory.createJsxElement(
       this.renderOpeningElement(tagName),
-      this.getChildren(),
+      children,
       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(),
-      ),
-    ];
-  }
 }