I am using storybook 6.0.25 for one of my vue project's documentation in which I am switching between records with less than and greater than buttons of keyboard. But when I press less than, storybook responds to the keyup with it's own shortcut to open 'About' page. Is there any way to make storybook stop implementing its all or specified shortcuts? Other shortcut keys are 's', 'd', 'f' which can be obviously used by developers for different purposes! Below is the main.js config file in my vue project for storybook:

const path = require('path');
module.exports = {
  stories: ['../../src/**/*.stories.@(js|ts)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions',
    '@storybook/addon-controls'
  ],
  webpackFinal: async (config, { configType }) => {
    // Use Sass loader for vuetify ponents
    config.module.rules.push({
      test: /\.s(a|c)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        },
      },
    });
    // Return the altered config
    return config;
  },
}

I am using storybook 6.0.25 for one of my vue project's documentation in which I am switching between records with less than and greater than buttons of keyboard. But when I press less than, storybook responds to the keyup with it's own shortcut to open 'About' page. Is there any way to make storybook stop implementing its all or specified shortcuts? Other shortcut keys are 's', 'd', 'f' which can be obviously used by developers for different purposes! Below is the main.js config file in my vue project for storybook:

const path = require('path');
module.exports = {
  stories: ['../../src/**/*.stories.@(js|ts)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions',
    '@storybook/addon-controls'
  ],
  webpackFinal: async (config, { configType }) => {
    // Use Sass loader for vuetify ponents
    config.module.rules.push({
      test: /\.s(a|c)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        },
      },
    });
    // Return the altered config
    return config;
  },
}

• javascript
• typescript
• vue.js
• vuejs2
• storybook

Share Improve this question Follow edited Dec 23, 2020 at 7:33 Yogesh Vadekar asked Dec 23, 2020 at 7:10 Yogesh VadekarYogesh Vadekar 12933 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can turn on or off shortcuts by setting enableShortcuts:true/false. More information can be found here.

Ok I got it. After clearing localStorage of browser, in my 'preview.js' file, I had to add following to change the configs

import { addons } from '@storybook/addons';

addons.setConfig({
  enableShortcuts: false
});

Other workaround I found is adding following part in preview.js file but it is again deprecated to above solution in v7 of storybook(as suggested in console by storybook):

import { addParameters } from '@storybook/vue';
addParameters({
  options: {
    enableShortcuts: false
  }
});