feature: reusable modals (#121)

* feat: added initial info-modal * fix: cleanup & useless styles * fix: fixed some styles, returned action modal * fix: changed the approach to using styles * fix: flex issue * fix: test version teameights-types * fix: types * fix: added type * fix: lib issues, reusability * fix: added new modal window * fix: badges and modals * fix: added logic for mobile user * fix: added new phone action modal * fix: added new phone action modal * fix: code issues * fix: changed folder location * fix: some styles * fix: added storybook for modal * fix: added storybook for modal * Revert "fix: added storybook for modal" This reverts commit c5e7773. * fix: added for test new function * fix: added new modal for a test * fix: changed mock data * fix: changed mock data * fix: fixed new error * fix: previous issues and code * fix: namings * fix: namings * fix: added new modal that fixes freezes * feat: added image loader, fix issues with modals * feat: added flags & fixed issues --------- Co-authored-by: Nikita Mashchenko <[email protected]>
nmashchenko · Oct 25, 2023 · ea96a69 · ea96a69 · github-actions · Oct 25, 2023
1 parent 54e60fc
commit ea96a69
Show file tree

Hide file tree

Showing 79 changed files with 2,929 additions and 238 deletions.
diff --git a/client/next.config.js b/client/next.config.js
@@ -2,6 +2,24 @@
 const path = require('path');
 
 module.exports = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 's3.amazonaws.com',
+        port: '',
+        pathname: '/my-bucket/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'picsum.photos',
+      },
+      {
+        protocol: 'https',
+        hostname: 'flagcdn.com',
+      },
+    ],
+  },
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },

diff --git a/client/package.json b/client/package.json
@@ -25,7 +25,7 @@
     "@react-oauth/google": "^0.11.1",
     "@storybook/addon-styling": "^1.3.6",
     "@tanstack/react-query": "beta",
-    "@teameights/types": "^1.1.14",
+    "@teameights/types": "^1.1.17",
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "20.4.8",
     "@types/react": "18.2.18",
@@ -38,11 +38,12 @@
     "lodash.debounce": "^4.0.8",
     "next": "13.4.12",
     "react": "18.2.0",
+    "react-content-loader": "^6.2.1",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
-    "react-modal": "^3.16.1",
     "react-modern-drawer": "^1.2.2",
     "react-particles": "^2.12.2",
+    "react-responsive-modal": "^6.4.2",
     "react-select": "^5.7.4",
     "react-tooltip": "^5.21.3",
     "sass": "^1.64.2",

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -1,66 +1,98 @@
 'use client';
-
-import { Flex, Typography, Skeleton, Button, Drawer } from '@/shared/ui';
-import { useGetScreenWidth } from '@/shared/lib';
-import { Crown } from '@/shared/assets';
-import { IUserRequest } from '@teameights/types';
-import { NewtonsCradle, RaceBy, Ring } from '@uiball/loaders';
-import { toast } from 'sonner';
+import { Typography, Button } from '@/shared/ui';
 import { useState } from 'react';
