Tanstack: Add @storybook/tanstack-react package

code/core/src/cli/AddonVitestService.constants.ts

@@ -11,4 +11,5 @@ export const SUPPORTED_FRAMEWORKS: readonly SupportedFramework[] = [
   SupportedFramework.SVELTEKIT,
   SupportedFramework.VUE3_VITE,
   SupportedFramework.WEB_COMPONENTS_VITE,
+  SupportedFramework.TANSTACK_REACT,
 ];

code/core/src/cli/projectTypes.ts

@@ -8,6 +8,7 @@ export enum ProjectType {
   PREACT = 'preact',
   QWIK = 'qwik',
   REACT = 'react',
+  TANSTACK_REACT = 'tanstack_react',
   REACT_NATIVE = 'react_native',
   REACT_NATIVE_AND_RNW = 'react_native_and_rnw',
   REACT_NATIVE_WEB = 'react_native_web',

code/core/src/common/utils/framework.ts

@@ -18,6 +18,7 @@ export const frameworkToRenderer: Record<
   [SupportedFramework.SOLID]: SupportedRenderer.SOLID,
   [SupportedFramework.SVELTE_VITE]: SupportedRenderer.SVELTE,
   [SupportedFramework.SVELTEKIT]: SupportedRenderer.SVELTE,
+  [SupportedFramework.TANSTACK_REACT]: SupportedRenderer.REACT,
   [SupportedFramework.VUE3_VITE]: SupportedRenderer.VUE3,
   [SupportedFramework.WEB_COMPONENTS_VITE]: SupportedRenderer.WEB_COMPONENTS,
   [SupportedFramework.REACT_RSBUILD]: SupportedRenderer.REACT,
@@ -52,6 +53,7 @@ export const frameworkToBuilder: Record<SupportedFramework, SupportedBuilder> =
   [SupportedFramework.SERVER_WEBPACK5]: SupportedBuilder.WEBPACK5,
   [SupportedFramework.SVELTE_VITE]: SupportedBuilder.VITE,
   [SupportedFramework.SVELTEKIT]: SupportedBuilder.VITE,
+  [SupportedFramework.TANSTACK_REACT]: SupportedBuilder.VITE,
   [SupportedFramework.VUE3_VITE]: SupportedBuilder.VITE,
   [SupportedFramework.WEB_COMPONENTS_VITE]: SupportedBuilder.VITE,
   [SupportedFramework.QWIK]: SupportedBuilder.VITE,

code/core/src/common/utils/get-storybook-info.ts

@@ -51,6 +51,7 @@ export const frameworkPackages: Record<string, SupportedFramework> = {
   '@storybook/nextjs-vite': SupportedFramework.NEXTJS_VITE,
   '@storybook/react-native-web-vite': SupportedFramework.REACT_NATIVE_WEB_VITE,
   '@storybook/web-components-vite': SupportedFramework.WEB_COMPONENTS_VITE,
+  '@storybook/tanstack-react': SupportedFramework.TANSTACK_REACT,
   // community (outside of monorepo)
   'storybook-framework-qwik': SupportedFramework.QWIK,
   'storybook-solidjs-vite': SupportedFramework.SOLID,

code/core/src/common/versions.ts

@@ -37,6 +37,7 @@ export default {
   '@storybook/preset-server-webpack': '10.4.0-alpha.16',
   '@storybook/html': '10.4.0-alpha.16',
   '@storybook/preact': '10.4.0-alpha.16',
+  '@storybook/tanstack-react': '10.4.0-alpha.16',
   '@storybook/react': '10.4.0-alpha.16',
   '@storybook/server': '10.4.0-alpha.16',
   '@storybook/svelte': '10.4.0-alpha.16',

code/core/src/types/modules/frameworks.ts

@@ -13,6 +13,7 @@ export enum SupportedFramework {
   SERVER_WEBPACK5 = 'server-webpack5',
   SVELTE_VITE = 'svelte-vite',
   SVELTEKIT = 'sveltekit',
+  TANSTACK_REACT = 'tanstack-react',
   VUE3_VITE = 'vue3-vite',
   WEB_COMPONENTS_VITE = 'web-components-vite',
   // COMMUNITY

code/frameworks/tanstack-react/README.md

@@ -0,0 +1,7 @@
+# Storybook for TanStack (React + Vite)
+
+Develop, document, and test UI components in isolation with built-in TanStack Router and TanStack Query support.
+
+See [documentation](https://storybook.js.org/docs/get-started?ref=readme) for installation instructions, usage examples, APIs, and more.
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/frameworks/tanstack-react/build-config.ts

@@ -0,0 +1,41 @@
+import type { BuildEntries } from '../../../scripts/build/utils/entry-utils.ts';
+
+const config: BuildEntries = {
+  entries: {
+    browser: [
+      {
+        exportEntries: ['.'],
+        entryPoint: './src/index.ts',
+      },
+      {
+        exportEntries: ['./preview'],
+        entryPoint: './src/preview.tsx',
+      },
+      {
+        exportEntries: ['./react-router'],
+        entryPoint: './src/export-mocks/react-router.ts',
+        external: ['@tanstack/react-router'],
+      },
+      {
+        exportEntries: ['./start-storage-context'],
+        entryPoint: './src/export-mocks/start-storage-context.ts',
+      },
+      {
+        exportEntries: ['./start'],
+        entryPoint: './src/export-mocks/start.ts',
+      },
+    ],
+    node: [
+      {
+        exportEntries: ['./preset'],
+        entryPoint: './src/preset.ts',
+      },
+      {
+        exportEntries: ['./node'],
+        entryPoint: './src/node/index.ts',
+      },
+    ],
+  },
+};
+
+export default config;

code/frameworks/tanstack-react/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@storybook/tanstack-react",
+  "version": "10.4.0-alpha.16",
+  "description": "Storybook for TanStack (React, Vite): Router and Start ready Storybook framework",
+  "keywords": [
+    "storybook",
+    "storybook-framework",
+    "tanstack",
+    "tanstack-router",
+    "tanstack-start",
+    "react",
+    "vite",
+    "component",
+    "components"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/tanstack-react",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/tanstack-react"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "code": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./node": {
+      "types": "./dist/node/index.d.ts",
+      "code": "./src/node/index.ts",
+      "default": "./dist/node/index.js"
+    },
+    "./package.json": "./package.json",
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "code": "./src/preset.ts",
+      "default": "./dist/preset.js"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "code": "./src/preview.tsx",
+      "default": "./dist/preview.js"
+    },
+    "./react-router": {
+      "types": "./dist/export-mocks/react-router.d.ts",
+      "code": "./src/export-mocks/react-router.ts",
+      "default": "./dist/export-mocks/react-router.js"
+    },
+    "./start": {
+      "types": "./dist/export-mocks/start.d.ts",
+      "code": "./src/export-mocks/start.ts",
+      "default": "./dist/export-mocks/start.js"
+    },
+    "./start-storage-context": {
+      "types": "./dist/export-mocks/start-storage-context.d.ts",
+      "code": "./src/export-mocks/start-storage-context.ts",
+      "default": "./dist/export-mocks/start-storage-context.js"
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "dependencies": {
+    "@storybook/builder-vite": "workspace:*",
+    "@storybook/react": "workspace:*",
+    "@storybook/react-vite": "workspace:*"
+  },
+  "devDependencies": {
+    "@tanstack/react-router": "^1.168.10",
+    "@tanstack/react-start": "^1.167.16",
+    "@tanstack/router-core": "^1.168.9",
+    "@tanstack/start-client-core": "^1.167.9",
+    "@types/node": "^22.19.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.0.4"
+  },
+  "peerDependencies": {
+    "@tanstack/react-router": "^1.168.10",
+    "@tanstack/react-start": "^1.167.16",
+    "@tanstack/router-core": "^1.168.9",
+    "@tanstack/start-client-core": "^1.167.9",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "storybook": "workspace:^",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-start": {
+      "optional": true
+    },
+    "@tanstack/start-client-core": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

code/frameworks/tanstack-react/project.json

@@ -0,0 +1,10 @@
+{
+  "name": "tanstack-react",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "targets": {
+    "compile": {},
+    "check": {}
+  },
+  "tags": ["library"]
+}

code/frameworks/tanstack-react/src/export-mocks/react-router.ts

@@ -0,0 +1,99 @@
+import { createRoute } from '@tanstack/react-router';
+export * from '@tanstack/react-router';
+
+import { fn } from 'storybook/test';
+import React from 'react';
+import { useEffect } from 'storybook/internal/preview-api';
+
+import {
+  useNavigate as _useNavigate,
+  useRouter as _useRouter,
+  useBlocker as _useBlocker,
+  useMatch as _useMatch,
+  useSearch as _useSearch,
+  useParams as _useParams,
+  useLocation as _useLocation,
+  useRouterState as _useRouterState,
+  useMatchRoute as _useMatchRoute,
+  useLoaderData as _useLoaderData,
+  useLoaderDeps as _useLoaderDeps,
+  useRouteContext as _useRouteContext,
+  useMatches as _useMatches,
+  useParentMatches as _useParentMatches,
+  useChildMatches as _useChildMatches,
+  useCanGoBack as _useCanGoBack,
+  useLinkProps as _useLinkProps,
+} from '@tanstack/react-router';
+import type { Navigate as _Navigate } from '@tanstack/react-router';
+import { onNavigate } from './spies.ts';
+
+// Mock navigation hooks — backed by real implementations so they work in stories
+export const useNavigate = fn(_useNavigate).mockName('@tanstack/react-router::useNavigate');
+export const useRouter = fn(_useRouter).mockName('@tanstack/react-router::useRouter');
+export const useBlocker = fn(_useBlocker).mockName('@tanstack/react-router::useBlocker');
+export const useSearch = fn(_useSearch).mockName('@tanstack/react-router::useSearch');
+export const useParams = fn(_useParams).mockName('@tanstack/react-router::useParams');
+export const useLocation = fn(_useLocation).mockName('@tanstack/react-router::useLocation');
+export const useRouterState = fn(_useRouterState).mockName(
+  '@tanstack/react-router::useRouterState'
+);
+export const useLoaderData = fn(_useLoaderData).mockName('@tanstack/react-router::useLoaderData');
+export const useLoaderDeps = fn(_useLoaderDeps).mockName('@tanstack/react-router::useLoaderDeps');
+export const useRouteContext = fn(_useRouteContext).mockName(
+  '@tanstack/react-router::useRouteContext'
+);
+export const useCanGoBack = fn(_useCanGoBack).mockName('@tanstack/react-router::useCanGoBack');
+export const useLinkProps = fn(_useLinkProps).mockName('@tanstack/react-router::useLinkProps');
+
+export const Outlet = () => null;
+
+export const Navigate: typeof _Navigate = ({ to, href }) => {
+  useEffect(() => {
+    onNavigate({ to: (to as string) || href });
+  }, [to, href]);
+
+  return null;
+};
+
+export const Link = ({
+  to,
+  children,
+  ...props
+}: {
+  to: string;
+  children?: React.ReactNode;
+  [key: string]: unknown;
+}) => {
+  const location = useLocation();
+  return React.createElement(
+    'a',
+    {
+      href: to,
+      onClick: (e: React.MouseEvent) => {
+        e.preventDefault();
+        onNavigate({ to, from: location.href });
+      },
+      ...props,
+    },
+    children
+  );
+};
+
+/**
+ * Override createFileRoute from tanstack react router
+ * because the org `createFileRoute` doesn't set the path in the Route
+ */
+export function createFileRoute(path: string) {
+  return (options: any) => {
+    return createRoute({
+      path,
+      ...options,
+      isRoot: false,
+    }).update({
+      id: path,
+      path: path,
+      fullPath: path,
+      // any because tanstack router does that
+    } as any);
+  };
+}

code/frameworks/tanstack-react/src/export-mocks/spies.ts

@@ -0,0 +1,10 @@
+import { fn } from 'storybook/test';
+
+export type NavigationEvent = { to?: string; from?: string };
+
+/**
+ * Spy called whenever navigation is attempted (Link click, useNavigate, etc.).
+ * Navigation is blocked — the story stays on screen — but the spy records
+ * `{ to, from }` so play functions can assert on it.
+ */
+export const onNavigate = fn<(event: NavigationEvent) => void>().mockName('navigate');

code/frameworks/tanstack-react/src/export-mocks/start-storage-context.ts

@@ -0,0 +1,60 @@
+import type { StartStorageContext } from '@tanstack/start-storage-context';
+
+const START_CONTEXT_SYMBOL = Symbol.for('storybook.tanstack-react.start-storage-context');
+
+type BrowserStartGlobals = typeof globalThis & {
+  __TSR_ROUTER__?: unknown;
+  __TSS_START_OPTIONS__?: unknown;
+  [START_CONTEXT_SYMBOL]?: StartStorageContext;
+};
+
+const browserGlobals = globalThis as BrowserStartGlobals;
+
+function createFallbackStartContext(): StartStorageContext | undefined {
+  if (
+    browserGlobals.__TSR_ROUTER__ === undefined &&
+    browserGlobals.__TSS_START_OPTIONS__ === undefined
+  ) {
+    return undefined;
+  }
+
+  return {
+    getRouter: () => browserGlobals.__TSR_ROUTER__ as never,
+    request: new Request('http://localhost/'),
+    startOptions: browserGlobals.__TSS_START_OPTIONS__,
+    contextAfterGlobalMiddlewares: undefined,
+    executedRequestMiddlewares: new Set(),
+  };
+}
+
+export async function runWithStartContext<T>(
+  context: StartStorageContext,
+  fn: () => T | Promise<T>
+): Promise<T> {
+  const previousContext = browserGlobals[START_CONTEXT_SYMBOL];
+  browserGlobals[START_CONTEXT_SYMBOL] = context;
+
+  try {
+    return await fn();
+  } finally {
+    if (previousContext) {
+      browserGlobals[START_CONTEXT_SYMBOL] = previousContext;
+    } else {
+      delete browserGlobals[START_CONTEXT_SYMBOL];
+    }
+  }
+}
+
+export function getStartContext<TThrow extends boolean = true>(opts?: {
+  throwIfNotFound?: TThrow;
+}): TThrow extends false ? StartStorageContext | undefined : StartStorageContext {
+  const context = browserGlobals[START_CONTEXT_SYMBOL] ?? createFallbackStartContext();
+
+  if (!context && opts?.throwIfNotFound !== false) {
+    throw new Error('No Start context found in Storybook mock.');
+  }
+
+  return context as TThrow extends false ? StartStorageContext | undefined : StartStorageContext;
+}
+
+export type { StartStorageContext };