docs(ui): add stories for PDS page

[cylewaitforit]

🔗 Linked issue

#2150

🧭 Context

This would enable a storybook mock page, storybook a11y checks, and chromatic visual regression tests for this page as documented by the storybook stories.

📚 Description

Adds stories for PDS page and MSW pdsUserHandler for mocking pds-users API.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 14, 2026 0:50am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 14, 2026 0:50am
npmx-lunaria	Ignored		Apr 14, 2026 0:50am

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

Tests

• Added comprehensive test scenarios for PDS user API endpoint with mock user profile data
• Implemented test stories verifying component rendering behaviour when user data is successfully retrieved and when unavailable
• Enhanced test coverage for API response handling across different data availability states

Walkthrough

Added a new MSW request handler for the PDS users endpoint returning mock user data with did and handle fields. Created a corresponding Storybook file with two stories for the Pds component: one with mocked users and one without.

Changes

Cohort / File(s)	Summary
Storybook Handlers .storybook/handlers.ts	Added pdsUsersHandler MSW handler for GET /api/atproto/pds-users that returns an array of mock user objects with did, handle, and optional displayName and avatar fields.
Storybook Stories app/pages/pds.stories.ts	Created Storybook configuration for Pds component with two stories: Default (with mocked users via pdsUsersHandler) and WithoutUsers (with empty handlers to simulate loading state).

Possibly related PRs

• docs(ui): add stories for Privacy page #2319: The new pds story directly uses the pageDecorator added in this PR.
• docs(ui): add stories for Recharging page #2496: Both PRs add MSW request handlers and Storybook stories for component testing.

Suggested reviewers

• ghostdevv
• danielroe

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'docs(ui): add stories for PDS page' clearly summarizes the main change: adding Storybook stories for the PDS page component.
Description check	✅ Passed	The description is related to the changeset, explaining that stories and an MSW handler for the PDS page are being added to enable Storybook testing and visual regression tests.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

🧹 Nitpick comments (1)

.storybook/handlers.ts (1)

61-93: Type the mock payload as AtprotoProfile[] to prevent contract drift.

Line 62 returns an untyped literal; a future field rename or removal here would not be caught against the real /api/atproto/pds-users shape.

Proposed diff

 import { http, HttpResponse } from 'msw'
+import type { AtprotoProfile } from '#shared/types/atproto'
+
+const mockPdsUsers = [
+  {
+    did: 'did:plc:mock0001',
+    handle: 'patak.dog',
+    displayName: 'Patak Dog',
+    avatar:
+      'https://cdn.bsky.app/img/avatar/plain/did:plc:zjfptjaegvgc7r2axkkyyzqn/bafkreihrcqhp575f6dph4uztbeyxfrmfnbv7x2gvovrgu4idgdsdw7wety',
+  },
+  {
+    did: 'did:plc:mock0002',
+    handle: 'patakllama.mockpmx.social',
+    displayName: 'Patak Llama',
+    avatar: 'https://api.dicebear.com/9.x/initials/svg?seed=llama',
+  },
+  {
+    did: 'did:plc:mock0003',
+    handle: 'patak.horse',
+    displayName: 'Patak Horse',
+    avatar:
+      'https://cdn.bsky.app/img/avatar/plain/did:plc:vqh7id7sddkrfkhgt7tstlpd/bafkreifodkgqszgpt2qnoyljnbafokr6eujqwztj2kxo473adv5b57hjse',
+  },
+  {
+    did: 'did:plc:mock0004',
+    handle: 'patakcatapiller.mockpmx.social',
+  },
+  {
+    did: 'did:plc:mock0005',
+    handle: 'patakgoat.mockpmx.social',
+    displayName: 'Patak Goat',
+  },
+] satisfies AtprotoProfile[]

 export const pdsUsersHandler = http.get('/api/atproto/pds-users', () => {
-  return HttpResponse.json([
-    {
-      did: 'did:plc:mock0001',
-      handle: 'patak.dog',
-      displayName: 'Patak Dog',
-      avatar:
-        'https://cdn.bsky.app/img/avatar/plain/did:plc:zjfptjaegvgc7r2axkkyyzqn/bafkreihrcqhp575f6dph4uztbeyxfrmfnbv7x2gvovrgu4idgdsdw7wety',
-    },
-    {
-      did: 'did:plc:mock0002',
-      handle: 'patakllama.mockpmx.social',
-      displayName: 'Patak Llama',
-      avatar: 'https://api.dicebear.com/9.x/initials/svg?seed=llama',
-    },
-    {
-      did: 'did:plc:mock0003',
-      handle: 'patak.horse',
-      displayName: 'Patak Horse',
-      avatar:
-        'https://cdn.bsky.app/img/avatar/plain/did:plc:vqh7id7sddkrfkhgt7tstlpd/bafkreifodkgqszgpt2qnoyljnbafokr6eujqwztj2kxo473adv5b57hjse',
-    },
-    {
-      did: 'did:plc:mock0004',
-      handle: 'patakcatapiller.mockpmx.social',
-    },
-    {
-      did: 'did:plc:mock0005',
-      handle: 'patakgoat.mockpmx.social',
-      displayName: 'Patak Goat',
-    },
-  ])
+  return HttpResponse.json(mockPdsUsers)
 })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In @.storybook/handlers.ts around lines 61 - 93, The mock response in
pdsUsersHandler is currently an untyped literal which can drift from the real
API contract; update the handler to explicitly type the returned payload as
AtprotoProfile[] (e.g., annotate the HttpResponse.json generic or the array
variable with AtprotoProfile[]) and import the AtprotoProfile type where needed
so TypeScript will validate the mock shape against the real profile interface in
pdsUsersHandler.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In @.storybook/handlers.ts:
- Around line 61-93: The mock response in pdsUsersHandler is currently an
untyped literal which can drift from the real API contract; update the handler
to explicitly type the returned payload as AtprotoProfile[] (e.g., annotate the
HttpResponse.json generic or the array variable with AtprotoProfile[]) and
import the AtprotoProfile type where needed so TypeScript will validate the mock
shape against the real profile interface in pdsUsersHandler.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 75457279-3e54-4a00-bc06-25ac0ffb8910

📥 Commits

Reviewing files that changed from the base of the PR and between 8b57e4e and 92431b4.

📒 Files selected for processing (2)

• .storybook/handlers.ts
• app/pages/pds.stories.ts