apply typescript functional component and cm upgrade

.babelrc

@@ -1,8 +1,5 @@
 {
-  "presets": [
-    "@babel/preset-react",
-    "@babel/preset-env"
-  ],
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
   "env": {
     "production": {
       "plugins": [
@@ -43,16 +40,10 @@
         "@babel/plugin-proposal-function-bind",
         ["@babel/plugin-proposal-private-methods", { "loose": true }]
       ],
-      "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-      ]
+      "presets": ["@babel/preset-env", "@babel/preset-react"]
     },
     "development": {
-      "plugins": [
-        "babel-plugin-styled-components",
-        "react-refresh/babel"
-      ],
+      "plugins": ["babel-plugin-styled-components", "react-refresh/babel"],
       "presets": [
         [
           "@babel/preset-react",

.eslintrc

@@ -1,7 +1,19 @@
 {
-	"extends": ["airbnb", "prettier", "plugin:storybook/recommended"],
-	"parser": "@babel/eslint-parser",
-	"env": {
+  "extends": [
+    "airbnb",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
     "browser": true,
     "node": true,
     "jest": true
@@ -15,64 +27,73 @@
     "import/namespace": 0,
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
-    "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
+    "comma-dangle": 0,
     "indent": 0,
     "no-console": 0,
     "no-alert": 0,
     "no-underscore-dangle": 0,
     "no-useless-catch": 2,
-    "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
+    "max-len": [
+      1,
+      120,
+      2,
+      { "ignoreComments": true, "ignoreTemplateLiterals": true }
+    ],
     "quote-props": [1, "as-needed"],
-    "no-unused-vars": [1, {"vars": "local", "args": "none"}],
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+      1,
+      { "vars": "local", "args": "none" }
+    ],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
     "no-param-reassign": [2, { "props": false }],
-    "react/self-closing-comp": ["error", {
-      "component": true,
-      "html": false
-    }],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": false
+      }
+    ],
     "newline-per-chained-call": 0,
-    "react/prefer-stateless-function": [2,
-      { "ignorePureComponents": true
-    }],
+    "react/prefer-stateless-function": [2, { "ignorePureComponents": true }],
     "class-methods-use-this": 0,
-    "react/jsx-no-bind": [2, {"allowBind": true, "allowArrowFunctions": true}],
+    "react/jsx-no-bind": [
+      2,
+      { "allowBind": true, "allowArrowFunctions": true }
+    ],
     "no-return-assign": [2, "except-parens"],
     "jsx-a11y/anchor-is-valid": [
       "error",
       {
-        "components": [
-          "Link"
-        ],
-        "specialLink": [
-          "to"
-        ]
+        "components": ["Link"],
+        "specialLink": ["to"]
       }
     ],
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
     "jsx-a11y/label-has-for": [
       2,
       {
-        "components": [
-          "Label"
-        ],
+        "components": ["Label"],
         "required": {
-          "every": [
-            "id"
-          ]
+          "every": ["id"]
         },
         "allowChildren": false
       }
     ],
-    "prettier/prettier": [
-      "error"
-    ]
+    "prettier/prettier": ["error"],
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
   },
-  "plugins": [
-    "react", "jsx-a11y", "import", "prettier"
-  ],
+  "plugins": ["react", "jsx-a11y", "import", "prettier", "@typescript-eslint"],
   "settings": {
-    "import/parser": "@babel/eslint-parser",
-    "import/resolve": {
-      "moduleDirectory": ["node_modules"]
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
     }
   },
   "globals": {
@@ -88,6 +109,47 @@
       "rules": {
         "import/no-extraneous-dependencies": "off"
       }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": [
+          1,
+          { "vars": "local", "args": "none" }
+        ],
+        "import/no-named-as-default": "off",
+        "import/no-named-as-default-member": "off",
+        "react/require-default-props": "off",
+        "react/prop-types": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "react/jsx-indent": "off"
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {
+        "@typescript-eslint/no-empty-function": "off",
+        "import/no-extraneous-dependencies": "off",
+        "import/no-named-as-default": "off",
+        "import/no-named-as-default-member": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "react/jsx-no-bind": "off",
+        "no-use-before-define": "off",
+        "react/prop-types": "off",
+        "react/require-default-props": "off",
+        "@typescript-eslint/no-this-alias": "off",
+        "import/extensions": [
+          "error",
+          "ignorePackages",
+          {
+            "js": "never",
+            "jsx": "never",
+            "ts": "never",
+            "tsx": "never"
+          }
+        ]
+      }
     }
   ]
 }

.github/CODE_OF_CONDUCT.md

@@ -7,45 +7,49 @@ We are a community of, and in solidarity with, people from every gender identity
 We like these hashtags: #noCodeSnobs (because we value community over efficiency), #newKidLove (because we all started somewhere), #unassumeCore (because we don't assume knowledge), and #BlackLivesMatter (because of course).
 
 In practice:
-* We are not code snobs. We do not assume knowledge or imply there are things that somebody should know.
-* We insist on actively engaging with requests for feedback regardless of their complexity.
-* We welcome newcomers and prioritize the education of others. We strive to approach all tasks with the enthusiasm of a newcomer. Because we believe that newcomers are just as valuable in this effort as experts.
-* We consistently make the effort to actively recognize and validate multiple types of contributions.
-* We are always willing to offer help or guidance.
+
+- We are not code snobs. We do not assume knowledge or imply there are things that somebody should know.
+- We insist on actively engaging with requests for feedback regardless of their complexity.
+- We welcome newcomers and prioritize the education of others. We strive to approach all tasks with the enthusiasm of a newcomer. Because we believe that newcomers are just as valuable in this effort as experts.
+- We consistently make the effort to actively recognize and validate multiple types of contributions.
+- We are always willing to offer help or guidance.
 
 In times of conflict:
-* We listen.
-* We clearly communicate while acknowledging other's feelings.
-* We admit when we're wrong, apologize, and accept responsibility for our actions.
-* We are continuously seeking to improve ourselves and our community.
-* We keep our community respectful and open.
-* We make everyone feel heard.
-* We are mindful and kind in our interactions.
+
+- We listen.
+- We clearly communicate while acknowledging other's feelings.
+- We admit when we're wrong, apologize, and accept responsibility for our actions.
+- We are continuously seeking to improve ourselves and our community.
+- We keep our community respectful and open.
+- We make everyone feel heard.
+- We are mindful and kind in our interactions.
 
 In the future:
-* The future is now.
 
+- The future is now.
 
 ## p5.js Code of Conduct
 
-* **Be mindful of your language.** Any of the following behavior is unacceptable: 
-  * Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background
-  * Threats of violence
-  * Deliberate intimidation
-  * Sexually explicit or violent material that is not contextualized and preceded by a considerate warning 
-  * Unwelcome sexual attention
-  * Stalking or following
-  * Or any other kinds of harassment
+- **Be mindful of your language.** Any of the following behavior is unacceptable:
+
+  - Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background
+  - Threats of violence
+  - Deliberate intimidation
+  - Sexually explicit or violent material that is not contextualized and preceded by a considerate warning
+  - Unwelcome sexual attention
+  - Stalking or following
+  - Or any other kinds of harassment
 
   Use your best judgement. If it will possibly make others uncomfortable, do not post it.
 
-* **Be respectful.** Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care. 
-* **Be considerate.** Think about how your contribution will affect others in the community. 
-* **Be open minded.** Embrace new people and new ideas. Our community is continually evolving and we welcome positive change.
+- **Be respectful.** Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care.
+- **Be considerate.** Think about how your contribution will affect others in the community.
+- **Be open minded.** Embrace new people and new ideas. Our community is continually evolving and we welcome positive change.
 
 If you believe someone is violating the code of conduct, we ask that you report it by emailing [[email protected]](mailto:[email protected]). Please include your name and a description of the incident, and we will get back to you ASAP.
 
 Sometimes, participants violating the Code of Conduct are unaware that their behavior is harmful, and an open conversation clears things up to move forward. However, if a participant continues with the behavior, the p5.js team may take any action they deem appropriate, up to and including expulsion from all p5.js spaces and identification of the participant as a harasser to other p5.js members or the general public.
 
 ---
-This statement is licensed under a [Creative Commons license](https://creativecommons.org/licenses/by-sa/4.0/). Please feel free to share and remix with attribution.
+
+This statement is licensed under a [Creative Commons license](https://creativecommons.org/licenses/by-sa/4.0/). Please feel free to share and remix with attribution.

.github/CONTRIBUTING.md

@@ -1,8 +1,9 @@
-# Contributing to the p5.js Web Editor 
+# Contributing to the p5.js Web Editor
 
 Hello! We welcome community contributions to the p5.js Web Editor. Contributing takes many forms and doesn't have to be **writing code**, it can be **reporting bugs**, **proposing new features**, **creating UI/UX designs**, and **updating documentation**.
 
 ## Table of Contents
+
 - [Contributing to the p5.js Web Editor](#contributing-to-the-p5js-web-editor)
   - [Table of Contents](#table-of-contents)
   - [Code of Conduct](#code-of-conduct)
@@ -21,38 +22,46 @@ Hello! We welcome community contributions to the p5.js Web Editor. Contributing
 Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/develop/.github/CODE_OF_CONDUCT.md).
 
 ## How Can I Contribute?
+
 If you're new to open source, [read about how to contribute to open source](https://opensource.guide/how-to-contribute/).
 
 ### First Steps
+
 Don't know where to begin? Here are some suggestions to get started:
-* Think about what you're hoping to learn by working on open source. The web editor is a full-stack web application, therefore there's tons of different areas to focus on:
+
+- Think about what you're hoping to learn by working on open source. The web editor is a full-stack web application, therefore there's tons of different areas to focus on:
   - UI/UX design
   - Project management: Organizing tickets, pull requests, tasks
   - Front end: React/Redux, CSS/Sass, CodeMirror
   - Back end: Node, Express, MongoDB, Jest, AWS
   - DevOps: Travis CI, Jest, Docker, Kubernetes, AWS
   - Documentation
   - Translations: Application and documentation
-* Use the [p5.js Web Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Open an issue.
-* Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
-* Try getting the project running locally on your computer by following the [installation steps](./../contributor_docs/installation.md).
-* Look through the documentation in the [developer docs](../contributor_docs/). Is there anything that could be expanded? Is there anything missing?
-* Look at the [development guide](./../contributor_docs/development.md).
+- Use the [p5.js Web Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Open an issue.
+- Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
+- Try getting the project running locally on your computer by following the [installation steps](./../contributor_docs/installation.md).
+- Look through the documentation in the [developer docs](../contributor_docs/). Is there anything that could be expanded? Is there anything missing?
+- Look at the [development guide](./../contributor_docs/development.md).
 
 ### Good First Issues
+
 For first-time contributors or those who want to start with a small task, [check out the list of good first issues](https://github.com/processing/p5.js-web-editor/labels/good%20first%20issue), or [issues that need documentation of steps to reproduce](https://github.com/processing/p5.js-web-editor/issues?q=is%3Aissue+is%3Aopen+label%3A%22needs+steps+to+reproduce%22). If the issue has not been assigned to anyone, then you can work on it! It's okay to not know how to fix an issue, and feel free to ask questions about to approach the problem! We are all here to learn and make something awesome. Someone from the community would help you out and these are great issues for learning about the web editor, its file structure and its development process.
 
 ### Good Medium Issues
+
 If you're looking for a bigger project to take on, look through the issues tagged [good medium issue](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issue). These issues are self-contained projects that may take longer to work on, but are great if you're looking to get more deeply involved in contributing!
 
 ### Project Board
+
 Many issues are related to each other and fall under bigger projects. To get a bigger picture, look at the [All Projects](https://github.com/processing/p5.js-web-editor/projects/4) board.
 
 ### Project Ideas
+
 If you're looking for inspiration for Google Summer of Code or a bigger project, there's a [project list](https://github.com/processing/processing/wiki/Project-List#p5js-web-editor) maintained on the Processing wiki.
 
 ### Issue Search and Tagging
-If you're looking for issues to work on, a good place to start is with tickets labeled [high priority](https://github.com/processing/p5.js-web-editor/labels/priority%3Ahigh). You can also look for tickets that are [feature enhancements](https://github.com/processing/p5.js-web-editor/labels/type%3Afeature), [bug fixes](https://github.com/processing/p5.js-web-editor/labels/type%3Abug), and a few other tags. 
+
+If you're looking for issues to work on, a good place to start is with tickets labeled [high priority](https://github.com/processing/p5.js-web-editor/labels/priority%3Ahigh). You can also look for tickets that are [feature enhancements](https://github.com/processing/p5.js-web-editor/labels/type%3Afeature), [bug fixes](https://github.com/processing/p5.js-web-editor/labels/type%3Abug), and a few other tags.
 
 If you feel like an issue is tagged incorrectly (e.g. it's low priority and you think it should be high), please update the issue!
 
@@ -64,5 +73,5 @@ Then, look at the [development guide](https://github.com/processing/p5.js-web-ed
 
 ### Contribution Guides
 
-* [https://guides.github.com/activities/hello-world/](https://guides.github.com/activities/hello-world/)
-* [https://guides.github.com/activities/forking/](https://guides.github.com/activities/forking/)
+- [https://guides.github.com/activities/hello-world/](https://guides.github.com/activities/hello-world/)
+- [https://guides.github.com/activities/forking/](https://guides.github.com/activities/forking/)

.github/ISSUE_TEMPLATE/config.yml

@@ -9,4 +9,4 @@ contact_links:
     about: Report issues with the p5.js website here.
   - name: 💬 Forum
     url: https://discourse.processing.org/c/p5js
-    about: Have other questions about using p5.js? Ask them here!
+    about: Have other questions about using p5.js? Ask them here!

.github/ISSUE_TEMPLATE/existing-feature-enhancement.yml

@@ -1,6 +1,6 @@
 name: 💡 Existing Feature Enhancement
 description: Suggest an improvement to an existing feature.
-labels: [ Enhancement ]
+labels: [Enhancement]
 body:
   - type: textarea
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -1,6 +1,6 @@
 name: 🌱 New Feature Request
 description: Request a new feature be added.
-labels: [ Feature Request ]
+labels: [Feature Request]
 body:
   - type: textarea
     attributes: