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');
 }