feat(file-uploader): Merge to main (#3028)

Co-authored-by: Erik Hanchett <[email protected]>
Co-authored-by: William Lee <[email protected]>
Co-authored-by: Ioana Brooks <[email protected]>
Co-authored-by: Caleb Pollman <[email protected]>

Author: 5 people

.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
+    />
+  );
+};