feat(@aws-amplify/ui-components): Framework Bindings for Authen… (#4676)

* yarn add @stencil/{angular,react}-output-target + updated @stencil/core

* Add reactOutputTarget to amplify-ui-react

* Add template from https://github.com/ionic-team/stencil-ds-react-template

* Update component definitions via stencil build

* Remove --dev flag to trigger reactOutputTarget

* Remove unused variable

* stencil build

* Initial build of @aws-amplify/ui-react

* Remove @stencil/state-tunnel

ionic-team/stencil-ds-output-targets#10

* Fix resolution of @aws-amplify/ui-components/loader

* Working build of @aws-amplify/ui-react

* Fix amplify-ui-react main/module paths

* Add AmplifyAuthenticator stories

* Don't build e2e/spec/stories

* Initial @aws-amplify/ui-angular build

* fix: Rename folders to match package name so yarn workspaces works
yarnpkg/yarn#5225 (comment)

* Update yarn.lock with @stencil/state-tunnel removed

* Revert 0e5398b

* Add @aws-amplify/ui-angular template

https://github.com/ionic-team/stencil-ds-plugins-demo/blob/master/packages/component-library-angular/package.json

* yarn workspace can't resolve "latest" if the package isn't published

* Remove unused ValueAccessorConfig

* Add @aws-amplify/ui-vue package

* Revert "Add AmplifyAuthenticator stories"

This reverts commit 08cbb08.

* Clean up @aws-amplify/ui-react package.json

* Clean up @aws-amplify/ui-vue package.json

* Clean up @aws-amplify/ui-angular package.json

* Update yarn.lock

* Remove & ignore auto-generated files

* Suppress auto-generated typings in diffs

* Suppress auto-generated readmes in diffs

* Remove parts of CRA-generated .gitignore

* Remove yarn.lock from PR diffs

* Update yarn.lock to match @stencil/core

* Update build with updated @stencil/core

* Add publicConfig to @aws-amplify/ui-* packages, per #4706

.gitattributes

@@ -0,0 +1,2 @@
+**/*.d.ts linguist-generated=true
+yarn.lock linguist-generated=true

packages/amplify-ui-angular/.gitignore

@@ -0,0 +1 @@
+src/directives/proxies.ts

packages/amplify-ui-angular/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@aws-amplify/ui-angular",
+	"version": "0.0.1",
+	"description": "Angular specific wrapper for @aws-amplify/ui-components",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/aws-amplify/amplify-js.git"
+	},
+	"scripts": {
+		"build": "npm run build.ng",
+		"build.link": "npm run build && node scripts/link-copy.js",
+		"build.fesm": "rollup --config ./scripts/rollup.config.js",
+		"build.ng": "npm run build.es2015 && npm run build.es5",
+		"build.es2015": "ngc -p tsconfig.json && rollup --config ./scripts/rollup.config.js",
+		"build.es5": "ngc -p tsconfig.legacy.json && rollup --config ./scripts/rollup.config.legacy.js",
+		"lint": "npm run lint.ts",
+		"lint.ts": "tslint --project .",
+		"lint.fix": "tslint --project . --fix",
+		"prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
+		"test": "echo 'angular no tests yet'",
+		"tsc": "tsc -p .",
+		"validate": "npm i && npm run lint && npm run test && npm run build"
+	},
+	"module": "dist/fesm5.js",
+	"main": "dist/fesm5.js",
+	"types": "dist/core.d.ts",
+	"files": [
+		"dist/"
+	],
+	"dependencies": {
+		"@aws-amplify/ui-components": "*",
+		"tslib": "^1.9.3"
+	},
+	"devDependencies": {
+		"@angular/compiler-cli": "^7.2.1",
+		"@angular/core": "^7.2.1",
+		"rollup": "^1.1.2",
+		"rollup-plugin-node-resolve": "^4.0.0",
+		"rxjs": "^6.2.0",
+		"tsickle": "^0.34.0",
+		"typescript": "3.2.4",
+		"zone.js": "^0.8.28",
+		"tslint": "^5.12.1"
+	}
+}

packages/amplify-ui-angular/scripts/rollup.config.js

@@ -0,0 +1,24 @@
+import resolve from 'rollup-plugin-node-resolve';
+
+export default {
+  input: 'build/es2015/core.js',
+  output: {
+    file: 'dist/fesm2015.js',
+    format: 'es'
+  },
+  external: (id) => {
+    // inline @ionic/core deps
+    if (id === '@ionic/core') {
+      return false;
+    }
+    // anything else is external
+    // Windows: C:\xxxxxx\xxx
+    const colonPosition = 1;
+    return !(id.startsWith('.') || id.startsWith('/') || id.charAt(colonPosition) === ':');
+  },
+  plugins: [
+    resolve({
+      module: true,
+    })
+  ]
+};

packages/amplify-ui-angular/scripts/rollup.config.legacy.js

@@ -0,0 +1,9 @@
+import config from './rollup.config';
+
+const newConfig = {
+  ...config,
+  input: 'build/es5/core.js',
+};
+newConfig.output.file = 'dist/fesm5.js';
+
+export { newConfig as default };

packages/amplify-ui-angular/src/amplify-module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { defineCustomElements } from '@aws-amplify/ui-components/loader';
+
+import { AmplifyAuthenticator } from './directives/proxies';
+
+defineCustomElements(window);
+
+const DECLARATIONS = [AmplifyAuthenticator];
+
+@NgModule({
+	declarations: DECLARATIONS,
+	exports: DECLARATIONS,
+	imports: [],
+	providers: [],
+})
+export class AmplifyModule {}

packages/amplify-ui-angular/src/index.ts

@@ -0,0 +1,5 @@
+// DIRECTIVES
+export * from './directives/proxies';
+
+// PACKAGE MODULE
+export { AmplifyModule } from './amplify-module';

packages/amplify-ui-angular/tsconfig.json

@@ -0,0 +1,36 @@
+{
+	"angularCompilerOptions": {
+		"annotateForClosureCompiler": true,
+		"strictMetadataEmit": true,
+		"flatModuleOutFile": "core.js",
+		"flatModuleId": "@ionic/angular",
+		"skipTemplateCodegen": true,
+		"fullTemplateTypeCheck": false
+	},
+	"compilerOptions": {
+		"alwaysStrict": true,
+		"strict": true,
+		"allowSyntheticDefaultImports": true,
+		"allowUnreachableCode": false,
+		"declaration": true,
+		"declarationDir": "dist",
+		"experimentalDecorators": true,
+		"forceConsistentCasingInFileNames": true,
+		"lib": ["dom", "es2017"],
+		"module": "es2015",
+		"moduleResolution": "node",
+		"noImplicitAny": true,
+		"noImplicitReturns": true,
+		"noUnusedLocals": false,
+		"noUnusedParameters": true,
+		"outDir": "build/es2015",
+		"pretty": true,
+		"removeComments": false,
+		"importHelpers": true,
+		"rootDir": "src",
+		"strictPropertyInitialization": false,
+		"target": "es2015"
+	},
+	"exclude": ["node_modules"],
+	"files": ["src/index.ts"]
+}

packages/amplify-ui-angular/tsconfig.legacy.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+      "target": "es5",
+      "declarationDir": "build/es5",
+      "outDir": "build/es5"
+    }
+  }

packages/amplify-ui-components/.gitattributes

@@ -0,0 +1 @@
+src/components/**/readme.md linguist-generated=true

packages/amplify-ui-components/loader/package.json

@@ -0,0 +1,11 @@
+{
+	"name": "amplify-ui-components-loader",
+	"typings": "../dist/loader/index.d.ts",
+	"module": "../dist/loader/index.mjs",
+	"main": "../dist/loader/index.cjs.js",
+	"node:main": "../dist/loader/node-main.js",
+	"jsnext:main": "../dist/loader/index.es2017.mjs",
+	"es2015": "../dist/loader/index.es2017.mjs",
+	"es2017": "../dist/loader/index.es2017.mjs",
+	"unpkg": "../dist/loader/cdn.js"
+}

packages/amplify-ui-components/package.json

@@ -24,8 +24,8 @@
     "test:update-screenshot": "rm -f screenshot/builds/master.json && rm -f screenshot/images/* && stencil test --spec --e2e --screenshot --update-screenshot",
     "test:watch": "stencil test --spec --e2e --watchAll",
     "stencil": "stencil build --docs-readme",
-    "stencil:watch": "stencil build --dev --watch",
-    "start": "stencil build --dev --watch --serve",
+    "stencil:watch": "stencil build --watch",
+    "start": "stencil build --watch --serve",
     "storybook": "concurrently 'start-storybook -p 3000 -s ./www' 'yarn:stencil:watch' --raw",
     "build-with-test": "npm run clean && npm test && npm run stencil",
     "build": "npm run clean && npm run stencil",
@@ -41,7 +41,8 @@
   },
   "devDependencies": {
     "@stencil/core": "^1.8.4",
-    "@stencil/state-tunnel": "^1.0.1",
+    "@stencil/angular-output-target": "^0.0.2",
+    "@stencil/react-output-target": "^0.0.2",
     "@storybook/addon-a11y": "^5.2.5",
     "@storybook/addon-actions": "^5.2.5",
     "@storybook/addon-console": "^1.2.1",

packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx

@@ -1,6 +1,5 @@
-import { Component, State, Prop, h } from '@stencil/core';
+import { Component, State, Prop, h, Host } from '@stencil/core';
 import { AuthState, CognitoUserInterface, FederatedConfig } from '../../common/types/auth-types';
-import { AuthStateTunnel } from '../../data/auth-state';
 import { NO_AUTH_MODULE_FOUND, SIGNING_IN_WITH_HOSTEDUI_KEY, AUTHENTICATOR_AUTHSTATE } from '../../common/constants';
 import { Auth } from '@aws-amplify/auth';
 import { Logger } from '@aws-amplify/core';
@@ -98,18 +97,13 @@ export class AmplifyAuthenticator {
   }
 
   render() {
-    const tunnelState = {
-      authState: this.authState,
-      onAuthStateChange: this.onAuthStateChange,
-    };
-
     return (
-      <AuthStateTunnel.Provider state={tunnelState}>
+      <Host>
         {this.renderAuthComponent(this.authState)}
         <div hidden={this.authState !== AuthState.SignedIn}>
           <slot />
         </div>
-      </AuthStateTunnel.Provider>
+      </Host>
     );
   }
 }

