Merge pull request #51 from suren-atoyan/vite-5

migrate to Vite 5

CHANGELOG.md

@@ -1,5 +1,13 @@
 ### Releases
 
+## v2.2.0
+
+###### _Dec 23, 2023_
+
+- packages: update all packages
+  - Vite 5 ✅
+- replace `Alt + /` with `Alt + k` (there was an issue with detecting `/`)
+
 ## v2.1.0
 
 ###### _Oct 29, 2022_

package.json

@@ -1,6 +1,7 @@
 {
   "name": "react-pwa",
-  "version": "2.1.0",
+  "version": "2.2.0",
+  "type": "module",
   "description": "Starter kit for modern web applications",
   "homepage": "https://react-pwa.surenatoyan.com/",
   "repository": {
@@ -20,41 +21,41 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/lab": "5.0.0-alpha.100",
-    "@mui/material": "^5.10.6",
-    "@mui/system": "^5.10.6",
-    "@mui/utils": "^5.10.6",
-    "is-mobile": "^3.1.1",
-    "notistack": "^2.0.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/lab": "5.0.0-alpha.156",
+    "@mui/material": "^5.15.0",
+    "@mui/system": "^5.15.0",
+    "@mui/utils": "^5.15.0",
+    "is-mobile": "^4.0.0",
+    "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "^3.1.4",
-    "react-helmet-async": "^1.3.0",
-    "react-hotkeys-hook": "^3.4.7",
-    "react-router-dom": "^6.4.1",
-    "recoil": "^0.7.5"
+    "react-error-boundary": "^4.0.11",
+    "react-helmet-async": "^2.0.3",
+    "react-hotkeys-hook": "^4.4.1",
+    "react-router-dom": "^6.21.0",
+    "recoil": "^0.7.7"
   },
   "devDependencies": {
-    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
-    "@types/node": "^18.7.21",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
-    "@vitejs/plugin-react": "^2.1.0",
-    "eslint": "^8.24.0",
-    "eslint-plugin-react": "^7.31.8",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^20.10.4",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "https-localhost": "^4.7.1",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "2.7.1",
-    "typescript": "^4.8.3",
-    "vite": "^3.1.3",
-    "vite-plugin-pwa": "^0.13.1"
+    "husky": "^8.0.3",
+    "lint-staged": "^15.2.0",
+    "prettier": "3.1.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.9",
+    "vite-plugin-pwa": "^0.17.4"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
@@ -74,5 +75,8 @@
     "pwa",
     "starter-kit",
     "vite"
-  ]
+  ],
+  "overrides": {
+    "csstype": "3.1.2"
+  }
 }

src/config/types.ts

@@ -1,7 +1,7 @@
-import type { SnackbarProps } from 'notistack';
+import type { OptionsObject } from 'notistack';
 
 type Notifications = {
-  options: SnackbarProps;
+  options: OptionsObject;
   maxSnack: number;
 };
 

src/sections/Header/Header.tsx

@@ -1,8 +1,6 @@
 import GitHubIcon from '@mui/icons-material/GitHub';
 import ThemeIcon from '@mui/icons-material/InvertColors';
 import MenuIcon from '@mui/icons-material/Menu';
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -34,16 +32,11 @@ function Header() {
         // Usually, to show a notification, you'll use something like this:
         // notificationsActions.push({ message: ... })
         // `message` accepts string as well as ReactNode
-        // But you also can use:
-        // notificationsActions.push({ options: { content: ... } })
-        // to show fully customized notification
-        content: (
-          <Alert severity="info">
-            <AlertTitle>Notification demo (random IT jokes :))</AlertTitle>
-            {getRandomJoke()}
-          </Alert>
-        ),
+        // If you want to show a fully customized notification, you can define
+        // your own `variant`s, see @/sections/Notifications/Notifications.tsx
+        variant: 'customNotification',
       },
+      message: getRandomJoke(),
     });
   }
 
@@ -75,7 +68,7 @@ function Header() {
                   aria-label="open hotkeys dialog"
                   onClick={hotKeysDialogActions.open}
                 >
-                  alt + /
+                  alt + k
                 </HotKeysButton>
               </Tooltip>
             </FlexBox>

src/sections/HotKeys/HotKeys.tsx

@@ -22,7 +22,7 @@ function HotKeys() {
   // There is always a workaround, but sometimes it's better to avoid premature and unnecessary optimizations :)
   useHotkeys('alt+s', sidebarActions.toggle);
   useHotkeys('alt+t', themeActions.toggle);
-  useHotkeys('alt+/', hotKeysDialogActions.toggle);
+  useHotkeys('alt+k', hotKeysDialogActions.toggle);
 
   return (
     <Dialog fullWidth maxWidth="xs" onClose={hotKeysDialogActions.close} open={isHotKeysDialogOpen}>
@@ -43,7 +43,7 @@ function HotKeys() {
         <FlexBox alignItems="center" height={50} justifyContent="space-between">
           <Typography>Toggle Hot Keys&apos; Dialog</Typography>
           <Button color="warning" variant="outlined" onClick={hotKeysDialogActions.toggle}>
-            alt + /
+            alt + k
           </Button>
         </FlexBox>
       </DialogContent>

src/sections/Notifications/Notifications.tsx

@@ -1,12 +1,34 @@
-import { SnackbarProvider } from 'notistack';
+import { CustomContentProps, SnackbarProvider } from 'notistack';
 
 import { notifications } from '@/config';
 
 import Notifier from './Notifier';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import { Ref, forwardRef } from 'react';
+
+// here how you can define your own notification component
+
+const CustomNotification = forwardRef(function CustomNotification(
+  { message }: CustomContentProps,
+  ref: Ref<HTMLDivElement>,
+) {
+  return (
+    <Alert ref={ref} severity="info">
+      <AlertTitle>Notification demo (random IT jokes :))</AlertTitle>
+      {message}
+    </Alert>
+  );
+});
 
 function Notifications() {
   return (
-    <SnackbarProvider maxSnack={notifications.maxSnack}>
+    <SnackbarProvider
+      maxSnack={notifications.maxSnack}
+      Components={{
+        customNotification: CustomNotification,
+      }}
+    >
       <Notifier />
     </SnackbarProvider>
   );

src/store/notifications/types.ts

@@ -6,6 +6,15 @@ interface Notification {
   dismissed: boolean;
 }
 
+declare module 'notistack' {
+  export interface VariantOverrides {
+    // define custom variants
+    customNotification: {
+      message?: string;
+    };
+  }
+}
+
 type Actions = {
   push: (notification: Partial<Notification>) => SnackbarKey;
   close: (key: SnackbarKey, dismissAll?: boolean) => void;

tsconfig.json

@@ -16,9 +16,7 @@
     "noEmit": true,
     "jsx": "react-jsx",
     "baseUrl": "./",
-    "types": [
-      "vite-plugin-pwa/client",
-    ],
+    "types": ["vite-plugin-pwa/client"],
     "paths": {
       "@/*": ["src/*"]
     }