storybook 禁用或过滤一组/类别的控件

evrscar2  于 10个月前  发布在  其他
关注(0)|答案(4)|浏览(89)

Angular生成的文档页面中,所有由compodoc生成的类别/组都已指定:

描述你考虑过的替代方案

  • 在组件的每个属性上使用JS doc标签@ignore:不可维护,我不想因为故事书文档模板而影响我的compodoc生成
  • 在控件上使用disabled:不可维护,我不得不列出我的故事中的所有属性,我想让我的故事保持干净
  • 使用控件的过滤器:不可维护,我仍然需要在控件级别上工作,而不是在类别上
    描述你希望实现的解决方案

我希望能够过滤/禁用整个类别/组。
我认为只要有能力接收完整控件对象的provide a function to the include or exclude property就足够了,然后检查该类别。
类似这样(没有测试过):

  1. import type { ArgTypes } from '@storybook/addons';
  2. import pickBy from 'lodash/pickBy';
  3. export type PropDescriptor = string[] | RegExp | () => boolean;
  4. const matches = (argType: ArgType, descriptor: PropDescriptor):boolean => {
  5. if(descriptor instanceof Function) {
  6. return descriptor(argType);
  7. }
  8. if(Array.isArray(descriptor)){
  9. return descriptor.includes(argType.name);
  10. }
  11. return argType.name.match(descriptor);
  12. }
  13. export const filterArgTypes = (argTypes: ArgTypes, include?: PropDescriptor, exclude?: PropDescriptor) => {
  14. if (!include && !exclude) {
  15. return argTypes;
  16. }
  17. return (
  18. argTypes &&
  19. pickBy(argTypes, (argType, key) => {
  20. const name = argType.name || key;
  21. return (!include || matches(argType, include)) && (!exclude || !matches(argType, exclude));
  22. })
  23. );
  24. };

你是否能协助将这个功能实现?

我会说可以,但我的孩子们暂时说不行;)

1bqhqjot

1bqhqjot1#

你想过滤哪个类别,为什么?

ruarlubt

ruarlubt2#

@shilman PropertiesMethods
我们正在使用storybook作为文档,我们对组件的实现方式不感兴趣。我们只关心如何使用它。

d6kp6zgx

d6kp6zgx3#

@shilman 和 @jogelin - 我有一个类似的需求。有没有什么提示可以告诉我们如何实现这个?

eh57zj3b

eh57zj3b4#

我也有相同的需求,并找到了一个似乎对我们有效的解决方案:我在将compodoc JSON输入到setCompodocJson之前对其进行后处理,删除所有不需要的属性和方法元数据。

相关问题