feat(file-uploader): Merge to main

.changeset/small-dancers-cheer.md

@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-react': minor
+'@aws-amplify/ui': minor
+---
+
+Added the FileUploader component. The File Uploader lets your users upload files to the cloud. For more information follow the instructions. https://ui.docs.amplify.aws/react/connected-components/storage/fileuploader

.github/workflows/publish-fileuploader.yml

@@ -0,0 +1,17 @@
+# Description: This workflow runs unit + e2e tests
+#
+# Triggered by: merge to `fileuploader/main` branch
+
+name: Publish / fileuploader
+
+on:
+  push:
+    branches: [fileuploader/release]
+
+jobs:
+  publish:
+    uses: ./.github/workflows/reusable-tagged-publish.yml
+    with:
+      dist-tag: fileuploader
+    secrets:
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

docs/next.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const { execSync } = require('child_process');
 
+const reHypeIgnoreLines = require('./src/plugins/rehype-ignore-code');
 const gitHead = execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
 
 const BRANCH = gitHead === 'HEAD' ? 'main' : gitHead;
@@ -14,6 +15,8 @@ module.exports = withNextPluginPreval({
     DOCSEARCH_DOCS_APP_ID: process.env.DOCSEARCH_DOCS_APP_ID,
     DOCSEARCH_DOCS_API_KEY: process.env.DOCSEARCH_DOCS_API_KEY,
     DOCSEARCH_DOCS_INDEX_NAME: process.env.DOCSEARCH_DOCS_INDEX_NAME,
+    FF_FILEUPLOADER_COMPONENTS_ENABLED:
+      process.env.FF_FILEUPLOADER_COMPONENTS_ENABLED,
   },
   // Differentiate pages with frontmatter & layout vs. normal MD(X)
   pageExtensions: ['page.mdx', 'page.tsx'],
@@ -158,6 +161,11 @@ module.exports = withNextPluginPreval({
 
   webpack(config) {
     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
+      // but that should not be in customer's code. For example, using a
+      // plugin to make mock a connected component.
+      reHypeIgnoreLines,
       require('mdx-prism'),
       // TODO: these are older versions of these packages because the newer versions
       // are ESM only.

docs/src/components/ComponentVariableTable.tsx

@@ -6,7 +6,9 @@ function extractClasses(themeObject) {
   const themeKeys = Object.keys(themeObject);
   let classNames = [];
   themeKeys.forEach((key) => {
-    if (themeObject[key]?.name) {
+    // 'value' is a special attribute, only design tokens will have 'value'
+    // however, there could be a 'name' in part of the object
+    if (themeObject[key]?.value) {
       classNames.push(themeObject[key].name);
     } else if (typeof themeObject[key] === 'object') {
       classNames = classNames.concat(extractClasses(themeObject[key]));

docs/src/components/FeatureFlagSection.tsx

@@ -0,0 +1,4 @@
+export const FeatureFlagSection = ({ children, featureFlag }) => {
+  if (!featureFlag) return null;
+  return children;
+};

docs/src/data/links.tsx

@@ -134,6 +134,19 @@ export const connectedComponents: ComponentNavItem[] = [
     body: 'Amplify UI Geo provides UI components for maps and location search built on top of Amazon Location Service.',
     platforms: ['react'],
   },
+  {
+    href: '/connected-components/storage',
+    label: 'Storage',
+    body: "Amplify UI Storage components allow you to store files in the cloud using Amplify's Storage category",
+    platforms: ['react'],
+  },
+  {
+    href: '/connected-components/storage/fileuploader',
+    label: 'File Uploader',
+    body: 'FileUploader component allows users to upload files to your Amplify backend.',
+    platforms: ['react'],
+    tertiary: true,
+  },
   {
     href: '/connected-components/in-app-messaging',
     label: 'In-App Messaging',

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/AcceptedFileTypesExample.tsx

@@ -0,0 +1,12 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const AcceptedFileTypesExample = () => {
+  return (
+    <FileUploader
+      acceptedFileTypes={['.gif', '.bmp', '.doc', '.jpeg', '.jpg']}
+      variation="drop"
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/AutoProceedExample.tsx

@@ -0,0 +1,12 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const AutoProceedExample = () => {
+  return (
+    <FileUploader
+      shouldAutoProceed={true}
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/DefaultFileUploaderExample.tsx

@@ -0,0 +1,10 @@
+import { FileUploader } from '@aws-amplify/ui-react'; // IGNORE
+export const DefaultFileUploaderExample = () => {
+  return (
+    <FileUploader
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileUploaderComponentsExample.tsx

@@ -0,0 +1,27 @@
+import { FileUploader, View, Text } from '@aws-amplify/ui-react';
+
+export const FileUploaderComponentsExample = () => {
+  return (
+    <FileUploader
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      // components={{
+      //   UploadDropZone: ({ inDropZone, children, ...rest }) => {
+      //     return (
+      //       <View
+      //         padding="xl"
+      //         backgroundColor={
+      //           inDropZone ? 'brand.secondary.40' : 'brand.secondary.20'
+      //         }
+      //         {...rest}
+      //       >
+      //         <Text textAlign="center">Drop files here</Text>
+      //       </View>
+      //     );
+      //   },
+      // }}
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileUploaderErrorExample.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const FileUploaderErrorExample = () => {
+  const [message, setMessage] = React.useState('');
+  const onError = (error) => {
+    setMessage(`${error}`);
+  };
+
+  return (
+    <>
+      <FileUploader
+        onError={onError}
+        isResumable={true}
+        variation="drop"
+        acceptedFileTypes={['image/*']}
+        accessLevel="public"
+        provider="error" // IGNORE
+      />
+      {message}
+    </>
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileUploaderSuccessExample.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const FileUploaderSuccessExample = () => {
+  const [message, setMessage] = React.useState('');
+  const onSuccess = ({ key }) => {
+    setMessage(`Key: ${key}`);
+  };
+
+  return (
+    <>
+      <FileUploader
+        onSuccess={onSuccess}
+        variation="drop"
+        acceptedFileTypes={['image/*']}
+        accessLevel="public"
+        provider="fast" // IGNORE
+      />
+      {message}
+    </>
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/FileUploaderThemeExample.tsx

@@ -0,0 +1,36 @@
+import { FileUploader, ThemeProvider, View } from '@aws-amplify/ui-react';
+
+const theme = {
+  name: 'my-theme',
+  tokens: {
+    colors: {},
+    borderWidths: {
+      small: { value: '2px' },
+      medium: { value: '4px' },
+      large: { value: '8px' },
+    },
+    radii: {
+      xs: { value: '1rem' },
+      small: { value: '2rem' },
+      medium: { value: '2rem' },
+      large: { value: '2rem' },
+      xl: { value: '3rem' },
+    },
+  },
+};
+
+export const FileUploaderThemeExample = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <FileUploader
+        variation="drop"
+        acceptedFileTypes={['image/*']}
+        accessLevel="public"
+        hasMultipleFiles={true}
+        maxSize={100000000}
+        maxFiles={3}
+        provider="fast" // IGNORE
+      />
+    </ThemeProvider>
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/IsPreviewerVisibleExample.tsx

@@ -0,0 +1,12 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const IsPreviewerVisibleExample = () => {
+  return (
+    <FileUploader
+      isPreviewerVisible={true}
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/LevelExample.tsx

@@ -0,0 +1,12 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const LevelExample = () => {
+  return (
+    <FileUploader
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      level="private"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/MaxFilesExample.tsx

@@ -0,0 +1,13 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const MaxFilesExample = () => {
+  return (
+    <FileUploader
+      maxFiles={3}
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/MaxSizeExample.tsx

@@ -0,0 +1,13 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const MaxSizeExample = () => {
+  return (
+    <FileUploader
+      maxSize={100000}
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/MultipleExample.tsx

@@ -0,0 +1,13 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const MultipleExample = () => {
+  return (
+    <FileUploader
+      hasMultipleFiles={false}
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/PreviewerComponentsExample.tsx

@@ -0,0 +1,29 @@
+import { FileUploader, View, Button, Text } from '@aws-amplify/ui-react';
+
+export const PreviewerComponentsExample = () => {
+  return (
+    <FileUploader
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      // components={{
+      //   Previewer: ({ onFileClick, fileStatuses }) => {
+      //     return (
+      //       <View padding="xl">
+      //         {fileStatuses.map((file, idx) => {
+      //           return (
+      //             <View key={idx}>
+      //               <Text>{file.name}</Text>
+      //               <Text>{file.percentage}</Text>
+      //             </View>
+      //           );
+      //         })}
+      //         <Button onClick={onFileClick}>Start Upload</Button>
+      //       </View>
+      //     );
+      //   },
+      // }}
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/ResumableExample.tsx

@@ -0,0 +1,13 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const ResumableExample = () => {
+  return (
+    <FileUploader
+      isResumable={true}
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="slow" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/ShowImagesExample.tsx

@@ -0,0 +1,13 @@
+import { FileUploader } from '@aws-amplify/ui-react';
+
+export const ShowImagesExample = () => {
+  return (
+    <FileUploader
+      showImages={false}
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      provider="fast" // IGNORE
+    />
+  );
+};

docs/src/pages/[platform]/connected-components/storage/fileuploader/examples/TrackerComponentsExample.tsx

@@ -0,0 +1,22 @@
+import { FileUploader, View, Text } from '@aws-amplify/ui-react';
+
+export const TrackerComponentsExample = () => {
+  return (
+    <FileUploader
+      variation="drop"
+      acceptedFileTypes={['image/*']}
+      accessLevel="public"
+      // components={{
+      //   Tracker: ({ file, percentage }) => {
+      //     return (
+      //       <View padding="xl">
+      //         <Text textAlign="center">{file.name}</Text>
+      //         <Text textAlign="center">{percentage}</Text>
+      //       </View>
+      //     );
+      //   },
+      // }}
+      provider="fast" // IGNORE
+    />
+  );
+};