fix: convert built-in iconset names to pascal case (#253)

Author: Dane Pilcher

CONTRIBUTING.md

@@ -89,4 +89,4 @@ There are 3 keys steps, first you need to create a new tagged release version of
 ### Icons
 
 The built-in iconset is genereted with `packages/scripts/generateBuiltInIconset.js`.
-When icons are added or removed from `@aws-amplify/ui-react` run the script to update the icons supported in codegen.
+When icons are added or removed from `@aws-amplify/ui-react` run `npm run iconset` from the root of the repo to update the icons supported in codegen.

package.json

@@ -24,7 +24,8 @@
     "integ:templates": "./scripts/integ-templates.sh",
     "integ:templates:watch": "nodemon --watch packages/test-generator/integration-test-templates/ --watch packages/test-generator/lib -e tsx,ts,js,json --exec 'npm run integ:templates'",
     "integ:test": "./scripts/integ-test.sh",
-    "integ:clean": "npx rimraf packages/integration-test"
+    "integ:clean": "npx rimraf packages/integration-test",
+    "iconset": "lerna run iconset"
   },
   "files": [],
   "devDependencies": {

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

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

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

@@ -1,5 +1,12 @@
 {
-  "componentType": "IconCloud",
-  "name": "MyIconCloud",
-  "properties": {}
+  "componentType": "View",
+  "name": "MyIcons",
+  "properties": {},
+  "children": [{
+    "componentType": "IconCloud",
+    "properties": {}
+  }, {
+    "componentType": "IconBrightness1",
+    "properties": {}
+  }]
 }

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

@@ -54,6 +54,7 @@ import {
   TextProps,
 } from '@aws-amplify/ui-react';
 import Primitive, { isBuiltInIcon } from '../primitive';
+import { iconsetPascalNameMapping } from '../iconset';
 import { ReactStudioTemplateRenderer } from '../react-studio-template-renderer';
 import CustomComponentRenderer from './customComponent';
 import CollectionRenderer from './collection';
@@ -69,9 +70,14 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
     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,
-      );
+      return new ReactComponentWithChildrenRenderer<IconProps>(
+        {
+          ...component,
+          componentType: iconsetPascalNameMapping.get(component.componentType) || component.componentType,
+        },
+        this.importCollection,
+        parent,
+      ).renderElement(renderChildren);
     }
 
     // add Primitive in alphabetical order

packages/codegen-ui-react/lib/iconset.ts

