Upgrade phosphor (#185)

## 🐛 Issue   Phosphor is outdated and need new icons in event block pr ## ✏️ Solution  Update phoshpor Note on the PR size: 1. Workspaces weren't properly setup, which was messing with dependencies across the packages. The workspace was kinda setup, but anytime yarn did something it spit out a warning aobut workspaces only working on private packages. so I made the base package.json private and it snapped into order 2. There were lint/format issues in some of the files and so the formatting got updated upon save. I can try to revert these changes if too heavy handed ## 🔬 To Test  1. 3. ## 📸 Screenshots
ApollosProject · Mar 1, 2024 · 4d491c1 · 4d491c1
1 parent 9e6cb17
commit 4d491c1
Show file tree

Hide file tree

Showing 26 changed files with 327,928 additions and 135 deletions.
diff --git a/micro-service/package.json b/micro-service/package.json
@@ -19,6 +19,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@phosphor-icons/react": "2.0.15",
     "algoliasearch": "^4.17.0",
     "amplitude-js": "^8.21.9",
     "apollo-upload-client": "^17.0.0",
@@ -31,7 +32,6 @@
     "graphql": "^16.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "phosphor-react": "^1.4.1",
     "postcss": "^7.0.39",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

diff --git a/micro-service/yarn.lock b/micro-service/yarn.lock
@@ -1379,6 +1379,13 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
+"@babel/runtime@^7.17.8":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.0.tgz#584c450063ffda59697021430cb47101b085951e"
+  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -1608,6 +1615,14 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
+"@headlessui/react@^1.7.18":
+  version "1.7.18"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.18.tgz#30af4634d2215b2ca1aa29d07f33d02bea82d9d7"
+  integrity sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==
+  dependencies:
+    "@tanstack/react-virtual" "^3.0.0-beta.60"
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.11.10":
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2"
@@ -1998,6 +2013,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@phosphor-icons/[email protected]":
+  version "2.0.15"
+  resolved "https://registry.yarnpkg.com/@phosphor-icons/react/-/react-2.0.15.tgz#4d8e28484d45649f53a6cd75db161cf8b8379e1d"
+  integrity sha512-PQKNcRrfERlC8gJGNz0su0i9xVmeubXSNxucPcbCLDd9u0cwJVTEyYK87muul/svf0UXFdL2Vl6bbeOhT1Mwow==
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.10.tgz#2eba163b8e7dbabb4ce3609ab5e32ab63dda3ef8"
@@ -3278,6 +3298,18 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@tanstack/react-virtual@^3.0.0-beta.60":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.1.3.tgz#4ef2a7dd819a7dd2b634d50cbd6ba498f06529ec"
+  integrity sha512-YCzcbF/Ws/uZ0q3Z6fagH+JVhx4JLvbSflgldMgLsuvB8aXjZLLb3HvrEVxY480F9wFlBiXlvQxOyXb5ENPrNA==
+  dependencies:
+    "@tanstack/virtual-core" "3.1.3"
+
+"@tanstack/[email protected]":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.1.3.tgz#77ced625f19ec9350f6e460f142b3be9bff03866"
+  integrity sha512-Y5B4EYyv1j9V8LzeAoOVeTg0LI7Fo5InYKgAjkY1Pu9GjtUwX/EKxNcU7ng3sKr99WEf+bPTcktAeybyMOYo+g==
+
 "@testing-library/dom@^7.28.1":
   version "7.31.2"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.31.2.tgz#df361db38f5212b88555068ab8119f5d841a8c4a"
@@ -4773,6 +4805,11 @@ clean-css@^5.2.2:
   dependencies:
     source-map "~0.6.0"
 
+client-only@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
@@ -8570,11 +8607,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-phosphor-react@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/phosphor-react/-/phosphor-react-1.4.1.tgz#97b0e034d9937db9b97fe53b186e9646464fd4e7"
-  integrity sha512-gO5j7U0xZrdglTAYDYPACU4xDOFBTJmptrrB/GeR+tHhCZF3nUMyGmV/0hnloKjuTrOmpSFlbfOY78H39rgjUQ==
-
 picocolors@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
@@ -8614,6 +8646,13 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+polished@^4.1.2:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"
+  integrity sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==
+  dependencies:
+    "@babel/runtime" "^7.17.8"
+
 postcss-attribute-case-insensitive@^5.0.2:
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
@@ -9653,6 +9692,11 @@ regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.9:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
   integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.1:
   version "0.15.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.1.tgz#f6c4e99fc1b4591f780db2586328e4d9a9d8dc56"

diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "apollos-embeds",
+  "private": true,
   "version": "0.0.1",
   "main": "index.js",
   "repository": "https://github.com/ApollosProject/apollos-embeds.git",
@@ -9,6 +10,6 @@
     "packages": [
       "packages/*"
     ],
-    "nohoist": [ ]
+    "nohoist": []
   }
 }
