aws-amplify · dbanksdesign · Aug 9, 2024 · Aug 9, 2024 · Aug 12, 2024 · Aug 12, 2024
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,11 @@
+# Vite + React Example
+
+This example app will do 3 main things:
+
+1. Test our components and code within a Vite app
+2. Test our components within a React Router (SPA) app
+3. Test our using our connected components with a different UI library ([Chakra UI](https://v2.chakra-ui.com/) in this case)
+
+## Todo
+
+1. Create an Amplify Gen2 environment that has all categories
@@ -0,0 +1,26 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config({
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx}'],
+  ignores: ['dist'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser,
+  },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+});
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Amplify UI Example: Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
@@ -0,0 +1,39 @@
+{
+  "name": "@aws-amplify/ui-vite-react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@aws-amplify/ui-react": "^6.1.14",
+    "@aws-amplify/ui-react-geo": "^2.0.17",
+    "@aws-amplify/ui-react-liveness": "^3.1.3",
+    "@aws-amplify/ui-react-notifications": "^2.0.22",
+    "@aws-amplify/ui-react-storage": "^3.1.6",
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "framer-motion": "^11.3.24",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.44.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.0"
+  }
+}
@@ -0,0 +1,2 @@
+import amplifyOutputs from '@environments/storage/gen2/amplify_outputs.json';
+export default amplifyOutputs;
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Box, Flex, Img } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
+
+export const Header = () => {
+  return (
+    <Box boxShadow="md">
+      <Flex direction="row" p="6" alignItems="center">
+        <Link to="/">
+          <Img src="/logo.svg" height="2rem" />
+        </Link>
+        <Link to="/storage/storage-manager">Storage</Link>
+      </Flex>
+    </Box>
+  );
+};
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { Header } from './Header';
+
+export const Layout = ({ children }) => {
+  return (
+    <Flex direction="column">
+      <Header />
+      <Box p="6">{children}</Box>
+    </Flex>
+  );
+};
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import { Amplify } from 'aws-amplify';
+import amplifyConfig from './amplify_outputs';
+import { theme } from './theme';
+import StorageManagerExample from './routes/storage/storage-manager';
+import Root from './routes/root';
+import '@aws-amplify/ui-react/styles.css';
+
+Amplify.configure(amplifyConfig);
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Root />,
+    children: [
+      {
+        path: '/storage/storage-manager',
+        element: <StorageManagerExample />,
+      },
+    ],
+  },
+]);
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ChakraProvider theme={theme}>
+      <RouterProvider router={router} />
+    </ChakraProvider>
+  </StrictMode>
+);
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Outlet, Link } from 'react-router-dom';
+import { Layout } from '../components/Layout';
+
+export default function Root() {
+  return (
+    <Layout>
+      <div id="detail">
+        <Outlet />
+      </div>
+    </Layout>
+  );
+}
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import {
+  Box,
+  Card,
+  CardBody,
+  Button,
+  Stack,
+  Progress,
+  Text,
+  Image,
+  IconButton,
+  Flex,
+} from '@chakra-ui/react';
+import { CloseIcon, DownloadIcon, CheckIcon } from '@chakra-ui/icons';
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+
+export default function StorageManagerExample() {
+  return (
+    <StorageManager
+      path="public/"
+      maxFileCount={5}
+      acceptedFileTypes={['image/*']}
+      autoUpload
+      components={{
+        Container({ children }) {
+          return (
+            <Card>
+              <CardBody>
+                <Stack direction="column">{children}</Stack>
+              </CardBody>
+            </Card>
+          );
+        },
+        FilePicker({ onClick }) {
+          return (
+            <Button variant="outline" onClick={onClick}>
+              Browse Files
+            </Button>
+          );
+        },
+        DropZone({ children, displayText, inDropZone, ...rest }) {
+          return (
+            <Box
+              p={4}
+              borderWidth={2}
+              borderStyle={'dashed'}
+              borderRadius="md"
+              borderColor={inDropZone ? 'brand.900' : ''}
+              bg={inDropZone ? 'brand.700' : ''}
+            >
+              <Stack
+                alignItems="center"
+                direction="column"
+                padding="medium"
+                {...rest}
+              >
+                <DownloadIcon />
+                <Text>Drop files here or</Text>
+                {children}
+              </Stack>
+            </Box>
+          );
+        },
+        FileList({ files, onCancelUpload, onDeleteUpload }) {
+          return (
+            <Stack direction="column">
+              {files.map(({ file, key, progress, id, status, uploadTask }) => {
+                const isComplete = progress === 100;
+                return (
+                  <Box
+                    key={key}
+                    justifyContent="center"
+                    alignItems="center"
+                    bg={isComplete ? 'green.50' : 'white'}
+                    height="5rem"
+                    position="relative"
+                    borderWidth={1}
+                    borderStyle="solid"
+                    borderColor={isComplete ? 'green.200' : 'gray.100'}
+                    boxSize="border-box"
+                  >
+                    <Flex direction="row" height="5rem" align="center" p={4}>
+                      <Image
+                        borderRadius="small"
+                        height="100%"
+                        width="5rem"
+                        objectFit="cover"
+                        src={URL.createObjectURL(file!)}
+                        alt={key}
+                      />
+                      <Stack
+                        direction="column"
+                        flex={1}
+                        p={4}
+                        overflow="hidden"
+                      >
+                        <Text
+                          whiteSpace="nowrap"
+                          textOverflow="ellipsis"
+                          fontSize="sm"
+                        >
+                          {file?.name}
+                        </Text>
+                        <Text fontSize="sm">
+                          {file?.size ? (file.size / 1000000).toFixed(2) : '0'}
+                          mb
+                        </Text>
+                      </Stack>
+                      {isComplete ? (
+                        <CheckIcon textColor="green.400" />
+                      ) : (
+                        <IconButton
+                          variant="outline"
+                          size="sm"
+                          aria-label="remove"
+                          onClick={() => {
+                            if (status === 'uploading') {
+                              onCancelUpload({ id, uploadTask: uploadTask! });
+                            } else {
+                              onDeleteUpload({ id });
+                            }
+                          }}
+                        >
+                          <CloseIcon />
+                        </IconButton>
+                      )}
+                    </Flex>
+                    {!isComplete ? (
+                      <Progress
+                        colorScheme="green"
+                        hasStripe
+                        size="sm"
+                        value={progress}
+                      />
+                    ) : null}
+                  </Box>
+                );
+              })}
+            </Stack>
+          );
+        },
+      }}
+    />
+  );
+}
@@ -0,0 +1,3 @@
+import { extendTheme } from '@chakra-ui/react';
+
+export const theme = extendTheme({});
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": "./",
+    "paths": {
+      "@environments/*": ["../../environments/*"]
+    },
+    "incremental": true
+  },
+  "include": ["vite.config.ts"]
+}
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: [
+      {
+        find: '@environments',
+        replacement: path.resolve(__dirname, '../../environments/'),
+      },
+    ],
+  },
+});