Skip to content

Docs: Add tanstack documentation#34639

Merged
kylegach merged 14 commits into
nextfrom
docs/tanstack
May 5, 2026
Merged

Docs: Add tanstack documentation#34639
kylegach merged 14 commits into
nextfrom
docs/tanstack

Conversation

@huang-julien
Copy link
Copy Markdown
Contributor

@huang-julien huang-julien commented Apr 27, 2026

#34403

What I did

Add the documentation for the tanstack framework integration usage.

The documentation is split between tanstack router which is cleint-only and tanstack start which is the meta-framework.

Checklist for Contributors

Testing

  • no testing, just merge this after the tanstack integration is merged. This PR is separate for better readability during review.

Manual testing

N/A - Docs-only update

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

  • Documentation
    • New TanStack React docs and snippets: installation, Storybook configuration for CSF 3 and CSF Next (JS/TS), preview/setup examples, and framework options.
    • Added story examples showing router-driven and plain-component scenarios, route overrides, mocked loaders, and success/failure playflows.
    • Guidance for mocking server and DB clients, stubbing server-only modules, testing tips, and an expanded FAQ for common setup and troubleshooting.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 27, 2026

📝 Walkthrough

Walkthrough

Adds a large set of documentation snippets and a new guide page for the @storybook/tanstack-react Storybook integration, covering installation, framework/main and preview configuration, mocking patterns, server functions, and multiple story examples for CSF 3 and CSF Next in both JavaScript and TypeScript.

Changes

Cohort / File(s) Summary
Installation & Framework Config
docs/_snippets/tanstack-react-install.md, docs/_snippets/tanstack-react-add-framework.md, docs/_snippets/tanstack-react-framework-options.md
Adds install instructions and multiple .storybook/main snippets (CSF 3 JS/TS and CSF Next JS/TS) setting framework.name = '@storybook/tanstack-react' and placeholder framework.options.builder.
Preview & Setup
docs/_snippets/tanstack-react-preview-empty.md, docs/_snippets/tanstack-react-preview-setup.md, docs/_snippets/tanstack-react-mock-module-preview.md
Adds empty preview exports and preview setup examples (controls.matchers) for CSF 3 and CSF Next (JS/TS), plus preview snippets showing sb.mock(...) to stub Node-only modules.
Mocking Helpers
docs/_snippets/tanstack-react-mock-db-client.md, src/db/__mocks__/client.ts*
Adds a mock DB client snippet (Proxy-based) and documentation showing how to register mocks to prevent server-only DB code from loading in the browser.
Server Function Snippet
docs/_snippets/tanstack-react-server-fn.md, src/lib/updateProfile.ts*
Introduces a TypeScript example defining/exporting a server function updateProfile via createServerFn({ method: 'POST' }).
Example Stories: Server / UI
docs/_snippets/tanstack-react-mock-server-fn-stories.md, docs/_snippets/tanstack-react-plain-component-story.md
Adds ProfileForm stories demonstrating mocked server fn success/failure with play interactions, and a plain Page component story showing tanstack router parameters for CSF 3 and CSF Next (JS/TS).
Example Stories: Routing / Loaders
docs/_snippets/tanstack-react-route-story.md, docs/_snippets/tanstack-react-route-tree-overrides.md
Adds Route-based story examples (Default and WithCustomLoader) and route tree override snippets that stub loaders for specific paths/route IDs (CSF 3 and CSF Next in JS/TS).
Main Guide
docs/get-started/frameworks/tanstack-react.mdx
Adds a comprehensive guide page covering installation, configuration (main.ts, preview.ts), story parameter API (tanstack.router), mocking strategies for router and Start/server functions, troubleshooting, FAQs, and API surface notes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs


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

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

