chore: add tooltips to sidebar icon buttons

package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@hsjs/react-cache": "0.0.0-alpha.aa94237",
+    "@reach/tooltip": "^0.11.2",
     "@sentry/browser": "^5.27.4",
     "chart.js": "^2.9.2",
     "clsx": "^1.1.0",

src/components/SideBar.tsx

@@ -1,6 +1,8 @@
+import '@reach/tooltip/styles.css';
+
+import Tooltip from '@reach/tooltip';
 import cx from 'clsx';
-import PropTypes from 'prop-types';
+import * as React from 'react';
-import React from 'react';
 import { Info } from 'react-feather';
 import {
   FcAreaChart,
@@ -19,17 +21,6 @@ import { connect } from './StateProvider';
 
 const { useCallback } = React;
 
-// testing color icons
-
-// const icons = {
-//   activity: Activity,
-//   globe: Globe,
-//   command: Command,
-//   file: File,
-//   settings: Settings,
-//   link: Link2
-// };
-
 const icons = {
   activity: FcAreaChart,
   globe: FcGlobe,
@@ -40,15 +31,11 @@ const icons = {
 };
 
 const SideBarRow = React.memo(function SideBarRow({
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'isActive' does not exist on type '{ chil... Remove this comment to see the full error message
   isActive,
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'to' does not exist on type '{ children?:... Remove this comment to see the full error message
   to,
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'iconId' does not exist on type '{ childr... Remove this comment to see the full error message
   iconId,
-  // @ts-expect-error ts-migrate(2339) FIXME: Property 'labelText' does not exist on type '{ chi... Remove this comment to see the full error message
   labelText,
-}) {
+}: SideBarRowProps) {
   const Comp = icons[iconId];
   const className = cx(s.row, isActive ? s.rowActive : null);
   return (
@@ -59,13 +46,12 @@ const SideBarRow = React.memo(function SideBarRow({
   );
 });
 
-// @ts-expect-error ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'Named... Remove this comment to see the full error message
+interface SideBarRowProps {
-SideBarRow.propTypes = {
+  isActive: boolean;
-  isActive: PropTypes.bool.isRequired,
+  to: string;
-  to: PropTypes.string.isRequired,
+  iconId?: string;
-  iconId: PropTypes.string,
+  labelText?: string;
-  labelText: PropTypes.string,
+}
-};
 
 const pages = [
   {
@@ -112,7 +98,6 @@ function SideBar({ dispatch, theme }) {
         {pages.map(({ to, iconId, labelText }) => (
           <SideBarRow
             key={to}
-            // @ts-expect-error ts-migrate(2322) FIXME: Type '{ key: string; to: string; isActive: boolean... Remove this comment to see the full error message
             to={to}
             isActive={location.pathname === to}
             iconId={iconId}
@@ -121,15 +106,24 @@ function SideBar({ dispatch, theme }) {
         ))}
       </div>
       <div className={s.footer}>
-        <button
+        <Tooltip
-          className={cx(s.iconWrapper, s.themeSwitchContainer)}
+          label="theme"
-          onClick={switchThemeHooked}
+          aria-label={
+            'switch to ' + (theme === 'light' ? 'dark' : 'light') + ' theme'
+          }
         >
-          {theme === 'light' ? <MoonA /> : <Sun />}
+          <button
-        </button>
+            className={cx(s.iconWrapper, s.themeSwitchContainer)}
-        <Link to="/about" className={s.iconWrapper}>
+            onClick={switchThemeHooked}
-          <Info size={20} />
+          >
-        </Link>
+            {theme === 'light' ? <MoonA /> : <Sun />}
+          </button>
+        </Tooltip>
+        <Tooltip label="about">
+          <Link to="/about" className={s.iconWrapper}>
+            <Info size={20} />
+          </Link>
+        </Tooltip>
       </div>
     </div>
   );

yarn.lock

@@ -1213,6 +1213,66 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@reach/auto-id@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.11.2.tgz#c66a905c5401d1ac3da8d26165b8d27d6e778fa6"
+  integrity sha512-YZ21b0Kb88wJ0t7QjSznWOYskARQMnmXY9Y2XZ5RyYcZ2krT4s3+ghghpfaPs6BKcrZDonZCrU65OFDJPa1jAw==
+  dependencies:
+    "@reach/utils" "0.11.2"
+    tslib "^2.0.0"
+
+"@reach/observe-rect@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
+  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
+
+"@reach/portal@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762"
+  integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g==
+  dependencies:
+    "@reach/utils" "0.11.2"
+    tslib "^2.0.0"
+
+"@reach/rect@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.11.2.tgz#bc92f97f87e81d1307054fd41c40874d3fbf5491"
+  integrity sha512-eoUWayAADi1ITtrc+8jN9NsBTUkfpORkOs5bQb4RnR6UA/3zlxo5VPuxWgWAG0BCohZlqsxg7NpvckNAyaiAAQ==
+  dependencies:
+    "@reach/observe-rect" "1.2.0"
+    "@reach/utils" "0.11.2"
+    prop-types "^15.7.2"
+    tslib "^2.0.0"
+
+"@reach/tooltip@^0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.11.2.tgz#db5c11fa72995801baac157db46f5bb6cacd494b"
+  integrity sha512-aTi3aLkRZMHrNiHt84vnyTWNj84rPdGYkxAfaFpxgkaKpos3XmaOPiR+n/3YzQUoJXISuw8mZezcrDtsSpr3aA==
+  dependencies:
+    "@reach/auto-id" "0.11.2"
+    "@reach/portal" "0.11.2"
+    "@reach/rect" "0.11.2"
+    "@reach/utils" "0.11.2"
+    "@reach/visually-hidden" "0.11.1"
+    prop-types "^15.7.2"
+    tslib "^2.0.0"
+
+"@reach/utils@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.11.2.tgz#be1f03650db56fd67a16d3fc70e5262cdb139cec"
+  integrity sha512-fBTolYj+rKTROXmf0zHO0rCWSvw7J0ALmYj5QxW4DmITMOH5uyRuWDWOfqohIGFbOtF/sum50WTB3tvx76d+Aw==
+  dependencies:
+    "@types/warning" "^3.0.0"
+    tslib "^2.0.0"
+    warning "^4.0.3"
+
+"@reach/visually-hidden@0.11.1":
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.11.1.tgz#3d7a5742acf18372f35b9e216680edd8073f35e3"
+  integrity sha512-TZZNSttor2jG6ZPGI35s/8G0FNSz49QrJIhAZbnUqHyPf3+jtNqAC0dOWW8Nuk+mApDDDVYd2KZ9P2vnzllNnQ==
+  dependencies:
+    tslib "^2.0.0"
+
 "@rollup/plugin-node-resolve@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
@@ -1492,6 +1552,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@types/warning@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
+  integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
+
 "@types/webpack-sources@*":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.2.tgz#5d3d4dea04008a779a90135ff96fb5c0c9e6292c"
@@ -7245,6 +7310,11 @@ tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"