Skip to content

Commit

Permalink
feat: apply theme to all primitives
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpilch
dpilch committed Sep 30, 2021
1 parent 1768ea8 commit ef89c2c
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 0 deletions.
20 changes: 20 additions & 0 deletions .../studio-ui-codegen-react/lib/__tests__/__snapshots__/studio-ui-codegen-react.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -1209,6 +1210,11 @@ export default function withTheme<T>(
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 (
<AmplifyProvider theming={theming}>
<WrappedComponent {...props} />
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 },
Expand All @@ -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,
Expand Down Expand Up @@ -2517,6 +2532,11 @@ export default function withTheme<T>(
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 (
<AmplifyProvider theming={theming}>
<WrappedComponent {...props} />
Expand Down
91 changes: 91 additions & 0 deletions packages/studio-ui-codegen-react/lib/react-theme-studio-template-renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit ef89c2c

Please sign in to comment.