fix: proper use of type from ui builder backend

aws-amplify · Dec 21, 2021 · 018f0e5 · 018f0e5
1 parent ce2c57c
commit 018f0e5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -76,6 +76,7 @@ export default function CustomButton(
     <Button
       color=\\"#ff0000\\"
       width={20}
+      isDisabled={true}
       {...rest}
       {...getOverrideProps(overrides, \\"Button\\")}
     ></Button>

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-json/buttonGolden.json b/packages/codegen-ui-react/lib/__tests__/studio-ui-json/buttonGolden.json
@@ -9,6 +9,10 @@
     "width": {
       "type": "Number",
       "value": "20"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "value": "true"
     }
   }
 }
diff --git a/packages/codegen-ui-react/lib/react-component-render-helper.ts b/packages/codegen-ui-react/lib/react-component-render-helper.ts
@@ -146,29 +146,32 @@ export function buildFixedJsxExpression(prop: FixedStudioComponentProperty): Str
     case 'string':
       switch (type) {
         case undefined:
-          return factory.createStringLiteral(value as string);
         case 'String':
+        case 'string':
           return factory.createStringLiteral(value as string);
-        case 'Object':
-        case 'Number':
-        case 'Boolean':
+        default:
           try {
             const parsedValue = JSON.parse(value as string);
-
-            if (typeof parsedValue === 'number') {
-              return factory.createJsxExpression(undefined, factory.createNumericLiteral(parsedValue, undefined));
+            if (type && typeof parsedValue !== type.toLowerCase()) {
+              throw new Error(`Parsed value type "${typeof parsedValue}" and type "${type}" mismatch`);
             }
-            if (typeof parsedValue === 'boolean') {
-              return factory.createJsxExpression(undefined, parsedValue ? factory.createTrue() : factory.createFalse());
+            switch (typeof parsedValue) {
+              case 'number':
+                return factory.createJsxExpression(undefined, factory.createNumericLiteral(parsedValue, undefined));
+              case 'boolean':
+                return factory.createJsxExpression(
+                  undefined,
+                  parsedValue ? factory.createTrue() : factory.createFalse(),
+                );
+              // object, array, and null
+              case 'object':
+                return factory.createJsxExpression(undefined, jsonToLiteral(parsedValue));
+              default:
+                throw new Error(`Unsupported value type ${parsedValue} for "${value}"`);
             }
-            // object, array, and null
-            if (typeof parsedValue === 'object') {
-              return factory.createJsxExpression(undefined, jsonToLiteral(parsedValue));
-            }
-          } catch {} // eslint-disable-line no-empty
-          throw new Error(`Failed to parse value "${value}" as type ${type}`);
-        default:
-          throw new Error(`Invalid type ${type} for "${value}"`);
+          } catch {
+            throw new Error(`Failed to parse value "${value}" as type ${type}`);
+          }
       }
     default:
       throw new Error(`Invalid type ${typeof value} for "${value}"`);