Сборник рассказов – это мощный инструмент, используемый веб-разработчиками для создания, тестирования и демонстрации компонентов пользовательского интерфейса по отдельности. Он предоставляет удобный интерфейс и множество дополнений, которые расширяют возможности разработки. Однако могут быть случаи, когда вы захотите скрыть определенные дополнения, чтобы упростить рабочий процесс или повысить производительность. В этой статье мы рассмотрим несколько способов скрыть дополнения в Storybook, сопровождая их разговорными объяснениями и примерами кода.

Метод 1: настройка файла addons.js
Файл конфигурации Storybook, addons.js, позволяет вам контролировать, какие дополнения загружаются. Откройте файл и найдите массив addons. Чтобы скрыть аддон, просто удалите его из массива. Например, чтобы скрыть дополнение «@storybook/addon-actions», удалите '@storybook/addon-actions/register'.

// addons.js
module.exports = {
  addons: [
    // '@storybook/addon-actions/register',  // Remove this line to hide the addon
    '@storybook/addon-links/register',
    '@storybook/addon-viewport/register',
    // ...
  ],
};

Метод 2: использование параметра disable.
Другой способ скрыть дополнения — использовать параметр disableв файле конфигурации Storybook. Этот метод позволяет отключить определенные дополнения без изменения файла addons.js. Просто добавьте параметр disableс именем дополнения в соответствующий файл истории.

// Button.stories.js
export default {
  title: 'Components/Button',
  parameters: {
    actions: { disable: true },  // Addon is disabled for this story
  },
};

Метод 3: создание собственного декоратора
Если вам нужна большая гибкость в скрытии дополнений для каждой истории, вы можете создать собственный декоратор. Декораторы — это функции, которые оборачивают истории и позволяют изменять их поведение. В этом случае мы можем создать декоратор, скрывающий определенные дополнения.

// decorators.js
import { addDecorator } from '@storybook/react';
export const hideAddonDecorator = (Story, context) => {
  const newContext = {
    ...context,
    parameters: {
      ...context.parameters,
      actions: { disable: true },  // Addon is disabled for this story
    },
  };
  return <Story {...newContext} />;
};
addDecorator(hideAddonDecorator);

Метод 4: использование условного рендеринга.
Если вы хотите динамически скрывать дополнения на основе определенных условий, вы можете использовать условный рендеринг в своих историях. Вы можете использовать логику JavaScript для условного отображения дополнения в соответствии с вашими требованиями.

// Button.stories.js
import { action } from '@storybook/addon-actions';
export const DefaultButton = () => (
  <button onClick={action('clicked')}>
    Click me
  </button>
);
DefaultButton.parameters = {
  actions: {
    disable: process.env.NODE_ENV === 'production',  // Hide addon in production environment
  },
};

В этой статье мы рассмотрели различные способы скрыть дополнения в Storybook. Предпочитаете ли вы изменить файл addons.js, использовать параметр disable, создавать собственные декораторы или использовать условный рендеринг, теперь у вас есть ряд возможностей для оптимизации рабочего процесса Storybook. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует вашим потребностям в разработке.