Merge branch 'source-academy:master' into master

Author: s-kybound

.env.example

@@ -3,7 +3,6 @@ REACT_APP_DEPLOYMENT_NAME=Source Academy
 REACT_APP_BACKEND_URL=http://localhost:4000
 REACT_APP_USE_BACKEND=TRUE
 REACT_APP_PLAYGROUND_ONLY=FALSE
-REACT_APP_ENABLE_GITHUB_ASSESSMENTS=TRUE
 REACT_APP_SHOW_RESEARCH_PROMPT=FALSE
 
 REACT_APP_URL_SHORTENER_SIGNATURE=

.eslintrc.json

@@ -2,6 +2,22 @@
   "extends": ["react-app", "plugin:@typescript-eslint/recommended"],
   "plugins": ["simple-import-sort"],
   "rules": {
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "react-redux",
+            "importNames": [
+              // TODO: Create typed hook for useDispatch
+              // "useDispatch",
+              "useSelector"
+            ],
+            "message": "Use the typed hook \"useTypedSelector\" instead."
+          }
+        ]
+      }
+    ],
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/interface-name-prefix": "off",
     "@typescript-eslint/camelcase": "off",
@@ -11,7 +27,19 @@
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/ban-ts-comment": "warn",
-    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-types": [
+      "error",
+      {
+        // TODO: Change this to true someday
+        "extendDefaults": false,
+        "types": {
+          "React.FunctionComponent": {
+            "message": "Use React.FC instead",
+            "fixWith": "React.FC"
+          }
+        }
+      }
+    ],
     "simple-import-sort/imports": "error"
   }
 }

.github/workflows/build-development.yml

@@ -38,7 +38,6 @@ jobs:
           REACT_APP_GOOGLE_API_KEY: ${{ secrets.REACT_APP_GOOGLE_API_KEY }}
           REACT_APP_GOOGLE_APP_ID: ${{ secrets.REACT_APP_GOOGLE_APP_ID }}
           REACT_APP_PLAYGROUND_ONLY: 'TRUE'
-          REACT_APP_ENABLE_GITHUB_ASSESSMENTS: 'TRUE'
           REACT_APP_VERSION: ${{ format('{0}-{1}', github.sha, steps.get-time.outputs.time) }}
           REACT_APP_ENVIRONMENT: 'pages'
           REACT_APP_MODULE_BACKEND_URL: https://source-academy.github.io/modules

README.md

@@ -90,7 +90,6 @@ See [here](https://github.com/source-academy/frontend/wiki/Google-Drive-Persiste
 
 1. `REACT_APP_DEPLOYMENT_NAME`: The name of the Source Academy deployment. This will be shown in the `/welcome` route. Defaults to 'Source Academy'.
 1. `REACT_APP_PLAYGROUND_ONLY`: Whether to build the "playground-only" version, which disables the Academy components, so only the Playground is available. This is what we deploy onto [GitHub Pages](https://source-academy.github.io).
-1. `REACT_APP_ENABLE_GITHUB_ASSESSMENTS`: Whether to enable the GitHub Assessments feature. Off by default.
 1. `REACT_APP_SHOW_RESEARCH_PROMPT`: Whether to show the educational research consent prompt to users. This is mainly for instructors using their own deployment of Source Academy @ NUS to disable this prompt.
 
 ## Projects

craco.config.js

@@ -146,6 +146,11 @@ const cracoConfig = (module.exports = {
         '<rootDir>/node_modules/vfile/lib';
       return jestConfig;
     }
+  },
+  babel: {
+    presets: [
+      ['@babel/preset-typescript']
+    ]
   }
 });
 

package.json

@@ -32,6 +32,7 @@
     "@blueprintjs/popover2": "^2.0.0",
     "@blueprintjs/select": "^5.0.0",
     "@octokit/rest": "^20.0.0",
+    "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^7.57.0",
     "@sourceacademy/sharedb-ace": "^2.0.2",
     "@sourceacademy/sling-client": "^0.1.0",
@@ -48,7 +49,7 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "hastscript": "^9.0.0",
-    "js-slang": "^1.0.42",
+    "js-slang": "^1.0.48",
     "js-yaml": "^4.1.0",
     "konva": "^9.2.0",
     "lodash": "^4.17.21",
@@ -58,7 +59,7 @@
     "moment": "^2.29.4",
     "normalize.css": "^8.0.1",
     "phaser": "^3.55.2",
-    "query-string": "^8.0.0",
+    "query-string": "^9.0.0",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-ace": "^10.1.0",
@@ -74,7 +75,7 @@
     "react-papaparse": "^4.0.2",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.1.1",
-    "react-responsive": "^9.0.0-beta.10",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.14.1",
     "react-simple-keyboard": "^3.6.27",
     "react-sortable-hoc": "^2.0.0",

src/assets/PortSvg.tsx

@@ -1,8 +1,10 @@
+import React from 'react';
+
 type Props = {
   port: string;
 };
 
-const PortSvg = ({ port }: Props) => (
+const PortSvg: React.FC<Props> = ({ port }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     id="port-svg6348"

src/assets/SA.jpg

@@ -11,14 +11,6 @@ type ButtonOptions = {
   type?: 'submit' | 'reset' | 'button';
 };
 
-type ControlButtonProps = {
-  label?: string;
-  icon?: IconName;
-  onClick?: () => void;
-  options?: Partial<ButtonOptions>;
-  isDisabled?: boolean;
-};
-
 const defaultOptions = {
   className: '',
   fullWidth: false,
@@ -27,7 +19,15 @@ const defaultOptions = {
   minimal: true
 };
 
-const ControlButton: React.FC<ControlButtonProps> = ({
+type Props = {
+  label?: string;
+  icon?: IconName;
+  onClick?: () => void;
+  options?: Partial<ButtonOptions>;
+  isDisabled?: boolean;
+};
+
+const ControlButton: React.FC<Props> = ({
   label = '',
   icon,
   onClick,

src/commons/ControlButton.tsx

@@ -1,9 +1,9 @@
 import { Classes } from '@blueprintjs/core';
 import classNames from 'classnames';
-import * as React from 'react';
+import React from 'react';
 import { Converter } from 'showdown';
 
-type MarkdownProps = {
+type Props = {
   className?: string;
   content: string;
   openLinksInNewWindow?: boolean;
@@ -12,7 +12,7 @@ type MarkdownProps = {
   tasklists?: boolean;
 };
 
-const Markdown: React.FC<MarkdownProps> = props => {
+const Markdown: React.FC<Props> = props => {
   const converter = new Converter({
     tables: true,
     simplifiedAutoLink: props.simplifiedAutoLink,