Merge pull request #479 from mg3-codes/react19

Major package upgrades

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 # Changelog
 
+## 0.5.6
+-   Upgrade to React 19
+-   Upgrade to AG Grid 33
+-   Upgrade to Vite 6
+
 ## 0.5.5
 -   Upgrade packages
 -   Switch to css & lightningcss

index.html

@@ -9,8 +9,6 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" />
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
 		integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.3.3/styles/ag-grid.css" />
-	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@32.3.3/styles/ag-theme-quartz.css" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>D&D Spell Finder</title>
 </head>

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "dnd-spell-organizer",
 	"license": "MIT",
-	"version": "0.5.5",
+	"version": "0.5.6",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
@@ -15,32 +15,31 @@
 		"outdated": "yarn upgrade-interactive"
 	},
 	"dependencies": {
-		"@ag-grid-community/client-side-row-model": "^32.3.3",
-		"@ag-grid-community/core": "^32.3.3",
-		"@ag-grid-community/react": "^32.3.3",
 		"@popperjs/core": "^2.11.8",
 		"@rollbar/react": "^0.12.0-beta",
-		"ag-grid-community": "^32.3.3",
+		"ag-grid-community": "^33.0.1",
+		"ag-grid-react": "^33.0.1",
 		"path": "^0.12.7",
-		"react": "^18.3.1",
+		"react": "^19.0.0",
 		"react-bootstrap": "^2.10.6",
-		"react-dom": "^18.3.1",
-		"react-router-dom": "^6.28.0",
+		"react-dom": "^19.0.0",
+		"react-router": "^7.0.2",
 		"rollbar": "^2.26.4"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
-		"@swc/core": "1.10.0",
+		"@swc/core": "1.10.1",
 		"@swc/helpers": "^0.5.15",
 		"@types/mocha": "^10.0.10",
-		"@types/node": "^22.10.1",
-		"@types/react": "18.3.14",
-		"@types/react-dom": "^18.3.2",
+		"@types/node": "^22.10.2",
+		"@types/react": "19.0.1",
+		"@types/react-dom": "^19.0.2",
+		"@types/react-router": "^5.1.20",
 		"@vitejs/plugin-react-swc": "^3.7.2",
 		"cypress": "^13.16.1",
 		"lightningcss": "^1.28.2",
 		"typescript": "^5.7.2",
-		"vite": "5.4.11"
+		"vite": "6.0.3"
 	},
 	"packageManager": "yarn@3.5.1"
 }

src/components/export-page/index.tsx

@@ -6,7 +6,7 @@
 
 import { useCallback, useContext, useEffect, useMemo } from "react";
 import Alert from "react-bootstrap/Alert";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from "react-router";
 
 import { Theme } from "../../enums/theme";
 import { PrintCard } from "../print-card";