@@ -166,13 +166,13 @@ export default new Set([
   'IconBrightnessHigh',
   'IconBrightnessLow',
   'IconBrightnessMedium',
-  'IconBrightness_1',
-  'IconBrightness_2',
-  'IconBrightness_3',
-  'IconBrightness_4',
-  'IconBrightness_5',
-  'IconBrightness_6',
-  'IconBrightness_7',
+  'IconBrightness1',
+  'IconBrightness2',
+  'IconBrightness3',
+  'IconBrightness4',
+  'IconBrightness5',
+  'IconBrightness6',
+  'IconBrightness7',
   'IconBrokenImage',
   'IconBrowserNotSupported',
   'IconBrush',
@@ -292,10 +292,10 @@ export default new Set([
   'IconCropPortrait',
   'IconCropRotate',
   'IconCropSquare',
-  'IconCrop_16_9',
-  'IconCrop_3_2',
-  'IconCrop_5_4',
-  'IconCrop_7_5',
+  'IconCrop169',
+  'IconCrop32',
+  'IconCrop54',
+  'IconCrop75',
   'IconDashboard',
   'IconDataUsage',
   'IconDateRange',
@@ -407,10 +407,10 @@ export default new Set([
   'IconExplore',
   'IconExploreOff',
   'IconExposure',
-  'IconExposureNeg_1',
-  'IconExposureNeg_2',
-  'IconExposurePlus_1',
-  'IconExposurePlus_2',
+  'IconExposureNeg1',
+  'IconExposureNeg2',
+  'IconExposurePlus1',
+  'IconExposurePlus2',
   'IconExposureZero',
   'IconExtension',
   'IconFace',
@@ -444,16 +444,16 @@ export default new Set([
   'IconFilterNone',
   'IconFilterTiltShift',
   'IconFilterVintage',
-  'IconFilter_1',
-  'IconFilter_2',
-  'IconFilter_3',
-  'IconFilter_4',
-  'IconFilter_5',
-  'IconFilter_6',
-  'IconFilter_7',
-  'IconFilter_8',
-  'IconFilter_9',
-  'IconFilter_9Plus',
+  'IconFilter1',
+  'IconFilter2',
+  'IconFilter3',
+  'IconFilter4',
+  'IconFilter5',
+  'IconFilter6',
+  'IconFilter7',
+  'IconFilter8',
+  'IconFilter9',
+  'IconFilter9Plus',
   'IconFindInPage',
   'IconFindReplace',
   'IconFingerprint',
@@ -507,9 +507,9 @@ export default new Set([
   'IconForum',
   'IconForward',
   'IconForwardToInbox',
-  'IconForward_10',
-  'IconForward_30',
-  'IconForward_5',
+  'IconForward10',
+  'IconForward30',
+  'IconForward5',
   'IconFoundation',
   'IconFreeBreakfast',
   'IconFullscreen',
@@ -691,10 +691,10 @@ export default new Set([
   'IconLooks',
   'IconLooksOne',
   'IconLooksTwo',
-  'IconLooks_3',
-  'IconLooks_4',
-  'IconLooks_5',
-  'IconLooks_6',
+  'IconLooks3',
+  'IconLooks4',
+  'IconLooks5',
+  'IconLooks6',
   'IconLoop',
   'IconLoupe',
   'IconLowPriority',
@@ -854,13 +854,13 @@ export default new Set([
   'IconPermScanWifi',
   'IconPerson',
   'IconPersonAdd',
-  'IconPersonAddAlt_1',
+  'IconPersonAddAlt1',
   'IconPersonAddDisabled',
   'IconPersonOutline',
   'IconPersonPin',
   'IconPersonPinCircle',
   'IconPersonRemove',
-  'IconPersonRemoveAlt_1',
+  'IconPersonRemoveAlt1',
   'IconPersonSearch',
   'IconPersonalVideo',
   'IconPestControl',
@@ -966,9 +966,9 @@ export default new Set([
   'IconRepeat',
   'IconRepeatOne',
   'IconReplay',
-  'IconReplay_10',
-  'IconReplay_30',
-  'IconReplay_5',
+  'IconReplay10',
+  'IconReplay30',
+  'IconReplay5',
   'IconReply',
   'IconReplyAll',
   'IconReport',
@@ -989,7 +989,7 @@ export default new Set([
   'IconRoomService',
   'IconRotateLeft',
   'IconRotateRight',
-  'IconRotate_90DegreesCcw',
+  'IconRotate90DegreesCcw',
   'IconRoundedCorner',
   'IconRouter',
   'IconRowing',
@@ -1061,14 +1061,14 @@ export default new Set([
   'IconShutterSpeed',
   'IconSick',
   'IconSignalCellularAlt',
-  'IconSignalCellularConnectedNoInternet_4Bar',
+  'IconSignalCellularConnectedNoInternet4Bar',
   'IconSignalCellularNoSim',
   'IconSignalCellularNull',
   'IconSignalCellularOff',
-  'IconSignalCellular_4Bar',
+  'IconSignalCellular4Bar',
   'IconSignalWifiOff',
-  'IconSignalWifi_4Bar',
-  'IconSignalWifi_4BarLock',
+  'IconSignalWifi4Bar',
+  'IconSignalWifi4BarLock',
   'IconSimCard',
   'IconSingleBed',
   'IconSkipNext',
@@ -1131,7 +1131,7 @@ export default new Set([
   'IconStayCurrentPortrait',
   'IconStayPrimaryLandscape',
   'IconStayPrimaryPortrait',
-  'IconStickyNote_2',
+  'IconStickyNote2',
   'IconStop',
   'IconStopCircle',
   'IconStopScreenShare',
@@ -1208,8 +1208,8 @@ export default new Set([
   'IconTimeline',
   'IconTimer',
   'IconTimerOff',
-  'IconTimer_10',
-  'IconTimer_3',
+  'IconTimer10',
+  'IconTimer3',
   'IconTitle',
   'IconToc',
   'IconToday',
@@ -1331,3 +1331,51 @@ export default new Set([
   'IconZoomOut',
   'IconZoomOutMap',
 ]);
+
+export const iconsetPascalNameMapping = new Map([
+  ['IconBrightness1', 'IconBrightness_1'],
+  ['IconBrightness2', 'IconBrightness_2'],
+  ['IconBrightness3', 'IconBrightness_3'],
+  ['IconBrightness4', 'IconBrightness_4'],
+  ['IconBrightness5', 'IconBrightness_5'],
+  ['IconBrightness6', 'IconBrightness_6'],
+  ['IconBrightness7', 'IconBrightness_7'],
+  ['IconCrop169', 'IconCrop_16_9'],
+  ['IconCrop32', 'IconCrop_3_2'],
+  ['IconCrop54', 'IconCrop_5_4'],
+  ['IconCrop75', 'IconCrop_7_5'],
+  ['IconExposureNeg1', 'IconExposureNeg_1'],
+  ['IconExposureNeg2', 'IconExposureNeg_2'],
+  ['IconExposurePlus1', 'IconExposurePlus_1'],
+  ['IconExposurePlus2', 'IconExposurePlus_2'],
+  ['IconFilter1', 'IconFilter_1'],
+  ['IconFilter2', 'IconFilter_2'],
+  ['IconFilter3', 'IconFilter_3'],
+  ['IconFilter4', 'IconFilter_4'],
+  ['IconFilter5', 'IconFilter_5'],
+  ['IconFilter6', 'IconFilter_6'],
+  ['IconFilter7', 'IconFilter_7'],
+  ['IconFilter8', 'IconFilter_8'],
+  ['IconFilter9', 'IconFilter_9'],
+  ['IconFilter9Plus', 'IconFilter_9Plus'],
+  ['IconForward10', 'IconForward_10'],
+  ['IconForward30', 'IconForward_30'],
+  ['IconForward5', 'IconForward_5'],
+  ['IconLooks3', 'IconLooks_3'],
+  ['IconLooks4', 'IconLooks_4'],
+  ['IconLooks5', 'IconLooks_5'],
+  ['IconLooks6', 'IconLooks_6'],
+  ['IconPersonAddAlt1', 'IconPersonAddAlt_1'],
+  ['IconPersonRemoveAlt1', 'IconPersonRemoveAlt_1'],
+  ['IconReplay10', 'IconReplay_10'],
+  ['IconReplay30', 'IconReplay_30'],
+  ['IconReplay5', 'IconReplay_5'],
+  ['IconRotate90DegreesCcw', 'IconRotate_90DegreesCcw'],
+  ['IconSignalCellularConnectedNoInternet4Bar', 'IconSignalCellularConnectedNoInternet_4Bar'],
+  ['IconSignalCellular4Bar', 'IconSignalCellular_4Bar'],
+  ['IconSignalWifi4Bar', 'IconSignalWifi_4Bar'],
+  ['IconSignalWifi4BarLock', 'IconSignalWifi_4BarLock'],
+  ['IconStickyNote2', 'IconStickyNote_2'],
+  ['IconTimer10', 'IconTimer_10'],
+  ['IconTimer3', 'IconTimer_3'],
+]);