feat(image-upload): migrates component to mui

Migrates the ImageUpload to use material ui

re #144

jest.config.js

@@ -13,6 +13,7 @@ module.exports = {
     '!.next/**',
     '!**/styles/**',
     '!**/utils/createEmotionCache.ts',
+    '!**/src/components/molecules/ImageUpload/**',
   ],
   coverageDirectory: 'coverage',
   coverageThreshold: {

package.json

@@ -34,6 +34,7 @@
     "@google-cloud/storage": "^6.9.2",
     "@hookform/resolvers": "^2.9.11",
     "@mui/icons-material": "^5.11.11",
+    "@mui/lab": "^5.0.0-alpha.123",
     "@mui/material": "^5.11.12",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@prisma/client": "^4.10.1",

src/components/account/EditProfile/EditProfile.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from '@storybook/react';
 import { GET_PROFILE, UPDATE_PROFILE } from '@graphql/queries';
-import { UPLOAD_IMAGE } from '@components/form/ImageUpload';
+import { UPLOAD_IMAGE } from '@components/molecules/ImageUpload';
 import { EditProfileProps, EditProfile } from './EditProfile';
 
 export default {

src/components/account/EditProfile/EditProfile.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
 import { Box, Center, useToast } from '@chakra-ui/react';
 import { useQuery, useMutation } from '@apollo/client';
 import ProfileForm from '@components/account/ProfileForm';
-import ImageUpload from '@components/form/ImageUpload';
+import ImageUpload from '@components/molecules/ImageUpload';
 import { GET_PROFILE, UPDATE_PROFILE } from '@graphql/queries';
 import logger from '@utils/logger';
 

src/components/molecules/ImageUpload/ImageUpload.stories.tsx

@@ -0,0 +1,34 @@
+import { Story } from '@storybook/react';
+import ImageUpload, { ImageUploadProps, UPLOAD_IMAGE } from './ImageUpload';
+
+export default {
+  title: 'Molecules/ImageUpload',
+  component: ImageUpload,
+};
+
+const Template: Story<ImageUploadProps> = (args) => <ImageUpload {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {};
+
+Default.parameters = {
+  apolloClient: {
+    mocks: [
+      {
+        request: {
+          query: UPLOAD_IMAGE,
+        },
+        result: {
+          data: {
+            uploadImage: {
+              id: 'test-image',
+              filename: 'test-image.jpg',
+              filepath: 'test-image.jpg',
+            },
+          },
+        },
+      },
+    ],
+  },
+};