Merge branch 'develop' into docs-translation-backup

Author: raclim

.babelrc

@@ -6,6 +6,7 @@
   "env": {
     "production": {
       "plugins": [
+        "babel-plugin-styled-components",
         "transform-react-remove-prop-types",
         "@babel/plugin-transform-react-constant-elements",
         "@babel/plugin-transform-react-inline-elements",
@@ -39,7 +40,8 @@
         ],
         "@babel/plugin-proposal-nullish-coalescing-operator",
         "@babel/plugin-proposal-do-expressions",
-        "@babel/plugin-proposal-function-bind"
+        "@babel/plugin-proposal-function-bind",
+        ["@babel/plugin-proposal-private-methods", { "loose": true }]
       ],
       "presets": [
         "@babel/preset-env",
@@ -48,6 +50,7 @@
     },
     "development": {
       "plugins": [
+        "babel-plugin-styled-components",
         "react-hot-loader/babel"
       ]
     }
@@ -83,6 +86,8 @@
     ],
     "@babel/plugin-proposal-nullish-coalescing-operator",
     "@babel/plugin-proposal-do-expressions",
-    "@babel/plugin-proposal-function-bind"
+    "@babel/plugin-proposal-function-bind",
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
   ]
 }

.env.example

@@ -2,26 +2,32 @@ API_URL=/editor
 AWS_ACCESS_KEY=<your-aws-access-key>
 AWS_REGION=<your-aws-region>
 AWS_SECRET_KEY=<your-aws-secret-key>
+CORS_ALLOW_LOCALHOST=true
 EMAIL_SENDER=<transactional-email-sender>
 EMAIL_VERIFY_SECRET_TOKEN=whatever_you_want_this_to_be_it_only_matters_for_production
 EXAMPLE_USER_EMAIL=[email protected]
 EXAMPLE_USER_PASSWORD=hellop5js
 GG_EXAMPLES_USERNAME=generativedesign
 GG_EXAMPLES_EMAIL=[email protected]
 GG_EXAMPLES_PASS=generativedesign
-ML5_EXAMPLES_USERNAME=ml5
-ML5_EXAMPLES_EMAIL=[email protected]
-ML5_EXAMPLES_PASS=helloml5
 GITHUB_ID=<your-github-client-id>
 GITHUB_SECRET=<your-github-client-secret>
 GOOGLE_ID=<your-google-client-id> (use google+ api)
 GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
 MAILGUN_DOMAIN=<your-mailgun-domain>
 MAILGUN_KEY=<your-mailgun-api-key>
+ML5_LIBRARY_USERNAME=ml5
+ML5_LIBRARY_EMAIL=[email protected]
+ML5_LIBRARY_PASS=helloml5
+MOBILE_ENABLED=true
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
+PREVIEW_PORT=8002
+EDITOR_URL=http://localhost:8000
+PREVIEW_URL=http://localhost:8002
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
+TRANSLATIONS_ENABLED=true
 UI_ACCESS_TOKEN_ENABLED=false
 UPLOAD_LIMIT=250000000

.eslintrc

@@ -1,6 +1,6 @@
 {
-	"extends": "airbnb",
-	"parser": "babel-eslint",
+	"extends": ["airbnb", "prettier"],
+	"parser": "@babel/eslint-parser",
 	"env": {
     "browser": true,
     "node": true,
@@ -16,12 +16,12 @@
     "import/no-unresolved": 0,
     "import/no-named-as-default": 2,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
-    "indent": [2, 2, {"SwitchCase": 1}],
+    "indent": 0,
     "no-console": 0,
     "no-alert": 0,
     "no-underscore-dangle": 0,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
-    "quote-props": [1, "consistent-as-needed"],
+    "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],
     "consistent-return": ["error", { "treatUndefinedAsUnspecified": true }],
     "no-param-reassign": [2, { "props": false }],
@@ -60,13 +60,16 @@
         },
         "allowChildren": false
       }
+    ],
+    "prettier/prettier": [
+      "error"
     ]
   },
   "plugins": [
-    "react", "jsx-a11y", "import"
+    "react", "jsx-a11y", "import", "prettier"
   ],
   "settings": {
-    "import/parser": "babel-eslint",
+    "import/parser": "@babel/eslint-parser",
     "import/resolve": {
       "moduleDirectory": ["node_modules"]
     }
@@ -77,5 +80,13 @@
     "__SERVER__": true,
     "__DISABLE_SSR__": true,
     "__DEVTOOLS__": true
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.stories.jsx"],
+      "rules": {
+        "import/no-extraneous-dependencies": "off"
+      }
+    }
+  ]
 }

.github/CODE_OF_CONDUCT.md

@@ -1,24 +1,51 @@
-# p5.js Code of Conduct
+## [p5.js community statement](http://p5js.org/community/)
+
+p5.js is a community interested in exploring the creation of art and design with technology.
+
+We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners.
+
+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.
+
+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.
+
+In the future:
+* 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
+  * 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 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.
 
-Participants asked to stop any harassing behavior are expected to comply immediately. If a participant engages in harassing 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.
-
-## Also
+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.
 
