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

Question

I have a working story file for a component in typescript, but business requirements need some additional README style documentation. Therefore I am attempting to convert the .ts story into an .mdx story; but I am unable to figure out how to add decorators in MDX.

Here is the working typescript story file:

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
};

Trying to convert the Meta declaration, I have gotten to this point:

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],
    }),
  ]}
/>

Compilation fails, because it cannot find the GoogleMapsModule, and I cannot come up with any form of object that it will accept to load the module in the MDX file.

What is the correct way to write the moduleMetadata in the MDX file?

Answer 1

you forgot to import GoogleMapsModule and CommonModule, I guess the error is hidden.

Also it works for me by importing moduleMetadata from Angular.

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],
    }),
  ]}
/>