Merge remote-tracking branch 'upstream/develop' into refactor/share-m…

…odal

# Conflicts:
#	client/modules/IDE/pages/IDEView.jsx
#	client/modules/IDE/components/IDEOverlays.jsx

.env.example

@@ -19,7 +19,6 @@ 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

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<script>
+    // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
+    window.$RefreshReg$ = () => {};
+    window.$RefreshSig$ = () => () => {};
+</script>

.storybook/preview.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router';
 
 import ThemeProvider from '../client/modules/App/components/ThemeProvider';
 import configureStore from '../client/store';
 import '../client/i18n-test';
-import '../client/styles/build/css/main.css'
+import '../client/styles/storybook.css'
 
 const initialState = window.__INITIAL_STATE__;
 
@@ -13,9 +14,11 @@ const store = configureStore(initialState);
 export const decorators = [
   (Story) => (
     <Provider store={store}>
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
+      <MemoryRouter>
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      </MemoryRouter>
     </Provider>
   ),
 ]

README.md

@@ -12,15 +12,10 @@ The p5.js Editor is a collaborative project created by many individuals, mostly
 
 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).
 
-## Get Started
+## Getting Started
 
 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
 
@@ -31,10 +26,45 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 * p5.sound: [https://github.com/processing/p5.js-sound/issues](https://github.com/processing/p5.js-sound/issues)
 * p5.js website: [https://github.com/processing/p5.js-website/issues](https://github.com/processing/p5.js-website/issues)
 
+
+### How Do I Know My Issue or Pull Request is Getting Reviewed?
+
+To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/10), [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
+
+Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
+
+
+### When Will the Next Production Release Be?
+
+We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
+
+2.9.3 PATCH Release: By November 17, 2023
+
+2.10.0 MINOR Release: By December 15, 2023
+
+[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
+
+
+## References for Contributing to the p5.js Web Editor
+
+[Code of Conduct](https://editor.p5js.org/code-of-conduct)
+
+[Contribution Guidelines for p5.js](https://p5js.org/contributor-docs/#/)
+
+[Contribution Guidelines for the p5.js Web Editor](https://github.com/processing/p5.js-web-editor/tree/develop/contributor_docs)
+
+[p5.js Community Statement](https://p5js.org/community/)
+
+
 ## Acknowledgements
 
 Support for this project has come from [Processing Foundation](https://processingfoundation.org/), [NYU ITP](https://tisch.nyu.edu/itp), [CS4All, NYC DOE](http://cs4all.nyc/), [COSA at DU](https://liberalarts.du.edu/emergent-digital-practices/open-source-arts), [STUDIO for Creative Inquiry](https://studioforcreativeinquiry.org/), [Grant for the Web](https://www.grantfortheweb.org/), [New Media Rights](https://www.newmediarights.org/), and many others. 
 
-Hosting and technical support has come from: <br />
-<a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a> 
+Hosting and technical support has come from: 
+<br />
+<br />
+<a href="https://releasehub.com/" target="_blank"><img width="100" src="https://assets.website-files.com/603dd147c5b0a480611bd348/603dd147c5b0a469bc1bd451_logo--dark.svg" /></a>
+<br />
 <a href="https://www.browserstack.com/" target="_blank"><img width="100" src="https://user-images.githubusercontent.com/6063380/46976166-ab280a80-d096-11e8-983b-18dd38c8cc9b.png" /></a>
+<br />
+<a href="https://www.fastly.com/" target="_blank"><img width="100" src="https://cdn-assets-us.frontify.com/s3/frontify-enterprise-files-us/eyJwYXRoIjoiZmFzdGx5XC9hY2NvdW50c1wvYzJcLzQwMDEwMjNcL3Byb2plY3RzXC8xMVwvYXNzZXRzXC80ZVwvNzc0XC9lZTZmYzlkOWYzNWE1NjBkNjUzNjFkNGI0NGQ2MTNmZi0xNjIxNTIyODg4LnBuZyJ9:fastly:nVuY3PxyFqQMI6elJsMzxAGLH3IFlmiuMdacHAGRMkE?width=2400" /></a>

client/common/ButtonOrLink.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '../test-utils';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
 import ButtonOrLink from './ButtonOrLink';
 
 describe('ButtonOrLink', () => {
@@ -25,8 +25,12 @@ describe('ButtonOrLink', () => {
     expect(link).toHaveAttribute('href', 'https://p5js.org');
   });
 
-  it('can render an internal link with react-router', () => {
+  it('can render an internal link with react-router', async () => {
     render(<ButtonOrLink href="/about">About</ButtonOrLink>);
-    // TODO: how can this be tested? Needs a router provider?
+
+    const link = screen.getByText('About');
+    fireEvent.click(link);
+
+    await waitFor(() => expect(history.location.pathname).toEqual('/about'));
   });
 });

client/components/mobile/IconButton.jsx → client/common/IconButton.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Button from '../../common/Button';
-import { remSize } from '../../theme';
+import Button from './Button';
+import { remSize } from '../theme';
 
 const ButtonWrapper = styled(Button)`
   width: ${remSize(48)};

client/common/icons.jsx

@@ -13,15 +13,18 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
 import More from '../images/more.svg';
+import Editor from '../images/editor.svg';
+import Account from '../images/account.svg';
 import Code from '../images/code.svg';
 import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
-
 import Folder from '../images/folder-padded.svg';
-
 import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
+import Add from '../images/add.svg';
+import Filter from '../images/filter.svg';
+import Cross from '../images/cross.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -83,16 +86,19 @@ export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
 export const ExitIcon = withLabel(Exit);
+export const EditorIcon = withLabel(Editor);
+export const AccountIcon = withLabel(Account);
 export const DropdownArrowIcon = withLabel(DropdownArrow);
 export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
 export const SaveIcon = withLabel(Save);
-
 export const FolderIcon = withLabel(Folder);
-
+export const CrossIcon = withLabel(Cross);
 export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
+export const AddIcon = withLabel(Add);
+export const FilterIcon = withLabel(Filter);

client/components/Dropdown.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { remSize, prop } from '../theme';
-import IconButton from './mobile/IconButton';
+import IconButton from '../common/IconButton';
 
 const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};

client/components/Nav/NavBar.jsx

@@ -6,9 +6,10 @@ import React, {
   useRef,
   useState
 } from 'react';
+import useKeyDownHandlers from '../../modules/IDE/hooks/useKeyDownHandlers';
 import { MenuOpenContext, NavBarContext } from './contexts';
 
-function NavBar({ children }) {
+function NavBar({ children, className }) {
   const [dropdownOpen, setDropdownOpen] = useState('none');
 
   const timerRef = useRef(null);
@@ -31,18 +32,9 @@ function NavBar({ children }) {
     };
   }, [nodeRef, setDropdownOpen]);
 
-  // TODO: replace with `useKeyDownHandlers` after #2052 is merged
-  useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.keyCode === 27) {
-        setDropdownOpen('none');
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown, false);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, false);
-    };
-  }, [setDropdownOpen]);
+  useKeyDownHandlers({
+    escape: () => setDropdownOpen('none')
+  });
 
   const clearHideTimeout = useCallback(() => {
     if (timerRef.current) {
@@ -55,6 +47,15 @@ function NavBar({ children }) {
     timerRef.current = setTimeout(() => setDropdownOpen('none'), 10);
   }, [timerRef, setDropdownOpen]);
 
+  const toggleDropdownOpen = useCallback(
+    (dropdown) => {
+      setDropdownOpen((prevState) =>
+        prevState === dropdown ? 'none' : dropdown
+      );
+    },
+    [setDropdownOpen]
+  );
+
   const contextValue = useMemo(
     () => ({
       createDropdownHandlers: (dropdown) => ({
@@ -64,31 +65,33 @@ function NavBar({ children }) {
           );
         },
         onClick: () => {
-          setDropdownOpen((prevState) =>
-            prevState === 'none' ? dropdown : 'none'
-          );
+          toggleDropdownOpen(dropdown);
         },
         onBlur: handleBlur,
         onFocus: clearHideTimeout
       }),
       createMenuItemHandlers: (dropdown) => ({
-        onMouseUp: () => {
+        onMouseUp: (e) => {
+          if (e.button === 2) {
+            return;
+          }
           setDropdownOpen('none');
         },
         onBlur: handleBlur,
         onFocus: () => {
           clearHideTimeout();
           setDropdownOpen(dropdown);
         }
-      })
+      }),
+      toggleDropdownOpen
     }),
-    [setDropdownOpen, clearHideTimeout, handleBlur]
+    [setDropdownOpen, toggleDropdownOpen, clearHideTimeout, handleBlur]
   );
 
   return (
     <NavBarContext.Provider value={contextValue}>
       <header>
-        <nav className="nav" ref={nodeRef}>
+        <nav className={className} ref={nodeRef}>
           <MenuOpenContext.Provider value={dropdownOpen}>
             {children}
           </MenuOpenContext.Provider>
@@ -99,11 +102,13 @@ function NavBar({ children }) {
 }
 
 NavBar.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
+  className: PropTypes.string
 };
 
 NavBar.defaultProps = {
-  children: null
+  children: null,
+  className: 'nav'
 };
 
 export default NavBar;

client/components/Nav/NavDropdownMenu.jsx

@@ -4,7 +4,7 @@ import React, { useContext, useMemo } from 'react';
 import TriangleIcon from '../../images/down-filled-triangle.svg';
 import { MenuOpenContext, NavBarContext, ParentMenuContext } from './contexts';
 
-function NavDropdownMenu({ id, title, children }) {
+export function useMenuProps(id) {
   const activeMenu = useContext(MenuOpenContext);
 
   const isOpen = id === activeMenu;
@@ -16,6 +16,12 @@ function NavDropdownMenu({ id, title, children }) {
     id
   ]);
 
+  return { isOpen, handlers };
+}
+
+function NavDropdownMenu({ id, title, children }) {
+  const { isOpen, handlers } = useMenuProps(id);
+
   return (
     <li className={classNames('nav__item', isOpen && 'nav__item--open')}>
       <button {...handlers}>

client/components/Nav/NavMenuItem.jsx

@@ -3,7 +3,7 @@ import React, { useContext, useMemo } from 'react';
 import ButtonOrLink from '../../common/ButtonOrLink';
 import { NavBarContext, ParentMenuContext } from './contexts';
 
-function NavMenuItem({ hideIf, ...rest }) {
+function NavMenuItem({ hideIf, className, ...rest }) {
   const parent = useContext(ParentMenuContext);
 
   const { createMenuItemHandlers } = useContext(NavBarContext);
@@ -18,7 +18,7 @@ function NavMenuItem({ hideIf, ...rest }) {
   }
 
   return (
-    <li className="nav__dropdown-item">
+    <li className={className}>
       <ButtonOrLink {...rest} {...handlers} />
     </li>
   );
@@ -31,13 +31,15 @@ NavMenuItem.propTypes = {
   /**
    * Provides a way to deal with optional items.
    */
-  hideIf: PropTypes.bool
+  hideIf: PropTypes.bool,
+  className: PropTypes.string
 };
 
 NavMenuItem.defaultProps = {
   onClick: null,
   value: null,
-  hideIf: false
+  hideIf: false,
+  className: 'nav__dropdown-item'
 };
 
 export default NavMenuItem;

client/components/Nav/contexts.jsx

@@ -6,5 +6,6 @@ export const MenuOpenContext = createContext('none');
 
 export const NavBarContext = createContext({
   createDropdownHandlers: () => ({}),
-  createMenuItemHandlers: () => ({})
+  createMenuItemHandlers: () => ({}),
+  toggleDropdownOpen: () => {}
 });

client/components/RootPage.jsx

@@ -4,10 +4,16 @@ import { prop } from '../theme';
 const RootPage = styled.div`
   min-height: 100%;
   display: flex;
+  justify-content: start;
   flex-direction: column;
   color: ${prop('primaryTextColor')};
   background-color: ${prop('backgroundColor')};
   height: ${({ fixedHeight }) => fixedHeight || 'initial'};
+
+  @media (max-width: 770px) {
+    height: 100%;
+    overflow: hidden;
+  }
 `;
 
 export default RootPage;