-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: expose renderThemeJson method to generating themes in studio ui (…
- Loading branch information
1 parent
d8c89f6
commit 026408a
Showing
7 changed files
with
191 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 114 additions & 0 deletions
114
...en-ui-react/lib/__tests__/__snapshots__/react-theme-studio-template-renderer.test.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,114 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`react theme renderer tests renderThemeJson should render theme json correctly 1`] = ` | ||
| "{ | ||
| name: \\"MyTheme\\", | ||
| tokens: { | ||
| components: { | ||
| alert: { | ||
| backgroundColor: \\"hsl(210, 5%, 90%)\\", | ||
| padding: \\"0.75rem 1rem\\", | ||
| info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" }, | ||
| error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" }, | ||
| warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" }, | ||
| success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" }, | ||
| }, | ||
| }, | ||
| }, | ||
| overrides: [ | ||
| { | ||
| colorMode: \\"dark\\", | ||
| tokens: { | ||
| colors: { black: { value: \\"#fff\\" }, white: { value: \\"#000\\" } }, | ||
| }, | ||
| }, | ||
| ], | ||
| }" | ||
| `; | ||
|
|
||
| exports[`react theme renderer tests theme should render the theme 1`] = ` | ||
| "/* eslint-disable */ | ||
| import { createTheme } from \\"@aws-amplify/ui-react\\"; | ||
| export default createTheme({ | ||
| name: \\"MyTheme\\", | ||
| tokens: { | ||
| components: { | ||
| alert: { | ||
| backgroundColor: \\"hsl(210, 5%, 90%)\\", | ||
| padding: \\"0.75rem 1rem\\", | ||
| info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" }, | ||
| error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" }, | ||
| warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" }, | ||
| success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" }, | ||
| }, | ||
| }, | ||
| }, | ||
| overrides: [ | ||
| { | ||
| colorMode: \\"dark\\", | ||
| tokens: { | ||
| colors: { black: { value: \\"#fff\\" }, white: { value: \\"#000\\" } }, | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
| " | ||
| `; | ||
|
|
||
| exports[`react theme renderer tests theme should render the theme with ES5 1`] = ` | ||
| "/* eslint-disable */ | ||
| import { createTheme } from \\"@aws-amplify/ui-react\\"; | ||
| export default createTheme({ | ||
| name: \\"MyTheme\\", | ||
| tokens: { | ||
| components: { | ||
| alert: { | ||
| backgroundColor: \\"hsl(210, 5%, 90%)\\", | ||
| padding: \\"0.75rem 1rem\\", | ||
| info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" }, | ||
| error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" }, | ||
| warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" }, | ||
| success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" }, | ||
| }, | ||
| }, | ||
| }, | ||
| overrides: [ | ||
| { | ||
| colorMode: \\"dark\\", | ||
| tokens: { | ||
| colors: { black: { value: \\"#fff\\" }, white: { value: \\"#000\\" } }, | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
| " | ||
| `; | ||
|
|
||
| exports[`react theme renderer tests theme should render the theme with TSX 1`] = ` | ||
| "/* eslint-disable */ | ||
| import { createTheme } from \\"@aws-amplify/ui-react\\"; | ||
| export default createTheme({ | ||
| name: \\"MyTheme\\", | ||
| tokens: { | ||
| components: { | ||
| alert: { | ||
| backgroundColor: \\"hsl(210, 5%, 90%)\\", | ||
| padding: \\"0.75rem 1rem\\", | ||
| info: { backgroundColor: \\"hsl(220, 85%, 85%)\\" }, | ||
| error: { backgroundColor: \\"hsl(0, 75%, 85%)\\" }, | ||
| warning: { backgroundColor: \\"hsl(30, 75%, 85%)\\" }, | ||
| success: { backgroundColor: \\"hsl(130, 75%, 85%)\\" }, | ||
| }, | ||
| }, | ||
| }, | ||
| overrides: [ | ||
| { | ||
| colorMode: \\"dark\\", | ||
| tokens: { | ||
| colors: { black: { value: \\"#fff\\" }, white: { value: \\"#000\\" } }, | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
| " | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
packages/codegen-ui-react/lib/__tests__/react-theme-studio-template-renderer.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /* | ||
| Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| Licensed under the Apache License, Version 2.0 (the "License"). | ||
| You may not use this file except in compliance with the License. | ||
| You may obtain a copy of the License at | ||
| http://www.apache.org/licenses/LICENSE-2.0 | ||
| Unless required by applicable law or agreed to in writing, software | ||
| distributed under the License is distributed on an "AS IS" BASIS, | ||
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| See the License for the specific language governing permissions and | ||
| limitations under the License. | ||
| */ | ||
| import { StudioTemplateRendererFactory, StudioTheme } from '@aws-amplify/codegen-ui'; | ||
| import fs from 'fs'; | ||
| import { join } from 'path'; | ||
| import { ScriptTarget, ScriptKind, ReactRenderConfig } from '..'; | ||
| import { ReactThemeStudioTemplateRenderer } from '../react-theme-studio-template-renderer'; | ||
|
|
||
| function loadThemeFromJSONFile(jsonThemeFile: string): StudioTheme { | ||
| return JSON.parse( | ||
| fs.readFileSync(join(__dirname, 'studio-ui-json', `${jsonThemeFile}.json`), 'utf-8'), | ||
| ) as StudioTheme; | ||
| } | ||
|
|
||
| function generateWithThemeRenderer(jsonFile: string, renderConfig: ReactRenderConfig = {}): string { | ||
| const rendererFactory = new StudioTemplateRendererFactory( | ||
| (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, renderConfig), | ||
| ); | ||
| const theme = loadThemeFromJSONFile(jsonFile); | ||
| return rendererFactory.buildRenderer(theme).renderComponent().componentText; | ||
| } | ||
|
|
||
| describe('react theme renderer tests', () => { | ||
| describe('theme', () => { | ||
| it('should render the theme', () => { | ||
| expect(generateWithThemeRenderer('theme')).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should render the theme with TSX', () => { | ||
| expect(generateWithThemeRenderer('theme', { script: ScriptKind.TSX })).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should render the theme with ES5', () => { | ||
| expect(generateWithThemeRenderer('theme', { target: ScriptTarget.ES5, script: ScriptKind.JS })).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
|
|
||
| describe('renderThemeJson', () => { | ||
| it('should render theme json correctly', () => { | ||
| const rendererFactory = new StudioTemplateRendererFactory( | ||
| (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, {}), | ||
| ); | ||
| const theme = loadThemeFromJSONFile('theme'); | ||
| expect(rendererFactory.buildRenderer(theme).renderThemeJson()).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters