Merge branch 'develop' into refactor/keydown

Author: raclim

.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>

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/common/icons.jsx

@@ -13,6 +13,8 @@ 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';
@@ -83,6 +85,8 @@ 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);

client/components/Nav/NavBar.jsx

@@ -9,7 +9,7 @@ import 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);
@@ -47,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) => ({
@@ -56,9 +65,7 @@ function NavBar({ children }) {
           );
         },
         onClick: () => {
-          setDropdownOpen((prevState) =>
-            prevState === 'none' ? dropdown : 'none'
-          );
+          toggleDropdownOpen(dropdown);
         },
         onBlur: handleBlur,
         onFocus: clearHideTimeout
@@ -72,15 +79,16 @@ function NavBar({ children }) {
           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>
@@ -91,11 +99,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/constants.js

@@ -30,8 +30,6 @@ export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
 export const RESET_PROJECT = 'RESET_PROJECT';
-export const SHOW_EDIT_PROJECT_NAME = 'SHOW_EDIT_PROJECT_NAME';
-export const HIDE_EDIT_PROJECT_NAME = 'HIDE_EDIT_PROJECT_NAME';
 
 export const SET_PROJECT = 'SET_PROJECT';
 export const SET_PROJECTS = 'SET_PROJECTS';