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

Question

我有一个 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 文件中的模块。

MDX文件中moduleMetadata的正确写法是什么？

Answer 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？

How do you convert a Storybook typescript meta declaration to MDX?

typescript

angular

storybook