feat(@aws-amplify/ui-react): withAuthenticator(Component[, props]) (#…

…5204) * Add build:watch to @aws-amplify/ui-react * Fix yarn workspace support for @aws-amplify/ui-react * Add withAuthenticator(Component[, props]) * Add stories for withAuthenticator * Add withAuthenticator to the README * Update Storybook README to build all UI packages * Add withAuthenticator migration guide
aws-amplify · Mar 27, 2020 · 39d84e7 · 39d84e7
1 parent 91e7432
commit 39d84e7
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 9 deletions.
diff --git a/packages/amplify-ui-components/Readme.md b/packages/amplify-ui-components/Readme.md
@@ -246,6 +246,19 @@ const App = () => {
 };
 ```
 
+Alternatively, you can use the `withAuthenticator` higher-order component (HoC):
+
+```js
+import { withAuthenticator } from '@aws-amplify/ui-react';
+
+...
+
+export default withAuthenticator(App);
+// or
+export default withAuthenticator(App, { /* ...amplifyAuthenticatorSettings */ })
+});
+```
+
 #### Angular
 
 ```html
@@ -388,6 +401,21 @@ const App = () => (
 );
 ```
 
+If you're using the [`withAuthenticator`](https://aws-amplify.github.io/docs/js/authentication#using-withauthenticator-hoc) higher-order component (HoC):
+
+```diff
+- import { withAuthenticator } from 'aws-amplify-react';
++ import { withAuthenticator } from '@aws-amplify/ui-react';
+
+...
+
+export default withAuthenticator(App);
+```
+
+**Note:** If you were providing additional options to `withAuthenticator` (e.g. `includeGreetings`, `authenticatorComponents`, `federated`, `theme`), these have changed:
+
+> [amplify-authenticator#properties](src/components/amplify-authenticator/readme.md#properties)
+
 #### Angular
 
 ##### Installation

diff --git a/packages/amplify-ui-react/package.json b/packages/amplify-ui-react/package.json
@@ -12,6 +12,7 @@
 	},
 	"scripts": {
 		"build": "npm run clean && npm run compile",
+		"build:watch": "tsc -w",
 		"clean": "rm -rf dist",
 		"compile": "npm run tsc",
 		"tsc": "tsc -p ."

diff --git a/packages/amplify-ui-react/src/index.ts b/packages/amplify-ui-react/src/index.ts
@@ -1 +1,3 @@
-export * from './components';
+export * from './components';
+
+export { withAuthenticator } from './withAuthenticator';
diff --git a/packages/amplify-ui-react/src/withAuthenticator.tsx b/packages/amplify-ui-react/src/withAuthenticator.tsx
@@ -0,0 +1,14 @@
+import React, { ComponentType, ComponentPropsWithRef } from 'react';
+
+import { AmplifyAuthenticator } from './';
+
+export function withAuthenticator(
+	Component: ComponentType,
+	props?: ComponentPropsWithRef<typeof AmplifyAuthenticator>
+) {
+	return (
+		<AmplifyAuthenticator {...props}>
+			<Component />
+		</AmplifyAuthenticator>
+	);
+}
diff --git a/packages/amplify-ui-storybook/README.md b/packages/amplify-ui-storybook/README.md
@@ -7,6 +7,6 @@ Collection of stories & documentation for `@aws-amplify/ui-components` and relat
 _All commands take place in the monorepo root._
 
 1. `yarn bootstrap`
-1. In another tab, `yarn workspace @aws-amplify/ui-components build:watch`.
+1. In another tab, `yarn lerna run build:watch --parallel --scope="@aws-amplify/ui-*" --stream`.
 1. `yarn workspace @aws-amplify/ui-storybook start`
 1. Check out the stories!
diff --git a/packages/amplify-ui-storybook/package.json b/packages/amplify-ui-storybook/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@aws-amplify/ui-react": "ui-preview",
+    "@aws-amplify/ui-react": "*",
     "@storybook/addon-knobs": "^5.3.13",
     "@storybook/theming": "^5.3.14",
     "@types/jest": "^24.0.0",

diff --git a/packages/amplify-ui-storybook/src/stories/AmplifyAuthenticator.stories.tsx b/packages/amplify-ui-storybook/src/stories/AmplifyAuthenticator.stories.tsx
@@ -1,5 +1,9 @@
 import { Auth } from 'aws-amplify';
-import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
+import {
+	AmplifyAuthenticator,
+	AmplifySignOut,
+	withAuthenticator,
+} from '@aws-amplify/ui-react';
 import { withKnobs, select, text } from '@storybook/addon-knobs';
 import React from 'react';
 
@@ -12,14 +16,20 @@ export default {
 	parameters: { docs: { page } },
 };
 
-export const basic = () => (
-	<AmplifyAuthenticator>
+const App = () => (
+	<>
 		<h1>You are signed in!</h1>
 		<AmplifySignOut />
+	</>
+);
+
+export const basic = () => (
+	<AmplifyAuthenticator>
+		<App />
 	</AmplifyAuthenticator>
 );
 
-export const federatedIdentityProviders = () => (
+export const FederatedIdentityProviders = () => (
 	<AmplifyAuthenticator
 		federated={{
 			amazonClientId: text('Amazon client ID', 'amazon_client_id'),
@@ -37,7 +47,7 @@ export const federatedIdentityProviders = () => (
 );
 
 // Styles from https://developers.google.com/identity/sign-in/web/sign-in
-export const federatedOAuthProviders = () => (
+export const FederatedOAuthProviders = () => (
 	<AmplifyAuthenticator>
 		<div
 			slot="sign-in"
@@ -130,7 +140,7 @@ export const federatedOAuthProviders = () => (
 	</AmplifyAuthenticator>
 );
 
-federatedOAuthProviders.story = {
+FederatedOAuthProviders.story = {
 	name: 'Federated OAuth Providers',
 };
 
@@ -150,3 +160,21 @@ export const initialState = () => {
 		/>
 	);
 };
+
+export const BasicWithAuthenticator = () => {
+	return withAuthenticator(App);
+};
+
+BasicWithAuthenticator.story = {
+	name: 'Basic withAuthenticator',
+};
+
+export const WithAuthenticatorWithUsernameAlias = () => {
+	return withAuthenticator(App, {
+		usernameAlias: 'email',
+	});
+};
+
+WithAuthenticatorWithUsernameAlias.story = {
+	name: 'withAuthenticator with usernameAlias',
+};