add shared-components package

frontend/package.json

@@ -10,10 +10,10 @@
   "workspaces": {
     "packages": [
       "packages/*"
-    ],
-    "nohoist": [
-      "**"
     ]
   },
-  "dependencies": {}
+  "dependencies": {},
+  "resolutions": {
+    "babel-loader": "8.1.0"
+  }
 }

frontend/packages/client/craco.config.js

@@ -0,0 +1,24 @@
+const path = require('path');
+const { getLoader, loaderByName } = require('@craco/craco');
+
+const packages = [];
+packages.push(path.join(__dirname, '../shared-components'));
+
+module.exports = {
+  webpack: {
+    configure: (webpackConfig, arg) => {
+      const { isFound, match } = getLoader(
+        webpackConfig,
+        loaderByName('babel-loader')
+      );
+      if (isFound) {
+        const include = Array.isArray(match.loader.include)
+          ? match.loader.include
+          : [match.loader.include];
+
+        match.loader.include = include.concat(packages);
+      }
+      return webpackConfig;
+    },
+  },
+};

frontend/packages/client/jsconfig.json

@@ -1,7 +1,10 @@
 {
   "compilerOptions": {
-    "baseUrl": "src"
+    "baseUrl": "src",
+    "jsx": "react-jsx"
   },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
   "exclude": ["node_modules"]
-}
+}

frontend/packages/client/package.json

@@ -3,14 +3,15 @@
   "version": "1.0.1",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.4.5",
     "@creativebulma/bulma-tooltip": "^1.2.0",
     "@hookform/resolvers": "^2.9.7",
     "@hotjar/browser": "^1.0.6",
     "@onflow/fcl": "^1.2.0",
     "@onflow/sdk": "^1.1.1",
     "@onflow/six-transfer-tokens": "0.0.8",
-    "@tanstack/react-query": "^4.1.0",
-    "@tanstack/react-query-devtools": "4.0.11-beta.0",
+    "@tanstack/react-query": "4.3.3",
+    "@tanstack/react-query-devtools": "4.3.3",
     "@trivago/prettier-plugin-sort-imports": "^3.3.0",
     "bulma": "0.9.3",
     "bulma-popover": "^1.1.1",
@@ -44,10 +45,10 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "test:update": "react-scripts test --updateSnapshot",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "test:update": "craco test --updateSnapshot",
     "eject": "react-scripts eject",
     "prettier": "npx prettier --write .",
     "eslint": "eslint . --ext .js --fix"

