Skip to content

Commit 407089f

Browse files
ericclemmonsericclemmons
authored
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 stenciljs/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
1 parent 1d568b6 commit 407089f

32 files changed

+459
-69
lines changed

‎.gitattributes

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
**/*.d.ts linguist-generated=true
2+
yarn.lock linguist-generated=true

‎packages/amplify-ui-angular/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
src/directives/proxies.ts

‎packages/amplify-ui-angular/package.json

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "@aws-amplify/ui-angular",
3+
"version": "0.0.1",
4+
"description": "Angular specific wrapper for @aws-amplify/ui-components",
5+
"publishConfig": {
6+
"access": "public"
7+
},
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/aws-amplify/amplify-js.git"
11+
},
12+
"scripts": {
13+
"build": "npm run build.ng",
14+
"build.link": "npm run build && node scripts/link-copy.js",
15+
"build.fesm": "rollup --config ./scripts/rollup.config.js",
16+
"build.ng": "npm run build.es2015 && npm run build.es5",
17+
"build.es2015": "ngc -p tsconfig.json && rollup --config ./scripts/rollup.config.js",
18+
"build.es5": "ngc -p tsconfig.legacy.json && rollup --config ./scripts/rollup.config.legacy.js",
19+
"lint": "npm run lint.ts",
20+
"lint.ts": "tslint --project .",
21+
"lint.fix": "tslint --project . --fix",
22+
"prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
23+
"test": "echo 'angular no tests yet'",
24+
"tsc": "tsc -p .",
25+
"validate": "npm i && npm run lint && npm run test && npm run build"
26+
},
27+
"module": "dist/fesm5.js",
28+
"main": "dist/fesm5.js",
29+
"types": "dist/core.d.ts",
30+
"files": [
31+
"dist/"
32+
],
33+
"dependencies": {
34+
"@aws-amplify/ui-components": "*",
35+
"tslib": "^1.9.3"
36+
},
37+
"devDependencies": {
38+
"@angular/compiler-cli": "^7.2.1",
39+
"@angular/core": "^7.2.1",
40+
"rollup": "^1.1.2",
41+
"rollup-plugin-node-resolve": "^4.0.0",
42+
"rxjs": "^6.2.0",
43+
"tsickle": "^0.34.0",
44+
"typescript": "3.2.4",
45+
"zone.js": "^0.8.28",
46+
"tslint": "^5.12.1"
47+
}
48+
}

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
3+
export default {
4+
input: 'build/es2015/core.js',
5+
output: {
6+
file: 'dist/fesm2015.js',
7+
format: 'es'
8+
},
9+
external: (id) => {
10+
// inline @ionic/core deps
11+
if (id === '@ionic/core') {
12+
return false;
13+
}
14+
// anything else is external
15+
// Windows: C:\xxxxxx\xxx
16+
const colonPosition = 1;
17+
return !(id.startsWith('.') || id.startsWith('/') || id.charAt(colonPosition) === ':');
18+
},
19+
plugins: [
20+
resolve({
21+
module: true,
22+
})
23+
]
24+
};

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

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import config from './rollup.config';
2+
3+
const newConfig = {
4+
...config,
5+
input: 'build/es5/core.js',
6+
};
7+
newConfig.output.file = 'dist/fesm5.js';
8+
9+
export { newConfig as default };

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { defineCustomElements } from '@aws-amplify/ui-components/loader';
3+
4+
import { AmplifyAuthenticator } from './directives/proxies';
5+
6+
defineCustomElements(window);
7+
8+
const DECLARATIONS = [AmplifyAuthenticator];
9+
10+
@NgModule({
11+
declarations: DECLARATIONS,
12+
exports: DECLARATIONS,
13+
imports: [],
14+
providers: [],
15+
})
16+
export class AmplifyModule {}

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

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// DIRECTIVES
2+
export * from './directives/proxies';
3+
4+
// PACKAGE MODULE
5+
export { AmplifyModule } from './amplify-module';

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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"angularCompilerOptions": {
3+
"annotateForClosureCompiler": true,
4+
"strictMetadataEmit": true,
5+
"flatModuleOutFile": "core.js",
6+
"flatModuleId": "@ionic/angular",
7+
"skipTemplateCodegen": true,
8+
"fullTemplateTypeCheck": false
9+
},
10+
"compilerOptions": {
11+
"alwaysStrict": true,
12+
"strict": true,
13+
"allowSyntheticDefaultImports": true,
14+
"allowUnreachableCode": false,
15+
"declaration": true,
16+
"declarationDir": "dist",
17+
"experimentalDecorators": true,
18+
"forceConsistentCasingInFileNames": true,
19+
"lib": ["dom", "es2017"],
20+
"module": "es2015",
21+
"moduleResolution": "node",
22+
"noImplicitAny": true,
23+
"noImplicitReturns": true,
24+
"noUnusedLocals": false,
25+
"noUnusedParameters": true,
26+
"outDir": "build/es2015",
27+
"pretty": true,
28+
"removeComments": false,
29+
"importHelpers": true,
30+
"rootDir": "src",
31+
"strictPropertyInitialization": false,
32+
"target": "es2015"
33+
},
34+
"exclude": ["node_modules"],
35+
"files": ["src/index.ts"]
36+
}

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

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "./tsconfig.json",
3+
"compilerOptions": {
4+
"target": "es5",
5+
"declarationDir": "build/es5",
6+
"outDir": "build/es5"
7+
}
8+
}

‎packages/amplify-ui-components/.gitattributes

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
src/components/**/readme.md linguist-generated=true

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "amplify-ui-components-loader",
3+
"typings": "../dist/loader/index.d.ts",
4+
"module": "../dist/loader/index.mjs",
5+
"main": "../dist/loader/index.cjs.js",
6+
"node:main": "../dist/loader/node-main.js",
7+
"jsnext:main": "../dist/loader/index.es2017.mjs",
8+
"es2015": "../dist/loader/index.es2017.mjs",
9+
"es2017": "../dist/loader/index.es2017.mjs",
10+
"unpkg": "../dist/loader/cdn.js"
11+
}

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
"test:update-screenshot": "rm -f screenshot/builds/master.json && rm -f screenshot/images/* && stencil test --spec --e2e --screenshot --update-screenshot",
2525
"test:watch": "stencil test --spec --e2e --watchAll",
2626
"stencil": "stencil build --docs-readme",
27-
"stencil:watch": "stencil build --dev --watch",
28-
"start": "stencil build --dev --watch --serve",
27+
"stencil:watch": "stencil build --watch",
28+
"start": "stencil build --watch --serve",
2929
"storybook": "concurrently 'start-storybook -p 3000 -s ./www' 'yarn:stencil:watch' --raw",
3030
"build-with-test": "npm run clean && npm test && npm run stencil",
3131
"build": "npm run clean && npm run stencil",
@@ -41,7 +41,8 @@
4141
},
4242
"devDependencies": {
4343
"@stencil/core": "^1.8.4",
44-
"@stencil/state-tunnel": "^1.0.1",
44+
"@stencil/angular-output-target": "^0.0.2",
45+
"@stencil/react-output-target": "^0.0.2",
4546
"@storybook/addon-a11y": "^5.2.5",
4647
"@storybook/addon-actions": "^5.2.5",
4748
"@storybook/addon-console": "^1.2.1",

‎packages/amplify-ui-components/src/components.d.ts

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { Component, State, Prop, h } from '@stencil/core';
1+
import { Component, State, Prop, h, Host } from '@stencil/core';
22
import { AuthState, CognitoUserInterface, FederatedConfig } from '../../common/types/auth-types';
3-
import { AuthStateTunnel } from '../../data/auth-state';
43
import { NO_AUTH_MODULE_FOUND, SIGNING_IN_WITH_HOSTEDUI_KEY, AUTHENTICATOR_AUTHSTATE } from '../../common/constants';
54
import { Auth } from '@aws-amplify/auth';
65
import { Logger } from '@aws-amplify/core';
@@ -98,18 +97,13 @@ export class AmplifyAuthenticator {
9897
}
9998

10099
render() {
101-
const tunnelState = {
102-
authState: this.authState,
103-
onAuthStateChange: this.onAuthStateChange,
104-
};
105-
106100
return (
107-
<AuthStateTunnel.Provider state={tunnelState}>
101+
<Host>
108102
{this.renderAuthComponent(this.authState)}
109103
<div hidden={this.authState !== AuthState.SignedIn}>
110104
<slot />
111105
</div>
112-
</AuthStateTunnel.Provider>
106+
</Host>
113107
);
114108
}
115109
}

