From 11e08dd20338561e660ac1a38c85396cde5a0a34 Mon Sep 17 00:00:00 2001 From: David Lopez Date: Mon, 7 Nov 2022 14:17:18 -0800 Subject: [PATCH] feat: render default theme option (#749) Co-authored-by: David Lopez --- ...theme-studio-template-renderer.test.ts.snap | 7 +++++++ ...eact-theme-studio-template-renderer.test.ts | 17 ++++++++++++++--- .../lib/imports/import-mapping.ts | 2 ++ .../react-theme-studio-template-renderer.ts | 18 ++++++++++++++++-- 4 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/codegen-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap b/packages/codegen-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap index 6eaab2b37..9ee9d5788 100644 --- a/packages/codegen-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap +++ b/packages/codegen-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 index f2f73f7c9..db76c8d21 100644 --- 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 index 6e6053ee2..924bf2a77 100644 --- 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.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 index 8a199e87f..26f19a983 100644 --- 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; + 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(), + ]), ); }