Migrate to Blueprint 5

Author: alex-c

README.md

@@ -1,6 +1,6 @@
 # Blueprint Datagrid
 
-Blueprint Datagrid is an enhanced table component for [Blueprint 4](https://blueprintjs.com/). It adds features like paging, sorting and filtering to basic Blueprint tables. Blueprint Datagrid is built with Blueprint components and styling and stays faithful to the look-and-feel of the library in both dark and light mode. It supports and is written in Typescript.
+Blueprint Datagrid is an enhanced table component for [Blueprint 5](https://blueprintjs.com/). It adds features like paging, sorting and filtering to basic Blueprint tables. Blueprint Datagrid is built with Blueprint components and styling and stays faithful to the look-and-feel of the library in both dark and light mode. It supports and is written in Typescript.
 
 Documentation and examples can be found on the project's [Github Page](https://alex-c.github.io/blueprint-datagrid/)!
 

docs/README.md

@@ -9,6 +9,7 @@ To run:
 
 You might need to link the docs app's React to the parent project's React with `npm link`:
 
+- Build the library with `npm run build`
 - Navigate to the docs app's `node_modules/react`
 - Execute `npm link`
 - Navigate to the parent project's main directory

docs/package-lock.json

@@ -4,18 +4,17 @@
   "private": true,
   "homepage": "https://alex-c.github.io/blueprint-datagrid/",
   "dependencies": {
-    "@blueprintjs/core": "^4.14.3",
-    "@blueprintjs/icons": "~4.12.2",
-    "@blueprintjs/popover2": "^1.11.3",
-    "@blueprintjs/select": "^4.8.16",
-    "@reduxjs/toolkit": "^1.8.2",
-    "@types/node": "^17.0.35",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@blueprintjs/core": "^5.0.0",
+    "@blueprintjs/icons": "^5.0.0",
+    "@blueprintjs/select": "^5.0.0",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "blueprint-datagrid": "file:..",
     "highlight.js": "^11.7.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-redux": "^8.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",

docs/package.json

@@ -11,7 +11,7 @@ const initialState = {
 };
 
 const setDarModeActive = (isDarkModeActive: boolean) => {
-  document.body.className = isDarkModeActive ? "bp4-dark" : "bp4-body";
+  document.body.className = isDarkModeActive ? "bp5-dark" : "bp5-body";
 };
 setDarModeActive(initialState.isDarkModeActive);
 
@@ -25,7 +25,6 @@ export const appSlice = createSlice({
       state.isDarkModeActive = action.payload;
     },
   },
-  extraReducers: {},
 });
 
 export const appReducer = appSlice.reducer;

docs/src/app-slice.ts

@@ -1,6 +1,5 @@
-import { Button } from "@blueprintjs/core";
+import { Button, Tooltip } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
-import { Tooltip2 } from "@blueprintjs/popover2";
 import { useState } from "react";
 import { CodeBlock } from "./code-block";
 import "./example.scss";
@@ -17,9 +16,9 @@ export const Example = (props: ExampleProps) => {
   return (
     <div className="example">
       <div className="example-controls">
-        <Tooltip2 content={showCode ? "Show example" : "Show code"}>
+        <Tooltip content={showCode ? "Show example" : "Show code"}>
           <Button icon={showCode ? IconNames.PANEL_TABLE : IconNames.CODE} onClick={() => setShowCode(!showCode)} />
-        </Tooltip2>
+        </Tooltip>
       </div>
       {showCode ? <CodeBlock code={props.code} /> : <div className="example-table">{props.children}</div>}
     </div>

docs/src/components/example.tsx

@@ -13,7 +13,6 @@ export const varietySlice = createSlice({
   name: "varieties",
   initialState,
   reducers: {},
-  extraReducers: {},
 });
 
 export const varietyReducer = varietySlice.reducer;

docs/src/data/pepper-varieties/pepper-variety-slice.ts

@@ -19,7 +19,6 @@ export const userSlice = createSlice({
   name: "users",
   initialState,
   reducers: {},
-  extraReducers: {},
 });
 
 export const userReducer = userSlice.reducer;

docs/src/data/users/user-slice.ts

@@ -2,11 +2,10 @@
 @import "~normalize.css";
 @import "~@blueprintjs/core/lib/css/blueprint.css";
 @import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
-@import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 @import "~@blueprintjs/core/lib/scss/variables";
 
 html {
-  .bp4-dark {
+  .bp5-dark {
     background-color: $pt-dark-app-background-color;
   }
 }
@@ -17,9 +16,9 @@ body,
   height: 100%;
 }
 
-body.bp4-dark {
+body.bp5-dark {
   @include meta.load-css("node_modules/highlight.js/styles/github-dark.css");
 }
-body:not(.bp4-dark) {
+body:not(.bp5-dark) {
   @include meta.load-css("node_modules/highlight.js/styles/github.css");
 }

docs/src/index.scss

@@ -39,7 +39,7 @@ export const HomePage = () => {
         <p>
           Welcome to the <strong>Blueprint Datagrid</strong> documentation! <strong>Blueprint Datagrid</strong> is an enhanced table component for{" "}
           <a href="https://blueprintjs.com/" target="_blank" rel="noreferrer">
-            Blueprint 4
+            Blueprint 5
           </a>
           . It adds features like paging, sorting and filtering to basic Blueprint tables. <strong>Blueprint Datagrid</strong> is built with Blueprint components and styling and
           stays faithful to the look-and-feel of the library in both dark and light mode. It supports and is written in Typescript.
@@ -65,17 +65,14 @@ export const HomePage = () => {
       </Section>
       <Section title="Dependencies">
         <p>
-          <strong>Blueprint Datagrid</strong> depends on the following <a href="https://blueprintjs.com/">Blueprint 4</a> packages:
+          <strong>Blueprint Datagrid</strong> depends on the following <a href="https://blueprintjs.com/">Blueprint 5</a> packages:
           <ul>
             <li>
               <a href="https://www.npmjs.com/package/@blueprintjs/core">@blueprintjs/core</a>
             </li>
             <li>
               <a href="https://www.npmjs.com/package/@blueprintjs/icons">@blueprintjs/icons</a>
             </li>
-            <li>
-              <a href="https://www.npmjs.com/package/@blueprintjs/popover2">@blueprintjs/popover2</a>
-            </li>
             <li>
               <a href="https://www.npmjs.com/package/@blueprintjs/select">@blueprintjs/select</a>
             </li>