grafana/ui: Enable mdx imports in stories (#19937)

packages/grafana-ui/.storybook/webpack.config.js

@@ -73,7 +73,7 @@ module.exports = ({ config, mode }) => {
     ],
   });
 
-  config.resolve.extensions.push('.ts', '.tsx');
+  config.resolve.extensions.push('.ts', '.tsx', '.mdx');
   config.stats = {
     warningsFilter: /export .* was not found in/,
   };

packages/grafana-ui/src/components/Switch/Switch.mdx

@@ -0,0 +1,3 @@
+# Switch
+
+A basic docs for Switch component

packages/grafana-ui/src/components/Switch/Switch.story.tsx

@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
 
-// import { storiesOf } from '@storybook/react';
-// import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { Switch } from './Switch';
 import { text } from '@storybook/addon-knobs';
+import mdx from './Switch.mdx';
 
 const getStory = (title: string, component: any) => ({
   title,
   parameters: {
     component,
+    docs: {
+      page: mdx,
+    },
   },
 });
 

packages/grafana-ui/src/types/mdx.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mdx' {
+  let MDXComponent: (props: any) => JSX.Element;
+  export default MDXComponent;
+}