move to use meta and shift symbols to define keyboard listening

components/Billing.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Elements, StripeProvider, CardElement, injectStripe } from 'react-stripe-elements'
-import { useAsyncCallback } from '@dawnlabs/tacklebox'
+import { useAsyncCallback } from 'actionsack'
 
 import Button from './Button'
 import Input from './Input'

components/EditorContainer.js

@@ -1,6 +1,6 @@
 // Theirs
 import React from 'react'
-import { useAsyncCallback } from '@dawnlabs/tacklebox'
+import { useAsyncCallback } from 'actionsack'
 
 import Editor from './Editor'
 import Toasts from './Toasts'

components/ExportMenu.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { withRouter } from 'next/router'
-import { useCopyTextHandler, useOnline, useKeyboardListener } from '@dawnlabs/tacklebox'
+import { useCopyTextHandler, useOnline, useKeyboardListener } from 'actionsack'
 
 import { COLORS, EXPORT_SIZES } from '../lib/constants'
 import Button from './Button'
@@ -73,11 +73,7 @@ function ExportMenu({
   const online = useOnline()
   const isSafari = useSafari()
 
-  useKeyboardListener('e', e => {
+  useKeyboardListener('⌘-⇧-e', () => exportImage())
-    if (e.shiftKey && e.metaKey) {
-      exportImage()
-    }
-  })
 
   const disablePNG = isSafari && (tooLarge || !online)
 

components/ImagePicker.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactCrop, { makeAspectCrop } from 'react-image-crop'
-import { useLocalStorage } from '@dawnlabs/tacklebox'
+import { useLocalStorage } from 'actionsack'
 
 import RandomImage from './RandomImage'
 import PhotoCredit from './PhotoCredit'

components/RandomImage.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Spinner from 'react-spinner'
-import { useAsyncCallback } from '@dawnlabs/tacklebox'
+import { useAsyncCallback } from 'actionsack'
 
 import { useAPI } from './ApiContext'
 import PhotoCredit from './PhotoCredit'

components/Settings.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import omitBy from 'lodash.omitby'
-import { useKeyboardListener } from '@dawnlabs/tacklebox'
+import { useKeyboardListener } from 'actionsack'
 
 import ThemeSelect from './ThemeSelect'
 import FontSelect from './FontSelect'
@@ -15,12 +15,8 @@ import { COLORS, DEFAULT_PRESETS } from '../lib/constants'
 import { toggle, getPresets, savePresets, generateId, fileToJSON } from '../lib/util'
 import SettingsIcon from './svg/Settings'
 
-function KeyboardShortcut({ handle }) {
+function KeyboardShortcut({ trigger, handle }) {
-  useKeyboardListener('/', e => {
+  useKeyboardListener(trigger, handle)
-    if (e.metaKey) {
-      handle()
-    }
-  })
   return null
 }
 
@@ -389,6 +385,7 @@ class Settings extends React.PureComponent {
     return (
       <div className="settings-container" ref={this.settingsRef}>
         <KeyboardShortcut
+          trigger="⌘-/"
           handle={() => {
             toggleVisibility()
             if (!isVisible) {

components/SnippetToolbar.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useAsyncCallback, useOnline } from '@dawnlabs/tacklebox'
+import { useAsyncCallback, useOnline } from 'actionsack'
 
 import Button from './Button'
 import Toolbar from './Toolbar'

components/TweetButton.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useAsyncCallback, useOnline as useOnlineListener } from '@dawnlabs/tacklebox'
+import { useAsyncCallback, useOnline as useOnlineListener } from 'actionsack'
 
 import { useAPI } from './ApiContext'
 import Button from './Button'

components/WindowControls.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useCopyTextHandler } from '@dawnlabs/tacklebox'
+import { useCopyTextHandler } from 'actionsack'
 
 import { COLORS } from '../lib/constants'
 import { Controls, ControlsBW } from './svg/Controls'

package.json

@@ -17,9 +17,9 @@
     "cy:open": "cypress open"
   },
   "dependencies": {
-    "@dawnlabs/tacklebox": "^0.0.11",
     "@next/bundle-analyzer": "^9.0.5",
     "@reach/visually-hidden": "^0.1.4",
+    "actionsack": "^0.0.13",
     "axios": "^0.19.0",
     "codemirror": "^5.48.4",
     "codemirror-graphql": "^0.9.0",

pages/snippets.js

@@ -3,7 +3,7 @@ import React from 'react'
 import Link from 'next/link'
 import Router from 'next/router'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-import { useAsyncCallback } from '@dawnlabs/tacklebox'
+import { useAsyncCallback } from 'actionsack'
 
 import Button from '../components/Button'
 import LoginButton from '../components/LoginButton'

yarn.lock

@@ -922,15 +922,6 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@dawnlabs/tacklebox@^0.0.11":
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/@dawnlabs/tacklebox/-/tacklebox-0.0.11.tgz#96890f4b40256e1cb912be940e86d397660bd138"
-  integrity sha512-VfxkJlHU2xGyHl0iDLd21GHHqp3Y4m3xjvUxqrZSs0zEUE7qp8U2+s65dCtjYLza9Eu5yI6a+gsJoe2P66m31A==
-  dependencies:
-    copy-to-clipboard "^3.2.0"
-    react-click-outside "^3.0.1"
-    react-fast-compare "2.0.4"
-
 "@firebase/app-types@0.4.3", "@firebase/app-types@0.x":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@firebase/app-types/-/app-types-0.4.3.tgz#80d2b6e5ee43ac99892329ab02301ee7ed82da45"
@@ -1523,6 +1514,15 @@ acorn@^7.0.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.0.0.tgz#26b8d1cd9a9b700350b71c0905546f64d1284e7a"
   integrity sha512-PaF/MduxijYYt7unVGRuds1vBC9bFxbNf+VWqhOClfdgy7RlVkQqt610ig1/yxTgsDIfW1cWDel5EBbOy3jdtQ==
 
+actionsack@^0.0.13:
+  version "0.0.13"
+  resolved "https://registry.yarnpkg.com/actionsack/-/actionsack-0.0.13.tgz#5dcf43db1c2e894ba433676524c0ba48aad52356"
+  integrity sha512-A3C6uzkZoZ9sJysfnbhuvJ4mt61HDrmPaYixz4XLvwKpvvo7j+13cEMKBWi2aPJPNYBaWTM6YNQRy1xgltZO1A==
+  dependencies:
+    copy-to-clipboard "^3.2.0"
+    react-click-outside "^3.0.1"
+    react-fast-compare "2.0.4"
+
 agentkeepalive@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.0.2.tgz#38a490b779a97bd542d153e5a7da0d1fdef35dd3"