feat: allow objects to be passed into properties to support paths in …

…icons (#384)
aws-amplify · Feb 7, 2022 · c6c8eb0 · c6c8eb0
1 parent c5d0246
commit c6c8eb0
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 1 deletion.
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
@@ -5627,6 +5627,38 @@ export default function unknown_component_name(
 "
 `;
 
+exports[`amplify render tests primitives Icon 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react/internal\\";
+import { Icon, IconProps } from \\"@aws-amplify/ui-react\\";
+
+export type CustomIconProps = React.PropsWithChildren<
+  Partial<IconProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function CustomIcon(props: CustomIconProps): React.ReactElement {
+  const { overrides, ...rest } = props;
+  return (
+    /* @ts-ignore: TS2322 */
+    <Icon
+      paths={[
+        {
+          d: \\"M18 6V4h2V2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14v-2h-4.03c1.23-.91 2.03-2.36 2.03-4v-5H8v5c0 1.64.81 3.09 2.03 4H6V4h2v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1z\\",
+        },
+      ]}
+      {...rest}
+      {...getOverrideProps(overrides, \\"CustomIcon\\")}
+    ></Icon>
+  );
+}
+"
+`;
+
 exports[`amplify render tests primitives Menu 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

diff --git a/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/codegen-ui-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -489,6 +489,10 @@ describe('amplify render tests', () => {
     test('MenuButton', () => {
       expect(generateWithAmplifyRenderer('primitives/MenuButtonPrimitive').componentText).toMatchSnapshot();
     });
+
+    test('Icon', () => {
+      expect(generateWithAmplifyRenderer('primitives/IconPrimitive').componentText).toMatchSnapshot();
+    });
   });
 
   describe('icon-indices', () => {

diff --git a/packages/codegen-ui-react/lib/react-component-render-helper.ts b/packages/codegen-ui-react/lib/react-component-render-helper.ts
@@ -51,7 +51,7 @@ import {
 } from 'typescript';
 
 import { ImportCollection, ImportSource } from './imports';
-import { jsonToLiteral } from './react-studio-template-renderer-helper';
+import { json, jsonToLiteral } from './react-studio-template-renderer-helper';
 
 export function getFixedComponentPropValueExpression(prop: FixedStudioComponentProperty): StringLiteral {
   return factory.createStringLiteral(prop.value.toString(), true);
@@ -181,6 +181,11 @@ export function buildFixedLiteralExpression(
       return value ? factory.createTrue() : factory.createFalse();
     case 'string':
       return fixedPropertyWithTypeToLiteral(value, type);
+    case 'object':
+      if (value instanceof Date) {
+        throw new Error('Date object is not currently supported for fixed literal expression.');
+      }
+      return jsonToLiteral(value as json);
     default:
       throw new Error(`Invalid type ${typeof value} for "${value}"`);
   }

diff --git a/packages/codegen-ui/example-schemas/primitives/IconPrimitive.json b/packages/codegen-ui/example-schemas/primitives/IconPrimitive.json
@@ -0,0 +1,14 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "Icon",
+  "name": "CustomIcon",
+  "properties": {
+    "paths": {
+      "value": [
+        {
+          "d": "M18 6V4h2V2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14v-2h-4.03c1.23-.91 2.03-2.36 2.03-4v-5H8v5c0 1.64.81 3.09 2.03 4H6V4h2v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1z"
+        }
+      ]
+    }
+  }
+}