Как я могу использовать selectedPanel в сборнике рассказов?

Question

Я заметил свойство в документах параметров Storybooks под названиемselectedPanel что, как я предполагаю, позволит мне предварительно выбрать панель надстройки.

Я не понимаю, как его использовать. Пример такой:

options: { selectedPanel: 'storybook/a11y/panel' }

Я не понимаю, откуда взялась строка 'storybook/a11y/panel'. Что, если я хочу предварительно выбрать панель "Источник"?

Answer 1

Я столкнулся с той же проблемой и выяснил, что panelId можно по крайней мере найти в аддоне registerшаг исходного кода. Например, я хотел открыть Readme вкладка для определенных историй.

В итоге я нашел идентификатор панели в registerWithPanelTitle.js, а затем использовать его с storiesOf API вроде этого:

.addParameters({
  options: { selectedPanel: 'REACT_STORYBOOK/readme/panel' },
})

Для a11y его можно найти в constants.ts.

Хотя я искал те, что в распределенном node_modules версии в моем случае.

PS Если вы хотите изменить порядок панелей для всех историй глобально, список, в который импортируются надстройки, обрабатывает это.

Answer 2

Для тех, кто хочет по умолчанию использовать панель ручек: selectedPanel: 'storybookjs/knobs/panel' похоже работает!

Answer 3

Я использовал @storybook/addons-essential в main.js и просто добавил @storybook/addon-controls к передней части addons вариант массива, например:

module.exports = {
    addons: ['@storybook/addon-controls', '@storybook/addon-essentials'],
    ...
}

Это помещает вкладку управления первой, которая выбирается автоматически.