feat(ui-react-storage): add StorageManager (#3589)

Co-authored-by: Scott Rees <6165315+reesscot@users.noreply.github.com> Co-authored-by: Caleb Pollman <cpollman@amazon.com> Co-authored-by: Ioana Brooks <68251134+ioanabrooks@users.noreply.github.com>
aws-amplify · Apr 3, 2023 · 3c3fbf4 · 3c3fbf4
1 parent 72d5e06
commit 3c3fbf4
Show file tree

Hide file tree

Showing 131 changed files with 6,317 additions and 149 deletions.
diff --git a/.changeset/sharp-buttons-unite.md b/.changeset/sharp-buttons-unite.md
@@ -0,0 +1,30 @@
+---
+"@aws-amplify/ui-react-storage": major
+"@aws-amplify/ui-react": minor
+---
+
+FileUploader becomes StorageManager!
+
+Creating a new package `@aws-amplify/ui-react-storage` to keep all future Storage related connected components, the first of which is the StorageManager.
+The StorageManager is a partial re-write of the FileUploader to address some customer issues and make the component more scalable for the future.
+
+Some notable changes from FileUploader -> StorageManager
+
+* Component slots: You can override each part of the StorageManager with your custom UI
+* Pre-upload process files: You can use this to programatically change file names before upload or perform optimizations and validations.
+* Easy text updates: The StorageManager component has a `displayText` prop where you can pass in all the text the component uses.
+
+```jsx
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+
+export const DefaultStorageManagerExample = () => {
+  return (
+    <StorageManager
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      maxFileCount={1}
+    />
+  );
+};
+```
+
diff --git a/.github/workflows/reusable-e2e.yml b/.github/workflows/reusable-e2e.yml
@@ -150,6 +150,10 @@ jobs:
         if: steps.restore-package-cache.outputs.cache-hit != 'true'
         run: yarn ${{ matrix.package }} build
 
+      - name: Build react-storage package
+        if: ${{ matrix.package == 'react' }}
+        run: yarn react-storage build
+
       - name: Add Amplify CLI
         run: yarn global add @aws-amplify/cli
 
@@ -340,6 +344,9 @@ jobs:
 
       - name: Build react package
         run: yarn react build
+
+      - name: Build react-storage package
+        run: yarn react-storage build
 
       - name: Build docs package
         run: yarn docs build

diff --git a/.github/workflows/reusable-unit.yml b/.github/workflows/reusable-unit.yml
@@ -27,6 +27,7 @@ jobs:
           - react
           - react-native
           - react-core
+          - react-storage
 
     steps:
       - name: Checkout Amplify UI
@@ -75,9 +76,13 @@ jobs:
         run: yarn ui build
 
       - name: Build react-core package
-        if: ${{ matrix.package == 'react' || matrix.package == 'react-native' }}
+        if: ${{ matrix.package == 'react' || matrix.package == 'react-native' || matrix.package == 'react-storage' }}
         run: yarn react-core build
 
+      - name: Build react package
+        if: ${{ matrix.package == 'react-storage' && matrix.package != 'react'}}
+        run: yarn react build
+
       - name: Build ${{ matrix.package }} package
         if: ${{ matrix.package != 'ui' }}
         run: yarn ${{ matrix.package }} build

diff --git a/docs/package.json b/docs/package.json
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@aws-amplify/ui-react": "4.4.3",
+    "@aws-amplify/ui-react-storage": "0.0.1",
     "@cucumber/gherkin": "^19.0.3",
     "@cucumber/messages": "^16.0.1",
     "@docsearch/react": "3",

diff --git a/docs/src/components/propsTable/ReactPropsTable.tsx b/docs/src/components/propsTable/ReactPropsTable.tsx
@@ -8,6 +8,7 @@ import {
   ResponsiveTable,
   ResponsiveTableCell,
 } from '@/components/ResponsiveTable';
+import { CodeHighlight } from '../CodeHighlight';
 
 interface PropMetaData {
   name: string;
@@ -26,7 +27,9 @@ const Row = ({ description, name, type }: PropMetaData) => (
   <TableRow key={`${name}:${description}:${type}`}>
     <ResponsiveTableCell label="Name">{name}</ResponsiveTableCell>
     <ResponsiveTableCell label="Description">{description}</ResponsiveTableCell>
-    <ResponsiveTableCell label="Type">{type}</ResponsiveTableCell>
+    <ResponsiveTableCell label="Type">
+      <CodeHighlight code={type} language="typescript" />
+    </ResponsiveTableCell>
   </TableRow>
 );
 

diff --git a/docs/src/data/links.tsx b/docs/src/data/links.tsx
@@ -164,6 +164,13 @@ export const connectedComponents: ComponentNavItem[] = [
     platforms: ['react'],
     tertiary: true,
   },
+  {
+    href: '/connected-components/storage/storagemanager',
+    label: 'Storage Manager',
+    body: 'StorageManager component allows users to upload and manage files in your Amplify backend.',
+    platforms: ['react'],
+    tertiary: true,
+  },
   {
     href: '/connected-components/in-app-messaging',
     label: 'In-App Messaging',

diff --git a/...latform]/connected-components/storage/fileuploader/examples/IsPreviewerVisibleExample.tsx b/...latform]/connected-components/storage/fileuploader/examples/IsPreviewerVisibleExample.tsx
diff --git a/...fileuploader/examples/MaxFilesExample.tsx → ...uploader/examples/MaxFileCountExample.tsx b/...fileuploader/examples/MaxFilesExample.tsx → ...uploader/examples/MaxFileCountExample.tsx
@@ -1,6 +1,6 @@
 import { FileUploader } from '@aws-amplify/ui-react';
 
-export const MaxFilesExample = () => {
+export const MaxFileCountExample = () => {
   return (
     <FileUploader
       maxFileCount={3}

diff --git a/.../fileuploader/examples/MaxSizeExample.tsx → ...euploader/examples/MaxFileSizeExample.tsx b/.../fileuploader/examples/MaxSizeExample.tsx → ...euploader/examples/MaxFileSizeExample.tsx
@@ -1,6 +1,6 @@
 import { FileUploader } from '@aws-amplify/ui-react';
 
-export const MaxSizeExample = () => {
+export const MaxFileSizeExample = () => {
   return (
     <FileUploader
       maxSize={100000}

diff --git a/...c/pages/[platform]/connected-components/storage/fileuploader/examples/MultipleExample.tsx b/...c/pages/[platform]/connected-components/storage/fileuploader/examples/MultipleExample.tsx
diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts b/docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/index.ts
@@ -7,12 +7,10 @@ export { FileUploaderComponentsExample } from './FileUploaderComponentsExample';
 export { TrackerComponentsExample } from './TrackerComponentsExample';
 export { PreviewerComponentsExample } from './PreviewerComponentsExample';
 export { UploadButtonComponentsExample } from './UploadButtonComponentsExample';
-export { IsPreviewerVisibleExample } from './IsPreviewerVisibleExample';
 export { LevelExample } from './LevelExample';
 export { AutoProceedExample } from './AutoProceedExample';
 export { VariationExample } from './VariationExample';
-export { MaxFilesExample } from './MaxFilesExample';
-export { MaxSizeExample } from './MaxSizeExample';
-export { MultipleExample } from './MultipleExample';
+export { MaxFileCountExample } from './MaxFileCountExample';
+export { MaxFileSizeExample } from './MaxFileSizeExample';
 export { ResumableExample } from './ResumableExample';
 export { ShowImagesExample } from './ShowImagesExample';
diff --git a/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx b/docs/src/pages/[platform]/connected-components/storage/fileuploader/react.mdx
@@ -5,12 +5,12 @@ import { FeatureFlagSection } from '@/components/FeatureFlagSection';
 import FEATURE_FLAGS from '@/utils/featureFlags';
 import {UPLOAD_DROP_COMPONENTS, UPLOAD_BUTTON_COMPONENTS, PREVIEWER_COMPONENTS, TRACKER_COMPONENTS} from "./props"
 import { DefaultFileUploaderExample, AcceptedFileTypesExample, FileUploaderErrorExample, FileUploaderThemeExample, 
-FileUploaderComponentsExample, LevelExample, IsPreviewerVisibleExample, VariationExample, AutoProceedExample, MaxFilesExample, 
-MaxSizeExample, MultipleExample, ResumableExample, ShowImagesExample, FileUploaderSuccessExample, PreviewerComponentsExample, TrackerComponentsExample, UploadButtonComponentsExample } from './examples'
+FileUploaderComponentsExample, LevelExample, VariationExample, AutoProceedExample, MaxFileCountExample,
+MaxFileSizeExample, ResumableExample, ShowImagesExample, FileUploaderSuccessExample, PreviewerComponentsExample, TrackerComponentsExample, UploadButtonComponentsExample } from './examples'
 import ReactPropsTable from '@/components/propsTable/ReactPropsTable';
 
-<Alert variation="info" heading="Developer Preview">
-  The File Uploader component is in developer preview! 
+<Alert variation="warning" heading="Developer Preview">
+  FileUploader has exited Dev Preview and was renamed to [StorageManager](storagemanager) with some API changes. Please migrate to the StorageManager component, as the FileUploader component will be removed in a future major release.
 </Alert>
 
 ## Overview
@@ -100,20 +100,8 @@ The `variation` prop can be added to show a `button` or as a `drop` area when th
   </ExampleCode>
 </Example>
 
-### Show Preview Page
 
-The `isPreviewerVisible` prop can be used to show the preview page on initial load of the File Uploader. The default is set as `false`.
-
-<Example>
-  <IsPreviewerVisibleExample />
-
-  <ExampleCode>
-    ```jsx file=./examples/IsPreviewerVisibleExample.tsx
-    ```
-  </ExampleCode>
-</Example>
-
-### Start Upload After Selection
+### Automatically Upload
 
 The `shouldAutoProceed` prop will automatically start the upload after a file is selected. The default is `false`.
 
@@ -127,9 +115,6 @@ The `shouldAutoProceed` prop will automatically start the upload after a file is
 </Example>
 
 
-
-
-
 ## Setting Limits
 
 The following props set limits on what the File Uploader will accept.
@@ -139,10 +124,10 @@ The following props set limits on what the File Uploader will accept.
 The `maxFileCount` prop accepts how many files at one time you can select to upload.  The default is unlimited.
 
 <Example>
-  <MaxFilesExample />
+  <MaxFileCountExample />
 
   <ExampleCode>
-    ```jsx file=./examples/MaxFilesExample.tsx
+    ```jsx file=./examples/MaxFileCountExample.tsx
     ```
   </ExampleCode>
 </Example>
@@ -152,28 +137,13 @@ The `maxFileCount` prop accepts how many files at one time you can select to upl
 
 ### Max Size Per File
 
-The `maxSize` prop sets a maximum file size the uploader will accept in bytes. The default is unlimited.
-
-<Example>
-  <MaxSizeExample />
-
-  <ExampleCode>
-    ```jsx file=./examples/MaxSizeExample.tsx
-    ```
-  </ExampleCode>
-</Example>
-
-
-
-### Allow Multiple Files
-
-The `hasMultipleFiles` prop allows you to select more then one file for upload. The default is set as `true`. 
+The `maxFileSize` prop sets a maximum file size the uploader will accept in bytes. The default is unlimited.
 
 <Example>
-  <MultipleExample />
+  <MaxFileSizeExample />
 
   <ExampleCode>
-    ```jsx file=./examples/MultipleExample.tsx
+    ```jsx file=./examples/MaxFileSizeExample.tsx
     ```
   </ExampleCode>
 </Example>

diff --git a/...rm]/connected-components/storage/storagemanager/examples/DefaultStorageManagerExample.tsx b/...rm]/connected-components/storage/storagemanager/examples/DefaultStorageManagerExample.tsx
@@ -0,0 +1,13 @@
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+
+export const DefaultStorageManagerExample = () => {
+  return (
+    <StorageManager
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      maxFileCount={1}
+      isResumable
+      provider="slow" // IGNORE
+    />
+  );
+};