Clearing deps + minor fixes

.stylelintrc.json

@@ -3,14 +3,10 @@
     "stylelint-config-standard-scss",
     "stylelint-config-clean-order"
   ],
-  "plugins": [
-    "stylelint-use-nesting"
-  ],
   "rules": {
     "max-nesting-depth": 3,
     "declaration-property-value-no-unknown": true,
     "scss/selector-no-redundant-nesting-selector": true,
-    "csstools/use-nesting": "always",
     "selector-pseudo-class-no-unknown": [
       true,
       {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-proto",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "React TypeScript Boilerplate",
   "author": "Max L Stop&Go",
   "license": "ISC",
@@ -29,11 +29,11 @@
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "@svgr/webpack": "8.1.0",
-    "@swc/core": "1.3.100",
-    "@testing-library/jest-dom": "6.1.5",
+    "@swc/core": "1.3.102",
+    "@testing-library/jest-dom": "6.2.0",
     "@testing-library/preact": "3.2.3",
     "@testing-library/react": "14.1.2",
-    "@testing-library/user-event": "14.5.1",
+    "@testing-library/user-event": "14.5.2",
     "@types/compression": "1.7.5",
     "@types/cookie-parser": "1.4.6",
     "@types/copy-webpack-plugin": "8.0.1",
@@ -42,45 +42,43 @@
     "@types/loadable__component": "5.13.8",
     "@types/loadable__server": "5.12.10",
     "@types/mini-css-extract-plugin": "2.5.0",
-    "@types/node": "20.10.4",
-    "@types/react": "18.2.42",
-    "@types/react-dom": "18.2.17",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.47",
+    "@types/react-dom": "18.2.18",
     "@types/react-helmet": "6.1.11",
     "@types/react-router-dom": "5.3.3",
     "@types/serialize-javascript": "5.0.4",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@types/through": "0.0.33",
     "@types/webpack-bundle-analyzer": "4.6.3",
     "@types/webpack-dev-middleware": "5.0.2",
     "@types/webpack-env": "1.18.4",
     "@types/webpack-hot-middleware": "2.25.9",
     "@types/webpack-node-externals": "3.0.4",
-    "classnames": "2.3.2",
+    "classnames": "2.5.1",
     "copy-webpack-plugin": "11.0.0",
     "cross-env": "7.0.3",
     "css-hot-loader": "1.4.4",
     "css-loader": "6.8.1",
     "csso-webpack-plugin": "2.0.0-beta.3",
     "express": "4.18.2",
     "fork-ts-checker-webpack-plugin": "9.0.2",
-    "html-webpack-plugin": "5.5.4",
+    "html-webpack-plugin": "5.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "mini-css-extract-plugin": "2.7.6",
     "nodemon": "3.0.2",
     "npm-run-all": "4.1.5",
     "null-loader": "4.0.1",
-    "postcss": "8.4.32",
+    "postcss": "8.4.33",
     "postcss-scss": "4.0.9",
-    "prettier": "3.1.0",
+    "prettier": "3.1.1",
     "react-refresh": "0.14.0",
     "rimraf": "5.0.5",
-    "sass": "1.69.5",
-    "sass-loader": "13.3.2",
-    "stylelint": "^15.11.0",
+    "sass": "1.69.7",
+    "sass-loader": "13.3.3",
+    "stylelint": "16.1.0",
     "stylelint-config-clean-order": "5.2.0",
-    "stylelint-config-standard-scss": "11.1.0",
-    "stylelint-use-nesting": "4.1.0",
+    "stylelint-config-standard-scss": "13.0.0",
     "swc-loader": "0.2.3",
     "ts-jest": "29.1.1",
     "ts-loader": "9.5.1",
@@ -92,15 +90,14 @@
     "webpack": "5.89.0",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-cli": "5.1.4",
-    "webpack-dev-middleware": "6.1.1",
+    "webpack-dev-middleware": "7.0.0",
     "webpack-dev-server": "4.15.1",
-    "webpack-hot-middleware": "2.25.4",
-    "webpack-manifest-plugin": "5.0.0",
+    "webpack-hot-middleware": "2.26.0",
     "webpack-node-externals": "3.0.0"
   },
   "dependencies": {
     "@apollo/react-ssr": "4.0.0",
-    "@loadable/server": "5.16.1",
+    "@loadable/server": "5.16.2",
     "@loadable/webpack-plugin": "5.15.2",
     "@reduxjs/toolkit": "2.0.1",
     "@types/loadable__webpack-plugin": "5.7.6",
@@ -112,12 +109,9 @@
     "preact": "10.19.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-helmet": "6.1.0",
-    "react-helmet-async": "2.0.3",
-    "react-redux": "9.0.2",
-    "react-router-dom": "6.20.1",
-    "redux": "5.0.0",
-    "redux-typescript": "1.2.1",
+    "react-helmet-async": "2.0.4",
+    "react-redux": "9.0.4",
+    "react-router-dom": "6.21.1",
     "serialize-javascript": "6.0.1"
   }
 }

src/components/dropdown-selector/DropdownSelector.tsx

@@ -5,13 +5,15 @@ import styles from './dropdownSelector.module.scss'
 interface IDropdownSelector {
   options: string[]
   value: string
+  description?: string
   onChange: (selectedOption: string) => void
   className?: string
 }
 
 const DropdownSelector: FC<IDropdownSelector> = ({
   options,
   value,
+  description,
   onChange,
   className
 }): ReactElement => {
@@ -34,6 +36,7 @@ const DropdownSelector: FC<IDropdownSelector> = ({
       className={cn(styles.selector, className)}
       value={selectedOption}
       onChange={handleOptionChange}
+      aria-label={description}
     >
       {options.map((option) => (
         <option key={option} value={option}>

src/components/language-selector/LanguageSelector.tsx

@@ -14,13 +14,14 @@ interface ILanguageSelector {
 const LanguageSelector: FC<ILanguageSelector> = ({
   className
 }): ReactElement => {
-  const { lang, supportedLangs, setLang } = useTranslations()
+  const { t, lang, supportedLangs, setLang } = useTranslations()
 
   return (
     <DropdownSelector
       className={cn(styles['language-selector'], className)}
       options={Object.values(supportedLangs)}
       value={supportedLangs[lang]}
+      description={t.languageSelectorDescription}
       onChange={(newLang) => setLang(newLang as keyof typeof supportedLangs)}
     />
   )

src/components/page-meta/PageMeta.tsx

@@ -40,7 +40,7 @@ const PageMeta: FC<Props> = (props: Props) => {
       <meta property='og:title' content={title} />
       <meta property='twitter:title' content={title} />
       {/*
-      Helmet supports only valid head tags, so it is inpossibel even
+      Helmet supports only valid head tags, so it is impossible even
       to use root tag <></> for inserting several head tags under one condition
       */}
       {description != null && <meta name='description' content={description} />}

src/i18n/translations/de.json

@@ -17,5 +17,6 @@
     "local": "Lokaler Stand",
     "global": "Globaler Stand"
   },
-  "themeSwitcherDescription": "Themenwechsler"
+  "themeSwitcherDescription": "Themenwechsler",
+  "languageSelectorDescription": "Sprachauswahl"
 }

src/i18n/translations/en.json

@@ -17,5 +17,6 @@
     "local": "Local State",
     "global": "Global State"
   },
-  "themeSwitcherDescription": "Theme switcher"
+  "themeSwitcherDescription": "Theme switcher",
+  "languageSelectorDescription": "Language selector"
 }

src/server/middlewares/apiRequest.ts

@@ -1,9 +1,12 @@
+import { EnhancedStore } from '@reduxjs/toolkit'
 import { pokemonApi } from 'api'
 
-const apiRequest = async (store: any): Promise<any[]> => {
+const apiRequest = async (
+  store: EnhancedStore<any, any, any[]>
+): Promise<any[]> => {
   store.dispatch(pokemonApi.endpoints.getPokemonSpriteById.initiate(1))
 
-  return await Promise.all(
+  return await Promise.all<any>(
     store.dispatch(pokemonApi.util.getRunningQueriesThunk())
   )
 }

src/store/middlewares/persistStateToLocalStorage.ts

@@ -18,29 +18,30 @@ const isAction = (action: unknown): action is Action => {
 
 const persistStateToLocalStorage =
   (
-    ignoreSlices: Array<keyof RootState>,
+    ignoreSlices?: Array<keyof RootState>,
     ignoreSliceActions: boolean = true
   ): Middleware<{}, RootState> =>
     (store) =>
       (next) =>
         (action) => {
           const result = next(action)
-
-          if (
-            isAction(action) &&
-      ignoreSliceActions &&
-      !ignoreSlices.some((el) => action.type.includes(el))
-          ) {
-            localStorage.setItem(
-              localStorageAppKey,
-              JSON.stringify(store.getState(), (key, value) => {
-                if (ignoreSlices.includes(key as keyof RootState)) {
-                  return undefined
-                } else {
-                  return value
-                }
-              })
-            )
+          if (ignoreSlices !== undefined) {
+            if (
+              isAction(action) &&
+        ignoreSliceActions &&
+        !ignoreSlices.some((el) => action.type.includes(el))
+            ) {
+              localStorage.setItem(
+                localStorageAppKey,
+                JSON.stringify(store.getState(), (key, value) => {
+                  if (ignoreSlices.includes(key as keyof RootState)) {
+                    return undefined
+                  } else {
+                    return value
+                  }
+                })
+              )
+            }
           }
 
           return result

src/store/rootReducer.ts

@@ -1,4 +1,4 @@
-import { combineReducers, AnyAction } from '@reduxjs/toolkit'
+import { combineReducers, UnknownAction } from '@reduxjs/toolkit'
 
 import { counterReducer } from './counter/counterSlice'
 import { themeReducer } from './theme/themeSlice'
@@ -18,15 +18,15 @@ export const appReducer = combineReducers(rootReducer)
 
 export const mainReducer: any = (
   state: ReturnType<typeof appReducer>,
-  action: AnyAction
+  action: UnknownAction
 ) => {
   /*
     Global action for whole state hydration.
   */
   if (action?.type === reduxHydrationAction) {
     const nextState = {
       ...state,
-      ...action.payload
+      ...(action.payload as object)
     }
     return nextState
   }

src/store/store.ts

@@ -3,7 +3,7 @@ import {
   Action,
   StateFromReducersMapObject,
   Dispatch,
-  AnyAction,
+  UnknownAction,
   EnhancedStore,
   ThunkDispatch
 } from '@reduxjs/toolkit'
@@ -36,8 +36,9 @@ export type RootState = StateFromReducersMapObject<typeof rootReducer>
 export type AppDispatch = Store['dispatch']
 export type AppThunk = ThunkAction<void, RootState, unknown, Action>
 
-export const useAppDispatch = (): Dispatch<AnyAction> &
-ThunkDispatch<RootState, undefined, AnyAction> => useDispatch<AppDispatch>()
+export const useAppDispatch = (): Dispatch<UnknownAction> &
+ThunkDispatch<RootState, undefined, UnknownAction> =>
+  useDispatch<AppDispatch>()
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
 
 export { initStore }

src/style/common.scss

@@ -33,11 +33,13 @@ body,
 
 @font-face {
   font-family: $secondary-font-family;
+  font-display: swap;
   src: url('/src/assets/fonts/FjallaOne-Regular.ttf');
 }
 
 @font-face {
   font-family: $primary-font-family;
+  font-display: swap;
   src: url('/src/assets/fonts/MerriweatherSans.ttf');
 }