feat: verify mentor's avatar is a real picture

.storybook/main.js

@@ -1,7 +1,51 @@
+const path = require('path');
+const webpack = require('webpack');
+
 module.exports = {
   stories: ['../src/**/*.stories.@(js|mdx|json|tsx)'],
   addons: ['@storybook/preset-create-react-app', '@storybook/addon-essentials'],
   typescript: {
     reactDocgen: 'react-docgen',
   },
+  webpackFinal: async (config) => {
+    config.plugins = [
+      ...(config.plugins || []),
+      new webpack.NormalModuleReplacementPlugin(
+        /hooks\/useFaceDetection$/,
+        path.resolve(__dirname, '../src/stories/mocks/useFaceDetection.tsx')
+      ),
+    ];
+
+    config.module.rules = config.module.rules.map((rule) => {
+      if (rule.test instanceof RegExp && rule.test.test('.svg')) {
+        return {
+          ...rule,
+          exclude: /\.svg$/i,
+        };
+      }
+
+      return rule;
+    });
+
+    config.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: [
+        {
+          loader: require.resolve('@svgr/webpack'),
+          options: {
+            svgo: false,
+          },
+        },
+        {
+          loader: require.resolve('file-loader'),
+          options: {
+            name: 'static/media/[name].[hash:8].[ext]',
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
 };

.storybook/preview.js

@@ -1 +1,3 @@
 import '../src/index.css';
+import 'react-tippy/dist/tippy.css';
+

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

next.config.js

@@ -11,22 +11,37 @@ const nextConfig = {
   },
   webpack5: true,
   webpack: (config) => {
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => rule.test instanceof RegExp && rule.test.test('.svg')
+    );
+
     config.resolve.fallback = {
       fs: false,
       path: false,
       os: false,
       module: false,
     };
 
+    if (fileLoaderRule) {
+      fileLoaderRule.exclude = /\.svg$/i;
+    }
+
     config.module.rules.push({
       test: /\.svg$/,
+      issuer: /\.[jt]sx?$/,
       use: [
         {
           loader: '@svgr/webpack',
           options: {
             svgo: false,
           },
         },
+        {
+          loader: 'file-loader',
+          options: {
+            name: 'static/media/[name].[hash:8].[ext]',
+          },
+        },
       ],
     });
 

package.json

@@ -6,6 +6,7 @@
     "node": "18.x"
   },
   "dependencies": {
+    "@mediapipe/tasks-vision": "0.10.34",
     "@netlify/functions": "^2.0.0",
     "@sendgrid/client": "^8.1.4",
     "@sendgrid/mail": "^8.1.4",
@@ -66,8 +67,8 @@
     "test:e2e": "is-ci \"test:e2e:run\" \"test:e2e:dev\"",
     "test:e2e:run": "start-server-and-test start http://localhost:3000 cy:run",
     "test:e2e:dev": "start-server-and-test start http://localhost:3000 cy:open",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -c .storybook -o build/sb"
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o build/sb"
   },
   "eslintConfig": {
     "extends": "react-app",

src/Me/Header/Header.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { desktop } from '../styles/shared/devices';
-import Logo from '../../assets/me/logo.svg';
+import { ReactComponent as Logo } from '../../assets/me/logo.svg';
 
 const HeaderContainer = styled.div`
   height: 243px;

src/Me/MentorshipRequests/UsersList.tsx

@@ -5,7 +5,7 @@ import { RichList, RichItem } from '../components/RichList';
 import { Loader } from '../../components/Loader';
 import styled from 'styled-components/macro';
 import { STATUS } from '../../helpers/mentorship';
-import UserWasRemovedIcon from '../../assets/me/icon-user-remove.svg';
+import { ReactComponent as UserWasRemovedIcon } from '../../assets/me/icon-user-remove.svg';
 import { MentorshipRequest } from '../../types/models';
 import { useExpendableRichItems } from '../components/RichList/RichList';
 import { RichItemTagTheme } from '../components/RichList/ReachItemTypes';

src/Me/Modals/MentorshipRequestModals/AcceptModal.tsx

@@ -1,6 +1,6 @@
 import Body from './style';
 import { Modal } from '../Modal';
-import MentorshipSvg from '../../../assets/me/mentorship.svg';
+import { ReactComponent as MentorshipSvg } from '../../../assets/me/mentorship.svg';
 import { links } from '../../../config/constants';
 import { report } from '../../../ga';
 

src/Me/Modals/MentorshipRequestModals/MentorshipRequest.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Modal } from '../Modal';
 import FormField from '../../components/FormField';
 import Textarea from '../../components/Textarea';
-import MentorshipRequestSuccess from '../../../assets/mentorshipRequestSuccess.svg';
+import { ReactComponent as MentorshipRequestSuccess } from '../../../assets/mentorshipRequestSuccess.svg';
 import Body from './style';
 import { links } from '../../../config/constants';
 import { useApi } from '../../../context/apiContext/ApiContext';

src/Me/Modals/Modal.tsx

@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import _Button from '../components/Button';
 import { desktop, mobile } from '../styles/shared/devices';
 import { CSSTransition } from 'react-transition-group';
-import CloseSvg from '../../assets/me/close.svg';
+import { ReactComponent as CloseSvg } from '../../assets/me/close.svg';
 import { ModalContext } from '../../context/modalContext/ModalContext';
 
 type ModalProps = {

src/Me/Navigation/Navbar.tsx

@@ -6,10 +6,10 @@ import styled from 'styled-components/macro';
 import Link from '../../components/Link/Link';
 import { mobile, desktop } from '../styles/shared/devices';
 import messages from '../../messages';
-import IconHome from '../../assets/me/home.svg';
-import Mentorships from '../../assets/me/icon-survey.svg';
-import IconMentors from '../../assets/me/mentors.svg';
-import IconLogout from '../../assets/me/icon-door-exit.svg';
+import { ReactComponent as IconHome } from '../../assets/me/home.svg';
+import { ReactComponent as Mentorships } from '../../assets/me/icon-survey.svg';
+import { ReactComponent as IconMentors } from '../../assets/me/mentors.svg';
+import { ReactComponent as IconLogout } from '../../assets/me/icon-door-exit.svg';
 import { useUser } from '../../context/userContext/UserContext';
 import { useRoutes } from '../../hooks/useRoutes'
 
@@ -18,7 +18,7 @@ const MenuItem = ({
   label,
   to,
 }: {
-  icon: string;
+  icon: React.ComponentType;
   label: string;
   to: string;
 }) => {