stories: fix api reference table (#95396)

Fixes API reference table - we need to export only the types we want to
show, as some components will have multiple. I have also improved the
story types, which surfaced some potential runtime cases we weren't
handling correctly

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

@@ -12,7 +12,7 @@ import {space} from 'sentry/styles/space';
 
 import {StoryResources} from './storyResources';
 import {StorySourceLinks} from './storySourceLinks';
-import type {StoryDescriptor} from './useStoriesLoader';
+import {isMDXStory, type StoryDescriptor} from './useStoriesLoader';
 import type {StoryExports as StoryExportValues} from './useStory';
 import {StoryContextProvider, useStory} from './useStory';
 
@@ -47,11 +47,11 @@ function StoryLayout() {
 function StoryTitlebar() {
   const {story} = useStory();
 
+  if (!isMDXStory(story)) return null;
+
   const title = story.exports.frontmatter?.title;
   const description = story.exports.frontmatter?.description;
 
-  if (!story.filename.endsWith('.mdx')) return null;
-
   return (
     <StoryHeader>
       <StoryGrid>
@@ -74,7 +74,8 @@ function StoryTabList() {
     <TabList>
       <TabList.Item key="usage">{t('Usage')}</TabList.Item>
       {story.exports.types ? <TabList.Item key="api">{t('API')}</TabList.Item> : null}
-      {story.exports.frontmatter?.resources ? (
+
+      {isMDXStory(story) && story.exports.frontmatter?.resources ? (
         <TabList.Item key="resources">{t('Resources')}</TabList.Item>
       ) : null}
     </TabList>
@@ -109,6 +110,7 @@ function StoryUsage() {
       filename,
     },
   } = useStory();
+
   return (
     <Fragment>
       {Story && (
@@ -129,9 +131,10 @@ function StoryUsage() {
           return null;
         }
         if (typeof MaybeComponent === 'function') {
+          const Component = MaybeComponent as React.ComponentType;
           return (
             <Storybook.Section key={name}>
-              <MaybeComponent />
+              <Component />
             </Storybook.Section>
           );
         }
@@ -148,7 +151,26 @@ function StoryUsage() {
 function StoryAPI() {
   const {story} = useStory();
   if (!story.exports.types) return null;
-  return <Storybook.APIReference types={story.exports.types} />;
+
+  if (
+    typeof story.exports.types === 'object' &&
+    story.exports.types !== null &&
+    'filename' in story.exports.types
+  ) {
+    return (
+      <Storybook.APIReference
+        types={story.exports.types as TypeLoader.ComponentDocWithFilename}
+      />
+    );
+  }
+
+  return (
+    <Fragment>
+      {Object.entries(story.exports.types).map(([key, value]) => {
+        return <Storybook.APIReference key={key} types={value} />;
+      })}
+    </Fragment>
+  );
 }
 
 const StoryHeader = styled('header')`

static/app/stories/view/storyFooter.tsx

@@ -3,22 +3,24 @@ import styled from '@emotion/styled';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
 import {IconArrow} from 'sentry/icons';
+import {isMDXStory} from 'sentry/stories/view/useStoriesLoader';
 import {useStory} from 'sentry/stories/view/useStory';
 import {space} from 'sentry/styles/space';
 
 export function StoryFooter() {
   const {story} = useStory();
-  if (!story.filename.endsWith('.mdx')) return null;
+  if (!isMDXStory(story)) return null;
   const {prev, next} = story.exports.frontmatter ?? {};
+
   return (
     <Flex align="center" justify="space-between" gap={space(2)}>
-      {prev && (
+      {typeof prev === 'object' && 'link' in prev && (
         <Card to={prev.link} icon={<IconArrow direction="left" />}>
           <CardLabel>Previous</CardLabel>
           <CardTitle>{prev.label}</CardTitle>
         </Card>
       )}
-      {next && (
+      {typeof next === 'object' && 'link' in next && (
         <Card data-flip to={next.link} icon={<IconArrow direction="right" />}>
           <CardLabel>Next</CardLabel>
           <CardTitle>{next.label}</CardTitle>

static/app/stories/view/storyResources.tsx

@@ -1,16 +1,21 @@
 import {Badge} from 'sentry/components/core/badge';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {IconGithub} from 'sentry/icons';
-import type {StoryResources as Resources} from 'sentry/stories/view/useStoriesLoader';
+import {
+  isMDXStory,
+  type StoryResources as Resources,
+} from 'sentry/stories/view/useStoriesLoader';
 import {useStory} from 'sentry/stories/view/useStory';
 import {space} from 'sentry/styles/space';
 
 export function StoryResources() {
   const {story} = useStory();
-  if (!story.exports.frontmatter?.resources) {
+
+  if (!isMDXStory(story)) {
     return null;
   }
-  const resources: Resources = story.exports.frontmatter.resources;
+
+  const resources: Resources = story.exports.frontmatter?.resources ?? {};
 
   return (
     <table style={{marginTop: space(4)}}>

static/app/stories/view/useStoriesLoader.tsx

@@ -26,18 +26,24 @@ interface MDXStoryDescriptor {
       source?: string;
       types?: string;
     };
-    types?: TypeLoader.ComponentDocWithFilename;
+    types?:
+      | TypeLoader.ComponentDocWithFilename
+      | Record<string, TypeLoader.ComponentDocWithFilename>;
   };
   filename: string;
 }
 
 interface TSStoryDescriptor {
-  exports: Record<string, React.ComponentType | any>;
+  exports: Record<string, React.ComponentType | unknown>;
   filename: string;
 }
 
 export type StoryDescriptor = MDXStoryDescriptor | TSStoryDescriptor;
 
+export function isMDXStory(story: StoryDescriptor): story is MDXStoryDescriptor {
+  return story.filename.endsWith('.mdx');
+}
+
 export function useStoryBookFiles() {
   return useMemo(
     () =>