From 6f6c4c81b191d794dd80d53e135b424cb6c713d1 Mon Sep 17 00:00:00 2001 From: Rishit Gupta <74411873+Rishit30G@users.noreply.github.com> Date: Thu, 2 Jan 2025 12:50:03 +0530 Subject: [PATCH 1/2] Add KeyboardShortcuts component story --- .../keyboard-shortcuts/stories/index.story.js | 126 ++++++++++++++++++ .../stories/index.story.tsx | 63 --------- 2 files changed, 126 insertions(+), 63 deletions(-) create mode 100644 packages/components/src/keyboard-shortcuts/stories/index.story.js delete mode 100644 packages/components/src/keyboard-shortcuts/stories/index.story.tsx diff --git a/packages/components/src/keyboard-shortcuts/stories/index.story.js b/packages/components/src/keyboard-shortcuts/stories/index.story.js new file mode 100644 index 0000000000000..d7a6b128545cb --- /dev/null +++ b/packages/components/src/keyboard-shortcuts/stories/index.story.js @@ -0,0 +1,126 @@ +/** + * External dependencies + */ +import { useState } from '@worpress/element'; + +/** + * Internal dependencies + */ +import KeyboardShortcuts from '..'; + +const meta = { + title: 'Components/Utilities/KeyboardShortcuts', + component: KeyboardShortcuts, + id: 'components-keyboardshortcuts', + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'The `KeyboardShortcuts` component allows you to define keyboard shortcuts and handle them in your application.', + }, + }, + }, + argTypes: { + children: { + control: { type: null }, + description: + 'Elements to render, upon whom key events are to be monitored.', + table: { + type: { summary: 'React.ReactNode' }, + }, + }, + shortcuts: { + control: { type: 'object' }, + description: + 'An object of shortcut bindings, where each key is a keyboard combination, the value of which is the callback to be invoked when the key combination is pressed.\n\n The value of each shortcut should be a consistent function reference, not an anonymous function. Otherwise, the callback will not be correctly unbound when the component unmounts.\n\n The `KeyboardShortcuts` component will not update to reflect a changed `shortcuts` prop.If you need to change shortcuts, mount a separate `KeyboardShortcuts` element, which can be achieved by assigning a unique `key` prop.', + table: { + type: { + summary: 'Record void>', + }, + }, + }, + bindGlobal: { + control: { type: 'boolean' }, + description: + 'By default, a callback will not be invoked if the key combination occurs in an editable field. Pass `bindGlobal` as `true` if the key events should be observed globally, including within editable fields.\n\nTip: If you need some but not all keyboard events to be observed globally, simply render two distinct `KeyboardShortcuts` elements, one with and one without the `bindGlobal` prop.', + table: { + type: { summary: 'boolean' }, + }, + }, + eventName: { + control: { type: 'text' }, + description: + 'By default, a callback is invoked in response to the `keydown` event. To override this, pass `eventName` with the name of a specific keyboard event.', + table: { + type: { summary: 'string' }, + }, + }, + }, +}; + +export default meta; + +export const Default = { + render: function Template( { shortcuts, ...args } ) { + const [ pressedKey, setPressedKey ] = useState( null ); + + const enhancedShortcuts = { + ...shortcuts, + c: () => setPressedKey( 'You pressed "c"!' ), + d: () => setPressedKey( 'You pressed "d"!' ), + }; + + return ( + +
+

Hit the a, b, c, or d key inside this text area:

+