fix: address reserved keywords in bindings

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

@@ -537,6 +537,39 @@ export default function ComponentWithAuthEventBinding(
 "
 `;
 
+exports[`amplify render tests bindings data supports bindings with reserved keywords 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { Class } from \\"../models\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Text, TextProps } from \\"@aws-amplify/ui-react\\";
+
+export type DataBindingNamedClassProps = React.PropsWithChildren<
+  Partial<TextProps> & {
+    class?: Class;
+  } & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function DataBindingNamedClass(
+  props: DataBindingNamedClassProps
+): React.ReactElement {
+  const { class: classProp, overrides, ...rest } = props;
+  return (
+    /* @ts-ignore: TS2322 */
+    <Text
+      children={classProp?.name}
+      {...rest}
+      {...getOverrideProps(overrides, \\"DataBindingNamedClass\\")}
+    ></Text>
+  );
+}
+"
+`;
+
 exports[`amplify render tests collection should render collection with data binding 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

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

@@ -567,5 +567,11 @@ describe('amplify render tests', () => {
         ).toMatchSnapshot();
       });
     });
+
+    describe('data', () => {
+      it('supports bindings with reserved keywords', () => {
+        expect(generateWithAmplifyRenderer('bindings/data/dataBindingNamedClass').componentText).toMatchSnapshot();
+      });
+    });
   });
 });

packages/codegen-ui-react/lib/keywords.ts

@@ -0,0 +1,60 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+export default new Set([
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'export',
+  'extends',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'import',
+  'in',
+  'instanceof',
+  'new',
+  'return',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
+  'implements',
+  'interface',
+  'let',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'static',
+  'yield',
+  'await',
+]);

packages/codegen-ui-react/lib/react-component-render-helper.ts

@@ -54,6 +54,7 @@ import {
 import { ImportCollection, ImportSource } from './imports';
 import { json, jsonToLiteral } from './react-studio-template-renderer-helper';
 import { getChildPropMappingForComponentName } from './workflow/utils';
+import keywords from './keywords';
 
 export function getFixedComponentPropValueExpression(prop: FixedStudioComponentProperty): StringLiteral {
   return factory.createStringLiteral(prop.value.toString(), true);
@@ -115,10 +116,14 @@ export function isActionEvent(event: StudioComponentEvent): event is ActionStudi
  * case: no field =>  <prop.bindingProperties.property>
  */
 export function buildBindingExpression(prop: BoundStudioComponentProperty): Expression {
+  const {
+    bindingProperties: { property },
+  } = prop;
+  const identifier = factory.createIdentifier(keywords.has(property) ? `${property}Prop` : property);
   return prop.bindingProperties.field === undefined
-    ? factory.createIdentifier(prop.bindingProperties.property)
+    ? identifier
     : factory.createPropertyAccessChain(
-        factory.createIdentifier(prop.bindingProperties.property),
+        identifier,
         factory.createToken(SyntaxKind.QuestionDotToken),
         prop.bindingProperties.field,
       );

packages/codegen-ui-react/lib/react-studio-template-renderer.ts

@@ -79,6 +79,7 @@ import {
   buildStateStatements,
   buildUseEffectStatements,
 } from './workflow';
+import keywords from './keywords';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
   string,
@@ -511,10 +512,12 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
         const [propName, binding] = entry;
         if (isSimplePropertyBinding(binding) || isDataPropertyBinding(binding) || isEventPropertyBinding(binding)) {
           const usesHook = bindingPropertyUsesHook(binding);
+          const shouldAssignToDifferentName = usesHook || keywords.has(propName);
+          const propVariableName = shouldAssignToDifferentName ? `${propName}Prop` : propName;
           const bindingElement = factory.createBindingElement(
             undefined,
-            usesHook ? factory.createIdentifier(propName) : undefined,
-            factory.createIdentifier(usesHook ? `${propName}Prop` : propName),
+            shouldAssignToDifferentName ? factory.createIdentifier(propName) : undefined,
+            factory.createIdentifier(propVariableName),
             isSimplePropertyBinding(binding) ? this.getDefaultValue(binding) : undefined,
           );
           elements.push(bindingElement);

packages/codegen-ui/example-schemas/bindings/data/dataBindingNamedClass.json

@@ -0,0 +1,22 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Text",
+  "name": "DataBindingNamedClass",
+  "bindingProperties": {
+    "class": {
+      "type": "Data",
+      "bindingProperties": {
+        "model": "Class"
+      }
+    }
+  },
+  "properties": {
+    "label": {
+      "bindingProperties": {
+        "property": "class",
+        "field": "name"
+      }
+    }
+  },
+  "schemaVersion": "1.0"
+}