Merge branch 'develop' into refactor/modal

Author: lindapaiste

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,12 @@
+blank_issues_enabled: false
+
+contact_links:
+  - name: 🌸 p5.js Issues
+    url: https://github.com/processing/p5.js/issues
+    about: Report issues with the p5.js here.
+  - name: 🌐 Website Issues
+    url: https://github.com/processing/p5.js-website/issues
+    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!

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

@@ -0,0 +1,16 @@
+name: 💡 Existing Feature Enhancement
+description: Suggest an improvement to an existing feature.
+labels: [ Enhancement ]
+body:
+  - type: textarea
+    attributes:
+      label: Increasing Access
+      description: How would this new feature help [increase access](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) to the p5.js Web Editor? (If you're not sure, you can type "Unsure" here and let others from the community offer their thoughts.)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Feature enhancement details
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,16 @@
+name: 🌱 New Feature Request
+description: Request a new feature be added.
+labels: [ Feature Request ]
+body:
+  - type: textarea
+    attributes:
+      label: Increasing Access
+      description: How would this new feature help [increase access](https://github.com/processing/p5.js/blob/main/contributor_docs/access.md) to the p5.js Web Editor? (If you're not sure, you can type "Unsure" here and let others from the community offer their thoughts.)
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Feature request details
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/found-a-bug.yml

@@ -0,0 +1,76 @@
+name: 🐛 Found a Bug
+description: Report p5.js web editor bugs (broken or incorrect behaviour).
+labels: [ Bug ]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        - Please make sure to [search for existing issues](https://github.com/processing/p5.js-web-editor/issues) before filing a new one!
+
+  - type: input
+    attributes:
+      label: p5.js version
+      description: You can find this in the first line of the p5.js file.
+    validations:
+      required: false
+
+  - type: dropdown
+    attributes:
+      label: What is your operating system?
+      options:
+        - Windows
+        - Mac OS
+        - Linux
+        - Android
+        - iOS
+        - Other (specify if possible)
+    validations:
+      required: false
+
+  - type: input
+    attributes:
+      label: Web browser and version
+      description: |
+        In the address bar, on Chrome enter `chrome://version`, on Firefox enter `about:support`. On Safari, use `About Safari`.
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: Actual Behavior
+      placeholder: What is currently happening.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: |
+        If you want to include screenshots, paste them into the markdown editor below.
+      placeholder: What were you expecting?
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Steps to reproduce
+      description: |
+        - Add steps to reproduce bugs or add information on the place where the feature should be implemented.
+        - Add links to a sample deployment or code.
+      value: "### Steps: 
+      
+              1.
+              2.
+              3.
+          
+              ### Snippet:
+              
+              ```js
+              
+              
+              // Paste your code here :)
+              
+              
+              ```"
+    validations:
+      required: true

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

@@ -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
   */

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

@@ -752,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>

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

@@ -15,7 +15,8 @@ import {
   zhCN,
   zhTW,
   uk,
-  sv
+  sv,
+  tr
 } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
@@ -32,7 +33,8 @@ const availableLanguages = [
   'sv',
   'uk-UA',
   'zh-CN',
-  'zh-TW'
+  'zh-TW',
+  'tr'
 ];
 
 export function languageKeyToLabel(lang) {
@@ -49,7 +51,8 @@ export function languageKeyToLabel(lang) {
     sv: 'Svenska',
     'uk-UA': 'Українська',
     'zh-CN': '简体中文',
-    'zh-TW': '正體中文'
+    'zh-TW': '正體中文',
+    tr: 'Türkçe'
   };
   return languageMap[lang];
 }
@@ -68,7 +71,8 @@ export function languageKeyToDateLocale(lang) {
     sv,
     'uk-UA': uk,
     'zh-CN': zhCN,
-    'zh-TW': zhTW
+    'zh-TW': zhTW,
+    tr
   };
   return languageMap[lang];
 }

client/common/Button.jsx

@@ -158,7 +158,8 @@ class Editor extends React.Component {
       // choose a color, it deletes characters inline. This is a
       // hack to prevent that.
       [`${metaKey}-K`]: (cm, event) =>
-        cm.state.colorpicker.popup_color_picker({ length: 0 })
+        cm.state.colorpicker.popup_color_picker({ length: 0 }),
+      [`${metaKey}-.`]: 'toggleComment' // Note: most adblockers use the shortcut ctrl+.
     });
 
     this.initializeDocuments(this.props.files);
@@ -312,7 +313,7 @@ class Editor extends React.Component {
       mode = 'application/json';
     } else if (fileName.match(/.+\.(frag|glsl)$/i)) {
       mode = 'x-shader/x-fragment';
-    } else if (fileName.match(/.+\.(vert)$/i)) {
+    } else if (fileName.match(/.+\.(vert|stl)$/i)) {
       mode = 'x-shader/x-vertex';
     } else {
       mode = 'text/plain';

client/components/Nav.jsx

@@ -61,6 +61,10 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">{metaKeyName} + /</span>
           <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{metaKeyName} + .</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
+        </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">{metaKeyName} + K</span>
           <span>{t('KeyboardShortcuts.CodeEditing.ColorPicker')}</span>

client/i18n.js

@@ -18,6 +18,7 @@ class Toolbar extends React.Component {
     super(props);
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handleProjectNameChange = this.handleProjectNameChange.bind(this);
+    this.handleProjectNameClick = this.handleProjectNameClick.bind(this);
     this.handleProjectNameSave = this.handleProjectNameSave.bind(this);
 
     this.state = {
@@ -36,6 +37,15 @@ class Toolbar extends React.Component {
     this.setState({ projectNameInputValue: event.target.value });
   }
 
+  handleProjectNameClick() {
+    if (this.canEditProjectName) {
+      this.props.showEditProjectName();
+      setTimeout(() => {
+        this.projectNameInput?.focus();
+      }, 140);
+    }
+  }
+
   handleProjectNameSave() {
     const newProjectName = this.state.projectNameInputValue.trim();
     if (newProjectName.length === 0) {
@@ -132,12 +142,7 @@ class Toolbar extends React.Component {
         <div className={nameContainerClass}>
           <button
             className="toolbar__project-name"
-            onClick={() => {
-              if (canEditProjectName) {
-                this.props.showEditProjectName();
-                setTimeout(() => this.projectNameInput.focus(), 140);
-              }
-            }}
+            onClick={this.handleProjectNameClick}
             disabled={!canEditProjectName}
             aria-label={this.props.t('Toolbar.EditSketchARIA')}
           >

client/modules/IDE/components/Editor.jsx

@@ -17,7 +17,7 @@
     flex-direction: column;
   }
   & .react-tabs__tab-panel {
-    overflow-y: scroll;
+    overflow-y: auto;
   }
 }
 

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -8,13 +8,13 @@ The code for the p5.js web editor adheres to web accessibility standards. The fo
 
 * Screen Readers are an assistive technology for vision loss that helps users to navigate a web page. They are able to prioritize content based on the semantic meaning of HTML tags. Therefore, it is important to use specific tags, such as `nav`, `ul`, `li`, `section`, and so on. `div` is the least screen reader-friendly tag. For example, [here is the semantic meaning of the `body` tag](http://html5doctor.com/element-index/#body)
 * All buttons/links/windows need to be accessible by the keyboard ( By tabbing, pressing space etc.)
-* In cases where tags are not screen reader-friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Editor.jsx#L249)
-* When opening a new window or pop up window, ensure the keyboard focus also moves to the new window. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/NewFileForm.jsx#L16)
+* In cases where tags are not screen reader-friendly, we can take advantage of [tabIndex](http://webaim.org/techniques/keyboard/tabindex). Using tabIndex ensures that all elements are accessible via keyboard. [code example](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/modules/IDE/components/Sidebar.jsx#L88)
+* When opening a new window or pop up window, ensure the keyboard focus also moves to the new window. [code example](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/modules/IDE/components/NewFileForm.jsx#L32)
 
 **Labeling**
 
-* When creating button icons, images, or something without text (this does not include an HTML5 `<button>`), use [aria-labels](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute). [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/Toolbar.jsx#L67)
-* All `<table>`s need to have a `summary` attribute. This will ensure user is given context to what the table is. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/modules/IDE/components/SketchList.jsx#L39)
-* `ul`s and `nav`s menus need to include a title. [code example](https://github.com/processing/p5.js-web-editor/blob/develop/client/components/Nav.jsx#L7)
+* When creating button icons, images, or something without text (this does not include an HTML5 `<button>`), use [aria-labels](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label). [code example](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/modules/IDE/components/Toolbar.jsx#L107)
+* All `<table>`s need to have a `summary` attribute. This will ensure user is given context to what the table is. [code example](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/modules/IDE/components/SketchList.jsx#L491)
+* `ul`s and `nav`s menus need to include a title. [code example](https://github.com/processing/p5.js-web-editor/blob/edae248eede21d7ad7702945929efbcdfeb4d9ea/client/components/Nav.jsx#L281)
 
 For more information on accessibility see the [teach access tutorial](https://teachaccess.github.io/tutorial/)

client/modules/IDE/components/Toolbar.jsx

@@ -30,7 +30,7 @@ See the [release guide](./release.md) for information about creating a release.
 ## Tests
 To run the test suite simply run `npm test` (after installing dependencies with `npm install`)
 
-A sample unit test could be found here: [Nav.test.jsx](../client/components/__test__/Nav.test.jsx).
+A sample unit test could be found here: [Nav.unit.test.jsx](../client/components/Nav.unit.test.jsx).
 
 ## Committing Code
 Inspired by [Git/GitHub commit standards & conventions](https://gist.github.com/digitaljhelms/3761873).
@@ -73,7 +73,7 @@ Structure your commit message like this:
 * Note that you can connect multiple issues to a commit, if necessary: `[#123][#456] Add Button component`
 
 ## Design
-- [Style Guide/Design System on Figma](https://github.com/processing/p5.js-web-editor/labels/good%20medium%20issues)
+- [Style Guide/Design System on Zeplin](https://scene.zeplin.io/project/55f746c54a02e1e50e0632c3)
 - [Latest Design on Figma](https://www.figma.com/file/5KychMUfHlq97H0uDsen1U/p5-web-editor-2017.p.copy?node-id=0%3A1). Note that the current design on the website has diverged, parts of this design will not be implemented, but it is still helpful to have around for reference.
 - [Mobile Designs](https://www.figma.com/file/5KychMUfHlq97H0uDsen1U/p5-web-editor-2017.p.copy?node-id=0%3A2529), [Responsive Designs](https://www.figma.com/file/5KychMUfHlq97H0uDsen1U/p5-web-editor-2017.p.copy?node-id=0%3A3292)
 

client/styles/components/_preferences.scss

@@ -49,7 +49,7 @@ Note that this takes up a significant amount of space on your machine. Make sure
 3. Clone this repository and cd into it
 4. `$ docker-compose -f docker-compose-development.yml build`
 5. `$ cp .env.example .env`
-6. (Optional) Update `.env` with necessary keys to enable certain app behavoirs, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
+6. (Optional) Update `.env` with necessary keys to enable certain app behaviors, i.e. add Github ID and Github Secret if you want to be able to log in with Github.
 7. `$ docker-compose -f docker-compose-development.yml run --rm app npm run fetch-examples` -  note that you need to configure your GitHub Credentials, which you can do by following the [Github API Configuration](#github-api-configuration) section.
 8. Enable Prettier in your text editor by following [this guide](https://prettier.io/docs/en/editors.html).