Add mocking for file preview (#6679)

* Add mocking for file preview

* Fix file preview custom example

* Update next config domains

* Update mock comment

Author: osama-rizk

docs/next.config.js

@@ -25,6 +25,9 @@ function createRemarkMdxFrontmatterPlugin(options = {}) {
 }
 
 module.exports = withNextPluginPreval({
+  images: {
+    domains: ['images.unsplash.com'],
+  },
   env: {
     BRANCH,
     SITE_URL: process.env.SITE_URL,
@@ -205,6 +208,15 @@ module.exports = withNextPluginPreval({
   },
 
   webpack(config) {
+    // Add alias to mock storage-internal for storage browser examples
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@aws-amplify/storage/internals': path.resolve(
+        __dirname,
+        'src/pages/[platform]/connected-components/storage/storage-browser/examples/mockStorageInternal.ts'
+      ),
+    };
+
     const defaultRehypePlugins = [
       // This is a custom plugin that removes lines that end in `// IGNORE`
       // This allows us to include code necessary for an example to run

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

@@ -2,6 +2,7 @@ import React from 'react';
 import Image from 'next/image';
 import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
 import { mockConfig } from './mockConfig'; // IGNORE
+import { defaultActions } from './defaultActions'; // IGNORE
 
 const CustomImageRenderer = ({ fileData, url }: any) => (
   <div style={{ border: '3px solid gray' }}>
@@ -31,6 +32,7 @@ const CustomAudioRenderer = ({ fileData, url }: any) => (
 
 const { StorageBrowser } = createStorageBrowser({
   config: mockConfig, // IGNORE
+  actions: { default: defaultActions }, // IGNORE
   filePreview: {
     fileTypeResolver: (properties) => {
       if (properties.key.endsWith('txt')) return 'text';

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

@@ -135,21 +135,21 @@ export const defaultActions: CreateStorageBrowserInput['actions']['default'] = {
           items: [
             {
               id: uniqueId(),
-              key: `${props.prefix}test-file.txt`,
+              key: `${props.prefix}image-1.jpg`,
               lastModified: new Date(),
               size: 1008,
               type: 'FILE' as const,
             },
             {
               id: uniqueId(),
-              key: `${props.prefix}test-file2.txt`,
+              key: `${props.prefix}image-2.jpg`,
               lastModified: new Date(),
               size: 23456,
               type: 'FILE' as const,
             },
             {
               id: uniqueId(),
-              key: `${props.prefix}test-file3.txt`,
+              key: `${props.prefix}image-3.jpg`,
               lastModified: new Date(),
               size: 43456,
               type: 'FILE' as const,

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

@@ -0,0 +1,38 @@
+// Mock implementation of storage-internal getUrl function for documentation examples
+export const getUrl = async ({ path }: { path: string }) => {
+  const filename = path.split('/').pop() || '';
+
+  let url: string;
+
+  switch (filename) {
+    case 'image-1.jpg':
+      url =
+        'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=2000&h=1333&q=80';
+      break;
+    case 'sample.mp4':
+      url =
+        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+      break;
+    case 'image-3.jpg':
+      url =
+        'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?w=2000&h=1333&q=80';
+      break;
+    default:
+      url =
+        'https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=800&h=600&q=80';
+  }
+
+  const result = { url };
+  return result;
+};
+
+export const copy = () => Promise.resolve();
+export const getDataAccess = () => Promise.resolve();
+export const list = () => Promise.resolve();
+export const listCallerAccessGrants = () => Promise.resolve();
+export const listPaths = () => Promise.resolve();
+export const remove = () => Promise.resolve();
+export const uploadData = () => Promise.resolve();
+export const StorageValidationErrorCode = {};
+export const assertValidationError = () => {};
+export const validationErrorMap = {};