resolve conflicts

docs/__tests__/__snapshots__/sitemap.test.ts.snap

@@ -110,6 +110,7 @@ exports[`Sitemap Snapshot 1`] = `
 /react/connected-components/liveness/troubleshooting, 
 /react/connected-components/storage, 
 /react/connected-components/storage/fileuploader, 
+/react/connected-components/storage/storage-browser, 
 /react/connected-components/storage/storageimage, 
 /react/getting-started/accessibility, 
 /react/getting-started/figma, 

docs/package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@aws-amplify/ui-react": "6.7.0",
+    "@aws-amplify/ui-react-storage": "3.4.1",
     "@docsearch/react": "3",
     "@mdx-js/loader": "^2.1.0",
     "@mdx-js/mdx": "^2.1.0",

docs/src/data/links.tsx

@@ -204,6 +204,13 @@ export const connectedComponents: ComponentNavItem[] = [
     body: "Amplify UI Storage components allow you to store files in the cloud using Amplify's Storage category",
     platforms: ['react'],
   },
+  {
+    href: '/connected-components/storage/storage-browser',
+    label: 'Storage Browser',
+    body: 'The StorageBrowser provides users a simple interface for interacting with data stored in Amazon S3.',
+    platforms: ['react'],
+    tertiary: true,
+  },
   {
     href: '/connected-components/storage/storageimage',
     label: 'Storage Image',

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/Composed.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { Button, Flex, Text } from '@aws-amplify/ui-react';
+import { IconChevronRight } from '@aws-amplify/ui-react/internal';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+import { ComposedCopyView } from './ComposedCopyView';
+import { ComposedCreateFolderView } from './ComposedCreateFolderView';
+import { ComposedDeleteView } from './ComposedDeleteView';
+import { ComposedUploadView } from './ComposedUploadView';
+
+function LocationsView() {
+  const state = useView('Locations');
+
+  return (
+    <Flex direction="column" padding="medium">
+      <Text fontWeight="bold">Locations</Text>
+      {state.pageItems.map((location) => {
+        return (
+          <Button
+            key={location.id}
+            justifyContent="flex-start"
+            onClick={() => {
+              state.onNavigate(location);
+            }}
+          >
+            <Text flex="1">
+              s3://{location.bucket}/{location.prefix}
+            </Text>
+            <Text as="span" color="font.tertiary" fontWeight="normal">
+              {location.permissions.includes('list') ? 'Read' : null}{' '}
+              {location.permissions.includes('write') ? 'Write' : null}
+            </Text>
+            <IconChevronRight color="font.tertiary" />
+          </Button>
+        );
+      })}
+    </Flex>
+  );
+}
+
+const { LocationActionView } = StorageBrowser;
+
+function MyLocationActionView({
+  type,
+  onExit,
+}: {
+  type?: string;
+  onExit: () => void;
+}) {
+  let DialogContent = null;
+  if (!type) return DialogContent;
+
+  switch (type) {
+    case 'copy':
+      return <ComposedCopyView onExit={onExit} />;
+    case 'createFolder':
+      return <ComposedCreateFolderView onExit={onExit} />;
+    case 'delete':
+      return <ComposedDeleteView onExit={onExit} />;
+    case 'upload':
+      return <ComposedUploadView onExit={onExit} />;
+    default:
+      return <LocationActionView onExit={onExit} />;
+  }
+}
+
+function MyStorageBrowser() {
+  const state = useView('LocationDetail');
+  const [currentAction, setCurrentAction] = React.useState<string>();
+  const ref = React.useRef<HTMLDialogElement>(null);
+
+  if (!state.location.current) {
+    return <LocationsView />;
+  }
+
+  return (
+    <>
+      <StorageBrowser.LocationDetailView
+        key={currentAction}
+        onActionSelect={(action) => {
+          setCurrentAction(action);
+          ref.current?.showModal();
+        }}
+      />
+      <dialog ref={ref}>
+        <MyLocationActionView
+          type={currentAction}
+          onExit={() => {
+            setCurrentAction(undefined);
+            ref.current?.close();
+          }}
+        />
+      </dialog>
+    </>
+  );
+}
+
+export default function Example() {
+  return (
+    <StorageBrowser.Provider>
+      <MyStorageBrowser />
+    </StorageBrowser.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedCopyView.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+
+export function ComposedCopyView({ onExit }: { onExit: () => void }) {
+  const state = useView('Copy');
+
+  return (
+    <StorageBrowser.CopyView.Provider {...state} onActionExit={onExit}>
+      <StorageBrowser.CopyView.Exit />
+      <StorageBrowser.CopyView.TasksTable />
+      <StorageBrowser.CopyView.Destination />
+      <StorageBrowser.CopyView.FoldersSearch />
+      <StorageBrowser.CopyView.FoldersTable />
+      <StorageBrowser.CopyView.Start />
+      <StorageBrowser.CopyView.Message />
+    </StorageBrowser.CopyView.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedCreateFolderView.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+
+export function ComposedCreateFolderView({ onExit }: { onExit: () => void }) {
+  const state = useView('CreateFolder');
+
+  return (
+    <StorageBrowser.CreateFolderView.Provider {...state} onActionExit={onExit}>
+      <StorageBrowser.CreateFolderView.Exit />
+      <StorageBrowser.CreateFolderView.NameField />
+      <StorageBrowser.CreateFolderView.Start />
+      <StorageBrowser.CreateFolderView.Message />
+    </StorageBrowser.CreateFolderView.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedDeleteView.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+
+export function ComposedDeleteView({ onExit }: { onExit: () => void }) {
+  const state = useView('Delete');
+
+  return (
+    <StorageBrowser.DeleteView.Provider {...state} onActionExit={onExit}>
+      <StorageBrowser.DeleteView.Exit />
+      <StorageBrowser.DeleteView.TasksTable />
+      <StorageBrowser.DeleteView.Start />
+      <StorageBrowser.DeleteView.Message />
+    </StorageBrowser.DeleteView.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedLocationDetailView.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Flex } from '@aws-amplify/ui-react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+
+function LocationDetailView() {
+  const state = useView('LocationDetail');
+
+  return (
+    <StorageBrowser.LocationDetailView.Provider {...state}>
+      <Flex direction="row">
+        <StorageBrowser.LocationDetailView.Refresh />
+        <StorageBrowser.LocationDetailView.Search />
+      </Flex>
+      <StorageBrowser.LocationDetailView.LocationItemsTable />
+      <StorageBrowser.LocationDetailView.Pagination />
+    </StorageBrowser.LocationDetailView.Provider>
+  );
+}
+
+export default function Example() {
+  return (
+    <StorageBrowser.Provider>
+      <LocationDetailView />
+    </StorageBrowser.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedLocationsView.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Flex } from '@aws-amplify/ui-react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+
+function LocationsView() {
+  const state = useView('Locations');
+
+  return (
+    <StorageBrowser.LocationsView.Provider {...state}>
+      <Flex direction="row">
+        <StorageBrowser.LocationsView.Refresh />
+        <StorageBrowser.LocationsView.Search />
+      </Flex>
+      <StorageBrowser.LocationsView.LocationsTable />
+      <StorageBrowser.LocationsView.Pagination />
+    </StorageBrowser.LocationsView.Provider>
+  );
+}
+
+export default function Example() {
+  return (
+    <StorageBrowser.Provider>
+      <LocationsView />
+    </StorageBrowser.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/ComposedUploadView.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Flex } from '@aws-amplify/ui-react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+
+export function ComposedUploadView({ onExit }: { onExit: () => void }) {
+  const state = useView('Upload');
+
+  return (
+    <StorageBrowser.UploadView.Provider {...state} onActionExit={onExit}>
+      <StorageBrowser.UploadView.Exit />
+      <StorageBrowser.UploadView.TasksTable />
+      <Flex direction="row" width="100%">
+        <StorageBrowser.UploadView.AddFiles />
+        <StorageBrowser.UploadView.AddFolder />
+        <StorageBrowser.UploadView.Start />
+      </Flex>
+      <StorageBrowser.UploadView.Message />
+    </StorageBrowser.UploadView.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/Custom.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { StorageBrowser, useView } from './MockStorageBrowser';
+import { CustomDeleteView } from './CustomDeleteView';
+import { CustomCopyView } from './CustomCopyView';
+import { CustomCreateFolderView } from './CustomCreateFolderView';
+import { CustomUploadView } from './CustomUploadView';
+import { CustomLocationsView } from './CustomLocationsView';
+
+function MyLocationActionView({
+  type,
+  onExit,
+}: {
+  type?: string;
+  onExit: () => void;
+}) {
+  let DialogContent = null;
+  if (!type) return DialogContent;
+
+  switch (type) {
+    case 'copy':
+      return <CustomCopyView onExit={onExit} />;
+    case 'createFolder':
+      return <CustomCreateFolderView onExit={onExit} />;
+    case 'delete':
+      return <CustomDeleteView onExit={onExit} />;
+    case 'upload':
+      return <CustomUploadView onExit={onExit} />;
+    default:
+      return null;
+  }
+}
+
+function MyStorageBrowser() {
+  const state = useView('LocationDetail');
+  const [currentAction, setCurrentAction] = React.useState<string>();
+
+  if (!state.location.current) {
+    return <CustomLocationsView />;
+  }
+
+  if (currentAction) {
+    return (
+      <MyLocationActionView
+        type={currentAction}
+        onExit={() => {
+          setCurrentAction(undefined);
+        }}
+      />
+    );
+  }
+
+  return (
+    <StorageBrowser.LocationDetailView
+      key={currentAction}
+      onActionSelect={(action) => {
+        setCurrentAction(action);
+      }}
+    />
+  );
+}
+
+export default function Example() {
+  return (
+    <StorageBrowser.Provider>
+      <MyStorageBrowser />
+    </StorageBrowser.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/CustomCopyView.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Button, Flex, Text } from '@aws-amplify/ui-react';
+import { useView } from './MockStorageBrowser';
+
+export function CustomCopyView({ onExit }: { onExit: () => void }) {
+  const state = useView('Copy');
+
+  return (
+    <Flex direction="column">
+      <Button variation="link" alignSelf="flex-start" onClick={onExit}>
+        Exit
+      </Button>
+      {state.tasks.map((task) => (
+        <Flex key={task.data.key} direction="row">
+          <Text>{task.data.key}</Text>
+        </Flex>
+      ))}
+      <Button onClick={state.onActionStart}>
+        Copy {state.tasks.length} files
+      </Button>
+    </Flex>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/CustomCreateFolderView.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Button, Flex, TextField } from '@aws-amplify/ui-react';
+import { useView } from './MockStorageBrowser';
+
+export function CustomCreateFolderView({ onExit }: { onExit: () => void }) {
+  const state = useView('CreateFolder');
+
+  return (
+    <Flex
+      as="form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        try {
+          state.onActionStart();
+        } catch (error) {
+          console.log(error);
+        }
+      }}
+      direction="column"
+    >
+      <Button variation="link" alignSelf="flex-start" onClick={onExit}>
+        Exit
+      </Button>
+      <TextField
+        label=""
+        value={state.folderName}
+        onChange={(e) => {
+          state.onFolderNameChange(e.target.value);
+        }}
+        outerEndComponent={<Button type="submit">Start</Button>}
+      />
+    </Flex>
+  );
+}