fix(studio-ui-codegen-react): include all imports used in generated c…

…omponents (#40)
aws-amplify · Sep 7, 2021 · 04f86bb · 04f86bb
1 parent dbe0849
commit 04f86bb
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 19 deletions.
diff --git a/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap b/.../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
@@ -3,9 +3,11 @@
 exports[`amplify render tests basic component tests should generate a simple box component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { View } from \\"@aws-amplify/ui-react\\";
+import { EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
 
-export type TestProps = {} & CommonProps;
+export type TestProps = {} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
 export default function Test(props: TestProps): JSX.Element {
     return (<View fontFamily=\\"Times New Roman\\" fontSize=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"View\\")}></View>);
 }"
@@ -14,9 +16,11 @@ export default function Test(props: TestProps): JSX.Element {
 exports[`amplify render tests basic component tests should generate a simple button component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { Button } from \\"@aws-amplify/ui-react\\";
+import { Button, EscapeHatchProps, getOverrideProps } from \\"@aws-amplify/ui-react\\";
 
-export type CustomButtonProps = {} & CommonProps;
+export type CustomButtonProps = {} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
 export default function CustomButton(props: CustomButtonProps): JSX.Element {
     return (<Button color=\\"#ff0000\\" width=\\"20\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button>);
 }"
@@ -25,9 +29,11 @@ export default function CustomButton(props: CustomButtonProps): JSX.Element {
 exports[`amplify render tests basic component tests should generate a simple text component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { Text } from \\"@aws-amplify/ui-react\\";
+import { EscapeHatchProps, Text, getOverrideProps } from \\"@aws-amplify/ui-react\\";
 
-export type CustomTextProps = {} & CommonProps;
+export type CustomTextProps = {} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
 export default function CustomText(props: CustomTextProps): JSX.Element {
     return (<Text color=\\"#ff0000\\" width=\\"20px\\" value=\\"Text Value\\" {...props} {...getOverrideProps(props.overrides, \\"Text\\")}>Text Value</Text>);
 }"
@@ -36,9 +42,11 @@ export default function CustomText(props: CustomTextProps): JSX.Element {
 exports[`amplify render tests complex component tests should generate a button within a box component 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { Button, View } from \\"@aws-amplify/ui-react\\";
+import { Button, EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
 
-export type BoxWithButtonProps = {} & CommonProps;
+export type BoxWithButtonProps = {} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
 export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
     return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><Button color=\\"#ff0000\\" width=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button></View>);
 }"
@@ -47,9 +55,11 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
 exports[`amplify render tests complex component tests should generate a component with custom child 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { CustomButton, View } from \\"@aws-amplify/ui-react\\";
+import { CustomButton, EscapeHatchProps, View, findChildOverrides, getOverrideProps } from \\"@aws-amplify/ui-react\\";
 
-export type BoxWithCustomButtonProps = {} & CommonProps;
+export type BoxWithCustomButtonProps = {} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
 export default function BoxWithCustomButton(props: BoxWithCustomButtonProps): JSX.Element {
     return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><CustomButton color=\\"#ff0000\\" width=\\"20px\\" {...findChildOverrides(props.overrides, \\"CustomButton\\")}></CustomButton></View>);
 }"
@@ -58,9 +68,11 @@ export default function BoxWithCustomButton(props: BoxWithCustomButtonProps): JS
 exports[`amplify render tests complex component tests should generate a component with exposeAs prop 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { Button, View } from \\"@aws-amplify/ui-react\\";
+import { Button, EscapeHatchProps, View, getOverrideProps } from \\"@aws-amplify/ui-react\\";
 
-export type BoxWithButtonProps = {} & CommonProps;
+export type BoxWithButtonProps = {} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
 export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
     return (<View {...props} {...getOverrideProps(props.overrides, \\"View\\")}><Button color=\\"#ff0000\\" width=\\"20px\\" {...props} {...getOverrideProps(props.overrides, \\"Button\\")}></Button></View>);
 }"
@@ -69,9 +81,11 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
 exports[`amplify render tests sample code snippet tests should generate a sample code snippet for components 1`] = `
 "/* eslint-disable */
 import React from \\"react\\";
-import { CustomButton, View } from \\"@aws-amplify/ui-react\\";
+import { CustomButton, EscapeHatchProps, View, findChildOverrides, getOverrideProps } from \\"@aws-amplify/ui-react\\";
 
-export type BoxWithButtonProps = {} & CommonProps;
+export type BoxWithButtonProps = {} & {
+    overrides?: EscapeHatchProps | undefined | null;
+};
 export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element {
     return (<View padding-left {...props} {...getOverrideProps(props.overrides, \\"View\\")}><CustomButton color=\\"#ff0000\\" width=\\"20px\\" buttonText=\\"Click Me\\" {...findChildOverrides(props.overrides, \\"CustomButton\\")}></CustomButton></View>);
 }"

diff --git a/packages/studio-ui-codegen-react/lib/import-collection.ts b/packages/studio-ui-codegen-react/lib/import-collection.ts
@@ -61,7 +61,7 @@ export class ImportCollection {
           factory.createImportClause(
             undefined,
             factory.createNamedImports(
-              [...value].map((item) => {
+              [...value].sort().map((item) => {
                 return factory.createImportSpecifier(undefined, factory.createIdentifier(item));
               }),
             ),

diff --git a/packages/studio-ui-codegen-react/lib/react-component-renderer.ts b/packages/studio-ui-codegen-react/lib/react-component-renderer.ts
@@ -43,6 +43,7 @@ export abstract class ReactComponentRenderer<TPropIn> extends ComponentRendererB
         factory.createStringLiteral(tagName),
       ]),
     );
+    this.importCollection.addImport('@aws-amplify/ui-react', 'getOverrideProps');
     attributes.push(overrideAttr);
   }
 }
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
@@ -76,6 +76,7 @@ export abstract class ReactComponentWithChildrenRenderer<TPropIn> extends Compon
         factory.createStringLiteral(tagName),
       ]),
     );
+    this.importCollection.addImport('@aws-amplify/ui-react', 'getOverrideProps');
     attributes.push(overrideAttr);
   }
 
@@ -89,6 +90,7 @@ export abstract class ReactComponentWithChildrenRenderer<TPropIn> extends Compon
         factory.createStringLiteral(tagName),
       ]),
     );
+    this.importCollection.addImport('@aws-amplify/ui-react', 'findChildOverrides');
     attributes.push(findChildOverrideAttr);
   }
 

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
@@ -111,6 +111,7 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
     console.log('JSX rendered');
 
     const wrappedFunction = this.renderFunctionWrapper(this.component.name ?? StudioRendererConstants.unknownName, jsx);
+    const propsDeclaration = this.renderBindingPropsType(this.component);
 
     const imports = this.importCollection.buildImportStatements();
 
@@ -123,7 +124,6 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
 
     componentText += EOL;
 
-    const propsDeclaration = this.renderBindingPropsType(this.component);
     const propsPrinted = printer.printNode(EmitHint.Unspecified, propsDeclaration, file);
     componentText += propsPrinted;
 
@@ -210,14 +210,26 @@ export abstract class ReactStudioTemplateRenderer extends StudioTemplateRenderer
 
   renderBindingPropsType(component: StudioComponent): TypeAliasDeclaration {
     const componentPropType = getComponentPropName(component.name);
+    this.importCollection.addImport('@aws-amplify/ui-react', 'EscapeHatchProps');
     return factory.createTypeAliasDeclaration(
       undefined,
-      factory.createModifiersFromModifierFlags(ModifierFlags.Export),
-      componentPropType,
+      [factory.createModifier(ts.SyntaxKind.ExportKeyword)],
+      factory.createIdentifier(componentPropType),
       undefined,
       factory.createIntersectionTypeNode([
         this.buildBindingPropNodes(component),
-        factory.createTypeReferenceNode('CommonProps', undefined),
+        factory.createTypeLiteralNode([
+          factory.createPropertySignature(
+            undefined,
+            factory.createIdentifier('overrides'),
+            factory.createToken(ts.SyntaxKind.QuestionToken),
+            factory.createUnionTypeNode([
+              factory.createTypeReferenceNode(factory.createIdentifier('EscapeHatchProps'), undefined),
+              factory.createKeywordTypeNode(ts.SyntaxKind.UndefinedKeyword),
+              factory.createLiteralTypeNode(factory.createNull()),
+            ]),
+          ),
+        ]),
       ]),
     );
   }