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",
@@ -56,4 +58,4 @@
     "postcss-loader": "^6.1.1",
     "tailwindcss": "^2.2.7"
   }
-}
+}

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: {
@@ -15,30 +15,41 @@ const useStyles = makeStyles({
 })
 
 const AllShortcutsModal = () => {
-    const classes = useStyles()
+  const classes = useStyles()
-    const [open, setOpen] = useState(false)
+  const [open, setOpen] = useState(false)
-    useHotkeys(SHORTCUT, () => setOpen(!open), [open])
+  useHotkeys(SHORTCUT, () => setOpen(!open), [open])
 
-    return (<>
+  return (
-        <Dialog open={open} onClose={() => setOpen(false)} className={classes.root}>
+    <>
+      <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>
+          <h2 className="text-2xl mb-4">All Shortcuts</h2>
-        { editorMenuConfig.filter(menu => menu.items.length).map(menu =>
+          {editorMenuConfig
-            <section key={"allshortcuts-"+menu.name}
+            .filter((menu) => menu.items.length)
-            className="my-6">
+            .map((menu) => (
-                <h3 className="text-xl border-b-2 pb-2 mb-2">{ menu.label }</h3>
+              <section key={'allshortcuts-' + menu.name} className="my-6">
-            { menu.items.map(item => (
+                <h3 className="text-xl border-b-2 pb-2 mb-2">{menu.label}</h3>
-                <div className="flex gap-8 justify-between" key={"allshortcuts-"+menu.name+"-"+item.label}>
+                {menu.items.map((item) => (
-                    <p>{ item.label }</p>
+                  <div
-                    <span className="text-right font-fira-code text-ch-gray-400">{ item.shortcutLabel }</span>
+                    className="flex gap-8 justify-between"
-                </div>
+                    key={'allshortcuts-' + menu.name + '-' + item.label}
+                  >
+                    <p>{item.label}</p>
+                    <span className="text-right font-fira-code text-ch-gray-400">
+                      {item.shortcutLabel}
+                    </span>
+                  </div>
+                ))}
+              </section>
             ))}
-            </section>
-        )}
         </div>
-        </Dialog>
+      </Dialog>
-    </>)
+    </>
-    }
+  )
+}
 
-
+export default AllShortcutsModal
-    export default AllShortcutsModal

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

@@ -1,49 +1,71 @@
 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)
+  useHotkeys(config.shortcut, handleClick)
 
-    function handleClick(e) {
+  function handleClick(e) {
-        e.preventDefault()
+    e.preventDefault()
-        config.callback(e, {state, thunkDispatch})
+    config.callback(e, { state, thunkDispatch })
-    }
+  }
-    return (
+  return (
-      <Menu.Item>
+    <Menu.Item>
-        {({ active }) => (
+      {({ 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>
+    </Menu.Item>
-    )
+  )
-  }
+}
-  
+
 export function Dropdown({
-    label,
+  label,
-    disabled,
+  disabled,
-    children,
+  children,
-  }: {
+}: {
-    label: string,
+  label: string
-    disabled: boolean,
+  disabled: boolean
-    children: React.ReactNode,
+  children: React.ReactNode
-  }) {
+}) {
-    return (
+  return (
-      <div className="relative">
+    <div className="relative">
-        <Menu>
+      <Menu>
-        {({ open }) => (<>
+        {({ open }) => (
-          <Menu.Button className={"text-gray-100" + (disabled ? " text-gray-400 cursor-not-allowed" : "")} disabled={disabled}>{label}</Menu.Button>
+          <>
-          { children &&
+            <Menu.Button
-          <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"}>
+              className={
-            {children}
+                'text-gray-100' +
-          </Menu.Items>
+                (disabled ? ' text-gray-400 cursor-not-allowed' : '')
-          }
+              }
-        </>)}
+              disabled={disabled}
-        </Menu>
+            >
-      </div>
+              {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,42 +3,49 @@ 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="flex justify-between bg-ch-gray-760 text-gray-100">
-        <div className=" text-ch-gray-760 bg-ch-gray-300 cursor-grab px-2 h-full flex items-center">
+        <div className="flex items-center h-9 w-full cursor-grab">
-          <Svg name="drag-grid" className="w-4 p-px" />
+          <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) => (
+                  <itemConfig.component
+                    state={state}
+                    thunkDispatch={thunkDispatch}
+                    config={itemConfig}
+                    key={menu.label + '-' + itemConfig.label}
+                  />
+                ))}
+              </Dropdown>
+            ))}
+          </div>
+          <button
+            className="text-ch-gray-300  h-full cursor-not-allowed"
+            aria-label="editor settings"
+            disabled
+          >
+            <Svg name="gear" className="w-6 p-px" />
+          </button>
         </div>
-        <div className="grid grid-flow-col-dense gap-6 px-5">
+        <CadPackage cadPackage={state.ideType} className="px-3" />
-          { 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 } />
-              ) }
-            </Dropdown>
-          )) }
-        </div>
-        <button
-          className="text-ch-gray-300  h-full cursor-not-allowed"
-          aria-label="editor settings"
-          disabled
-        >
-          <Svg name="gear" className="w-6 p-px" />
-        </button>
       </div>
