Add Keyboard Shortcuts System

.storybook/preview.js

@@ -9,7 +9,7 @@ import getStore from '../src/bundles/index.js'
 import i18n from '../src/i18n.js'
 import DndBackend from '../src/lib/dnd-backend.js'
 import { HeliaProvider, ExploreProvider } from 'ipld-explorer-components/providers'
-
+import { ShortcutsProvider } from '../src/contexts/ShortcutsContext.js'
 /**
  * @type {import('@storybook/addons').BaseAnnotations}
  */
@@ -21,7 +21,9 @@ const baseAnnotations = {
           <DndProvider backend={DndBackend}>
             <HeliaProvider>
               <ExploreProvider>
-                <Story />
+                <ShortcutsProvider>
+                  <Story />
+                </ShortcutsProvider>
               </ExploreProvider>
             </HeliaProvider>
           </DndProvider>

package.json

@@ -138,6 +138,8 @@
     "@types/jest": "^29.5.14",
     "@types/node": "^14.18.36",
     "@types/path-browserify": "^1.0.0",
+    "@types/prop-types": "^15.7.14",
+    "@types/react-overlays": "^3.1.0",
     "@typescript-eslint/parser": "^5.62.0",
     "aegir": "^42.2.2",
     "autoprefixer": "^10.4.7",

public/locales/en/app.json

@@ -105,5 +105,13 @@
     "skip": "Skip",
     "tooltip": "Click this button any time for a guided tour on the current page."
   },
+  "shortcutModal": {
+    "title": "Keyboard Shortcuts",
+    "description": "The following keyboard shortcuts are available in the Files section:",
+    "showShortcuts": "Show keyboard shortcuts",
+    "general": "General",
+    "tourHelp": "Show tour help",
+    "ipfsPath": "Enter QmHash or CID"
+  },
   "startTourHelper": "Start tour"
 }

public/locales/en/files.json

@@ -49,28 +49,6 @@
     "checkboxRemoveLocalPin": "Also remove local pin (recommended)",
     "checkboxUnpinFromServices": "Unpin from all pinning services"
   },
-  "shortcutModal": {
-    "title": "Keyboard Shortcuts",
-    "description": "The following keyboard shortcuts are available in the Files section:",
-    "navigation": "Navigation",
-    "selection": "Selection",
-    "actions": "Actions",
-    "other": "Other",
-    "moveDown": "Move down",
-    "moveUp": "Move up",
-    "moveLeft": "Move left",
-    "moveRight": "Move right",
-    "navigate": "Navigate to selected item",
-    "rename": "Rename selected item",
-    "delete": "Delete selected item(s)",
-    "toggleSelection": "Toggle selection",
-    "selectAll": "Select all items",
-    "deselectAll": "Deselect all items",
-    "copy": "Copy selected item(s)",
-    "paste": "Paste item(s)",
-    "cut": "Cut selected item(s)",
-    "showShortcuts": "Show keyboard shortcuts"
-  },
   "pinningModal": {
     "title": "Select where you would like to pin these items.",
     "complianceLabel": "🔍 Check pinning services' compliance",
@@ -185,5 +163,24 @@
   },
   "noPinsInProgress": "All done, no remote pins in progress.",
   "remotePinningInProgress": "Remote pinning in progress:",
-  "selectAllEntries": "Select all entries"
+  "selectAllEntries": "Select all entries",
+  "shortcutModal": {
+    "navigation": "Navigation",
+    "selection": "Selection",
+    "actions": "Actions",
+    "other": "Other",
+    "moveDown": "Move down",
+    "moveUp": "Move up",
+    "moveLeft": "Move left",
+    "moveRight": "Move right",
+    "navigate": "Navigate to selected item",
+    "rename": "Rename selected item",
+    "delete": "Delete selected item(s)",
+    "toggleSelection": "Toggle selection",
+    "selectAll": "Select all items",
+    "deselectAll": "Deselect all items",
+    "copy": "Copy selected item(s)",
+    "paste": "Paste item(s)",
+    "cut": "Cut selected item(s)"
+  }
 }

public/locales/en/peers.json

@@ -3,6 +3,7 @@
   "localNetwork": "Local Network",
   "nearby": "nearby",
   "protocols": "Open streams",
+  "filterPeers": "Filter peers",
   "addConnection": "Add connection",
   "insertPeerAddress": "Insert the peer address you want to connect to.",
   "addPermanentPeer": "Add to the permanent peering configuration",

src/components/modal/Modal.js

@@ -1,7 +1,9 @@
-import React from 'react'
+// @ts-nocheck
+import * as React from 'react'
 import PropTypes from 'prop-types'
