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

[ericclemmons]

[Delivers #170557495]

This supersedes #4340, which had too many conflicts to bother with.

Scope

• Adds framework bindings for Angular (@aws-amplify/ui-angular), React (@aws-amplify/ui-react), and Vue (@aws-amplify/ui-vue).
• Does not solve stylistic differences & specificity problems.
• Does not solve event/bus/hub differences.
• Does not introduce HoCs.

Building

1. yarn workspace @aws-amplify/ui-components build
2. yarn workspace @aws-amplify/ui-react build
3. yarn workspace @aws-amplify/ui-angular build
4. yarn workspace @aws-amplify/ui-vue build

Demo

See: https://github.com/aws-amplify/amplify-js-samples-staging/pull/39

Action Items

• Create bindings as @aws-amplify/ui-react.

• Stories to validate <AmplifyAuthenticator /> usage for React.

  

• Create bindings as @aws-amplify/ui-angular.

• Stories to validate <AmplifyAuthenticator /> usage for Angular.

• HTML samples compat (@jordanranz).

• React samples compat.

  Styles should be resolved in another PR:

  

  Functionality will need to be fixed in another PR:

  

• Angular samples compat.

  Styling to be addressed, but <amplify-authenticator> is practically a drop-in replacement:

  

• Bring over AmplifyService from aws-amplify-angular, but to what degree?

  amplify-js/packages/aws-amplify-angular/src/providers/amplify.service.ts

  Line 24 in b824b1a

  export class AmplifyService {

• Vue samples compat.

  

• Create @aws-amplify/ui-vue.

• v-bind:federated="federated" passes [Object object]. The solution is to use .prop via :federated.prop="federated":

  

• Remove extraneous dependencies originally found in from https://github.com/ionic-team/stencil-ds-plugins-demo/ and replace build process with the one unused for the other aws-amplify packages. Going to minimize dependencies, but not use the same build.js script due to a huge amount of TypeScript errors 😱

Notes

• Guide: https://github.com/ionic-team/stencil-ds-plugins#setup-of-react-component-library
• state-tunnel isn't supported: Does this work for libraries that use stencil-state-tunnel? ionic-team/stencil-ds-output-targets#10
• --dev prevents react/angular output targets: react-output-target is skipped with --dev ionic-team/stencil-ds-output-targets#28
• Unsure if Vue's bundling is smart enough to recognized used vs. unused components: https://stenciljs.com/docs/vue
• https://stenciljs.com/docs/angular
• https://stenciljs.com/docs/react

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[ericclemmons]

Can't do stories for Angular, primarily since it lacks a run-time that I could use as a decorator (the same way I'm rendering React within HTML).

The ideal solution is part of 6.0.0 😱:

storybookjs/storybook#3889

Instead, I'll have to keep experimenting with the bindings output (+ the production output) and yarn link it to test with our samples repo:

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

[lgtm-com]

This pull request fixes 1 alert when merging 2f608de into 1aa4034 - view on LGTM.com

fixed alerts:

• 1 for Unused variable, import, function or class

[ericclemmons]

@jordanranz Looking through the PR and I was able to reduce the "noise" via .gitattributes, but require #4705 to really get it down.

[codecov]

Codecov Report

Merging #4676 into ui-components/master will not change coverage.
The diff coverage is n/a.

@@                 Coverage Diff                  @@
##           ui-components/master   #4676   +/-   ##
====================================================
  Coverage                  78.6%   78.6%           
====================================================
  Files                       164     164           
  Lines                      8819    8819           
  Branches                   1765    1765           
====================================================
  Hits                       6932    6932           
  Misses                     1747    1747           
  Partials                    140     140

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 72b269a...59f9c33. Read the comment docs.

[lgtm-com]

This pull request fixes 1 alert when merging ceee528 into bc0ae89 - view on LGTM.com

fixed alerts:

• 1 for Unused variable, import, function or class

[ericclemmons]

Alright, #4705 got this down to the essentials! package.json updates, and a bit of configuration.

[lgtm-com]

This pull request fixes 1 alert when merging 72b269a into b617735 - view on LGTM.com

fixed alerts:

• 1 for Unused variable, import, function or class

[jordanranz]

LGTM

[sammartinez]

Curious on the . vs :

[ericclemmons]

Shamelessly copy/pasted from Stencil's demo, as their Angular example relies on custom, noisy scripts to work :(

I'm fine with changing to : to match our other conventions, however. I anticipated this would change once we adapted our ./build.js script for convention, but I passed on that for this PR because of the level of effort involved.

[lgtm-com]

This pull request fixes 1 alert when merging 9b85672 into 1d568b6 - view on LGTM.com

fixed alerts:

• 1 for Unused variable, import, function or class

[lgtm-com]

This pull request fixes 1 alert when merging 59f9c33 into 1d568b6 - view on LGTM.com

fixed alerts:

• 1 for Unused variable, import, function or class

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.