feat: add built-in iconset (#219)

Author: Dane Pilcher

.github/workflows/check.yml

@@ -113,4 +113,4 @@ jobs:
           install: false
           start: npm start
           wait-on: 'http://localhost:3000'
-          wait-on-timeout: 180
+          wait-on-timeout: 210

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

@@ -2377,6 +2377,37 @@ export default function SimplePropertyBindingDefaultValue(
 }
 `;
 
+exports[`amplify render tests primitives Built-in Iconset 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  EscapeHatchProps,
+  IconCloud,
+  IconProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+
+export type MyIconCloudProps = React.PropsWithChildren<
+  Partial<IconProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+  }
+>;
+export default function MyIconCloud(
+  props: MyIconCloudProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    /* @ts-ignore: TS2322 */
+    <IconCloud
+      {...rest}
+      {...getOverrideProps(overrides, \\"IconCloud\\")}
+    ></IconCloud>
+  );
+}
+"
+`;
+
 exports[`amplify render tests primitives SliderField 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";

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

@@ -401,5 +401,9 @@ describe('amplify render tests', () => {
     test('SliderField', () => {
       expect(generateWithAmplifyRenderer('primitives/SliderFieldPrimitive').componentText).toMatchSnapshot();
     });
+
+    test('Built-in Iconset', () => {
+      expect(generateWithAmplifyRenderer('builtInIconset').componentText).toMatchSnapshot();
+    });
   });
 });

packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/builtInIconset.json

@@ -0,0 +1,5 @@
+{
+  "componentType": "IconCloud",
+  "name": "MyIconCloud",
+  "properties": {}
+}

packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts

@@ -54,7 +54,7 @@ import {
   VisuallyHiddenProps,
   TextProps,
 } from '@aws-amplify/ui-react';
-import Primitive from '../primitive';
+import Primitive, { isBuiltInIcon } from '../primitive';
 import { ReactStudioTemplateRenderer } from '../react-studio-template-renderer';
 import CustomComponentRenderer from './customComponent';
 import CollectionRenderer from './collection';
@@ -69,6 +69,12 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
     const node = new StudioNode(component, parent);
     const renderChildren = (children: StudioComponentChild[]) => children.map((child) => this.renderJsx(child, node));
 
+    if (isBuiltInIcon(component.componentType)) {
+      return new ReactComponentWithChildrenRenderer<IconProps>(component, this.importCollection, parent).renderElement(
+        renderChildren,
+      );
+    }
+
     // add Primitive in alphabetical order
     switch (component.componentType) {
       case Primitive.Alert:

packages/studio-ui-codegen-react/lib/primitive.ts

@@ -14,6 +14,8 @@
   limitations under the License.
  */
 import { factory, SyntaxKind, TypeParameterDeclaration, TypeNode } from 'typescript';
+// use require style import to get CommonJS version of Amplify UI React
+const AmplifyUI = require('@aws-amplify/ui-react'); // eslint-disable-line @typescript-eslint/no-var-requires
 
 enum Primitive {
   Alert = 'Alert',
@@ -97,3 +99,9 @@ export const PrimitiveTypeParameter: Partial<
     reference: () => [factory.createKeywordTypeNode(SyntaxKind.AnyKeyword)],
   },
 };
+
+export const iconset = new Set(Object.keys(AmplifyUI).filter((name) => name.match(/^Icon\w/)));
+
+export function isBuiltInIcon(componentType: string): boolean {
+  return iconset.has(componentType);
+}

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

@@ -72,7 +72,7 @@ import {
   jsonToLiteral,
   bindingPropertyUsesHook,
 } from './react-studio-template-renderer-helper';
-import Primitive, { isPrimitive, PrimitiveTypeParameter } from './primitive';
+import Primitive, { isPrimitive, PrimitiveTypeParameter, isBuiltInIcon } from './primitive';
 import { RequiredKeys } from './utils/type-utils';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
@@ -316,7 +316,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     const propsType = this.getPropsTypeName(component);
 
     const componentIsPrimitive = isPrimitive(component.componentType);
-    if (componentIsPrimitive) {
+    if (componentIsPrimitive || isBuiltInIcon(component.componentType)) {
       this.importCollection.addImport('@aws-amplify/ui-react', propsType);
     } else {
       this.importCollection.addImport(`./${component.componentType}`, `${component.componentType}Props`);
@@ -1050,6 +1050,9 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
   }
 
   private getPropsTypeName(component: StudioComponent): string {
+    if (isBuiltInIcon(component.componentType)) {
+      return 'IconProps';
+    }
     return `${component.componentType}Props`;
   }