Upgrade Mongo to Version 8

.eslintrc

@@ -16,6 +16,9 @@
     "import/no-unresolved": 0,
     "import/no-named-as-default": 0,
     "import/no-named-as-default-member": 0,
+    "import/no-useless-path-segments": 1,
+    "import/no-cycle":0, //temporarily off
+    "import/no-import-module-exports": 0, //temporarily off
     "import/extensions": [ // override airbnb setting to allow imports of js, jsx, ts, and tsx files to auto-resolve instead of error
       "error",
       "ignorePackages",
@@ -27,12 +30,19 @@
       }
     ],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
+    "default-param-last": 0,
+    "no-else-return" :0,
     "indent": 0,
     "no-console": 0,
     "no-alert": 0,
+    "no-import-assign": 2,
+    "no-promise-executor-return": 0, //temporarily off
+    "no-restricted-exports": 1,
     "no-underscore-dangle": 0,
     "no-useless-catch": 2,
+    "prefer-object-spread": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
+    "max-classes-per-file": 0,
     "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
@@ -46,7 +56,19 @@
       { "ignorePureComponents": true
     }],
     "class-methods-use-this": 0,
-    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true}],
+    "react/button-has-type": 0,
+    "react/destructuring-assignment":0,
+    "react/function-component-definition": 0,
+    "react/jsx-curly-newline":0,
+    "react/jsx-fragments":0,
+    "react/jsx-no-useless-fragment":0, // temporarily off
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/jsx-wrap-multilines": 0,
+    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true, "allowFunctions": true}],
+    "react/no-deprecated": 0, //temporarily off
+    "react/no-unused-class-component-methods": 1,
+    "react/sort-comp": 0,
     "no-return-assign": [2, "except-parens"],
     "jsx-a11y/anchor-is-valid": [
       "error",
@@ -59,6 +81,8 @@
         ]
       }
     ],