diff --git a/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js b/packages/web-shared/components/Auth/AuthLayout/AuthLayout.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CaretLeft } from 'phosphor-react';
+import { CaretLeft } from '@phosphor-icons/react';
 
 import { Box, Card, Button } from '../../../ui-kit';
 import customizations from './customizations';
@@ -34,14 +34,7 @@ function AuthLayout(props = {}) {
       alignItems="center"
       backgroundColor="neutral.gray6"
     >
-      <Card
-        p="l"
-        pt="base"
-        display="flex"
-        flexDirection="column"
-        width="440px"
-        {...props}
-      >
+      <Card p="l" pt="base" display="flex" flexDirection="column" width="440px" {...props}>
         {state.prevStep === authSteps.Identity ? (
           <Button
             variant="link"
@@ -56,9 +49,7 @@ function AuthLayout(props = {}) {
           />
         ) : null}
         <Heading>{props.heading || customizations.defaulthHeading}</Heading>
-        <SubHeading>
-          {props.subHeading || customizations.defaultSubHeading}
-        </SubHeading>
+        <SubHeading>{props.subHeading || customizations.defaultSubHeading}</SubHeading>
         {props.children}
       </Card>
     </Box>

diff --git a/packages/web-shared/components/Breadcrumbs/Breadcrumbs.js b/packages/web-shared/components/Breadcrumbs/Breadcrumbs.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
-import { CaretRight } from 'phosphor-react';
+import { CaretRight } from '@phosphor-icons/react';
 import { Box, Button, SystemText } from '../../ui-kit';
 import {
   remove as removeBreadcrumb,

diff --git a/packages/web-shared/components/FeatureFeed/Features/HorizontalCardListFeature.js b/packages/web-shared/components/FeatureFeed/Features/HorizontalCardListFeature.js
@@ -6,7 +6,7 @@ import { getURLFromType } from '../../../utils';
 import { ContentCard, Box, H2, systemPropTypes, Button, ButtonGroup } from '../../../ui-kit';
 import { add as addBreadcrumb, useBreadcrumbDispatch } from '../../../providers/BreadcrumbProvider';
 import { open as openModal, set as setModal, useModal } from '../../../providers/ModalProvider';
-import { CaretRight } from 'phosphor-react';
+import { CaretRight } from '@phosphor-icons/react';
 import { useAnalytics } from '../../../providers/AnalyticsProvider';
 
 import Carousel from 'react-multi-carousel';

diff --git a/packages/web-shared/components/FeatureFeed/Features/HorizontalMediaListFeature.js b/packages/web-shared/components/FeatureFeed/Features/HorizontalMediaListFeature.js
@@ -8,7 +8,7 @@ import { add as addBreadcrumb, useBreadcrumbDispatch } from '../../../providers/
 import { open as openModal, set as setModal, useModal } from '../../../providers/ModalProvider';
 import { useAnalytics } from '../../../providers/AnalyticsProvider';
 import Carousel from 'react-multi-carousel';
-import { CaretRight } from 'phosphor-react';
+import { CaretRight } from '@phosphor-icons/react';
 const SHOW_VIEW_ALL_LIMIT = 5;
 
 const responsive = {

diff --git a/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.js b/packages/web-shared/components/FeatureFeed/Features/PrayerListFeature.js
@@ -1,16 +1,14 @@
 import React, { useState } from 'react';
 import { systemPropTypes, Box, H3 } from '../../../ui-kit';
 import Styled from './PrayerListFeature.styles';
-import { Plus, X } from 'phosphor-react';
+import { Plus, X } from '@phosphor-icons/react';
 
 function PrayerListFeature(props = {}) {
   // Generate random background color
   const randomHSLA = () => `hsla(${~~(360 * Math.random())}, 70%,  72%, 0.8)`;
 
   //Background colors for requestors with no profile picture
-  const [backgroundColors, setBackgroundColors] = useState(
-    props.feature?.prayers?.map(randomHSLA)
-  );
+  const [backgroundColors, setBackgroundColors] = useState(props.feature?.prayers?.map(randomHSLA));
 
   const [modalState, setModalState] = useState({
     isOpen: false,
@@ -44,17 +42,12 @@ function PrayerListFeature(props = {}) {
     }
 
     const capitalizedFirstName =
-      firstName === null
-        ? ''
-        : firstName.charAt(0).toUpperCase() + firstName.slice(1);
+      firstName === null ? '' : firstName.charAt(0).toUpperCase() + firstName.slice(1);
 
     const capitalizedLastName =
-      lastName === null
-        ? ''
-        : lastName.charAt(0).toUpperCase() + lastName.slice(1);
+      lastName === null ? '' : lastName.charAt(0).toUpperCase() + lastName.slice(1);
 
-    const combinedNames =
-      capitalizedFirstName.charAt(0) + capitalizedLastName.charAt(0);
+    const combinedNames = capitalizedFirstName.charAt(0) + capitalizedLastName.charAt(0);
 
     return combinedNames;
   };
@@ -74,10 +67,7 @@ function PrayerListFeature(props = {}) {
             ) : (
               <Styled.Avatar backgroundColor={item.backgroundColor}>
                 <H3>
-                  {combineAndCapitalizeNames(
-                    item.requestor?.firstName,
-                    item.requestor?.lastName
-                  )}
+                  {combineAndCapitalizeNames(item.requestor?.firstName, item.requestor?.lastName)}
                 </H3>
               </Styled.Avatar>
             )}
@@ -93,12 +83,7 @@ function PrayerListFeature(props = {}) {
 
   //Is this needed?
   const AddDailyPrayer = (
-    <Box
-      position="relative"
-      display="inline-block"
-      padding="2px 5px"
-      onClick={openModal}
-    >
+    <Box position="relative" display="inline-block" padding="2px 5px" onClick={openModal}>
       <Styled.Avatar>
         <Plus size={36} />
       </Styled.Avatar>
@@ -121,18 +106,13 @@ function PrayerListFeature(props = {}) {
               ) : (
                 <Styled.Avatar backgroundColor={backgroundColor}>
                   <H3>
-                    {combineAndCapitalizeNames(
-                      item.requestor?.firstName,
-                      item.requestor?.lastName
-                    )}
+                    {combineAndCapitalizeNames(item.requestor?.firstName, item.requestor?.lastName)}
                   </H3>
                 </Styled.Avatar>
               );
             return (
               <Box
-                onClick={() =>
-                  openModal(item?.requestor, item?.text, backgroundColor)
-                }
+                onClick={() => openModal(item?.requestor, item?.text, backgroundColor)}
                 key={index}
               >
                 {Avatar}

diff --git a/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js b/packages/web-shared/components/FeatureFeed/Features/ScriptureFeature.js
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { systemPropTypes, Box } from '../../../ui-kit';
 import PropTypes from 'prop-types';
 import Styled from './ScriptureFeature.styles';
-import { ArrowsInSimple, ArrowsOutSimple } from 'phosphor-react';
+import { ArrowsInSimple, ArrowsOutSimple } from '@phosphor-icons/react';
 
 function ScriptureFeature(props = {}) {
   const [isExpanded, setIsExpanded] = useState(false);

diff --git a/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js b/packages/web-shared/components/FeatureFeed/Features/VerticalCardListFeature.js
@@ -7,7 +7,7 @@ import { ContentCard, Box, H2, systemPropTypes, Button } from '../../../ui-kit';
 import { add as addBreadcrumb, useBreadcrumbDispatch } from '../../../providers/BreadcrumbProvider';
 import { open as openModal, set as setModal, useModal } from '../../../providers/ModalProvider';
 import Styled from './VerticalCardListFeature.styles';
-import { CaretRight } from 'phosphor-react';
+import { CaretRight } from '@phosphor-icons/react';
 import { useAnalytics } from '../../../providers/AnalyticsProvider';
 
 function VerticalCardListFeature(props = {}) {

diff --git a/packages/web-shared/components/Modal/Modal.js b/packages/web-shared/components/Modal/Modal.js
@@ -16,7 +16,7 @@ import {
   reset as resetBreadcrumb,
   useBreadcrumbDispatch,
 } from '../../providers/BreadcrumbProvider';
-import { X } from 'phosphor-react';
+import { X } from '@phosphor-icons/react';
 import Wordmark from '../Wordmark';
 
 function ChurchLogo(props) {