feat: Hackathon keyboard shortcuts

pages/app/components/header.scss

@@ -27,3 +27,9 @@
     color: #eee;
   }
 }
+
+/* stylelint-disable */
+body[data-hide-header='true'] .header {
+  display: none;
+}
+/* stylelint-enable */

pages/app/components/theme-switcher.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 
 import { Density, Mode } from '@cloudscape-design/global-styles';
 
@@ -28,6 +28,78 @@ export default function ThemeSwitcher() {
     };
   }
 
+  useEffect(() => {
+    let keyPressed: any = {};
+
+    const handleKeyDown = (e: any) => {
+      keyPressed[e.key + e.location] = true;
+
+      if (keyPressed.Control1 === true && (keyPressed.d0 || keyPressed.x0) === true) {
+        // Left shift+CONTROL pressed!
+        if (mode === 'dark') {
+          setMode(Mode.Light);
+          keyPressed = {}; // reset key map
+        } else if (mode === 'light') {
+          setMode(Mode.Dark);
+          keyPressed = {}; // reset key map
+        }
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.c0 === true) {
+        e.preventDefault();
+        if (urlParams.density === 'comfortable') {
+          setUrlParams({ density: Density.Compact });
+        } else if (urlParams.density === 'compact') {
+          setUrlParams({ density: Density.Comfortable });
+        }
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.m0 === true) {
+        e.preventDefault();
+        setUrlParams({ motionDisabled: !urlParams.motionDisabled });
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.r0 === true) {
+        e.preventDefault();
+        document.documentElement.setAttribute('dir', 'rtl');
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.l0 === true) {
+        e.preventDefault();
+        document.documentElement.setAttribute('dir', 'ltr');
+        keyPressed = {}; // reset key map
+      }
+
+      if (keyPressed.Control1 === true && keyPressed.v0 === true) {
+        e.preventDefault();
+        if (ALWAYS_VISUAL_REFRESH) {
+          setUrlParams({ visualRefresh: true });
+        } else {
+          setUrlParams({ visualRefresh: !urlParams.visualRefresh });
+          window.location.reload();
+        }
+        keyPressed = {}; // reset key map
+      }
+    };
+
+    const handleKeyUp = (e: any) => {
+      keyPressed[e.key + e.location] = false;
+
+      keyPressed = {};
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [mode, urlParams.density, urlParams.motionDisabled, urlParams.visualRefresh, setMode, setUrlParams]);
+
   return (
     <SpaceBetween direction="horizontal" size="xs">
       <label>

pages/keyboard-shortcut-hackathon/add-new-shortcut.tsx

@@ -0,0 +1,95 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Box, Button, FormField, Input, Multiselect, Select, SpaceBetween } from '~components';
+
+import { shortcuts } from './shortcuts';
+
+function AddNewShortcut({ customItems, setCustomItems }: any) {
+  const shortcutNames = shortcuts.map(shortcut => shortcut.name);
+  const [actions, setActions] = React.useState<any>([]);
+  const [keyCombo, setKeyCombo] = React.useState<any>({ key1: { label: 'Command', value: '1' }, key2: null });
+  const [shortcutName, setShortcutName] = React.useState('');
+
+  const actionOptions = shortcutNames.map((name, index) => ({
+    label: name,
+    value: `${index}`,
+    disabled: !actions.map((action: any) => action.label).includes(name) && actions.length >= 3,
+  }));
+
+  return (
+    <SpaceBetween size="xl">
+      <FormField label="Action" description="Select up to 3 actions that can take place at once.">
+        <SpaceBetween size="xs">
+          <Multiselect
+            selectedOptions={actions}
+            onChange={({ detail }) => setActions(detail.selectedOptions)}
+            options={actionOptions}
+            placeholder="Choose options"
+          />
+        </SpaceBetween>
+      </FormField>
+      <FormField label="Key combination">
+        <SpaceBetween direction="horizontal" size="xs">
+          <Select
+            selectedOption={keyCombo.key1}
+            onChange={({ detail }) => setKeyCombo({ key1: detail.selectedOption, key2: keyCombo.key2 })}
+            options={[
+              { label: 'Command', value: '1' },
+              { label: 'Control', value: '2' },
+              { label: 'Option', value: '3' },
+              { label: 'Shift', value: '4' },
+            ]}
+          />
+          <Select
+            selectedOption={keyCombo.key2}
+            onChange={({ detail }) => setKeyCombo({ key1: keyCombo.key1, key2: detail.selectedOption })}
+            options={[
+              { label: 'A', value: '1' },
+              { label: 'B', value: '2' },
+              { label: 'C', value: '3' },
+              { label: 'D', value: '4' },
+              { label: 'E', value: '5' },
+              { label: 'F', value: '6' },
+              { label: 'X', value: '7' },
+            ]}
+          />
+        </SpaceBetween>
+      </FormField>
+      <FormField label="Shortcut name" description="Add an optional name for the shortcut. Will default to the action.">
+        <Input
+          placeholder="Go into focus mode"
+          value={shortcutName}
+          onChange={({ detail }) => setShortcutName(detail.value)}
+        />
+      </FormField>
+      <Box float="right">
+        <SpaceBetween direction="horizontal" size="xs">
+          <Button>Cancel</Button>
+          <Button
+            variant="primary"
+            onClick={() => {
+              setCustomItems([
+                ...customItems,
+                {
+                  name: shortcutName || `${actions[0].label} + ${actions[1]?.label} + ${actions[2]?.label}`,
+                  shortcut: `${keyCombo.key1.label} + ${keyCombo.key2.label}`,
+                  actions: actions,
+                  status: 'Enabled',
+                },
+              ]);
+              setActions([]);
+              setShortcutName('');
+              setKeyCombo({ key1: null, key2: null });
+            }}
+          >
+            Submit
+          </Button>
+        </SpaceBetween>
+      </Box>
+    </SpaceBetween>
+  );
+}
+
+export default AddNewShortcut;