Мобильная версияStorybook поддерживает условное скрытие элементов управления в пользовательском интерфейсе на основе значения другого аргумента (например, «показать дополнительные настройки»). Однако, когда эти элементы управления скрыты, соответствующие им аргументы не удаляются и не устанавливаются во внутреннем хранилище как неопределенные — они просто остаются как есть. Это непоследовательно, поскольку, хотя и признавалась необходимость в условных элементах управления, похоже, не учитывалась необходимость решения TypeScript. Да, для того, чтобы правильно справиться с этим по всем направлениям, да, здорово иметь условные элементы управления Storybook, но ТАКЖЕ необходимо решить эту проблему на стороне TypeScript, используя распознаваемые объединения. В результате, поскольку Storybook решает эту проблему только наполовину (скрывая элементы управления в пользовательском интерфейсе и НЕ обновляя хранилище аргументов), это приводит к ошибке TypeScript в json аргументов данной истории. Таким образом, даже если элемент управления скрыт, потому что, например, showAdvanced === false, связанные аргументы (например, AdvancedSetting1) остаются в хранилище аргументов, нарушая ожидаемый тип и вызывая ошибку TypeScript.
Это обнаруживает несогласованность:
Storybook признает необходимость пользовательского интерфейса в условно зависимых элементах управления.
Но он не поддерживает базовую систему типов, которая должна отражать это условие логики в хранилище.
Не хватает способа гарантировать, что когда элемент управления скрыт, его значение может быть явно очищено или удалено — либо путем
разрешения updateArgs({ key: undefined }) устанавливать значение неопределенным, либо путем предоставления какого-либо API или конфигурации для полного удаления аргументов, когда они больше не применяются.
Без этого при использовании условных элементов управления единственное решение, которое я нашел, — это оставить мою историю нетипизированной. Это лучшая практика?
Если только нет какой-то функции или обходного пути со сборниками рассказов, которые я еще не обнаружил...
Шаги по воспроизведению:
Обратите внимание, что тип Story по сути выводит тип из компонента, что означает, что он содержит дискриминируемое объединение AdvancedSettingsT. В результате визуализируем этот сценарий:
- Определите начальные аргументы, включив в них showAdvanced: false и AdvancedSettings1: undefined. Из-за условного оператора if, используемого в метаобъекте, первоначально будет отображаться только элемент управления showAdvanced.
- Переключите логический элемент управления showAdvanced в значение true. Это приведет к появлению элемента управления AdvancedSettings1. Затем я могу добавить в это текстовое поле любой текст.
- Обновить мою историю. Теперь аргументы в истории будут выглядеть так: showAdvanced: true, AdvancedSettings1: "строка настроек", ...
- Затем обновите логический переключатель showAdvanced обратно на false и снова обновите историю. Когда это происходит, элемент управления AdvancedSettings1 становится скрытым в пользовательском интерфейсе истории, но в json args истории аргументы по-прежнему существуют следующим образом: showAdvanced: false, AdvancedSettings1: "строка настроек", ...
- В результате этого объект args теперь испытывает ошибку TypeScript. Это связано с тем, что история типизирована так, чтобы соответствовать аргументам компонента, включая распознаваемое объединение, и, согласно распознаваемому объединению, AdvancedSettings1 не может существовать, если showAdvanced имеет значение false.
Что я могу здесь сделать? Кажется крайне противоречивым, что Storybook поддерживает условно отображаемые элементы управления, но НЕ включает в себя способ обновить их в хранилище args и, таким образом, поддерживать хранилище в соответствии с TypeScript. Есть ли обходной путь или что-то в этом роде? Я предположил, что моим нынешним решением будет исключение шрифта из истории, но мне не нравится идея оставлять мои истории ненапечатанными. Это единственное решение?
Подробнее здесь: https://stackoverflow.com/questions/798 ... s-behavior
