feat: Added use-keyboard.

Author: Blankeos

README.md

@@ -33,7 +33,12 @@ Use it:
 import { useHotkeys } from 'bagon-hooks';
 ```
 
-We want to achieve as 1:1 as possible with Mantine's original hooks. So you can always refer to their [original docs](https://v3.mantine.dev/hooks/use-hotkeys/).
+We want to achieve as 1:1 as possible with Mantine's original hooks. So you can always refer to their [original docs](https://v3.mantine.dev/hooks/use-hotkeys/). There are a few improvements and renaming because SolidJS has its own conventions. But just take note:
+
+1. We removed Solid's convention of `use` vs `create` as it's too confusing for familiarity with Mantine. So every hook in Bagon is prefixed with `use`.
+2. The only renaming we did was `state` -> `signal`.
+3. Refer to [Mantine](https://mantine.dev/hooks/use-click-outside/)'s original docs for deeper examples and usecases.
+4. Refer to [Bagon Hooks](https://bagon-hooks.pages.dev/)'s docs for actual SolidJS examples.
 
 ## Features
 
@@ -54,7 +59,7 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [ ] use-color-scheme
 - [x] use-counter
 - [ ] use-debounced-callback
-- [ ] use-debounced-state
+- [ ] ~~use-debounced-state~~ use-debounced-signal
 - [ ] use-debounced-value
 - [ ] use-did-update
 - [ ] use-disclosure
@@ -119,6 +124,10 @@ Based on the [@mantine/hooks](https://github.com/mantinedev/mantine/tree/master/
 - [ ] use-window-scroll
 - [ ] utils
 
+### New in Bagon Hooks
+
+- [x] use-keyboard
+
 ### Others
 
 - [x] Docs Website (Powered by mdx + tailwind prose)

dev/components/examples/use-keyboard/use-keyboard.code.mdx

@@ -0,0 +1,62 @@
+```tsx
+function KeyboardExample() {
+  const [store, setStore] = createStore({ a: false, b: false, c: false, d: false });
+
+  useKeyboard({
+    onKeyDown(event) {
+      // Refactor this into if statements.
+      if (event.key === 'a') {
+        setStore('a', true);
+      } else if (event.key === 'b') {
+        setStore('b', true);
+      } else if (event.key === 'c') {
+        setStore('c', true);
+      } else if (event.key === 'd') {
+        setStore('d', true);
+      }
+    },
+    onKeyUp(event) {
+      // Refactor this into if statements.
+      if (event.key === 'a') {
+        setStore('a', false);
+      } else if (event.key === 'b') {
+        setStore('b', false);
+      } else if (event.key === 'c') {
+        setStore('c', false);
+      } else if (event.key === 'd') {
+        setStore('d', false);
+      }
+    },
+  });
+
+  return (
+    <div>
+      <Kbd activated={store.a}>a</Kbd>
+      <Kbd activated={store.b}>b</Kbd>
+      <Kbd activated={store.c}>c</Kbd>
+      <Kbd activated={store.d}>d</Kbd>
+    </div>
+  );
+}
+
+function Kbd(props: FlowProps<{ activated: boolean }>) {
+  return (
+    <div style={{ display: 'relative' }}>
+      <div style={{ display: 'absolute', inset: 0, background: "#e5e5e5" }}></div>
+      <div
+        style={{
+          background: '#fafafa',
+          padding: '0.5rem',
+          display: 'relative',
+          transition-property: 'transform';
+          transition-timing-function: 'cubic-bezier(0.4, 0, 0.2, 1)';
+          transition-duration: '150ms';
+          transform: props.activated ? 'translateY(0px)' : 'translateY(-5px)',
+        }}
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
+```

dev/components/examples/use-keyboard/use-keyboard.example.tsx

@@ -0,0 +1,56 @@
+import { useKeyboard } from 'src';
+import { ExampleBase } from '../example-base';
+import Code from './use-keyboard.code.mdx';
+
+import { Kbd } from 'dev/components/kbd';
+import { createStore } from 'solid-js/store';
+import { useMDXComponents } from 'solid-jsx';
+
+export function UseKeyboardExample() {
+  const [store, setStore] = createStore({ a: false, b: false, c: false, d: false });
+
+  useKeyboard({
+    onKeyDown(event) {
+      // Refactor this into if statements.
+      if (event.key === 'a') {
+        setStore('a', true);
+      } else if (event.key === 'b') {
+        setStore('b', true);
+      } else if (event.key === 'c') {
+        setStore('c', true);
+      } else if (event.key === 'd') {
+        setStore('d', true);
+      }
+    },
+    onKeyUp(event) {
+      // Refactor this into if statements.
+      if (event.key === 'a') {
+        setStore('a', false);
+      } else if (event.key === 'b') {
+        setStore('b', false);
+      } else if (event.key === 'c') {
+        setStore('c', false);
+      } else if (event.key === 'd') {
+        setStore('d', false);
+      }
+    },
+  });
+
+  // @ts-ignore
+  const components: any = useMDXComponents();
+
+  return (
+    <ExampleBase
+      title="useKeyboard"
+      description="Use this for more general keyboard events, as opposed to useHotkeys."
+      code={<Code components={components} />}
+    >
+      <div class="flex h-full w-full items-center justify-center gap-x-1 rounded-md border p-3 py-10 text-center">
+        <Kbd activated={store.a}>a</Kbd>
+        <Kbd activated={store.b}>b</Kbd>
+        <Kbd activated={store.c}>c</Kbd>
+        <Kbd activated={store.d}>d</Kbd>
+      </div>
+    </ExampleBase>
+  );
+}

src/index.ts

@@ -20,3 +20,5 @@ export * from './use-resize-observer/use-resize-observer';
 export * from './use-toggle/use-toggle';
 
 export * from './utils/random-id';
+
+export * from './use-keyboard/use-keyboard';

src/use-keyboard/use-keyboard.ts

@@ -0,0 +1,29 @@
+import { onCleanup, onMount } from 'solid-js';
+
+/**
+ * Use this for more general keyboard events, as opposed to `useHotkeys`.
+ */
+export function useKeyboard(props: {
+  isDisabled?: boolean;
+  onKeyDown?: (event: KeyboardEvent) => void;
+  onKeyUp?: (event: KeyboardEvent) => void;
+}) {
+  onMount(() => {
+    const onKeyDownListener = (event: KeyboardEvent) => {
+      if (props.isDisabled) return;
+      props.onKeyDown?.(event);
+    };
+
+    const onKeyUpListener = (event: KeyboardEvent) => {
+      if (props.isDisabled) return;
+      props.onKeyUp?.(event);
+    };
+
+    window.addEventListener('keydown', onKeyDownListener);
+    window.addEventListener('keyup', onKeyUpListener);
+    onCleanup(() => {
+      window.removeEventListener('keydown', onKeyDownListener);
+      window.removeEventListener('keyup', onKeyUpListener);
+    });
+  });
+}