Skip to content

stories: implement programmatic pagination detection #95397

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 14, 2025
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions static/app/components/core/button/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
73 changes: 65 additions & 8 deletions static/app/stories/view/storyFooter.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
7 changes: 6 additions & 1 deletion static/app/stories/view/storySidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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: [],
Expand Down
Loading