Merge main

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

lerna.json

@@ -3,7 +3,7 @@
     "packages/*"
   ],
   "exact": true,
-  "version": "2.2.1",
+  "version": "2.3.1",
   "command": {
     "version": {
       "message": "chore(release): %s"

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",

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

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: {

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');
+    });
   });
 });

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.',
       },
     ];

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: [

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"
   },

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