Migrate to BlueprintJS v6

.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>
                 )}