stories: fix api reference table

Author: JonasBa

static/app/components/core/alert/index.mdx

@@ -17,9 +17,9 @@ import {Button} from 'sentry/components/core/button';
 import {IconAdd, IconDelete, IconEdit} from 'sentry/icons';
 import * as Storybook from 'sentry/stories';
 
-import types from '!!type-loader!sentry/components/core/alert/index';
+import APIReference from '!!type-loader!sentry/components/core/alert/index';
 
-export {types};
+export const types = {Alert: APIReference.Alert};
 
 To create a basic alert, wrap your message in an `<Alert>` component and specify the appropriate type.
 

static/app/components/core/button/index.mdx

@@ -38,9 +38,9 @@ import {
 } from 'sentry/icons';
 import * as Storybook from 'sentry/stories';
 
-import types from '!!type-loader!sentry/components/core/button/index';
+import APIReference from '!!type-loader!sentry/components/core/button/index';
 
-export {types};
+export const types = {Button: APIReference.Button};
 
 To create a basic button, wrap text in a `<Button>` and pass an `onClick` callback.
 

static/app/stories/view/storyExports.tsx

@@ -148,7 +148,19 @@ function StoryUsage() {
 function StoryAPI() {
   const {story} = useStory();
   if (!story.exports.types) return null;
-  return <Storybook.APIReference types={story.exports.types} />;
+
+  return (
+    <Fragment>
+      {Object.entries(story.exports.types).map(([key, value]) => {
+        return (
+          <Storybook.APIReference
+            key={key}
+            types={value as TypeLoader.ComponentDocWithFilename}
+          />
+        );
+      })}
+    </Fragment>
+  );
 }
 
 const StoryHeader = styled('header')`