stories: implement programmatic pagination detection

Author: JonasBa

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

@@ -11,12 +11,6 @@ resources:
     WCAG 2.4.7: https://www.w3.org/TR/WCAG22/#focus-visible
     WCAG 2.5.8: https://www.w3.org/TR/WCAG22/#target-size-minimum
     WAI-ARIA Button Practices: https://www.w3.org/WAI/ARIA/apg/patterns/button/
-next:
-  link: '/stories/?name=app%2Fcomponents%2Fcore%2Fbutton%2FbuttonBar.stories.tsx'
-  label: ButtonBar
-prev:
-  link: '?name=app%2Fcomponents%2Fcore%2Fbadge%2Ftag.stories.tsx'
-  label: Tag
 ---
 
 import {Button} from 'sentry/components/core/button';

static/app/stories/view/storyFooter.tsx

@@ -1,33 +1,90 @@
 import styled from '@emotion/styled';
+import qs from 'query-string';
 
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {Flex} from 'sentry/components/core/layout';
 import {IconArrow} from 'sentry/icons';
+import {useStoryBookFilesByCategory} from 'sentry/stories/view/storySidebar';
+import type {StoryTreeNode} from 'sentry/stories/view/storyTree';
+import type {StoryDescriptor} from 'sentry/stories/view/useStoriesLoader';
 import {useStory} from 'sentry/stories/view/useStory';
 import {space} from 'sentry/styles/space';
+import {useLocation} from 'sentry/utils/useLocation';
 
 export function StoryFooter() {
+  const location = useLocation();
+
   const {story} = useStory();
-  if (!story.filename.endsWith('.mdx')) return null;
-  const {prev, next} = story.exports.frontmatter ?? {};
+  const categories = useStoryBookFilesByCategory();
+  const pagination = findPreviousAndNextStory(story, categories);
+
+  const prevLocationDescriptor = qs.stringify({
+    ...location.query,
+    name: pagination?.prev?.story.filesystemPath,
+  });
+  const nextLocationDescriptor = qs.stringify({
+    ...location.query,
+    name: pagination?.next?.story.filesystemPath,
+  });
+
   return (
     <Flex align="center" justify="space-between" gap={space(2)}>
-      {prev && (
-        <Card to={prev.link} icon={<IconArrow direction="left" />}>
+      {pagination?.prev && (
+        <Card
+          to={`/stories/?${prevLocationDescriptor}`}
+          icon={<IconArrow direction="left" />}
+        >
           <CardLabel>Previous</CardLabel>
-          <CardTitle>{prev.label}</CardTitle>
+          <CardTitle>{pagination.prev.story.label}</CardTitle>
         </Card>
       )}
-      {next && (
-        <Card data-flip to={next.link} icon={<IconArrow direction="right" />}>
+      {pagination?.next && (
+        <Card
+          data-flip
+          to={`/stories/?${nextLocationDescriptor}`}
+          icon={<IconArrow direction="right" />}
+        >
           <CardLabel>Next</CardLabel>
-          <CardTitle>{next.label}</CardTitle>
+          <CardTitle>{pagination.next.story.label}</CardTitle>
         </Card>
       )}
     </Flex>
   );
 }
 
+function findPreviousAndNextStory(
+  story: StoryDescriptor,
+  categories: ReturnType<typeof useStoryBookFilesByCategory>
+): {
+  next: {category: string; story: StoryTreeNode} | undefined;
+  prev: {category: string; story: StoryTreeNode} | undefined;
+} | null {
+  let prev: {category: string; story: StoryTreeNode} | undefined;
+  let next: {category: string; story: StoryTreeNode} | undefined;
+
+  const stories: Array<{category: string; story: StoryTreeNode}> = [];
+
+  // Flatten into a single list so we don't have to deal with overflowing index
+  // categories and can simplify the search procedure.
+  for (const key in categories) {
+    const category = categories[key as keyof typeof categories];
+    for (const s of category) {
+      stories.push({category: key, story: s});
+    }
+  }
+
+  for (let i = 0; i < stories.length; i++) {
+    const s = stories[i]!;
+    if (s.story.filesystemPath === story.filename) {
+      prev = stories[i - 1];
+      next = stories[i + 1];
+      return {prev, next};
+    }
+  }
+
+  return null;
+}
+
 const Card = styled(LinkButton)`
   display: flex;
   flex-direction: column;

static/app/stories/view/storySidebar.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 import {space} from 'sentry/styles/space';
 
+import type {StoryTreeNode} from './storyTree';
 import {StoryTree, useStoryTree} from './storyTree';
 import {useStoryBookFiles} from './useStoriesLoader';
 
@@ -29,9 +30,13 @@ export function StorySidebar() {
   );
 }
 
-export function useStoryBookFilesByCategory() {
+export function useStoryBookFilesByCategory(): Record<
+  'foundations' | 'core' | 'shared',
+  StoryTreeNode[]
+> {
   const files = useStoryBookFiles();
   const filesByOwner = useMemo(() => {
+    // The order of keys here is important and used by the pagination in storyFooter
     const map: Record<'foundations' | 'core' | 'shared', string[]> = {
       foundations: [],
       core: [],