From 0806fd1b6fc82e7d904f5d52df8153512a8e4020 Mon Sep 17 00:00:00 2001
From: Dane Pilcher <dppilche@amazon.com>
Date: Fri, 29 Oct 2021 20:25:03 +0000
Subject: [PATCH] fix: import custom component from local directory

Retain unofficial support of all primitives
---
 .../studio-ui-codegen-react.test.ts.snap      | 366 +++++++++++++++---
 .../component-renderer.test.ts.snap           |   2 +-
 .../__tests__/studio-ui-codegen-react.test.ts |  74 ++++
 .../studio-ui-json/custom/customChildren.json |  10 +
 .../studio-ui-json/custom/customParent.json   |  10 +
 .../custom/customParentAndChildren.json       |  10 +
 .../amplify-ui-renderers/amplify-renderer.ts  | 346 ++++++++++++++++-
 .../amplify-ui-renderers/customComponent.ts   |  15 +-
 .../lib/import-collection.ts                  |  27 +-
 .../studio-ui-codegen-react/lib/primitives.ts |  65 ++++
 .../react-component-with-children-renderer.ts |  34 --
 .../react-studio-template-renderer-helper.ts  |   5 +
 .../lib/react-studio-template-renderer.ts     |   7 +-
 .../integration/generated-components-spec.js  |  23 ++
 .../src/ComponentTests.tsx                    |   8 +
 .../basicComponentCustomRating.json           |   3 +-
 .../lib/components/custom/customChildren.json |  14 +
 .../lib/components/custom/customParent.json   |  14 +
 .../custom/customParentAndChildren.json       |  14 +
 .../lib/components/custom/index.ts            |  18 +
 .../test-generator/lib/components/index.ts    |   1 +
 21 files changed, 940 insertions(+), 126 deletions(-)
 create mode 100644 packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customChildren.json
 create mode 100644 packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParent.json
 create mode 100644 packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParentAndChildren.json
 create mode 100644 packages/studio-ui-codegen-react/lib/primitives.ts
 create mode 100644 packages/test-generator/lib/components/custom/customChildren.json
 create mode 100644 packages/test-generator/lib/components/custom/customParent.json
 create mode 100644 packages/test-generator/lib/components/custom/customParentAndChildren.json
 create mode 100644 packages/test-generator/lib/components/custom/index.ts

