feat: add types to keyboard controls

[RodrigoHamuy]

Why

• KeyboardControlsEntry wasn't exported, so it wasn't easy to define this outside the component.
• useKeyboardControls() always returned any because TS couldn't resolve the function, which is not fun for TS devs.

What

• Added KeyboardControls story: /?path=/story/controls-keyboardcontrols--keyboard-controls-st
• KeyboardControlsEntry is now exported and is optionally generic.
• useKeyboardControls() now returns the correct types for each case, because the function overloading declarations have been added.
• useKeyboardControls() now supports generics, so you can pass which keys you are expected to use.

For example, consider you have a Controls enum, you can now pass that as a generic and get the correct types for all case scenarios:

enum Controls {
  forward = 'forward',
  left = 'left',
  right = 'right',
  back = 'back',
}
const [sub, get] = useKeyboardControls<Controls>()
const left = useKeyboardControls<Controls>(st => st.left);
console.log(`left: ${left}`);
useFrame(() => console.log(`back: ${get().back}`))
useEffect(() => sub(st => console.log(`forward: ${st.forward}`)), [])

get().up // will throw TS error

Checklist

• Documentation updated
• Storybook entry added
• Ready to be merged

[vercel]

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

Name	Status	Preview	Updated
drei	✅ Ready (Inspect)	Visit Preview	Oct 29, 2022 at 3:52PM (UTC)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b7c3a72:

Sandbox	Source
charming-neumann-mmrf2f	Configuration
Ground reflections and video textures	Configuration
arc-x-pmndrs-colors	Configuration

[RodrigoHamuy]

About this, that ; typo is being added by husky when I run commit -m "docs: fix typo", so not sure how to get rid of it 😄 . I actually didn't touch anything near that section!

[github-actions]

🎉 This PR is included in version 9.40.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