feat: render default theme option (#749)

Co-authored-by: David Lopez <lopezbnd@amazon.com>
aws-amplify · Nov 7, 2022 · 11e08dd · 11e08dd
1 parent 9aa8c73
commit 11e08dd
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/...en-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap b/...en-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap
@@ -26,6 +26,13 @@ exports[`react theme renderer tests renderThemeJson should render theme json suc
 }"
 `;
 
+exports[`react theme renderer tests theme should render the default theme 1`] = `
+"/* eslint-disable */
+import { createTheme, defaultTheme } from \\"@aws-amplify/ui-react\\";
+export default createTheme(defaultTheme);
+"
+`;
+
 exports[`react theme renderer tests theme should render the theme 1`] = `
 "/* eslint-disable */
 import { createTheme } from \\"@aws-amplify/ui-react\\";

diff --git a/packages/codegen-ui-react/lib/__tests__/react-theme-studio-template-renderer.test.ts b/packages/codegen-ui-react/lib/__tests__/react-theme-studio-template-renderer.test.ts
@@ -15,12 +15,19 @@
  */
 import { StudioTemplateRendererFactory, StudioTheme } from '@aws-amplify/codegen-ui';
 import { ScriptTarget, ScriptKind, ReactRenderConfig } from '..';
-import { ReactThemeStudioTemplateRenderer } from '../react-theme-studio-template-renderer';
+import {
+  ReactThemeStudioTemplateRenderer,
+  ReactThemeStudioTemplateRendererOptions,
+} from '../react-theme-studio-template-renderer';
 import { loadSchemaFromJSONFile } from './__utils__';
 
-function generateWithThemeRenderer(jsonFile: string, renderConfig: ReactRenderConfig = {}): string {
+function generateWithThemeRenderer(
+  jsonFile: string,
+  renderConfig: ReactRenderConfig = {},
+  options?: ReactThemeStudioTemplateRendererOptions,
+): string {
   const rendererFactory = new StudioTemplateRendererFactory(
-    (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig),
+    (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig, options),
   );
   return rendererFactory.buildRenderer(loadSchemaFromJSONFile(jsonFile)).renderComponent().componentText;
 }
@@ -49,6 +56,10 @@ describe('react theme renderer tests', () => {
     it('should render the theme with ES5', () => {
       expect(generateWithThemeRenderer('theme', { target: ScriptTarget.ES5, script: ScriptKind.JS })).toMatchSnapshot();
     });
+
+    it('should render the default theme', () => {
+      expect(generateWithThemeRenderer('theme', {}, { renderDefaultTheme: true })).toMatchSnapshot();
+    });
   });
 
   describe('renderThemeJson', () => {

diff --git a/packages/codegen-ui-react/lib/imports/import-mapping.ts b/packages/codegen-ui-react/lib/imports/import-mapping.ts
@@ -47,10 +47,12 @@ export enum ImportValue {
   VALIDATE_FIELD_CODEGEN = 'validateField',
   FORMATTER = 'formatter',
   FETCH_BY_PATH = 'fetchByPath',
+  DEFAULT_THEME = 'defaultTheme',
 }
 
 export const ImportMapping: Record<ImportValue, ImportSource> = {
   [ImportValue.CREATE_THEME]: ImportSource.UI_REACT,
+  [ImportValue.DEFAULT_THEME]: ImportSource.UI_REACT,
   [ImportValue.ESCAPE_HATCH_PROPS]: ImportSource.UI_REACT_INTERNAL,
   [ImportValue.GET_OVERRIDE_PROPS]: ImportSource.UI_REACT_INTERNAL,
   [ImportValue.USE_AUTH]: ImportSource.UI_REACT_INTERNAL,

diff --git a/packages/codegen-ui-react/lib/react-theme-studio-template-renderer.ts b/packages/codegen-ui-react/lib/react-theme-studio-template-renderer.ts
@@ -44,6 +44,10 @@ import {
 } from './react-studio-template-renderer-helper';
 import { RequiredKeys } from './utils/type-utils';
 
+export type ReactThemeStudioTemplateRendererOptions = {
+  renderDefaultTheme?: boolean;
+};
+
 export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
   string,
   StudioTheme,
@@ -57,15 +61,18 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
 
   protected renderConfig: RequiredKeys<ReactRenderConfig, keyof typeof defaultRenderConfig>;
 
+  protected options: ReactThemeStudioTemplateRendererOptions | undefined;
+
   fileName: string;
 
-  constructor(theme: StudioTheme, renderConfig: ReactRenderConfig) {
+  constructor(theme: StudioTheme, renderConfig: ReactRenderConfig, options?: ReactThemeStudioTemplateRendererOptions) {
     super(theme, new ReactOutputManager(), renderConfig);
     this.renderConfig = {
       ...defaultRenderConfig,
       ...renderConfig,
     };
     this.fileName = `${this.component.name}.${scriptKindToFileExtensionNonReact(this.renderConfig.script)}`;
+    this.options = options;
   }
 
   renderComponentInternal() {
@@ -106,6 +113,9 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
    */
   private buildImports() {
     this.importCollection.addMappedImport(ImportValue.CREATE_THEME);
+    if (this.options?.renderDefaultTheme) {
+      this.importCollection.addMappedImport(ImportValue.DEFAULT_THEME);
+    }
 
     return this.importCollection.buildImportStatements(true);
   }
@@ -118,7 +128,11 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer<
       undefined,
       undefined,
       undefined,
-      factory.createCallExpression(factory.createIdentifier('createTheme'), undefined, [this.buildThemeObject()]),
+      factory.createCallExpression(factory.createIdentifier('createTheme'), undefined, [
+        this.options?.renderDefaultTheme
+          ? factory.createIdentifier(ImportValue.DEFAULT_THEME)
+          : this.buildThemeObject(),
+      ]),
     );
   }