Fixed NPM/Yarn mixup and ran linter, updated AllShortcutsModal shortcut

app/web/package.json

@@ -30,6 +30,7 @@
     "cloudinary-react": "^1.6.7",
     "get-active-classes": "^0.0.11",
     "gotrue-js": "^0.9.27",
+    "hotkeys-js": "^3.8.7",
     "html-to-image": "^1.7.0",
     "lodash": "^4.17.21",
     "netlify-identity-widget": "^1.9.1",
@@ -40,6 +41,7 @@
     "react-dropzone": "^11.2.1",
     "react-ga": "^3.3.0",
     "react-helmet": "^6.1.0",
+    "react-hotkeys-hook": "^3.4.0",
     "react-image-crop": "^8.6.6",
     "react-mosaic-component": "^5.0.0",
     "react-tabs": "^3.2.2",

app/web/src/components/EditorMenu/AllShortcutsModal.tsx

@@ -1,12 +1,12 @@
 import { Menu } from '@headlessui/react'
 import { useEffect, useState } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook';
+import { useHotkeys } from 'react-hotkeys-hook'
 import { makeStyles } from '@material-ui/core/styles'
 import Dialog from '@material-ui/core/Dialog'
-import { editorMenuConfig } from './menuConfig';
+import { editorMenuConfig } from './menuConfig'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 
-const SHORTCUT = 'ctrl+/, command+/'
+const SHORTCUT = 'ctrl+shift+/'
 
 const useStyles = makeStyles({
   root: {
@@ -19,26 +19,37 @@ const AllShortcutsModal = () => {
   const [open, setOpen] = useState(false)
   useHotkeys(SHORTCUT, () => setOpen(!open), [open])
 
-    return (<>
-        <Dialog open={open} onClose={() => setOpen(false)} className={classes.root}>
+  return (
+    <>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        className={classes.root}
+      >
         <div className="bg-ch-gray-700 font-fira-sans max-w-7xl rounded shadow-lg text-ch-gray-300 p-4">
           <h2 className="text-2xl mb-4">All Shortcuts</h2>
-        { editorMenuConfig.filter(menu => menu.items.length).map(menu =>
-            <section key={"allshortcuts-"+menu.name}
-            className="my-6">
+          {editorMenuConfig
+            .filter((menu) => menu.items.length)
+            .map((menu) => (
+              <section key={'allshortcuts-' + menu.name} className="my-6">
                 <h3 className="text-xl border-b-2 pb-2 mb-2">{menu.label}</h3>
-            { menu.items.map(item => (
-                <div className="flex gap-8 justify-between" key={"allshortcuts-"+menu.name+"-"+item.label}>
+                {menu.items.map((item) => (
+                  <div
+                    className="flex gap-8 justify-between"
+                    key={'allshortcuts-' + menu.name + '-' + item.label}
+                  >
                     <p>{item.label}</p>
-                    <span className="text-right font-fira-code text-ch-gray-400">{ item.shortcutLabel }</span>
+                    <span className="text-right font-fira-code text-ch-gray-400">
+                      {item.shortcutLabel}
+                    </span>
                   </div>
                 ))}
               </section>
-        )}
+            ))}
         </div>
       </Dialog>
-    </>)
+    </>
+  )
 }
 
-
 export default AllShortcutsModal

app/web/src/components/EditorMenu/Dropdowns.tsx

@@ -1,5 +1,5 @@
 import { Menu } from '@headlessui/react'
-import { useHotkeys } from 'react-hotkeys-hook';
+import { useHotkeys } from 'react-hotkeys-hook'
 
 export function DropdownItem({ config, state, thunkDispatch }) {
   useHotkeys(config.shortcut, handleClick)
@@ -12,11 +12,17 @@ export function DropdownItem({ config, state, thunkDispatch }) {
     <Menu.Item>
       {({ active }) => (
         <button
-          className={`${active && 'bg-gray-600'} px-2 py-1 flex justify-between`}
+          className={`${
+            active && 'bg-gray-600'
+          } px-2 py-1 flex justify-between`}
           onClick={handleClick}
         >
           {config.label}
-          {config.shortcutLabel && <span className="text-gray-400 pl-6 text-right">{ config.shortcutLabel }</span> }
+          {config.shortcutLabel && (
+            <span className="text-gray-400 pl-6 text-right">
+              {config.shortcutLabel}
+            </span>
+          )}
         </button>
       )}
     </Menu.Item>
@@ -28,21 +34,37 @@ export function Dropdown({
   disabled,
   children,
 }: {
-    label: string,
-    disabled: boolean,
-    children: React.ReactNode,
+  label: string
+  disabled: boolean
+  children: React.ReactNode
 }) {
   return (
     <div className="relative">
       <Menu>
-        {({ open }) => (<>
-          <Menu.Button className={"text-gray-100" + (disabled ? " text-gray-400 cursor-not-allowed" : "")} disabled={disabled}>{label}</Menu.Button>
-          { children &&
-          <Menu.Items static className={(open ? "" : "hidden ") + "absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700"}>
+        {({ open }) => (
+          <>
+            <Menu.Button
+              className={
+                'text-gray-100' +
+                (disabled ? ' text-gray-400 cursor-not-allowed' : '')
+              }
+              disabled={disabled}
+            >
+              {label}
+            </Menu.Button>
+            {children && (
+              <Menu.Items
+                static
+                className={
+                  (open ? '' : 'hidden ') +
+                  'absolute flex flex-col mt-4 bg-ch-gray-760 rounded text-gray-100 overflow-hidden whitespace-nowrap border border-ch-gray-700'
+                }
+              >
                 {children}
               </Menu.Items>
-          }
-        </>)}
+            )}
+          </>
+        )}
       </Menu>
     </div>
   )

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -3,27 +3,33 @@ import Svg from 'src/components/Svg/Svg'
 import CadPackage from 'src/components/CadPackage/CadPackage'
 import { editorMenuConfig } from './menuConfig'
 import AllShortcutsModal from './AllShortcutsModal'
-import { Dropdown } from './Dropdowns';
+import { Dropdown } from './Dropdowns'
 
 const EditorMenu = () => {
   const { state, thunkDispatch } = useIdeContext()
 
-  return (<>
+  return (
+    <>
       <div className="flex justify-between bg-ch-gray-760 text-gray-100">
         <div className="flex items-center h-9 w-full cursor-grab">
           <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
             <Svg name="drag-grid" className="w-4 p-px" />
           </div>
           <div className="grid grid-flow-col-dense gap-6 px-5">
-          { editorMenuConfig.map(menu => (
-            <Dropdown label={menu.label} disabled={menu.disabled} key={menu.label +"-dropdown"}>
-              { menu.items.map(itemConfig => 
+            {editorMenuConfig.map((menu) => (
+              <Dropdown
+                label={menu.label}
+                disabled={menu.disabled}
+                key={menu.label + '-dropdown'}
+              >
+                {menu.items.map((itemConfig) => (
                   <itemConfig.component
                     state={state}
                     thunkDispatch={thunkDispatch}
                     config={itemConfig}
-                  key={menu.label +"-"+ itemConfig.label } />
-              ) }
+                    key={menu.label + '-' + itemConfig.label}
+                  />
+                ))}
               </Dropdown>
             ))}
           </div>
@@ -38,7 +44,8 @@ const EditorMenu = () => {
         <CadPackage cadPackage={state.ideType} className="px-3" />
       </div>
       <AllShortcutsModal />
-  </>)
+    </>
+  )
 }
 
 export default EditorMenu

app/web/src/components/EditorMenu/menuConfig.tsx

@@ -8,7 +8,7 @@ export function cmdOrCtrl() {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
 }
 
-const fileMenuConfig = {
+const fileMenuConfig: EditorMenuConfig = {
   name: 'file',
   label: 'File',
   disabled: false,
@@ -50,9 +50,9 @@ const fileMenuConfig = {
         config.callback = handleStlDownload
 
         return <DropdownItem {...props} />
-            }
-        }
-    ]
+      },
+    },
+  ],
 }
 
 const editMenuConfig = {
@@ -69,34 +69,40 @@ const viewMenuConfig = {
   items: [
     {
       label: 'Reset layout',
-            shortcut: 'ctrl+alt+r, command+alt+r',
-            shortcutLabel: cmdOrCtrl() + ' Alt R',
+      shortcut: 'ctrl+shift+r',
+      shortcutLabel: 'Ctrl Shift R',
       component: (props) => {
         const { config, thunkDispatch } = props
         config.callback = () => thunkDispatch({ type: 'resetLayout' })
         return <DropdownItem {...props} />
-            }
+      },
+    },
+    {
+      label: 'All shortcuts',
+      shortcut: 'ctrl+shift+/',
+      shortcutLabel: 'Ctrl Shift /',
+      component: (props) => {
+        const { config } = props
+        const [open, setOpen] = useShortcutModalContext()
+        config.callback = () => setOpen(true)
+        return <DropdownItem {...props} />
+      },
     },
   ],
 }
 
-export const editorMenuConfig = [
-    fileMenuConfig,
-    editMenuConfig,
-    viewMenuConfig,
-]
+export const editorMenuConfig = [fileMenuConfig, editMenuConfig, viewMenuConfig]
 
-// TODO: set up these types properly. The callback is especially giving me trouble.
 export interface EditorMenuItemConfig {
-    label: string,
-    shortcut: string,
-    shortcutLabel: React.ReactNode | string,
-    callback: any, // I don't understand how to make this a more specific type
+  label: string
+  shortcut: string
+  shortcutLabel: React.ReactElement | string
+  component: (props: any) => React.ReactElement
 }
 
 export interface EditorMenuConfig {
-    name: string,
-    label: string,
-    disabled: boolean,
-    items: Array<EditorMenuItemConfig>,
+  name: string
+  label: string
+  disabled: boolean
+  items: Array<EditorMenuItemConfig>
 }