-      <CadPackage cadPackage={state.ideType} className="px-3" />
+      <AllShortcutsModal />
-    </div>
+    </>
-    <AllShortcutsModal/>
+  )
-  </>)
 }
 
-export default EditorMenu
+export default EditorMenu

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

@@ -5,98 +5,104 @@ import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import { DropdownItem } from './Dropdowns'
 
 export function cmdOrCtrl() {
-    return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl'
 }
 
-const fileMenuConfig = {
+const fileMenuConfig: EditorMenuConfig = {
-    name: 'file',
+  name: 'file',
-    label: 'File',
+  label: 'File',
-    disabled: false,
+  disabled: false,
-    items: [
+  items: [
-        {
+    {
-            label: 'Save & Render',
+      label: 'Save & Render',
-            shortcut: 'ctrl+s, command+s',
+      shortcut: 'ctrl+s, command+s',
-            shortcutLabel: cmdOrCtrl() + ' S',
+      shortcutLabel: cmdOrCtrl() + ' S',
-            component: (props) => {
+      component: (props) => {
-                const { state, config } = props
+        const { state, config } = props
-                const handleRender = useRender()
+        const handleRender = useRender()
-                const saveCode = useSaveCode()
+        const saveCode = useSaveCode()
-                function onRender(e) {
+        function onRender(e) {
-                    e.preventDefault()
+          e.preventDefault()
-                    handleRender()
+          handleRender()
-                    saveCode({ code: state.code })
+          saveCode({ code: state.code })
-                }
-
-                config.callback = onRender
-                
-                return <DropdownItem {...props} />
-            },
-        },
-        {
-            label: 'Download STL',
-            shortcut: 'ctrl+shift+d, command+shift+d',
-            shortcutLabel: cmdOrCtrl() + ' Shift D',
-            component: (props) => {
-                const { state, thunkDispatch, config } = props
-                const handleStlDownload = makeStlDownloadHandler({
-                    type: state.objectData?.type,
-                    ideType: state.ideType,
-                    geometry: state.objectData?.data,
-                    quality: state.objectData?.quality,
-                    fileName: PullTitleFromFirstLine(state.code || ''),
-                    thunkDispatch,
-                })
-
-                config.callback = handleStlDownload
-
-                return <DropdownItem {...props} />
-            }
         }
-    ]
+
+        config.callback = onRender
+
+        return <DropdownItem {...props} />
+      },
+    },
+    {
+      label: 'Download STL',
+      shortcut: 'ctrl+shift+d, command+shift+d',
+      shortcutLabel: cmdOrCtrl() + ' Shift D',
+      component: (props) => {
+        const { state, thunkDispatch, config } = props
+        const handleStlDownload = makeStlDownloadHandler({
+          type: state.objectData?.type,
+          ideType: state.ideType,
+          geometry: state.objectData?.data,
+          quality: state.objectData?.quality,
+          fileName: PullTitleFromFirstLine(state.code || ''),
+          thunkDispatch,
+        })
+
+        config.callback = handleStlDownload
+
+        return <DropdownItem {...props} />
+      },
+    },
+  ],
 }
 
 const editMenuConfig = {
-    name: 'edit',
+  name: 'edit',
-    label: 'Edit',
+  label: 'Edit',
-    disabled: true,
+  disabled: true,
-    items: [],
+  items: [],
 }
 
 const viewMenuConfig = {
-    name: 'view',
+  name: 'view',
-    label: 'View',
+  label: 'View',
-    disabled: false,
+  disabled: false,
-    items: [
+  items: [
-        {
+    {
-            label: 'Reset layout',
+      label: 'Reset layout',
-            shortcut: 'ctrl+alt+r, command+alt+r',
+      shortcut: 'ctrl+shift+r',
-            shortcutLabel: cmdOrCtrl() + ' Alt R',
+      shortcutLabel: 'Ctrl Shift R',
-            component: (props) => {
+      component: (props) => {
-                const { config, thunkDispatch } = props
+        const { config, thunkDispatch } = props
-                config.callback = () => thunkDispatch({ type: 'resetLayout' })
+        config.callback = () => thunkDispatch({ type: 'resetLayout' })
-                return <DropdownItem {...props } />
+        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 = [
+export const editorMenuConfig = [fileMenuConfig, editMenuConfig, viewMenuConfig]
-    fileMenuConfig,
-    editMenuConfig,
-    viewMenuConfig,
-]
 
-// TODO: set up these types properly. The callback is especially giving me trouble.
 export interface EditorMenuItemConfig {
-    label: string,
+  label: string
-    shortcut: string,
+  shortcut: string
-    shortcutLabel: React.ReactNode | string,
+  shortcutLabel: React.ReactElement | string
-    callback: any, // I don't understand how to make this a more specific type
+  component: (props: any) => React.ReactElement
 }
 
 export interface EditorMenuConfig {
-    name: string,
+  name: string
-    label: string,
+  label: string
-    disabled: boolean,
+  disabled: boolean
-    items: Array<EditorMenuItemConfig>,
+  items: Array<EditorMenuItemConfig>
-}
+}