Shortcuts manager component

[fabien0102]

Summary

I would like to have a great component that can deal with application shortcuts as GitHub

API proposal

interface ApplicationShortcutProps {
  keyMap: Array<{
    /**
     * Category of the shortcut (for help documentation)
     */
    category?: string;
    /**
     * Name of the shortcut
     */
    name: string;
    /**
     * Sequence of keys to activate the shortcut
     * @example "esc", "g e", ["del", "backspace"]
     */
    sequence: string | string[];
    description: React.ReactNode;
    handler: () => void
  }>
  /**
   * Key sequence to open the help modal
   * @default: `?`
   */
  helpSequence?: string
  helpTitle: React.ReactNode
}

Usage

<ApplicationShortcut
  keyMap={[
    {
      category: "Bundle",
      name: "Go to Editor",
      sequence: "g e",
      description: <FormattedMessage id="shortcut.goToEditor" />,
      handler: () => pushState("/bundles/:id/editor")
    }
    /* ... */
  ]}
  helpTitle={<FormattedMessage id="shortcut.title" />}
/>;

The help modal will be managed by operational modal.

External lib to considered

https://github.com/greena13/react-hotkeys

[fabien0102]

Shortcut manager component