-import { SelectAutocomplete } from '@/shared/ui/select/ui/select-autocomplete/select-autocomplete';
+import { ActionModal } from '@/widgets/modals';
+import { userResponseFixture } from '@/shared/fixtures/user';
+import { teamFixture } from '@/shared/fixtures/team';
+import { UserInfoModal } from '@/widgets/modals/info-modal/user';
+import { TeamInfoModal } from '@/widgets/modals/info-modal/team/team';
 
 export default function Home() {
-  const width = useGetScreenWidth();
-  const user: IUserRequest = { username: 'nmashchenko' };
-  const [open, setOpen] = useState(false);
+  const [isOpenFirstModal, setIsOpenFirstModal] = useState(false);
+  const [isOpenThirdModal, setIsOpenThirdModal] = useState(false);
+  const [openModal, setOpenModal] = useState(false);
+
+  const openModalNew = () => {
+    setOpenModal(true);
+  };
+  const closeModalNew = () => {
+    setOpenModal(false);
+  };
+
+  const openFirstModal = () => {
+    setIsOpenFirstModal(true);
+  };
+
+  const closeFirstModal = () => {
+    setIsOpenFirstModal(false);
+  };
+
+  const openThirdModal = () => {
+    setIsOpenThirdModal(true);
+  };
+
+  const closeThirdModal = () => {
+    setIsOpenThirdModal(false);
+  };
+
+  const handleJoin = () => {
+    console.log('Join button clicked');
+  };
 
   return (
     <>
       <Typography size='heading_l' variant='h6'>
         We are working hard to deliver teameights on NextJS/TS soon!
       </Typography>
 
-      <div> The screen width is: {width} </div>
-
-      <Typography>Hello, {user.username}!</Typography>
+      <Typography>Hello, {userResponseFixture.username}!</Typography>
 
       <a href='/login' style={{ color: 'green' }}>
         Get to login
       </a>
 
-      <Flex direction='column' gap='200px' width='100%' justify='center' align='center'>
-        <Flex gap='150px'>
-          <Skeleton width={70} height={70} />
-          <Skeleton width={70} height={70} />
-        </Flex>
-      </Flex>
-
-      <Crown width={70} height={70} />
-
-      <Button
-        onClick={() =>
-          toast('Loading some dummy data lol...', {
-            icon: <Ring size={17} speed={1.5} color='white' />,
-          })
-        }
-      >
-        Spawn loading toaster
-      </Button>
-
-      <Flex direction='column' gap='200px' width='100%' justify='center' align='center'>
-        <NewtonsCradle size={50} speed={1.4} color='white' />
-
-        <RaceBy size={80} lineWeight={5} speed={1.4} color='#46A11B' />
-      </Flex>
+      <div>
+        <ActionModal
+          heading='Removing member'
+          sub='Are you sure you want to remove member from team?'
+          isOpen={isOpenFirstModal}
+          handleClose={closeFirstModal}
+        >
+          <Button typeBtn='danger' color='white' size='m' onClick={openFirstModal}>
+            Delete
+          </Button>
+          <Button typeBtn='primary' color='white' size='m' onClick={closeFirstModal}>
+            Cancel
+          </Button>
+        </ActionModal>
+        <Button typeBtn='primary' size='m' color='white' onClick={openFirstModal}>
+          First Modal
+        </Button>
+      </div>
 
-      <Button typeBtn='tertiary' onClick={() => setOpen(true)}>
-        open drawer
-      </Button>
-      <Drawer open={open} onClose={() => setOpen(false)}>
-        <button onClick={() => setOpen(false)}>close</button>
-      </Drawer>
+      <div>
+        <Button typeBtn='primary' size='m' color='white' onClick={openModalNew}>
+          Open Modal Team
+        </Button>
+        <TeamInfoModal
+          team={teamFixture}
+          user={userResponseFixture}
+          isOpenModal={openModal}
+          handleClose={closeModalNew}
+          handleJoin={handleJoin}
+        />
+      </div>
 
-      <SelectAutocomplete />
+      <div>
+        <Button typeBtn='primary' size='m' color='white' onClick={openThirdModal}>
+          Open Third Modal
+        </Button>
+        <UserInfoModal
+          user={userResponseFixture}
+          isOpenModal={isOpenThirdModal}
+          handleClose={closeThirdModal}
+        />
+      </div>
     </>
   );
 }
diff --git a/client/src/shared/assets/icons/arrows/arrow-right.tsx b/client/src/shared/assets/icons/arrows/arrow-right.tsx
@@ -0,0 +1,15 @@
+import { FC, SVGProps } from 'react';
+export const ArrowRight: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='20'
+      height='20'
+      fill='#ffffff'
+      viewBox='0 0 256 256'
+      {...props}
+    >
+      <path d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'></path>
+    </svg>
+  );
+};
diff --git a/client/src/shared/assets/icons/arrows/index.ts b/client/src/shared/assets/icons/arrows/index.ts
@@ -1 +1,2 @@
 export { ArrowLeft } from './arrow-left';
