如何将 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】:你忘了导入GoogleMapsModule
和CommonModule
,我猜错误是隐藏的。
通过从 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?的主要内容,如果未能解决你的问题,请参考以下文章