diff --git a/CHANGELOG.md b/CHANGELOG.md index d4cca47c8..6ee7f4605 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.3.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.3.0...v2.3.1) (2022-07-15) + +### Bug Fixes + +- change recommended ui-react version to ^3.1.0 ([#521](https://github.com/aws-amplify/amplify-codegen-ui/issues/521)) ([33b6d06](https://github.com/aws-amplify/amplify-codegen-ui/commit/33b6d0658b87acd1e6eadc8ae3cb8629b2258b4b)) + +# [2.3.0](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.1...v2.3.0) (2022-07-14) + +### Bug Fixes + +- handle auth prop in concat ([f7d645e](https://github.com/aws-amplify/amplify-codegen-ui/commit/f7d645e07e91848465e92f450e81d6ed92604057)) + +### Features + +- adding breakpoint functionality in theme generation ([#515](https://github.com/aws-amplify/amplify-codegen-ui/issues/515)) ([28f97aa](https://github.com/aws-amplify/amplify-codegen-ui/commit/28f97aa7a290e3fd25efc6f0d51a39403d79b947)) + ## [2.2.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.0...v2.2.1) (2022-06-15) **Note:** Version bump only for package @aws-amplify/amplify-codegen-ui diff --git a/lerna.json b/lerna.json index df3eeea00..867791a35 100644 --- a/lerna.json +++ b/lerna.json @@ -3,7 +3,7 @@ "packages/*" ], "exact": true, - "version": "2.2.1", + "version": "2.3.1", "command": { "version": { "message": "chore(release): %s" diff --git a/package.json b/package.json index 063f88adb..b8f2d5ccd 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "homepage": "https://docs.amplify.aws/", "scripts": { "test": "lerna run test --stream", - "test:ci": "lerna run test --stream -- --ci", + "test:ci": "lerna run test:ci --stream", "test:update": "lerna run test:update --stream", "build": "lerna run build --stream", "setup-dev": "npm install && lerna bootstrap && lerna run build", diff --git a/packages/codegen-ui-react/CHANGELOG.md b/packages/codegen-ui-react/CHANGELOG.md index 8c3258eb4..5b1bf447a 100644 --- a/packages/codegen-ui-react/CHANGELOG.md +++ b/packages/codegen-ui-react/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.3.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.3.0...v2.3.1) (2022-07-15) + +### Bug Fixes + +- change recommended ui-react version to ^3.1.0 ([#521](https://github.com/aws-amplify/amplify-codegen-ui/issues/521)) ([33b6d06](https://github.com/aws-amplify/amplify-codegen-ui/commit/33b6d0658b87acd1e6eadc8ae3cb8629b2258b4b)) + +# [2.3.0](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.1...v2.3.0) (2022-07-14) + +### Bug Fixes + +- handle auth prop in concat ([f7d645e](https://github.com/aws-amplify/amplify-codegen-ui/commit/f7d645e07e91848465e92f450e81d6ed92604057)) + +### Features + +- adding breakpoint functionality in theme generation ([#515](https://github.com/aws-amplify/amplify-codegen-ui/issues/515)) ([28f97aa](https://github.com/aws-amplify/amplify-codegen-ui/commit/28f97aa7a290e3fd25efc6f0d51a39403d79b947)) + ## [2.2.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.0...v2.2.1) (2022-06-15) **Note:** Version bump only for package @aws-amplify/codegen-ui-react 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 c272f08de..6eaab2b37 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 @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`react theme renderer tests renderThemeJson should render theme json correctly 1`] = ` +exports[`react theme renderer tests renderThemeJson should render theme json successfully 1`] = ` "{ name: \\"MyTheme\\", tokens: { 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 768126ed8..f2f73f7c9 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 @@ -25,6 +25,17 @@ function generateWithThemeRenderer(jsonFile: string, renderConfig: ReactRenderCo return rendererFactory.buildRenderer(loadSchemaFromJSONFile(jsonFile)).renderComponent().componentText; } +function generateThemeObject(jsonFile: string): any { + const rendererFactory = new StudioTemplateRendererFactory( + (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, {}), + ); + const themeJson = rendererFactory.buildRenderer(loadSchemaFromJSONFile(jsonFile)).renderThemeJson(); + /* eslint-disable @typescript-eslint/no-implied-eval */ + const themeObject = new Function(`return ${themeJson}`); + /* eslint-enable @typescript-eslint/no-implied-eval */ + return themeObject(); +} + describe('react theme renderer tests', () => { describe('theme', () => { it('should render the theme', () => { @@ -41,11 +52,20 @@ describe('react theme renderer tests', () => { }); describe('renderThemeJson', () => { - it('should render theme json correctly', () => { + it('should render theme json successfully', () => { const rendererFactory = new StudioTemplateRendererFactory( (theme: StudioTheme) => new ReactThemeStudioTemplateRenderer(theme, {}), ); expect(rendererFactory.buildRenderer(loadSchemaFromJSONFile('theme')).renderThemeJson()).toMatchSnapshot(); }); + + it('should render theme json with breakpoints successfully', () => { + const themeObject = generateThemeObject('themeWithBreakpoints'); + expect(themeObject).toBeDefined(); + expect(typeof themeObject.breakpoints.values.base).toBe('number'); + expect(themeObject.breakpoints.values.base).toEqual(0); + expect(typeof themeObject.breakpoints.defaultBreakpoint).toBe('string'); + expect(themeObject.breakpoints.defaultBreakpoint).toBe('base'); + }); }); }); diff --git a/packages/codegen-ui-react/lib/react-required-dependency-provider.ts b/packages/codegen-ui-react/lib/react-required-dependency-provider.ts index 73ee0a981..8a8b79dcd 100644 --- a/packages/codegen-ui-react/lib/react-required-dependency-provider.ts +++ b/packages/codegen-ui-react/lib/react-required-dependency-provider.ts @@ -24,7 +24,7 @@ export class ReactRequiredDependencyProvider extends RequiredDependencyProvider< return [ { dependencyName: '@aws-amplify/ui-react', - supportedSemVerPattern: '^3.10.0', + supportedSemVerPattern: '^3.1.0', reason: 'Required to leverage amplify ui primitives, and studio component helper functions.', }, ]; 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 899c43a3f..8a199e87f 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 @@ -21,6 +21,7 @@ import { ObjectLiteralExpression, StringLiteral, PropertyAssignment, + NumericLiteral, } from 'typescript'; import { StudioTemplateRenderer, @@ -137,12 +138,21 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer< factory.createStringLiteral(this.component.name), ), ] - .concat(this.buildThemeValues(this.component.values)) + .concat(this.splitAndBuildThemeValues(this.component.values)) .concat(this.buildThemeOverrides(this.component.overrides)), true, ); } + splitAndBuildThemeValues(values: StudioThemeValues[]): PropertyAssignment[] { + return values.map(({ key, value }) => { + if (key !== 'breakpoints') { + return factory.createPropertyAssignment(factory.createIdentifier(key), this.buildThemeValue(value)); + } + return factory.createPropertyAssignment(factory.createIdentifier(key), this.buildThemeBreakpointValue(value)); + }); + } + /* Removes children and value (needed for smithy) from theme values json * * tokens: { @@ -169,6 +179,40 @@ export class ReactThemeStudioTemplateRenderer extends StudioTemplateRenderer< throw new InvalidInputError(`Invalid theme value: ${JSON.stringify(value)}`); } + /* Removes children and value (needed for smithy) from theme values json + * + * breakpoints: { + * values: { + * base: 0, + * small: 480, + * ... + * } + * defaultBreakpoint: "base", + * ... + */ + buildThemeBreakpointValues(values: StudioThemeValues[]): PropertyAssignment[] { + return values.map(({ key, value }) => + factory.createPropertyAssignment(factory.createIdentifier(key), this.buildThemeBreakpointValue(value)), + ); + } + + buildThemeBreakpointValue(themeValue: StudioThemeValue): ObjectLiteralExpression | StringLiteral | NumericLiteral { + const { children, value } = themeValue; + if (children) { + if (children[0].key === 'value') { + return this.buildThemeBreakpointValue({ value: children[0].value.value }); + } + return factory.createObjectLiteralExpression(this.buildThemeBreakpointValues(children)); + } + if (value) { + if (/^[0-9]+$/.test(value)) { + return factory.createNumericLiteral(parseInt(value, 10)); + } + return factory.createStringLiteral(value); + } + throw new InvalidInputError(`Invalid theme value: ${JSON.stringify(value)}`); + } + /* builds special case theme value overrides becuase it is an array * * overrides: [ diff --git a/packages/codegen-ui-react/package-lock.json b/packages/codegen-ui-react/package-lock.json index 0c2988f82..23e256ca1 100644 --- a/packages/codegen-ui-react/package-lock.json +++ b/packages/codegen-ui-react/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aws-amplify/codegen-ui-react", - "version": "2.2.1", + "version": "2.3.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@aws-amplify/codegen-ui-react", - "version": "2.2.1", + "version": "2.3.1", "license": "Apache-2.0", "dependencies": { "@typescript/vfs": "~1.3.5", diff --git a/packages/codegen-ui-react/package.json b/packages/codegen-ui-react/package.json index b423f3306..dba9f348e 100644 --- a/packages/codegen-ui-react/package.json +++ b/packages/codegen-ui-react/package.json @@ -1,6 +1,6 @@ { "name": "@aws-amplify/codegen-ui-react", - "version": "2.2.1", + "version": "2.3.1", "description": "Amplify UI React code generation implementation", "author": "Amazon Web Services", "repository": "https://github.com/aws-amplify/amplify-codegen-ui.git", @@ -13,6 +13,7 @@ ], "scripts": { "test": "jest", + "test:ci": "jest --ci --maxWorkers=30%", "test:update": "jest --updateSnapshot", "build": "tsc -p tsconfig.build.json", "build:watch": "npm run build -- --watch" @@ -26,7 +27,7 @@ "semver": "^7.3.5" }, "dependencies": { - "@aws-amplify/codegen-ui": "2.2.1", + "@aws-amplify/codegen-ui": "2.3.1", "@typescript/vfs": "~1.3.5", "typescript": "~4.4.4" }, diff --git a/packages/codegen-ui/CHANGELOG.md b/packages/codegen-ui/CHANGELOG.md index b37dbc161..93945bbee 100644 --- a/packages/codegen-ui/CHANGELOG.md +++ b/packages/codegen-ui/CHANGELOG.md @@ -3,6 +3,20 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.3.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.3.0...v2.3.1) (2022-07-15) + +**Note:** Version bump only for package @aws-amplify/codegen-ui + +# [2.3.0](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.1...v2.3.0) (2022-07-14) + +### Bug Fixes + +- handle auth prop in concat ([f7d645e](https://github.com/aws-amplify/amplify-codegen-ui/commit/f7d645e07e91848465e92f450e81d6ed92604057)) + +### Features + +- adding breakpoint functionality in theme generation ([#515](https://github.com/aws-amplify/amplify-codegen-ui/issues/515)) ([28f97aa](https://github.com/aws-amplify/amplify-codegen-ui/commit/28f97aa7a290e3fd25efc6f0d51a39403d79b947)) + ## [2.2.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.0...v2.2.1) (2022-06-15) **Note:** Version bump only for package @aws-amplify/codegen-ui diff --git a/packages/codegen-ui/example-schemas/themeWithBreakpoints.json b/packages/codegen-ui/example-schemas/themeWithBreakpoints.json new file mode 100644 index 000000000..38be791ba --- /dev/null +++ b/packages/codegen-ui/example-schemas/themeWithBreakpoints.json @@ -0,0 +1,180 @@ +{ + "id": "1234-5678-9010", + "name": "MyTheme", + "values": [ + { + "key": "tokens", + "value": { + "children": [ + { + "key": "components", + "value": { + "children": [ + { + "key": "alert", + "value": { + "children": [ + { + "key": "backgroundColor", + "value": { + "value": "hsl(210, 5%, 90%)" + } + }, + { + "key": "padding", + "value": { + "value": "0.75rem 1rem" + } + }, + { + "key": "info", + "value": { + "children": [ + { + "key": "backgroundColor", + "value": { + "value": "hsl(220, 85%, 85%)" + } + } + ] + } + }, + { + "key": "error", + "value": { + "children": [ + { + "key": "backgroundColor", + "value": { + "value": "hsl(0, 75%, 85%)" + } + } + ] + } + }, + { + "key": "warning", + "value": { + "children": [ + { + "key": "backgroundColor", + "value": { + "value": "hsl(30, 75%, 85%)" + } + } + ] + } + }, + { + "key": "success", + "value": { + "children": [ + { + "key": "backgroundColor", + "value": { + "value": "hsl(130, 75%, 85%)" + } + } + ] + } + } + ] + } + } + ] + } + } + ] + } + }, + { + "key": "breakpoints", + "value": { + "children": [ + { + "key": "values", + "value": { + "children": [ + { + "key": "base", + "value": { + "children": [ + { + "key": "value", + "value": { + "value": "0" + } + } + ] + } + } + ] + } + }, + { + "key": "defaultBreakpoint", + "value": { + "children": [ + { + "key": "value", + "value": { + "value": "base" + } + } + ] + } + } + ] + } + } + ], + "overrides": [ + { + "key": "colorMode", + "value": { + "value": "dark" + } + }, + { + "key": "tokens", + "value": { + "children": [ + { + "key": "colors", + "value": { + "children": [ + { + "key": "black", + "value": { + "children": [ + { + "key": "value", + "value": { + "value": "#fff" + } + } + ] + } + }, + { + "key": "white", + "value": { + "children": [ + { + "key": "value", + "value": { + "value": "#000" + } + } + ] + } + } + ] + } + } + ] + } + } + ], + "schemaVersion": "1.0" + } \ No newline at end of file diff --git a/packages/codegen-ui/package-lock.json b/packages/codegen-ui/package-lock.json index 944b0d048..658b2f91a 100644 --- a/packages/codegen-ui/package-lock.json +++ b/packages/codegen-ui/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aws-amplify/codegen-ui", - "version": "2.2.1", + "version": "2.3.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@aws-amplify/codegen-ui", - "version": "2.2.1", + "version": "2.3.1", "license": "Apache-2.0", "dependencies": { "yup": "^0.32.11" diff --git a/packages/codegen-ui/package.json b/packages/codegen-ui/package.json index 17945cdb9..8c286808c 100644 --- a/packages/codegen-ui/package.json +++ b/packages/codegen-ui/package.json @@ -1,6 +1,6 @@ { "name": "@aws-amplify/codegen-ui", - "version": "2.2.1", + "version": "2.3.1", "description": "generic component code generation interface definitions", "author": "Amazon Web Services", "homepage": "https://docs.amplify.aws/", @@ -13,6 +13,7 @@ ], "scripts": { "test": "jest", + "test:ci": "jest --ci --maxWorkers=30%", "test:update": "jest --updateSnapshot", "build": "tsc -p tsconfig.build.json", "build:watch": "npm run build -- --watch" diff --git a/packages/test-generator/CHANGELOG.md b/packages/test-generator/CHANGELOG.md index 04e84f771..25ea710e6 100644 --- a/packages/test-generator/CHANGELOG.md +++ b/packages/test-generator/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.3.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.3.0...v2.3.1) (2022-07-15) + +**Note:** Version bump only for package @aws-amplify/codegen-ui-test-generator + +# [2.3.0](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.1...v2.3.0) (2022-07-14) + +### Bug Fixes + +- handle auth prop in concat ([f7d645e](https://github.com/aws-amplify/amplify-codegen-ui/commit/f7d645e07e91848465e92f450e81d6ed92604057)) + ## [2.2.1](https://github.com/aws-amplify/amplify-codegen-ui/compare/v2.2.0...v2.2.1) (2022-06-15) **Note:** Version bump only for package @aws-amplify/codegen-ui-test-generator diff --git a/packages/test-generator/integration-test-templates/cypress/e2e/primitives-spec.cy.ts b/packages/test-generator/integration-test-templates/cypress/e2e/primitives-spec.cy.ts index d82dea251..010511678 100644 --- a/packages/test-generator/integration-test-templates/cypress/e2e/primitives-spec.cy.ts +++ b/packages/test-generator/integration-test-templates/cypress/e2e/primitives-spec.cy.ts @@ -265,9 +265,9 @@ describe('Primitives', () => { cy.get('#slider-field') .find('.amplify-sliderfield') .within(() => { + cy.get('.amplify-label').contains('50'); cy.get('.amplify-label').within(() => { cy.get('span').eq(0).contains('Slider'); - cy.get('span').eq(1).contains('50'); }); cy.get('.amplify-sliderfield__group') .find('span') @@ -278,7 +278,6 @@ describe('Primitives', () => { }); }); }); - describe('StepperField', () => { it('Basic', () => { cy.get('#stepper-field').within(() => { diff --git a/packages/test-generator/package-lock.json b/packages/test-generator/package-lock.json index f6c53b65d..10a7def45 100644 --- a/packages/test-generator/package-lock.json +++ b/packages/test-generator/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aws-amplify/codegen-ui-test-generator", - "version": "2.2.1", + "version": "2.3.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@aws-amplify/codegen-ui-test-generator", - "version": "2.2.1", + "version": "2.3.1", "license": "Apache-2.0", "dependencies": { "@types/node": "^15.12.1", diff --git a/packages/test-generator/package.json b/packages/test-generator/package.json index 020b4c3a1..14ab48b31 100644 --- a/packages/test-generator/package.json +++ b/packages/test-generator/package.json @@ -1,6 +1,6 @@ { "name": "@aws-amplify/codegen-ui-test-generator", - "version": "2.2.1", + "version": "2.3.1", "description": "Test generator with sample JSON files", "author": "Amazon Web Services", "repository": "https://github.com/aws-amplify/amplify-codegen-ui.git", @@ -19,8 +19,8 @@ "dist/**" ], "dependencies": { - "@aws-amplify/codegen-ui": "2.2.1", - "@aws-amplify/codegen-ui-react": "2.2.1", + "@aws-amplify/codegen-ui": "2.3.1", + "@aws-amplify/codegen-ui-react": "2.3.1", "@types/node": "^15.12.1", "loglevel": "^1.7.1", "typescript": "^4.2.4"