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

Posted 2023-02-19

【中文标题】如何将 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],
    ),
  ]
/>