Merge branch 'develop' into develop

Author: raclim

.github/ISSUE_TEMPLATE/feature-request.md renamed to .github/ISSUE_TEMPLATE/🌱-new-feature-request.md

@@ -1,16 +1,16 @@
 ---
-name: New Feature Request
+name: "\U0001F331 New Feature Request"
 about: This template is for requesting a new feature be added.
 title: ''
-labels: feature request
+labels: ''
 assignees: ''
 
 ---
 
 <!--
 Hi there!
 
-Thank you for contributing to the p5.js Editor project
+Thank you for contributing to the p5.js Editor project. 
 
 Until further notice, we will only add new features that increase access.
 

.github/ISSUE_TEMPLATE/found-a-bug.md renamed to .github/ISSUE_TEMPLATE/🐛-found-a-bug.md

@@ -1,6 +1,8 @@
 ---
-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.
+name: "\U0001F41B 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: ''

.github/ISSUE_TEMPLATE/existing-feature-enhancement.md renamed to .github/ISSUE_TEMPLATE/💡-existing-feature-enhancement.md

@@ -1,8 +1,8 @@
 ---
-name: Existing Feature Enhancement
+name: "\U0001F4A1 Existing Feature Enhancement"
 about: This template is for suggesting an improvement for an existing feature.
 title: ''
-labels: enhancement
+labels: ''
 assignees: ''
 
 ---

.github/workflows/test.yml

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

README.md

@@ -1,10 +1,5 @@
 # [p5.js Editor](https://editor.p5js.org)
 