frontend/packages/client/src/components/AddButton.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Plus } from 'components/Svg';
+import { Svg } from '@cast/shared-components';
 import classnames from 'classnames';
 
 export default function AddButton({
@@ -20,7 +19,7 @@ export default function AddButton({
   const fill = disabled ? 'hsl(0, 0%, 48%)' : 'black';
   return (
     <div className={classNames} onClick={onClick}>
-      <Plus fill={fill} />{' '}
+      <Svg name="Plus" fill={fill} />{' '}
       <span className="ml-2 small-text is-flex is-align-items-center">
         Add{` ${addText}`}
       </span>

frontend/packages/client/src/components/Community/CommunityEditorDetails/FormFields.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import { Svg } from '@cast/shared-components';
 import FadeIn from 'components/FadeIn';
-import { Bin, InvalidCheckMark, ValidCheckMark } from 'components/Svg';
 
 export default function Form({
   addrList,
@@ -55,23 +54,23 @@ export default function Form({
                 {!errorInField ? (
                   isValid && checkIcon ? (
                     <div className="is-flex is-align-items-center mr-2">
-                      <ValidCheckMark />
+                      <Svg name="ValidCheckMark" />
                     </div>
                   ) : null
                 ) : (
                   <div
                     className="cursor-pointer is-flex is-align-items-center mr-2"
                     onClick={() => onClearField(index)}
                   >
-                    <InvalidCheckMark />
+                    <Svg name="InvalidCheckMark" />
                   </div>
                 )}
                 {enableDeletion && (
                   <div
                     className="cursor-pointer is-flex is-align-items-center"
                     onClick={() => onDeleteAddress(index)}
                   >
-                    <Bin />
+                    <Svg name="Bin" />
                   </div>
                 )}
               </div>

frontend/packages/client/src/components/Community/CommunityEditorLinks/FormConfig.js

@@ -1,4 +1,4 @@
-import { Discord, Github, Instagram, Twitter, Website } from 'components/Svg';
+import { Svg } from '@cast/shared-components';
 import * as yup from 'yup';
 
 const LinksSchema = yup.object().shape({
@@ -50,27 +50,27 @@ const FormFieldsConfig = [
   {
     fieldName: 'websiteUrl',
     placeholder: 'https://www.community-site-name.com',
-    iconComponent: <Website width="16px" height="16px" />,
+    iconComponent: <Svg name="Website" width="16px" height="16px" />,
   },
   {
     fieldName: 'twitterUrl',
     placeholder: 'https://www.twitter.com/account',
-    iconComponent: <Twitter width="16px" height="16px" />,
+    iconComponent: <Svg name="Twitter" width="16px" height="16px" />,
   },
   {
     fieldName: 'githubUrl',
     placeholder: 'https://www.github.com/repository-name',
-    iconComponent: <Github width="16px" height="16px" />,
+    iconComponent: <Svg name="GitHub" width="16px" height="16px" />,
   },
   {
     fieldName: 'discordUrl',
     placeholder: 'https://www.discord.com/channel-name',
-    iconComponent: <Discord width="16px" height="16px" />,
+    iconComponent: <Svg name="Discord" width="16px" height="16px" />,
   },
   {
     fieldName: 'instagramUrl',
     placeholder: 'https://www.instagram.com/profile-name',
-    iconComponent: <Instagram width="16px" height="16px" />,
+    iconComponent: <Svg name="Instagram" width="16px" height="16px" />,
   },
 ];
 

frontend/packages/client/src/components/Community/CommunityEditorProfile/ProfileForm.js

@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useErrorHandlerContext } from 'contexts/ErrorHandler';
+import { Svg } from '@cast/shared-components';
 import { Form, WrapperResponsive } from 'components';
-import { Upload } from 'components/Svg';
 import { MAX_AVATAR_FILE_SIZE, MAX_FILE_SIZE } from 'const';
 import { getReducedImg } from 'utils';
 import classnames from 'classnames';
@@ -143,7 +143,7 @@ export default function ProfileForm({
           >
             {!isUpdatingLogo && !logoImage?.imageUrl && !logoImage?.file && (
               <>
-                <Upload />
+                <Svg name="Upload" />
                 <span className="smaller-text">Avatar</span>
                 <input {...getLogoInputProps()} />
               </>
@@ -171,7 +171,7 @@ export default function ProfileForm({
                   backgroundColor: '#4a4a4a',
                 }}
               >
-                <Upload className="has-text-white" />
+                <Svg name="Upload" className="has-text-white" />
                 <input {...getLogoInputProps()} />
               </div>
             )}
@@ -197,7 +197,7 @@ export default function ProfileForm({
           >
             {!isUpdatingBanner && !bannerImage?.imageUrl && (
               <>
-                <Upload />
+                <Svg name="Upload" />
                 <span className="smaller-text">Community Banner Image</span>
                 <span className="smaller-text">
                   JPG or PNG 200px X 1200px recommended
@@ -230,7 +230,7 @@ export default function ProfileForm({
                   backgroundColor: '#4a4a4a',
                 }}
               >
-                <Upload className="has-text-white" />
+                <Svg name="Upload" className="has-text-white" />
                 <input {...getBannerInputProps()} />
               </div>
             )}

frontend/packages/client/src/components/Community/JoinCommunityButton.js

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useModalContext } from 'contexts/NotificationModal';
 import { useWebContext } from 'contexts/Web3';
+import { Svg } from '@cast/shared-components';
 import { Error, WalletConnect } from 'components';
-import { Eye, HideEye } from 'components/Svg';
 import { useJoinCommunity, useUserRoleOnCommunity } from 'hooks';
 import classnames from 'classnames';
 
@@ -107,8 +107,8 @@ export default function JoinCommunityButton({
         className={buttonClasses}
         onClick={isMember ? leaveCommunity : joinCommunity}
       >
-        <Eye />
-        <HideEye />
+        <Svg name="Eye" />
+        <Svg name="HideEye" />
         {!isMember && (
           <span className="join-community-cta py-2 px-4 rounded-lg has-text-white has-background-black smaller-text">
             Watch this community

frontend/packages/client/src/components/Community/StrategySelectorInput.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Bin } from 'components/Svg';
+import { Svg } from '@cast/shared-components';
 
 export default function StrategyInput({
   index,
@@ -39,7 +38,7 @@ export default function StrategyInput({
             className="cursor-pointer is-flex is-align-items-center"
             onClick={() => onDeleteStrategy(index)}
           >
-            <Bin />
+            <Svg name="Bin" />
           </div>
         )}
       </div>

frontend/packages/client/src/components/CommunityLinks.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import { Svg } from '@cast/shared-components';
 import { Title } from '.';
-import { Discord, Github, Instagram, Twitter, Website } from './Svg';
 
 export default function CommunityLinks({
   instagramUrl,
@@ -19,7 +18,7 @@ export default function CommunityLinks({
           rel="noreferrer noopenner"
           href={websiteUrl}
         >
-          <Website width="20px" height="20px" />{' '}
+          <Svg name="Website" width="20px" height="20px" />{' '}
           <span className="pl-2">Website</span>
         </a>
       )}
@@ -30,7 +29,7 @@ export default function CommunityLinks({
           rel="noreferrer noopenner"
           href={discordUrl}
         >
-          <Discord width="20px" height="23.3px" />
+          <Svg name="Discord" width="20px" height="23.3px" />
           <span className="pl-2">Discord</span>
         </a>
       )}
@@ -41,7 +40,7 @@ export default function CommunityLinks({
           rel="noreferrer noopenner"
           href={instagramUrl}
         >
-          <Instagram />
+          <Svg name="Instagram" />
           <span className="pl-2">Instagram</span>
         </a>
       )}
@@ -52,7 +51,7 @@ export default function CommunityLinks({
           rel="noreferrer noopenner"
           href={twitterUrl}
         >
-          <Twitter width="20px" height="23.3px" />
+          <Svg name="Twitter" width="20px" height="23.3px" />
           <span className="pl-2">Twitter</span>
         </a>
       )}
@@ -63,7 +62,7 @@ export default function CommunityLinks({
           rel="noreferrer noopenner"
           href={githubUrl}
         >
-          <Github width="20px" height="23.3px" />
+          <Svg name="GitHub" width="20px" height="23.3px" />
           <span className="pl-2">Github</span>
         </a>
       )}

frontend/packages/client/src/components/Dropdown.js

@@ -1,6 +1,6 @@
-import React, { forwardRef, useState } from 'react';
+import { forwardRef, useState } from 'react';
+import { Svg } from '@cast/shared-components';
 import classnames from 'classnames';
-import { CaretDown } from './Svg';
 
 const DropDown = forwardRef(
   (
@@ -85,7 +85,7 @@ const DropDown = forwardRef(
               >
                 {innerValue?.label}
               </div>
-              <CaretDown className="has-text-black" />
+              <Svg name="CaretDown" className="has-text-black" />
             </div>
           </button>
         </div>

frontend/packages/client/src/components/Header.js

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { NavLink, withRouter } from 'react-router-dom';
+import { Svg } from '@cast/shared-components';
 import Label from './Label';
 import Sidenavbar from './SideNavbar';
-import { Logo } from './Svg';
 import WalletConnect from './WalletConnect';
 
 function Header(props) {
@@ -27,7 +27,7 @@ function Header(props) {
             <nav className="navbar is-transparent">
               <div className="navbar-brand">
                 <NavLink to="/" className="navbar-item p-0 mr-2">
-                  <Logo />
+                  <Svg name="Logo" />
                 </NavLink>
                 <div className="is-flex is-align-items-center">
                   <Label

frontend/packages/client/src/components/ModalAboutItem.js

@@ -1,19 +1,14 @@
-import React from 'react';
-import { Star } from 'components/Svg';
+import { Svg } from '@cast/shared-components';
 
-export default function ModalAboutItem({
-  closeModal = () => {},
-  title = '',
-  subTittle = '',
-} = {}) {
+export default function ModalAboutItem({ title = '', subTittle = '' } = {}) {
   return (
     <div
       className="border-light rounded-sm is-flex is-align-ittems-center flex-1"
       style={{ minHeight: '97px' }}
     >
       <div className="columns flex-1 is-mobile p-3-mobile">
         <div className="column pr-0 is-2 is-flex is-align-items-center is-align-content-strech is-justify-content-center">
-          <Star width="24" height="24" fill="black" />
+          <Svg name="Star" width="24" height="24" fill="black" />
         </div>
 
         <div className="column pl-0 is-flex is-flex-direction-column is-justify-content-center medium-text">

frontend/packages/client/src/components/ProposalCard/ProposalCardFooter.js

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
+import { Svg } from '@cast/shared-components';
 import { StatusLabel, WrapperResponsive } from 'components';
-import { Active, CheckCircle } from 'components/Svg';
 import { useVotingResults } from 'hooks';
 import { FilterValues } from 'const';
 import { parseDateFromServer } from 'utils';
@@ -37,9 +37,11 @@ const IconAndText = ({ endTime, voted, status }) => {
   }, [votingResults]);
 
   const iconStatusMap = {
-    [FilterValues.active]: <Active />,
+    [FilterValues.active]: <Svg name="Active" />,
     [FilterValues.closed]:
-      textDecision !== '' ? <CheckCircle width="15" height="15" /> : null,
+      textDecision !== '' ? (
+        <Svg name="CheckCircle" width="15" height="15" />
+      ) : null,
   };
 
   const { diffDuration } = parseDateFromServer(endTime);