Migrate to BlueprintJS v6 (#3289)

* Initial plan

* Initial setup: Remove external dependencies for Blueprint v6 migration

Co-authored-by: RichDom2185 <34370238+RichDom2185@users.noreply.github.com>

* Migrate to Blueprint v6: Update dependencies and fix core breaking changes

Co-authored-by: RichDom2185 <34370238+RichDom2185@users.noreply.github.com>

* Complete Blueprint v6 migration: Fix xlsx dependencies and verify UI functionality

Co-authored-by: RichDom2185 <34370238+RichDom2185@users.noreply.github.com>

* Revert some dependency changes

* Reformat

* Simplify some changes

* Revert XLSX changes

* Revert conductor changes

* Revert more conductor changes

* Revert more XLSX changes

* Organize imports

* Reapply some dependency updates as they are non-breaking

* Migrate some snapshots to bp6

* Migrate remaining snapshots to bp6

* Revert sharedb update

* Pin sharedb to 2.1.1

* Update missed snapshots

* Fix format script on Windows

* Fix format

* Update markdown dependencies

* Update Vite for tests

* Remove hardcoded classes

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: RichDom2185 <34370238+RichDom2185@users.noreply.github.com>

Author: Copilot

.prettierrc

@@ -3,5 +3,6 @@
   "singleQuote": true,
   "printWidth": 100,
   "arrowParens": "avoid",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "endOfLine": "auto"
 }

eslint.config.mjs

@@ -1,10 +1,10 @@
 // @ts-check
 
 // import eslint from '@eslint/js';
-import { config, configs } from 'typescript-eslint';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
+import { config, configs } from 'typescript-eslint';
 // import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default config(

package.json

@@ -31,17 +31,17 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
-    "@blueprintjs/core": "^5.10.1",
-    "@blueprintjs/datetime2": "^2.3.3",
+    "@blueprintjs/core": "^6.0.0",
+    "@blueprintjs/datetime": "^6.0.0",
     "@blueprintjs/icons": "^6.0.0",
-    "@blueprintjs/select": "^5.1.3",
+    "@blueprintjs/select": "^6.0.0",
     "@convergencelabs/ace-collab-ext": "^0.6.0",
     "@mantine/hooks": "^7.11.2",
     "@octokit/rest": "^22.0.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^8.33.0",
     "@sourceacademy/c-slang": "^1.0.21",
-    "@sourceacademy/sharedb-ace": "^2.1.1",
+    "@sourceacademy/sharedb-ace": "2.1.1",
     "@sourceacademy/sling-client": "^0.1.0",
     "@szhsin/react-menu": "^4.0.0",
     "@tanstack/react-table": "^8.9.3",

src/commons/__tests__/__snapshots__/ContentDisplay.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`ContentDisplay page renders correctly 1`] = `
     className="col-md-10 col-xs-11 contentdisplay-content-parent"
   >
     <div
-      className="contentdisplay-content bp5-card bp5-elevation-3"
+      className="contentdisplay-content bp6-card bp6-elevation-3"
     >
       <div>
          Test Content 

src/commons/__tests__/__snapshots__/Markdown.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Markdown page renders correctly 1`] = `
 <div
-  className="md bp5-running-text"
+  className="md bp6-running-text"
   dangerouslySetInnerHTML={
     {
       "__html": "<p>Welcome to the Source Academy playground!</p>

src/commons/achievement/AchievementFilter.tsx

@@ -19,7 +19,7 @@ const AchievementFilter: React.FC<Props> = ({ filterState, icon, ownStatus }) =>
       onClick={() => setGlobalStatus(ownStatus)}
       style={{ color: getFilterColor(globalStatus, ownStatus) }}
     >
-      <Icon icon={icon} iconSize={30} />
+      <Icon icon={icon} size={30} />
       <p>{ownStatus}</p>
     </div>
   );

src/commons/achievement/AchievementView.tsx

@@ -59,7 +59,7 @@ const AchievementView: React.FC<Props> = ({ focusUuid, userState }) => {
   if (focusUuid === '') {
     return (
       <div className="no-view">
-        <Icon icon={IconNames.MOUNTAIN} iconSize={60} />
+        <Icon icon={IconNames.MOUNTAIN} size={60} />
         <h2>Select an achievement</h2>
       </div>
     );

src/commons/achievement/control/achievementEditor/EditableDate.tsx

@@ -33,7 +33,7 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
         title={`${type}`}
       >
         <DatePicker
-          onChange={changeDate}
+          onChange={selectedDate => changeDate(selectedDate || undefined)}
           timePickerProps={{ showArrowButtons: true }}
           value={date}
         />

src/commons/achievement/control/goalEditor/EditableDate.tsx

@@ -33,7 +33,7 @@ const EditableDate: React.FC<Props> = ({ type, date, changeDate }) => {
         title={`${type}`}
       >
         <DatePicker
-          onChange={changeDate}
+          onChange={selectedDate => changeDate(selectedDate || undefined)}
           timePickerProps={{ showArrowButtons: true }}
           value={date}
         />

src/commons/assessment/Assessment.tsx

@@ -226,14 +226,14 @@ const Assessment: React.FC = () => {
             <div className="listing-footer">
               <div>
                 <Text className="listing-due-date">
-                  <Icon className="listing-due-icon" iconSize={12} icon={IconNames.CALENDAR} />
+                  <Icon className="listing-due-icon" size={12} icon={IconNames.CALENDAR} />
                   {`${beforeNow(overview.openAt) ? 'Opened' : 'Opens'}: ${getPrettyDate(
                     overview.openAt
                   )}`}
                 </Text>
                 {beforeNow(overview.openAt) && (
                   <Text className="listing-due-date">
-                    <Icon className="listing-due-icon" iconSize={12} icon={IconNames.TIME} />
+                    <Icon className="listing-due-icon" size={12} icon={IconNames.TIME} />
                     {`Due: ${getPrettyDate(overview.closeAt)}`}
                   </Text>
                 )}