From bcb576702590bd1ed39778e73b405c9de843a308 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Tue, 27 Aug 2024 15:39:50 -0700 Subject: [PATCH 01/18] chore: rename references to Storage Manager in docs to File Uploader --- .github/ISSUE_TEMPLATE/1.bug_report.yaml | 2 +- .github/ISSUE_TEMPLATE/2.feature_request.yaml | 2 +- docs/src/components/ComponentsMetadata.ts | 77 +++++++++++++++++++ docs/src/data/links.tsx | 6 +- .../storage/NextSteps.tsx | 4 +- .../examples/ComponentOverrides.tsx | 0 .../examples/Default.tsx | 0 .../examples/DisplayText.tsx | 0 .../examples/Event.tsx | 0 .../examples/FileTypes.tsx | 0 .../examples/Handle.tsx | 0 .../examples/Hash.tsx | 0 .../examples/Metadata.tsx | 0 .../examples/PathProp.tsx | 0 .../examples/Resumable.tsx | 0 .../examples/Theme.tsx | 0 .../examples/UploadActions.tsx | 0 .../examples/i18n.tsx | 0 .../examples/index.ts | 0 .../index.page.mdx | 4 +- .../{storagemanager => fileuploader}/props.ts | 12 +-- .../react.mdx | 51 ++++++------ .../connected-components/storage/react.mdx | 4 +- .../migration/migration.react.mdx | 6 +- .../[platform]/theming/icons/IconSwitcher.tsx | 18 ++--- .../pages/[platform]/theming/icons/react.mdx | 16 ++-- docs/src/utils/storageMock.ts | 2 +- .../primitives/Icon/context/IconsContext.tsx | 3 + 28 files changed, 144 insertions(+), 63 deletions(-) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/ComponentOverrides.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/Default.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/DisplayText.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/Event.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/FileTypes.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/Handle.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/Hash.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/Metadata.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/PathProp.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/Resumable.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/Theme.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/UploadActions.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/i18n.tsx (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/examples/index.ts (100%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/index.page.mdx (85%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/props.ts (95%) rename docs/src/pages/[platform]/connected-components/storage/{storagemanager => fileuploader}/react.mdx (75%) diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yaml b/.github/ISSUE_TEMPLATE/1.bug_report.yaml index 72a15e3f990..8dbdf30b3ad 100644 --- a/.github/ISSUE_TEMPLATE/1.bug_report.yaml +++ b/.github/ISSUE_TEMPLATE/1.bug_report.yaml @@ -53,7 +53,7 @@ body: - In-App Messaging - Liveness - Primitive components - - Storage (Storage Manager) + - Storage (File Uploader) - Other validations: required: true diff --git a/.github/ISSUE_TEMPLATE/2.feature_request.yaml b/.github/ISSUE_TEMPLATE/2.feature_request.yaml index 0468f324253..b82562b9beb 100644 --- a/.github/ISSUE_TEMPLATE/2.feature_request.yaml +++ b/.github/ISSUE_TEMPLATE/2.feature_request.yaml @@ -36,7 +36,7 @@ body: - In-App Messaging - Liveness - Primitive components - - Storage (Storage Manager) + - Storage (File Uploader) - Other validations: required: true diff --git a/docs/src/components/ComponentsMetadata.ts b/docs/src/components/ComponentsMetadata.ts index 37abe03d6b9..25a188db712 100644 --- a/docs/src/components/ComponentsMetadata.ts +++ b/docs/src/components/ComponentsMetadata.ts @@ -19,6 +19,7 @@ type ComponentNameKey = | 'Divider' | 'DropZone' | 'Fieldset' + | 'FileUploader' | 'Flex' | 'Grid' | 'Heading' @@ -317,6 +318,82 @@ export const ComponentsMetadata: ComponentClassNameItems = { components: ['Fieldset'], description: 'Visual label for the Fieldset primitive', }, + FileUploader: { + className: ComponentClassName.FileUploader, + components: ['FileUploader'], + }, + FileUploaderDropZone: { + className: ComponentClassName.FileUploaderDropZone, + components: ['FileUploader'], + }, + FileUploaderDropZoneIcon: { + className: ComponentClassName.FileUploaderDropZoneIcon, + components: ['FileUploader'], + }, + FileUploaderDropZoneText: { + className: ComponentClassName.FileUploaderDropZoneText, + components: ['FileUploader'], + }, + FileUploaderFilePicker: { + className: ComponentClassName.FileUploaderFilePicker, + components: ['FileUploader'], + }, + FileUploaderFile: { + className: ComponentClassName.FileUploaderFile, + components: ['FileUploader'], + }, + FileUploaderFileWrapper: { + className: ComponentClassName.FileUploaderFileWrapper, + components: ['FileUploader'], + }, + FileUploaderFileList: { + className: ComponentClassName.FileUploaderFileList, + components: ['FileUploader'], + }, + FileUploaderFileName: { + className: ComponentClassName.FileUploaderFileName, + components: ['FileUploader'], + }, + FileUploaderLoader: { + className: ComponentClassName.FileUploaderLoader, + components: ['FileUploader'], + }, + FileUploaderFileSize: { + className: ComponentClassName.FileUploaderFileSize, + components: ['FileUploader'], + }, + FileUploaderFileInfo: { + className: ComponentClassName.FileUploaderFileInfo, + components: ['FileUploader'], + }, + FileUploaderFileImage: { + className: ComponentClassName.FileUploaderFileImage, + components: ['FileUploader'], + }, + FileUploaderFileMain: { + className: ComponentClassName.FileUploaderFileMain, + components: ['FileUploader'], + }, + FileUploaderFileStatus: { + className: ComponentClassName.FileUploaderFileStatus, + components: ['FileUploader'], + }, + FileUploaderPreviewer: { + className: ComponentClassName.FileUploaderPreviewer, + components: ['FileUploader'], + }, + FileUploaderPreviewerText: { + className: ComponentClassName.FileUploaderPreviewerText, + components: ['FileUploader'], + }, + FileUploaderPreviewerActions: { + className: ComponentClassName.FileUploaderPreviewerActions, + components: ['FileUploader'], + }, + FileUploaderPreviewerFooter: { + className: ComponentClassName.FileUploaderPreviewerFooter, + components: ['FileUploader'], + }, Flex: { className: ComponentClassName.Flex, components: ['Flex'], diff --git a/docs/src/data/links.tsx b/docs/src/data/links.tsx index 17f2a6867e1..35f6399b0c0 100644 --- a/docs/src/data/links.tsx +++ b/docs/src/data/links.tsx @@ -211,9 +211,9 @@ export const connectedComponents: ComponentNavItem[] = [ tertiary: true, }, { - href: '/connected-components/storage/storagemanager', - label: 'Storage Manager', - body: 'StorageManager component allows users to upload and manage files in your Amplify backend.', + href: '/connected-components/storage/fileuploader', + label: 'File Uploader', + body: 'FileUploader component allows users to upload and manage files in your Amplify backend.', platforms: ['react'], tertiary: true, }, diff --git a/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx b/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx index 6f7d49d1c42..c70a7ee8d50 100644 --- a/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx +++ b/docs/src/pages/[platform]/connected-components/storage/NextSteps.tsx @@ -5,9 +5,9 @@ export function NextSteps() { return ( } - href={`storage/storagemanager`} + href={`storage/fileuploader`} desc="Let your users upload files to the cloud" /> diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/ComponentOverrides.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/ComponentOverrides.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/ComponentOverrides.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/ComponentOverrides.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Default.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Default.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Default.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Default.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/DisplayText.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/DisplayText.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/DisplayText.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/DisplayText.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Event.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Event.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Event.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Event.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/FileTypes.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileTypes.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/FileTypes.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileTypes.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Handle.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Handle.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Handle.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Handle.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Hash.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Hash.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Hash.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Hash.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Metadata.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Metadata.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Metadata.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Metadata.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/PathProp.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/PathProp.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/PathProp.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/PathProp.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Resumable.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Resumable.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Resumable.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Resumable.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Theme.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/Theme.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/Theme.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/UploadActions.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/UploadActions.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/UploadActions.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/UploadActions.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/i18n.tsx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/i18n.tsx similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/i18n.tsx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/i18n.tsx diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/index.ts b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts similarity index 100% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/examples/index.ts rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/index.page.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx similarity index 85% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/index.page.mdx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx index 777d631f04e..90b8c8536e3 100644 --- a/docs/src/pages/[platform]/connected-components/storage/storagemanager/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx @@ -1,6 +1,6 @@ --- -title: Storage Manager -description: The Storage Manager lets your users upload and manage files to the cloud. +title: File Uploader +description: The File Uploader lets your users upload and manage files to the cloud. themeSource: packages/ui/src/theme/tokens/components/storagemanager.ts reactSource: packages/react-storage/src/components/StorageManager/StorageManager.tsx supportedFrameworks: react diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/props.ts b/docs/src/pages/[platform]/connected-components/storage/fileuploader/props.ts similarity index 95% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/props.ts rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/props.ts index e516ee4b560..7ff4ae22a7f 100644 --- a/docs/src/pages/[platform]/connected-components/storage/storagemanager/props.ts +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/props.ts @@ -13,12 +13,12 @@ const children = { const displayText = { name: `displayText`, description: 'Test strings that are used in the component', - type: `StorageManagerDisplayText`, + type: `FileUploaderDisplayText`, }; const eventHandler = `(file: {key: string}) => void;`; -export const STORAGE_MANAGER = [ +export const FILE_UPLOADER = [ { name: `path`, description: @@ -93,7 +93,7 @@ export const STORAGE_MANAGER = [ { name: `displayText?`, description: 'Text to override in the component.', - type: 'StorageManagerDisplayText', + type: 'FileUploaderDisplayText', }, { name: `useAccelerateEndpoint?`, @@ -102,7 +102,7 @@ export const STORAGE_MANAGER = [ }, { name: `components?.Container?`, - description: 'The container the StorageManager is wrapped in.', + description: 'The container the FileUploader is wrapped in.', type: `React.ComponentType`, }, { @@ -132,8 +132,8 @@ export const STORAGE_MANAGER = [ }, { name: `ref?`, - description: 'Forward ref prop exposing StorageManager imperative methods.', - type: `React.ForwardedRef`, + description: 'Forward ref prop exposing FileUploader imperative methods.', + type: `React.ForwardedRef`, }, ]; diff --git a/docs/src/pages/[platform]/connected-components/storage/storagemanager/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx similarity index 75% rename from docs/src/pages/[platform]/connected-components/storage/storagemanager/react.mdx rename to docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index 699721b0b7d..5fdcce68ee2 100644 --- a/docs/src/pages/[platform]/connected-components/storage/storagemanager/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -7,7 +7,7 @@ import ReactPropsTable from '@/components/propsTable/ReactPropsTable'; import { Example, ExampleCode } from '@/components/Example'; import { Fragment } from '@/components/Fragment'; import { InstallScripts } from '@/components/InstallScripts'; -import { STORAGE_MANAGER, FILE_PICKER, DROPZONE_PROPS, DISPLAY_TEXT } from './props'; +import { FILE_UPLOADER, FILE_PICKER, DROPZONE_PROPS, DISPLAY_TEXT } from './props'; import { DefaultExample, ComponentOverridesExample, @@ -34,13 +34,13 @@ import { -To use the StorageManager component import it into your React application with the included styles. +To use the FileUploader component import it into your React application with the included styles. ```jsx -import { StorageManager } from '@aws-amplify/ui-react-storage'; +import { FileUploader } from '@aws-amplify/ui-react-storage'; import '@aws-amplify/ui-react/styles.css'; ``` @@ -60,14 +60,14 @@ At a minimum you must include the `path` and `maxFileCount` props. `path` refers ### Private or Protected Buckets -When uploading to private or protected S3 buckets, you'll need to wrap your app in the `Authenticator`, allowing the `StorageManager` component to infer the Cognito `identityId` of the currently signed-in user. This can be done directly with the `Authenticator` component or with `withAuthenticator`, as shown in [Add the Authenticator](/connected-components/authenticator#step-3-add-the-authenticator). +When uploading to private or protected S3 buckets, you'll need to wrap your app in the `Authenticator`, allowing the `FileUploader` component to infer the Cognito `identityId` of the currently signed-in user. This can be done directly with the `Authenticator` component or with `withAuthenticator`, as shown in [Add the Authenticator](/connected-components/authenticator#step-3-add-the-authenticator). -The example below shows configuring the StorageManager to upload to the `protected` folder under the users' identity id. +The example below shows configuring the FileUploader to upload to the `protected` folder under the users' identity id. ```jsx - `protected/${identityId}/`} maxFileCount={1} @@ -78,6 +78,11 @@ The example below shows configuring the StorageManager to upload to the `protect ### Deprecated props + + + This component used to be called Storage Manager. The Storage Manager component has been deprecated, and all functionality is retained by the File Uploader component. + + @@ -87,12 +92,12 @@ The example below shows configuring the StorageManager to upload to the `protect Versions 3.0.18 and earlier use `accessLevel` and an optional `path` prop in place of the required `path`. `accessLevel` refers to the [Amplify Storage access level](https://docs.amplify.aws/gen1/react/build-a-backend/storage/configure-access/), which is `'guest' | 'protected' | 'private'`, and `path` is a `string`. ```tsx - - @@ -100,14 +105,14 @@ The example below shows configuring the StorageManager to upload to the `protect To migrate to a newer version, replace `accessLevel` with `path`. If you were using `path` already, append `public`, `private` or `protected` to the beginning of the path. ```diff - ``` ```diff - `private/${identityId}/images/`} @@ -124,11 +129,11 @@ The example below shows configuring the StorageManager to upload to the `protect ### Props - + ## Manually Upload -The default behavior of the Storage Manager component is to automatically start the upload after a file is selected. If you wish to change that, set the value of the `autoUpload` prop to false. +The default behavior of the File Uploader component is to automatically start the upload after a file is selected. If you wish to change that, set the value of the `autoUpload` prop to false. @@ -171,7 +176,7 @@ A resumable upload will upload the file in chunks. This allows users to pause an You might want to process or modify the file(s) and/or file name(s) before they are uploaded. One common situation is you may want to ensure files uploaded are at unique keys by hashing the file contents and using that as the key rather than the filename. -You can pass a `processFile` function to the StorageManager which accepts an object with `file`: [File](https://developer.mozilla.org/en-US/docs/Web/API/File), and `key`: string, and should return an object with file, key, and any other Storage configurations. The `processFile` can either return synchronously or return a Promise. This example uses a Promise to read the contents of the file and create a hash for the key. +You can pass a `processFile` function to the FileUploader which accepts an object with `file`: [File](https://developer.mozilla.org/en-US/docs/Web/API/File), and `key`: string, and should return an object with file, key, and any other Storage configurations. The `processFile` can either return synchronously or return a Promise. This example uses a Promise to read the contents of the file and create a hash for the key. @@ -190,7 +195,7 @@ You can also add any other [Amplify Storage options](https://docs.amplify.aws/re ## Event Handling -The StorageManager component has several event handlers: `onUploadStart`, `onUploadSuccess`, `onUploadError`, and `onFileRemove` +The FileUploader component has several event handlers: `onUploadStart`, `onUploadSuccess`, `onUploadError`, and `onFileRemove` @@ -206,7 +211,7 @@ Be careful setting state in the `onUploadSuccess` because that function is bound ## `path` Usage -The `path` prop of the `StorageManager` is prepended to the `key` value (resolved from either the file itself or the returned `key` of `processFile`) submitted to S3. Using a `'/'` as the last character of `path` allows uploading to a specific folder inside the provided `accessLevel` folder. +The `path` prop of the `FileUploader` is prepended to the `key` value (resolved from either the file itself or the returned `key` of `processFile`) submitted to S3. Using a `'/'` as the last character of `path` allows uploading to a specific folder inside the provided `accessLevel` folder. @@ -233,12 +238,12 @@ You can add metadata by adding a `metadata` object in the return object of `proc Amazon S3 transfer acceleration optimizes transfer speeds from around the world into S3 buckets. When you use Transfer Acceleration, additional data transfer charges might apply. For more information about pricing, see [Amazon S3 pricing](https://aws.amazon.com/s3/pricing/). -To use transfer acceleration you first need to [enable it on your S3 bucket](https://docs.amplify.aws/react/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration). Then add `useAccelerateEndpoint` on the `` component. By default transfer acceleration is off. +To use transfer acceleration you first need to [enable it on your S3 bucket](https://docs.amplify.aws/react/build-a-backend/storage/extend-s3-resources/#example---enable-transfer-acceleration). Then add `useAccelerateEndpoint` on the `` component. By default transfer acceleration is off. ```jsx - ```jsx - { @@ -271,7 +276,7 @@ You can also choose whether or not to use transfer acceleration at the file leve ### Text and labels -All text in the StorageManager component is customizable with the `displayText` prop. +All text in the FileUploader component is customizable with the `displayText` prop. @@ -306,7 +311,7 @@ You can use the `displayText` prop to also support different languages. Use an o ### Component overrides -Don't like how things look? Use your own components inside the StorageManager! You can pass your own components with the `components` prop. The available components to override are: `Container`, `FileList`, `FileListHeader`, `FileListFooter`, `DropZone`, and `FilePicker`. +Don't like how things look? Use your own components inside the FileUploader! You can pass your own components with the `components` prop. The available components to override are: `Container`, `FileList`, `FileListHeader`, `FileListFooter`, `DropZone`, and `FilePicker`. _You can even use a completely different UI kit like MUI, Chakra, or your own design system!_ @@ -341,7 +346,7 @@ _You can even use a completely different UI kit like MUI, Chakra, or your own de ### Imperative handles -The `files` state is managed within the `StorageManager` component itself. To allow for clearing the internal `files` state, `StorageManager` exposes a custom ref handle to the parent component with a `clearFiles` method. +The `files` state is managed within the `FileUploader` component itself. To allow for clearing the internal `files` state, `FileUploader` exposes a custom ref handle to the parent component with a `clearFiles` method. @@ -364,6 +369,6 @@ The `files` state is managed within the `StorageManager` component itself. To al ### Target Classes -If you like, you can target classes directly or use CSS variables to make changes to the look and feel of the Storage Manager. +If you like, you can target classes directly or use CSS variables to make changes to the look and feel of the File Uploader. - + diff --git a/docs/src/pages/[platform]/connected-components/storage/react.mdx b/docs/src/pages/[platform]/connected-components/storage/react.mdx index c93d06b70c8..ceba8f33a18 100644 --- a/docs/src/pages/[platform]/connected-components/storage/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/react.mdx @@ -63,7 +63,7 @@ To use Storage UI components with Amplify, you'll need to call `Amplify.configur ```tsx import { Amplify } from 'aws-amplify'; - import { StorageImage, StorageManager } from '@aws-amplify/ui-react-storage'; + import { StorageImage, FileUploader } from '@aws-amplify/ui-react-storage'; import awsExports from './aws-exports'; Amplify.configure(awsExports); @@ -72,7 +72,7 @@ To use Storage UI components with Amplify, you'll need to call `Amplify.configur return ( <> - + ); }; 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 36cb132235e..82a9d3f88f9 100644 --- a/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx +++ b/docs/src/pages/[platform]/getting-started/migration/migration.react.mdx @@ -830,8 +830,4 @@ The 3.x version of `@aws-amplify/ui-react-storage` has a minimum dependency of 6 #### 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. +Starting in v6 of the Amplify JS libraries, `'public'` access level, meaning unauthentiated users can access it, became `'guest'`. The `accessLevel` property on FileUploader and StorageImage components have been updated to reflect this change. diff --git a/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx b/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx index bb2fff0f58c..6eccd72c85a 100644 --- a/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx +++ b/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx @@ -67,6 +67,9 @@ const iconMap: Record = { error: , info: , }, + fileUploader: { + upload: , + }, passwordField: { visibility: , visibilityOff: , @@ -85,9 +88,6 @@ const iconMap: Record = { add: , remove: , }, - storageManager: { - upload: , - }, }, hi: { alert: { @@ -100,6 +100,9 @@ const iconMap: Record = { checked: , indeterminate: , }, + fileUploader: { + upload: , + }, passwordField: { visibility: , visibilityOff: , @@ -118,9 +121,6 @@ const iconMap: Record = { add: , remove: , }, - storageManager: { - upload: , - }, }, fc: { alert: { @@ -130,6 +130,9 @@ const iconMap: Record = { info: , close: , }, + fileUploader: { + upload: , + }, passwordField: { visibility: , visibilityOff: , @@ -148,9 +151,6 @@ const iconMap: Record = { add: , remove: , }, - storageManager: { - upload: , - }, }, default: {}, }; diff --git a/docs/src/pages/[platform]/theming/icons/react.mdx b/docs/src/pages/[platform]/theming/icons/react.mdx index 8644075a654..cb5fbb3c6be 100644 --- a/docs/src/pages/[platform]/theming/icons/react.mdx +++ b/docs/src/pages/[platform]/theming/icons/react.mdx @@ -32,6 +32,7 @@ The components and their icons that can be overridden are: * [Accordion](../components/accordion) * [Alert](../components/alert) * [Checkbox](../components/checkboxfield) +* [FileUploader](../connected-components/storage/fileuploader) * [Menu](../components/menu) * [Pagination](../components/pagination) * [PasswordField](../components/passwordfield) @@ -39,7 +40,6 @@ The components and their icons that can be overridden are: * [SearchField](../components/searchfield) * [SelectField](../components/selectfield) * [StepperField](../components/stepperfield) -* [StorageManager](../connected-components/storage/storagemanager) Here is the full list of icons you can customize with the IconProvider @@ -64,6 +64,13 @@ const icons = { field: { clear: () => , }, + fileUploader: { + upload: () => , + remove: () => , + error: () => , + success: () => , + file: () => , + }, menu: { menu: () => , }, @@ -88,13 +95,6 @@ const icons = { stepperField: { add: () => , remove: () => , - }, - storageManager: { - upload: () => , - remove: () => , - error: () => , - success: () => , - file: () => , } } ``` diff --git a/docs/src/utils/storageMock.ts b/docs/src/utils/storageMock.ts index d6ee2bcdde8..fadba6d254e 100644 --- a/docs/src/utils/storageMock.ts +++ b/docs/src/utils/storageMock.ts @@ -15,7 +15,7 @@ const defaultConfig = { /** * https://docs.amplify.aws/lib/storage/custom-plugin/q/platform/js/ - * Mocking out the Storage class so we can render the StorageManager component + * Mocking out the Storage class so we can render the FileUploader component * without an Amplify backend. */ // export default class MyStorageProvider implements StorageProvider { diff --git a/packages/react/src/primitives/Icon/context/IconsContext.tsx b/packages/react/src/primitives/Icon/context/IconsContext.tsx index dce2f840901..05f3011cc6b 100644 --- a/packages/react/src/primitives/Icon/context/IconsContext.tsx +++ b/packages/react/src/primitives/Icon/context/IconsContext.tsx @@ -9,6 +9,9 @@ export type IconsContextInterface = { alert?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>; checkbox?: ComponentIcons<'indeterminate' | 'checked'>; field?: ComponentIcons<'clear'>; + fileUploader?: ComponentIcons< + 'upload' | 'remove' | 'error' | 'success' | 'file' + >; menu?: ComponentIcons<'menu'>; message?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>; pagination?: ComponentIcons<'previous' | 'next'>; From 056d4911d9ff274865848eb32699a85e1942230f Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Tue, 27 Aug 2024 15:49:40 -0700 Subject: [PATCH 02/18] chore: reverting reference to StorageManager in deprecated props section --- .../connected-components/storage/fileuploader/react.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index 5fdcce68ee2..7534aeecbe9 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -92,12 +92,12 @@ The example below shows configuring the FileUploader to upload to the `protected Versions 3.0.18 and earlier use `accessLevel` and an optional `path` prop in place of the required `path`. `accessLevel` refers to the [Amplify Storage access level](https://docs.amplify.aws/gen1/react/build-a-backend/storage/configure-access/), which is `'guest' | 'protected' | 'private'`, and `path` is a `string`. ```tsx - - @@ -105,14 +105,14 @@ The example below shows configuring the FileUploader to upload to the `protected To migrate to a newer version, replace `accessLevel` with `path`. If you were using `path` already, append `public`, `private` or `protected` to the beginning of the path. ```diff - ``` ```diff - `private/${identityId}/images/`} From 74b449d91b320e4ef3d32a5db3725115528b303e Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Tue, 27 Aug 2024 17:27:11 -0700 Subject: [PATCH 03/18] chore: replacing /storagemanager with /fileuploader in test sitemap --- docs/__tests__/__snapshots__/sitemap.test.ts.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/__tests__/__snapshots__/sitemap.test.ts.snap b/docs/__tests__/__snapshots__/sitemap.test.ts.snap index eb9c2373ac3..5d590263cb6 100644 --- a/docs/__tests__/__snapshots__/sitemap.test.ts.snap +++ b/docs/__tests__/__snapshots__/sitemap.test.ts.snap @@ -108,8 +108,8 @@ exports[`Sitemap Snapshot 1`] = ` /react/connected-components/liveness/customization, /react/connected-components/liveness/troubleshooting, /react/connected-components/storage, +/react/connected-components/storage/fileuploader, /react/connected-components/storage/storageimage, -/react/connected-components/storage/storagemanager, /react/getting-started/accessibility, /react/getting-started/figma, /react/getting-started/installation, From e4fba696bae60f61bc5dffa681e689bdd855db47 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Tue, 27 Aug 2024 19:46:13 -0700 Subject: [PATCH 04/18] chore: update Storage Manager reference in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f2bfc8b5b8a..485addbd8c2 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Amplify UI is an open-source UI library with cloud-connected components that are | In-App Messaging | ✅ | ✅ | | | | Geo (MapView) | ✅ | | | | | Account Settings | ✅ | | | | -| Storage (StorageManager) | ✅ | | | | +| Storage (FileUploader) | ✅ | | | | | Liveness (FaceLivenessDetector) | ✅ | | | | | **Primitives** | **React** | **Angular** | **Vue** | From 6a2b3169886d3ada6f771c50b1777c9ee13f20fe Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 29 Aug 2024 08:56:58 -0700 Subject: [PATCH 05/18] chore: removing references to not-yet-existing FileUploader component --- docs/src/components/ComponentsMetadata.ts | 76 ----------------------- 1 file changed, 76 deletions(-) diff --git a/docs/src/components/ComponentsMetadata.ts b/docs/src/components/ComponentsMetadata.ts index 25a188db712..5dbe865dde6 100644 --- a/docs/src/components/ComponentsMetadata.ts +++ b/docs/src/components/ComponentsMetadata.ts @@ -318,82 +318,6 @@ export const ComponentsMetadata: ComponentClassNameItems = { components: ['Fieldset'], description: 'Visual label for the Fieldset primitive', }, - FileUploader: { - className: ComponentClassName.FileUploader, - components: ['FileUploader'], - }, - FileUploaderDropZone: { - className: ComponentClassName.FileUploaderDropZone, - components: ['FileUploader'], - }, - FileUploaderDropZoneIcon: { - className: ComponentClassName.FileUploaderDropZoneIcon, - components: ['FileUploader'], - }, - FileUploaderDropZoneText: { - className: ComponentClassName.FileUploaderDropZoneText, - components: ['FileUploader'], - }, - FileUploaderFilePicker: { - className: ComponentClassName.FileUploaderFilePicker, - components: ['FileUploader'], - }, - FileUploaderFile: { - className: ComponentClassName.FileUploaderFile, - components: ['FileUploader'], - }, - FileUploaderFileWrapper: { - className: ComponentClassName.FileUploaderFileWrapper, - components: ['FileUploader'], - }, - FileUploaderFileList: { - className: ComponentClassName.FileUploaderFileList, - components: ['FileUploader'], - }, - FileUploaderFileName: { - className: ComponentClassName.FileUploaderFileName, - components: ['FileUploader'], - }, - FileUploaderLoader: { - className: ComponentClassName.FileUploaderLoader, - components: ['FileUploader'], - }, - FileUploaderFileSize: { - className: ComponentClassName.FileUploaderFileSize, - components: ['FileUploader'], - }, - FileUploaderFileInfo: { - className: ComponentClassName.FileUploaderFileInfo, - components: ['FileUploader'], - }, - FileUploaderFileImage: { - className: ComponentClassName.FileUploaderFileImage, - components: ['FileUploader'], - }, - FileUploaderFileMain: { - className: ComponentClassName.FileUploaderFileMain, - components: ['FileUploader'], - }, - FileUploaderFileStatus: { - className: ComponentClassName.FileUploaderFileStatus, - components: ['FileUploader'], - }, - FileUploaderPreviewer: { - className: ComponentClassName.FileUploaderPreviewer, - components: ['FileUploader'], - }, - FileUploaderPreviewerText: { - className: ComponentClassName.FileUploaderPreviewerText, - components: ['FileUploader'], - }, - FileUploaderPreviewerActions: { - className: ComponentClassName.FileUploaderPreviewerActions, - components: ['FileUploader'], - }, - FileUploaderPreviewerFooter: { - className: ComponentClassName.FileUploaderPreviewerFooter, - components: ['FileUploader'], - }, Flex: { className: ComponentClassName.Flex, components: ['Flex'], From f2ea013f2288d4d4c1aeed2eee7661af63ebdbb3 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Wed, 4 Sep 2024 15:38:08 -0700 Subject: [PATCH 06/18] chore: reverting references to storageManager icon --- .../[platform]/theming/icons/IconSwitcher.tsx | 18 +++++++++--------- .../pages/[platform]/theming/icons/react.mdx | 14 +++++++------- .../primitives/Icon/context/IconsContext.tsx | 3 --- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx b/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx index 6eccd72c85a..bb2fff0f58c 100644 --- a/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx +++ b/docs/src/pages/[platform]/theming/icons/IconSwitcher.tsx @@ -67,9 +67,6 @@ const iconMap: Record = { error: , info: , }, - fileUploader: { - upload: , - }, passwordField: { visibility: , visibilityOff: , @@ -88,6 +85,9 @@ const iconMap: Record = { add: , remove: , }, + storageManager: { + upload: , + }, }, hi: { alert: { @@ -100,9 +100,6 @@ const iconMap: Record = { checked: , indeterminate: , }, - fileUploader: { - upload: , - }, passwordField: { visibility: , visibilityOff: , @@ -121,6 +118,9 @@ const iconMap: Record = { add: , remove: , }, + storageManager: { + upload: , + }, }, fc: { alert: { @@ -130,9 +130,6 @@ const iconMap: Record = { info: , close: , }, - fileUploader: { - upload: , - }, passwordField: { visibility: , visibilityOff: , @@ -151,6 +148,9 @@ const iconMap: Record = { add: , remove: , }, + storageManager: { + upload: , + }, }, default: {}, }; diff --git a/docs/src/pages/[platform]/theming/icons/react.mdx b/docs/src/pages/[platform]/theming/icons/react.mdx index cb5fbb3c6be..fda64be2a5d 100644 --- a/docs/src/pages/[platform]/theming/icons/react.mdx +++ b/docs/src/pages/[platform]/theming/icons/react.mdx @@ -64,13 +64,6 @@ const icons = { field: { clear: () => , }, - fileUploader: { - upload: () => , - remove: () => , - error: () => , - success: () => , - file: () => , - }, menu: { menu: () => , }, @@ -96,6 +89,13 @@ const icons = { add: () => , remove: () => , } + storageManager: { + upload: () => , + remove: () => , + error: () => , + success: () => , + file: () => , + }, } ``` diff --git a/packages/react/src/primitives/Icon/context/IconsContext.tsx b/packages/react/src/primitives/Icon/context/IconsContext.tsx index 05f3011cc6b..dce2f840901 100644 --- a/packages/react/src/primitives/Icon/context/IconsContext.tsx +++ b/packages/react/src/primitives/Icon/context/IconsContext.tsx @@ -9,9 +9,6 @@ export type IconsContextInterface = { alert?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>; checkbox?: ComponentIcons<'indeterminate' | 'checked'>; field?: ComponentIcons<'clear'>; - fileUploader?: ComponentIcons< - 'upload' | 'remove' | 'error' | 'success' | 'file' - >; menu?: ComponentIcons<'menu'>; message?: ComponentIcons<'close' | 'info' | 'error' | 'success' | 'warning'>; pagination?: ComponentIcons<'previous' | 'next'>; From 251a49181f858ced410e6094d613b48d2ade2df0 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Wed, 4 Sep 2024 15:40:33 -0700 Subject: [PATCH 07/18] fix: fixing incorrect comma placement --- docs/src/pages/[platform]/theming/icons/react.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/[platform]/theming/icons/react.mdx b/docs/src/pages/[platform]/theming/icons/react.mdx index fda64be2a5d..32e35893e02 100644 --- a/docs/src/pages/[platform]/theming/icons/react.mdx +++ b/docs/src/pages/[platform]/theming/icons/react.mdx @@ -88,14 +88,14 @@ const icons = { stepperField: { add: () => , remove: () => , - } + }, storageManager: { upload: () => , remove: () => , error: () => , success: () => , file: () => , - }, + } } ``` From 35b8c13d37771ee5b0aa81cb69139d395b52775e Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 07:45:30 -0700 Subject: [PATCH 08/18] chore: make references to Storage in GitHub guides more generic --- .github/ISSUE_TEMPLATE/1.bug_report.yaml | 2 +- .github/ISSUE_TEMPLATE/2.feature_request.yaml | 2 +- README.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yaml b/.github/ISSUE_TEMPLATE/1.bug_report.yaml index 8dbdf30b3ad..71b07701ec1 100644 --- a/.github/ISSUE_TEMPLATE/1.bug_report.yaml +++ b/.github/ISSUE_TEMPLATE/1.bug_report.yaml @@ -53,7 +53,7 @@ body: - In-App Messaging - Liveness - Primitive components - - Storage (File Uploader) + - Storage - Other validations: required: true diff --git a/.github/ISSUE_TEMPLATE/2.feature_request.yaml b/.github/ISSUE_TEMPLATE/2.feature_request.yaml index b82562b9beb..efeb82d8a17 100644 --- a/.github/ISSUE_TEMPLATE/2.feature_request.yaml +++ b/.github/ISSUE_TEMPLATE/2.feature_request.yaml @@ -36,7 +36,7 @@ body: - In-App Messaging - Liveness - Primitive components - - Storage (File Uploader) + - Storage - Other validations: required: true diff --git a/README.md b/README.md index 485addbd8c2..8bd0036c2a0 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Amplify UI is an open-source UI library with cloud-connected components that are | In-App Messaging | ✅ | ✅ | | | | Geo (MapView) | ✅ | | | | | Account Settings | ✅ | | | | -| Storage (FileUploader) | ✅ | | | | +| Storage | ✅ | | | | | Liveness (FaceLivenessDetector) | ✅ | | | | | **Primitives** | **React** | **Angular** | **Vue** | From 29cfaccb8f325e437507933c68b7c3fe3429b0af Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 07:46:01 -0700 Subject: [PATCH 09/18] chore: add redirect from storagemanager to fileuploader --- docs/next.config.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/next.config.js b/docs/next.config.js index 5399dfba57f..6cfb25ff4f8 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -165,6 +165,14 @@ module.exports = withNextPluginPreval({ destination: '/react/components/accordion', permanent: false, }, + /** + * Renamed "Storage Manager" to "File Uploader" + */ + { + source: '/react/connected-components/storage/storagemanager', + destination: '/react/connected-components/storage/fileuploader', + permanent: true, + }, /** * Redirect traffic from CRA to Vite getting started page */ From ac198f7cc216f6dee16d76e6301f96e5d3d04ed5 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 08:10:00 -0700 Subject: [PATCH 10/18] chore: add informational alert that storage manager has been renamed file uploader --- docs/src/components/FileUploaderAlert.tsx | 11 +++++++++++ .../storage/fileuploader/react.mdx | 3 +++ 2 files changed, 14 insertions(+) create mode 100644 docs/src/components/FileUploaderAlert.tsx diff --git a/docs/src/components/FileUploaderAlert.tsx b/docs/src/components/FileUploaderAlert.tsx new file mode 100644 index 00000000000..4e96b4d2559 --- /dev/null +++ b/docs/src/components/FileUploaderAlert.tsx @@ -0,0 +1,11 @@ +import { Alert } from '@aws-amplify/ui-react'; + +export const FileUploaderAlert = () => { + return ( + + StorageManager has been renamed to FileUploader. The FileUploader export + is available since version 3.3.0, previous versions must still use + StorageManager. + + ); +}; diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index 7534aeecbe9..ac3cee8eb84 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -5,6 +5,7 @@ import AppDirectoryAlert from '@/components/AppDirectoryAlert'; import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay'; import ReactPropsTable from '@/components/propsTable/ReactPropsTable'; import { Example, ExampleCode } from '@/components/Example'; +import { FileUploaderAlert } from '@/components/FileUploaderAlert'; import { Fragment } from '@/components/Fragment'; import { InstallScripts } from '@/components/InstallScripts'; import { FILE_UPLOADER, FILE_PICKER, DROPZONE_PROPS, DISPLAY_TEXT } from './props'; @@ -34,6 +35,8 @@ import { + + To use the FileUploader component import it into your React application with the included styles. From dcab39efb780ab16a793d4f9fd86b8f89c9fcee4 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 11:26:22 -0700 Subject: [PATCH 11/18] chore: moving warning to top of page and changing text --- .../connected-components/storage/fileuploader/react.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index ac3cee8eb84..ced40d0f607 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -25,6 +25,10 @@ import { UploadActionsExample, } from './examples' + + This component used to be called Storage Manager. The Storage Manager component has been renamed, and all functionality is retained by the File Uploader component. + + ## Basic Usage @@ -82,10 +86,6 @@ The example below shows configuring the FileUploader to upload to the `protected ### Deprecated props - - This component used to be called Storage Manager. The Storage Manager component has been deprecated, and all functionality is retained by the File Uploader component. - - From 8c03f621c2b842510419a394f01b03dc0ad693d8 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 11:28:20 -0700 Subject: [PATCH 12/18] chore: update text of name change warning --- .../connected-components/storage/fileuploader/react.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index ced40d0f607..67661084057 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -25,8 +25,8 @@ import { UploadActionsExample, } from './examples' - - This component used to be called Storage Manager. The Storage Manager component has been renamed, and all functionality is retained by the File Uploader component. + + StorageManager component has been renamed `FileUploader` as of `aws-amplify/ui-react-storage` version `3.3.0`. Please upgrade to the new import path, as the `StoraageManager` will be removed in a future major version. From 6b2750cf0d2f806dd978167bc2f8271dd89e52b3 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 11:53:09 -0700 Subject: [PATCH 13/18] chore: remove rename warning, move info alert to top of page --- docs/src/components/FileUploaderAlert.tsx | 11 ----------- .../storage/fileuploader/react.mdx | 9 ++++----- 2 files changed, 4 insertions(+), 16 deletions(-) delete mode 100644 docs/src/components/FileUploaderAlert.tsx diff --git a/docs/src/components/FileUploaderAlert.tsx b/docs/src/components/FileUploaderAlert.tsx deleted file mode 100644 index 4e96b4d2559..00000000000 --- a/docs/src/components/FileUploaderAlert.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Alert } from '@aws-amplify/ui-react'; - -export const FileUploaderAlert = () => { - return ( - - StorageManager has been renamed to FileUploader. The FileUploader export - is available since version 3.3.0, previous versions must still use - StorageManager. - - ); -}; diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index 67661084057..a9e52bfa4c4 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -5,7 +5,6 @@ import AppDirectoryAlert from '@/components/AppDirectoryAlert'; import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay'; import ReactPropsTable from '@/components/propsTable/ReactPropsTable'; import { Example, ExampleCode } from '@/components/Example'; -import { FileUploaderAlert } from '@/components/FileUploaderAlert'; import { Fragment } from '@/components/Fragment'; import { InstallScripts } from '@/components/InstallScripts'; import { FILE_UPLOADER, FILE_PICKER, DROPZONE_PROPS, DISPLAY_TEXT } from './props'; @@ -25,10 +24,12 @@ import { UploadActionsExample, } from './examples' - - StorageManager component has been renamed `FileUploader` as of `aws-amplify/ui-react-storage` version `3.3.0`. Please upgrade to the new import path, as the `StoraageManager` will be removed in a future major version. + + StorageManager component has been renamed `FileUploader` as of `aws-amplify/ui-react-storage` version `3.3.0`. Please upgrade to the new import path, as the `StorageManager` will be removed in a future major version. +
+ ## Basic Usage @@ -39,8 +40,6 @@ import { - - To use the FileUploader component import it into your React application with the included styles. From 13532a88ab2c43351616bb4488e1b3c17289088d Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 11:57:02 -0700 Subject: [PATCH 14/18] Update docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx Co-authored-by: Caleb Pollman --- .../connected-components/storage/fileuploader/index.page.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx index 90b8c8536e3..75e2c6f6eb7 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx @@ -1,6 +1,6 @@ --- -title: File Uploader -description: The File Uploader lets your users upload and manage files to the cloud. +title: FileUploader +description: The FileUploader lets your users upload and manage files in the cloud. themeSource: packages/ui/src/theme/tokens/components/storagemanager.ts reactSource: packages/react-storage/src/components/StorageManager/StorageManager.tsx supportedFrameworks: react From 3dc67b3fed6c598c4e2d7e5f863107695f3dff52 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 11:57:47 -0700 Subject: [PATCH 15/18] Update docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> --- .../connected-components/storage/fileuploader/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index a9e52bfa4c4..c159b77c096 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -25,7 +25,7 @@ import { } from './examples' - StorageManager component has been renamed `FileUploader` as of `aws-amplify/ui-react-storage` version `3.3.0`. Please upgrade to the new import path, as the `StorageManager` will be removed in a future major version. + `StorageManager` component has been renamed `FileUploader` as of `@aws-amplify/ui-react-storage` version `3.3.0`. Please upgrade to the new import path, as the `StorageManager` will be removed in a future major version.
From 6144123bbf33a19111cbe1ea5105ed1c917741f0 Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 12:07:50 -0700 Subject: [PATCH 16/18] chore: update rename alert text --- .../connected-components/storage/fileuploader/react.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index c159b77c096..84ad6796f6d 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -25,7 +25,7 @@ import { } from './examples' - `StorageManager` component has been renamed `FileUploader` as of `@aws-amplify/ui-react-storage` version `3.3.0`. Please upgrade to the new import path, as the `StorageManager` will be removed in a future major version. + Beginning with @aws-amplify/ui-react-storage version 3.3.0, the StorageManager component has been renamed to FileUploader. To migrate, upgrade to the latest version of @aws-amplify/ui-react-storage and replace StorageManager related imports with their corresponding FileUploader equivalents. StorageManager will continue to receive official support until the next major version release of @aws-amplify/ui-react-storage, at which point it will be fully replaced by FileUploader.
From cfa753306e4c2e4607922d9e2b67d04787d6563f Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 12:09:46 -0700 Subject: [PATCH 17/18] chore: add storage component specificity to readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8bd0036c2a0..4d04ec6b0ae 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,8 @@ Amplify UI is an open-source UI library with cloud-connected components that are | In-App Messaging | ✅ | ✅ | | | | Geo (MapView) | ✅ | | | | | Account Settings | ✅ | | | | -| Storage | ✅ | | | | +| Storage (FileUploader) | ✅ | | | | +| Storage (StorageImage) | ✅ | | | | | Liveness (FaceLivenessDetector) | ✅ | | | | | **Primitives** | **React** | **Angular** | **Vue** | From 57425f118548655904d54cd2f4414204e969a99e Mon Sep 17 00:00:00 2001 From: Jordan Van Ness Date: Thu, 5 Sep 2024 12:21:54 -0700 Subject: [PATCH 18/18] chore: further update to alert text, breaking message into two paragraphs --- .../connected-components/storage/fileuploader/react.mdx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx index 84ad6796f6d..1d25a6d9700 100644 --- a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx +++ b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx @@ -25,7 +25,14 @@ import { } from './examples' - Beginning with @aws-amplify/ui-react-storage version 3.3.0, the StorageManager component has been renamed to FileUploader. To migrate, upgrade to the latest version of @aws-amplify/ui-react-storage and replace StorageManager related imports with their corresponding FileUploader equivalents. StorageManager will continue to receive official support until the next major version release of @aws-amplify/ui-react-storage, at which point it will be fully replaced by FileUploader. + Beginning with _@aws-amplify/ui-react-storage_ version 3.3.0, the `StorageManager` + component has been renamed to `FileUploader`. To migrate, upgrade to the + latest version of _@aws-amplify/ui-react-storage_ and replace `StorageManager` + related imports with their corresponding `FileUploader` equivalents. +
+ `StorageManager` will continue to receive official support until the next major + version release of _@aws-amplify/ui-react-storage_, at which point `StorageManager` + will be replaced by `FileUploader`.