add help panel with hotkeys descr. refactor url state management (#25)

Author: MykolaGolubyev

src/components/hotkeys/HotKeyPill.css

@@ -0,0 +1,10 @@
+.rcv-hotkey-pill {
+    font-size: 12px;
+
+    margin-right: 4px;
+    margin-left: 4px;
+
+    padding: 3px;
+    border: 1px solid var(--rcv-secondary-border-color);
+    border-radius: 4px;
+}

src/components/hotkeys/HotKeyPill.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import './HotKeyPill.css';
+
+export interface Props {
+    hotKey: string;
+}
+
+export function HotKeyPill({hotKey}: Props) {
+    return (
+        <div className="rcv-hotkey-pill">
+            {hotKey}
+        </div>
+    );
+}

src/components/viewer/ComponentViewer.css

@@ -89,4 +89,11 @@ body {
   margin: 10px 10px 10px 20px;
 
   overflow: auto;
+}
+
+.rcv-help {
+  grid-area: preview;
+  justify-self: right;
+
+  z-index: 1000;
 }

src/components/viewer/ComponentViewer.tsx

@@ -21,6 +21,9 @@ import { HotKeyBoundActions } from '../hotkeys/HotKeyBoundActions';
 
 import { ComponentViewerDropDown } from './ComponentViewerDropDown';
 
+import { ComponentViewerHelp } from './help/ComponentViewerHelp';
+import { globalActionDefaultKeys } from './GlobalActions';
+
 import './ComponentViewer.css';
 
 export interface Props {
@@ -44,11 +47,11 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
 
         this.state = this.stateFromUrl();
         this.hotKeyBoundActions = {
-            'Alt F': this.onFullScreenToggle,
-            'Ctrl Alt Down': this.onNextDemo,
-            'Ctrl Alt Up': this.onPrevDemo,
-            'Ctrl Alt Right': this.onNextDemoEntry,
-            'Ctrl Alt Left': this.onPrevDemoEntry,
+            [globalActionDefaultKeys.fullScreenToggle]: this.onFullScreenToggle,
+            [globalActionDefaultKeys.nextDemo]: this.onNextDemo,
+            [globalActionDefaultKeys.prevDemo]: this.onPrevDemo,
+            [globalActionDefaultKeys.nextDemoEntry]: this.onNextDemoEntry,
+            [globalActionDefaultKeys.prevDemoEntry]: this.onPrevDemoEntry,
             ...this.dropDownKeyBoundActions()
         };
     }
@@ -81,7 +84,8 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
             registryName,
             demoName,
             filterText,
-            selectedToolbarItem
+            selectedToolbarItem,
+            isHelpOn
         } = this.state;
 
         return (
@@ -96,7 +100,8 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
 
                 <div className="rcv-toolbar-panel">
                     <Toolbar
-                        onFullScreen={this.onFullScreenToggle}
+                        questionMarkToggledOn={isHelpOn}
+                        onQuestionMarkClick={this.onQuestionMarkToggle}
                         dropDownLabel={dropDown ? dropDown.label : undefined}
                         dropDownSelected={selectedToolbarItem}
                         dropDownItems={dropDown ? dropDown.items : undefined}
@@ -124,6 +129,10 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
                 <div className="rcv-preview">
                     {this.renderDemo(demoEntry, false)}
                 </div>
+
+                {isHelpOn && <div className="rcv-help">
+                    <ComponentViewerHelp/>
+                </div>}
             </div>
         );
     }
