feat(HotkeysPanel): add hotkeys panel docs (#276)

Co-authored-by: kseniyakuzina <[email protected]>

package.json

@@ -10,7 +10,7 @@
     "@gravity-ui/date-components": "^2.10.1",
     "@gravity-ui/icons": "^2.11.0",
     "@gravity-ui/markdown-editor": "^13.18.0",
-    "@gravity-ui/navigation": "^2.23.1",
+    "@gravity-ui/navigation": "^2.24.0",
     "@gravity-ui/page-constructor": "^5.2.0",
     "@gravity-ui/uikit": "^6.27.2",
     "@mdx-js/mdx": "^2.3.0",

src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.scss

@@ -0,0 +1,16 @@
+@use '../../../../variables';
+
+$block: '.#{variables.$ns}hotkeys-panel';
+
+#{$block} {
+    &__title {
+        display: flex;
+        gap: var(--g-spacing-2);
+        align-items: baseline;
+    }
+
+    &__empty {
+        margin: var(--g-spacing-10) auto 0;
+        color: var(--g-color-text-primary);
+    }
+}

src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.tsx

@@ -0,0 +1,42 @@
+import {HotkeysPanel} from '@gravity-ui/navigation';
+import {Hotkey, Text} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {block} from '../../../../utils';
+
+import './HotkeysPanelComponent.scss';
+import {hotkeys} from './constants';
+
+const b = block('hotkeys-panel');
+
+type HotkeysPanelComponentProps = {
+    visible: boolean;
+    filterable: boolean;
+    filterPlaceholder: string;
+};
+
+export function HotkeysPanelComponent({
+    visible,
+    filterable,
+    filterPlaceholder,
+}: HotkeysPanelComponentProps) {
+    return (
+        <HotkeysPanel
+            hotkeys={hotkeys}
+            visible={visible}
+            filterable={filterable}
+            title={
+                <span className={b('title')}>
+                    Hotkeys
+                    <Hotkey value="shift+K" />
+                </span>
+            }
+            filterPlaceholder={filterPlaceholder}
+            emptyState={
+                <Text variant="header-1" className={b('empty')}>
+                    No hotkeys found
+                </Text>
+            }
+        />
+    );
+}

src/content/components/navigation/HotkeysPanel/constants.ts

@@ -0,0 +1,75 @@
+import {HotkeysGroup} from '@gravity-ui/navigation';
+
+export const hotkeys: HotkeysGroup[] = [
+    {
+        title: 'General',
+        items: [
+            {
+                title: 'Copy',
+                value: 'ctrl+c',
+            },
+            {
+                title: 'Paste',
+                value: 'ctrl+v',
+            },
+        ],
+    },
+    {
+        title: 'Issue',
+        items: [
+            {
+                title: 'Go to comments',
+                value: 'shift+c',
+            },
+            {
+                title: 'Go to history',
+                value: 'shift+h',
+            },
+            {
+                title: 'Go to attachments',
+                value: 'shift+a',
+            },
+            {
+                title: 'Edit description',
+                value: 'alt+d',
+            },
+            {
+                title: 'Add new comment',
+                value: 'alt+c',
+            },
+            {
+                title: 'Edit assignee',
+                value: 'alt+e',
+            },
+            {
+                title: 'Edit watchers',
+                value: 'alt+w',
+            },
+            {
+                title: 'Assignee me',
+                value: 'm',
+            },
+            {
+                title: 'Add me to watchers',
+                value: 'w',
+            },
+        ],
+    },
+    {
+        title: 'Board',
+        items: [
+            {
+                title: 'Activate grouping select',
+                value: 'alt+g',
+            },
+            {
+                title: 'Activate sorting select',
+                value: 'alt+s',
+            },
+            {
+                title: 'Go to the backlog',
+                value: 'shift+b',
+            },
+        ],
+    },
+];

src/content/components/navigation/HotkeysPanel/index.ts

@@ -1,7 +1,36 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
 import {Component} from '../../types';
+import {getGithubUrl, getReadmeUrl} from '../../utils';
+
+const getterOptions = {repoName: Repos.Navigation, componentName: 'HotkeysPanel'};
 
 export const hotkeysPanelConfig: Component = {
     id: 'hotkeys-panel',
     title: 'Hotkeys Panel',
-    isComingSoon: true,
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        expandedContainer: true,
+        component: dynamic(() =>
+            import('./HotkeysPanelComponent').then((mod) => mod.HotkeysPanelComponent),
+        ),
+        props: {
+            visible: {
+                type: 'switch',
+                defaultValue: true,
+            },
+            filterable: {
+                type: 'switch',
+                defaultValue: true,
+            },
+            filterPlaceholder: {
+                type: 'input',
+                defaultValue: 'Search',
+            },
+        },
+    },
 };