fix: updating generated theme to work in test app

aws-amplify · Oct 19, 2021 · 113a594 · 113a594
1 parent 8cbf8cc
commit 113a594
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 64 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
@@ -14,7 +14,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type SiteHeaderProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function SiteHeader(props: SiteHeaderProps): React.ReactElement {
   const overrides = { ...props.overrides };
@@ -61,7 +61,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type TestProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function Test(props: TestProps): React.ReactElement {
   const overrides = { ...props.overrides };
@@ -87,7 +87,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function CustomButton(
   props: CustomButtonProps
@@ -115,7 +115,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CustomTextProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function CustomText(props: CustomTextProps): React.ReactElement {
   const overrides = { ...props.overrides };
@@ -146,12 +146,12 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CollectionOfCustomButtonsProps = {
-  width?: Number,
-  backgroundColor?: String,
-  buttonColor?: UserPreferences,
-  items?: any[],
+  width?: Number;
+  backgroundColor?: String;
+  buttonColor?: UserPreferences;
+  items?: any[];
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function CollectionOfCustomButtons(
   props: CollectionOfCustomButtonsProps
@@ -224,12 +224,12 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CollectionOfCustomButtonsProps = {
-  width?: Number,
-  backgroundColor?: String,
-  buttonColor?: UserPreferences,
-  items?: any[],
+  width?: Number;
+  backgroundColor?: String;
+  buttonColor?: UserPreferences;
+  items?: any[];
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function CollectionOfCustomButtons(
   props: CollectionOfCustomButtonsProps
@@ -308,9 +308,9 @@ import {
 import { UntitledModel } from \\"../models\\";
 
 export type ListingCardCollectionProps = {
-  items?: any[],
+  items?: any[];
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function ListingCardCollection(
   props: ListingCardCollectionProps
@@ -362,9 +362,9 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type ListingCardCollectionProps = {
-  items?: any[],
+  items?: any[];
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function ListingCardCollection(
   props: ListingCardCollectionProps
@@ -401,7 +401,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithButtonProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function BoxWithButton(
   props: BoxWithButtonProps
@@ -432,7 +432,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithCustomButtonProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function BoxWithCustomButton(
   props: BoxWithCustomButtonProps
@@ -462,7 +462,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithButtonProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function BoxWithButton(
   props: BoxWithButtonProps
@@ -491,9 +491,9 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type TextWithDataBindingProps = {
-  textValue?: String,
+  textValue?: String;
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function TextWithDataBinding(
   props: TextWithDataBindingProps
@@ -525,12 +525,12 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type ComponentWithDataBindingProps = {
-  width?: Number,
-  isDisabled?: Boolean,
-  buttonUser?: User,
-  buttonColor?: String,
+  width?: Number;
+  isDisabled?: Boolean;
+  buttonUser?: User;
+  buttonColor?: String;
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function ComponentWithDataBinding(
   props: ComponentWithDataBindingProps
@@ -562,9 +562,9 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type SectionHeadingProps = {
-  newProp6fd1?: UntitledModel,
+  newProp6fd1?: UntitledModel;
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function SectionHeading(
   props: SectionHeadingProps
@@ -624,10 +624,10 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = {
-  variant: \\"primary\\" | \\"secondary\\",
-  size?: \\"large\\",
+  variant: \\"primary\\" | \\"secondary\\";
+  size?: \\"large\\";
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function CustomButton(
   props: CustomButtonProps
@@ -672,11 +672,11 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = {
-  width?: Number,
-  buttonUser?: User,
-  buttonColor?: String,
+  width?: Number;
+  buttonUser?: User;
+  buttonColor?: String;
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function CustomButton(
   props: CustomButtonProps
@@ -708,11 +708,11 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type CustomButtonProps = {
-  width?: Number,
-  buttonUser?: User,
-  buttonColor?: String,
+  width?: Number;
+  buttonUser?: User;
+  buttonColor?: String;
 } & {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function CustomButton(
   props: CustomButtonProps
@@ -854,7 +854,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type BoxWithButtonProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function BoxWithButton(
   props: BoxWithButtonProps
@@ -888,7 +888,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type SiteHeaderProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function SiteHeader(props: SiteHeaderProps): React.ReactElement {
   const overrides = { ...props.overrides };
@@ -962,9 +962,7 @@ import {
   Theme,
   extendTheming,
 } from \\"@aws-amplify/ui-react\\";
-export default function withTheme<T>(
-  WrappedComponent: React.ReactComponent<T>
-) {
+export default function withTheme<T>(WrappedComponent: React.ComponentType<T>) {
   const theme = {
     components: {
       alert: {
@@ -996,11 +994,11 @@ export default function withTheme<T>(
     const theming = extendTheming(theme);
     useEffect(() => {
       Object.entries(theming.CSSVariables).forEach(([key, value]) => {
-        document.documentElement.style.setProperty(key, value);
+        document.documentElement.style.setProperty(key, value as string | null);
       });
     });
     return (
-      <AmplifyProvider theming={theming}>
+      <AmplifyProvider theming={theming} components={{}}>
         <WrappedComponent {...props} />
       </AmplifyProvider>
     );
@@ -1070,7 +1068,7 @@ export default function withTheme(WrappedComponent) {
     });
     return React.createElement(
       AmplifyProvider,
-      { theming: theming },
+      { theming: theming, components: {} },
       React.createElement(WrappedComponent, __assign({}, props))
     );
   };
@@ -1090,9 +1088,7 @@ import {
   Theme,
   extendTheming,
 } from \\"@aws-amplify/ui-react\\";
-export default function withTheme<T>(
-  WrappedComponent: React.ReactComponent<T>
-) {
+export default function withTheme<T>(WrappedComponent: React.ComponentType<T>) {
   const theme = {
     components: {
       alert: {
@@ -1124,11 +1120,11 @@ export default function withTheme<T>(
     const theming = extendTheming(theme);
     useEffect(() => {
       Object.entries(theming.CSSVariables).forEach(([key, value]) => {
-        document.documentElement.style.setProperty(key, value);
+        document.documentElement.style.setProperty(key, value as string | null);
       });
     });
     return (
-      <AmplifyProvider theming={theming}>
+      <AmplifyProvider theming={theming} components={{}}>
         <WrappedComponent {...props} />
       </AmplifyProvider>
     );
@@ -1151,7 +1147,7 @@ import {
 } from \\"@aws-amplify/ui-react\\";
 
 export type ProfileProps = {
-  overrides?: EscapeHatchProps | undefined | null,
+  overrides?: EscapeHatchProps | undefined | null;
 };
 export default function Profile(props: ProfileProps): React.ReactElement {
   const {} = props;

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
@@ -55,7 +55,7 @@ export function transpile(
       },
     }).outputText;
 
-    const componentText = prettier.format(transpiledCode, { parser: 'babel', plugins: [parserBabel] });
+    const componentText = prettier.format(transpiledCode, { parser: 'typescript', plugins: [parserBabel] });
 
     /* createProgram is less performant than traspileModule and should only be used when necessary.
      * createProgram is used here becuase transpileModule cannot produce type declarations.
@@ -91,7 +91,7 @@ export function transpile(
     };
   }
 
-  return { componentText: prettier.format(code, { parser: 'babel', plugins: [parserBabel] }) };
+  return { componentText: prettier.format(code, { parser: 'typescript', plugins: [parserBabel] }) };
 }
 
 export function buildPrinter(fileName: string, renderConfig: ReactRenderConfig) {

diff --git a/packages/studio-ui-codegen-react/lib/react-theme-studio-template-renderer.ts b/packages/studio-ui-codegen-react/lib/react-theme-studio-template-renderer.ts
@@ -112,7 +112,7 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
           factory.createIdentifier('WrappedComponent'),
           undefined,
           factory.createTypeReferenceNode(
-            factory.createQualifiedName(factory.createIdentifier('React'), factory.createIdentifier('ReactComponent')),
+            factory.createQualifiedName(factory.createIdentifier('React'), factory.createIdentifier('ComponentType')),
             [factory.createTypeReferenceNode(factory.createIdentifier('T'), undefined)],
           ),
           undefined,
@@ -200,11 +200,11 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
    *   const theming = extendTheming(theme);
    *   useEffect(() => {
    *     Object.entries(theming.CSSVariables).forEach(([key, value]) => {
-   *       document.documentElement.style.setProperty(key, value);
+   *       document.documentElement.style.setProperty(key, value as string | null);
    *     });
    *   });
    *   return (
-   *     <AmplifyProvider theming={theming}>
+   *     <AmplifyProvider theming={theming} components={{}}>
    *       <WrappedComponent {...props} />
    *     </AmplifyProvider>
    *   );
@@ -250,6 +250,10 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
                               factory.createIdentifier('theming'),
                               factory.createJsxExpression(undefined, factory.createIdentifier('theming')),
                             ),
+                            factory.createJsxAttribute(
+                              factory.createIdentifier('components'),
+                              factory.createJsxExpression(undefined, factory.createObjectLiteralExpression([], false)),
+                            ),
                           ]),
                         ),
                         [
@@ -301,7 +305,7 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
   /*
    * useEffect(() => {
    *   Object.entries(theming.CSSVariables).forEach(([key, value]) => {
-   *     document.documentElement.style.setProperty(key, value);
+   *     document.documentElement.style.setProperty(key, (value as string | null));
    *   });
    * });
    */
@@ -380,7 +384,18 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
                                 factory.createIdentifier('setProperty'),
                               ),
                               undefined,
-                              [factory.createIdentifier('key'), factory.createIdentifier('value')],
+                              [
+                                factory.createIdentifier('key'),
+                                factory.createParenthesizedExpression(
+                                  factory.createAsExpression(
+                                    factory.createIdentifier('value'),
+                                    factory.createUnionTypeNode([
+                                      factory.createKeywordTypeNode(SyntaxKind.StringKeyword),
+                                      factory.createLiteralTypeNode(factory.createNull()),
+                                    ]),
+                                  ),
+                                ),
+                              ],
                             ),
                           ),
                         ],

diff --git a/packages/test-generator/lib/generators/GenerateTestApp.ts b/packages/test-generator/lib/generators/GenerateTestApp.ts
@@ -29,6 +29,5 @@ new TestGenerator({
     'ComponentWithVariant', // TODO: Support Variant E2E Tests
     'ComponentWithActionSignOut', // TODO: Support Auth Action E2E Tests
     'ComponentWithActionNavigation', // TODO: Support Navigation Action E2E Tests
-    'ExampleTheme', // TODO: Support Theme E2E Tests
   ],
 }).generate();
diff --git a/packages/test-generator/test-app-templates/src/App.tsx b/packages/test-generator/test-app-templates/src/App.tsx
@@ -18,6 +18,7 @@ import BoxTest from './ui-components/BoxTest';
 import BoxWithButton from './ui-components/BoxWithButton';
 import CustomButton from './ui-components/CustomButton';
 import CustomText from './ui-components/CustomText';
+import withTheme from './ui-components/theme';
 /* eslint-enable import/extensions */
 
 function App() {
@@ -76,4 +77,4 @@ function App() {
   );
 }
 
-export default App;
+export default withTheme(App);