@@ -60,12 +60,12 @@ const ExportPage = () => {
 	// biome-ignore lint/correctness/useExhaustiveDependencies(getColumnClassName): this should only execute on page load
 	// biome-ignore lint/correctness/useExhaustiveDependencies(queryParams.get): this should only execute on page load
 	const generatedCards = useMemo(() => {
-		const elements: JSX.Element[] = [];
+		const elements: React.ReactNode[] = [];
 		const numColumns = Number.parseInt(queryParams.get("numPerRow") ?? "3");
 		const rowsPerPage = 2;
 		let counter = 0;
 		while (counter <= selectedRows.length) {
-			const pageElements: JSX.Element[][] = [];
+			const pageElements: React.ReactNode[] = [];
 			for (let i = 0; i < rowsPerPage; i++) {
 				const rowSlice = selectedRows.slice(
 					i * numColumns + counter,

src/components/filters/area-filter/area-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/attack-filter/attack-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/boolean-filter/boolean-filter.tsx

@@ -4,11 +4,8 @@
  * @format
  */
 
-import type { RowNode } from "@ag-grid-community/core";
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import type { RowNode } from "ag-grid-community";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/casting-time-filter/casting-time-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/damage-type-filter/damage-type-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/duration-filter/duration-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/effect-filter/effect-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/level-filter/level-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/range-filter/range-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/saving-throw-filter/saving-throw-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/school-filter/school-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/filters/source-filter/source-filter.tsx

@@ -4,10 +4,7 @@
  * @format
  */
 
-import {
-	type CustomFilterProps,
-	useGridFilter,
-} from "@ag-grid-community/react";
+import { type CustomFilterProps, useGridFilter } from "ag-grid-react";
 import { useRollbar } from "@rollbar/react";
 import type React from "react";
 import {

src/components/footer/index.tsx

@@ -61,7 +61,7 @@ const Footer = () => {
 
 	return (
 		<div className="footer">
-			<span className="version">Version: 0.5.5</span>
+			<span className="version">Version: 0.5.6</span>
 			<div className="links">
 				<Button variant="link" onClick={openHelpModal}>
 					Help

src/components/heading/index.tsx

@@ -6,7 +6,7 @@
 
 import React, { useCallback, useContext, useState } from "react";
 import Button from "react-bootstrap/Button";
-import { Link, useLocation } from "react-router-dom";
+import { Link, useLocation } from "react-router";
 
 import { SelectedRowContext } from "../selected-row-context-provider";
 

src/components/index-page/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import React, { Suspense, useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams } from "react-router";
 
 const Heading = React.lazy(() => import("../heading"));
 const LoadingSpinner = React.lazy(() => import("../loading-spinner"));

src/components/not-found-page/index.tsx

@@ -4,7 +4,7 @@
  * @format
  */
 
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import "./styles.css";
 

src/components/numbered-dice-selector/index.tsx

@@ -21,7 +21,7 @@ export interface INumberedDiceSelectorProps {
 
 export const NumberedDiceSelector = ({
 	onRollClicked,
-}: INumberedDiceSelectorProps): JSX.Element => {
+}: INumberedDiceSelectorProps): React.ReactElement => {
 	const [twoSidedInputValue, setTwoSidedInputValue] = useState<string>("0");
 	const [fourSidedInputValue, setFourSidedInputValue] = useState<string>("0");
 	const [sixSidedInputValue, setSixSidedInputValue] = useState<string>("0");

src/components/page-wrapper/index.tsx

@@ -17,7 +17,7 @@ export interface IPageWrapperProps {
 	children: React.ReactNode;
 }
 
-const PageWrapper = ({ children }: IPageWrapperProps): JSX.Element => {
+const PageWrapper = ({ children }: IPageWrapperProps): React.ReactElement => {
 	const { currentTheme } = useContext(ThemeContext);
 
 	useLayoutEffect(() => {

src/components/print-modal/index.tsx

@@ -18,7 +18,7 @@ import Button from "react-bootstrap/Button";
 import Carousel from "react-bootstrap/Carousel";
 import Dropdown from "react-bootstrap/Dropdown";
 import Modal from "react-bootstrap/Modal";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { PrintCard } from "../print-card";
 import { ThemeContext } from "../theme-context-provider";
@@ -34,7 +34,11 @@ export interface IPrintModalProps {
 	rows?: TableRow[];
 }
 
-const PrintModal = ({ isOpen, toggleIsOpen, rows }: IPrintModalProps) => {
+const PrintModal = ({
+	isOpen,
+	toggleIsOpen,
+	rows,
+}: IPrintModalProps): React.ReactElement => {
 	const [selectedNumberPerRow, setSelectedNumberPerRow] = useState<number>(3);
 	const [printError, setPrintError] = useState<boolean>(false);
 	const { currentTheme } = useContext(ThemeContext);

src/components/roll-history-modal/index.tsx

@@ -57,7 +57,7 @@ export const RollHistoryModal = ({
 		[],
 	);
 
-	const getPages = (): JSX.Element[] => {
+	const getPages = (): React.ReactElement[] => {
 		const pages = [];
 
 		for (let i = 0; i < currentHistory.length; i++) {

src/components/settings-offcanvas/index.tsx

@@ -28,7 +28,7 @@ import { ThemeContext } from "../theme-context-provider";
 
 import "./styles.css";
 
-const SettingsOffcanvas = (): JSX.Element => {
+const SettingsOffcanvas = (): React.ReactElement => {
 	const [show, setShow] = useState<boolean>(false);
 	const { useCookies, setUseCookies } = useContext(AppSettingsContext);
 	const { updateTheme, selectedThemeOption } = useContext(ThemeContext);