Merge branch 'master' of https://github.com/source-academy/frontend into HEAD

Author: RichDom2185

.github/workflows/build-development.yml

@@ -3,6 +3,12 @@ on:
   push:
     branches:
       - master
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: Branch/Tag/SHA to checkout
+        required: true
+        default: master
 
 jobs:
   deploy:
@@ -11,6 +17,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.inputs.ref }}
       # Has to be run before actions/setup-node.
       # See: https://github.com/actions/setup-node/issues/480
       - name: Enable corepack for Yarn

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ env:
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
-  
+
 jobs:
   lint:
     if: github.event.pull_request.draft == false

CONTRIBUTING.md

@@ -16,7 +16,7 @@ To start contributing, create a fork from our repo and send a PR. Refer to [this
 
 The frontend comes with an extensive test suite. To run the tests after you made your modifications, run
 `yarn test`. Regression tests are run automatically when you want to push changes to this repository.
-The regression tests are generated using `jest` and stored as snapshots in `src/\_\_tests\_\_`.  After modifying the frontend, carefully inspect any failing regression tests reported in red in the command line. If you are convinced that the regression tests and not your changes are at fault, you can update the regression tests by running:
+The regression tests are generated using `jest` and stored as snapshots in `src/\_\_tests\_\_`. After modifying the frontend, carefully inspect any failing regression tests reported in red in the command line. If you are convinced that the regression tests and not your changes are at fault, you can update the regression tests by running:
 
 ```bash
 yarn test --updateSnapshot

README.md

@@ -24,7 +24,7 @@ The Source Academy (<https://sourceacademy.org/>) is an immersive online experie
 
 1. Clone this repository and navigate to it using your command line
 
-1. Install the version of `yarn` as specified in `package.json`, `packageManager`. 
+1. Install the version of `yarn` as specified in `package.json`, `packageManager`.
 
    > We recommend using `corepack` to manage the version of `yarn`, you may simply run `corepack enable` to complete this step.
 

_config.yml

@@ -1 +1 @@
-theme: jekyll-theme-cayman
+theme: jekyll-theme-cayman

craco.config.js

@@ -4,7 +4,7 @@
 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 simpleImportSort from 'eslint-plugin-simple-import-sort';
 // import reactRefresh from 'eslint-plugin-react-refresh';
 
 export default config(
@@ -24,7 +24,7 @@ export default config(
     files: ['**/*.ts*'],
     plugins: {
       'react-hooks': reactHooksPlugin,
-      'react': reactPlugin,
+      react: reactPlugin,
       'simple-import-sort': simpleImportSort
     },
     rules: {

eslint.config.mjs

@@ -0,0 +1,104 @@
+// @ts-check
+
+const ignoreModulePaths = (...paths) => {
+  const moduleRoot = replaceSlashes('/node_modules/');
+  const modulePaths = paths
+    .map(replaceSlashes)
+    .map(path => `(${path}[/\\\\.*])`)
+    .join('|');
+  return moduleRoot + '(?!' + modulePaths + ').*.(js|jsx|ts|tsx)$';
+};
+const replaceSlashes = target => {
+  return target.replaceAll('/', '[/\\\\]');
+};
+
+/** @type {import('jest').Config} */
+export default {
+  moduleDirectories: ['<rootDir>', 'node_modules'],
+  testEnvironment: './jsdom-env.js',
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        sourceMaps: true,
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            decorators: false,
+            dynamicImport: false
+          },
+          baseUrl: '.',
+          transform: {
+            react: {
+              runtime: 'automatic'
+            }
+          }
+        }
+      }
+    ]
+  },
+  transformIgnorePatterns: [
+    // Will give something like
+    // '[/\\\\]node_modules[/\\\\]
+    //  (?!
+    //  (   @ion-phaser[/\\\\]react[/\\\\.*]    )|
+    //  (   js-slang[/\\\\.*]                   )|
+    //  (   array-move[/\\\\.*]                 )|
+    //      ...
+    //  (   comma-separated-tokens[/\\\\.*]   )
+    //  ).*.(js|jsx|ts|tsx)$'
+    ignoreModulePaths(
+      '@ion-phaser/react',
+      'js-slang',
+      'array-move',
+      'konva',
+      'react-konva',
+      'react-debounce-render',
+      'devlop',
+      'hastscript',
+      'hast-to-hyperscript',
+      'hast-util-.+',
+      'mdast-util-.+',
+      'micromark',
+      'micromark-.+',
+      'vfile',
+      'vfile-message',
+      'unist-util-.+',
+      'web-namespaces',
+      'rehype-react',
+      'unified',
+      'bail',
+      'is-plain-obj',
+      'trough',
+      'decode-named-character-reference',
+      'character-entities',
+      'trim-lines',
+      'property-information',
+      'space-separated-tokens',
+      'comma-separated-tokens',
+      'query-string',
+      'decode-uri-component',
+      'split-on-first',
+      'filter-obj',
+      '@sourceacademy/c-slang',
+      'java-parser',
+      'conductor'
+    ),
+    '^.+\\.module\\.(css|sass|scss)$'
+  ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg)$': '<rootDir>/src/fileMock.ts',
+    '\\.svg$': 'identity-obj-proxy',
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    'unist-util-visit-parents/do-not-use-color':
+      '<rootDir>/node_modules/unist-util-visit-parents/lib',
+    'vfile/do-not-use-conditional-minpath': '<rootDir>/node_modules/vfile/lib',
+    'vfile/do-not-use-conditional-minproc': '<rootDir>/node_modules/vfile/lib',
+    'vfile/do-not-use-conditional-minurl': '<rootDir>/node_modules/vfile/lib'
+  },
+  setupFilesAfterEnv: [
+    './src/setupTests.ts', // Setup file for Jest
+    './src/i18n/i18n.ts' // Setup i18next configuration
+  ]
+};

jest.config.js

@@ -0,0 +1,12 @@
+import JSDOMEnvironment from 'jest-environment-jsdom';
+
+// https://stackoverflow.com/a/78051351
+export default class FixJSDOMEnvironment extends JSDOMEnvironment {
+  constructor(...args) {
+    super(...args);
+    this.global.fetch = fetch;
+    this.global.Request = Request;
+    this.global.Response = Response;
+    // And any other missing globals
+  }
+}