‎packages/amplify-ui-components/src/components/amplify-authenticator/readme.md

-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

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

‎packages/amplify-ui-components/src/components/amplify-confirm-sign-in/readme.md

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/amplify-ui-components/src/components/amplify-examples/readme.md

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { newSpecPage } from '@stencil/core/testing';
2-
import { AmplifyIcon } from './amplify-icon'
2+
import { AmplifyIcon } from './amplify-icon';
33
import { icons } from './icons';
44

55
/** Helper functions */
@@ -12,15 +12,6 @@ async function snapshotTestIcon(iconName: string) {
1212
expect(page.root).toMatchSnapshot();
1313
}
1414

15-
async function snapshotOverrideTestIcon(iconName: string) {
16-
const page = await newSpecPage({
17-
components: [AmplifyIcon],
18-
html: `<amplify-icon name='${iconName}' override-style='true'></amplify-icon>`,
19-
});
20-
21-
expect(page.root).toMatchSnapshot();
22-
}
23-
2415
/** Tests */
2516
describe('amplify-icon spec:', () => {
2617
describe('Render logic ->', () => {
@@ -34,4 +25,4 @@ describe('amplify-icon spec:', () => {
3425
expect(icon.overrideStyle).toBe(false);
3526
});
3627
});
37-
});
28+
});

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

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { newSpecPage } from '@stencil/core/testing';
22
import { AmplifySignIn } from './amplify-sign-in';
33
import * as stories from './amplify-sign-in.stories';
44
// import { AmplifyForgotPasswordHint } from './amplify-forgot-password-hint';
5-
// import Tunnel from '../../data/auth-state';
65

76
const {
87
default: { title },

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

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

0 commit comments

Comments
 (0)