-* You can read our [community statement](http://p5js.org/community/) on our website.
+---
+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

@@ -15,12 +15,10 @@ Hello! We welcome community contributions to the p5.js Web Editor. Contributing
     - [Issue Search and Tagging](#issue-search-and-tagging)
     - [Beginning Work](#beginning-work)
     - [Contribution Guides](#contribution-guides)
-  - [Writing Commit Messages](#writing-commit-messages)
-  - [Tips](#tips)
 
 ## Code of Conduct
 
-Please follow the guidelines in the [Code of Conduct](https://github.com/processing/p5.js-web-editor/blob/master/.github/CODE_OF_CONDUCT.md).
+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/).
@@ -33,11 +31,13 @@ Don't know where to begin? Here are some suggestions to get started:
   - 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](./../developer_docs/installation.md).
-* Look through the documentation in the [developer docs](../developer_docs/). Is there anything that could be expanded? Is there anything missing?
-* Look at the [development guide](./../developer_docs/development.md).
+* 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.
@@ -60,45 +60,9 @@ If you feel like an issue is tagged incorrectly (e.g. it's low priority and you
 
 If you'd like to work on an issue, please comment on it to let the maintainers know, so that they can assign it to you. If someone else has already commented and taken up that issue, please refrain from working on it and submitting a PR without asking the maintainers as it leads to unnecessary duplication of effort.
 
-Then, follow the [installation guide](https://github.com/processing/p5.js-web-editor/blob/master/developer_docs/installation.md) to get the project building and working on your computer. 
+Then, look at the [development guide](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/development.md) for instructions on how to install the project locally and follow the right development workflow.
 
 ### 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/)
-
-## Writing Commit Messages
-
-Good commit messages serve at least three important purposes:
-
-* They speed up the reviewing process.
-* They help us write good release notes.
-* They help future maintainers understand your change and the reasons behind it.
-
-Structure your commit message like this:
-
- ```
- Short (50 chars or less) summary of changes ( involving Fixes #Issue-number keyword )
-
- More detailed explanatory text, if necessary. Wrap it to about 72
- characters or so. In some contexts, the first line is treated as the
- subject of an email and the rest of the text as the body. The blank
- line separating the summary from the body is critical (unless you omit
- the body entirely); tools like rebase can get confused if you run the
- two together.
-
- Further paragraphs come after blank lines.
-
-   - Bullet points are okay, too
-
-   - Typically a hyphen or asterisk is used for the bullet, preceded by a
-     single space, with blank lines in between, but conventions vary here
- ```
-
-* Write the summary line and description of what you have done in the imperative mode, that is as if you were commanding someone. Start the line with "Fix", "Add", "Change" instead of "Fixed", "Added", "Changed".
-* Always leave the second line blank.
-* Be as descriptive as possible in the description. It helps reasoning about the intention of commits and gives more context about why changes happened.
-
-## Tips
-
-* If it seems difficult to summarize what your commit does, it may be because it includes several logical changes or bug fixes, and are better split up into several commits using `git add -p`.

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: processing
+custom: https://processingfoundation.org/

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,18 @@
+---
+name: Existing Feature Enhancement
+about: This template is for suggesting an improvement for an existing feature.
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+<!--
+Hi there!
+
+To check an option in the sub-areas list, replace the "[ ]" with a "[x]". Be sure to check out how it looks in the Preview tab! Feel free to remove any portion of the template that is not relevant for your issue.
+-->
+
+### How would this new feature help [increase access](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) to the p5.js Editor?
+
+#### Feature enhancement details:

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

@@ -0,0 +1,22 @@
+---
+name: New Feature Request
+about: This template is for requesting a new feature be added.
+title: ''
+labels: feature request
+assignees: ''
+
+---
+
+<!--
+Hi there!
+
+Thank you for contributing to the p5.js Editor project
+
+Until further notice, we will only add new features that increase access.
+
+In order to request a new feature for the p5.js Editor, we need to know how the new feature will increase access.
+-->
+
+### How would this new feature help [increase access](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) to the p5.js Editor?
+
+#### New feature details:

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,22 @@
+---
+name: Found a Bug
+about: This template is for reporting bugs (broken or incorrect behavior). If you have questions about your own code, please visit our forum discourse.processing.org instead.
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+<!--
+Hi there!
+
+To check any option, replace the "[ ]" with a "[x]". Be sure to check out how it looks in the Preview tab! Feel free to remove any portion of the template that is not relevant for your issue.
+-->
+
+#### Details about the bug:
+
+- p5.js version: <!-- You can find this in the first line of the p5.js file -->
+- Web browser and version: <!-- In the address bar, on Chrome enter "chrome://version", on Firefox enter "about:support". On Safari, use "About Safari". -->
+- Operating System: <!-- Ex: Windows/MacOSX/Linux/Android/iOS along with version -->
+- Steps to reproduce this:
+<!-- Include a simple code snippet that demonstrates the problem, along with any console errors produced. If this isn't possible, then simply describe the issue as best you can! -->