chore: Rename references to Storage Manager in docs to File Uploader (#5697)

* chore: rename references to Storage Manager in docs to File Uploader

* chore: reverting reference to StorageManager in deprecated props section

* chore: replacing /storagemanager with /fileuploader in test sitemap

* chore: update Storage Manager reference in README

* chore: removing references to not-yet-existing FileUploader component

* chore: reverting references to storageManager icon

* fix: fixing incorrect comma placement

* chore: make references to Storage in GitHub guides more generic

* chore: add redirect from storagemanager to fileuploader

* chore: add informational alert that storage manager has been renamed file uploader

* chore: moving warning to top of page and changing text

* chore: update text of name change warning

* chore: remove rename warning, move info alert to top of page

* Update docs/src/pages/[platform]/connected-components/storage/fileuploader/index.page.mdx

Co-authored-by: Caleb Pollman <cpollman@amazon.com>

* Update docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx

Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>

* chore: update rename alert text

* chore: add storage component specificity to readme

* chore: further update to alert text, breaking message into two paragraphs

---------

Co-authored-by: Caleb Pollman <cpollman@amazon.com>
Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com>

Author: 3 people

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/ComponentOverrides.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import {
+  Card,
+  Button,
+  Flex,
+  Text,
+  Divider,
+  Image,
+  Loader,
+  Icon,
+} from '@aws-amplify/ui-react';
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+
+export const App = () => {
+  return (
+    <StorageManager
+      acceptedFileTypes={['image/*']}
+      path="public/"
+      maxFileCount={100}
+      components={{
+        Container({ children }) {
+          return <Card variation="elevated">{children}</Card>;
+        },
+        DropZone({ children, displayText, inDropZone, ...rest }) {
+          return (
+            <Flex
+              alignItems="center"
+              direction="column"
+              padding="medium"
+              backgroundColor={inDropZone ? 'primary.10' : ''}
+              {...rest}
+            >
+              <Text>Drop files here</Text>
+              <Divider size="small" label="or" maxWidth="10rem" />
+              {children}
+            </Flex>
+          );
+        },
+        FilePicker({ onClick }) {
+          return (
+            <Button variation="primary" onClick={onClick}>
+              Browse Files
+            </Button>
+          );
+        },
+        FileList({ files, onCancelUpload, onDeleteUpload }) {
+          return (
+            <Flex direction="row">
+              {files.map(({ file, key, progress, id, status, uploadTask }) => (
+                <Flex
+                  key={key}
+                  justifyContent="center"
+                  alignItems="center"
+                  width="5rem"
+                  height="5rem"
+                  position="relative"
+                >
+                  <Image
+                    borderRadius="small"
+                    height="100%"
+                    objectFit="cover"
+                    src={URL.createObjectURL(file)}
+                    alt={key}
+                  />
+                  {progress < 100 ? (
+                    <Loader
+                      position="absolute"
+                      size="large"
+                      percentage={progress}
+                      isDeterminate
+                      isPercentageTextHidden
+                    />
+                  ) : null}
+
+                  <Button
+                    opacity="50"
+                    borderRadius="xxl"
+                    backgroundColor="background.primary"
+                    position="absolute"
+                    variation="link"
+                    size="small"
+                    onClick={() => {
+                      if (status === 'uploading') {
+                        onCancelUpload({ id, uploadTask });
+                      } else {
+                        onDeleteUpload({ id });
+                      }
+                    }}
+                  >
+                    <Icon
+                      fontSize="large"
+                      color="font.error"
+                      viewBox={{ width: 512, height: 512 }}
+                      paths={[
+                        {
+                          d: 'M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z',
+                          strokeWidth: '32',
+                          fill: 'none',
+                          strokeMiterlimit: '10',
+                          stroke: 'currentColor',
+                        },
+                        {
+                          d: 'M320 320L192 192m0 128l128-128',
+                          strokeWidth: '32',
+                          fill: 'none',
+                          strokeLinecap: 'round',
+                          stroke: 'currentColor',
+                        },
+                      ]}
+                    />
+                  </Button>
+                </Flex>
+              ))}
+            </Flex>
+          );
+        },
+      }}
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/props.ts

@@ -106,11 +106,6 @@ export const FILE_UPLOADER = [
     description: 'Use the accelerated S3 endpoint to upload files.',
     type: 'boolean',
   },
-  {
-    name: `useAccelerateEndpoint?`,
-    description: 'Use the accelerated S3 endpoint to upload files.',
-    type: 'boolean',
-  },
   {
     name: `components?.Container?`,
     description: 'The container the FileUploader is wrapped in.',