Upgrade dependencies

Kreozot · Sep 17, 2022 · c9bca12 · c9bca12
1 parent e450057
commit c9bca12
Show file tree

Hide file tree

Showing 24 changed files with 10,384 additions and 12,165 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=Kreozot_dnd5e-spells&metric=alert_status)](https://sonarcloud.io/dashboard?id=Kreozot_dnd5e-spells)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/054e9432-0f59-428d-ba3c-6d5e4d533167/deploy-status)](https://app.netlify.com/sites/dnd5e/deploys)
 
 # D&D 5e Interactive Spell List
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,54 +22,54 @@
     "*.{js,jsx}": "eslint"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/material": "^5.10.5",
     "@reduxjs/toolkit": "^1.8.5",
-    "@sentry/apm": "^5.21.3",
-    "@sentry/react": "^5.21.3",
-    "ava": "^3.11.0",
-    "gatsby": "^3.14.6",
+    "@sentry/apm": "^5.27.1",
+    "@sentry/react": "^7.13.0",
+    "ava": "^4.3.3",
+    "gatsby": "^4.23.0",
     "gatsby-image": "^3.11.0",
-    "gatsby-plugin-manifest": "^3.14.0",
-    "gatsby-plugin-material-ui": "^3.0.1",
-    "gatsby-plugin-minify-classnames": "^0.3.1",
-    "gatsby-plugin-offline": "^4.14.0",
-    "gatsby-plugin-react-helmet": "^4.14.0",
+    "gatsby-plugin-manifest": "^4.23.0",
+    "gatsby-plugin-material-ui": "^4.1.0",
+    "gatsby-plugin-minify-classnames": "^4.1.3",
+    "gatsby-plugin-offline": "^5.23.0",
+    "gatsby-plugin-react-helmet": "^5.23.0",
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-resolve-src": "^2.1.0",
-    "gatsby-plugin-sass": "^4.14.0",
-    "gatsby-plugin-sharp": "^3.14.3",
-    "gatsby-source-filesystem": "^3.14.0",
-    "gatsby-transformer-sharp": "^3.14.0",
+    "gatsby-plugin-sass": "^5.23.0",
+    "gatsby-plugin-sharp": "^4.23.0",
+    "gatsby-source-filesystem": "^4.23.0",
+    "gatsby-transformer-sharp": "^4.23.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.11",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.1.7",
-    "sass": "^1.54.5",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-redux": "^8.0.2",
     "react-table": "^7.8.0",
     "react-tippy": "^1.4.0",
     "redux-persist": "^6.0.0",
     "reselect": "^4.1.6",
-    "typograf": "^6.14.1",
+    "sass": "^1.54.9",
+    "typograf": "^6.15.0",
     "use-trace-update": "^1.3.2",
     "validate.js": "^0.13.1"
   },
   "devDependencies": {
-    "@types/node": "^18.7.9",
-    "@types/react": "^18.0.17",
+    "@types/node": "^18.7.18",
+    "@types/react": "^18.0.20",
     "@types/react-dom": "^18.0.6",
     "@types/react-helmet": "^6.1.5",
     "@types/react-table": "^7.7.12",
     "eslint-config-react-app": "^5.2.1",
-    "gatsby-plugin-typescript": "^4.22.0",
+    "gatsby-plugin-typescript": "^4.23.0",
     "gatsby-plugin-typescript-checker": "^1.1.1",
     "prettier": "2.0.5",
-    "typescript": "^4.7.4"
+    "typescript": "^4.8.3"
   },
   "keywords": [
     "gatsby"

diff --git a/src/common/store/chosenSpellsSlice.ts b/src/common/store/chosenSpellsSlice.ts
@@ -8,10 +8,10 @@ type ChosenSpellsSlice = {
 
 export default createSlice({
   name: 'chosenSpells',
-  initialState: <ChosenSpellsSlice>{
+  initialState: {
     spells: [],
     cantrips: []
-  },
+  } as ChosenSpellsSlice,
   reducers: {
     toggleSpellChosen(state, action: PayloadAction<{title: string, isSpellChosen: boolean}>): ChosenSpellsSlice {
       const { title, isSpellChosen } = action.payload;

diff --git a/src/common/store/filtersSlice.ts b/src/common/store/filtersSlice.ts
@@ -17,14 +17,14 @@ export type FiltersSlice = {
 
 export default createSlice({
   name: 'filters',
-  initialState: <FiltersSlice>{
+  initialState: {
     spellsFilter: SpellsFilterOptions.All,
     titleFilter: '',
     currentLevel: undefined,
     class: undefined,
     classAdditional: undefined,
     spellcastingAbilityValue: undefined,
-  },
+  } as FiltersSlice,
   reducers: {
     setSpellsFilter(state, action: PayloadAction<SpellsFilter>): FiltersSlice {
       return {

diff --git a/src/common/store/spellsLevelsSlice.ts b/src/common/store/spellsLevelsSlice.ts
@@ -8,7 +8,7 @@ type SpellsLevelSlice = {
 
 export default createSlice({
   name: 'spellsLevelsSlice',
-  initialState: <SpellsLevelSlice>{},
+  initialState: {} as SpellsLevelSlice,
   reducers: {
     chooseSpellLevel(state, action: PayloadAction<{ item: Spell, level: number }>): SpellsLevelSlice {
       const { item, level } = action.payload;

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -6,18 +6,40 @@
  */
 
 import React, { FC, PropsWithChildren } from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
 
 import SEO from './SEO';
 
 import './Layout.scss';
 import 'react-tippy/dist/tippy.css';
 
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+  },
+  components: {
+    MuiFormControl: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
+  },
+});
+
 const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
-    <>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
       <SEO />
       { children }
-    </>
+    </ThemeProvider>
   )
 }
 

diff --git a/src/components/Spells/FiltersBlock/ClassAdditionalSelector/ClassAdditionalSelector.tsx b/src/components/Spells/FiltersBlock/ClassAdditionalSelector/ClassAdditionalSelector.tsx
@@ -1,8 +1,8 @@
-import React, { ChangeEventHandler, FC, useCallback } from 'react';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
+import React, { FC, useCallback } from 'react';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
 import { bindActionCreators } from 'redux';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -18,8 +18,8 @@ const ClassAdditionalSelector: FC<ReduxProps> = (props) => {
     additionalKey,
   } = props;
 
-  const handleAdditionalChange = useCallback<ChangeEventHandler<{ name?: string; value: unknown; }>>((event) => {
-    setClassAdditional(event.target.value as string || undefined);
+  const handleAdditionalChange = useCallback((event: SelectChangeEvent<string>) => {
+    setClassAdditional(event.target.value || undefined);
   }, [setClassAdditional]);
 
   if (additionalOptions) {
@@ -30,6 +30,7 @@ const ClassAdditionalSelector: FC<ReduxProps> = (props) => {
           labelId="class-select-label"
           value={ classAdditionalFilter || '' }
           onChange={ handleAdditionalChange }
+          label={ additionalKey }
           className={ styles.classFilterSelect }
         >
           <MenuItem value="">

diff --git a/src/components/Spells/FiltersBlock/ClassFilterSelector/ClassFilterSelector.tsx b/src/components/Spells/FiltersBlock/ClassFilterSelector/ClassFilterSelector.tsx
@@ -1,8 +1,8 @@
-import React, { ChangeEventHandler, FC, useCallback } from 'react';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
+import React, { FC, useCallback } from 'react';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputLabel from '@mui/material/InputLabel';
+import FormControl from '@mui/material/FormControl';
 import { bindActionCreators } from 'redux';
 import { connect, ConnectedProps } from 'react-redux';
 
@@ -17,7 +17,7 @@ const ClassFilterSelector: FC<ReduxProps> = (props) => {
     clearChosenSpells,
   } = props;
 
-  const handleClassChange = useCallback<ChangeEventHandler<{ name?: string; value: unknown; }>>((event) => {
+  const handleClassChange = useCallback((event: SelectChangeEvent<string>) => {
     setClass(event.target.value as Class || undefined);
     clearChosenSpells();
   }, [setClass, clearChosenSpells]);
@@ -29,6 +29,7 @@ const ClassFilterSelector: FC<ReduxProps> = (props) => {
         labelId="class-select-label"
         value={ classFilter || '' }
         onChange={ handleClassChange }
+        label="Class"
         className={ styles.classFilterSelect }
       >
         <MenuItem value="">

diff --git a/src/components/Spells/FiltersBlock/CurrentLevelSelector/CurrentLevelSelector.tsx b/src/components/Spells/FiltersBlock/CurrentLevelSelector/CurrentLevelSelector.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, FC, useCallback, useState } from 'react';
-import TextField from '@material-ui/core/TextField';
+import TextField from '@mui/material/TextField';
 import { bindActionCreators } from 'redux';
 import { connect, ConnectedProps } from 'react-redux';
 import debounce from 'lodash/debounce';

diff --git a/src/components/Spells/FiltersBlock/FiltersBlock.module.scss b/src/components/Spells/FiltersBlock/FiltersBlock.module.scss
@@ -14,8 +14,17 @@
   max-width: 130px;
 }
 
-.knownSpellsCount {
-  max-width: 90px;
+.knownSpellsCount,
+.spellSaveDC {
+  max-width: 100px;
+}
+
+.knownCantripsCount {
+  max-width: 110px;
+}
+
+.spellAttackModifier {
+  max-width: 140px;
 }
 
 .knownSpellsCountLabel {

diff --git a/src/components/Spells/FiltersBlock/KnownCantripsCount/KnownCantripsCount.tsx b/src/components/Spells/FiltersBlock/KnownCantripsCount/KnownCantripsCount.tsx
@@ -1,14 +1,12 @@
 import React, { FC } from 'react';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
 import { connect, ConnectedProps } from 'react-redux';
 
 import {
   getKnownCantripsCount, State,
 } from 'common/store';
 
 import * as styles from '../FiltersBlock.module.scss';
+import { TextField } from '@mui/material';
 
 const KnownCantripsCount: FC<ReduxProps> = (props) => {
   const {
@@ -21,19 +19,16 @@ const KnownCantripsCount: FC<ReduxProps> = (props) => {
   }
 
   return (
-    <FormControl className={ styles.field }>
-      <InputLabel
-        id="known-cantrips-count-label"
-        className={ styles.knownSpellsCountLabel }
-      >
-        Known cantrips
-      </InputLabel>
-      <Input
+    <div className={ styles.field }>
+      <TextField
+        label="Known cantrips"
         value={ `${activeCantripsCount} / ${knownCantripsCount}` }
-        className={ styles.knownSpellsCount }
-        disabled
+        className={ styles.knownCantripsCount }
+        InputProps={{
+          disabled: true
+        }}
       />
-    </FormControl>
+    </div>
   );
 }
 

diff --git a/src/components/Spells/FiltersBlock/KnownSpellsCount/KnownSpellsCount.tsx b/src/components/Spells/FiltersBlock/KnownSpellsCount/KnownSpellsCount.tsx
@@ -1,14 +1,12 @@
 import React, { FC } from 'react';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
 import { connect, ConnectedProps } from 'react-redux';
 
 import {
   getKnownSpellsCount, State,
 } from 'common/store';
 
 import * as styles from '../FiltersBlock.module.scss';
+import { TextField } from '@mui/material';
 
 const KnownSpellsCount: FC<ReduxProps> = (props) => {
   const {
@@ -21,19 +19,16 @@ const KnownSpellsCount: FC<ReduxProps> = (props) => {
   }
 
   return (
-    <FormControl className={ styles.field }>
-      <InputLabel
-        id="known-spells-count-label"
-        className={ styles.knownSpellsCountLabel }
-      >
-        Known spells
-      </InputLabel>
-      <Input
+    <div className={ styles.field }>
+      <TextField
+        label="Known spells"
         value={ `${activeSpellsCount} / ${knownSpellsCount}` }
         className={ styles.knownSpellsCount }
-        disabled
+        InputProps={{
+          disabled: true
+        }}
       />
-    </FormControl>
+    </div>
   );
 }
 

diff --git a/src/components/Spells/FiltersBlock/SpellAttackModifier/SpellAttackModifier.tsx b/src/components/Spells/FiltersBlock/SpellAttackModifier/SpellAttackModifier.tsx
@@ -1,14 +1,12 @@
 import React, { FC } from 'react';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import FormControl from '@material-ui/core/FormControl';
 import { connect, ConnectedProps } from 'react-redux';
 
 import {
   getSpellAttackModifier, State,
 } from 'common/store';
 
 import * as styles from '../FiltersBlock.module.scss';
+import { TextField } from '@mui/material';
 
 const SpellAttackModifier: FC<ReduxProps> = (props) => {
   const {
@@ -20,19 +18,16 @@ const SpellAttackModifier: FC<ReduxProps> = (props) => {
   }
 
   return (
-    <FormControl className={ styles.field }>
-      <InputLabel
-        id="spell-attack-modifier-label"
-        className={ styles.knownSpellsCountLabel }
-      >
-        Spell attack modifier
-      </InputLabel>
-      <Input
+    <div className={ styles.field }>
+      <TextField
+        label="Spell attack modifier"
         value={ spellAttackModifier }
-        className={ styles.knownSpellsCount }
-        disabled
+        className={ styles.spellAttackModifier }
+        InputProps={{
+          disabled: true
+        }}
       />
-    </FormControl>
+    </div>
   );
 }