Merge branch 'develop' into develop-codemirror-v6

Author: khanniie

.eslintrc

@@ -16,13 +16,36 @@
     "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",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "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,
+    "no-plusplus": "off",
+    "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 }],
@@ -36,7 +59,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",
@@ -49,6 +84,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,
       {
@@ -72,6 +109,11 @@
   ],
   "settings": {
     "import/parser": "@babel/eslint-parser",
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    },
     "import/resolve": {
       "moduleDirectory": ["node_modules"]
     }
@@ -85,7 +127,22 @@
   },
   "overrides": [
     {
-      "files": ["*.stories.jsx"],
+      "files": ["*.ts", "*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "no-use-before-define": "off",
+        "import/no-extraneous-dependencies": "off",
+        "no-unused-vars": "off",
+        "import/no-default-export": "warn",
+        "no-underscore-dangle": "warn",
+        "react/require-default-props": "off",
+        "no-shadow": "off",
+        "@typescript-eslint/no-shadow": "error"
+      }
+    },
+    {
+      "files": ["*.stories.@(js|jsx|ts|tsx)"],
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }

.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

.gitignore

@@ -21,4 +21,6 @@ terraform/.terraform/
 storybook-static
 duplicates.json
 
-coverage
+coverage
+
+*.tsbuildinfo

.nvmrc

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

.prettierrc

@@ -5,7 +5,6 @@
   "insertPragma": false,
   "jsxBracketSameLine": false,
   "jsxSingleQuote": false,
-  "parser": "babel",
   "printWidth": 80,
   "proseWrap": "never",
   "requirePragma": false,

.storybook/main.js

@@ -1,6 +1,6 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: ['../client/**/*.stories.(jsx|mdx)'],
+  stories: ['../client/**/*.stories.(jsx|mdx|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
@@ -18,19 +18,19 @@ const config = {
     // https://storybook.js.org/docs/react/builders/webpack
     // this modifies the existing image rule to exclude .svg files
     // since we want to handle those files with @svgr/webpack
-    const imageRule = config.module.rules.find(rule => rule.test.test('.svg'))
-    imageRule.exclude = /\.svg$/
+    const imageRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg')
+    );
+    imageRule.exclude = /\.svg$/;
 
     // configure .svg files to be loaded with @svgr/webpack
     config.module.rules.push({
       test: /\.svg$/,
       use: ['@svgr/webpack']
-    })
+    });
 
-    return config
-  },
+    return config;
+  }
 };
 
 export default config;
-
-

.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
@@ -28,4 +28,4 @@ ENV NODE_ENV=production
 COPY package.json package-lock.json index.js ./
 RUN npm install --production
 COPY --from=build $APP_HOME/dist ./dist
-CMD ["npm", "run", "start:prod"]
+CMD ["npm", "run", "start:prod"]

README.md

@@ -10,6 +10,14 @@ We are a community of, and in solidarity with, people from every gender identity
 
 Learn more about [our community](https://p5js.org/community/) and read our [Community Statement and Code of Conduct](./.github/CODE_OF_CONDUCT.md). You can directly support our work with p5.js by [donating to the Processing Foundation](https://processingfoundation.org/support).
 
+Stay in touch with Processing Foundation across other platforms: 
+- [Instagram](https://www.instagram.com/p5xjs)
+- [Youtube](https://www.youtube.com/@ProcessingFoundation)
+- [X](https://x.com/p5xjs)
+- [Discord](https://discord.com/invite/esmGA6H6wm)
+- [Forum](https://discourse.processing.org)
+
+
 ## Using the p5.js Editor 🤔
 
 Make your first sketch in the [p5.js Editor](https://editor.p5js.org/)! Learn more about sketching with p5.js on the [Get Started](https://p5js.org/tutorials/get-started/) and find everything you can do in the [Reference](https://p5js.org/reference/). You can also look at [examples](https://editor.p5js.org/p5/sketches) and remix them in the p5.js Editor. 
@@ -26,6 +34,13 @@ The p5.js Editor is a collaborative project created by many individuals, mostly
 
 3. [All Contributors list on the p5.js repository](https://github.com/processing/p5.js?tab=readme-ov-file#contributors) - Explore the All Contributors list to see the wide range of contributions by our amazing community!
 
+> **TypeScript Migration:** 
+> As of July 2025, we are working on migrating the repo to TypeScript as part of the **[p5.js Web Editor pr05 Grant](https://github.com/processing/pr05-grant/wiki/2025-pr05-Program-Page)**.  
+> This migration will occur in two phases:
+> 1. **Grant Work (July – October 31, 2025)** – Setting up TypeScript configuration, tooling, and starting partial migration. Contributions will be **closed** during this period.
+> 2. **Open Contribution (After October 31, 2025)** – TypeScript migration tasks will **open** to all contributors, with guidelines and tutorials available.  
+>
+> For full details, see [TypeScript Migration Plan](./contributor_docs/typescript-migration.md).
 
 ## Acknowledgements 🙏
 

client/common/Button.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import Button from './Button';
+import { Button, ButtonDisplays, ButtonKinds, ButtonTypes } from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {
@@ -15,13 +15,13 @@ export default {
 };
 
 export const AllFeatures = (args) => (
-  <Button disabled={args.disabled} type="submit" label={args.label}>
+  <Button disabled={args.disabled} type={ButtonTypes.SUBMIT} label={args.label}>
     {args.children}
   </Button>
 );
 
 export const SubmitButton = () => (
-  <Button type="submit" label="submit">
+  <Button type={ButtonTypes.SUBMIT} label="submit">
     This is a submit button
   </Button>
 );
@@ -59,7 +59,7 @@ export const ButtonWithIconAfter = () => (
 );
 
 export const InlineButtonWithIconAfter = () => (
-  <Button iconAfter={<DropdownArrowIcon />} display={Button.displays.inline}>
+  <Button iconAfter={<DropdownArrowIcon />} display={ButtonDisplays.INLINE}>
     File name
   </Button>
 );
@@ -68,6 +68,6 @@ export const InlineIconOnlyButton = () => (
   <Button
     aria-label="Add to collection"
     iconBefore={<PlusIcon />}
-    display={Button.displays.inline}
+    display={ButtonDisplays.INLINE}
   />
 );