fix(storage-browser): export UseView type (#6314)

Author: calebpollman

.changeset/tame-rockets-perform.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-storage": patch
+---
+
+fix(storage-browser): export UseView type

packages/react-storage/src/components/StorageBrowser/StorageBrowserDefault.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useViews } from './views/context';
+import { useViews } from './views';
 import { useStore } from './providers/store';
 
 /**

packages/react-storage/src/components/StorageBrowser/__tests__/StorageBrowserDefault.spec.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
+import { LocationData } from '../actions';
 import * as StoreModule from '../providers/store';
-import * as ViewsModule from '../views/context';
+import * as ViewsModule from '../views';
+
 import { StorageBrowserDefault } from '../StorageBrowserDefault';
-import { LocationData } from '../actions';
 
 jest.spyOn(ViewsModule, 'useViews').mockReturnValue({
   primary: {

packages/react-storage/src/components/StorageBrowser/createStorageBrowser.tsx

@@ -10,31 +10,14 @@ import {
   ActionConfigsProvider,
   ExtendedActionConfigs,
 } from './actions';
-
 import { DEFAULT_COMPOSABLES } from './composables';
 import { elementsDefault } from './context/elements';
 import { ComponentsProvider } from './ComponentsProvider';
 import { componentsDefault } from './componentsDefault';
+import { DisplayTextProvider } from './displayText';
 import { ErrorBoundary } from './ErrorBoundary';
-
 import { createConfigurationProvider, StoreProvider } from './providers';
 import { StorageBrowserDefault } from './StorageBrowserDefault';
-import { assertRegisterAuthListener } from './validators';
-import {
-  CopyView,
-  CreateFolderView,
-  DeleteView,
-  LocationActionView,
-  LocationDetailView,
-  LocationsView,
-  UploadView,
-  LocationActionViewType,
-} from './views';
-import { useView } from './views/useView';
-import { ViewsProvider } from './views/context';
-
-import { DisplayTextProvider } from './displayText';
-
 import {
   CreateStorageBrowserInput,
   CreateStorageBrowserOutput,
@@ -48,6 +31,19 @@ import {
   ActionHandlersProvider,
   useAction,
 } from './useAction';
+import { assertRegisterAuthListener } from './validators';
+import {
+  CopyView,
+  CreateFolderView,
+  DeleteView,
+  LocationActionView,
+  LocationDetailView,
+  LocationsView,
+  UploadView,
+  LocationActionViewType,
+  useView,
+  ViewsProvider,
+} from './views';
 
 export function createStorageBrowser<
   Input extends CreateStorageBrowserInput,

packages/react-storage/src/components/StorageBrowser/index.ts

@@ -12,10 +12,11 @@ export {
   CreateManagedAuthAdapterInput,
   StorageBrowserAuthAdapter,
 } from './adapters';
+export { DefaultStorageBrowserDisplayText } from './displayText';
 export {
   CreateStorageBrowserInput,
   StorageBrowserType,
   DerivedActionViewType,
   DerivedActionViews,
 } from './types';
-export { DefaultStorageBrowserDisplayText } from './displayText';
+export { UseView } from './views';

packages/react-storage/src/components/StorageBrowser/types.ts

@@ -7,11 +7,7 @@ import {
   ListLocations,
 } from './actions';
 import { GetLocationCredentials } from './credentials/types';
-
-import { UseView } from './views/useView';
-
 import { Components } from './ComponentsProvider';
-
 import { RegisterAuthListener, StoreProviderProps } from './providers';
 
 import {
@@ -23,6 +19,7 @@ import {
   LocationDetailViewType,
   LocationsViewType,
   Views,
+  UseView,
 } from './views';
 
 import { StorageBrowserDisplayText } from './displayText';

packages/react-storage/src/components/StorageBrowser/views/__tests__/__snapshots__/useView.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useView throws when provided an unexepected key 1`] = `"Value of \`unexpected!\` cannot be used to index \`useView\`"`;

packages/react-storage/src/components/StorageBrowser/views/__tests__/useView.spec.ts

@@ -0,0 +1,26 @@
+import { renderHook } from '@testing-library/react';
+import { useView, DEFAULT_VIEW_HOOKS, UseViewType } from '../useView';
+
+jest.mock('../LocationActionView');
+jest.mock('../LocationsView');
+jest.mock('../LocationDetailView');
+
+describe('useView', () => {
+  it.each(Object.entries(DEFAULT_VIEW_HOOKS))(
+    'calls the expected hook when provided a %s type key',
+    (type, hook) => {
+      renderHook(() => useView(type as UseViewType));
+
+      expect(hook).toHaveBeenCalledTimes(1);
+    }
+  );
+
+  it('throws when provided an unexepected key', () => {
+    // turn off console.error logging for unhappy path test case
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    expect(() =>
+      renderHook(() => useView('unexpected!' as UseViewType))
+    ).toThrowErrorMatchingSnapshot();
+  });
+});

packages/react-storage/src/components/StorageBrowser/views/index.ts

@@ -1,3 +1,4 @@
+export { ViewsProvider, useViews } from './context';
 export {
   CopyView,
   CopyViewType,
@@ -21,5 +22,6 @@ export {
   LocationsViewProps,
   LocationsViewType,
 } from './LocationsView';
+export { useView, UseView } from './useView';
 
 export * from './types';

packages/react-storage/src/components/StorageBrowser/views/useView.ts

@@ -7,7 +7,7 @@ import {
 import { useLocationsView } from './LocationsView';
 import { useLocationDetailView } from './LocationDetailView';
 
-const USE_VIEW_HOOKS = {
+export const DEFAULT_VIEW_HOOKS = {
   Copy: useCopyView,
   CreateFolder: useCreateFolderView,
   Delete: useDeleteView,
@@ -16,8 +16,8 @@ const USE_VIEW_HOOKS = {
   Upload: useUploadView,
 };
 
-type DefaultUseViews = typeof USE_VIEW_HOOKS;
-export type UseViewType = keyof DefaultUseViews;
+type DefaultViewHooks = typeof DEFAULT_VIEW_HOOKS;
+export type UseViewType = keyof DefaultViewHooks;
 
 export type ViewKey<T> = T extends Record<
   string,
@@ -28,21 +28,21 @@ export type ViewKey<T> = T extends Record<
   ? K
   : never;
 
+const isUseViewType = (value: unknown): value is UseViewType =>
+  !!DEFAULT_VIEW_HOOKS?.[value as UseViewType];
+
 export type UseView = <
-  K extends keyof DefaultUseViews,
-  S extends DefaultUseViews[K],
+  K extends UseViewType,
+  S extends ReturnType<DefaultViewHooks[K]>,
 >(
   type: K
-) => ReturnType<S>;
-
-const isUseViewType = (value: unknown): value is UseViewType =>
-  !!USE_VIEW_HOOKS?.[value as UseViewType];
+) => S;
 
 // @ts-expect-error
 export const useView: UseView = (type) => {
   if (!isUseViewType(type)) {
     throw new Error(`Value of \`${type}\` cannot be used to index \`useView\``);
   }
 
-  return USE_VIEW_HOOKS[type]();
+  return DEFAULT_VIEW_HOOKS[type]();
 };