chore: resolve merge conflict

.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:

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/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;

src/components/SettingsPageComp/ClearUndo.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+type UndoPropsType = {
+  closeToast: () => void;
+  title: string;
+  btn: string;
+};
+
+const ClearUndo = (props: UndoPropsType) => {
+  const { closeToast, title, btn } = props;
+  const [deleteDataTimeout, setDeleteDataTimeout] = useState(null as unknown as NodeJS.Timeout);
+
+  const dataClearance = () => {
+    localStorage.clear();
+  };
+
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      dataClearance();
+    }, 2000);
+
+    setDeleteDataTimeout(timeoutId);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  const handleClick = () => {
+    clearTimeout(deleteDataTimeout);
+    closeToast();
+  };
+
+  return (
+    <div className="flex items-center justify-around text-sm">
+      <p className="font-[400] text-inverse-on-surface">{title}</p>
+      <button className="font-[500] text-inverse-primary" type="button" onClick={handleClick}>
+        {btn}
+      </button>
+    </div>
+  );
+};
+
+export default ClearUndo;

src/components/SettingsPageComp/ConfirmModal.tsx

@@ -0,0 +1,45 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+
+import { toast } from 'react-toastify';
+
+import FilledTonalButton from '@/shared/ui/FilledTonalButton';
+import Icon from '@/shared/ui/Icon';
+import TextButton from '@/shared/ui/TextButton';
+
+import ClearUndo from './ClearUndo';
+
+type PropsType = {
+  setIsShown: Dispatch<SetStateAction<boolean>>;
+  locales: {
+    title: string;
+    subtitle: string;
+    cancel: string;
+    confirm: string;
+    undoTitle: string;
+    cancelBtn: string;
+  };
+};
+
+const ConfirmModal: FC<PropsType> = ({ setIsShown, locales }) => {
+  const { title, subtitle, cancel, confirm, undoTitle, cancelBtn } = locales;
+  return (
+    <div className="w-[312px] rounded-4xl bg-surface-container-high p-6 text-center font-[500] text-on-surface">
+      <Icon>delete</Icon>
+      <h3 className="mt-4 text-2xl">{title}</h3>
+      <p className="mt-4 text-start text-sm text-on-surface-variant">{subtitle}</p>
+      <div className="mt-6 flex justify-end gap-2">
+        <TextButton onClick={() => setIsShown((prev) => !prev)}>{cancel}</TextButton>
+        <FilledTonalButton
+          onClick={() => {
+            toast(<ClearUndo closeToast={() => {}} title={undoTitle} btn={cancelBtn} />);
+            setIsShown((prev) => !prev);
+          }}
+        >
+          {confirm}
+        </FilledTonalButton>
+      </div>
+    </div>
+  );
+};
+
+export default ConfirmModal;

src/components/SettingsPageComp/ConfirmOverlay.tsx

