Как добавить декоратор в storybook?

Если вы хотите добавить декоратор в Storybook, вам потребуется выполнить несколько шагов.

Первым делом, установите Storybook, если вы еще этого не сделали, с помощью команды:

npx -p @storybook/cli sb init

Далее, создайте файл preview.js в корневом каталоге вашего Storybook проекта, если его еще нет.

В этом файле вы можете использовать функцию addDecorator, которая позволяет добавить декоратор к вашим историям. Декоратор – это функция, которая позволяет изменять внешний вид и поведение компонентов, добавляя, например, стили или контекст.

Пример:

// preview.js

import React from 'react';
import { addDecorator } from '@storybook/react';

// Ваш декоратор
const withMyDecorator = (storyFn) => {
  return <div style={{ background: 'red' }}>{storyFn()}</div>;
};

// Добавляем декоратор
addDecorator(withMyDecorator);

В этом примере мы создаем простой декоратор withMyDecorator, который оборачивает историю компонента в div с красным фоном. Затем мы используем addDecorator, чтобы применить этот декоратор ко всем историям компонентов.

Теперь, когда вы запустите Storybook, вы увидите, что все истории компонентов обернуты в div с красным фоном.

Если вы хотите применить декоратор только к определенным историям, вы можете вместо addDecorator(withMyDecorator) использовать addDecorator(withMyDecorator)(storyFn) внутри функции configure вашего config.js файла.

Пример:

// config.js

import { configure, addDecorator } from '@storybook/react';
import React from 'react';

// Ваш декоратор
const withMyDecorator = (storyFn) => {
  return <div style={{ background: 'red' }}>{storyFn()}</div>;
};

function loadStories() {
  // Импортируйте истории
  require('../src/stories');

  // Применяем декоратор к определенной истории
  addDecorator(withMyDecorator)(storyFn)
}

configure(loadStories, module);

Таким образом, вы можете добавить декораторы в Storybook и изменять внешний вид и поведение ваших компонентов, делая ваше приложение более интересным и привлекательным.