From d249efe4ac5d82360660a1d7445c6c19f6c3b82e Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Mon, 28 Nov 2022 16:34:23 -0800 Subject: [PATCH 1/8] chore: leveling with upstream --- .../src/directives/proxies.ts | 651 ++++++++++++++++++ .../www/host.config.json | 15 + packages/amplify-ui-components/www/index.html | 3 + packages/amplify-ui-react/src/components.ts | 65 ++ .../react-component-lib/createComponent.tsx | 69 ++ .../createControllerComponent.tsx | 71 ++ .../createOverlayComponent.tsx | 79 +++ .../src/react-component-lib/index.ts | 3 + .../utils/attachEventProps.ts | 87 +++ .../src/react-component-lib/utils/index.tsx | 31 + 10 files changed, 1074 insertions(+) create mode 100644 packages/amplify-ui-angular/src/directives/proxies.ts create mode 100644 packages/amplify-ui-components/www/host.config.json create mode 100644 packages/amplify-ui-components/www/index.html create mode 100644 packages/amplify-ui-react/src/components.ts create mode 100644 packages/amplify-ui-react/src/react-component-lib/createComponent.tsx create mode 100644 packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx create mode 100644 packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx create mode 100644 packages/amplify-ui-react/src/react-component-lib/index.ts create mode 100644 packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts create mode 100644 packages/amplify-ui-react/src/react-component-lib/utils/index.tsx diff --git a/packages/amplify-ui-angular/src/directives/proxies.ts b/packages/amplify-ui-angular/src/directives/proxies.ts new file mode 100644 index 00000000000..c16c9a043fa --- /dev/null +++ b/packages/amplify-ui-angular/src/directives/proxies.ts @@ -0,0 +1,651 @@ +/* tslint:disable */ +/* auto-generated angular directive proxies */ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core'; +import { fromEvent } from 'rxjs'; + +export const proxyInputs = (Cmp: any, inputs: string[]) => { + const Prototype = Cmp.prototype; + inputs.forEach(item => { + Object.defineProperty(Prototype, item, { + get() { return this.el[item]; }, + set(val: any) { this.z.runOutsideAngular(() => (this.el[item] = val)); } + }); + }); +}; + +export const proxyMethods = (Cmp: any, methods: string[]) => { + const Prototype = Cmp.prototype; + methods.forEach(methodName => { + Prototype[methodName] = function () { + const args = arguments; + return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args)); + }; + }); +}; + +export const proxyOutputs = (instance: any, el: any, events: string[]) => { + events.forEach(eventName => instance[eventName] = fromEvent(el, eventName)); +} + +// tslint:disable-next-line: only-arrow-functions +export function ProxyCmp(opts: { inputs?: any; methods?: any }) { + const decorator = function(cls: any){ + if (opts.inputs) { + proxyInputs(cls, opts.inputs); + } + if (opts.methods) { + proxyMethods(cls, opts.methods); + } + return cls; + }; + return decorator; +} + +import { Components } from '@aws-amplify/ui-components' + +export declare interface AmplifyAmazonButton extends Components.AmplifyAmazonButton {} +@ProxyCmp({inputs: ['clientId', 'handleAuthStateChange']}) +@Component({ selector: 'amplify-amazon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['clientId', 'handleAuthStateChange'] }) +export class AmplifyAmazonButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyAuthContainer extends Components.AmplifyAuthContainer {} + +@Component({ selector: 'amplify-auth-container', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) +export class AmplifyAuthContainer { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyAuthFields extends Components.AmplifyAuthFields {} +@ProxyCmp({inputs: ['formFields']}) +@Component({ selector: 'amplify-auth-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields'] }) +export class AmplifyAuthFields { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyAuth0Button extends Components.AmplifyAuth0Button {} +@ProxyCmp({inputs: ['config', 'handleAuthStateChange']}) +@Component({ selector: 'amplify-auth0-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['config', 'handleAuthStateChange'] }) +export class AmplifyAuth0Button { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyAuthenticator extends Components.AmplifyAuthenticator {} +@ProxyCmp({inputs: ['federated', 'handleAuthStateChange', 'hideToast', 'initialAuthState', 'usernameAlias']}) +@Component({ selector: 'amplify-authenticator', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['federated', 'handleAuthStateChange', 'hideToast', 'initialAuthState', 'usernameAlias'] }) +export class AmplifyAuthenticator { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyButton extends Components.AmplifyButton {} +@ProxyCmp({inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant']}) +@Component({ selector: 'amplify-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant'] }) +export class AmplifyButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyChatbot extends Components.AmplifyChatbot {} +@ProxyCmp({inputs: ['botName', 'botTitle', 'clearOnComplete', 'conversationModeOn', 'silenceThreshold', 'silenceTime', 'textEnabled', 'voiceEnabled', 'welcomeMessage']}) +@Component({ selector: 'amplify-chatbot', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['botName', 'botTitle', 'clearOnComplete', 'conversationModeOn', 'silenceThreshold', 'silenceTime', 'textEnabled', 'voiceEnabled', 'welcomeMessage'] }) +export class AmplifyChatbot { + chatCompleted!: EventEmitter; + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['chatCompleted']); + } +} + +export declare interface AmplifyCheckbox extends Components.AmplifyCheckbox {} +@ProxyCmp({inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value']}) +@Component({ selector: 'amplify-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value'] }) +export class AmplifyCheckbox { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyCodeField extends Components.AmplifyCodeField {} +@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) +@Component({ selector: 'amplify-code-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) +export class AmplifyCodeField { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyConfirmSignIn extends Components.AmplifyConfirmSignIn {} +@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user']}) +@Component({ selector: 'amplify-confirm-sign-in', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user'] }) +export class AmplifyConfirmSignIn { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyConfirmSignUp extends Components.AmplifyConfirmSignUp {} +@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user', 'usernameAlias']}) +@Component({ selector: 'amplify-confirm-sign-up', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user', 'usernameAlias'] }) +export class AmplifyConfirmSignUp { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyContainer extends Components.AmplifyContainer {} + +@Component({ selector: 'amplify-container', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) +export class AmplifyContainer { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyCountryDialCode extends Components.AmplifyCountryDialCode {} +@ProxyCmp({inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options']}) +@Component({ selector: 'amplify-country-dial-code', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options'] }) +export class AmplifyCountryDialCode { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyEmailField extends Components.AmplifyEmailField {} +@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) +@Component({ selector: 'amplify-email-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) +export class AmplifyEmailField { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyFacebookButton extends Components.AmplifyFacebookButton {} +@ProxyCmp({inputs: ['appId', 'handleAuthStateChange']}) +@Component({ selector: 'amplify-facebook-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['appId', 'handleAuthStateChange'] }) +export class AmplifyFacebookButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyFederatedButtons extends Components.AmplifyFederatedButtons {} +@ProxyCmp({inputs: ['authState', 'federated', 'handleAuthStateChange']}) +@Component({ selector: 'amplify-federated-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['authState', 'federated', 'handleAuthStateChange'] }) +export class AmplifyFederatedButtons { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyFederatedSignIn extends Components.AmplifyFederatedSignIn {} +@ProxyCmp({inputs: ['authState', 'federated']}) +@Component({ selector: 'amplify-federated-sign-in', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['authState', 'federated'] }) +export class AmplifyFederatedSignIn { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyForgotPassword extends Components.AmplifyForgotPassword {} +@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSend', 'handleSubmit', 'headerText', 'sendButtonText', 'submitButtonText', 'usernameAlias']}) +@Component({ selector: 'amplify-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSend', 'handleSubmit', 'headerText', 'sendButtonText', 'submitButtonText', 'usernameAlias'] }) +export class AmplifyForgotPassword { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyFormField extends Components.AmplifyFormField {} +@ProxyCmp({inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'name', 'placeholder', 'required', 'type', 'value']}) +@Component({ selector: 'amplify-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'name', 'placeholder', 'required', 'type', 'value'] }) +export class AmplifyFormField { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyFormSection extends Components.AmplifyFormSection {} +@ProxyCmp({inputs: ['handleSubmit', 'headerText', 'loading', 'secondaryFooterContent', 'submitButtonText', 'testDataPrefix']}) +@Component({ selector: 'amplify-form-section', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleSubmit', 'headerText', 'loading', 'secondaryFooterContent', 'submitButtonText', 'testDataPrefix'] }) +export class AmplifyFormSection { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyGoogleButton extends Components.AmplifyGoogleButton {} +@ProxyCmp({inputs: ['clientId', 'handleAuthStateChange']}) +@Component({ selector: 'amplify-google-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['clientId', 'handleAuthStateChange'] }) +export class AmplifyGoogleButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyGreetings extends Components.AmplifyGreetings {} +@ProxyCmp({inputs: ['handleAuthStateChange', 'logo', 'username']}) +@Component({ selector: 'amplify-greetings', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleAuthStateChange', 'logo', 'username'] }) +export class AmplifyGreetings { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyHint extends Components.AmplifyHint {} + +@Component({ selector: 'amplify-hint', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) +export class AmplifyHint { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyIcon extends Components.AmplifyIcon {} +@ProxyCmp({inputs: ['name']}) +@Component({ selector: 'amplify-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['name'] }) +export class AmplifyIcon { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyIconButton extends Components.AmplifyIconButton {} +@ProxyCmp({inputs: ['autoShowTooltip', 'name', 'tooltip']}) +@Component({ selector: 'amplify-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['autoShowTooltip', 'name', 'tooltip'] }) +export class AmplifyIconButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyInput extends Components.AmplifyInput {} +@ProxyCmp({inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'name', 'placeholder', 'required', 'type', 'value']}) +@Component({ selector: 'amplify-input', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'name', 'placeholder', 'required', 'type', 'value'] }) +export class AmplifyInput { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyLabel extends Components.AmplifyLabel {} +@ProxyCmp({inputs: ['htmlFor']}) +@Component({ selector: 'amplify-label', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['htmlFor'] }) +export class AmplifyLabel { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyLink extends Components.AmplifyLink {} +@ProxyCmp({inputs: ['role']}) +@Component({ selector: 'amplify-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['role'] }) +export class AmplifyLink { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyLoadingSpinner extends Components.AmplifyLoadingSpinner {} + +@Component({ selector: 'amplify-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) +export class AmplifyLoadingSpinner { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyNav extends Components.AmplifyNav {} + +@Component({ selector: 'amplify-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) +export class AmplifyNav { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyOauthButton extends Components.AmplifyOauthButton {} +@ProxyCmp({inputs: ['config']}) +@Component({ selector: 'amplify-oauth-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['config'] }) +export class AmplifyOauthButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyPasswordField extends Components.AmplifyPasswordField {} +@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) +@Component({ selector: 'amplify-password-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) +export class AmplifyPasswordField { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyPhoneField extends Components.AmplifyPhoneField {} +@ProxyCmp({inputs: ['dialCode', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) +@Component({ selector: 'amplify-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['dialCode', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) +export class AmplifyPhoneField { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyPhotoPicker extends Components.AmplifyPhotoPicker {} +@ProxyCmp({inputs: ['buttonText', 'handleClick', 'headerHint', 'headerTitle', 'placeholderHint', 'previewSrc']}) +@Component({ selector: 'amplify-photo-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['buttonText', 'handleClick', 'headerHint', 'headerTitle', 'placeholderHint', 'previewSrc'] }) +export class AmplifyPhotoPicker { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyPicker extends Components.AmplifyPicker {} +@ProxyCmp({inputs: ['acceptValue', 'inputHandler', 'pickerText']}) +@Component({ selector: 'amplify-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['acceptValue', 'inputHandler', 'pickerText'] }) +export class AmplifyPicker { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyRadioButton extends Components.AmplifyRadioButton {} +@ProxyCmp({inputs: ['checked', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'label', 'name', 'placeholder', 'value']}) +@Component({ selector: 'amplify-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['checked', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'label', 'name', 'placeholder', 'value'] }) +export class AmplifyRadioButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyRequireNewPassword extends Components.AmplifyRequireNewPassword {} +@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user']}) +@Component({ selector: 'amplify-require-new-password', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user'] }) +export class AmplifyRequireNewPassword { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyS3Album extends Components.AmplifyS3Album {} +@ProxyCmp({inputs: ['contentType', 'fileToKey', 'filter', 'handleOnError', 'handleOnLoad', 'identityId', 'level', 'path', 'picker', 'pickerText', 'sort', 'track']}) +@Component({ selector: 'amplify-s3-album', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['contentType', 'fileToKey', 'filter', 'handleOnError', 'handleOnLoad', 'identityId', 'level', 'path', 'picker', 'pickerText', 'sort', 'track'] }) +export class AmplifyS3Album { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyS3Image extends Components.AmplifyS3Image {} +@ProxyCmp({inputs: ['alt', 'body', 'contentType', 'handleOnError', 'handleOnLoad', 'identityId', 'imgKey', 'imgProps', 'level', 'path', 'track']}) +@Component({ selector: 'amplify-s3-image', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['alt', 'body', 'contentType', 'handleOnError', 'handleOnLoad', 'identityId', 'imgKey', 'imgProps', 'level', 'path', 'track'] }) +export class AmplifyS3Image { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyS3ImagePicker extends Components.AmplifyS3ImagePicker {} +@ProxyCmp({inputs: ['buttonText', 'contentType', 'fileToKey', 'headerHint', 'headerTitle', 'identityId', 'level', 'path', 'placeholderHint', 'track']}) +@Component({ selector: 'amplify-s3-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['buttonText', 'contentType', 'fileToKey', 'headerHint', 'headerTitle', 'identityId', 'level', 'path', 'placeholderHint', 'track'] }) +export class AmplifyS3ImagePicker { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyS3Text extends Components.AmplifyS3Text {} +@ProxyCmp({inputs: ['body', 'contentType', 'fallbackText', 'identityId', 'level', 'path', 'textKey', 'track']}) +@Component({ selector: 'amplify-s3-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['body', 'contentType', 'fallbackText', 'identityId', 'level', 'path', 'textKey', 'track'] }) +export class AmplifyS3Text { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyS3TextPicker extends Components.AmplifyS3TextPicker {} +@ProxyCmp({inputs: ['contentType', 'fallbackText', 'fileToKey', 'identityId', 'level', 'path', 'track']}) +@Component({ selector: 'amplify-s3-text-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['contentType', 'fallbackText', 'fileToKey', 'identityId', 'level', 'path', 'track'] }) +export class AmplifyS3TextPicker { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifySection extends Components.AmplifySection {} +@ProxyCmp({inputs: ['role']}) +@Component({ selector: 'amplify-section', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['role'] }) +export class AmplifySection { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifySelect extends Components.AmplifySelect {} +@ProxyCmp({inputs: ['fieldId', 'handleInputChange', 'options', 'selected']}) +@Component({ selector: 'amplify-select', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['fieldId', 'handleInputChange', 'options', 'selected'] }) +export class AmplifySelect { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifySelectMfaType extends Components.AmplifySelectMfaType {} +@ProxyCmp({inputs: ['MFATypes', 'authData', 'handleSubmit']}) +@Component({ selector: 'amplify-select-mfa-type', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['MFATypes', 'authData', 'handleSubmit'] }) +export class AmplifySelectMfaType { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifySignIn extends Components.AmplifySignIn {} +@ProxyCmp({inputs: ['federated', 'formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'hideSignUp', 'submitButtonText', 'usernameAlias']}) +@Component({ selector: 'amplify-sign-in', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['federated', 'formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'hideSignUp', 'submitButtonText', 'usernameAlias'] }) +export class AmplifySignIn { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifySignInButton extends Components.AmplifySignInButton {} +@ProxyCmp({inputs: ['provider']}) +@Component({ selector: 'amplify-sign-in-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['provider'] }) +export class AmplifySignInButton { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifySignOut extends Components.AmplifySignOut {} +@ProxyCmp({inputs: ['buttonText', 'handleAuthStateChange']}) +@Component({ selector: 'amplify-sign-out', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['buttonText', 'handleAuthStateChange'] }) +export class AmplifySignOut { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifySignUp extends Components.AmplifySignUp {} +@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSignUp', 'handleSubmit', 'haveAccountText', 'headerText', 'signInText', 'submitButtonText', 'usernameAlias', 'validationErrors']}) +@Component({ selector: 'amplify-sign-up', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSignUp', 'handleSubmit', 'haveAccountText', 'headerText', 'signInText', 'submitButtonText', 'usernameAlias', 'validationErrors'] }) +export class AmplifySignUp { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyStrike extends Components.AmplifyStrike {} + +@Component({ selector: 'amplify-strike', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) +export class AmplifyStrike { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyToast extends Components.AmplifyToast {} +@ProxyCmp({inputs: ['handleClose', 'message']}) +@Component({ selector: 'amplify-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleClose', 'message'] }) +export class AmplifyToast { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyTooltip extends Components.AmplifyTooltip {} +@ProxyCmp({inputs: ['shouldAutoShow', 'text']}) +@Component({ selector: 'amplify-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['shouldAutoShow', 'text'] }) +export class AmplifyTooltip { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyTotpSetup extends Components.AmplifyTotpSetup {} +@ProxyCmp({inputs: ['handleAuthStateChange', 'handleComplete', 'headerText', 'issuer', 'standalone', 'user']}) +@Component({ selector: 'amplify-totp-setup', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleAuthStateChange', 'handleComplete', 'headerText', 'issuer', 'standalone', 'user'] }) +export class AmplifyTotpSetup { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyUsernameField extends Components.AmplifyUsernameField {} +@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) +@Component({ selector: 'amplify-username-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) +export class AmplifyUsernameField { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} + +export declare interface AmplifyVerifyContact extends Components.AmplifyVerifyContact {} +@ProxyCmp({inputs: ['handleAuthStateChange', 'user']}) +@Component({ selector: 'amplify-verify-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleAuthStateChange', 'user'] }) +export class AmplifyVerifyContact { + protected el: HTMLElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + } +} diff --git a/packages/amplify-ui-components/www/host.config.json b/packages/amplify-ui-components/www/host.config.json new file mode 100644 index 00000000000..f4314c75f32 --- /dev/null +++ b/packages/amplify-ui-components/www/host.config.json @@ -0,0 +1,15 @@ +{ + "hosting": { + "headers": [ + { + "source": "/build/p-*", + "headers": [ + { + "key": "Cache-Control", + "value": "max-age=31556952, s-maxage=31556952, immutable" + } + ] + } + ] + } +} \ No newline at end of file diff --git a/packages/amplify-ui-components/www/index.html b/packages/amplify-ui-components/www/index.html new file mode 100644 index 00000000000..592349ea8fe --- /dev/null +++ b/packages/amplify-ui-components/www/index.html @@ -0,0 +1,3 @@ + Stencil Component Starter \ No newline at end of file diff --git a/packages/amplify-ui-react/src/components.ts b/packages/amplify-ui-react/src/components.ts new file mode 100644 index 00000000000..9131247c49e --- /dev/null +++ b/packages/amplify-ui-react/src/components.ts @@ -0,0 +1,65 @@ +/* eslint-disable */ +/* tslint:disable */ +/* auto-generated react proxies */ +import { createReactComponent } from './react-component-lib'; + +import { JSX } from '@aws-amplify/ui-components'; + +import { defineCustomElements, applyPolyfills } from '@aws-amplify/ui-components/loader'; + +applyPolyfills().then(() => defineCustomElements()); +export const AmplifyAmazonButton = /*@__PURE__*/createReactComponent('amplify-amazon-button'); +export const AmplifyAuthContainer = /*@__PURE__*/createReactComponent('amplify-auth-container'); +export const AmplifyAuthFields = /*@__PURE__*/createReactComponent('amplify-auth-fields'); +export const AmplifyAuth0Button = /*@__PURE__*/createReactComponent('amplify-auth0-button'); +export const AmplifyAuthenticator = /*@__PURE__*/createReactComponent('amplify-authenticator'); +export const AmplifyButton = /*@__PURE__*/createReactComponent('amplify-button'); +export const AmplifyChatbot = /*@__PURE__*/createReactComponent('amplify-chatbot'); +export const AmplifyCheckbox = /*@__PURE__*/createReactComponent('amplify-checkbox'); +export const AmplifyCodeField = /*@__PURE__*/createReactComponent('amplify-code-field'); +export const AmplifyConfirmSignIn = /*@__PURE__*/createReactComponent('amplify-confirm-sign-in'); +export const AmplifyConfirmSignUp = /*@__PURE__*/createReactComponent('amplify-confirm-sign-up'); +export const AmplifyContainer = /*@__PURE__*/createReactComponent('amplify-container'); +export const AmplifyCountryDialCode = /*@__PURE__*/createReactComponent('amplify-country-dial-code'); +export const AmplifyEmailField = /*@__PURE__*/createReactComponent('amplify-email-field'); +export const AmplifyFacebookButton = /*@__PURE__*/createReactComponent('amplify-facebook-button'); +export const AmplifyFederatedButtons = /*@__PURE__*/createReactComponent('amplify-federated-buttons'); +export const AmplifyFederatedSignIn = /*@__PURE__*/createReactComponent('amplify-federated-sign-in'); +export const AmplifyForgotPassword = /*@__PURE__*/createReactComponent('amplify-forgot-password'); +export const AmplifyFormField = /*@__PURE__*/createReactComponent('amplify-form-field'); +export const AmplifyFormSection = /*@__PURE__*/createReactComponent('amplify-form-section'); +export const AmplifyGoogleButton = /*@__PURE__*/createReactComponent('amplify-google-button'); +export const AmplifyGreetings = /*@__PURE__*/createReactComponent('amplify-greetings'); +export const AmplifyHint = /*@__PURE__*/createReactComponent('amplify-hint'); +export const AmplifyIcon = /*@__PURE__*/createReactComponent('amplify-icon'); +export const AmplifyIconButton = /*@__PURE__*/createReactComponent('amplify-icon-button'); +export const AmplifyInput = /*@__PURE__*/createReactComponent('amplify-input'); +export const AmplifyLabel = /*@__PURE__*/createReactComponent('amplify-label'); +export const AmplifyLink = /*@__PURE__*/createReactComponent('amplify-link'); +export const AmplifyLoadingSpinner = /*@__PURE__*/createReactComponent('amplify-loading-spinner'); +export const AmplifyNav = /*@__PURE__*/createReactComponent('amplify-nav'); +export const AmplifyOauthButton = /*@__PURE__*/createReactComponent('amplify-oauth-button'); +export const AmplifyPasswordField = /*@__PURE__*/createReactComponent('amplify-password-field'); +export const AmplifyPhoneField = /*@__PURE__*/createReactComponent('amplify-phone-field'); +export const AmplifyPhotoPicker = /*@__PURE__*/createReactComponent('amplify-photo-picker'); +export const AmplifyPicker = /*@__PURE__*/createReactComponent('amplify-picker'); +export const AmplifyRadioButton = /*@__PURE__*/createReactComponent('amplify-radio-button'); +export const AmplifyRequireNewPassword = /*@__PURE__*/createReactComponent('amplify-require-new-password'); +export const AmplifyS3Album = /*@__PURE__*/createReactComponent('amplify-s3-album'); +export const AmplifyS3Image = /*@__PURE__*/createReactComponent('amplify-s3-image'); +export const AmplifyS3ImagePicker = /*@__PURE__*/createReactComponent('amplify-s3-image-picker'); +export const AmplifyS3Text = /*@__PURE__*/createReactComponent('amplify-s3-text'); +export const AmplifyS3TextPicker = /*@__PURE__*/createReactComponent('amplify-s3-text-picker'); +export const AmplifySection = /*@__PURE__*/createReactComponent('amplify-section'); +export const AmplifySelect = /*@__PURE__*/createReactComponent('amplify-select'); +export const AmplifySelectMfaType = /*@__PURE__*/createReactComponent('amplify-select-mfa-type'); +export const AmplifySignIn = /*@__PURE__*/createReactComponent('amplify-sign-in'); +export const AmplifySignInButton = /*@__PURE__*/createReactComponent('amplify-sign-in-button'); +export const AmplifySignOut = /*@__PURE__*/createReactComponent('amplify-sign-out'); +export const AmplifySignUp = /*@__PURE__*/createReactComponent('amplify-sign-up'); +export const AmplifyStrike = /*@__PURE__*/createReactComponent('amplify-strike'); +export const AmplifyToast = /*@__PURE__*/createReactComponent('amplify-toast'); +export const AmplifyTooltip = /*@__PURE__*/createReactComponent('amplify-tooltip'); +export const AmplifyTotpSetup = /*@__PURE__*/createReactComponent('amplify-totp-setup'); +export const AmplifyUsernameField = /*@__PURE__*/createReactComponent('amplify-username-field'); +export const AmplifyVerifyContact = /*@__PURE__*/createReactComponent('amplify-verify-contact'); diff --git a/packages/amplify-ui-react/src/react-component-lib/createComponent.tsx b/packages/amplify-ui-react/src/react-component-lib/createComponent.tsx new file mode 100644 index 00000000000..cb489019eec --- /dev/null +++ b/packages/amplify-ui-react/src/react-component-lib/createComponent.tsx @@ -0,0 +1,69 @@ +import React from 'react'; + +import { + attachEventProps, + createForwardRef, + dashToPascalCase, + isCoveredByReact, +} from './utils/index'; + +interface IonicReactInternalProps extends React.HTMLAttributes { + forwardedRef?: React.Ref; + ref?: React.Ref; +} + +export const createReactComponent = (tagName: string) => { + const displayName = dashToPascalCase(tagName); + const ReactComponent = class extends React.Component> { + + private ref: React.RefObject; + + constructor(props: IonicReactInternalProps) { + super(props); + this.ref = React.createRef(); + } + + componentDidMount() { + this.componentDidUpdate(this.props); + } + + componentDidUpdate(prevProps: IonicReactInternalProps) { + const node = this.ref.current; + attachEventProps(node, this.props, prevProps); + } + + render() { + const { children, forwardedRef, style, className, ref, ...cProps } = this.props; + + const propsToPass = Object.keys(cProps).reduce((acc, name) => { + const isEventProp = name.indexOf('on') === 0 && name[2] === name[2].toUpperCase(); + const isDataProp = name.indexOf('data-') === 0; + const isAriaProp = name.indexOf('aria-') === 0; + + if (isEventProp) { + const eventName = name.substring(2).toLowerCase(); + if (typeof document !== "undefined" && isCoveredByReact(eventName)) { + (acc as any)[name] = (cProps as any)[name]; + } + } else if (isDataProp || isAriaProp) { + (acc as any)[name] = (cProps as any)[name]; + } + return acc; + }, {}); + + const newProps: any = { + ...propsToPass, + ref: this.ref, + style, + className, + }; + + return React.createElement(tagName, newProps, children); + } + + static get displayName() { + return displayName; + } + }; + return createForwardRef(ReactComponent, displayName); +}; diff --git a/packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx b/packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx new file mode 100644 index 00000000000..a20cda145a2 --- /dev/null +++ b/packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { attachEventProps } from './utils/attachEventProps'; + +interface LoadingElement { + present: () => any; + dismiss: () => any; +} + +interface ReactControllerProps { + isOpen: boolean; + onDidDismiss: (event: CustomEvent) => void; +} + +export function createControllerComponent< + OptionsType extends object, + LoadingElementType extends LoadingElement, + OverlayEventDetail +>(displayName: string, controller: { create: (options: any) => Promise }) { + const dismissEventName = `on${displayName}DidDismiss`; + + type Props = OptionsType & ReactControllerProps; + + return class ReactControllerComponent extends React.Component { + controller?: LoadingElementType; + + constructor(props: Props) { + super(props); + } + + static get displayName() { + return displayName; + } + + async componentDidMount() { + const { isOpen } = this.props; + if (isOpen) { + this.present(); + } + } + + async componentDidUpdate(prevProps: Props) { + if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) { + this.present(prevProps); + } + if ( + this.controller && + prevProps.isOpen !== this.props.isOpen && + this.props.isOpen === false + ) { + await this.controller.dismiss(); + } + } + + async present(prevProps?: Props) { + const { isOpen, onDidDismiss, ...cProps } = this.props; + const elementProps = { + ...cProps, + [dismissEventName]: onDidDismiss, + }; + this.controller = await controller.create({ + ...elementProps, + }); + attachEventProps(this.controller as any, elementProps, prevProps); + this.controller.present(); + } + + render(): null { + return null; + } + }; +} diff --git a/packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx b/packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx new file mode 100644 index 00000000000..ee3aeb1e49a --- /dev/null +++ b/packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { attachEventProps } from './utils/attachEventProps'; + +interface LoadingElement { + present: () => any; + dismiss: () => any; +} +interface ReactOverlayProps { + children?: React.ReactNode; + isOpen: boolean; + onDidDismiss?: (event: CustomEvent) => void; +} + +export function createOverlayComponent< + T extends object, + LoadingElementType extends LoadingElement, + OverlayEventDetail +>(displayName: string, controller: { create: (options: any) => Promise }) { + const dismissEventName = `on${displayName}DidDismiss`; + + type Props = T & ReactOverlayProps; + + return class ReactOverlayComponent extends React.Component { + controller?: LoadingElementType; + el: HTMLDivElement; + + constructor(props: Props) { + super(props); + this.el = document.createElement('div'); + } + + static get displayName() { + return displayName; + } + + componentDidMount() { + if (this.props.isOpen) { + this.present(); + } + } + + async componentDidUpdate(prevProps: Props) { + if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) { + this.present(prevProps); + } + if ( + this.controller && + prevProps.isOpen !== this.props.isOpen && + this.props.isOpen === false + ) { + await this.controller.dismiss(); + } + } + + async present(prevProps?: Props) { + // tslint:disable-next-line:no-empty + const { children, isOpen, onDidDismiss = () => {}, ...cProps } = this.props; + const elementProps = { + ...cProps, + [dismissEventName]: onDidDismiss, + }; + + this.controller = await controller.create({ + ...elementProps, + component: this.el, + componentProps: {}, + }); + + attachEventProps(this.controller as any, elementProps, prevProps); + + this.controller.present(); + } + + render() { + return ReactDOM.createPortal(this.props.children, this.el); + } + }; +} diff --git a/packages/amplify-ui-react/src/react-component-lib/index.ts b/packages/amplify-ui-react/src/react-component-lib/index.ts new file mode 100644 index 00000000000..bd820885e84 --- /dev/null +++ b/packages/amplify-ui-react/src/react-component-lib/index.ts @@ -0,0 +1,3 @@ +export { createReactComponent } from './createComponent'; +export { createControllerComponent } from './createControllerComponent'; +export { createOverlayComponent } from './createOverlayComponent'; diff --git a/packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts b/packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts new file mode 100644 index 00000000000..a811c78237a --- /dev/null +++ b/packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts @@ -0,0 +1,87 @@ +export function attachEventProps(node: HTMLElement, newProps: any, oldProps: any = {}) { + const className = getClassName(node.classList, newProps, oldProps); + if (className) { + node.className = className; + } + + Object.keys(newProps).forEach(name => { + if (name === 'children' || name === 'style' || name === 'ref' || name === 'className') { + return; + } + if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) { + const eventName = name.substring(2); + const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1); + + if (!isCoveredByReact(eventNameLc)) { + syncEvent(node, eventNameLc, newProps[name]); + } + } else { + (node as any)[name] = newProps[name]; + } + }); +} + +export function getClassName(classList: DOMTokenList, newProps: any, oldProps: any) { + // map the classes to Maps for performance + const currentClasses = arrayToMap(classList); + const incomingPropClasses = arrayToMap(newProps.className ? newProps.className.split(' ') : []); + const oldPropClasses = arrayToMap(oldProps.className ? oldProps.className.split(' ') : []); + const finalClassNames: string[] = []; + // loop through each of the current classes on the component + // to see if it should be a part of the classNames added + currentClasses.forEach(currentClass => { + if (incomingPropClasses.has(currentClass)) { + // add it as its already included in classnames coming in from newProps + finalClassNames.push(currentClass); + incomingPropClasses.delete(currentClass); + } else if (!oldPropClasses.has(currentClass)) { + // add it as it has NOT been removed by user + finalClassNames.push(currentClass); + } + }); + incomingPropClasses.forEach(s => finalClassNames.push(s)); + return finalClassNames.join(' '); +} + +/** + * Checks if an event is supported in the current execution environment. + * @license Modernizr 3.0.0pre (Custom Build) | MIT + */ +export function isCoveredByReact(eventNameSuffix: string, doc: Document = document) { + const eventName = 'on' + eventNameSuffix; + let isSupported = eventName in doc; + + if (!isSupported) { + const element = doc.createElement('div'); + element.setAttribute(eventName, 'return;'); + isSupported = typeof (element as any)[eventName] === 'function'; + } + + return isSupported; +} + +export function syncEvent(node: Element, eventName: string, newEventHandler: (e: Event) => any) { + const eventStore = (node as any).__events || ((node as any).__events = {}); + const oldEventHandler = eventStore[eventName]; + + // Remove old listener so they don't double up. + if (oldEventHandler) { + node.removeEventListener(eventName, oldEventHandler); + } + + if (newEventHandler != null) { + // Bind new listener. + node.addEventListener( + eventName, + (eventStore[eventName] = function handler(e: Event) { + newEventHandler.call(this, e); + }), + ); + } +} + +function arrayToMap(arr: string[] | DOMTokenList) { + const map = new Map(); + (arr as string[]).forEach((s: string) => map.set(s, s)); + return map; +} diff --git a/packages/amplify-ui-react/src/react-component-lib/utils/index.tsx b/packages/amplify-ui-react/src/react-component-lib/utils/index.tsx new file mode 100644 index 00000000000..e543f1b7e55 --- /dev/null +++ b/packages/amplify-ui-react/src/react-component-lib/utils/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +export const dashToPascalCase = (str: string) => + str + .toLowerCase() + .split('-') + .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)) + .join(''); + +export interface ReactProps { + class?: string; +} + +export type IonicReactExternalProps = PropType & React.HTMLAttributes & ReactProps; + +export const createForwardRef = ( + ReactComponent: any, + displayName: string, +) => { + const forwardRef = ( + props: IonicReactExternalProps, + ref: React.Ref, + ) => { + return ; + }; + forwardRef.displayName = displayName; + + return React.forwardRef(forwardRef); +}; + +export * from './attachEventProps'; From 60e242292838df74c998a6ef81219a6af41588e3 Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Tue, 29 Nov 2022 12:36:26 -0800 Subject: [PATCH 2/8] fix(amazon-cognito-identity-js): specify the right userAgent/deviceName when running on react native --- .../src/CognitoUser.js | 7 +++- packages/auth/__tests__/mockData.ts | 39 ++++++++++++++----- 2 files changed, 34 insertions(+), 12 deletions(-) diff --git a/packages/amazon-cognito-identity-js/src/CognitoUser.js b/packages/amazon-cognito-identity-js/src/CognitoUser.js index afeaf7c4c8c..bd2506550cd 100644 --- a/packages/amazon-cognito-identity-js/src/CognitoUser.js +++ b/packages/amazon-cognito-identity-js/src/CognitoUser.js @@ -55,8 +55,11 @@ import StorageHelper from './StorageHelper'; * @param {bool=} userConfirmationNecessary User must be confirmed. */ -const isBrowser = typeof navigator !== 'undefined'; -const userAgent = isBrowser ? navigator.userAgent : 'nodejs'; +const isNavigatorAvailable = typeof navigator !== 'undefined'; +var specificUserAgent = isNavigatorAvailable ? navigator.userAgent : ''; +if (isNavigatorAvailable && navigator.product === 'ReactNative') + specificUserAgent = 'react-native'; +const userAgent = isNavigatorAvailable ? specificUserAgent : 'nodejs'; /** @class */ export default class CognitoUser { diff --git a/packages/auth/__tests__/mockData.ts b/packages/auth/__tests__/mockData.ts index 4e5f28d1ca9..3ca3fc7ae3f 100644 --- a/packages/auth/__tests__/mockData.ts +++ b/packages/auth/__tests__/mockData.ts @@ -108,32 +108,51 @@ export const mockDeviceArray = [ DeviceLastAuthenticatedDate: 1623954284, DeviceLastModifiedDate: 1623954285.339, }, + { + DeviceAttributes: [ + { + Name: 'device_status', + Value: 'valid', + }, + { + Name: 'device_name', + Value: 'react-native', + }, + { + Name: 'last_ip_used', + Value: '45.17.45.126', + }, + ], + DeviceCreateDate: 1623954284.75, + DeviceKey: 'us-west-2_80ede80b-f333-49cd-af42-0ad22d8de9d4', + DeviceLastAuthenticatedDate: 1623954285, + DeviceLastModifiedDate: 1623954285.34, + }, ]; export const transformedMockData = [ { id: 'us-east-2_596db07d-793a-4070-8140-27f321ccf01c', - name: - 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', + name: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', }, { id: 'us-east-2_12ac778f-52a4-4fca-a628-237776159c91', - name: - 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', + name: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', }, { id: 'us-east-2_4a93aeb3-01af-42d8-891d-ee8aa1549398', - name: - 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36', + name: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36', }, { id: 'us-east-2_e0019223-e6b8-453f-a4e7-4e0d69dd4316', - name: - 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', + name: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', }, { id: 'us-east-2_1763f940-7136-4133-8cf5-eb073cad06c9', - name: - 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', + name: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.106 Safari/537.36', + }, + { + id: 'us-west-2_80ede80b-f333-49cd-af42-0ad22d8de9d4', + name: 'react-native', }, ]; From a26c7a7b49d865e6579a3b11f8d0ac8a1922af68 Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Tue, 29 Nov 2022 13:42:39 -0800 Subject: [PATCH 3/8] chore: remove ui packages to match with upstream main --- .../src/directives/proxies.ts | 651 ------------------ .../www/host.config.json | 15 - packages/amplify-ui-components/www/index.html | 3 - packages/amplify-ui-react/src/components.ts | 65 -- .../react-component-lib/createComponent.tsx | 69 -- .../createControllerComponent.tsx | 71 -- .../createOverlayComponent.tsx | 79 --- .../src/react-component-lib/index.ts | 3 - .../utils/attachEventProps.ts | 87 --- .../src/react-component-lib/utils/index.tsx | 31 - 10 files changed, 1074 deletions(-) delete mode 100644 packages/amplify-ui-angular/src/directives/proxies.ts delete mode 100644 packages/amplify-ui-components/www/host.config.json delete mode 100644 packages/amplify-ui-components/www/index.html delete mode 100644 packages/amplify-ui-react/src/components.ts delete mode 100644 packages/amplify-ui-react/src/react-component-lib/createComponent.tsx delete mode 100644 packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx delete mode 100644 packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx delete mode 100644 packages/amplify-ui-react/src/react-component-lib/index.ts delete mode 100644 packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts delete mode 100644 packages/amplify-ui-react/src/react-component-lib/utils/index.tsx diff --git a/packages/amplify-ui-angular/src/directives/proxies.ts b/packages/amplify-ui-angular/src/directives/proxies.ts deleted file mode 100644 index c16c9a043fa..00000000000 --- a/packages/amplify-ui-angular/src/directives/proxies.ts +++ /dev/null @@ -1,651 +0,0 @@ -/* tslint:disable */ -/* auto-generated angular directive proxies */ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, NgZone } from '@angular/core'; -import { fromEvent } from 'rxjs'; - -export const proxyInputs = (Cmp: any, inputs: string[]) => { - const Prototype = Cmp.prototype; - inputs.forEach(item => { - Object.defineProperty(Prototype, item, { - get() { return this.el[item]; }, - set(val: any) { this.z.runOutsideAngular(() => (this.el[item] = val)); } - }); - }); -}; - -export const proxyMethods = (Cmp: any, methods: string[]) => { - const Prototype = Cmp.prototype; - methods.forEach(methodName => { - Prototype[methodName] = function () { - const args = arguments; - return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args)); - }; - }); -}; - -export const proxyOutputs = (instance: any, el: any, events: string[]) => { - events.forEach(eventName => instance[eventName] = fromEvent(el, eventName)); -} - -// tslint:disable-next-line: only-arrow-functions -export function ProxyCmp(opts: { inputs?: any; methods?: any }) { - const decorator = function(cls: any){ - if (opts.inputs) { - proxyInputs(cls, opts.inputs); - } - if (opts.methods) { - proxyMethods(cls, opts.methods); - } - return cls; - }; - return decorator; -} - -import { Components } from '@aws-amplify/ui-components' - -export declare interface AmplifyAmazonButton extends Components.AmplifyAmazonButton {} -@ProxyCmp({inputs: ['clientId', 'handleAuthStateChange']}) -@Component({ selector: 'amplify-amazon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['clientId', 'handleAuthStateChange'] }) -export class AmplifyAmazonButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyAuthContainer extends Components.AmplifyAuthContainer {} - -@Component({ selector: 'amplify-auth-container', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) -export class AmplifyAuthContainer { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyAuthFields extends Components.AmplifyAuthFields {} -@ProxyCmp({inputs: ['formFields']}) -@Component({ selector: 'amplify-auth-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields'] }) -export class AmplifyAuthFields { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyAuth0Button extends Components.AmplifyAuth0Button {} -@ProxyCmp({inputs: ['config', 'handleAuthStateChange']}) -@Component({ selector: 'amplify-auth0-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['config', 'handleAuthStateChange'] }) -export class AmplifyAuth0Button { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyAuthenticator extends Components.AmplifyAuthenticator {} -@ProxyCmp({inputs: ['federated', 'handleAuthStateChange', 'hideToast', 'initialAuthState', 'usernameAlias']}) -@Component({ selector: 'amplify-authenticator', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['federated', 'handleAuthStateChange', 'hideToast', 'initialAuthState', 'usernameAlias'] }) -export class AmplifyAuthenticator { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyButton extends Components.AmplifyButton {} -@ProxyCmp({inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant']}) -@Component({ selector: 'amplify-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'handleButtonClick', 'icon', 'type', 'variant'] }) -export class AmplifyButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyChatbot extends Components.AmplifyChatbot {} -@ProxyCmp({inputs: ['botName', 'botTitle', 'clearOnComplete', 'conversationModeOn', 'silenceThreshold', 'silenceTime', 'textEnabled', 'voiceEnabled', 'welcomeMessage']}) -@Component({ selector: 'amplify-chatbot', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['botName', 'botTitle', 'clearOnComplete', 'conversationModeOn', 'silenceThreshold', 'silenceTime', 'textEnabled', 'voiceEnabled', 'welcomeMessage'] }) -export class AmplifyChatbot { - chatCompleted!: EventEmitter; - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - proxyOutputs(this, this.el, ['chatCompleted']); - } -} - -export declare interface AmplifyCheckbox extends Components.AmplifyCheckbox {} -@ProxyCmp({inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value']}) -@Component({ selector: 'amplify-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['checked', 'disabled', 'fieldId', 'label', 'name', 'value'] }) -export class AmplifyCheckbox { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyCodeField extends Components.AmplifyCodeField {} -@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) -@Component({ selector: 'amplify-code-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) -export class AmplifyCodeField { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyConfirmSignIn extends Components.AmplifyConfirmSignIn {} -@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user']}) -@Component({ selector: 'amplify-confirm-sign-in', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user'] }) -export class AmplifyConfirmSignIn { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyConfirmSignUp extends Components.AmplifyConfirmSignUp {} -@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user', 'usernameAlias']}) -@Component({ selector: 'amplify-confirm-sign-up', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user', 'usernameAlias'] }) -export class AmplifyConfirmSignUp { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyContainer extends Components.AmplifyContainer {} - -@Component({ selector: 'amplify-container', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) -export class AmplifyContainer { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyCountryDialCode extends Components.AmplifyCountryDialCode {} -@ProxyCmp({inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options']}) -@Component({ selector: 'amplify-country-dial-code', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['dialCode', 'fieldId', 'handleInputChange', 'options'] }) -export class AmplifyCountryDialCode { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyEmailField extends Components.AmplifyEmailField {} -@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) -@Component({ selector: 'amplify-email-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) -export class AmplifyEmailField { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyFacebookButton extends Components.AmplifyFacebookButton {} -@ProxyCmp({inputs: ['appId', 'handleAuthStateChange']}) -@Component({ selector: 'amplify-facebook-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['appId', 'handleAuthStateChange'] }) -export class AmplifyFacebookButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyFederatedButtons extends Components.AmplifyFederatedButtons {} -@ProxyCmp({inputs: ['authState', 'federated', 'handleAuthStateChange']}) -@Component({ selector: 'amplify-federated-buttons', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['authState', 'federated', 'handleAuthStateChange'] }) -export class AmplifyFederatedButtons { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyFederatedSignIn extends Components.AmplifyFederatedSignIn {} -@ProxyCmp({inputs: ['authState', 'federated']}) -@Component({ selector: 'amplify-federated-sign-in', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['authState', 'federated'] }) -export class AmplifyFederatedSignIn { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyForgotPassword extends Components.AmplifyForgotPassword {} -@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSend', 'handleSubmit', 'headerText', 'sendButtonText', 'submitButtonText', 'usernameAlias']}) -@Component({ selector: 'amplify-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSend', 'handleSubmit', 'headerText', 'sendButtonText', 'submitButtonText', 'usernameAlias'] }) -export class AmplifyForgotPassword { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyFormField extends Components.AmplifyFormField {} -@ProxyCmp({inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'name', 'placeholder', 'required', 'type', 'value']}) -@Component({ selector: 'amplify-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'name', 'placeholder', 'required', 'type', 'value'] }) -export class AmplifyFormField { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyFormSection extends Components.AmplifyFormSection {} -@ProxyCmp({inputs: ['handleSubmit', 'headerText', 'loading', 'secondaryFooterContent', 'submitButtonText', 'testDataPrefix']}) -@Component({ selector: 'amplify-form-section', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleSubmit', 'headerText', 'loading', 'secondaryFooterContent', 'submitButtonText', 'testDataPrefix'] }) -export class AmplifyFormSection { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyGoogleButton extends Components.AmplifyGoogleButton {} -@ProxyCmp({inputs: ['clientId', 'handleAuthStateChange']}) -@Component({ selector: 'amplify-google-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['clientId', 'handleAuthStateChange'] }) -export class AmplifyGoogleButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyGreetings extends Components.AmplifyGreetings {} -@ProxyCmp({inputs: ['handleAuthStateChange', 'logo', 'username']}) -@Component({ selector: 'amplify-greetings', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleAuthStateChange', 'logo', 'username'] }) -export class AmplifyGreetings { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyHint extends Components.AmplifyHint {} - -@Component({ selector: 'amplify-hint', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) -export class AmplifyHint { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyIcon extends Components.AmplifyIcon {} -@ProxyCmp({inputs: ['name']}) -@Component({ selector: 'amplify-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['name'] }) -export class AmplifyIcon { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyIconButton extends Components.AmplifyIconButton {} -@ProxyCmp({inputs: ['autoShowTooltip', 'name', 'tooltip']}) -@Component({ selector: 'amplify-icon-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['autoShowTooltip', 'name', 'tooltip'] }) -export class AmplifyIconButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyInput extends Components.AmplifyInput {} -@ProxyCmp({inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'name', 'placeholder', 'required', 'type', 'value']}) -@Component({ selector: 'amplify-input', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['description', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'name', 'placeholder', 'required', 'type', 'value'] }) -export class AmplifyInput { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyLabel extends Components.AmplifyLabel {} -@ProxyCmp({inputs: ['htmlFor']}) -@Component({ selector: 'amplify-label', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['htmlFor'] }) -export class AmplifyLabel { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyLink extends Components.AmplifyLink {} -@ProxyCmp({inputs: ['role']}) -@Component({ selector: 'amplify-link', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['role'] }) -export class AmplifyLink { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyLoadingSpinner extends Components.AmplifyLoadingSpinner {} - -@Component({ selector: 'amplify-loading-spinner', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) -export class AmplifyLoadingSpinner { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyNav extends Components.AmplifyNav {} - -@Component({ selector: 'amplify-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) -export class AmplifyNav { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyOauthButton extends Components.AmplifyOauthButton {} -@ProxyCmp({inputs: ['config']}) -@Component({ selector: 'amplify-oauth-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['config'] }) -export class AmplifyOauthButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyPasswordField extends Components.AmplifyPasswordField {} -@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) -@Component({ selector: 'amplify-password-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) -export class AmplifyPasswordField { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyPhoneField extends Components.AmplifyPhoneField {} -@ProxyCmp({inputs: ['dialCode', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) -@Component({ selector: 'amplify-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['dialCode', 'disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) -export class AmplifyPhoneField { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyPhotoPicker extends Components.AmplifyPhotoPicker {} -@ProxyCmp({inputs: ['buttonText', 'handleClick', 'headerHint', 'headerTitle', 'placeholderHint', 'previewSrc']}) -@Component({ selector: 'amplify-photo-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['buttonText', 'handleClick', 'headerHint', 'headerTitle', 'placeholderHint', 'previewSrc'] }) -export class AmplifyPhotoPicker { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyPicker extends Components.AmplifyPicker {} -@ProxyCmp({inputs: ['acceptValue', 'inputHandler', 'pickerText']}) -@Component({ selector: 'amplify-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['acceptValue', 'inputHandler', 'pickerText'] }) -export class AmplifyPicker { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyRadioButton extends Components.AmplifyRadioButton {} -@ProxyCmp({inputs: ['checked', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'label', 'name', 'placeholder', 'value']}) -@Component({ selector: 'amplify-radio-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['checked', 'disabled', 'fieldId', 'handleInputChange', 'inputProps', 'label', 'name', 'placeholder', 'value'] }) -export class AmplifyRadioButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyRequireNewPassword extends Components.AmplifyRequireNewPassword {} -@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user']}) -@Component({ selector: 'amplify-require-new-password', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'submitButtonText', 'user'] }) -export class AmplifyRequireNewPassword { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyS3Album extends Components.AmplifyS3Album {} -@ProxyCmp({inputs: ['contentType', 'fileToKey', 'filter', 'handleOnError', 'handleOnLoad', 'identityId', 'level', 'path', 'picker', 'pickerText', 'sort', 'track']}) -@Component({ selector: 'amplify-s3-album', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['contentType', 'fileToKey', 'filter', 'handleOnError', 'handleOnLoad', 'identityId', 'level', 'path', 'picker', 'pickerText', 'sort', 'track'] }) -export class AmplifyS3Album { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyS3Image extends Components.AmplifyS3Image {} -@ProxyCmp({inputs: ['alt', 'body', 'contentType', 'handleOnError', 'handleOnLoad', 'identityId', 'imgKey', 'imgProps', 'level', 'path', 'track']}) -@Component({ selector: 'amplify-s3-image', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['alt', 'body', 'contentType', 'handleOnError', 'handleOnLoad', 'identityId', 'imgKey', 'imgProps', 'level', 'path', 'track'] }) -export class AmplifyS3Image { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyS3ImagePicker extends Components.AmplifyS3ImagePicker {} -@ProxyCmp({inputs: ['buttonText', 'contentType', 'fileToKey', 'headerHint', 'headerTitle', 'identityId', 'level', 'path', 'placeholderHint', 'track']}) -@Component({ selector: 'amplify-s3-image-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['buttonText', 'contentType', 'fileToKey', 'headerHint', 'headerTitle', 'identityId', 'level', 'path', 'placeholderHint', 'track'] }) -export class AmplifyS3ImagePicker { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyS3Text extends Components.AmplifyS3Text {} -@ProxyCmp({inputs: ['body', 'contentType', 'fallbackText', 'identityId', 'level', 'path', 'textKey', 'track']}) -@Component({ selector: 'amplify-s3-text', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['body', 'contentType', 'fallbackText', 'identityId', 'level', 'path', 'textKey', 'track'] }) -export class AmplifyS3Text { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyS3TextPicker extends Components.AmplifyS3TextPicker {} -@ProxyCmp({inputs: ['contentType', 'fallbackText', 'fileToKey', 'identityId', 'level', 'path', 'track']}) -@Component({ selector: 'amplify-s3-text-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['contentType', 'fallbackText', 'fileToKey', 'identityId', 'level', 'path', 'track'] }) -export class AmplifyS3TextPicker { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifySection extends Components.AmplifySection {} -@ProxyCmp({inputs: ['role']}) -@Component({ selector: 'amplify-section', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['role'] }) -export class AmplifySection { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifySelect extends Components.AmplifySelect {} -@ProxyCmp({inputs: ['fieldId', 'handleInputChange', 'options', 'selected']}) -@Component({ selector: 'amplify-select', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['fieldId', 'handleInputChange', 'options', 'selected'] }) -export class AmplifySelect { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifySelectMfaType extends Components.AmplifySelectMfaType {} -@ProxyCmp({inputs: ['MFATypes', 'authData', 'handleSubmit']}) -@Component({ selector: 'amplify-select-mfa-type', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['MFATypes', 'authData', 'handleSubmit'] }) -export class AmplifySelectMfaType { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifySignIn extends Components.AmplifySignIn {} -@ProxyCmp({inputs: ['federated', 'formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'hideSignUp', 'submitButtonText', 'usernameAlias']}) -@Component({ selector: 'amplify-sign-in', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['federated', 'formFields', 'handleAuthStateChange', 'handleSubmit', 'headerText', 'hideSignUp', 'submitButtonText', 'usernameAlias'] }) -export class AmplifySignIn { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifySignInButton extends Components.AmplifySignInButton {} -@ProxyCmp({inputs: ['provider']}) -@Component({ selector: 'amplify-sign-in-button', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['provider'] }) -export class AmplifySignInButton { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifySignOut extends Components.AmplifySignOut {} -@ProxyCmp({inputs: ['buttonText', 'handleAuthStateChange']}) -@Component({ selector: 'amplify-sign-out', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['buttonText', 'handleAuthStateChange'] }) -export class AmplifySignOut { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifySignUp extends Components.AmplifySignUp {} -@ProxyCmp({inputs: ['formFields', 'handleAuthStateChange', 'handleSignUp', 'handleSubmit', 'haveAccountText', 'headerText', 'signInText', 'submitButtonText', 'usernameAlias', 'validationErrors']}) -@Component({ selector: 'amplify-sign-up', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['formFields', 'handleAuthStateChange', 'handleSignUp', 'handleSubmit', 'haveAccountText', 'headerText', 'signInText', 'submitButtonText', 'usernameAlias', 'validationErrors'] }) -export class AmplifySignUp { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyStrike extends Components.AmplifyStrike {} - -@Component({ selector: 'amplify-strike', changeDetection: ChangeDetectionStrategy.OnPush, template: '' }) -export class AmplifyStrike { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyToast extends Components.AmplifyToast {} -@ProxyCmp({inputs: ['handleClose', 'message']}) -@Component({ selector: 'amplify-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleClose', 'message'] }) -export class AmplifyToast { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyTooltip extends Components.AmplifyTooltip {} -@ProxyCmp({inputs: ['shouldAutoShow', 'text']}) -@Component({ selector: 'amplify-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['shouldAutoShow', 'text'] }) -export class AmplifyTooltip { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyTotpSetup extends Components.AmplifyTotpSetup {} -@ProxyCmp({inputs: ['handleAuthStateChange', 'handleComplete', 'headerText', 'issuer', 'standalone', 'user']}) -@Component({ selector: 'amplify-totp-setup', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleAuthStateChange', 'handleComplete', 'headerText', 'issuer', 'standalone', 'user'] }) -export class AmplifyTotpSetup { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyUsernameField extends Components.AmplifyUsernameField {} -@ProxyCmp({inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value']}) -@Component({ selector: 'amplify-username-field', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['disabled', 'fieldId', 'handleInputChange', 'hint', 'inputProps', 'label', 'placeholder', 'required', 'value'] }) -export class AmplifyUsernameField { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} - -export declare interface AmplifyVerifyContact extends Components.AmplifyVerifyContact {} -@ProxyCmp({inputs: ['handleAuthStateChange', 'user']}) -@Component({ selector: 'amplify-verify-contact', changeDetection: ChangeDetectionStrategy.OnPush, template: '', inputs: ['handleAuthStateChange', 'user'] }) -export class AmplifyVerifyContact { - protected el: HTMLElement; - constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { - c.detach(); - this.el = r.nativeElement; - } -} diff --git a/packages/amplify-ui-components/www/host.config.json b/packages/amplify-ui-components/www/host.config.json deleted file mode 100644 index f4314c75f32..00000000000 --- a/packages/amplify-ui-components/www/host.config.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "hosting": { - "headers": [ - { - "source": "/build/p-*", - "headers": [ - { - "key": "Cache-Control", - "value": "max-age=31556952, s-maxage=31556952, immutable" - } - ] - } - ] - } -} \ No newline at end of file diff --git a/packages/amplify-ui-components/www/index.html b/packages/amplify-ui-components/www/index.html deleted file mode 100644 index 592349ea8fe..00000000000 --- a/packages/amplify-ui-components/www/index.html +++ /dev/null @@ -1,3 +0,0 @@ - Stencil Component Starter \ No newline at end of file diff --git a/packages/amplify-ui-react/src/components.ts b/packages/amplify-ui-react/src/components.ts deleted file mode 100644 index 9131247c49e..00000000000 --- a/packages/amplify-ui-react/src/components.ts +++ /dev/null @@ -1,65 +0,0 @@ -/* eslint-disable */ -/* tslint:disable */ -/* auto-generated react proxies */ -import { createReactComponent } from './react-component-lib'; - -import { JSX } from '@aws-amplify/ui-components'; - -import { defineCustomElements, applyPolyfills } from '@aws-amplify/ui-components/loader'; - -applyPolyfills().then(() => defineCustomElements()); -export const AmplifyAmazonButton = /*@__PURE__*/createReactComponent('amplify-amazon-button'); -export const AmplifyAuthContainer = /*@__PURE__*/createReactComponent('amplify-auth-container'); -export const AmplifyAuthFields = /*@__PURE__*/createReactComponent('amplify-auth-fields'); -export const AmplifyAuth0Button = /*@__PURE__*/createReactComponent('amplify-auth0-button'); -export const AmplifyAuthenticator = /*@__PURE__*/createReactComponent('amplify-authenticator'); -export const AmplifyButton = /*@__PURE__*/createReactComponent('amplify-button'); -export const AmplifyChatbot = /*@__PURE__*/createReactComponent('amplify-chatbot'); -export const AmplifyCheckbox = /*@__PURE__*/createReactComponent('amplify-checkbox'); -export const AmplifyCodeField = /*@__PURE__*/createReactComponent('amplify-code-field'); -export const AmplifyConfirmSignIn = /*@__PURE__*/createReactComponent('amplify-confirm-sign-in'); -export const AmplifyConfirmSignUp = /*@__PURE__*/createReactComponent('amplify-confirm-sign-up'); -export const AmplifyContainer = /*@__PURE__*/createReactComponent('amplify-container'); -export const AmplifyCountryDialCode = /*@__PURE__*/createReactComponent('amplify-country-dial-code'); -export const AmplifyEmailField = /*@__PURE__*/createReactComponent('amplify-email-field'); -export const AmplifyFacebookButton = /*@__PURE__*/createReactComponent('amplify-facebook-button'); -export const AmplifyFederatedButtons = /*@__PURE__*/createReactComponent('amplify-federated-buttons'); -export const AmplifyFederatedSignIn = /*@__PURE__*/createReactComponent('amplify-federated-sign-in'); -export const AmplifyForgotPassword = /*@__PURE__*/createReactComponent('amplify-forgot-password'); -export const AmplifyFormField = /*@__PURE__*/createReactComponent('amplify-form-field'); -export const AmplifyFormSection = /*@__PURE__*/createReactComponent('amplify-form-section'); -export const AmplifyGoogleButton = /*@__PURE__*/createReactComponent('amplify-google-button'); -export const AmplifyGreetings = /*@__PURE__*/createReactComponent('amplify-greetings'); -export const AmplifyHint = /*@__PURE__*/createReactComponent('amplify-hint'); -export const AmplifyIcon = /*@__PURE__*/createReactComponent('amplify-icon'); -export const AmplifyIconButton = /*@__PURE__*/createReactComponent('amplify-icon-button'); -export const AmplifyInput = /*@__PURE__*/createReactComponent('amplify-input'); -export const AmplifyLabel = /*@__PURE__*/createReactComponent('amplify-label'); -export const AmplifyLink = /*@__PURE__*/createReactComponent('amplify-link'); -export const AmplifyLoadingSpinner = /*@__PURE__*/createReactComponent('amplify-loading-spinner'); -export const AmplifyNav = /*@__PURE__*/createReactComponent('amplify-nav'); -export const AmplifyOauthButton = /*@__PURE__*/createReactComponent('amplify-oauth-button'); -export const AmplifyPasswordField = /*@__PURE__*/createReactComponent('amplify-password-field'); -export const AmplifyPhoneField = /*@__PURE__*/createReactComponent('amplify-phone-field'); -export const AmplifyPhotoPicker = /*@__PURE__*/createReactComponent('amplify-photo-picker'); -export const AmplifyPicker = /*@__PURE__*/createReactComponent('amplify-picker'); -export const AmplifyRadioButton = /*@__PURE__*/createReactComponent('amplify-radio-button'); -export const AmplifyRequireNewPassword = /*@__PURE__*/createReactComponent('amplify-require-new-password'); -export const AmplifyS3Album = /*@__PURE__*/createReactComponent('amplify-s3-album'); -export const AmplifyS3Image = /*@__PURE__*/createReactComponent('amplify-s3-image'); -export const AmplifyS3ImagePicker = /*@__PURE__*/createReactComponent('amplify-s3-image-picker'); -export const AmplifyS3Text = /*@__PURE__*/createReactComponent('amplify-s3-text'); -export const AmplifyS3TextPicker = /*@__PURE__*/createReactComponent('amplify-s3-text-picker'); -export const AmplifySection = /*@__PURE__*/createReactComponent('amplify-section'); -export const AmplifySelect = /*@__PURE__*/createReactComponent('amplify-select'); -export const AmplifySelectMfaType = /*@__PURE__*/createReactComponent('amplify-select-mfa-type'); -export const AmplifySignIn = /*@__PURE__*/createReactComponent('amplify-sign-in'); -export const AmplifySignInButton = /*@__PURE__*/createReactComponent('amplify-sign-in-button'); -export const AmplifySignOut = /*@__PURE__*/createReactComponent('amplify-sign-out'); -export const AmplifySignUp = /*@__PURE__*/createReactComponent('amplify-sign-up'); -export const AmplifyStrike = /*@__PURE__*/createReactComponent('amplify-strike'); -export const AmplifyToast = /*@__PURE__*/createReactComponent('amplify-toast'); -export const AmplifyTooltip = /*@__PURE__*/createReactComponent('amplify-tooltip'); -export const AmplifyTotpSetup = /*@__PURE__*/createReactComponent('amplify-totp-setup'); -export const AmplifyUsernameField = /*@__PURE__*/createReactComponent('amplify-username-field'); -export const AmplifyVerifyContact = /*@__PURE__*/createReactComponent('amplify-verify-contact'); diff --git a/packages/amplify-ui-react/src/react-component-lib/createComponent.tsx b/packages/amplify-ui-react/src/react-component-lib/createComponent.tsx deleted file mode 100644 index cb489019eec..00000000000 --- a/packages/amplify-ui-react/src/react-component-lib/createComponent.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; - -import { - attachEventProps, - createForwardRef, - dashToPascalCase, - isCoveredByReact, -} from './utils/index'; - -interface IonicReactInternalProps extends React.HTMLAttributes { - forwardedRef?: React.Ref; - ref?: React.Ref; -} - -export const createReactComponent = (tagName: string) => { - const displayName = dashToPascalCase(tagName); - const ReactComponent = class extends React.Component> { - - private ref: React.RefObject; - - constructor(props: IonicReactInternalProps) { - super(props); - this.ref = React.createRef(); - } - - componentDidMount() { - this.componentDidUpdate(this.props); - } - - componentDidUpdate(prevProps: IonicReactInternalProps) { - const node = this.ref.current; - attachEventProps(node, this.props, prevProps); - } - - render() { - const { children, forwardedRef, style, className, ref, ...cProps } = this.props; - - const propsToPass = Object.keys(cProps).reduce((acc, name) => { - const isEventProp = name.indexOf('on') === 0 && name[2] === name[2].toUpperCase(); - const isDataProp = name.indexOf('data-') === 0; - const isAriaProp = name.indexOf('aria-') === 0; - - if (isEventProp) { - const eventName = name.substring(2).toLowerCase(); - if (typeof document !== "undefined" && isCoveredByReact(eventName)) { - (acc as any)[name] = (cProps as any)[name]; - } - } else if (isDataProp || isAriaProp) { - (acc as any)[name] = (cProps as any)[name]; - } - return acc; - }, {}); - - const newProps: any = { - ...propsToPass, - ref: this.ref, - style, - className, - }; - - return React.createElement(tagName, newProps, children); - } - - static get displayName() { - return displayName; - } - }; - return createForwardRef(ReactComponent, displayName); -}; diff --git a/packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx b/packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx deleted file mode 100644 index a20cda145a2..00000000000 --- a/packages/amplify-ui-react/src/react-component-lib/createControllerComponent.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { attachEventProps } from './utils/attachEventProps'; - -interface LoadingElement { - present: () => any; - dismiss: () => any; -} - -interface ReactControllerProps { - isOpen: boolean; - onDidDismiss: (event: CustomEvent) => void; -} - -export function createControllerComponent< - OptionsType extends object, - LoadingElementType extends LoadingElement, - OverlayEventDetail ->(displayName: string, controller: { create: (options: any) => Promise }) { - const dismissEventName = `on${displayName}DidDismiss`; - - type Props = OptionsType & ReactControllerProps; - - return class ReactControllerComponent extends React.Component { - controller?: LoadingElementType; - - constructor(props: Props) { - super(props); - } - - static get displayName() { - return displayName; - } - - async componentDidMount() { - const { isOpen } = this.props; - if (isOpen) { - this.present(); - } - } - - async componentDidUpdate(prevProps: Props) { - if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) { - this.present(prevProps); - } - if ( - this.controller && - prevProps.isOpen !== this.props.isOpen && - this.props.isOpen === false - ) { - await this.controller.dismiss(); - } - } - - async present(prevProps?: Props) { - const { isOpen, onDidDismiss, ...cProps } = this.props; - const elementProps = { - ...cProps, - [dismissEventName]: onDidDismiss, - }; - this.controller = await controller.create({ - ...elementProps, - }); - attachEventProps(this.controller as any, elementProps, prevProps); - this.controller.present(); - } - - render(): null { - return null; - } - }; -} diff --git a/packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx b/packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx deleted file mode 100644 index ee3aeb1e49a..00000000000 --- a/packages/amplify-ui-react/src/react-component-lib/createOverlayComponent.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import { attachEventProps } from './utils/attachEventProps'; - -interface LoadingElement { - present: () => any; - dismiss: () => any; -} -interface ReactOverlayProps { - children?: React.ReactNode; - isOpen: boolean; - onDidDismiss?: (event: CustomEvent) => void; -} - -export function createOverlayComponent< - T extends object, - LoadingElementType extends LoadingElement, - OverlayEventDetail ->(displayName: string, controller: { create: (options: any) => Promise }) { - const dismissEventName = `on${displayName}DidDismiss`; - - type Props = T & ReactOverlayProps; - - return class ReactOverlayComponent extends React.Component { - controller?: LoadingElementType; - el: HTMLDivElement; - - constructor(props: Props) { - super(props); - this.el = document.createElement('div'); - } - - static get displayName() { - return displayName; - } - - componentDidMount() { - if (this.props.isOpen) { - this.present(); - } - } - - async componentDidUpdate(prevProps: Props) { - if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) { - this.present(prevProps); - } - if ( - this.controller && - prevProps.isOpen !== this.props.isOpen && - this.props.isOpen === false - ) { - await this.controller.dismiss(); - } - } - - async present(prevProps?: Props) { - // tslint:disable-next-line:no-empty - const { children, isOpen, onDidDismiss = () => {}, ...cProps } = this.props; - const elementProps = { - ...cProps, - [dismissEventName]: onDidDismiss, - }; - - this.controller = await controller.create({ - ...elementProps, - component: this.el, - componentProps: {}, - }); - - attachEventProps(this.controller as any, elementProps, prevProps); - - this.controller.present(); - } - - render() { - return ReactDOM.createPortal(this.props.children, this.el); - } - }; -} diff --git a/packages/amplify-ui-react/src/react-component-lib/index.ts b/packages/amplify-ui-react/src/react-component-lib/index.ts deleted file mode 100644 index bd820885e84..00000000000 --- a/packages/amplify-ui-react/src/react-component-lib/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { createReactComponent } from './createComponent'; -export { createControllerComponent } from './createControllerComponent'; -export { createOverlayComponent } from './createOverlayComponent'; diff --git a/packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts b/packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts deleted file mode 100644 index a811c78237a..00000000000 --- a/packages/amplify-ui-react/src/react-component-lib/utils/attachEventProps.ts +++ /dev/null @@ -1,87 +0,0 @@ -export function attachEventProps(node: HTMLElement, newProps: any, oldProps: any = {}) { - const className = getClassName(node.classList, newProps, oldProps); - if (className) { - node.className = className; - } - - Object.keys(newProps).forEach(name => { - if (name === 'children' || name === 'style' || name === 'ref' || name === 'className') { - return; - } - if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) { - const eventName = name.substring(2); - const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1); - - if (!isCoveredByReact(eventNameLc)) { - syncEvent(node, eventNameLc, newProps[name]); - } - } else { - (node as any)[name] = newProps[name]; - } - }); -} - -export function getClassName(classList: DOMTokenList, newProps: any, oldProps: any) { - // map the classes to Maps for performance - const currentClasses = arrayToMap(classList); - const incomingPropClasses = arrayToMap(newProps.className ? newProps.className.split(' ') : []); - const oldPropClasses = arrayToMap(oldProps.className ? oldProps.className.split(' ') : []); - const finalClassNames: string[] = []; - // loop through each of the current classes on the component - // to see if it should be a part of the classNames added - currentClasses.forEach(currentClass => { - if (incomingPropClasses.has(currentClass)) { - // add it as its already included in classnames coming in from newProps - finalClassNames.push(currentClass); - incomingPropClasses.delete(currentClass); - } else if (!oldPropClasses.has(currentClass)) { - // add it as it has NOT been removed by user - finalClassNames.push(currentClass); - } - }); - incomingPropClasses.forEach(s => finalClassNames.push(s)); - return finalClassNames.join(' '); -} - -/** - * Checks if an event is supported in the current execution environment. - * @license Modernizr 3.0.0pre (Custom Build) | MIT - */ -export function isCoveredByReact(eventNameSuffix: string, doc: Document = document) { - const eventName = 'on' + eventNameSuffix; - let isSupported = eventName in doc; - - if (!isSupported) { - const element = doc.createElement('div'); - element.setAttribute(eventName, 'return;'); - isSupported = typeof (element as any)[eventName] === 'function'; - } - - return isSupported; -} - -export function syncEvent(node: Element, eventName: string, newEventHandler: (e: Event) => any) { - const eventStore = (node as any).__events || ((node as any).__events = {}); - const oldEventHandler = eventStore[eventName]; - - // Remove old listener so they don't double up. - if (oldEventHandler) { - node.removeEventListener(eventName, oldEventHandler); - } - - if (newEventHandler != null) { - // Bind new listener. - node.addEventListener( - eventName, - (eventStore[eventName] = function handler(e: Event) { - newEventHandler.call(this, e); - }), - ); - } -} - -function arrayToMap(arr: string[] | DOMTokenList) { - const map = new Map(); - (arr as string[]).forEach((s: string) => map.set(s, s)); - return map; -} diff --git a/packages/amplify-ui-react/src/react-component-lib/utils/index.tsx b/packages/amplify-ui-react/src/react-component-lib/utils/index.tsx deleted file mode 100644 index e543f1b7e55..00000000000 --- a/packages/amplify-ui-react/src/react-component-lib/utils/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; - -export const dashToPascalCase = (str: string) => - str - .toLowerCase() - .split('-') - .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1)) - .join(''); - -export interface ReactProps { - class?: string; -} - -export type IonicReactExternalProps = PropType & React.HTMLAttributes & ReactProps; - -export const createForwardRef = ( - ReactComponent: any, - displayName: string, -) => { - const forwardRef = ( - props: IonicReactExternalProps, - ref: React.Ref, - ) => { - return ; - }; - forwardRef.displayName = displayName; - - return React.forwardRef(forwardRef); -}; - -export * from './attachEventProps'; From f745df545a2f2873d91e2227134190df0161db17 Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Tue, 29 Nov 2022 16:31:15 -0800 Subject: [PATCH 4/8] fix(amazon-cognito-identity-js): modified the userAgent logic to use Platform module --- packages/amazon-cognito-identity-js/src/CognitoUser.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/amazon-cognito-identity-js/src/CognitoUser.js b/packages/amazon-cognito-identity-js/src/CognitoUser.js index bd2506550cd..0ee974d149b 100644 --- a/packages/amazon-cognito-identity-js/src/CognitoUser.js +++ b/packages/amazon-cognito-identity-js/src/CognitoUser.js @@ -15,6 +15,7 @@ import CognitoUserSession from './CognitoUserSession'; import DateHelper from './DateHelper'; import CognitoUserAttribute from './CognitoUserAttribute'; import StorageHelper from './StorageHelper'; +import Platform from './Platform'; /** * @callback nodeCallback @@ -56,10 +57,10 @@ import StorageHelper from './StorageHelper'; */ const isNavigatorAvailable = typeof navigator !== 'undefined'; -var specificUserAgent = isNavigatorAvailable ? navigator.userAgent : ''; -if (isNavigatorAvailable && navigator.product === 'ReactNative') - specificUserAgent = 'react-native'; -const userAgent = isNavigatorAvailable ? specificUserAgent : 'nodejs'; +var browserReactNativeAgent = Platform.isReactNative + ? 'react-native' + : navigator.userAgent; +const userAgent = isNavigatorAvailable ? browserReactNativeAgent : 'nodejs'; /** @class */ export default class CognitoUser { From e13dc55015861fa0248bb88828cad599a547b809 Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Tue, 29 Nov 2022 16:40:52 -0800 Subject: [PATCH 5/8] fix: remove use of default Platform import and use a named one --- packages/amazon-cognito-identity-js/src/CognitoUser.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/amazon-cognito-identity-js/src/CognitoUser.js b/packages/amazon-cognito-identity-js/src/CognitoUser.js index 0ee974d149b..e6d875e2474 100644 --- a/packages/amazon-cognito-identity-js/src/CognitoUser.js +++ b/packages/amazon-cognito-identity-js/src/CognitoUser.js @@ -5,6 +5,7 @@ import { Buffer } from 'buffer'; import { Sha256 } from '@aws-crypto/sha256-js'; +import { Platform } from './Platform'; import BigInteger from './BigInteger'; import AuthenticationHelper from './AuthenticationHelper'; @@ -15,7 +16,6 @@ import CognitoUserSession from './CognitoUserSession'; import DateHelper from './DateHelper'; import CognitoUserAttribute from './CognitoUserAttribute'; import StorageHelper from './StorageHelper'; -import Platform from './Platform'; /** * @callback nodeCallback From 31a979a581987a1771de8c845f9d25bcefd87d08 Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Wed, 30 Nov 2022 14:25:58 -0800 Subject: [PATCH 6/8] fix: adds a navigator undefined check --- packages/amazon-cognito-identity-js/src/CognitoUser.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/amazon-cognito-identity-js/src/CognitoUser.js b/packages/amazon-cognito-identity-js/src/CognitoUser.js index e6d875e2474..46c3d6c1e38 100644 --- a/packages/amazon-cognito-identity-js/src/CognitoUser.js +++ b/packages/amazon-cognito-identity-js/src/CognitoUser.js @@ -57,10 +57,11 @@ import StorageHelper from './StorageHelper'; */ const isNavigatorAvailable = typeof navigator !== 'undefined'; -var browserReactNativeAgent = Platform.isReactNative - ? 'react-native' - : navigator.userAgent; -const userAgent = isNavigatorAvailable ? browserReactNativeAgent : 'nodejs'; +const userAgent = isNavigatorAvailable + ? Platform.isReactNative + ? 'react-native' + : navigator.userAgent + : 'nodejs'; /** @class */ export default class CognitoUser { From 8a50266c97ecded674df5e6cf4004ba8e6a733fc Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Thu, 15 Dec 2022 13:56:24 -0800 Subject: [PATCH 7/8] chore: add device tracking RN integ test to circleci --- .circleci/config.yml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index 10a3fe29f1f..222a9fe3df5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1065,6 +1065,13 @@ jobs: steps: - integ_test_rn_ios + integ_rn_ios_device_tracking: + executor: macos-executor + <<: *test_env_vars + working_directory: ~/amplify-js-samples-staging/samples/react-native/auth/deviceTracking + steps: + - integ_test_rn_ios + integ_datastore_auth: parameters: scenario: From 9a820807663cb57d50e048cffeb16b44ef9480f5 Mon Sep 17 00:00:00 2001 From: Manoj NB Date: Thu, 15 Dec 2022 14:26:14 -0800 Subject: [PATCH 8/8] fix: add the device tracking test step to workflows and releases --- .circleci/config.yml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index 222a9fe3df5..0e0b7fe4141 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -1804,6 +1804,12 @@ workflows: - build filters: <<: *releasable_branches + - integ_rn_ios_device_tracking: + requires: + - integ_setup + - build + filters: + <<: *releasable_branches # - integ_rn_android_storage: # requires: # - integ_setup @@ -2009,6 +2015,7 @@ workflows: - integ_rn_ios_storage_multipart_progress # - integ_rn_android_storage_multipart_progress - integ_rn_ios_push_notifications + - integ_rn_ios_device_tracking # - integ_rn_android_storage # - integ_rn_ios_datastore_sqlite_adapter - integ_datastore_auth