+    "jsx-a11y/control-has-associated-label": 0, //temporarily off
+    "jsx-a11y/label-has-associated-control": 0, //temporarily off
     "jsx-a11y/label-has-for": [
       2,
       {

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
-        node-version: '16.14.x'
+        node-version: '18.20.x'
     - run: npm install
     - run: npm run test
     - run: npm run lint

.nvmrc

@@ -1 +1 @@
-16.14.2
+18.20.8

.travis.yml

@@ -1,7 +1,7 @@
 sudo: required
 language: node_js
 node_js:
- - "16.14.2"
+ - "18.20.8"
 
 cache:
   directories:

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.14.2 AS base
+FROM node:18.20.8 AS base
 ENV APP_HOME=/usr/src/app \
   TERM=xterm
 RUN mkdir -p $APP_HOME

client/common/useKeyDownHandlers.js

@@ -66,3 +66,7 @@ export const DocumentKeyDown = ({ handlers }) => {
 DocumentKeyDown.propTypes = {
   handlers: PropTypes.objectOf(PropTypes.func)
 };
+
+DocumentKeyDown.defaultProps = {
+  handlers: {}
+};

client/components/RootPage.jsx

@@ -2,18 +2,19 @@ import styled from 'styled-components';
 import { prop } from '../theme';
 
 const RootPage = styled.div`
-  min-height: 100%;
+  min-height: 100vh;
+  height: ${({ fixedHeight }) => fixedHeight || '100vh'};
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   flex-direction: column;
   color: ${prop('primaryTextColor')};
   background-color: ${prop('backgroundColor')};
-  height: ${({ fixedHeight }) => fixedHeight || 'initial'};
 
   @media (max-width: 770px) {
     height: 100%;
     overflow: hidden;
   }
+
   @media print {
     @page {
       page-orientation: landscape;

client/index.jsx

@@ -35,12 +35,12 @@ script.src = 'https://foundation-donate-banner.netlify.app/static/js/main.js';
 document.body.appendChild(script);
 
 const App = () => (
-  <>
+  <div>
     <Router history={browserHistory}>
       <SkipLink targetId="play-sketch" text="PlaySketch" />
       <Routing />
     </Router>
-  </>
+  </div>
 );
 
 render(

client/modules/IDE/components/AssetList.jsx

@@ -46,7 +46,7 @@ const AssetList = () => {
               <th>{t('AssetList.HeaderName')}</th>
               <th>{t('AssetList.HeaderSize')}</th>
               <th>{t('AssetList.HeaderSketch')}</th>
-              <th scope="col"></th>
+              <th aria-label="dropdown" scope="col"></th>
             </tr>
           </thead>
           <tbody>

client/modules/IDE/components/Banner.jsx

@@ -36,7 +36,7 @@ const Banner = ({ onClose }) => {
     <div className="banner">
       <a href={bannerURL}>{bannerCopy}</a>
       <button className="banner-close-button" onClick={onClose}>
-        <CrossIcon Icon={{ default: '#000', hover: '#333' }} />
+        <CrossIcon icon={{ default: '#000', hover: '#333' }} />
       </button>
     </div>
   );

client/modules/IDE/components/CollectionList/CollectionList.jsx

@@ -183,7 +183,7 @@ const CollectionList = ({
                   context: mobile ? 'mobile' : ''
                 })
               )}
-              <th scope="col"></th>
+              <th aria-label="dropdown" scope="col"></th>
             </tr>
           </thead>
           <tbody>

client/modules/IDE/components/Console.jsx

@@ -9,8 +9,8 @@ import ConsoleInput from './ConsoleInput';
 import UpArrowIcon from '../../../images/up-arrow.svg';
 import DownArrowIcon from '../../../images/down-arrow.svg';
 
-import * as IDEActions from '../../IDE/actions/ide';
-import * as ConsoleActions from '../../IDE/actions/console';
+import * as IDEActions from '../actions/ide';
+import * as ConsoleActions from '../actions/console';
 import { useDidUpdate } from '../hooks/custom-hooks';
 import useHandleMessageEvent from '../hooks/useHandleMessageEvent';
 import { listen } from '../../../utils/dispatcher';

client/modules/IDE/components/ConsoleInput.jsx

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { Encode } from 'console-feed';
 
 import RightArrowIcon from '../../../images/right-arrow.svg';
-import { dispatchConsoleEvent } from '../../IDE/actions/console';
+import { dispatchConsoleEvent } from '../actions/console';
 import { dispatchMessage, MessageTypes } from '../../../utils/dispatcher';
 
 // heavily inspired by

client/modules/IDE/components/Preferences/index.jsx

@@ -120,6 +120,7 @@ export default function Preferences() {
   };
 
   const markdownComponents = useMemo(() => {
+    // eslint-disable-next-line react/no-unstable-nested-components
     const ExternalLink = ({ children, ...props }) => (
       <a {...props} target="_blank">
         {children}
@@ -132,6 +133,7 @@ export default function Preferences() {
       children: undefined
     };
 
+    // eslint-disable-next-line react/no-unstable-nested-components
     const Paragraph = ({ children, ...props }) => (
       <p className="preference__paragraph" {...props}>
         {children}

client/modules/IDE/components/VersionPicker.jsx

@@ -10,8 +10,9 @@ import { p5Versions } from '../../../../common/p5Versions';
 import MenuItem from '../../../components/Dropdown/MenuItem';
 import DropdownMenu from '../../../components/Dropdown/DropdownMenu';
 import { updateFileContent } from '../actions/files';
+// eslint-disable-next-line import/no-cycle
 import { CmControllerContext } from '../pages/IDEView';
-import { DropdownArrowIcon } from '../.././../common/icons';
+import { DropdownArrowIcon } from '../../../common/icons';
 
 const VersionPickerButton = styled.div`
   display: flex;

client/modules/IDE/hooks/useP5Version.jsx

@@ -196,6 +196,7 @@ export function P5VersionProvider(props) {
     return null;
   }, [indexSrc]);
 
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value = { indexID, versionInfo };
 
   return (

client/modules/IDE/utils/consoleStyles.js

@@ -160,14 +160,6 @@ const getConsoleFeedStyle = (theme, fontSize) => {
   };
 
   switch (theme) {
-    case 'light':
-    default:
-      return Object.assign(
-        CONSOLE_FEED_LIGHT_STYLES || {},
-        CONSOLE_FEED_LIGHT_ICONS,
-        CONSOLE_FEED_SIZES,
-        style
-      );
     case 'dark':
       return Object.assign(
         CONSOLE_FEED_DARK_STYLES || {},
@@ -182,6 +174,14 @@ const getConsoleFeedStyle = (theme, fontSize) => {
         CONSOLE_FEED_SIZES,
         style
       );
+    case 'light':
+    default:
+      return Object.assign(
+        CONSOLE_FEED_LIGHT_STYLES || {},
+        CONSOLE_FEED_LIGHT_ICONS,
+        CONSOLE_FEED_SIZES,
+        style
+      );
   }
 };
 

client/styles/base/_base.scss

@@ -51,7 +51,7 @@ button {
 .root-app,
 .app {
 	min-height: 100%;
-	height: 100%;
+	height: 100vh;
 }
 
 a {

client/styles/components/_preview-frame.scss

@@ -3,7 +3,8 @@
 .preview-frame-holder {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 100% !important;
+  overflow: hidden;
 }
 
 .preview-frame-overlay {

client/styles/main.scss

@@ -6,11 +6,11 @@
 @import 'base/reset';
 @import 'base/base';
 
-@import '../../node_modules/codemirror/lib/codemirror';
-@import '../../node_modules/codemirror/addon/lint/lint';
-@import '../../node_modules/codemirror-colorpicker/addon/codemirror-colorpicker';
-@import '../../node_modules/dropzone/dist/dropzone';
-@import '../../node_modules/primer-tooltips/build/build';
+@import '~codemirror/lib/codemirror';
+@import '~codemirror/addon/lint/lint';
+@import '~codemirror-colorpicker/addon/codemirror-colorpicker';
+@import '~dropzone/dist/dropzone';
+@import '~primer-tooltips/build/build';
 
 @import 'components/p5-light-codemirror-theme';
 @import 'components/p5-dark-codemirror-theme';

client/test-utils.js

@@ -12,7 +12,7 @@
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { render } from '@testing-library/react';
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { Router } from 'react-router-dom';
@@ -34,9 +34,10 @@ export * from '@testing-library/react';
 
 const ResponsiveProvider = ({ children, mobile, deviceWidth }) => {
   const width = deviceWidth ?? (mobile ? 400 : 1000);
+  const value = useMemo(() => ({ width }), [width]);
   return (
     // eslint-disable-next-line react/jsx-filename-extension
-    <ResponsiveContext.Provider value={{ width }}>
+    <ResponsiveContext.Provider value={value}>
       {children}
     </ResponsiveContext.Provider>
   );

contributor_docs/installation.md

@@ -18,16 +18,16 @@ If you run into any issues while setting up your environment, take some time to
 _Note_: The installation steps assume you are using a Unix-like shell. If you are using Windows, you will need to use `copy` instead of `cp`.
 
 1. Install Node.js. The recommended way is to Node through [nvm](https://github.com/nvm-sh/nvm), which is a command-line tool that helps you manage different versions of Node.js on your system. You can install nvm by using [nvm's installation guide](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating).
-      - You can also install [node.js](https://nodejs.org/download/release/v16.14.2/) version 16.14.2 directly from the Node.js website. To check if you already have Node installed on your computer, run `$ node -v`.
+      - You can also install [node.js](https://nodejs.org/download/release/v18.20.8/) version 18.20.8 directly from the Node.js website. To check if you already have Node installed on your computer, run `$ node -v`.
 2. [Fork](https://help.github.com/articles/fork-a-repo) the [p5.js Web Editor repository](https://github.com/processing/p5.js-web-editor) into your own GitHub account.
 3. [Clone](https://help.github.com/articles/cloning-a-repository/) your new fork of the repository from GitHub onto your local computer.
 
    ```
    $ git clone https://github.com/YOUR_USERNAME/p5.js-web-editor.git
    ```
 
-4. If you are using nvm, run `$ nvm use 16.14.2` to set your Node version to 16.14.2
-5. Ensure your npm version is set to 8.5.0 by running `$ npm -v`. If it isn't, run `npm install -g npm@8.5.0` to install it. 
+4. If you are using nvm, run `$ nvm use 18.20.8` to set your Node version to 18.20.8
+5. Ensure your npm version is set to 10.8.2 by running `$ npm -v`. If it isn't, run `npm install -g npm@10.8.2` to install it. 
 6. Navigate into the project folder and install all its necessary dependencies with npm.
 
    ```

docker-compose-development.yml

@@ -1,6 +1,6 @@
 services:
   mongo:
-    image: mongo:5.0
+    image: mongo:8.0
     volumes:
       - dbdata:/data/db
   app:

docker-compose.yml

@@ -1,6 +1,6 @@
 services:
   mongo:
-    image: mongo:5.0
+    image: mongo:8.0
     volumes:
       - dbdata:/data/db
   app: