From ef89c2cfcbc359c1e1ba8ba6d7b7d790b4cd42bf Mon Sep 17 00:00:00 2001 From: Dane Pilcher Date: Mon, 27 Sep 2021 21:35:40 +0000 Subject: [PATCH] feat: apply theme to all primitives --- .../studio-ui-codegen-react.test.ts.snap | 20 ++++ .../react-theme-studio-template-renderer.ts | 91 +++++++++++++++++++ 2 files changed, 111 insertions(+) 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 19bd42403..0e195d5a0 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 @@ -574,6 +574,7 @@ export default function BoxWithButton(props: BoxWithButtonProps): JSX.Element { exports[`amplify render tests theme should render the theme 1`] = ` "/* eslint-disable */ import React from \\"react\\"; +import { useEffect } from \\"react\\"; import { AmplifyProvider, DeepPartial, @@ -1209,6 +1210,11 @@ export default function withTheme( WrappedComponent.displayName || WrappedComponent.name || \\"Component\\"; const ComponentWithTheme = (props: T) => { const theming = extendTheming(theme); + useEffect(() => { + Object.entries(theming.CSSVariables).forEach(([key, value]) => { + document.documentElement.style.setProperty(key, value); + }); + }); return ( @@ -1239,6 +1245,7 @@ exports[`amplify render tests theme should render the theme with ES5 1`] = ` }; /* eslint-disable */ import React from \\"react\\"; +import { useEffect } from \\"react\\"; import { AmplifyProvider, extendTheming } from \\"@aws-amplify/ui-react\\"; export default function withTheme(WrappedComponent) { var theme = { @@ -1867,6 +1874,13 @@ export default function withTheme(WrappedComponent) { WrappedComponent.displayName || WrappedComponent.name || \\"Component\\"; var ComponentWithTheme = function (props) { var theming = extendTheming(theme); + useEffect(function () { + Object.entries(theming.CSSVariables).forEach(function (_a) { + var key = _a[0], + value = _a[1]; + document.documentElement.style.setProperty(key, value); + }); + }); return React.createElement( AmplifyProvider, { theming: theming }, @@ -1882,6 +1896,7 @@ export default function withTheme(WrappedComponent) { exports[`amplify render tests theme should render the theme with TSX 1`] = ` "/* eslint-disable */ import React from \\"react\\"; +import { useEffect } from \\"react\\"; import { AmplifyProvider, DeepPartial, @@ -2517,6 +2532,11 @@ export default function withTheme( WrappedComponent.displayName || WrappedComponent.name || \\"Component\\"; const ComponentWithTheme = (props: T) => { const theming = extendTheming(theme); + useEffect(() => { + Object.entries(theming.CSSVariables).forEach(([key, value]) => { + document.documentElement.style.setProperty(key, value); + }); + }); return ( 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 index a2edb3813..6d72a5279 100644 --- 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 @@ -73,6 +73,7 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer< } private buildImports() { + this.importCollection.addImport('react', 'useEffect'); this.importCollection.addImport('@aws-amplify/ui-react', 'extendTheming'); this.importCollection.addImport('@aws-amplify/ui-react', 'Theme'); this.importCollection.addImport('@aws-amplify/ui-react', 'DeepPartial'); @@ -189,6 +190,96 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer< NodeFlags.Const, ), ), + factory.createExpressionStatement( + factory.createCallExpression(factory.createIdentifier('useEffect'), undefined, [ + factory.createArrowFunction( + undefined, + undefined, + [], + undefined, + factory.createToken(SyntaxKind.EqualsGreaterThanToken), + factory.createBlock( + [ + factory.createExpressionStatement( + factory.createCallExpression( + factory.createPropertyAccessExpression( + factory.createCallExpression( + factory.createPropertyAccessExpression( + factory.createIdentifier('Object'), + factory.createIdentifier('entries'), + ), + undefined, + [ + factory.createPropertyAccessExpression( + factory.createIdentifier('theming'), + factory.createIdentifier('CSSVariables'), + ), + ], + ), + factory.createIdentifier('forEach'), + ), + undefined, + [ + factory.createArrowFunction( + undefined, + undefined, + [ + factory.createParameterDeclaration( + undefined, + undefined, + undefined, + factory.createArrayBindingPattern([ + factory.createBindingElement( + undefined, + undefined, + factory.createIdentifier('key'), + undefined, + ), + factory.createBindingElement( + undefined, + undefined, + factory.createIdentifier('value'), + undefined, + ), + ]), + undefined, + undefined, + undefined, + ), + ], + undefined, + factory.createToken(SyntaxKind.EqualsGreaterThanToken), + factory.createBlock( + [ + factory.createExpressionStatement( + factory.createCallExpression( + factory.createPropertyAccessExpression( + factory.createPropertyAccessExpression( + factory.createPropertyAccessExpression( + factory.createIdentifier('document'), + factory.createIdentifier('documentElement'), + ), + factory.createIdentifier('style'), + ), + factory.createIdentifier('setProperty'), + ), + undefined, + [factory.createIdentifier('key'), factory.createIdentifier('value')], + ), + ), + ], + true, + ), + ), + ], + ), + ), + ], + true, + ), + ), + ]), + ), factory.createReturnStatement( factory.createParenthesizedExpression( factory.createJsxElement(