Как настроить аддон видового экрана для Angular

Question

В соответствии с этой документацией я пытаюсь добавить пользовательский видовой экран в файл conifig.js:

import { addParameters } from '@storybook/angular'; // changing from react to angular
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';

const newViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};

addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
      ...newViewports,
    },
  },
});

Но это не работает для меня, потому что в угловых lib у нас нет реализации для метода addParameters. Как мы можем настроить это для угловых?

Answer 1

Проблема связана с оператором распространения в Storybook, поэтому, чтобы исправить это в приложении Angular, вы должны установить transform-object-rest-spread плагин и настройте Babel на Playbook.

Вы можете выполнить следующие шаги:

1. Установите плагин: npm install --save-dev babel-plugin-transform-object-rest-spread.
2. Создайте файл .babelrc в папке .storybook/(Не беспокойтесь, Babel в этом случае повлияет только на конфигурацию Playbook. Подробнее https://storybook.js.org/docs/configurations/custom-babel-config/)
3. Добавьте следующий код в файл .babelrc:

{
    "plugins": ["transform-object-rest-spread"]
}

4. Оберните объект Viewports на объекте, чтобы создать новый объект:

Вариант А

viewport: { viewports: {...INITIAL_VIEWPORTS, ...newViewports} }

Вариант Б

const myViewports = {...INITIAL_VIEWPORTS, ...newViewports};

addParameters({ viewport: { viewports: myViewports} });

5. Запустите Storybook еще раз и наслаждайтесь;)

Надеюсь, это сработает!