From ddd15730febc691ec380dc4f0f301648d56d671b Mon Sep 17 00:00:00 2001
From: Emma Sauerborn <70536670+esauerbo@users.noreply.github.com>
Date: Mon, 20 Nov 2023 09:45:27 -0500
Subject: [PATCH] chore(docs): add migration guide sections for storage and
notifications (#4744)
* chore: moving storage and notifications migrations to their own sections
* add links to other packages
* remove stray backtick
---
.../migration/migration.react.mdx | 129 ++++++++++++------
1 file changed, 91 insertions(+), 38 deletions(-)
diff --git a/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx b/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx
index 2a48a2b68ae..d54804399f4 100644
--- a/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx
+++ b/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx
@@ -1,6 +1,10 @@
import { Tabs, Message } from '@aws-amplify/ui-react';
import { TerminalCommand } from '@/components/InstallScripts';
+
+Migration guides for [`Liveness`](#aws-amplifyui-react-liveness), [`In-App Messaging`](#aws-amplifyui-react-notifications) and [`Storage`](#aws-amplifyui-react-storage) packages can be found towards the bottom of this page.
+
+
## `@aws-amplify/ui-react`
### Migrate from 5.x to 6.x
@@ -242,33 +246,7 @@ Some notable differences:
There are also more design tokens and better CSS classes for easier customization.
-#### 4. In-App Messaging
-
-Starting with `aws-amplify@6`, the Auth and categories like Auth and Notifications are no longer exported from the base `aws-amplify` package. If you are using in-app messaging you will need to change your imports accordingly and run `initializeInAppMessaging` before your application code:
-
-```diff
-- import { Amplify, Notifications } from 'aws-amplify'
-+ import { Amplify } from 'aws-amplify';
-+ import { initializeInAppMessaging, syncMessages } from 'aws-amplify/in-app-messaging';
-- import exports from './aws-exports';
-+ import config from './amplifyconfiguration';
-
-Amplify.configure(config);
-
-- const { InAppMessaging } = Notifications;
-+ initializeInAppMessaging()
-
-const MyApp = () => {
- React.useEffect(() => {
-- InAppMessaging.syncMessages()
-+ syncMessages();
- }, []}
-
- // ..
-}
-```
-
-#### 5. Removal of extraneous `data` attributes and updating classNames
+#### 4. Removal of extraneous `data` attributes and updating classNames
https://github.com/aws-amplify/amplify-ui/pull/4452
@@ -293,16 +271,7 @@ ClassName updates:
* `.amplify-switch-thumb` -> `.amplify-switch__thumb`
* `.amplify-switch-track` -> `.amplify-switch__track`
-
-#### 6. public accessLevel becomes 'guest' in Storage components
-
-Starting in v6 of the Amplify JS libraries, `'public'` access level, meaning unauthentiated users can access it, became `'guest'`. The `accessLevel` property on StorageManager and StorageImage components have been updated to reflect this change.
-
-#### 7. Removal of FileUploader
-
-The FileUploader component was the predecessor to the [`StorageManager`](../connected-components/storage/storagemanager) component. In this major version we are removing the FileUploader component. Please use the StorageManager component which covers all of the use-cases of FileUploader and more.
-
-#### 8. Moving brand.primary and brand.secondary up a level
+#### 5. Moving brand.primary and brand.secondary up a level
To make it easier to access the primary and secondary colors in the Theme, we removed the `brand` namespace and moved `primary` and `secondary` up a level.
@@ -335,7 +304,6 @@ const theme = createTheme({
});
```
-
### Migrate from 4.x to 5.x
#### Installation
Install the 5.x version of the `@aws-amplify/ui-react` library.
@@ -782,3 +750,88 @@ Optionally update your App with the new prop usage:
#### CDN CSP Policy
The 2.x version of the `FaceLivenessDetector` has updated the default CDN for TensorFlow and Blazeface to a new URL. If your application has an existing CSP policy, update your policy to allow https://cdn.liveness.rekognition.amazonaws.com. Please look over the [Liveness Config](../connected-components/liveness/customization#facelivenessdetectorconfig) section for more information.
+
+
+## `@aws-amplify/ui-react-notifications`
+#### Installation
+Install the 2.x version of `@aws-amplify/ui-react-notifications` and the 6.x version of `aws-amplify`.
+
+
+The 2.x version of `@aws-amplify/ui-react-notifications` has a minimum dependency of 6.x on `aws-amplify`. `aws-amplify@6` introduced breaking API changes.
+
+
+
+
+ npm
+ yarn
+
+
+
+
+
+
+
+
+
+#### Update and usage
+
+`@aws-amplify/ui-react-notifications@2.x` introduces the following breaking changes:
+## Migrate from 1.x to 2.x
+
+Starting with `aws-amplify@6`, the Notifications category is no longer exported from the base `aws-amplify` package. If you are using in-app messaging you will need to change your imports accordingly and run `initializeInAppMessaging` before your application code:
+
+```diff
+- import { Amplify, Notifications } from 'aws-amplify'
++ import { Amplify } from 'aws-amplify';
++ import { initializeInAppMessaging, syncMessages } from 'aws-amplify/in-app-messaging';
+- import exports from './aws-exports';
++ import config from './amplifyconfiguration';
+
+Amplify.configure(config);
+
+- const { InAppMessaging } = Notifications;
++ initializeInAppMessaging()
+
+const MyApp = () => {
+ React.useEffect(() => {
+- InAppMessaging.syncMessages()
++ syncMessages();
+ }, [])
+
+ // ..
+}
+```
+
+## `@aws-amplify/ui-react-storage`
+### Migrate from 2.x to 3.x
+#### Installation
+Install the 3.x version of `@aws-amplify/ui-react-storage` and the 6.x version of `aws-amplify`.
+
+
+The 3.x version of `@aws-amplify/ui-react-storage` has a minimum dependency of 6.x on `aws-amplify`. `aws-amplify@6` introduced breaking API changes.
+
+
+
+
+ npm
+ yarn
+
+
+
+
+
+
+
+
+
+#### Update and usage
+
+`@aws-amplify/ui-react-storage@3.x` introduces the following breaking changes:
+
+#### 1. public accessLevel becomes 'guest' in Storage components
+
+Starting in v6 of the Amplify JS libraries, `'public'` access level, meaning unauthentiated users can access it, became `'guest'`. The `accessLevel` property on StorageManager and StorageImage components have been updated to reflect this change.
+
+#### 2. Removal of FileUploader
+
+The FileUploader component was the predecessor to the [`StorageManager`](../connected-components/storage/storagemanager) component. In this major version we are removing the FileUploader component. Please use the StorageManager component which covers all of the use-cases of FileUploader and more.