From 203fa1f5692288a6f11ca31640bfddef0ce0c58a Mon Sep 17 00:00:00 2001
From: kseniyakuzina <kseniyakuzina@yandex-team.ru>
Date: Wed, 25 Sep 2024 10:19:04 +0300
Subject: [PATCH] feat(HotkeysPanel): add hotkeys panel docs

---
 .../HotkeysPanel/HotkeysPanelComponent.scss   | 16 ++++
 .../HotkeysPanel/HotkeysPanelComponent.tsx    | 42 +++++++++++
 .../navigation/HotkeysPanel/constants.ts      | 75 +++++++++++++++++++
 .../navigation/HotkeysPanel/index.ts          | 31 +++++++-
 4 files changed, 163 insertions(+), 1 deletion(-)
 create mode 100644 src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.scss
 create mode 100644 src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.tsx
 create mode 100644 src/content/components/navigation/HotkeysPanel/constants.ts

diff --git a/src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.scss b/src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.scss
new file mode 100644
index 000000000000..d4d256302734
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.tsx b/src/content/components/navigation/HotkeysPanel/HotkeysPanelComponent.tsx
new file mode 100644
index 000000000000..ec947738d42e
--- /dev/null
+++ b/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>
+            }
+        />
+    );
+}
diff --git a/src/content/components/navigation/HotkeysPanel/constants.ts b/src/content/components/navigation/HotkeysPanel/constants.ts
new file mode 100644
index 000000000000..847d8d6a35fc
--- /dev/null
+++ b/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',
+            },
+        ],
+    },
+];
diff --git a/src/content/components/navigation/HotkeysPanel/index.ts b/src/content/components/navigation/HotkeysPanel/index.ts
index 48d97e9859ca..db9618964376 100644
--- a/src/content/components/navigation/HotkeysPanel/index.ts
+++ 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',
+            },
+        },
+    },
 };