chore(docs): update storage browser to include components override.git (#6684)

Author: osama-rizk

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  createStorageBrowser,
+  CreateStorageBrowserInput,
+} from '@aws-amplify/ui-react-storage/browser';
+import { Breadcrumbs, View, Text, Loader } from '@aws-amplify/ui-react';
+import { mockConfig } from './mockConfig';
+import { defaultActions } from './defaultActions';
+
+const components: CreateStorageBrowserInput['components'] = {
+  Navigation: ({ items }) => (
+    <Breadcrumbs.Container>
+      {items.map(({ isCurrent, name, onNavigate }) => (
+        <Breadcrumbs.Item key={name}>
+          <Breadcrumbs.Link isCurrent={isCurrent} onClick={onNavigate}>
+            🏠 {name}
+          </Breadcrumbs.Link>
+        </Breadcrumbs.Item>
+      ))}
+    </Breadcrumbs.Container>
+  ),
+
+  LoadingIndicator: ({ isLoading }) =>
+    isLoading ? (
+      <View textAlign="center" padding="large">
+        <Loader size="large" />
+        <Text>⏳ Loading your files...</Text>
+      </View>
+    ) : null,
+
+  Title: ({ title }) => (
+    <Text fontSize="xl" fontWeight="bold" color="brand.primary.80">
+      📁 {title}
+    </Text>
+  ),
+};
+
+const { StorageBrowser } = createStorageBrowser({
+  config: mockConfig,
+  actions: { default: defaultActions },
+  components, // Pass custom components here
+});
+
+export default function Example() {
+  return <StorageBrowser />;
+}

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

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

docs/src/pages/[platform]/connected-components/storage/storage-browser/react.mdx

@@ -11,6 +11,7 @@ import {
   Theming,
   Icons,
   GenerateUrlViewComposed,
+  ComponentOverride,
 } from './examples'
 
 
@@ -313,6 +314,43 @@ You can use the `<IconsProvider>` to customize the icons used in the `StorageBro
   </ExampleCode>
 </Example>
 
+### Component Override
+
+You can override any of the default components used in Storage Browser by passing custom components to the `components` prop of `createStorageBrowser`. When you provide a component (e.g., `Navigation`, `DataTable`, `SearchField`), it will completely replace the default implementation.
+
+
+<Example>
+  <ComponentOverride />
+  <ExampleCode>
+    ```jsx file=./examples/ComponentOverride.tsx
+    ```
+  </ExampleCode>
+</Example>
+
+**Available Components to Override:**
+- `ActionCancel`
+- `ActionDestination`
+- `ActionExit`
+- `ActionStart`
+- `ActionsList`
+- `AddFiles`
+- `AddFolder`
+- `DataRefresh`
+- `DataTable`
+- `DropZone`
+- `FolderNameField`
+- `LoadingIndicator`
+- `Message`
+- `Navigation`
+- `OverwriteToggle`
+- `Pagination`
+- `SearchField`
+- `SearchSubfoldersToggle`
+- `StatusDisplay`
+- `Title`
+
+Each component receives the same props as the default implementation, so you can access all the data and callbacks.
+
 ### Display Text
 
 You can customize all of the text (except S3 data like keys and bucket names) used in Storage Browser by using the `displayText` prop which is a nested object organized by view. You don't need to provide an entire object; the `StorageBrowser` component will merge your input with the default strings. Some texts are plain strings and others are are functions that take some input, like a date, and return a string.