@@ -0,0 +1,29 @@
+type PropsType = {
+  setIsShown: React.Dispatch<React.SetStateAction<boolean>>;
+  isShown: boolean;
+  children: JSX.Element;
+};
+
+const ConfirmOverlay = ({ isShown, setIsShown, children }: PropsType) => {
+  function closeHandler(e: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) {
+    if ((e.target as HTMLButtonElement).hasAttribute('data-overlay')) {
+      setIsShown((prev) => !prev);
+    }
+  }
+  if (!isShown) {
+    return null;
+  }
+  return (
+    <div
+      data-testid="overlay"
+      data-overlay
+      onClick={(e) => closeHandler(e)}
+      onKeyDown={(e) => closeHandler(e)}
+      className="overlay absolute left-0 top-0 z-10 flex h-full w-full items-center justify-center bg-black/60"
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ConfirmOverlay;

src/components/SettingsPageComp/DarkModeComp.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+
+import localStorageKeys from '@/shared/constants/localStorageKeys';
+import useLanguage from '@/shared/Context/hooks';
+import colorThemeSwitcher from '@/shared/helpers/colorThemeSwitcher';
+import Switch from '@/shared/ui/Switch';
+
+const DarkModeComp = () => {
+  const { translation } = useLanguage();
+  const [isDarkMode, setIsDarkMode] = useState(() => !localStorage.getItem(localStorageKeys.LIGHT_THEME));
+
+  function handleThemeSwitch() {
+    if (isDarkMode) {
+      colorThemeSwitcher.setLight();
+    } else {
+      colorThemeSwitcher.setDark();
+    }
+    setIsDarkMode((prev) => !prev);
+  }
+  return (
+    <div className="mt-6 flex items-center justify-between border-b-[1px] border-outline-variant pb-6">
+      <div className="flex flex-col justify-between">
+        <h4 className="text-[22px]">{translation.settingsPage.mode.title}</h4>
+        <p className="mt-4">{translation.settingsPage.mode.subtitle}</p>
+      </div>
+      <Switch selected={isDarkMode} onClick={() => handleThemeSwitch()} data-testid="themeSwitcher" />
+    </div>
+  );
+};
+
+export default DarkModeComp;

src/components/SettingsPageComp/EndpointComp.tsx

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+
+import useLanguage from '@/shared/Context/hooks';
+import FilledTextField from '@/shared/ui/FilledTextField';
+import Icon from '@/shared/ui/Icon';
+import IconButton from '@/shared/ui/IconButton';
+
+type PropsType = {
+  endpoint: string;
+  saveEndpoint: (value: string) => void;
+};
+
+const EndpointComp: FC<PropsType> = ({ endpoint, saveEndpoint }) => {
+  const { translation } = useLanguage();
+  return (
+    <div className="mt-6 flex items-center justify-between border-b-[1px] border-outline-variant pb-6">
+      <div className="flex flex-col justify-between">
+        <h4 className="text-[22px]">{translation.settingsPage.endpoint.title}</h4>
+        <p className="mt-4">{translation.settingsPage.endpoint.subtitle}</p>
+      </div>
+      <FilledTextField
+        className="relative h-[68px] w-[360px] text-base"
+        label="API endpoint"
+        value={endpoint}
+        name="endpoint"
+        onChange={(e) => saveEndpoint((e?.target as HTMLInputElement).value)}
+      >
+        <IconButton className="absolute right-0 top-[10px]" slot="trailing-icon" onClick={() => saveEndpoint('')}>
+          <Icon>cancel</Icon>
+        </IconButton>
+      </FilledTextField>
+    </div>
+  );
+};
+
+export default EndpointComp;

src/components/SettingsPageComp/LangBtns.tsx

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+
+import cn from '@/shared/lib/helpers/cn';
+import Icon from '@/shared/ui/Icon';
+
+type PropsType = {
+  language: string;
+  changeLanguage: (lang: 'en' | 'ru') => void;
+};
+
+const LangBtns: FC<PropsType> = ({ language, changeLanguage }) => {
+  const isEnglish = language === 'en';
+
+  return (
+    <>
+      <button
+        onClick={() => changeLanguage('en')}
+        type="button"
+        className={cn(
+          'flex w-[104px] items-center justify-center gap-[10px] rounded-l-3xl border border-outline transition-all duration-200 hover:bg-outline-variant',
+          {
+            'bg-secondary-container': isEnglish,
+          },
+        )}
+      >
+        {isEnglish && <Icon>check</Icon>}English
+      </button>
+      <button
+        type="button"
+        className={cn(
+          'flex w-[104px] items-center justify-center gap-[10px] rounded-r-3xl border-[1px] border-outline transition-all duration-200 hover:bg-outline-variant',
+          {
+            'bg-secondary-container': !isEnglish,
+          },
+        )}
+        onClick={() => changeLanguage('ru')}
+      >
+        Русский{!isEnglish && <Icon>check</Icon>}
+      </button>
+    </>
+  );
+};
+
+export default LangBtns;