From 7db73c50fa1dd4f0e0b158c168bdaddf0b2f0236 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9A=D1=81=D0=B5=D0=BD=D0=B8=D1=8F?= <31247233+kseniya57@users.noreply.github.com> Date: Thu, 26 Sep 2024 13:17:21 +0300 Subject: [PATCH] feat(HotkeysPanel): add hotkeys panel docs (#276) Co-authored-by: kseniyakuzina --- package-lock.json | 9 +-- package.json | 2 +- .../HotkeysPanel/HotkeysPanelComponent.scss | 16 ++++ .../HotkeysPanel/HotkeysPanelComponent.tsx | 42 +++++++++++ .../navigation/HotkeysPanel/constants.ts | 75 +++++++++++++++++++ .../navigation/HotkeysPanel/index.ts | 31 +++++++- 6 files changed, 168 insertions(+), 7 deletions(-) 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/package-lock.json b/package-lock.json index e7d95519779c..f5de60b641d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,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", @@ -3563,10 +3563,9 @@ } }, "node_modules/@gravity-ui/navigation": { - "version": "2.23.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/navigation/-/navigation-2.23.1.tgz", - "integrity": "sha512-JimjbEKvV66Ozg7LlyXe9SbHhtT87R0oU3DKVyNzC73nM2gM1BkfGx7Y+CH9kXlElVxFA0Qu9NXyVlYjfEyDJg==", - "license": "MIT", + "version": "2.24.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/navigation/-/navigation-2.24.0.tgz", + "integrity": "sha512-CjCrq2wWjakIpv0FM/RpNVbpj4DMziDXhPwSm56fwjhd1LtbA5F5tsu2FXxhLUBTIz6Wo+QKNWZhSmDPB7n94w==", "dependencies": { "react-transition-group": "^4.4.1", "tslib": "^2.4.0" diff --git a/package.json b/package.json index 0b9843c96920..721950c7fddb 100644 --- a/package.json +++ b/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", 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 ( + + Hotkeys + + + } + filterPlaceholder={filterPlaceholder} + emptyState={ + + No hotkeys found + + } + /> + ); +} 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', + }, + }, + }, };