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

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

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

描述你考虑过的替代方案

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

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

import type { ArgTypes } from '@storybook/addons';
import pickBy from 'lodash/pickBy';

export type PropDescriptor = string[] | RegExp | () => boolean;

const matches = (argType: ArgType, descriptor: PropDescriptor):boolean => {
   if(descriptor instanceof Function) {
       return descriptor(argType);
   }

   if(Array.isArray(descriptor)){
       return descriptor.includes(argType.name);
   }

   return argType.name.match(descriptor);
}
  

export const filterArgTypes = (argTypes: ArgTypes, include?: PropDescriptor, exclude?: PropDescriptor) => {
  if (!include && !exclude) {
    return argTypes;
  }
  return (
    argTypes &&
    pickBy(argTypes, (argType, key) => {
      const name = argType.name || key;
      return (!include || matches(argType, include)) && (!exclude || !matches(argType, exclude));
    })
  );
};

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

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

1bqhqjot

1bqhqjot1#

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

ruarlubt

ruarlubt2#

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

d6kp6zgx

d6kp6zgx3#

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

eh57zj3b

eh57zj3b4#

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

相关问题