import React from 'react';
import { actions as makeActions } from '@storybook/addon-actions';

import ShortcutsScreen from './shortcuts';
import { defaultShortcuts } from '../core/shortcuts';

const actions = makeActions(
  'setShortcut',
  'restoreDefaultShortcut',
  'restoreAllDefaultShortcuts',
  'onClose'
);

export default {
  component: ShortcutsScreen,
  title: 'UI|Settings/ShortcutsScreen',
  decorators: [
    s => (
      <div
        style={{
          position: 'relative',
          height: 'calc(100vh)',
          width: 'calc(100vw)',
        }}
      >
        {s()}
      </div>
    ),
  ],
};

export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
defaults.title = 'default shortcuts';

@@ -131,24 +131,22 @@
 tcuts';%0A
-import %7B
+%0Aconst
  default
@@ -159,34 +159,459 @@
 uts 
-%7D from '../core/shortcuts'
+= %7B%0A  fullScreen: %5B'F'%5D,%0A  togglePanel: %5B'A'%5D,%0A  panelPosition: %5B'D'%5D,%0A  toggleNav: %5B'S'%5D,%0A  toolbar: %5B'T'%5D,%0A  search: %5B'/'%5D,%0A  focusNav: %5B'1'%5D,%0A  focusIframe: %5B'2'%5D,%0A  focusPanel: %5B'3'%5D,%0A  prevComponent: %5B'alt', 'ArrowUp'%5D,%0A  nextComponent: %5B'alt', 'ArrowDown'%5D,%0A  prevStory: %5B'alt', 'ArrowLeft'%5D,%0A  nextStory: %5B'alt', 'ArrowRight'%5D,%0A  shortcutsPage: %5B'ctrl', 'shift', ','%5D,%0A  aboutPage: %5B','%5D,%0A  escape: %5B'escape'%5D, // This one is not customizable%0A%7D
 ;%0A%0Ac

FIX shortcuts story