Onboarding: Fix navigation to first story when configure-your-project entry missing

[Copilot]

When using minimal initialization (no MDX files), the onboarding flow attempted to navigate to a hardcoded 'configure-your-project--docs' story that doesn't exist, causing a "Couldn't find story" error.

Changes

• Onboarding.tsx: Replace hardcoded story ID with api.selectFirstStory() to navigate to the first available story in the index
• addon-onboarding.spec.ts: Update e2e test to verify navigation to any story/docs page instead of the specific configure-your-project entry

// Before
selectStory('configure-your-project--docs');

// After  
api.selectFirstStory();

The selectFirstStory() method finds the first entry with type === 'story' in the story index, making the onboarding flow work correctly regardless of user configuration.

View original Slack conversation

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Summary by CodeRabbit

• New Features

  • Onboarding survey navigation now routes to the first available story upon completion.

• Tests

  • Updated E2E tests to verify proper navigation and preview content loading following survey completion.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[github-actions]

	Fails
🚫	PR description is missing the mandatory "#### Manual testing" section. Please add it so that reviewers know how to manually test your changes.

Generated by 🚫 dangerJS against eabe5de

[nx-cloud]

View your CI Pipeline Execution ↗ for commit eabe5de

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	5m 7s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-16 12:22:16 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

The onboarding addon's post-survey navigation is refactored to call api.selectFirstStory() instead of hardcoding a specific story selection. The dependency array is updated accordingly, and the corresponding test is modified to validate navigation and preview loading rather than checking a specific in-iframe element.

Changes

Cohort / File(s)	Summary
Onboarding addon core code/addons/onboarding/src/Onboarding.tsx	Replace hardcoded story selection ('configure-your-project--docs') with api.selectFirstStory() call; remove selectStory from useCallback dependencies
Onboarding addon tests code/e2e-tests/addon-onboarding.spec.ts	Update test assertion from checking in-iframe heading visibility to validating URL navigation and calling waitUntilLoaded() for preview confirmation

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• storybookjs/storybook#32715: Introduces or modifies the selectFirstStory() API method that is now being used in the post-survey navigation flow

✨ Finishing touches

• 📝 Generate docstrings

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8486c72 and 5a0470d.

📒 Files selected for processing (2)

• code/addons/onboarding/src/Onboarding.tsx
• code/e2e-tests/addon-onboarding.spec.ts

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

• code/e2e-tests/addon-onboarding.spec.ts

**/*.{js,jsx,ts,tsx,json,md,html,css,scss}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Format code using Prettier with yarn prettier --write <file>

Files:

• code/e2e-tests/addon-onboarding.spec.ts
• code/addons/onboarding/src/Onboarding.tsx

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Run ESLint checks using yarn lint:js:cmd <file> or the full command cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives to fix linting errors before committing

Files:

• code/e2e-tests/addon-onboarding.spec.ts
• code/addons/onboarding/src/Onboarding.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode across all packages

Files:

• code/e2e-tests/addon-onboarding.spec.ts
• code/addons/onboarding/src/Onboarding.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx,js,jsx}: Export functions from modules if they need to be tested
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/e2e-tests/addon-onboarding.spec.ts
• code/addons/onboarding/src/Onboarding.tsx

**/*.{test,spec}.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{test,spec}.{ts,tsx,js,jsx}: Write meaningful unit tests that actually import and call the functions being tested, not just verify syntax patterns
Achieve high test coverage of business logic, aiming for 75%+ coverage of statements/lines
Cover all branches, conditions, edge cases, error paths, and different input variations in unit tests
Use vi.mock() to mock file system, loggers, and other external dependencies in tests

Files:

• code/e2e-tests/addon-onboarding.spec.ts

code/{core,lib,addons,builders,frameworks,presets}/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use logger from storybook/internal/node-logger for server-side logging in Node.js code

Files:

• code/addons/onboarding/src/Onboarding.tsx

🧠 Learnings (2)

📓 Common learnings

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

📚 Learning: 2025-11-05T09:38:47.712Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

• code/addons/onboarding/src/Onboarding.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: nx

🔇 Additional comments (2)

code/e2e-tests/addon-onboarding.spec.ts (1)

57-60: LGTM — navigation check now matches dynamic story selection.

The URL assertion plus waitUntilLoaded() makes the test resilient to the new “first story” behavior and still validates the preview is ready.

code/addons/onboarding/src/Onboarding.tsx (1)

99-109: No guard needed—selectFirstStory() is defensively designed.

The implementation handles all edge cases gracefully: it returns early if the index is missing, searches for the first story, and falls back to navigating home if none are found. It does not throw exceptions and will not crash when no stories are available. The prior try/catch in the codebase wraps a different operation (getCurrentStoryData()) in a separate callback, not this call.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

---

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

[storybook-app-bot]

Package Benchmarks

^{Commit: eabe5de, ran on 16 January 2026 at 12:24:49 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/cli

	Before	After	Difference
Dependency count	183	183	0
Self size	775 KB	775 KB	🚨 +55 B 🚨
Dependency size	67.38 MB	67.45 MB	🚨 +67 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	176	176	0
Self size	30 KB	30 KB	🎉 -4 B 🎉
Dependency size	65.95 MB	66.02 MB	🚨 +67 KB 🚨
Bundle Size Analyzer	Link	Link