diff --git a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
index 0e2751f56..2224cf425 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
+++ b/packages/studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -10,7 +10,6 @@ import {
   Flex,
   FlexProps,
   Heading,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
 
@@ -36,7 +35,7 @@ export default function SiteHeader(props: SiteHeaderProps): React.ReactElement {
       <Heading
         level={1}
         children=\\"Title\\"
-        {...findChildOverrides(props.overrides, \\"Heading\\")}
+        {...getOverrideProps(overrides, \\"Flex.Heading\\")}
       ></Heading>
       <Button
         variation=\\"primary\\"
@@ -413,11 +412,10 @@ import {
   Collection,
   CollectionProps,
   EscapeHatchProps,
-  ListingCard,
-  findChildOverrides,
   getOverrideProps,
   useDataStoreBinding,
 } from \\"@aws-amplify/ui-react\\";
+import ListingCard from \\"./ListingCard\\";
 import { UntitledModel } from \\"../models\\";
 
 export type ListingCardCollectionProps = Partial<CollectionProps<any>> & {
@@ -454,7 +452,7 @@ export default function ListingCardCollection(
           marginBottom=\\"0\\"
           marginTop=\\"0\\"
           marginLeft=\\"0\\"
-          {...findChildOverrides(props.overrides, \\"ListingCard\\")}
+          {...getOverrideProps(overrides, \\"Collection.ListingCard\\")}
         ></ListingCard>
       )}
     </Collection>
@@ -470,10 +468,9 @@ import {
   Collection,
   CollectionProps,
   EscapeHatchProps,
-  ListingCard,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import ListingCard from \\"./ListingCard\\";
 
 export type ListingCardCollectionProps = Partial<CollectionProps<any>> & {
   items?: any[];
@@ -495,7 +492,7 @@ export default function ListingCardCollection(
     >
       {(item, index) => (
         <ListingCard
-          {...findChildOverrides(props.overrides, \\"ListingCard\\")}
+          {...getOverrideProps(overrides, \\"Collection.ListingCard\\")}
         ></ListingCard>
       )}
     </Collection>
@@ -540,13 +537,12 @@ exports[`amplify render tests complex component tests should generate a componen
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  CustomButton,
   EscapeHatchProps,
   View,
   ViewProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import CustomButton from \\"./CustomButton\\";
 
 export type ViewWithCustomButtonProps = Partial<ViewProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -561,7 +557,7 @@ export default function ViewWithCustomButton(
       <CustomButton
         color=\\"#ff0000\\"
         width=\\"20px\\"
-        {...findChildOverrides(props.overrides, \\"CustomButton\\")}
+        {...getOverrideProps(overrides, \\"View.CustomButton\\")}
       ></CustomButton>
     </View>
   );
@@ -655,13 +651,12 @@ exports[`amplify render tests complex examples should render complex sample 2 1`
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  Box,
   EscapeHatchProps,
   Flex,
   FlexProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import Box from \\"./Box\\";
 
 export type VerticalFlexFixedProps = Partial<FlexProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -703,7 +698,7 @@ export default function VerticalFlexFixed(
           position=\\"relative\\"
           src=\\"https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!\\"
           height=\\"125px\\"
-          {...findChildOverrides(props.overrides, \\"Box\\")}
+          {...getOverrideProps(overrides, \\"Flex.Flex.Box\\")}
         ></Box>
         <Box
           width=\\"123px\\"
@@ -712,7 +707,7 @@ export default function VerticalFlexFixed(
           position=\\"relative\\"
           src=\\"https://via.placeholder.com/153x289?text=Amplify+Studio+is+Awesome!\\"
           height=\\"122px\\"
-          {...findChildOverrides(props.overrides, \\"Box\\")}
+          {...getOverrideProps(overrides, \\"Flex.Flex.Box\\")}
         ></Box>
       </Flex>
     </Flex>
@@ -725,15 +720,14 @@ exports[`amplify render tests complex examples should render complex sample 3 1`
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  Box,
   EscapeHatchProps,
   Flex,
   FlexProps,
-  ReneButton,
   Text,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import Box from \\"./Box\\";
+import ReneButton from \\"./ReneButton\\";
 
 export type NewComponentProps = Partial<FlexProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -778,12 +772,12 @@ export default function NewComponent(
         position=\\"relative\\"
         src=\\"https://via.placeholder.com/430x452?text=Amplify+Studio+is+Awesome!\\"
         height=\\"69px\\"
-        {...findChildOverrides(props.overrides, \\"Box\\")}
+        {...getOverrideProps(overrides, \\"Flex.Box\\")}
       ></Box>
       <ReneButton
         width=\\"293px\\"
         height=\\"45px\\"
-        {...findChildOverrides(props.overrides, \\"ReneButton\\")}
+        {...getOverrideProps(overrides, \\"Flex.ReneButton\\")}
       ></ReneButton>
       <Text
         padding=\\"0px 0px 0px 0px\\"
@@ -810,15 +804,14 @@ exports[`amplify render tests complex examples should render complex sample 4 1`
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  Box,
   EscapeHatchProps,
   Flex,
   FlexProps,
   Variant,
-  findChildOverrides,
   getOverrideProps,
   getOverridesFromVariants,
 } from \\"@aws-amplify/ui-react\\";
+import Box from \\"./Box\\";
 
 export type GroupReferenceProps = Partial<FlexProps> & {
   colors?: \\"Red/Orange\\";
@@ -903,7 +896,7 @@ export default function GroupReference(
           width=\\"122px\\"
           position=\\"absolute\\"
           height=\\"123px\\"
-          {...findChildOverrides(props.overrides, \\"Box\\")}
+          {...getOverrideProps(overrides, \\"Flex.Flex.Box\\")}
         ></Box>
         <Box
           padding=\\"0px 0px 0px 0px\\"
@@ -914,7 +907,7 @@ export default function GroupReference(
           width=\\"120px\\"
           position=\\"absolute\\"
           height=\\"122px\\"
-          {...findChildOverrides(props.overrides, \\"Box\\")}
+          {...getOverrideProps(overrides, \\"Flex.Flex.Box\\")}
         ></Box>
       </Flex>
     </Flex>
@@ -927,13 +920,12 @@ exports[`amplify render tests complex examples should render complex sample 5 1`
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  Box,
   EscapeHatchProps,
   Flex,
   FlexProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import Box from \\"./Box\\";
 
 export type FlexTestProps = Partial<FlexProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -959,7 +951,7 @@ export default function FlexTest(props: FlexTestProps): React.ReactElement {
         position=\\"relative\\"
         src=\\"https://via.placeholder.com/240x120?text=Amplify+Studio+is+Awesome!\\"
         height=\\"120px\\"
-        {...findChildOverrides(props.overrides, \\"Box\\")}
+        {...getOverrideProps(overrides, \\"Flex.Box\\")}
       ></Box>
       <Box
         width=\\"120px\\"
@@ -968,7 +960,7 @@ export default function FlexTest(props: FlexTestProps): React.ReactElement {
         position=\\"relative\\"
         src=\\"https://via.placeholder.com/240x120?text=Amplify+Studio+is+Awesome!\\"
         height=\\"120px\\"
-        {...findChildOverrides(props.overrides, \\"Box\\")}
+        {...getOverrideProps(overrides, \\"Flex.Box\\")}
       ></Box>
     </Flex>
   );
@@ -1059,14 +1051,12 @@ exports[`amplify render tests complex examples should render complex sample 7 1`
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  Box,
-  BoxProps,
   EscapeHatchProps,
   Image,
   Text,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import Box, { BoxProps } from \\"./Box\\";
 
 export type ImageFlexProps = Partial<BoxProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -1080,7 +1070,8 @@ export default function ImageFlex(props: ImageFlexProps): React.ReactElement {
       padding=\\"0px 0px 0px 0px\\"
       position=\\"relative\\"
       height=\\"192px\\"
-      {...findChildOverrides(props.overrides, \\"Box\\")}
+      {...rest}
+      {...getOverrideProps(overrides, \\"Box\\")}
     >
       <Image
         border=\\"4px SOLID rgb(0,0,0)\\"
@@ -1133,13 +1124,12 @@ exports[`amplify render tests complex examples should render complex sample 8 1`
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  Box,
   EscapeHatchProps,
   Flex,
   FlexProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import Box from \\"./Box\\";
 
 export type VerticalFlexFillProps = Partial<FlexProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -1179,7 +1169,7 @@ export default function VerticalFlexFill(
           position=\\"relative\\"
           src=\\"https://via.placeholder.com/472x723?text=Amplify+Studio+is+Awesome!\\"
           height=\\"119px\\"
-          {...findChildOverrides(props.overrides, \\"Box\\")}
+          {...getOverrideProps(overrides, \\"Flex.Flex.Box\\")}
         ></Box>
         <Box
           width=\\"145px\\"
@@ -1188,7 +1178,7 @@ export default function VerticalFlexFill(
           position=\\"relative\\"
           src=\\"https://via.placeholder.com/472x723?text=Amplify+Studio+is+Awesome!\\"
           height=\\"124px\\"
-          {...findChildOverrides(props.overrides, \\"Box\\")}
+          {...getOverrideProps(overrides, \\"Flex.Flex.Box\\")}
         ></Box>
       </Flex>
     </Flex>
@@ -1583,6 +1573,279 @@ export default function CustomButton(
 "
 `;
 
+exports[`amplify render tests custom components custom children should render component with custom children 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { EscapeHatchProps, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import CustomButton from \\"./CustomButton\\";
+import MyView, { MyViewProps } from \\"./MyView\\";
+
+export type CustomChildrenProps = Partial<MyViewProps> & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomChildren(
+  props: CustomChildrenProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    <MyView {...rest} {...getOverrideProps(overrides, \\"MyView\\")}>
+      <CustomButton
+        {...getOverrideProps(overrides, \\"MyView.CustomButton\\")}
+      ></CustomButton>
+    </MyView>
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom components custom children should render component with custom children with ES5 1`] = `
+"var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+var __rest =
+  (this && this.__rest) ||
+  function (s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (
+          e.indexOf(p[i]) < 0 &&
+          Object.prototype.propertyIsEnumerable.call(s, p[i])
+        )
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
+/* eslint-disable */
+import React from \\"react\\";
+import { getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import CustomButton from \\"./CustomButton\\";
+import MyView from \\"./MyView\\";
+export default function CustomChildren(props) {
+  var overridesProp = props.overrides,
+    rest = __rest(props, [\\"overrides\\"]);
+  var overrides = __assign({}, overridesProp);
+  return React.createElement(
+    MyView,
+    __assign({}, rest, getOverrideProps(overrides, \\"MyView\\")),
+    React.createElement(
+      CustomButton,
+      __assign({}, getOverrideProps(overrides, \\"MyView.CustomButton\\"))
+    )
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom components custom children should render declarations 1`] = `
+"import React from \\"react\\";
+import { EscapeHatchProps } from \\"@aws-amplify/ui-react\\";
+import { MyViewProps } from \\"./MyView\\";
+export declare type CustomChildrenProps = Partial<MyViewProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomChildren(props: CustomChildrenProps): React.ReactElement;
+"
+`;
+
+exports[`amplify render tests custom components custom parent and children should render component with custom parent and children 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import { EscapeHatchProps, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import CustomButton from \\"./CustomButton\\";
+import ViewTest, { ViewTestProps } from \\"./ViewTest\\";
+
+export type CustomParentAndChildrenProps = Partial<ViewTestProps> & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomParentAndChildren(
+  props: CustomParentAndChildrenProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    <ViewTest {...rest} {...getOverrideProps(overrides, \\"ViewTest\\")}>
+      <CustomButton
+        {...getOverrideProps(overrides, \\"ViewTest.CustomButton\\")}
+      ></CustomButton>
+    </ViewTest>
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom components custom parent and children should render component with custom parent and children with ES5 1`] = `
+"var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+var __rest =
+  (this && this.__rest) ||
+  function (s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (
+          e.indexOf(p[i]) < 0 &&
+          Object.prototype.propertyIsEnumerable.call(s, p[i])
+        )
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
+/* eslint-disable */
+import React from \\"react\\";
+import { getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import CustomButton from \\"./CustomButton\\";
+import ViewTest from \\"./ViewTest\\";
+export default function CustomParentAndChildren(props) {
+  var overridesProp = props.overrides,
+    rest = __rest(props, [\\"overrides\\"]);
+  var overrides = __assign({}, overridesProp);
+  return React.createElement(
+    ViewTest,
+    __assign({}, rest, getOverrideProps(overrides, \\"ViewTest\\")),
+    React.createElement(
+      CustomButton,
+      __assign({}, getOverrideProps(overrides, \\"ViewTest.CustomButton\\"))
+    )
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom components custom parent and children should render declarations 1`] = `
+"import React from \\"react\\";
+import { EscapeHatchProps } from \\"@aws-amplify/ui-react\\";
+import { ViewTestProps } from \\"./ViewTest\\";
+export declare type CustomParentAndChildrenProps = Partial<ViewTestProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomParentAndChildren(props: CustomParentAndChildrenProps): React.ReactElement;
+"
+`;
+
+exports[`amplify render tests custom components custom parent should render component 1`] = `
+"/* eslint-disable */
+import React from \\"react\\";
+import {
+  Button,
+  EscapeHatchProps,
+  getOverrideProps,
+} from \\"@aws-amplify/ui-react\\";
+import MyView, { MyViewProps } from \\"./MyView\\";
+
+export type CustomParentProps = Partial<MyViewProps> & {
+  overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomParent(
+  props: CustomParentProps
+): React.ReactElement {
+  const { overrides: overridesProp, ...rest } = props;
+  const overrides = { ...overridesProp };
+  return (
+    <MyView {...rest} {...getOverrideProps(overrides, \\"MyView\\")}>
+      <Button {...getOverrideProps(overrides, \\"MyView.Button\\")}></Button>
+    </MyView>
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom components custom parent should render component with ES5 1`] = `
+"var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+var __rest =
+  (this && this.__rest) ||
+  function (s, e) {
+    var t = {};
+    for (var p in s)
+      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\")
+      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+        if (
+          e.indexOf(p[i]) < 0 &&
+          Object.prototype.propertyIsEnumerable.call(s, p[i])
+        )
+          t[p[i]] = s[p[i]];
+      }
+    return t;
+  };
+/* eslint-disable */
+import React from \\"react\\";
+import { Button, getOverrideProps } from \\"@aws-amplify/ui-react\\";
+import MyView from \\"./MyView\\";
+export default function CustomParent(props) {
+  var overridesProp = props.overrides,
+    rest = __rest(props, [\\"overrides\\"]);
+  var overrides = __assign({}, overridesProp);
+  return React.createElement(
+    MyView,
+    __assign({}, rest, getOverrideProps(overrides, \\"MyView\\")),
+    React.createElement(
+      Button,
+      __assign({}, getOverrideProps(overrides, \\"MyView.Button\\"))
+    )
+  );
+}
+"
+`;
+
+exports[`amplify render tests custom components custom parent should render declarations 1`] = `
+"import React from \\"react\\";
+import { EscapeHatchProps } from \\"@aws-amplify/ui-react\\";
+import { MyViewProps } from \\"./MyView\\";
+export declare type CustomParentProps = Partial<MyViewProps> & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
+export default function CustomParent(props: CustomParentProps): React.ReactElement;
+"
+`;
+
 exports[`amplify render tests custom render config should render ES5 1`] = `
 "var __assign =
   (this && this.__assign) ||
@@ -1898,13 +2161,12 @@ exports[`amplify render tests sample code snippet tests should generate a sample
 "/* eslint-disable */
 import React from \\"react\\";
 import {
-  CustomButton,
   EscapeHatchProps,
   View,
   ViewProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
+import CustomButton from \\"./CustomButton\\";
 
 export type ViewWithButtonProps = Partial<ViewProps> & {
   overrides?: EscapeHatchProps | undefined | null;
@@ -1920,7 +2182,7 @@ export default function ViewWithButton(
         color=\\"#ff0000\\"
         width=\\"20px\\"
         buttonText=\\"Click Me\\"
-        {...findChildOverrides(props.overrides, \\"CustomButton\\")}
+        {...getOverrideProps(overrides, \\"View.CustomButton\\")}
       ></CustomButton>
     </View>
   );
@@ -1938,7 +2200,6 @@ import {
   Flex,
   FlexProps,
   Heading,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
 
@@ -1973,7 +2234,7 @@ export default function SiteHeader(props: SiteHeaderProps): React.ReactElement {
       <Heading
         level={1}
         children=\\"Title\\"
-        {...findChildOverrides(props.overrides, \\"Heading\\")}
+        {...getOverrideProps(overrides, \\"Flex.Heading\\")}
       ></Heading>
       <Button
         variation=\\"primary\\"
@@ -2017,7 +2278,6 @@ import {
   Input,
   View,
   ViewProps,
-  findChildOverrides,
   getOverrideProps,
 } from \\"@aws-amplify/ui-react\\";
 
@@ -2038,57 +2298,57 @@ export default function ParsedFixedValues(
       <Input
         id=\\"string-value\\"
         value=\\"raw string value\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"number-value\\"
         value=\\"67548\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-number-value\\"
         value={67548}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"boolean-value\\"
         value=\\"true\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-boolean-value\\"
         value={true}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"json-value\\"
         value='{\\"foo\\": \\"bar\\"}'
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-json-value\\"
         value={{ foo: \\"bar\\" }}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"array-value\\"
         value=\\"[1,2,3]\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-array-value\\"
         value={[1, 2, 3]}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"null-value\\"
         value=\\"null\\"
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
       <Input
         id=\\"parsed-null-value\\"
         value={null}
-        {...findChildOverrides(props.overrides, \\"Input\\")}
+        {...getOverrideProps(overrides, \\"View.Input\\")}
       ></Input>
     </View>
   );
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/amplify-ui-renderers/__snapshots__/component-renderer.test.ts.snap b/packages/studio-ui-codegen-react/lib/__tests__/amplify-ui-renderers/__snapshots__/component-renderer.test.ts.snap
index bacb6e0b3..21c153cd2 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/amplify-ui-renderers/__snapshots__/component-renderer.test.ts.snap
+++ b/packages/studio-ui-codegen-react/lib/__tests__/amplify-ui-renderers/__snapshots__/component-renderer.test.ts.snap
@@ -10,7 +10,7 @@ exports[`Component Renderers CardRenderer 1`] = `"<Card {...rest} {...getOverrid
 
 exports[`Component Renderers CollectionRenderer 1`] = `"<Collection items={items || []} {...rest} {...getOverrideProps(overrides, \\"Collection\\")}>{(item, index) => ()}</Collection>"`;
 
-exports[`Component Renderers CustomComponentRenderer 1`] = `"<Custom {...findChildOverrides(props.overrides, \\"Custom\\")}></Custom>"`;
+exports[`Component Renderers CustomComponentRenderer 1`] = `"<Custom {...rest} {...getOverrideProps(overrides, \\"Custom\\")}></Custom>"`;
 
 exports[`Component Renderers DividerRenderer 1`] = `"<Divider {...rest} {...getOverrideProps(overrides, \\"Divider\\")}></Divider>"`;
 
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
index b6a648632..97aaec76e 100644
--- a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-codegen-react.test.ts
@@ -308,4 +308,78 @@ describe('amplify render tests', () => {
   it('should render parsed fixed values', () => {
     expect(generateWithAmplifyRenderer('parsedFixedValues')).toMatchSnapshot();
   });
+
+  describe('custom components', () => {
+    describe('custom children', () => {
+      it('should render component with custom children', () => {
+        expect(generateWithAmplifyRenderer('custom/customChildren').componentText).toMatchSnapshot();
+      });
+
+      it('should render component with custom children with ES5', () => {
+        expect(
+          generateWithAmplifyRenderer('custom/customChildren', {
+            target: ScriptTarget.ES5,
+            script: ScriptKind.JS,
+          }).componentText,
+        ).toMatchSnapshot();
+      });
+
+      it('should render declarations', () => {
+        expect(
+          generateWithAmplifyRenderer('custom/customChildren', {
+            script: ScriptKind.JS,
+            renderTypeDeclarations: true,
+          }).declaration,
+        ).toMatchSnapshot();
+      });
+    });
+
+    describe('custom parent', () => {
+      it('should render component', () => {
+        expect(generateWithAmplifyRenderer('custom/customParent').componentText).toMatchSnapshot();
+      });
+
+      it('should render component with ES5', () => {
+        expect(
+          generateWithAmplifyRenderer('custom/customParent', {
+            target: ScriptTarget.ES5,
+            script: ScriptKind.JS,
+          }).componentText,
+        ).toMatchSnapshot();
+      });
+
+      it('should render declarations', () => {
+        expect(
+          generateWithAmplifyRenderer('custom/customParent', {
+            script: ScriptKind.JS,
+            renderTypeDeclarations: true,
+          }).declaration,
+        ).toMatchSnapshot();
+      });
+    });
+
+    describe('custom parent and children', () => {
+      it('should render component with custom parent and children', () => {
+        expect(generateWithAmplifyRenderer('custom/customParentAndChildren').componentText).toMatchSnapshot();
+      });
+
+      it('should render component with custom parent and children with ES5', () => {
+        expect(
+          generateWithAmplifyRenderer('custom/customParentAndChildren', {
+            target: ScriptTarget.ES5,
+            script: ScriptKind.JS,
+          }).componentText,
+        ).toMatchSnapshot();
+      });
+
+      it('should render declarations', () => {
+        expect(
+          generateWithAmplifyRenderer('custom/customParentAndChildren', {
+            script: ScriptKind.JS,
+            renderTypeDeclarations: true,
+          }).declaration,
+        ).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customChildren.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customChildren.json
new file mode 100644
index 000000000..8e4b462c5
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customChildren.json
@@ -0,0 +1,10 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "MyView",
+  "name": "CustomChildren",
+  "properties": {},
+  "children": [{
+    "componentType": "CustomButton",
+    "properties": {}
+  }]
+}
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParent.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParent.json
new file mode 100644
index 000000000..a21e12c0e
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParent.json
@@ -0,0 +1,10 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "MyView",
+  "name": "CustomParent",
+  "properties": {},
+  "children": [{
+    "componentType": "Button",
+    "properties": {}
+  }]
+}
diff --git a/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParentAndChildren.json b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParentAndChildren.json
new file mode 100644
index 000000000..2704ef1eb
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/__tests__/studio-ui-json/custom/customParentAndChildren.json
@@ -0,0 +1,10 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "ViewTest",
+  "name": "CustomParentAndChildren",
+  "properties": {},
+  "children": [{
+    "componentType": "CustomButton",
+    "properties": {}
+  }]
+}
diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts
index 2b32eb8f9..7df3eddf8 100644
--- a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts
+++ b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/amplify-renderer.ts
@@ -24,6 +24,7 @@ import {
   ImageProps,
   ViewProps,
 } from '@aws-amplify/ui-react';
+import Primitives from '../primitives';
 import { ReactStudioTemplateRenderer } from '../react-studio-template-renderer';
 import TextRenderer from './text';
 import renderString from './string';
@@ -36,58 +37,377 @@ export class AmplifyRenderer extends ReactStudioTemplateRenderer {
   renderJsx(component: StudioComponent | StudioComponentChild, parent?: StudioNode): JsxElement | JsxFragment {
     const node = new StudioNode(component, parent);
     const renderChildren = (children: StudioComponentChild[]) => children.map((child) => this.renderJsx(child, node));
+
+    // add primitives in alphabetical order
     switch (component.componentType) {
-      case 'Collection':
-        return new CollectionRenderer(component, this.importCollection, parent).renderElement(renderChildren);
-      case 'Badge':
+      case Primitives.Alert:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Badge:
         return new ReactComponentWithChildrenRenderer<BadgeProps>(
           component,
           this.importCollection,
           parent,
         ).renderElement(renderChildren);
 
-      case 'Button':
+      case Primitives.Button:
         return new ReactComponentWithChildrenRenderer<ButtonProps>(
           component,
           this.importCollection,
           parent,
         ).renderElement(renderChildren);
 
-      case 'View':
+      case Primitives.ButtonGroup:
+        // unofficial support to retain functionality
+        // TODO: add official support
         return new ReactComponentWithChildrenRenderer<ViewProps>(
           component,
           this.importCollection,
           parent,
         ).renderElement(renderChildren);
 
-      case 'Card':
+      case Primitives.Card:
         return new ReactComponentWithChildrenRenderer<CardProps>(
           component,
           this.importCollection,
           parent,
         ).renderElement(renderChildren);
 
-      case 'Divider':
+      case Primitives.CheckboxField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Collection:
+        return new CollectionRenderer(component, this.importCollection, parent).renderElement(renderChildren);
+
+      case Primitives.Divider:
         return new ReactComponentRenderer<DividerProps>(component, this.importCollection, parent).renderElement();
 
-      case 'Flex':
+      case Primitives.Field:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.FieldClearButton:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.FieldDescription:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.FieldErrorMessage:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.FieldGroup:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.FieldGroupIcon:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.FieldGroupIconButton:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Flex:
         return new ReactComponentWithChildrenRenderer<FlexProps>(
           component,
           this.importCollection,
           parent,
         ).renderElement(renderChildren);
 
-      case 'Image':
+      case Primitives.Grid:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Heading:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Icon:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Image:
         return new ReactComponentRenderer<ImageProps>(component, this.importCollection, parent).renderElement();
 
-      case 'String':
-        return renderString(component as StudioComponentChild);
+      case Primitives.Input:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Label:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Link:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Loader:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Pagination:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.PasswordField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.PhoneNumberField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Placeholder:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Radio:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.RadioGroupField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
 
-      case 'Text':
+      case Primitives.Rating:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.ScrollView:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.SearchField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.SelectField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.StepperField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.SwitchField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Tabs:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.Text:
         return new TextRenderer(component, this.importCollection, parent).renderElement();
 
+      case Primitives.TextArea:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.TextField:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.ToggleButton:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.ToggleButtonGroup:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.View:
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      case Primitives.VisuallyHidden:
+        // unofficial support to retain functionality
+        // TODO: add official support
+        return new ReactComponentWithChildrenRenderer<ViewProps>(
+          component,
+          this.importCollection,
+          parent,
+        ).renderElement(renderChildren);
+
+      // to be removed
+      case 'String':
+        return renderString(component as StudioComponentChild);
+
       default:
-        return new CustomComponentRenderer(component, this.importCollection).renderElement(renderChildren);
+        return new CustomComponentRenderer(component, this.importCollection, parent).renderElement(renderChildren);
     }
   }
 }
diff --git a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts
index 7b1b23982..6e2ea2e58 100644
--- a/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts
+++ b/packages/studio-ui-codegen-react/lib/amplify-ui-renderers/customComponent.ts
@@ -13,23 +13,20 @@
   See the License for the specific language governing permissions and
   limitations under the License.
  */
-import { ViewProps as CustomComponentProps } from '@aws-amplify/ui-react';
-
 import { StudioComponentChild } from '@amzn/studio-ui-codegen';
-
-import { factory, JsxChild, JsxElement } from 'typescript';
+import { JsxChild, JsxElement, factory } from 'typescript';
 import { ReactComponentWithChildrenRenderer } from '../react-component-with-children-renderer';
 
-export default class CustomComponentRenderer extends ReactComponentWithChildrenRenderer<CustomComponentProps> {
+export default class CustomComponentRenderer<TPropIn> extends ReactComponentWithChildrenRenderer<TPropIn> {
   renderElement(renderChildren: (children: StudioComponentChild[]) => JsxChild[]): JsxElement {
-    const childrenJsx = this.component.children ? renderChildren(this.component.children ?? []) : [];
+    const children = this.component.children ? this.component.children : [];
     const element = factory.createJsxElement(
-      this.renderCustomCompOpeningElement(),
-      childrenJsx,
+      this.renderOpeningElement(),
+      renderChildren(children),
       factory.createJsxClosingElement(factory.createIdentifier(this.component.componentType)),
     );
 
-    this.importCollection.addImport('@aws-amplify/ui-react', this.component.componentType);
+    this.importCollection.addImport(`./${this.component.componentType}`, 'default');
 
     return element;
   }
diff --git a/packages/studio-ui-codegen-react/lib/import-collection.ts b/packages/studio-ui-codegen-react/lib/import-collection.ts
index b6b097c01..e3dbe97e8 100644
--- a/packages/studio-ui-codegen-react/lib/import-collection.ts
+++ b/packages/studio-ui-codegen-react/lib/import-collection.ts
@@ -14,6 +14,7 @@
   limitations under the License.
  */
 import factory, { createImportDeclaration, ImportDeclaration } from 'typescript';
+import path from 'path';
 
 export class ImportCollection {
   #collection: Map<string, Set<string>> = new Map();
@@ -57,34 +58,32 @@ export class ImportCollection {
   }
 
   buildImportStatements(): ImportDeclaration[] {
-    const importDeclarations: ImportDeclaration[] = [];
-
-    importDeclarations.push(
+    const importDeclarations: ImportDeclaration[] = [
       factory.createImportDeclaration(
         undefined,
         undefined,
         factory.createImportClause(factory.createIdentifier('React'), undefined),
         factory.createStringLiteral('react'),
       ),
-    );
-
-    for (const [key, value] of this.#collection) {
-      importDeclarations.push(
-        createImportDeclaration(
+    ].concat(
+      Array.from(this.#collection).map(([moduleName, imports]) => {
+        const namedImports = [...imports].filter((namedImport) => namedImport !== 'default').sort();
+        return createImportDeclaration(
           undefined,
           undefined,
           factory.createImportClause(
-            undefined,
+            // use module name as defualt import name
+            [...imports].indexOf('default') >= 0 ? factory.createIdentifier(path.basename(moduleName)) : undefined,
             factory.createNamedImports(
-              [...value].sort().map((item) => {
+              namedImports.map((item) => {
                 return factory.createImportSpecifier(undefined, factory.createIdentifier(item));
               }),
             ),
           ),
-          factory.createStringLiteral(key),
-        ),
-      );
-    }
+          factory.createStringLiteral(moduleName),
+        );
+      }),
+    );
 
     return importDeclarations;
   }
diff --git a/packages/studio-ui-codegen-react/lib/primitives.ts b/packages/studio-ui-codegen-react/lib/primitives.ts
new file mode 100644
index 000000000..5098101d7
--- /dev/null
+++ b/packages/studio-ui-codegen-react/lib/primitives.ts
@@ -0,0 +1,65 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+enum Primitives {
+  Alert = 'Alert',
+  Badge = 'Badge',
+  Button = 'Button',
+  ButtonGroup = 'ButtonGroup',
+  Card = 'Card',
+  Checkbox = 'Checkbox',
+  CheckboxField = 'CheckboxField',
+  Collection = 'Collection',
+  Divider = 'Divider',
+  Field = 'Field',
+  FieldClearButton = 'FieldClearButton',
+  FieldDescription = 'FieldDescription',
+  FieldErrorMessage = 'FieldErrorMessage',
+  FieldGroup = 'FieldGroup',
+  FieldGroupIcon = 'FieldGroupIcon',
+  FieldGroupIconButton = 'FieldGroupIconButton',
+  Flex = 'Flex',
+  Grid = 'Grid',
+  Heading = 'Heading',
+  Icon = 'Icon',
+  Image = 'Image',
+  Input = 'Input',
+  Label = 'Label',
+  Link = 'Link',
+  Loader = 'Loader',
+  Pagination = 'Pagination',
+  PasswordField = 'PasswordField',
+  PhoneNumberField = 'PhoneNumberField',
+  Placeholder = 'Placeholder',
+  Radio = 'Radio',
+  RadioGroupField = 'RadioGroupField',
+  Rating = 'Rating',
+  ScrollView = 'ScrollView',
+  SearchField = 'SearchField',
+  Select = 'Select',
+  SelectField = 'SelectField',
+  StepperField = 'StepperField',
+  SwitchField = 'SwitchField',
+  Tabs = 'Tabs',
+  Text = 'Text',
+  TextArea = 'TextArea',
+  TextField = 'TextField',
+  ToggleButton = 'ToggelButton',
+  ToggleButtonGroup = 'ToggleButtonGroup',
+  View = 'View',
+  VisuallyHidden = 'VisuallyHidden',
+}
+
+export default Primitives;
diff --git a/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts b/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
index 0907197e3..cc31fe0c3 100644
--- a/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
+++ b/packages/studio-ui-codegen-react/lib/react-component-with-children-renderer.ts
@@ -55,26 +55,6 @@ export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithCh
     return element;
   }
 
-  protected renderCustomCompOpeningElement(): JsxOpeningElement {
-    const attributes = Object.entries(this.component.properties).map(([key, value]) =>
-      buildOpeningElementAttributes(value, key),
-    );
-
-    if ('events' in this.component && this.component.events !== undefined) {
-      attributes.push(
-        ...Object.entries(this.component.events).map(([key, value]) => buildOpeningElementActions(key, value)),
-      );
-    }
-
-    this.addFindChildOverrideAttribute(attributes, this.component.componentType);
-
-    return factory.createJsxOpeningElement(
-      factory.createIdentifier(this.component.componentType),
-      undefined,
-      factory.createJsxAttributes(attributes),
-    );
-  }
-
   protected renderOpeningElement(): JsxOpeningElement {
     const attributes = Object.entries(this.component.properties).map(([key, value]) =>
       buildOpeningElementAttributes(value, key),
@@ -144,20 +124,6 @@ export class ReactComponentWithChildrenRenderer<TPropIn> extends ComponentWithCh
     attributes.push(overrideAttr);
   }
 
-  private addFindChildOverrideAttribute(attributes: JsxAttributeLike[], tagName: string) {
-    const findChildOverrideAttr = factory.createJsxSpreadAttribute(
-      factory.createCallExpression(factory.createIdentifier('findChildOverrides'), undefined, [
-        factory.createPropertyAccessExpression(
-          factory.createIdentifier('props'),
-          factory.createIdentifier('overrides'),
-        ),
-        factory.createStringLiteral(tagName),
-      ]),
-    );
-    this.importCollection.addImport('@aws-amplify/ui-react', 'findChildOverrides');
-    attributes.push(findChildOverrideAttr);
-  }
-
   private addBoundExpressionAttributes(
     attributes: JsxAttributeLike[],
     propKey: string,
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
index 19dfcf83c..c5e3b3444 100644
--- 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
@@ -39,6 +39,7 @@ import fs from 'fs';
 import path from 'path';
 import temp from 'temp';
 import { ReactRenderConfig, ScriptKind, ScriptTarget, ModuleKind } from './react-render-config';
+import Primitives from './primitives';
 
 export const defaultRenderConfig = {
   script: ScriptKind.TSX,
@@ -162,3 +163,7 @@ export function bindingPropertyUsesHook(
 ): boolean {
   return isDataPropertyBinding(binding) && 'predicate' in binding.bindingProperties;
 }
+
+export function isPrimitive(componentType: string): boolean {
+  return Object.values(Primitives).includes(componentType as Primitives);
+}
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
index 0aff2d60e..ae7ffef0b 100644
--- a/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
+++ b/packages/studio-ui-codegen-react/lib/react-studio-template-renderer.ts
@@ -68,6 +68,7 @@ import {
   json,
   jsonToLiteral,
   bindingPropertyUsesHook,
+  isPrimitive,
 } from './react-studio-template-renderer-helper';
 
 export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer<
@@ -313,7 +314,11 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
 
     const propsType = `${component.componentType}Props`;
 
-    this.importCollection.addImport('@aws-amplify/ui-react', propsType);
+    if (isPrimitive(component.componentType)) {
+      this.importCollection.addImport('@aws-amplify/ui-react', propsType);
+    } else {
+      this.importCollection.addImport(`./${component.componentType}`, `${component.componentType}Props`);
+    }
 
     const parameterizedPrimitivePropType = this.getParameterizedPrimitivePropType(component);
     const primitivePropType =
diff --git a/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js b/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js
index 17473c909..bf78444c7 100644
--- a/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js
+++ b/packages/test-generator/integration-test-templates/cypress/integration/generated-components-spec.js
@@ -312,6 +312,29 @@ describe('Generated Components', () => {
       cy.get('#parsed-fixed-values').find('#parsed-null-value').should('have.attr', 'value').should('be.empty');
     });
   });
+
+  describe('Custom Component', () => {
+    it('Renders custom children', () => {
+      cy.visit('http://localhost:3000/component-tests');
+      cy.get('#custom-component')
+        .find('#custom-children')
+        .find('button')
+        .should('have.attr', 'style', 'color: rgb(255, 0, 0);');
+    });
+    it('Renders custom parent', () => {
+      cy.visit('http://localhost:3000/component-tests');
+      cy.get('#custom-component').find('#custom-parent').should('have.css', 'font-family', '"Times New Roman"');
+    });
+
+    it('Renders custom parent and children', () => {
+      cy.visit('http://localhost:3000/component-tests');
+      cy.get('#custom-component')
+        .find('#custom-parent-and-children')
+        .should('have.css', 'font-family', '"Times New Roman"')
+        .find('button')
+        .should('have.attr', 'style', 'color: rgb(255, 0, 0);');
+    });
+  });
 });
 
 describe('Generated Themes', () => {
diff --git a/packages/test-generator/integration-test-templates/src/ComponentTests.tsx b/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
index d2fc1abc9..c46c5e36a 100644
--- a/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
+++ b/packages/test-generator/integration-test-templates/src/ComponentTests.tsx
@@ -43,6 +43,9 @@ import ComponentWithDataBindingWithPredicate from './ui-components/ComponentWith
 import CollectionWithBinding from './ui-components/CollectionWithBinding';
 import CollectionWithSort from './ui-components/CollectionWithSort';
 import ParsedFixedValues from './ui-components/ParsedFixedValues';
+import CustomChildren from './ui-components/CustomChildren';
+import CustomParent from './ui-components/CustomParent';
+import CustomParentAndChildren from './ui-components/CustomParentAndChildren';
 import { DataStore } from 'aws-amplify';
 import { User } from './models';
 import CollectionWithBindingItemsName from './ui-components/CollectionWithBindingItemsName';
@@ -206,6 +209,11 @@ export default function ComponentTests() {
       <div id="parsed-fixed-values">
         <ParsedFixedValues />
       </div>
+      <div id="custom-component">
+        <CustomChildren />
+        <CustomParent />
+        <CustomParentAndChildren />
+      </div>
     </AmplifyProvider>
   );
 }
diff --git a/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json b/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json
index b38cefca5..47d68adc6 100644
--- a/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json
+++ b/packages/test-generator/lib/components/basic-components/basicComponentCustomRating.json
@@ -4,7 +4,8 @@
   "name": "BasicComponentCustomRating",
   "properties": {
     "value": {
-      "value": "3.5"
+      "value": "3.5",
+      "type": "Number"
     }
   }
 }
diff --git a/packages/test-generator/lib/components/custom/customChildren.json b/packages/test-generator/lib/components/custom/customChildren.json
new file mode 100644
index 000000000..591f071f5
--- /dev/null
+++ b/packages/test-generator/lib/components/custom/customChildren.json
@@ -0,0 +1,14 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "View",
+  "name": "CustomChildren",
+  "properties": {
+    "id": {
+      "value": "custom-children"
+    }
+  },
+  "children": [{
+    "componentType": "CustomButton",
+    "properties": {}
+  }]
+}
diff --git a/packages/test-generator/lib/components/custom/customParent.json b/packages/test-generator/lib/components/custom/customParent.json
new file mode 100644
index 000000000..b1db213fb
--- /dev/null
+++ b/packages/test-generator/lib/components/custom/customParent.json
@@ -0,0 +1,14 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "ViewTest",
+  "name": "CustomParent",
+  "properties": {
+    "id": {
+      "value": "custom-parent"
+    }
+  },
+  "children": [{
+    "componentType": "Button",
+    "properties": {}
+  }]
+}
diff --git a/packages/test-generator/lib/components/custom/customParentAndChildren.json b/packages/test-generator/lib/components/custom/customParentAndChildren.json
new file mode 100644
index 000000000..632ba2388
--- /dev/null
+++ b/packages/test-generator/lib/components/custom/customParentAndChildren.json
@@ -0,0 +1,14 @@
+{
+  "id": "1234-5678-9010",
+  "componentType": "ViewTest",
+  "name": "CustomParentAndChildren",
+  "properties": {
+    "id": {
+      "value": "custom-parent-and-children"
+    }
+  },
+  "children": [{
+    "componentType": "CustomButton",
+    "properties": {}
+  }]
+}
diff --git a/packages/test-generator/lib/components/custom/index.ts b/packages/test-generator/lib/components/custom/index.ts
new file mode 100644
index 000000000..02ef16400
--- /dev/null
+++ b/packages/test-generator/lib/components/custom/index.ts
@@ -0,0 +1,18 @@
+/*
+  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License").
+  You may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+ */
+export { default as CustomParent } from './customParent.json';
+export { default as CustomChildren } from './customChildren.json';
+export { default as CustomParentAndChildren } from './customParentAndChildren.json';
diff --git a/packages/test-generator/lib/components/index.ts b/packages/test-generator/lib/components/index.ts
index 5ac7ffed0..70e1bb262 100644
--- a/packages/test-generator/lib/components/index.ts
+++ b/packages/test-generator/lib/components/index.ts
@@ -27,3 +27,4 @@ export * from './property-binding';
 export * from './default-value-components';
 export * from './complex-tests';
 export * from './collections';
+export * from './custom';