packages/amplify-ui-components/src/components/amplify-confirm-sign-in/amplify-confirm-sign-in.tsx

@@ -25,7 +25,7 @@ const logger = new Logger('ConfirmSignIn');
 })
 export class AmplifyConfirmSignIn {
   /** Fires when confirm sign in form is submitted */
-  @Prop() handleSubmit: (Event) => void = event => this.confirm(event);
+  @Prop() handleSubmit: (Event: Event) => void = event => this.confirm(event);
   /** Engages when invalid actions occur, such as missing field, etc. */
   @Prop() validationErrors: string;
   /** Used for header text in confirm sign in component */

packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.spec.ts

@@ -1,5 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing';
-import { AmplifyIcon } from './amplify-icon'
+import { AmplifyIcon } from './amplify-icon';
 import { icons } from './icons';
 
 /** Helper functions */
@@ -12,15 +12,6 @@ async function snapshotTestIcon(iconName: string) {
   expect(page.root).toMatchSnapshot();
 }
 
-async function snapshotOverrideTestIcon(iconName: string) {
-  const page = await newSpecPage({
-    components: [AmplifyIcon],
-    html: `<amplify-icon name='${iconName}' override-style='true'></amplify-icon>`,
-  });
-
-  expect(page.root).toMatchSnapshot();
-}
-
 /** Tests */
 describe('amplify-icon spec:', () => {
   describe('Render logic ->', () => {
@@ -34,4 +25,4 @@ describe('amplify-icon spec:', () => {
       expect(icon.overrideStyle).toBe(false);
     });
   });
-});
+});

packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.spec.ts

@@ -2,7 +2,6 @@ import { newSpecPage } from '@stencil/core/testing';
 import { AmplifySignIn } from './amplify-sign-in';
 import * as stories from './amplify-sign-in.stories';
 // import { AmplifyForgotPasswordHint } from './amplify-forgot-password-hint';
-// import Tunnel from '../../data/auth-state';
 
 const {
   default: { title },

packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx

@@ -23,7 +23,7 @@ const logger = new Logger('SignIn');
 })
 export class AmplifySignIn {
   /** Fires when sign in form is submitted */
-  @Prop() handleSubmit: (Event) => void = event => this.signIn(event);
+  @Prop() handleSubmit: (Event: Event) => void = event => this.signIn(event);
   /** Engages when invalid actions occur, such as missing field, etc. */
   @Prop() validationErrors: string;
   /** Used for header text in sign in component */