如何将 Storybook 打字稿元声明转换为 MDX?

Posted

技术标签:

【中文标题】如何将 Storybook 打字稿元声明转换为 MDX?【英文标题】:How do you convert a Storybook typescript meta declaration to MDX? 【发布时间】:2021-08-30 19:12:19 【问题描述】:

我有一个 typescript 组件的工作故事文件,但业务需求需要一些额外的 README 样式文档。因此,我试图将 .ts 故事转换为 .mdx 故事;但我无法弄清楚如何在 MDX 中添加装饰器。

这是工作的打字稿故事文件:

import  moduleMetadata, Story, Meta  from '@storybook/angular';

import  CommonModule  from '@angular/common';

import  MapComponent  from './map.component';

import  GoogleMapsModule  from '@angular/google-maps';

export default 
  component: MapComponent,
  decorators: [
    moduleMetadata(
      declarations: [MapComponent],
      imports: [CommonModule, GoogleMapsModule],
    ),
  ],
  excludeStories: /.*Data$/,
  title: 'Location/Google Map',
  argTypes: 
    selectedLocationName: 
      options: [
        null, 
        'Place 1',
        'Place 2',
        'Place 3',
        'Place 4'
      ],
      control: 
        type: 'select'
      
    
  
 as Meta;

const Template: Story<MapComponent> = args => (
  props: 
    ...args
  ,
);

export const Default = Template.bind();
Default.args = 
  center: 
    lat: 38.72384643456003, 
    lng: -122.20890288301864
  ,
  locations: [],
  selectedLocationName: null
;

尝试转换 Meta 声明,我已经到了这一点:

mport  moduleMetadata, ArgsTable, Meta  from '@storybook/addon-docs/blocks';
import  MapComponent  from './map.component';

<Meta 
  title="location/Google Map" 
  component=MapComponent
  argTypes=
    selectedLocationName: 
      options: [
        null, 
        'Place 1',
        'Place 2',
        'Place 3',
        'Place 4'
      ],
      control: 
        type: 'select'
      
    
  ,
  decorators=[
    moduleMetadata(
      declarations: [MapComponent],
      imports: [CommonModule, GoogleMapsModule],
    ),
  ]
/>

编译失败,因为它找不到GoogleMapsModule,而且我无法想出任何形式的对象,它将接受将模块加载到 MDX 文件中。

将moduleMetadata写入MDX文件的正确方法是什么?

【问题讨论】:

【参考方案1】:

你忘了导入GoogleMapsModuleCommonModule,我猜错误是隐藏的。

通过从 Angular 导入 moduleMetadata 也适用于我。

import  moduleMetadata, ArgsTable, Meta  from '@storybook/addon-docs/blocks';

import  CommonModule  from '@angular/common';
import  moduleMetadata  from '@storybook/angular';

import  GoogleMapsModule  from '@angular/google-maps';

import  MapComponent  from './map.component';

<Meta 
  title="location/Google Map" 
  component=MapComponent
  argTypes=
    selectedLocationName: 
      options: [
        null, 
        'Place 1',
        'Place 2',
        'Place 3',
        'Place 4'
      ],
      control: 
        type: 'select'
      
    
  ,
  decorators=[
    moduleMetadata(
      declarations: [MapComponent],
      imports: [CommonModule, GoogleMapsModule],
    ),
  ]
/>

【讨论】:

以上是关于如何将 Storybook 打字稿元声明转换为 MDX?的主要内容,如果未能解决你的问题,请参考以下文章

如何在打字稿元组中使用扩展运算符?

如何使用 Svelte 在 Storybook 中设置打字稿?

打字稿:如何将字符串转换为类型

如何将打字稿界面转换为棱镜模型

如何将这些对象转换为打字稿中的数组

打字稿:将 HTMLElement 转换为节点