Feat/add tooltips

.eslintrc.cjs

@@ -32,6 +32,7 @@ module.exports = {
     'import/no-extraneous-dependencies': 0,
     'react/function-component-definition': 0,
     'no-underscore-dangle': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'sort-imports': ['error', {ignoreCase: true, ignoreDeclarationSort: true}],
     'import/order': [

.github/workflows/main.yml

@@ -5,7 +5,7 @@ on:
     types: [opened, synchronize]
 
 env:
-  NODE_VERSION: 18.16.0
+  NODE_VERSION: 21.5.0
 
 jobs:
   linting:

package.json

@@ -26,7 +26,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-router-dom": "^6.20.1",
-    "toastify-js": "^1.12.0",
+    "react-toastify": "^9.1.3",
     "yup": "^1.3.2"
   },
   "devDependencies": {
@@ -37,8 +37,8 @@
     "@types/node": "^20.10.3",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "@types/toastify-js": "^1.12.3",
     "@types/react-test-renderer": "^18.0.7",
+    "@types/toastify-js": "^1.12.3",
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "@vitejs/plugin-react": "^4.2.0",

src/app/App.tsx

@@ -1,10 +1,20 @@
+import { useEffect } from 'react';
+
 import { RouterProvider } from 'react-router-dom';
 
 import router from '@/router/router';
+import localStorageKeys from '@/shared/constants/localStorageKeys';
+import colorThemeSwitcher from '@/shared/helpers/colorThemeSwitcher';
 import AuthProvider from '@shared/Context/AuthContext';
 import LanguageProvider from '@shared/Context/LanguageContext';
 
 const App = () => {
+  useEffect(() => {
+    const isLightTheme = localStorage.getItem(localStorageKeys.LIGHT_THEME);
+    if (isLightTheme) {
+      colorThemeSwitcher.setLight();
+    }
+  }, []);
   return (
     <AuthProvider>
       <LanguageProvider>

src/components/DocsComp/ui/DocsOverlay.tsx

@@ -13,7 +13,7 @@ type PropsType = {
 };
 
 const DocsOverlay = ({ isShown, setIsDocsShown, explorer, children }: PropsType) => {
-  function closeHandler(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
+  function closeHandler(e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) {
     if ((e.target as HTMLButtonElement).hasAttribute('data-overlay')) {
       setIsDocsShown((prev) => !prev);
       explorer.setInitState();
@@ -23,15 +23,15 @@ const DocsOverlay = ({ isShown, setIsDocsShown, explorer, children }: PropsType)
     return null;
   }
   return (
-    <button
+    <div
       data-testid="overlay"
       data-overlay
-      type="button"
       onClick={(e) => closeHandler(e)}
+      onKeyDown={(e) => closeHandler(e)}
       className="overlay absolute left-0 top-0 z-10 flex h-full w-full justify-start bg-black/60 "
     >
       {children}
-    </button>
+    </div>
   );
 };
 

src/components/DocsComp/ui/DocsRootComp.tsx

@@ -29,7 +29,7 @@ const DocsRootComp = ({ types, explorer }: { types: SchemaTypeObj[]; explorer: D
     <div ref={rootRef} className="h-full">
       <div className="rounded-[24px] bg-surface-container px-10 py-[56px] text-left text-on-surface sm:px-[56px]">
         <h3 className="text-[57px] font-[500]">Docs</h3>
-        <p className="text-md text-left">A GraphQL schema provides a root type for each kind of operation.</p>
+        <p className="text-md mt-10 text-left">A GraphQL schema provides a root type for each kind of operation.</p>
       </div>
       <div className="mt-[56px] p-10 text-left font-[500] sm:px-[56px]">
         <h4 className="text-[28px]">Root types:</h4>

src/components/DocsComp/ui/DocsTypeComp.tsx

@@ -19,9 +19,9 @@ const DocsTypeComp = ({ explorer, currType }: { explorer: DocsExplorerType; curr
       const beforeSeparator = <br />;
       const afterSeparator = i >= field.args.length - 1 ? <br /> : null;
       return (
-        <>
+        <p key={argTypeName.concat(i.toString())} className="inline">
           {separation && beforeSeparator}
-          <span className={separation ? 'pl-3' : ''} key={argTypeName}>
+          <span className={separation ? 'pl-3' : ''}>
             <span className="text-tertiary">{arg.name}</span>:&nbsp;
             {before}
             <a className="text-docs-link-text-color hover:underline" href={link} onClick={(e) => clinkHandler(e, link)}>
@@ -30,7 +30,7 @@ const DocsTypeComp = ({ explorer, currType }: { explorer: DocsExplorerType; curr
             {after}
           </span>
           {separation && afterSeparator}
-        </>
+        </p>
       );
     });
     const returnType = getTypeName(field.type);
@@ -56,7 +56,7 @@ const DocsTypeComp = ({ explorer, currType }: { explorer: DocsExplorerType; curr
   });
   const inputFields = currType?.inputFields?.map((field) => {
     return (
-      <li key={field.name}>
+      <li key={field?.type?.name}>
         {field.name}:&nbsp;
         <a
           className="text-docs-link-text-color hover:underline"

src/components/Header/Header.tsx

@@ -1,16 +1,27 @@
 import { useState } from 'react';
 
+import useLanguage from '@/shared/Context/hooks';
+import Icon from '@/shared/ui/Icon';
+import IconButton from '@/shared/ui/IconButton';
 import DocsComp from '@components/DocsComp/DocsComp';
-import ShowDocsBtn from '@components/Header/ui/ShowDocsBtn';
 
 const Header = () => {
   const [isDocsShown, setIsDocsShown] = useState(false);
+  const { translation } = useLanguage();
+  const docsTooltip = translation.mainLayout.header.tooltips.docs;
   return (
     <>
       <header className="col-span-full flex justify-between">
         <p>Here is still header</p>
         <div>
-          <ShowDocsBtn onClick={() => setIsDocsShown((prev) => !prev)} />
+          <IconButton
+            onClick={() => setIsDocsShown((prev) => !prev)}
+            data-tooltip={docsTooltip}
+            data-testid="show_docs"
+            className="tooltipElem"
+          >
+            <Icon>article</Icon>
+          </IconButton>
         </div>
       </header>
       <DocsComp isShown={isDocsShown} setIsDocsShown={setIsDocsShown} />

src/components/RequestEditor/ui/Controls.tsx

@@ -1,7 +1,9 @@
 import { FC, HTMLAttributes } from 'react';
 
+import { toast } from 'react-toastify';
+
+import useLanguage from '@/shared/Context/hooks';
 import urlParams from '@shared/constants/urlParams';
-import toastifyNotation from '@shared/helpers/toastifyNotation';
 import cn from '@shared/lib/helpers/cn';
 import useScreen from '@shared/lib/hooks/useScreen';
 import useUrl from '@shared/lib/hooks/useUrl';
@@ -18,13 +20,15 @@ type ControlsProps = HTMLAttributes<HTMLUListElement> & {
 const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) => {
   const { readUrl } = useUrl();
   const screenType = useScreen();
+  const { translation } = useLanguage();
+  const { copy, play, prettify, openResp } = translation.mainPage.requestEditor.controlsTooltips;
   const isAnimationsDisabled = screenType === 'tablet' || screenType === 'mobile';
 
   const handleCopyText = async () => {
     const query = readUrl(urlParams.QUERY);
     await navigator.clipboard.writeText(query);
 
-    toastifyNotation('Request copied!');
+    toast(<p className="text-center">Request copied!</p>);
   };
 
   return (
@@ -38,7 +42,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <Fab data-testid="fab" variant="primary">
+        <Fab data-testid="fab" variant="primary" data-tooltip={play} className="tooltipElem">
           <Icon slot="icon">play_arrow</Icon>
         </Fab>
       </li>
@@ -48,7 +52,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="copy-text" onClick={handleCopyText}>
+        <FilledIconButton data-testid="copy-text" onClick={handleCopyText} data-tooltip={copy} className="tooltipElem">
           <Icon>content_copy</Icon>
         </FilledIconButton>
       </li>
@@ -58,7 +62,7 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="prettify">
+        <FilledIconButton data-testid="prettify" data-tooltip={prettify} className="tooltipElem">
           <Icon>mop</Icon>
         </FilledIconButton>
       </li>
@@ -68,7 +72,12 @@ const Controls: FC<ControlsProps> = ({ onResponseOpen, isHidden, className }) =>
           'animate-fade-out-screen': isHidden,
         })}
       >
-        <FilledIconButton data-testid="open-response" onClick={() => onResponseOpen?.((prevState) => !prevState)}>
+        <FilledIconButton
+          data-testid="open-response"
+          onClick={() => onResponseOpen?.((prevState) => !prevState)}
+          data-tooltip={openResp}
+          className="tooltipElem"
+        >
           <Icon>info</Icon>
         </FilledIconButton>
       </li>

src/components/SettingsPageComp/ClearStorageComp.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import useLanguage from '@/shared/Context/hooks';
+import FilledTonalButton from '@/shared/ui/FilledTonalButton';
+
+import ConfirmModal from './ConfirmModal';
+import ConfirmOverlay from './ConfirmOverlay';
+
+const ClearStorageComp = () => {
+  const [isModalShown, setIsModalShown] = useState(false);
+  const { translation } = useLanguage();
+
+  return (
+    <>
+      <div className="mt-6 flex items-center justify-between pb-6">
+        <div className="flex flex-col justify-between">
+          <h4 className="text-[22px]">{translation.settingsPage.clear.title}</h4>
+          <p className="mt-4">{translation.settingsPage.clear.subtitle}</p>
+        </div>
+        <FilledTonalButton data-clear-btn className="text-primary" onClick={() => setIsModalShown((prev) => !prev)}>
+          {translation.settingsPage.clear.btn}
+        </FilledTonalButton>
+      </div>
+      <ConfirmOverlay isShown={isModalShown} setIsShown={setIsModalShown}>
+        <ConfirmModal
+          setIsShown={setIsModalShown}
+          locales={{ ...translation.settingsPage.clear.modal, ...translation.settingsPage.clear.undo }}
+        />
+      </ConfirmOverlay>
+    </>
+  );
+};
+
+export default ClearStorageComp;