+export { ArrowRight } from './arrow-right';
diff --git a/client/src/shared/assets/icons/chat-circle-dots.tsx b/client/src/shared/assets/icons/chat-circle-dots.tsx
@@ -0,0 +1,16 @@
+import { FC, SVGProps } from 'react';
+
+export const ChatCircleDots: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='20'
+      height='20'
+      fill='#ffffff'
+      viewBox='0 0 256 256'
+      {...props}
+    >
+      <path d='M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128ZM84,116a12,12,0,1,0,12,12A12,12,0,0,0,84,116Zm88,0a12,12,0,1,0,12,12A12,12,0,0,0,172,116Zm60,12A104,104,0,0,1,79.12,219.82L45.07,231.17a16,16,0,0,1-20.24-20.24l11.35-34.05A104,104,0,1,1,232,128Zm-16,0A88,88,0,1,0,51.81,172.06a8,8,0,0,1,.66,6.54L40,216,77.4,203.53a7.85,7.85,0,0,1,2.53-.42,8,8,0,0,1,4,1.08A88,88,0,0,0,216,128Z'></path>
+    </svg>
+  );
+};
diff --git a/client/src/shared/assets/icons/crown.tsx b/client/src/shared/assets/icons/crown.tsx
diff --git a/client/src/shared/assets/icons/crowns/crown20.tsx b/client/src/shared/assets/icons/crowns/crown20.tsx
@@ -0,0 +1,31 @@
+import { FC, SVGProps } from 'react';
+export const Crown20: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='20'
+      height='20'
+      viewBox='0 0 20 20'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g clipPath='url(#clip0_3677_56133)'>
+        <path
+          d='M11.4575 0.412492C11.018 0.146175 10.5139 0.00537109 10 0.00537109C9.4861 0.00537109 8.98201 0.146175 8.5425 0.412492L1.98 4.38999C1.56645 4.64057 1.2245 4.99354 0.987147 5.41482C0.749795 5.8361 0.625065 6.31145 0.625 6.79499V13.205C0.625065 13.6885 0.749795 14.1639 0.987147 14.5852C1.2245 15.0064 1.56645 15.3594 1.98 15.61L8.5425 19.5875C8.98201 19.8538 9.4861 19.9946 10 19.9946C10.5139 19.9946 11.018 19.8538 11.4575 19.5875L18.02 15.61C18.4335 15.3594 18.7755 15.0064 19.0129 14.5852C19.2502 14.1639 19.3749 13.6885 19.375 13.205V6.79499C19.3749 6.31145 19.2502 5.8361 19.0129 5.41482C18.7755 4.99354 18.4335 4.64057 18.02 4.38999L11.4575 0.412492Z'
+          fill='#FAD20C'
+        />
+        <path
+          d='M16.5808 8.21577C16.583 8.25507 16.5801 8.29507 16.5702 8.33481L15.6891 11.8595C15.6446 12.0371 15.4855 12.1619 15.3025 12.1629L10.0155 12.1896C10.0148 12.1896 10.0141 12.1896 10.0134 12.1896H4.72634C4.54241 12.1896 4.38214 12.0643 4.33771 11.8858L3.45654 8.34778C3.44639 8.30698 3.44345 8.26586 3.44602 8.22554C3.10514 8.11814 2.85718 7.79916 2.85718 7.42324C2.85718 6.95942 3.23448 6.58212 3.6983 6.58212C4.16212 6.58212 4.53942 6.95942 4.53942 7.42324C4.53942 7.68444 4.41974 7.91814 4.23234 8.07254L5.33558 9.1841C5.6144 9.46506 6.00132 9.62613 6.39715 9.62613C6.86519 9.62613 7.31144 9.40386 7.59245 9.03147L9.40554 6.62912C9.25323 6.47691 9.15891 6.26661 9.15891 6.03473C9.15891 5.57091 9.53622 5.1936 10 5.1936C10.4639 5.1936 10.8412 5.57091 10.8412 6.03473C10.8412 6.25967 10.7519 6.46383 10.6075 6.61491C10.608 6.61555 10.6086 6.61609 10.6091 6.61678L12.409 9.02575C12.6899 9.40172 13.1378 9.62618 13.6071 9.62618C14.0066 9.62618 14.3823 9.47061 14.6647 9.1881L15.7749 8.07793C15.5835 7.92359 15.4607 7.68765 15.4607 7.42324C15.4607 6.95942 15.838 6.58212 16.3018 6.58212C16.7656 6.58212 17.1429 6.95942 17.1429 7.42324C17.1429 7.78912 16.9076 8.10031 16.5808 8.21577ZM15.6031 13.4446C15.6031 13.2234 15.4237 13.0441 15.2025 13.0441H4.84206C4.62086 13.0441 4.44153 13.2234 4.44153 13.4446V14.4059C4.44153 14.6271 4.62086 14.8064 4.84206 14.8064H15.2025C15.4237 14.8064 15.6031 14.6271 15.6031 14.4059V13.4446Z'
+          fill='#1A1C22'
+          stroke='#1A1C22'
+          strokeWidth='0.0534045'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_3677_56133'>
+          <rect width='20' height='20' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/client/src/shared/assets/icons/crowns/crown28.tsx b/client/src/shared/assets/icons/crowns/crown28.tsx
@@ -0,0 +1,31 @@
+import { FC, SVGProps } from 'react';
+export const Crown28: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='28'
+      height='28'
+      viewBox='0 0 28 28'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <g clipPath='url(#clip0_3677_56132)'>
+        <path
+          d='M16.0405 0.577537C15.4252 0.204694 14.7195 0.00756836 14 0.00756836C13.2805 0.00756836 12.5748 0.204694 11.9595 0.577537L2.772 6.14604C2.19304 6.49685 1.7143 6.99101 1.38201 7.5808C1.04971 8.17058 0.875091 8.83608 0.875 9.51304V18.487C0.875091 19.164 1.04971 19.8295 1.38201 20.4193C1.7143 21.0091 2.19304 21.5032 2.772 21.854L11.9595 27.4225C12.5748 27.7954 13.2805 27.9925 14 27.9925C14.7195 27.9925 15.4252 27.7954 16.0405 27.4225L25.228 21.854C25.807 21.5032 26.2857 21.0091 26.618 20.4193C26.9503 19.8295 27.1249 19.164 27.125 18.487V9.51304C27.1249 8.83608 26.9503 8.17058 26.618 7.5808C26.2857 6.99101 25.807 6.49685 25.228 6.14604L16.0405 0.577537Z'
+          fill='#FAD20C'
+        />
+        <path
+          d='M23.2131 11.502C23.2162 11.5571 23.2121 11.6131 23.1983 11.6687L21.9646 16.6033C21.9024 16.8519 21.6796 17.0267 21.4235 17.028L14.0216 17.0654C14.0206 17.0654 14.0197 17.0654 14.0188 17.0654H6.61682C6.35933 17.0654 6.13495 16.89 6.07275 16.6401L4.8391 11.6868C4.8249 11.6297 4.82079 11.5722 4.82437 11.5157C4.34714 11.3654 4 10.9188 4 10.3925C4 9.74315 4.52822 9.21492 5.17757 9.21492C5.82692 9.21492 6.35514 9.74315 6.35514 10.3925C6.35514 10.7582 6.18759 11.0854 5.92523 11.3015L7.46976 12.8577C7.86011 13.251 8.40179 13.4765 8.95596 13.4765C9.61122 13.4765 10.236 13.1654 10.6294 12.644L13.1677 9.28072C12.9545 9.06763 12.8224 8.7732 12.8224 8.44857C12.8224 7.79922 13.3507 7.271 14 7.271C14.6493 7.271 15.1776 7.79922 15.1776 8.44857C15.1776 8.76348 15.0526 9.04931 14.8505 9.26083C14.8511 9.26173 14.852 9.26247 14.8526 9.26345L17.3726 12.636C17.7658 13.1624 18.3928 13.4766 19.0499 13.4766C19.6092 13.4766 20.1351 13.2588 20.5305 12.8633L22.0848 11.3091C21.8169 11.093 21.6449 10.7627 21.6449 10.3925C21.6449 9.74315 22.1731 9.21492 22.8224 9.21492C23.4718 9.21492 24 9.74315 24 10.3925C24 10.9047 23.6707 11.3404 23.2131 11.502ZM21.8443 18.8224C21.8443 18.5127 21.5932 18.2617 21.2835 18.2617H6.77884C6.46916 18.2617 6.21809 18.5127 6.21809 18.8224V20.1682C6.21809 20.4779 6.46916 20.7289 6.77884 20.7289H21.2835C21.5932 20.7289 21.8443 20.4779 21.8443 20.1682V18.8224Z'
+          fill='#1A1C22'
+          stroke='#1A1C22'
+          strokeWidth='0.0747664'
+        />
+      </g>
+      <defs>
+        <clipPath id='clip0_3677_56132'>
+          <rect width='28' height='28' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/client/src/shared/assets/icons/crowns/crown40.tsx b/client/src/shared/assets/icons/crowns/crown40.tsx
@@ -0,0 +1,24 @@
+import { FC, SVGProps } from 'react';
+export const Crown40: FC<SVGProps<SVGSVGElement>> = props => {
+  return (
+    <svg
+      width='40'
+      height='40'
+      viewBox='0 0 40 40'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M22.915 0.824984C22.036 0.29235 21.0278 0.0107422 20 0.0107422C18.9722 0.0107422 17.964 0.29235 17.085 0.824984L3.96 8.77998C3.13291 9.28115 2.449 9.98708 1.97429 10.8296C1.49959 11.6722 1.25013 12.6229 1.25 13.59V26.41C1.25013 27.3771 1.49959 28.3278 1.97429 29.1703C2.449 30.0129 3.13291 30.7188 3.96 31.22L17.085 39.175C17.964 39.7076 18.9722 39.9892 20 39.9892C21.0278 39.9892 22.036 39.7076 22.915 39.175L36.04 31.22C36.8671 30.7188 37.551 30.0129 38.0257 29.1703C38.5004 28.3278 38.7499 27.3771 38.75 26.41V13.59C38.7499 12.6229 38.5004 11.6722 38.0257 10.8296C37.551 9.98708 36.8671 9.28115 36.04 8.77998L22.915 0.824984Z'
+        fill='#FAD20C'
+      />
+      <path
+        d='M33.1616 16.4315C33.166 16.5101 33.1602 16.5901 33.1405 16.6696L31.3781 23.719C31.2893 24.0742 30.971 24.3239 30.605 24.3258L20.0309 24.3792C20.0296 24.3792 20.0283 24.3792 20.0269 24.3792H9.45267C9.08482 24.3792 8.76429 24.1286 8.67542 23.7717L6.91307 16.6956C6.89278 16.614 6.88691 16.5317 6.89203 16.4511C6.21027 16.2363 5.71436 15.5983 5.71436 14.8465C5.71436 13.9188 6.46896 13.1642 7.3966 13.1642C8.32424 13.1642 9.07884 13.9188 9.07884 14.8465C9.07884 15.3689 8.83948 15.8363 8.46469 16.1451L10.6712 18.3682C11.2288 18.9301 12.0026 19.2523 12.7943 19.2523C13.7304 19.2523 14.6229 18.8077 15.1849 18.0629L18.8111 13.2582C18.5065 12.9538 18.3178 12.5332 18.3178 12.0695C18.3178 11.1418 19.0724 10.3872 20.0001 10.3872C20.9277 10.3872 21.6823 11.1418 21.6823 12.0695C21.6823 12.5193 21.5037 12.9277 21.215 13.2298C21.216 13.2311 21.2172 13.2322 21.2181 13.2336L24.818 18.0515C25.3798 18.8034 26.2755 19.2524 27.2143 19.2524C28.0132 19.2524 28.7645 18.9412 29.3294 18.3762L31.5498 16.1559C31.1671 15.8472 30.9213 15.3753 30.9213 14.8465C30.9213 13.9188 31.6759 13.1642 32.6035 13.1642C33.5312 13.1642 34.2858 13.9188 34.2858 14.8465C34.2858 15.5782 33.8153 16.2006 33.1616 16.4315ZM31.2062 26.8892C31.2062 26.4468 30.8475 26.0881 30.4051 26.0881H9.68413C9.24173 26.0881 8.88306 26.4468 8.88306 26.8892V28.8118C8.88306 29.2542 9.24173 29.6128 9.68413 29.6128H30.4051C30.8475 29.6128 31.2062 29.2542 31.2062 28.8118V26.8892Z'
+        fill='#1A1C22'
+        stroke='#1A1C22'
+        strokeWidth='0.106809'
+      />
+    </svg>
+  );
+};
diff --git a/client/src/shared/assets/icons/crowns/index.ts b/client/src/shared/assets/icons/crowns/index.ts
@@ -0,0 +1,3 @@
+export { Crown40 } from './crown40';
+export { Crown28 } from './crown28';
+export { Crown20 } from './crown20';
diff --git a/client/src/shared/assets/icons/index.ts b/client/src/shared/assets/icons/index.ts
@@ -2,15 +2,17 @@ export { Check } from './check';
 export { Cross } from './cross';
 export { Eye } from './eye';
 export { EyeClosed } from './eye-closed';
+export { Crown20, Crown28, Crown40 } from './crowns';
 export { Link } from './link';
 export { Plus } from './plus';
 export { Question } from './question';
 export { WarningCircle } from './warning-circle';
 export { X } from './x';
 export { Cookie } from './cookie';
-export { Crown } from './crown';
 export { Search } from './search';
-export { ArrowLeft } from './arrows';
+export { UserPlus } from './user-plus';
+export { ChatCircleDots } from './chat-circle-dots';
+export { ArrowLeft, ArrowRight } from './arrows';
 export { CaretUp, CaretDown } from './caret';
 export { LogoBig, LogoSmall } from './logo';
 export { Google, Github } from './socials';

diff --git a/client/src/shared/assets/icons/search.tsx b/client/src/shared/assets/icons/search.tsx
@@ -1,4 +1,5 @@
 import { FC, SVGProps } from 'react';
+
 export const Search: FC<SVGProps<SVGSVGElement>> = props => {
   return (
     <svg