-
-Documentation is also available in the following languages:
-
-[한국어](https://github.com/processing/p5.js-web-editor/blob/develop/translations/ko)
-
 ## Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼
 
 The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything. It is designed with beginners in mind, limiting features and frills. The editor is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone.
@@ -21,6 +16,12 @@ Learn more about [our community](https://p5js.org/community/) and read our commu
 
 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/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.
 
+## Setting Up the Development Environment
+
+- Refer to [this documentation for setting up your environment](https://github.com/processing/p5.js-web-editor/blob/develop/contributor_docs/installation.md)
+
+
+
 ## Issues
 
 If you have found a bug in the p5.js Web Editor, you can file it under the ["issues" tab](https://github.com/processing/p5.js-web-editor/issues). You can also request new features here. A set of templates for reporting issues and requesting features are provided to assist you (and us!). The p5.js Editor is maintained mostly by volunteers, so we thank you for your patience as we try to address your issues as soon as we can. Please post bugs and feature requests in the correct repository if you can:

client/common/Button.jsx

@@ -257,7 +257,7 @@ Button.propTypes = {
    * The visible part of the button, telling the user what
    * the action is
    */
-  children: PropTypes.element,
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
   /**
     If the button can be activated or not
   */

client/common/icons.jsx

@@ -29,28 +29,28 @@ import CircleInfo from '../images/circle-info.svg';
 // could also give these a default size, color, etc. based on the theme
 // Need to add size to these - like small icon, medium icon, large icon. etc.
 function withLabel(SvgComponent) {
-  const Icon = (props) => {
-    const StyledIcon = styled(SvgComponent)`
-      &&& {
-        color: ${prop('Icon.default')};
+  const StyledIcon = styled(SvgComponent)`
+    &&& {
+      color: ${prop('Icon.default')};
+      & g,
+      & path,
+      & polygon {
+        opacity: 1;
+        fill: ${prop('Icon.default')};
+      }
+      &:hover {
+        color: ${prop('Icon.hover')};
         & g,
         & path,
         & polygon {
           opacity: 1;
-          fill: ${prop('Icon.default')};
-        }
-        &:hover {
-          color: ${prop('Icon.hover')};
-          & g,
-          & path,
-          & polygon {
-            opacity: 1;
-            fill: ${prop('Icon.hover')};
-          }
+          fill: ${prop('Icon.hover')};
         }
       }
-    `;
+    }
+  `;
 
+  const Icon = (props) => {
     const { 'aria-label': ariaLabel } = props;
     if (ariaLabel) {
       return (

client/components/AddRemoveButton.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import AddIcon from '../images/plus.svg';
 import RemoveIcon from '../images/minus.svg';
 
-const AddRemoveButton = ({ type, onClick, t }) => {
+const AddRemoveButton = ({ type, onClick }) => {
+  const { t } = useTranslation();
   const alt =
     type === 'add'
       ? t('AddRemoveButton.AltAddARIA')
@@ -25,8 +26,7 @@ const AddRemoveButton = ({ type, onClick, t }) => {
 
 AddRemoveButton.propTypes = {
   type: PropTypes.oneOf(['add', 'remove']).isRequired,
-  onClick: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired
 };
 
-export default withTranslation()(AddRemoveButton);
+export default AddRemoveButton;

client/components/Nav.jsx

@@ -278,6 +278,7 @@ class Nav extends React.PureComponent {
             onClick={this.toggleDropdownForFile}
             onBlur={this.handleBlur}
             onFocus={this.clearHideTimeout}
+            title="File"
             onMouseOver={() => {
               if (this.state.dropdownOpen !== 'none') {
                 this.setDropdown('file');
@@ -396,6 +397,7 @@ class Nav extends React.PureComponent {
             onClick={this.toggleDropdownForEdit}
             onBlur={this.handleBlur}
             onFocus={this.clearHideTimeout}
+            title="Edit"
             onMouseOver={() => {
               if (this.state.dropdownOpen !== 'none') {
                 this.setDropdown('edit');
@@ -454,6 +456,7 @@ class Nav extends React.PureComponent {
             onClick={this.toggleDropdownForSketch}
             onBlur={this.handleBlur}
             onFocus={this.clearHideTimeout}
+            title="Sketch"
             onMouseOver={() => {
               if (this.state.dropdownOpen !== 'none') {
                 this.setDropdown('sketch');
@@ -539,6 +542,7 @@ class Nav extends React.PureComponent {
             onClick={this.toggleDropdownForHelp}
             onBlur={this.handleBlur}
             onFocus={this.clearHideTimeout}
+            title="Help"
             onMouseOver={() => {
               if (this.state.dropdownOpen !== 'none') {
                 this.setDropdown('help');
@@ -600,6 +604,7 @@ class Nav extends React.PureComponent {
             onClick={this.toggleDropdownForLang}
             onBlur={this.handleBlur}
             onFocus={this.clearHideTimeout}
+            title="Language"
             onMouseOver={() => {
               if (this.state.dropdownOpen !== 'none') {
                 this.setDropdown('lang');
@@ -667,6 +672,26 @@ class Nav extends React.PureComponent {
                 हिन्दी
               </button>
             </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="ko"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                한국어
+              </button>
+            </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="it"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                Italiano
+              </button>
+            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}
@@ -727,6 +752,16 @@ class Nav extends React.PureComponent {
                 正體中文
               </button>
             </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="tr"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                Türkçe
+              </button>
+            </li>
           </ul>
         </li>
       </React.Fragment>
@@ -740,15 +775,15 @@ class Nav extends React.PureComponent {
           this.renderLanguageMenu(navDropdownState)}
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
-            <span className="nav__item-header">
+            <span className="nav__item-header" title="Login">
               {this.props.t('Nav.Login')}
             </span>
           </Link>
         </li>
         <span className="nav__item-or">{this.props.t('Nav.LoginOr')}</span>
         <li className="nav__item">
           <Link to="/signup" className="nav__auth-button">
-            <span className="nav__item-header">
+            <span className="nav__item-header" title="SignUp">
               {this.props.t('Nav.SignUp')}
             </span>
           </Link>

client/components/PreviewNav.jsx

@@ -1,47 +1,50 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project, t }) => (
-  <nav className="nav preview-nav">
-    <div className="nav__items-left">
-      <div className="nav__item-logo">
-        <LogoIcon
-          role="img"
-          aria-label={t('Common.p5logoARIA')}
-          focusable="false"
-          className="svg__logo"
-        />
+const PreviewNav = ({ owner, project }) => {
+  const { t } = useTranslation();
+  return (
+    <nav className="nav preview-nav">
+      <div className="nav__items-left">
+        <div className="nav__item-logo">
+          <LogoIcon
+            role="img"
+            aria-label={t('Common.p5logoARIA')}
+            focusable="false"
+            className="svg__logo"
+          />
+        </div>
+        <Link
+          className="nav__item"
+          to={`/${owner.username}/sketches/${project.id}`}
+        >
+          {project.name}
+        </Link>
+        <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
+        <Link className="nav__item" to={`/${owner.username}/sketches/`}>
+          {owner.username}
+        </Link>
       </div>
-      <Link
-        className="nav__item"
-        to={`/${owner.username}/sketches/${project.id}`}
-      >
-        {project.name}
-      </Link>
-      <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
-      <Link className="nav__item" to={`/${owner.username}/sketches/`}>
-        {owner.username}
-      </Link>
-    </div>
-    <div className="nav__items-right">
-      <Link
-        to={`/${owner.username}/sketches/${project.id}`}
-        aria-label={t('PreviewNav.EditSketchARIA')}
-      >
-        <CodeIcon
-          className="preview-nav__editor-svg"
-          focusable="false"
-          aria-hidden="true"
-        />
-      </Link>
-    </div>
-  </nav>
-);
+      <div className="nav__items-right">
+        <Link
+          to={`/${owner.username}/sketches/${project.id}`}
+          aria-label={t('PreviewNav.EditSketchARIA')}
+        >
+          <CodeIcon
+            className="preview-nav__editor-svg"
+            focusable="false"
+            aria-hidden="true"
+          />
+        </Link>
+      </div>
+    </nav>
+  );
+};
 
 PreviewNav.propTypes = {
   owner: PropTypes.shape({
@@ -50,8 +53,7 @@ PreviewNav.propTypes = {
   project: PropTypes.shape({
     name: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired
-  }).isRequired,
-  t: PropTypes.func.isRequired
+  }).isRequired
 };
 
-export default withTranslation()(PreviewNav);
+export default PreviewNav;

client/components/__snapshots__/Nav.unit.test.jsx.snap

@@ -22,7 +22,9 @@ exports[`Nav renders correctly 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            title="File"
+          >
             <span
               class="nav__item-header"
             />
@@ -65,7 +67,9 @@ exports[`Nav renders correctly 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            title="Edit"
+          >
             <span
               class="nav__item-header"
             />
@@ -116,7 +120,9 @@ exports[`Nav renders correctly 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            title="Sketch"
+          >
             <span
               class="nav__item-header"
             />
@@ -166,7 +172,9 @@ exports[`Nav renders correctly 1`] = `
         <li
           class="nav__item"
         >
-          <button>
+          <button
+            title="Help"
+          >
             <span
               class="nav__item-header"
             />