@@ -200,12 +209,11 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
     }
 
     private onFullScreenToggle = () => {
-        this.pushUrl(
-            this.state.registryName,
-            this.state.demoName,
-            this.state.entryTitle,
-            !this.state.isFullScreen,
-            this.state.selectedToolbarItem);
+        this.pushUrl({isFullScreen: !this.state.isFullScreen});
+    }
+
+    private onQuestionMarkToggle = () => {
+        this.pushUrl({isHelpOn: !this.state.isHelpOn});
     }
 
     private onNextDemo = () => {
@@ -260,41 +268,24 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
     }
 
     private selectRegistry = (registryName: string) => {
-        this.pushUrl(
+        this.pushUrl({
             registryName,
-            '',
-            '',
-            this.state.isFullScreen,
-            this.state.selectedToolbarItem);
+            demoName: '',
+            entryTitle: ''});
     }
 
     private selectDemo = (demoName: string) => {
-        this.pushUrl(
-            this.state.registryName,
-            demoName,
-            '',
-            this.state.isFullScreen,
-            this.state.selectedToolbarItem);
+        this.pushUrl({demoName, entryTitle: ''});
     }
 
     private selectInstanceByTitle = (title: string) => {
-        this.pushUrl(
-            this.state.registryName,
-            this.state.demoName,
-            title,
-            this.state.isFullScreen,
-            this.state.selectedToolbarItem);
+        this.pushUrl({entryTitle: title});
     }
 
     private selectToolbarItem = (label: string) => {
         const {dropDown} = this.props;
 
-        this.pushUrl(
-            this.state.registryName,
-            this.state.demoName,
-            this.state.entryTitle,
-            this.state.isFullScreen,
-            label);
+        this.pushUrl({selectedToolbarItem: label});
 
         if (dropDown) {
             dropDown.onSelect(label);
@@ -316,15 +307,9 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
             [];
     }
 
-    private pushUrl(
-        registryName: string,
-        demoName: string,
-        entryTitle: string,
-        isFullScreen: boolean,
-        selectedToolbarItem: string
-    ) {
-        const searchParams = this.stateCreator.buildUrlSearchParams(
-            {registryName, demoName, entryTitle, isFullScreen, selectedToolbarItem, filterText: ''});
+    private pushUrl(newState: Partial<ComponentViewerState>) {
+        const fullState = {...this.state, ...newState};
+        const searchParams = this.stateCreator.buildUrlSearchParams({...fullState, filterText: ''});
         const newUrl = '?' + searchParams;
 
         window.history.pushState({}, '', newUrl);

src/components/viewer/ComponentViewerState.ts

@@ -3,6 +3,7 @@ export interface ComponentViewerState {
     demoName: string;
     entryTitle: string;
     isFullScreen: boolean;
+    isHelpOn: boolean;
     filterText: string;
     selectedToolbarItem: string;
 }

src/components/viewer/ComponentViewerStateCreator.test.tsx

@@ -29,6 +29,7 @@ describe('ComponentViewerStateCreator', () => {
             entryTitle: 'title-c-a',
             filterText: '',
             isFullScreen: false,
+            isHelpOn: false,
             selectedToolbarItem: ''
         });
     });
@@ -47,6 +48,7 @@ describe('ComponentViewerStateCreator', () => {
             demoName: 'demo-name',
             entryTitle: '',
             isFullScreen: true,
+            isHelpOn: false,
             filterText: '',
             selectedToolbarItem: ''
         });

src/components/viewer/ComponentViewerStateCreator.ts

@@ -8,8 +8,9 @@ const queryParamNames = {
     registryName: 'registryName',
     demoName: 'demoName',
     entryTitle: 'entryTitle',
+    selectedToolbarItem: 'toolbarItem',
     isFullScreen: 'fullScreen',
-    selectedToolbarItem: 'toolbarItem'
+    isHelpOn: 'help'
 };
 
 export class ComponentViewerStateCreator {
@@ -40,6 +41,7 @@ export class ComponentViewerStateCreator {
                 demoName: miniAppByUrl.demoEntry.name,
                 entryTitle: miniAppByUrl.demoEntry.firstEntryTitle,
                 isFullScreen: true,
+                isHelpOn: false,
                 filterText: '',
                 selectedToolbarItem
             };
@@ -57,11 +59,15 @@ export class ComponentViewerStateCreator {
         const fullScreenValue = searchParams.get(queryParamNames.isFullScreen) || 'false';
         const isFullScreen = fullScreenValue === 'true';
 
+        const helpOnValue = searchParams.get(queryParamNames.isHelpOn) || 'false';
+        const isHelpOn = helpOnValue === 'true';
+
         return {
             registryName,
             demoName,
             entryTitle,
             isFullScreen,
+            isHelpOn,
             selectedToolbarItem,
             filterText: ''
         };

src/components/viewer/GlobalActions.ts

@@ -0,0 +1,23 @@
+export interface GlobalActions {
+    fullScreenToggle: string;
+    nextDemo: string;
+    prevDemo: string;
+    nextDemoEntry: string;
+    prevDemoEntry: string;
+}
+
+export const globalActionDescription: GlobalActions = {
+    fullScreenToggle: 'toggle full screen',
+    nextDemo: 'select next demo',
+    prevDemo: 'select previous demo',
+    nextDemoEntry: 'select next demo entry',
+    prevDemoEntry: 'select prev demo entry',
+};
+
+export const globalActionDefaultKeys: GlobalActions = {
+    fullScreenToggle: 'Alt F',
+    nextDemo: 'Ctrl Alt Down',
+    prevDemo: 'Ctrl Alt Up',
+    nextDemoEntry: 'Ctrl Alt Right',
+    prevDemoEntry: 'Ctrl Alt Left',
+};

src/components/viewer/help/ComponentViewerHelp.css

@@ -0,0 +1,36 @@
+.rcv-component-viewer-help {
+    font-size: 14px;
+    font-family: var(--rcv-font-family);
+
+    width: 400px;
+    background-color: var(--rcv-primary-background-color);
+
+    height: 100%;
+    border-left: 1px solid var(--rcv-primary-border-color);
+    box-sizing: border-box;
+
+    padding-left: 16px;
+    padding-top: 8px;
+
+    overflow: auto;
+}
+
+.rcv-component-viewer-help > h1 {
+    font-size: 20px;
+}
+
+.rcv-component-viewer-help > h1:not(:first-child) {
+    margin-top: 30px;
+}
+
+.rcv-component-viewer-help > a,
+.rcv-component-viewer-help > a:visited {
+    color: #618be1;
+}
+
+.rcv-component-viewer-help-hotkeys-grid {
+    display: grid;
+
+    grid-template-columns: auto 1fr;
+    grid-gap: 8px 32px;
+}

src/components/viewer/help/ComponentViewerHelp.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { globalActionDefaultKeys, globalActionDescription } from '../GlobalActions';
+import { HotKeyPill } from '../../hotkeys/HotKeyPill';
+
+import './ComponentViewerHelp.css';
+
+export function ComponentViewerHelp() {
+    return (
+        <div className="rcv-component-viewer-help">
+            <h1>Hotkeys</h1>
+            <div className="rcv-component-viewer-help-hotkeys-grid">
+                {Object.keys(globalActionDefaultKeys).map(actionKey =>
+                    <HotKeyAndDescription
+                        key={actionKey}
+                        actionKey={actionKey}
+                    />)}
+            </div>
+            <h1>GitHub</h1>
+            <a href="https://github.com/MykolaGolubyev/react-component-viewer" target="_blank">Repository</a>
+        </div>
+    );
+}
+
+interface HotKeyAndDescriptionProps {
+    actionKey: string;
+}
+
+function HotKeyAndDescription({actionKey}: HotKeyAndDescriptionProps) {
+    return (
+        <React.Fragment>
+            <HotKeyPill hotKey={globalActionDefaultKeys[actionKey]}/>
+            <div>{globalActionDescription[actionKey]}</div>
+        </React.Fragment>
+    );
+}