Feat/add settings layout

.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,6 +26,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-router-dom": "^6.20.1",
+    "react-toastify": "^9.1.3",
     "toastify-js": "^1.12.0",
     "yup": "^1.3.2"
   },
@@ -37,8 +38,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,19 @@
+import { useEffect } from 'react';
+
 import { RouterProvider } from 'react-router-dom';
 
 import router from '@/router/router';
+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('graphiQlColorTheme');
+    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,47 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+import FilledTonalButton from '@/shared/ui/FilledTonalButton';
+import Icon from '@/shared/ui/Icon';
+import TextButton from '@/shared/ui/TextButton';
+
+import 'toastify-js/src/toastify.css';
+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;