Контроль глобальных декораторов через Args в сборнике рассказов

Сборник рассказов декораторы (в React) предоставьте мощный способ повторного использования компонентных среда для нескольких историй. Тем не менее, нет никаких готовых рычагов для манипулирования глобальными декораторами из отдельных историй.

На работе ( мы нанимаем! ) Недавно я забрал наших многочисленных поставщиков контекста в одном База декоратор. Вот упрощенный пример.

// .storybook/decorators/base.tsx
export const Base: DecoratorFn = (Story, options) => {
  return (
    
      
    
  );
};

// .storybook/preview.js
import { Base } from './decorators/base';

export const decorators = [Base];

Testreactroot Инкапсулирует несколько поставщиков, включая классический React-Redux провайдер. Итак, теперь мы можем легко написать истории, которые имеют Использует селектор и другие Redux крючков с минимальным парикмаржевым. Но как мне, скажем, установить начальное состояние Redux из истории, когда нет видимой ссылки на глобальную База декоратор? В частности, я хочу использовать сборник рассказов элементы управления динамически установить состояние Redux.

Я не смог найти никаких существующих стратегий для этого в сообществе рассказов, поэтому в итоге я использовал Инверсия контроля : Отдельные истории предоставляют функцию args конфигурация, которую вызывает глобальный декоратор.

// ./storybook/decorators/base.tsx
export const Base: DecoratorFn = (Story, options) => {
  const { args } = options;

  if (args.modifyArgs) {
    Object.assign(args, args.modifyArgs(args));
  }

  return (
    
      
    
  );
};

// src/components/user-avatar.stories.tsx
export default {
  title: "User Avatar",
  args: {
    admin: false,
    modifyArgs: (args) => {
      return {
        reduxState: generateReduxState({ admin: args.admin })
      }
    }
  }
}

Бум! Конфигурация истории просто знает, что может передать чистую функцию ModifyArgs и База Декоратор решает, что делать с возвратной стоимостью.

✨ Бонус ✨ Поскольку args.modifyargs не предназначен для управления браузером , мы можем отключить его в пользовательском интерфейсе.

export default {
  title: "User Avatar",
  args: { ... },
  argTypes: {
    modifyArgs: { table: { disable: true } }
  }
}

Итак, у вас есть: если вы хотите повлиять на глобальное государство декоратора/провайдера через элементы управления сборниками рассказов:

1. Используйте хорошую старую функцию Callback в args конфигурация, которая принимает args как значение и возвращает частичный от args объект.
2. Проверьте эту функцию обратного вызова в Global Decorator
3. Если обратный вызов есть, вызовите его и назначьте результат args объект (или любая часть нуждается в мутации).
4. Соответственно передать ваши обновленные данные.

Наслаждаться!

Оригинал: “https://dev.to/tmikeschu/controlling-global-decorators-via-args-in-storybook-41lf”