chore(keyboard-key): playgorund storybook

twilio-labs · Nov 5, 2024 · 59b0d43 · 59b0d43
1 parent 1ff559c
commit 59b0d43
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 22 deletions.
diff --git a/packages/paste-core/components/keyboard-key/src/hooks.ts b/packages/paste-core/components/keyboard-key/src/hooks.ts
@@ -7,45 +7,34 @@ export interface useKeyCombinationProps {
   onCombinationPress: () => void;
   disabled?: boolean;
   enablePressStyles?: boolean;
-  disableBrowserShortcuts?: boolean;
 }
 
 interface useKeyCombinationReturn extends Omit<KeyboardCombinationState, "activeKeys"> {
   activeKeys: string[];
 }
 
-interface useKeyCombinationsReturn{
+interface useKeyCombinationsReturn {
   activeKeys: string[];
 }
 
 export interface useKeyCombinationsProps {
-  combinations: Omit<useKeyCombinationProps, "enablePressStyles" & "disableBrowserShortcuts">[];
-  disableBrowserShortcuts?: boolean;
+  combinations: Omit<useKeyCombinationProps, "enablePressStyles">[];
 }
 
-const useKeyEvents = (disableBrowserShortcuts: boolean): { activeKeys: string[] } => {
+const useKeyEvents = (): { activeKeys: string[] } => {
   const [activeKeys, setActiveKeys] = React.useState<string[]>([]);
 
   const handleKeyDown = (e: KeyboardEvent): void => {
     if (!e.repeat) {
       setActiveKeys((prev) => {
-        // ignore any system combination triggers
-        if (
-          disableBrowserShortcuts &&
-          prev.find((k) => k === "Meta" || k === "Control") &&
-          /^(?:(?!\b(Meta|Control)\b).)*$/i.test(e.key)
-        ) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
         return Array.from(new Set([...prev, e.key]));
       });
     }
   };
 
   const handleKeyUp = (e: KeyboardEvent): void => {
     /**
-     * Due to a weird behavior on macOS we need to clear the set if the user pressed down the meta key and presses another key. 
+     * Due to a weird behavior on macOS we need to clear the set if the user pressed down the meta key and presses another key.
      * https://stackoverflow.com/questions/11818637/why-does-javascript-drop-keyup-events-when-the-metakey-is-pressed-on-mac-browser
      * Otherwise the set will hold all ever pressed keys while the meta key is down which leads to wrong results.
      */
@@ -77,9 +66,8 @@ export const useKeyCombination = ({
   onCombinationPress,
   disabled,
   enablePressStyles,
-  disableBrowserShortcuts = false,
 }: useKeyCombinationProps): useKeyCombinationReturn => {
-  const { activeKeys } = useKeyEvents(disableBrowserShortcuts);
+  const { activeKeys } = useKeyEvents();
 
   React.useEffect(() => {
     const combinationMatch = stringArrayMatches(keys, activeKeys);
@@ -92,11 +80,8 @@ export const useKeyCombination = ({
   return { activeKeys, disabled, enablePressStyles };
 };
 
-export const useKeyCombinations = ({
-  combinations,
-  disableBrowserShortcuts = false,
-}: useKeyCombinationsProps): useKeyCombinationsReturn => {
-  const { activeKeys } = useKeyEvents(disableBrowserShortcuts);
+export const useKeyCombinations = ({ combinations }: useKeyCombinationsProps): useKeyCombinationsReturn => {
+  const { activeKeys } = useKeyEvents();
   React.useEffect(() => {
     const combinationMatch = combinations.find((combos) => stringArrayMatches(combos.keys, activeKeys));
 

diff --git a/packages/paste-core/components/keyboard-key/stories/index.stories.tsx b/packages/paste-core/components/keyboard-key/stories/index.stories.tsx
@@ -92,6 +92,76 @@ export const ForcePressed = (): React.ReactElement => {
   );
 };
 
+export const MultipleCombinations = (): React.ReactElement => {
+  const [textToDisplay, setTextToDisplay] = React.useState<string>("");
+
+  const stateCtrB = useKeyCombination({
+    keys: ["Control", "b"],
+    onCombinationPress: (): void => {
+      setTextToDisplay("Control + B pressed");
+    },
+    enablePressStyles: true,
+  });
+  const stateCtrK = useKeyCombination({
+    keys: ["Control", "k"],
+    onCombinationPress: (): void => {
+      setTextToDisplay("Control + K pressed");
+    },
+    enablePressStyles: true,
+  });
+  const stateCmdB = useKeyCombination({
+    keys: ["Meta", "b"],
+    onCombinationPress: (): void => {
+      setTextToDisplay("Cmd + B pressed");
+    },
+    enablePressStyles: true,
+  });
+  const stateCmdK = useKeyCombination({
+    keys: ["Meta", "k"],
+    onCombinationPress: (): void => {
+      setTextToDisplay("Cmd + K pressed");
+    },
+    enablePressStyles: true,
+  });
+  const stateCmdShiftB = useKeyCombination({
+    keys: ["Meta", "Shift", "p"],
+    onCombinationPress: (): void => {
+      setTextToDisplay("Cmd + Shift + P pressed");
+    },
+    enablePressStyles: true,
+  });
+
+  return (
+    <Theme.Provider theme="twilio">
+      <Stack orientation="vertical" spacing="space40">
+        <KeyboardKeyGroup {...stateCtrB}>
+          <KeyboardKey keyText="Control">Control</KeyboardKey>
+          <KeyboardKey keyText="b">B</KeyboardKey>
+        </KeyboardKeyGroup>
+        <KeyboardKeyGroup {...stateCtrK}>
+          <KeyboardKey keyText="Control">Control</KeyboardKey>
+          <KeyboardKey keyText="k">K</KeyboardKey>
+        </KeyboardKeyGroup>
+        <KeyboardKeyGroup {...stateCmdB}>
+          <KeyboardKey keyText="Meta">Cmd</KeyboardKey>
+          <KeyboardKey keyText="b">B</KeyboardKey>
+        </KeyboardKeyGroup>
+        <KeyboardKeyGroup {...stateCmdK}>
+          <KeyboardKey keyText="meta">Cmd</KeyboardKey>
+          <KeyboardKey keyText="k">K</KeyboardKey>
+        </KeyboardKeyGroup>
+        <KeyboardKeyGroup {...stateCmdShiftB}>
+          <KeyboardKey keyText="meta">Cmd</KeyboardKey>
+          <KeyboardKey keyText="Shift">Shift</KeyboardKey>
+          <KeyboardKey keyText="p">P</KeyboardKey>
+        </KeyboardKeyGroup>
+      </Stack>
+      <br/>
+      <Paragraph>Combination pressed: {textToDisplay}</Paragraph>
+    </Theme.Provider>
+  );
+};
+
 export const TriggerModal = (): React.ReactElement => {
   const [isOpen, setIsOpen] = React.useState(false);
   const state = useKeyCombination({