feat: replace non-alpha characters with description (#440)

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

@@ -6056,7 +6056,7 @@ export default function CardA(props: CardAProps): React.ReactElement {
   const { listing, overrides, ...rest } = props;
   const [classicLongSleeveTShirtChildren, setClassicLongSleeveTShirtChildren] =
     useStateMutationAction(\\"Classic Long Sleeve T-Shirt\\");
-  const Click = () => {
+  const dollarNineNineClick = () => {
     setClassicLongSleeveTShirtChildren(listing?.titl);
   };
   return (
@@ -6124,7 +6124,7 @@ export default function CardA(props: CardAProps): React.ReactElement {
           whiteSpace=\\"pre-wrap\\"
           children=\\"$99\\"
           onClick={() => {
-            Click();
+            dollarNineNineClick();
           }}
           {...getOverrideProps(overrides, \\"$99\\")}
         ></Text>
@@ -6185,7 +6185,7 @@ export default function CardA(props) {
   var _a = useStateMutationAction(\\"Classic Long Sleeve T-Shirt\\"),
     classicLongSleeveTShirtChildren = _a[0],
     setClassicLongSleeveTShirtChildren = _a[1];
-  var Click = function () {
+  var dollarNineNineClick = function () {
     setClassicLongSleeveTShirtChildren(
       listing === null || listing === void 0 ? void 0 : listing.titl
     );
@@ -6274,7 +6274,7 @@ export default function CardA(props) {
             whiteSpace: \\"pre-wrap\\",
             children: \\"$99\\",
             onClick: function () {
-              Click();
+              dollarNineNineClick();
             },
           },
           getOverrideProps(overrides, \\"$99\\")
@@ -6536,14 +6536,14 @@ export default function InvalidNameForMethod(
   props: InvalidNameForMethodProps
 ): React.ReactElement {
   const { overrides, ...rest } = props;
-  const loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreClick =
+  const loremipsumdolorsitametCommaconsecteturadipiscingelitCommaseddoeiusmodtemporincididuntutlaborePeriodClick =
     useNavigateAction({ type: \\"url\\", url: \\"emails\\" });
   return (
     /* @ts-ignore: TS2322 */
     <Flex {...rest} {...getOverrideProps(overrides, \\"InvalidNameForMethod\\")}>
       <Text
         onClick={() => {
-          loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreClick();
+          loremipsumdolorsitametCommaconsecteturadipiscingelitCommaseddoeiusmodtemporincididuntutlaborePeriodClick();
         }}
         {...getOverrideProps(
           overrides,

packages/codegen-ui-react/lib/__tests__/workflow/action.test.ts

@@ -26,7 +26,9 @@ describe('getActionIdentifier', () => {
         '“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.”',
         'click',
       ),
-    ).toMatch('loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreClick');
+    ).toMatch(
+      'loremipsumdolorsitametCommaconsecteturadipiscingelitCommaseddoeiusmodtemporincididuntutlaborePeriodClick',
+    );
   });
 
   test('generates legal bindings for names starting with a number', () => {
@@ -35,6 +37,8 @@ describe('getActionIdentifier', () => {
         '2“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.”',
         'click',
       ),
-    ).toMatch('loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreClick');
+    ).toMatch(
+      'twoLoremipsumdolorsitametCommaconsecteturadipiscingelitCommaseddoeiusmodtemporincididuntutlaborePeriodClick',
+    );
   });
 });

packages/codegen-ui-react/lib/name-replacements.ts

@@ -0,0 +1,59 @@
+/*
+  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.
+ */
+
+// List of character and description source https://www.ascii-code.com/
+const nameReplacements: [RegExp, string][] = [
+  [/ /g, ''], // remove spaces
+  [/!/g, 'ExclamationMark'],
+  [/"/g, 'DoubleQuotes'],
+  [/#/g, 'Nmber'],
+  [/\$/g, 'Dollar'],
+  [/&/g, 'Ampersand'],
+  [/'/g, 'SingleQuote'],
+  [/\(/g, 'OpenParenthesis'],
+  [/\)/g, 'CloseParenthesis'],
+  [/\*/g, 'Asterisk'],
+  [/\+/g, 'Plus'],
+  [/,/g, 'Comma'],
+  [/-/g, ''], // remove hypens
+  [/\./g, 'Period'],
+  [/\//g, 'Slash'],
+  [/0/g, 'Zero'],
+  [/1/g, 'One'],
+  [/2/g, 'Two'],
+  [/3/g, 'Three'],
+  [/4/g, 'Four'],
+  [/5/g, 'Five'],
+  [/6/g, 'Six'],
+  [/7/g, 'Seven'],
+  [/8/g, 'Eight'],
+  [/9/g, 'Nine'],
+  [/:/g, 'Colon'],
+  [/;/g, 'Semicolon'],
+  [/</g, 'LessThan'],
+  [/=/g, 'Equal'],
+  [/>/g, 'GreaterThan'],
+  [/\?/g, 'QuestionMark'],
+  [/@/g, 'AtSymbol'],
+  [/\[/g, 'OpeningBracket'],
+  [/\]/g, 'ClosingBracket'],
+  [/\^/g, 'Caret'],
+  [/_/g, 'UnderScore'], // remove underscores
+  [/`/g, 'GraveAccent'],
+  [/~/g, 'Tilde'],
+];
+
+export default nameReplacements;

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 nameReplacements from './name-replacements';
 
 export function getFixedComponentPropValueExpression(prop: FixedStudioComponentProperty): StringLiteral {
   return factory.createStringLiteral(prop.value.toString(), true);
@@ -607,7 +608,9 @@ export function addBindingPropertiesImports(
 // Scrub all non-alphanum characters, and any leading numbers so we can generate a legal
 // variable name.
 export function sanitizeName(componentName: string): string {
-  return componentName.replace(/[^a-zA-Z0-9]/g, '').replace(/^[0-9]*/, '');
+  return nameReplacements
+    .reduce((name, [character, replacement]) => name.replace(character, replacement), componentName)
+    .replace(/[^a-zA-Z]/g, ''); // remove any stray non alpha characters
 }
 
 export function getStateName(stateReference: StateStudioComponentProperty): string {