feat(storage-browser): add type docs, expose handlers, cleanup interfaces, refactor table content (#6473)

* chore(storage-browser): add type definitions and exports (#6409)

* fix(storage-browser): address erroneous display text interfaces (#6418)

* chore(storage-browser): add useResolveTableData (#6419)

* docs(ui-react-storage): add actions doc (#6415)

* fix(storage-browser): address interface issues in useAction (#6454)

* fix(storage-browser): add DefaultHandlers interface and constant (#6464)

* chore(storage-browser): add react-router app, add StorageBrowser examples, add @aws-amplify/ui-test-utils (#6468)

* chore(storage-browser): refactor action view table resolution (#6470)

* chore: bump react-router-example vite version (#6478)

---------

Co-authored-by: AllanZhengYP <[email protected]>

Author: calebpollman

.changeset/config.json

@@ -15,8 +15,10 @@
     "@aws-amplify/ui-docs",
     "@aws-amplify/ui-e2e",
     "@aws-amplify/ui-environments",
-    "@aws-amplify/ui-next-example",
+    "@aws-amplify/ui-next-pages-router-example",
+    "@aws-amplify/ui-next-app-router-example",
     "@aws-amplify/ui-react-native-example",
+    "@aws-amplify/ui-react-router-example",
     "@aws-amplify/ui-vue-example"
   ]
 }

.changeset/nasty-brooms-compare.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+feat(storage-browser): add type docs, expose handlers, cleanup interfaces, refactor table content

.github/dependency-review/config.yml

@@ -1,7 +1,6 @@
 allow-licenses:
   - '0BSD'
   - 'Apache-2.0'
-  - 'Apache-2.0 AND MIT'
   - 'BlueOak-1.0.0'
   - 'BSL-1.0'
   - 'BSD-1-Clause'
@@ -14,12 +13,10 @@ allow-licenses:
   - 'CC-BY-3.0'
   - 'CC-BY-4.0'
   - 'CC0-1.0'
-  - 'CC0-1.0 AND MIT'
   - 'curl'
   - 'ISC'
   - 'JSON'
   - 'MIT'
-  - 'MIT AND Zlib'
   - 'MPL-2.0'
   - 'NTP'
   - 'OFL-1.0'
@@ -36,3 +33,8 @@ allow-licenses:
   - 'X11'
   - 'zlib-acknowledgement'
   - 'Zlib'
+  - 'Apache-2.0 AND MIT'
+  - 'CC0-1.0 AND MIT'
+  - 'MIT AND Zlib'
+  - 'ISC AND MIT'
+  - 'Apache-2.0 AND BSD-2-Clause AND CC0-1.0 AND ISC AND MIT'

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

@@ -39,17 +39,13 @@ function LocationsView() {
 
 const { LocationActionView } = StorageBrowser;
 
-function MyLocationActionView({
-  type,
-  onExit,
-}: {
-  type?: string;
-  onExit: () => void;
-}) {
-  let DialogContent = null;
-  if (!type) return DialogContent;
+function MyLocationActionView() {
+  const state = useView('LocationDetail');
+  const onExit = () => {
+    state.onActionSelect('');
+  };
 
-  switch (type) {
+  switch (state.actionType) {
     case 'copy':
       return <ComposedCopyView onExit={onExit} />;
     case 'createFolder':
@@ -65,30 +61,25 @@ function MyLocationActionView({
 
 function MyStorageBrowser() {
   const state = useView('LocationDetail');
-  const [currentAction, setCurrentAction] = React.useState<string>();
   const ref = React.useRef<HTMLDialogElement>(null);
 
+  React.useEffect(() => {
+    if (state.actionType) {
+      ref.current?.showModal();
+    } else {
+      ref.current?.close();
+    }
+  }, [state.actionType]);
+
   if (!state.location.current) {
     return <LocationsView />;
   }
 
   return (
     <>
-      <StorageBrowser.LocationDetailView
-        key={currentAction}
-        onActionSelect={(action) => {
-          setCurrentAction(action);
-          ref.current?.showModal();
-        }}
-      />
+      <StorageBrowser.LocationDetailView />
       <dialog ref={ref}>
-        <MyLocationActionView
-          type={currentAction}
-          onExit={() => {
-            setCurrentAction(undefined);
-            ref.current?.close();
-          }}
-        />
+        <MyLocationActionView />
       </dialog>
     </>
   );

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

@@ -6,17 +6,13 @@ 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;
+function MyLocationActionView() {
+  const state = useView('LocationDetail');
+  const onExit = () => {
+    state.onActionSelect('');
+  };
 
-  switch (type) {
+  switch (state.actionType) {
     case 'copy':
       return <CustomCopyView onExit={onExit} />;
     case 'createFolder':
@@ -32,31 +28,16 @@ function MyLocationActionView({
 
 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);
-        }}
-      />
-    );
+  if (state.actionType) {
+    return <MyLocationActionView />;
   }
 
-  return (
-    <StorageBrowser.LocationDetailView
-      key={currentAction}
-      onActionSelect={(action) => {
-        setCurrentAction(action);
-      }}
-    />
-  );
+  return <StorageBrowser.LocationDetailView />;
 }
 
 export default function Example() {

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
+import { Button, Flex, Link, StepperField, Text } from '@aws-amplify/ui-react';
+import { generateUrlHandler } from './generateUrlHandler';
+import { mockConfig } from './mockConfig'; // IGNORE
+import { defaultActions } from './defaultActions'; // IGNORE
+
+const { StorageBrowser, useAction, useView } = createStorageBrowser({
+  actions: {
+    default: defaultActions, // IGNORE
+    custom: {
+      generateUrl: {
+        actionListItem: {
+          icon: 'download',
+          label: 'Generate Download Links',
+          disable: (selected) => !selected?.length,
+        },
+        handler: generateUrlHandler,
+        viewName: 'GenerateUrlView',
+      },
+    },
+  },
+  config: mockConfig, // IGNORE
+});
+
+const GenerateUrlView = () => {
+  const [duration, setDuration] = React.useState(60);
+
+  const { onActionExit, fileDataItems } = useView('LocationDetail');
+
+  const items = React.useMemo(
+    () =>
+      !fileDataItems
+        ? []
+        : fileDataItems.map((item) => ({ ...item, duration })),
+    [fileDataItems, duration]
+  );
+
+  const [
+    // Execution status and result of each task. The status includes  'CANCELED', 'FAILED', 'COMPLETE', 'OVERWRITE_PREVENTED', 'QUEUED', 'PENDING'.
+    { tasks },
+    // Start executing the action against the provided `items`.
+    handleGenerate,
+  ] = useAction(
+    // Name of the action.
+    'generateUrl',
+    // List of action inputs.
+    { items }
+  );
+
+  return (
+    <Flex direction="column">
+      <Button onClick={onActionExit}>Exit</Button>
+      <StepperField
+        label="Duration"
+        step={15}
+        value={duration}
+        min={15}
+        max={300}
+        onStepChange={setDuration}
+      />
+      <Button onClick={() => handleGenerate()}>Start</Button>
+      {!tasks
+        ? null
+        : tasks.map(({ data, status, value }) => {
+            return (
+              <Flex direction="row" key={data.fileKey}>
+                <Text>{data.fileKey}</Text>
+                {value?.link ? <Link href={value.link}>link</Link> : null}
+                <Text>{status}</Text>
+              </Flex>
+            );
+          })}
+    </Flex>
+  );
+};
+
+function MyStorageBrowser() {
+  const state = useView('LocationDetail');
+
+  if (!state.location.current) {
+    return <StorageBrowser.LocationsView />;
+  } else if (state.actionType === 'generateUrl') {
+    return <GenerateUrlView />;
+  } else if (state.actionType) {
+    return <StorageBrowser.LocationActionView />;
+  } else {
+    return <StorageBrowser.LocationDetailView />;
+  }
+}
+
+export default function Example() {
+  return (
+    <StorageBrowser.Provider>
+      <MyStorageBrowser />
+    </StorageBrowser.Provider>
+  );
+}

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/defaultActions.ts

@@ -1,9 +1,8 @@
-import { CreateStorageBrowserInput } from '@aws-amplify/ui-react-storage/dist/types/components/StorageBrowser';
 import {
-  DeleteHandler,
+  CreateStorageBrowserInput,
   DeleteHandlerOutput,
   UploadHandlerOutput,
-} from '@aws-amplify/ui-react-storage/dist/types/components/StorageBrowser/actions';
+} from '@aws-amplify/ui-react-storage/browser';
 import uniqueId from 'lodash/uniqueId';
 
 export const defaultActions: CreateStorageBrowserInput['actions']['default'] = {

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

@@ -0,0 +1,30 @@
+import { ActionHandler } from '@aws-amplify/ui-react-storage/browser';
+
+type GenerateLink = ActionHandler<
+  { duration: number; fileKey: string },
+  { link: string }
+>;
+
+export const generateUrlHandler: GenerateLink = ({ data }) => {
+  const asyncExecution = async () => {
+    try {
+      console.log('get url', data.key);
+      const result = {
+        status: 'COMPLETE' as const,
+        value: {
+          link: URL.createObjectURL(new Blob([`mock file for ${data.key}`])),
+        },
+      };
+      return result;
+    } catch (error) {
+      const message = 'Unable to generate link';
+      return {
+        status: 'FAILED' as const,
+        message,
+        error,
+      };
+    }
+  };
+
+  return { result: asyncExecution() };
+};

docs/src/pages/[platform]/connected-components/storage/storage-browser/examples/index.ts

@@ -7,3 +7,4 @@ export { default as DisplayText } from './DisplayText';
 export { default as Theming } from './Theming';
 export { default as Icons } from './Icons';
 export { default as Default } from './Default';
+export { default as GenerateUrlViewComposed } from './GenerateUrlViewComposed';