@huang-julien huang-julien added documentation ci:docs Run the CI jobs for documentation checks only. labels Apr 27, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/get-started/frameworks/tanstack-react.mdx`:
- Around line 23-31: Update the displayed minimum React requirement in the
GetStartedVersions prop data: replace the React entry's range value from '≥
16.8' to '≥ 18' (and update any accompanying copy if present) so it matches
TanStack Router prerequisites; ensure the React entry (name: 'React') and any
documentation text mention React 18+ (and ReactDOM 18+ with createRoot support)
to avoid misleading users.
- Around line 363-382: The Vite plugin sample uses the newer transform: {
filter, handler } syntax (requires Vite 6.3+) which breaks compatibility with
Vite ≥5; replace the object-form transform with the traditional transform(code,
id) function and perform the file-filtering inline (e.g., test id against
/\.server\.[mc]?[jt]sx?$/ and return null early if not matched or if id includes
'node_modules'), then run the same logic that parses named exports into names,
builds lines (using _noop/_proxy and export stubs) and returns { code:
lines.join('\n'), map: null }; update the plugin object (name:
'storybook:stub-server-files') to use this transform function so the example
works on older Vite versions.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 395ee5f4-d86b-4e57-98d2-aa4f76dd05d4

📥 Commits

Reviewing files that changed from the base of the PR and between 699b676 and a9d6ab7.

📒 Files selected for processing (1)
  • docs/get-started/frameworks/tanstack-react.mdx

Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
Copy link
Copy Markdown
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job @huang-julien !! Minor comments below

Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
Comment thread docs/get-started/frameworks/tanstack-react.mdx
Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
@huang-julien huang-julien marked this pull request as draft April 27, 2026 21:04
huang-julien and others added 3 commits April 28, 2026 09:50
Co-authored-by: Copilot <copilot@github.com>
* next: (96 commits)
  Fix typo in the code sampel for "Fully Custom Args" for web-cmp
  refactor: move to job condition
  ci: skip label step if no output
  don't write versions json files anymore during publishing
  refactor: improve script
  feat: don't close community-flagged accounts, flag them
  update lock file
  fix: add optional react-dom type peers to next frameworks
  fix: add optional React type peers to published packages
  chore: start investigating missing react type peers
  Initial plan
  publish to next branch when triggered manually
  feedbacks
  ci: allow branch selection for sandbox generation
  fix(addons-docs): make docs context type match usage
  Build: Disable NX workflow triggers while license is expired
  Add missing vite peer dependency in vite-based frameworks
  CLI: Change mock event detection
  Ensure process termination on signal when telemetry is disabled
  Add story with changeDetection disabled
  ...
Comment thread docs/get-started/frameworks/tanstack-react.mdx
Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
Comment thread docs/get-started/frameworks/tanstack-react.mdx Outdated
@huang-julien huang-julien changed the title Docs: Add tanstack documentaion Docs: Add tanstack documentation May 4, 2026
huang-julien and others added 2 commits May 5, 2026 14:27
Co-authored-by: Copilot <copilot@github.com>
@huang-julien huang-julien marked this pull request as ready for review May 5, 2026 13:41
huang-julien and others added 2 commits May 5, 2026 15:44
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Comment thread docs/get-started/frameworks/tanstack-react.mdx
kylegach added 2 commits May 5, 2026 11:15
* next: (52 commits)
  Revert "fix run oxfmt after generating source files"
  fix run oxfmt after generating source files
  try catch git init in sandboxes
  Cleanup
  fix: init git for change detection on every dev task run
  Apply review feedback for change detection
  Move common logic into a shared util
  Only show Clear filters button if there are active filters
  Dedupe lock file
  Cleanup
  Fix E2E tests
  fix: scope change-detection git init to e2e-tests-dev task only
  fix: init git during sandbox generation so change detection works at startup
  fix: cleanup AI-slop in tests, drain patchQueue before OXC pool dispose
  yarn dedupe
  Show tooltip on status filters
  Prevent race condition between two filter operations
  Add clear filter button on sidebar empty state
  Enable change detection feature flag in E2E sandbox templates
  Enhance ChangeDetectionResolverFactory to support yarn workspace cross-package resolution and update documentation for related status icons
  ...
Copy link
Copy Markdown
Contributor

@kylegach kylegach left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really great work!!

@kylegach kylegach merged commit fece2d7 into next May 5, 2026
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci:docs Run the CI jobs for documentation checks only. documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants