fix: ensuring we properly escape object keys with non-alpha characters

aws-amplify · Oct 29, 2021 · 5216eca · 5216eca
1 parent 19f3182
commit 5216eca
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
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
@@ -714,7 +714,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = Partial<ButtonProps> & {
-  variant: \\"primary\\" | \\"secondary\\";
+  variant?: \\"primary\\" | \\"secondary\\";
   size?: \\"large\\";
 } & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -730,7 +730,10 @@ export default function CustomButton(
     },
     {
       variantValues: { variant: \\"secondary\\" },
-      overrides: { Button: { fontSize: \\"40px\\" } },
+      overrides: {
+        Button: { fontSize: \\"40px\\" },
+        \\"Button.Text\\": { fontSize: \\"40px\\" },
+      },
     },
     {
       variantValues: { variant: \\"primary\\", size: \\"large\\" },

diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithVariants.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/componentWithVariants.json
@@ -21,6 +21,9 @@
       "overrides": {
         "Button": {
           "fontSize": "40px"
+        },
+        "Button.Text": {
+          "fontSize": "40px"
         }
       }
     },

diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer-helper.ts
@@ -149,7 +149,7 @@ export function jsonToLiteral(
       // else object
       return factory.createObjectLiteralExpression(
         Object.entries(jsonObject).map(([key, value]) =>
-          factory.createPropertyAssignment(factory.createIdentifier(key), jsonToLiteral(value)),
+          factory.createPropertyAssignment(factory.createStringLiteral(key), jsonToLiteral(value)),
         ),
         false,
       );

diff --git a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
@@ -326,7 +326,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
    * required and optional parameters, then building the appropriate property signature based on that.
    * e.g.
      {
-       variant: "primary" | "secondary",
+       variant?: "primary" | "secondary",
        size?: "large",
      }
    */
@@ -356,7 +356,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
       return factory.createPropertySignature(
         undefined,
         factory.createIdentifier(key),
-        undefined,
+        factory.createToken(ts.SyntaxKind.QuestionToken),
         factory.createUnionTypeNode(valueTypeNodes),
       );
     });

diff --git a/packages/test-generator/lib/components/componentWithVariant.json b/packages/test-generator/lib/components/componentWithVariant.json
@@ -2,7 +2,11 @@
   "id": "1234-5678-9010",
   "componentType": "Button",
   "name": "ComponentWithVariant",
-  "properties": {},
+  "properties": {
+    "children": {
+      "value": "ComponentWithVariant"
+    }
+  },
   "variants": [
     {
       "variantValues": {
@@ -11,6 +15,9 @@
       "overrides": {
         "Button": {
           "fontSize": "12px"
+        },
+        "Button.Text": {
+          "fontSize": "12px"
         }
       }
     },
@@ -35,16 +42,5 @@
         }
       }
     }
-  ],
-  "children": [
-    {
-      "componentType": "String",
-      "name": "String",
-      "properties": {
-        "value": {
-          "value": "ComponentWithVariant"
-        }
-      }
-    }
   ]
 }