-import CancelIcon from '../../icons/GlyphSmallCancel.js'
+import CancelIcon from '../../icons/GlyphSmallCancel'
 
+// @ts-ignore
 export const ModalActions = ({ justify = 'between', className = '', children, ...props }) => (
   <div className={`flex justify-${justify} pa2 ${className}`} style={{ backgroundColor: '#f4f6f8' }} {...props}>
     { children }
@@ -10,9 +12,11 @@ export const ModalActions = ({ justify = 'between', className = '', children, ..
 
 ModalActions.propTypes = {
   justify: PropTypes.string,
-  className: PropTypes.string
+  className: PropTypes.string,
+  children: PropTypes.node
 }
 
+// @ts-ignore
 export const ModalBody = ({ className = '', Icon, title, children, ...props }) => (
   <div className={`ph4 pv3 tc ${className}`} {...props}>
     { Icon && (
@@ -32,9 +36,11 @@ ModalBody.propTypes = {
   title: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.node
-  ])
+  ]),
+  children: PropTypes.node
 }
 
+// @ts-ignore
 export const Modal = ({ onCancel, children, className, ...props }) => {
   return (
     <div className={`${className} bg-white w-80 shadow-4 sans-serif relative`} style={{ maxWidth: '34em' }} {...props}>

src/components/notify/Toast.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import CancelIcon from '../../icons/GlyphSmallCancel.js'
+import CancelIcon from '../../icons/GlyphSmallCancel'
 
 const Toast = ({ error, children, onDismiss }) => {
   const bg = error ? 'bg-yellow' : 'bg-green'

src/components/overlay/Overlay.tsx

@@ -0,0 +1,41 @@
+import React, { ReactElement } from 'react'
+import { Modal } from 'react-overlays'
+
+interface OverlayProps {
+  children: React.ReactNode
+  show: boolean
+  onLeave: () => void
+  className: string
+  hidden: boolean
+}
+
+const Overlay: React.FC<OverlayProps> = ({ children, show, onLeave, className, hidden, ...props }): ReactElement<any> => {
+  const handleKeyDown = (e: React.KeyboardEvent): null | void => {
+    if (e.key !== 'Escape') return null
+
+    e.stopPropagation()
+    e.nativeEvent.stopImmediatePropagation()
+
+    onLeave()
+  }
+
+  const renderBackdrop = (): React.ReactNode => {
+    return (
+      <div className='fixed top-0 left-0 right-0 bottom-0 bg-black o-50' hidden={hidden} {...props}></div>
+    )
+  }
+
+  return (
+    <Modal
+      {...props}
+      show={show}
+      className={`${className} fixed top-0 left-0 right-0 bottom-0 z-max flex items-center justify-around`}
+      renderBackdrop={renderBackdrop}
+      onKeyDown={handleKeyDown}
+      onBackdropClick={onLeave}>
+      {children}
+    </Modal>
+  )
+}
+
+export default Overlay

src/components/tour/TourHelper.js

@@ -8,7 +8,7 @@ export const TourHelper = ({ doEnableTours, className = '', size = 23, t }) => {
   }
 
   return (
-    <button className={`dib mr1 ml4-m pointer ${className}`} onClick={handleClick} aria-label={ t('startTourHelper')}>
+    <button id='tour-helper' className={`dib mr1 ml4-m pointer ${className}`} onClick={handleClick} aria-label={ t('startTourHelper')}>
       <svg className='fill-teal o-60 glow' viewBox='0 0 44 44' width={size} height={size} aria-hidden="true">
         <path d='m22,0c-12.2,0-22,9.8-22,22s9.8,22 22,22 22-9.8 22-22-9.8-22-22-22zm2,34c0,0.6-0.4,1-1,1h-2c-0.6,0-1-0.4-1-1v-2c0-0.6 0.4-1 1-1h2c0.6,0 1,0.4 1,1v2zm2.7-8.9c-1.4,1.2-2.4,2-2.7,3.1-0.1,0.5-0.5,0.8-1,0.8h-2c-0.6,0-1.1-0.5-1-1.1 0.4-2.9 2.5-4.5 4.2-5.9 1.8-1.4 2.8-2.3 2.8-4 0-2.8-2.2-5-5-5s-5,2.2-5,5c0,0.2 0,0.4 0,0.6 0.1,0.5-0.2,1-0.7,1.1l-1.9,.6c-0.6,0.2-1.2-0.2-1.3-0.8-0.1-0.5-0.1-1-0.1-1.5 0-5 4-9 9-9s9,4 9,9c0,3.7-2.4,5.6-4.3,7.1z' />
       </svg>