From 72cbfa2ae45369cad202af928b56c56329593044 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Sat, 12 Jul 2025 09:52:57 -0400
Subject: [PATCH 1/3] stories: fix api reference table

---
 static/app/components/core/alert/index.mdx  |  4 ++--
 static/app/components/core/button/index.mdx |  4 ++--
 static/app/stories/view/storyExports.tsx    | 14 +++++++++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/static/app/components/core/alert/index.mdx b/static/app/components/core/alert/index.mdx
index a5b5049bbb0121..8a13ed89d9ab4e 100644
--- a/static/app/components/core/alert/index.mdx
+++ b/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.
 
diff --git a/static/app/components/core/button/index.mdx b/static/app/components/core/button/index.mdx
index 14eb2ae6f4ad65..1e4542285e2345 100644
--- a/static/app/components/core/button/index.mdx
+++ b/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.
 
diff --git a/static/app/stories/view/storyExports.tsx b/static/app/stories/view/storyExports.tsx
index 05b015cd4965ae..ca2de86f85ef89 100644
--- a/static/app/stories/view/storyExports.tsx
+++ b/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')`

From f73776fb1f18a2557f196706ad36db1e5f8b8408 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Sat, 12 Jul 2025 10:03:03 -0400
Subject: [PATCH 2/3] stories: improve type

---
 static/app/stories/view/storyExports.tsx     | 20 +++++++++-----------
 static/app/stories/view/storyFooter.tsx      |  8 +++++---
 static/app/stories/view/storyResources.tsx   | 11 ++++++++---
 static/app/stories/view/useStoriesLoader.tsx | 10 ++++++++--
 4 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/static/app/stories/view/storyExports.tsx b/static/app/stories/view/storyExports.tsx
index ca2de86f85ef89..ea77f10203a71d 100644
--- a/static/app/stories/view/storyExports.tsx
+++ b/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>
           );
         }
@@ -152,12 +155,7 @@ function StoryAPI() {
   return (
     <Fragment>
       {Object.entries(story.exports.types).map(([key, value]) => {
-        return (
-          <Storybook.APIReference
-            key={key}
-            types={value as TypeLoader.ComponentDocWithFilename}
-          />
-        );
+        return <Storybook.APIReference key={key} types={value} />;
       })}
     </Fragment>
   );
diff --git a/static/app/stories/view/storyFooter.tsx b/static/app/stories/view/storyFooter.tsx
index c1eed2787d7c8c..a4af4c6b9f32c1 100644
--- a/static/app/stories/view/storyFooter.tsx
+++ b/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>
diff --git a/static/app/stories/view/storyResources.tsx b/static/app/stories/view/storyResources.tsx
index d9989bd60d4d0b..1942e22163801d 100644
--- a/static/app/stories/view/storyResources.tsx
+++ b/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)}}>
diff --git a/static/app/stories/view/useStoriesLoader.tsx b/static/app/stories/view/useStoriesLoader.tsx
index d41e66a947f080..1af8698fe43c78 100644
--- a/static/app/stories/view/useStoriesLoader.tsx
+++ b/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(
     () =>

From 632d05e4d2782c9568d6ac6427c1fd9ab607f760 Mon Sep 17 00:00:00 2001
From: JonasBa <jonas@badalic.com>
Date: Sat, 12 Jul 2025 10:42:36 -0400
Subject: [PATCH 3/3] stories: fix type signature

---
 static/app/stories/view/storyExports.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/static/app/stories/view/storyExports.tsx b/static/app/stories/view/storyExports.tsx
index ea77f10203a71d..90eff1a2677f23 100644
--- a/static/app/stories/view/storyExports.tsx
+++ b/static/app/stories/view/storyExports.tsx
@@ -152,6 +152,18 @@ function StoryAPI() {
   const {story} = useStory();
   if (!story.exports.types) return null;
 
+  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]) => {