Update packages

.gitignore

@@ -67,3 +67,6 @@ test-results/
 playwright-report/
 
 keys
+
+# Sentry
+.sentryclirc

.storybook/preview.js

@@ -1,6 +1,7 @@
 import { RouterContext } from "next/dist/shared/lib/router-context";
 
 import ResetCSS from '../src/styles/reset.scss';
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 import Theme from '../src/styles/theme.scss'
 import GlobalFonts from '../src/styles/fonts.scss';
 import GlobalStyles from '../src/styles/global.scss';
@@ -28,9 +29,11 @@ const themeDecorator = (Story, context) => {
            padding: '1rem',
            boxSizing: 'border-box'
           }}>
-          <I18nProvider lang={'en'} namespaces={{ common: commonEn, home: homeEn }}>
-            <Story />
-          </I18nProvider>
+          <TooltipProvider>
+            <I18nProvider lang={'en'} namespaces={{ common: commonEn, home: homeEn }}>
+              <Story />
+            </I18nProvider>
+          </TooltipProvider>
         </div>
       </div>
     </>

.stylelintrc.json

@@ -1,4 +1,5 @@
 {
+    "customSyntax": "postcss-scss",
     "plugins": [
         "stylelint-scss",
         "stylelint-prettier",

package.json

@@ -32,27 +32,28 @@
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.17.0",
-    "@next/bundle-analyzer": "^12.1.5",
+    "@next/bundle-analyzer": "^12.2.5",
     "@notionhq/client": "^0.4.13",
-    "@radix-ui/react-checkbox": "^0.1.5",
-    "@radix-ui/react-dialog": "^0.1.7",
-    "@radix-ui/react-dropdown-menu": "^0.1.6",
-    "@radix-ui/react-hover-card": "^0.1.5",
-    "@radix-ui/react-id": "^0.1.5",
+    "@radix-ui/react-checkbox": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-direction": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-hover-card": "^1.0.0",
+    "@radix-ui/react-id": "^1.0.0",
     "@radix-ui/react-polymorphic": "^0.0.14",
-    "@radix-ui/react-popover": "^0.1.6",
-    "@radix-ui/react-radio-group": "^0.1.5",
-    "@radix-ui/react-separator": "^0.1.4",
-    "@radix-ui/react-slider": "^0.1.4",
-    "@radix-ui/react-tooltip": "^0.1.7",
-    "@radix-ui/react-visually-hidden": "^0.1.4",
-    "@reduxjs/toolkit": "^1.8.0",
-    "@sentry/nextjs": "^6.19.6",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-separator": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
+    "@radix-ui/react-visually-hidden": "^1.0.0",
+    "@reduxjs/toolkit": "^1.8.4",
+    "@sentry/nextjs": "^7.10.0",
     "classnames": "^2.3.1",
     "clipboard-copy": "^4.0.1",
     "cookie": "^0.5.0",
-    "firebase": "^9.6.9",
-    "fuse.js": "^6.5.3",
+    "firebase": "^9.9.2",
+    "fuse.js": "^6.6.2",
     "humps": "^2.0.1",
     "js-cookie": "^3.0.1",
     "jsonwebtoken": "^8.5.1",
@@ -66,38 +67,38 @@
     "node-fetch": "2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.31.3",
-    "react-hotkeys-hook": "^3.4.4",
-    "react-redux": "^7.2.8",
-    "react-toastify": "^8.2.0",
-    "react-virtuoso": "^2.9.1",
+    "react-hook-form": "^7.34.1",
+    "react-hotkeys-hook": "^3.4.7",
+    "react-redux": "^8.0.2",
+    "react-toastify": "^9.0.8",
+    "react-virtuoso": "^2.16.6",
     "redux-persist": "^6.0.0",
     "swr": "^1.2.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@lokalise/node-api": "^7.2.0",
+    "@lokalise/node-api": "^8.0.0",
     "@next/eslint-plugin-next": "^12.1.0",
-    "@playwright/test": "^1.21.0",
-    "@storybook/addon-a11y": "^6.4.21",
-    "@storybook/addon-actions": "^6.4.21",
-    "@storybook/addon-essentials": "^6.4.21",
-    "@storybook/addon-links": "^6.4.21",
-    "@storybook/addon-storysource": "^6.4.21",
-    "@storybook/builder-webpack5": "^6.4.21",
-    "@storybook/manager-webpack5": "^6.4.21",
+    "@playwright/test": "^1.25.0",
+    "@storybook/addon-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-storysource": "^6.5.10",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.21",
-    "@svgr/webpack": "^6.2.1",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@storybook/react": "^6.5.10",
+    "@svgr/webpack": "^6.3.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
     "@types/cookie": "^0.5.1",
+    "@types/jest": "^28.1.6",
     "@types/js-cookie": "^3.0.2",
     "@types/jsonwebtoken": "^8.5.8",
-    "@types/node-fetch": "^2.6.1",
-    "@testing-library/react": "^12.1.4",
-    "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.180",
     "@types/node": "^17.0.22",
+    "@types/node-fetch": "^2.6.2",
     "@types/qs": "^6.9.7",
     "@types/react": "^17.0.41",
     "@types/react-dom": "^17.0.14",
@@ -109,41 +110,44 @@
     "babel-loader": "^8.2.4",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
     "babel-plugin-polyfill-regenerator": "^0.3.1",
-    "dotenv": "^16.0.0",
-    "eslint": "^8.9.0",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.22.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-next": "^12.1.0",
+    "eslint-config-next": "^12.2.5",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-i18next": "^5.1.2",
-    "eslint-plugin-import": "^2.25.4",
-    "eslint-plugin-jsdoc": "^38.0.6",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-func": "^0.1.17",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-sonarjs": "^0.12.0",
-    "eslint-plugin-storybook": "^0.5.7",
-    "eslint-plugin-unicorn": "^41.0.1",
-    "husky": "^7.0.4",
-    "jest": "^27.5.1",
-    "jest-runner-eslint": "^1.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-func": "^0.1.18",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-sonarjs": "^0.15.0",
+    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-unicorn": "^43.0.2",
+    "husky": "^8.0.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-runner-eslint": "^1.0.1",
     "jest-watch-select-projects": "^2.0.0",
-    "jest-watch-typeahead": "^1.0.0",
-    "lint-staged": "^12.3.7",
-    "next-sitemap": "^2.5.20",
-    "prettier": "^2.5.1",
+    "jest-watch-typeahead": "^2.0.0",
+    "lint-staged": "^13.0.3",
+    "next-sitemap": "^3.1.17",
+    "postcss": "8",
+    "postcss-scss": "^4.0.4",
+    "prettier": "^2.7.1",
     "react-docgen-typescript-loader": "^3.7.2",
-    "replace-in-file": "^6.3.2",
-    "sass": "^1.49.9",
-    "sass-loader": "^12.6.0",
-    "storybook-addon-next-router": "^3.1.1",
-    "stylelint": "13.13.1",
+    "replace-in-file": "^6.3.5",
+    "sass": "^1.54.4",
+    "sass-loader": "^13.0.2",
+    "storybook-addon-next-router": "^4.0.0",
+    "stylelint": "14.10.0",
     "stylelint-prettier": "^2.0.0",
-    "stylelint-scss": "^4.2.0",
-    "stylelint-use-logical": "^1.1.0",
-    "superagent": "^7.1.2",
-    "ts-jest": "^27.1.4",
+    "stylelint-scss": "^4.3.0",
+    "stylelint-use-logical": "^2.0.0",
+    "superagent": "^8.0.0",
+    "ts-jest": "^28.0.7",
     "typescript": "^4.6.2"
   },
   "husky": {

sentry.properties

@@ -1,4 +1,4 @@
 defaults.url=https://sentry.io/
 defaults.org=qurancom
 defaults.project=nextjs
-cli.executable=../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli
+cli.executable=../../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

src/components/AudioPlayer/AudioPlayer.module.scss

@@ -12,7 +12,7 @@
   transition: var(--transition-regular);
   z-index: var(--z-index-sticky);
   box-shadow: var(--shadow-large);
-  border-top: 1px solid var(--color-borders-hairline);
+  border-block-start: 1px solid var(--color-borders-hairline);
   height: constants.$audio-player-default-height;
   @include breakpoints.tablet {
     height: constants.$audio-player-default-desktop-height;

src/components/CommandBar/CommandBarBody/CommandBarBody.module.scss

@@ -22,7 +22,7 @@ $height: calc(9 * var(--spacing-mega));
 }
 
 .inputContainer {
-  border-bottom: 1px solid var(--color-borders-hairline);
+  border-block-end: 1px solid var(--color-borders-hairline);
   padding-block: var(--spacing-small);
   display: flex;
   align-items: center;
@@ -31,7 +31,7 @@ $height: calc(9 * var(--spacing-mega));
 
 .voiceFlowContainer {
   justify-content: flex-end;
-  border-bottom: 0;
+  border-block-end: 0;
 }
 
 .input {

src/components/Login/login.module.scss

@@ -79,7 +79,7 @@
 .resendEmailSection {
   margin-block-start: var(--spacing-medium);
   padding-block-start: var(--spacing-medium);
-  border-top: 1px solid var(--color-background-elevated);
+  border-block-start: 1px solid var(--color-background-elevated);
   display: flex;
   flex-direction: column;
 }

src/components/Navbar/Drawer/Drawer.module.scss

@@ -81,7 +81,7 @@
   width: 100%;
   position: fixed;
   height: var(--navbar-container-height);
-  border-bottom: 1px var(--color-borders-hairline) solid;
+  border-block-end: 1px var(--color-borders-hairline) solid;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -110,7 +110,7 @@
 }
 
 .hiddenButtonHeader {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 
 .hiddenButtonHeaderContentContainer {

src/components/Navbar/LanguageSelector.tsx

@@ -139,6 +139,7 @@ const LanguageSelector = ({
           }`,
         );
       }}
+      isPortalled={false}
     >
       {options.map((option) => (
         <PopoverMenu.Item

src/components/Navbar/NavigationDrawer/NavigationDrawerBody/NavigationDrawerBody.module.scss

@@ -11,6 +11,6 @@
   font-size: var(--font-size-small);
   text-transform: uppercase;
   font-weight: var(--font-weight-bold);
-  border-bottom: 1px var(--color-borders-hairline) solid;
+  border-block-end: 1px var(--color-borders-hairline) solid;
   min-height: calc(var(--spacing-mega) + var(--spacing-small));
 }

src/components/Navbar/NavigationDrawer/NavigationDrawerItem.module.scss

@@ -6,7 +6,7 @@
   min-height: calc(var(--spacing-mega) + var(--spacing-small));
   padding-inline-start: var(--spacing-micro);
   padding-inline-end: var(--spacing-micro);
-  border-bottom: 1px var(--color-borders-hairline) solid;
+  border-block-end: 1px var(--color-borders-hairline) solid;
 }
 
 .containerStale {

src/components/Navbar/SettingsDrawer/SettingsBodySkeleton.module.scss

@@ -24,7 +24,7 @@
 .inputRow {
   margin-block-end: var(--spacing-large);
   padding-block-end: var(--spacing-large);
-  border-bottom: 1px solid;
+  border-block-end: 1px solid;
   border-color: var(--color-secondary-faded);
 }
 

src/components/QuranReader/ReadingView/Page.module.scss

@@ -7,7 +7,7 @@
 ); // fallback font's line-width
 
 .container {
-  border-bottom: 1px var(--color-borders-hairline) solid;
+  border-block-end: 1px var(--color-borders-hairline) solid;
   margin-block-start: constants.$reading-view-container-top-margin;
   margin-block-end: var(--spacing-mega);
   max-width: 100%;

src/components/QuranReader/ReadingView/WordActionsMenu/WordActionsMenu.module.scss

@@ -1,5 +1,3 @@
-@use "src/styles/theme";
-
 .readingViewOverflowVerseActionsMenu {
   display: inline-block;
   line-height: var(--spacing-small);

src/components/QuranReader/ReadingView/WordActionsMenu/index.tsx

@@ -5,7 +5,6 @@ import ShareVerseButton from '../../TranslationView/ShareVerseButton';
 
 import styles from './WordActionsMenu.module.scss';
 
-import useSetPortalledZIndex from 'src/components/QuranReader/hooks/useSetPortalledZIndex';
 import TranslationsButton from 'src/components/QuranReader/ReadingView/TranslationsButton';
 import OverflowVerseActionsMenu from 'src/components/Verse/OverflowVerseActionsMenu';
 import PlayVerseAudioButton from 'src/components/Verse/PlayVerseAudioButton';
@@ -16,17 +15,9 @@ type Props = {
   onActionTriggered?: () => void;
 };
 
-const DATA_POPOVER_PORTALLED = 'data-popover-menu-portalled';
-
 const ReadingViewWordActionsMenu: React.FC<Props> = ({ word, onActionTriggered }) => {
-  useSetPortalledZIndex(DATA_POPOVER_PORTALLED);
   return (
-    <div
-      className={styles.container}
-      {...{
-        [DATA_POPOVER_PORTALLED]: true,
-      }}
-    >
+    <div className={styles.container}>
       <TranslationsButton verse={word.verse} onActionTriggered={onActionTriggered} />
       <ShareVerseButton
         verseKey={word.verseKey}
@@ -50,8 +41,6 @@ const ReadingViewWordActionsMenu: React.FC<Props> = ({ word, onActionTriggered }
         <OverflowVerseActionsMenu
           isTranslationView={false}
           verse={word.verse}
-          isModal
-          isPortalled
           onActionTriggered={onActionTriggered}
         />
       </div>

src/components/QuranReader/ReadingView/WordPopover/WordPopover.module.scss

@@ -1,14 +1,7 @@
 @use "src/styles/breakpoints";
 
 .content {
-  padding-block-start: var(--spacing-micro);
-  padding-block-end: var(--spacing-micro);
-  padding-inline-start: var(--spacing-micro);
-  padding-inline-end: var(--spacing-micro);
-  background-color: var(--color-background-elevated);
-  & > span {
-    fill: var(--color-background-elevated);
-  }
+  z-index: var(--z-index-default);
 }
 
 .trigger {

src/components/QuranReader/ReadingView/WordPopover/index.tsx

@@ -77,11 +77,10 @@ const ReadingViewWordPopover: React.FC<Props> = ({ word, children }) => {
       }
       tip
       isModal
-      portalled
-      contentStyles={styles.content}
       open={isTooltipOpened}
       onOpenChange={onOpenChange}
       triggerStyles={styles.trigger}
+      contentStyles={styles.content}
       defaultStyling={false}
     >
       <ReadingViewWordActionsMenu word={word} onActionTriggered={onActionTriggered} />

src/components/QuranReader/ReflectionView/ReflectionItem.module.scss

@@ -51,7 +51,7 @@
 
 .clickable {
   cursor: pointer;
-  border-bottom: 1px solid var(--color-text-default);
+  border-block-end: 1px solid var(--color-text-default);
 }
 
 .container {