feat(overlay): open/close overlay on keypress

[Shubhdeep12]

#158

Added an event listener for opening/closing overlay using Ctrl + Shift + s
Also made this to astro dev as well.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
spotlightjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 1, 2023 6:01pm

[codecov]

Codecov Report

Attention: 14 lines in your changes are missing coverage. Please review.

Comparison is base (e9e9839) 32.40% compared to head (bfebb55) 32.22%.

Files	Patch %	Lines
packages/overlay/src/lib/useKeyPress.ts	13.33%	13 Missing ⚠️
packages/overlay/src/components/Tabs.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #196      +/-   ##
==========================================
- Coverage   32.40%   32.22%   -0.18%     
==========================================
  Files          38       38              
  Lines        1858     1868      +10     
  Branches       70       70              
==========================================
  Hits          602      602              
- Misses       1256     1266      +10     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[Lms24]

Awesome! Gave it a quick test and it seems to work well. I Have two requests though.

Also, please rebase your branch. I just merged in an ESC key fix and I wanna make sure this doesn't collide after the fix. Thank you!

[Lms24]

Is there a specific reason you put this into the useEffect block?

Asking because if we can move it to the top level of the App component, I'd prefer using the useKeyPress hook we already use for the ESC key navigation.

[Shubhdeep12]

Hi @Lms24 based on your review above I checked useKeyPress hook
And to use it, I came up with some changes in the hook itself

I am thinking of something like this

import { useEffect } from 'react';

/**
 * useKeyPress
 * @param {string[]} keys - an array of keys to respond to, compared against event.key
 * @param {function} action - the action to perform on key press
 * @param {boolean} propagate - whether to stop event propagation (default is false)
 */
export default function useKeyPress(keys: string[], action: () => void, propagate = false) {
  useEffect(() => {
    function onKeyup(e: KeyboardEvent) {
      if (!propagate) e.stopPropagation();
      
      if (keys.every((key: string) => {
        if (key in e) return e[key as keyof KeyboardEvent];
        return e.key.toLowerCase() === key.toLowerCase()
      })) {
        action();
      }
    }

    window.addEventListener('keyup', onKeyup);

    return () => window.removeEventListener('keyup', onKeyup);
  }, [keys, action, propagate]);
}

And to use this like this

useKeyPress(['ctrlKey', 'shiftKey', 's'], () => {
    setOpen(prev => !prev);
  });

  useKeyPress(['metaKey', 'shiftKey', 's'], () => {
    setOpen(prev => !prev);
  });

 useKeyPress(['Escape'], () => {
    if (location.pathname.split('/').length === 2) {
      spotlightEventTarget.dispatchEvent(new CustomEvent('close'));
    } else {
      navigate(-1);
    }
  });

for single and multiple keys.

Need review before pushing this.

[Lms24]

Sounds good to me!

[Shubhdeep12]

ok great! pushing it .

[HazAT]

💯