@storybook/tanstack-react 0.0.0-pr-34403-sha-53a142e3

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@storybook/tanstack-react",
+  "version": "0.0.0-pr-34403-sha-53a142e3",
+  "description": "Storybook for TanStack (React, Vite): Router + Query ready Storybook framework",
+  "keywords": [
+    "storybook",
+    "storybook-framework",
+    "tanstack",
+    "tanstack-router",
+    "tanstack-query",
+    "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"
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "dependencies": {
+    "@storybook/builder-vite": "0.0.0-pr-34403-sha-53a142e3",
+    "@storybook/react": "0.0.0-pr-34403-sha-53a142e3",
+    "@storybook/react-vite": "0.0.0-pr-34403-sha-53a142e3"
+  },
+  "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",
+    "prop-types": "^15.7.2",
+    "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": "^0.0.0-pr-34403-sha-53a142e3",
+    "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-router": {
+      "optional": false
+    },
+    "@tanstack/react-start": {
+      "optional": true
+    },
+    "@tanstack/start-client-core": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/template/cli/ts/Button.stories.ts

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { fn } from 'storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

package/template/cli/ts/Button.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};

package/template/cli/ts/Header.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { fn } from 'storybook/test';
+
+import { Header } from './Header';
+
+const meta = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

package/template/cli/ts/Header.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { Button } from './Button';
+
+type User = {
+  name: string;
+};
+
+export interface HeaderProps {
+  user?: User;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <header>
+    <div className="storybook-header">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);

package/template/cli/ts/Page.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Route } from './Page';
+
+const meta = {
+  title: 'Example/Page',
+  component: Route,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Route>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedOut: Story = {};
+
+// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};

package/template/cli/ts/Page.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+
+import { Link, useLoaderData, useRouterState, createFileRoute } from '@tanstack/react-router';
+
+import { Header } from './Header';
+
+type User = {
+  name: string;
+};
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/storybook': {};
+  }
+}
+
+export const Route = createFileRoute('/storybook')({
+  loader: async () => {
+    return {
+      featuredItems: [
+        { id: 1, title: 'Item 1', description: 'This is the first item.' },
+        { id: 2, title: 'Item 2', description: 'This is the second item.' },
+        { id: 3, title: 'Item 3', description: 'This is the third item.' },
+      ],
+    };
+  },
+  component: () => <Page />,
+});
+
+export type PageLoaderData = {
+  featuredItems: Array<{ id: number; title: string; description: string }>;
+};
+
+const Page: React.FC = () => {
+  const [user, setUser] = React.useState<User>();
+  const { featuredItems } = useLoaderData({ strict: false }) as PageLoaderData;
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section className="storybook-page">
+        <h2>TanStack Router in Storybook</h2>
+
+        <CurrentRoute />
+
+        {featuredItems?.length > 0 && (
+          <>
+            <h3>Loaded via route loader</h3>
+            <ul
+              style={{ listStyle: 'none', padding: 0, display: 'flex', gap: 12, flexWrap: 'wrap' }}
+            >
+              {featuredItems.map((item) => (
+                <li
+                  key={item.id}
+                  style={{
+                    padding: '12px 16px',
+                    background: '#f6f9fc',
+                    border: '1px solid #e0e6ef',
+                    borderRadius: 8,
+                    minWidth: 180,
+                  }}
+                >
+                  <strong>{item.title}</strong>
+                  <p style={{ margin: '4px 0 0', fontSize: 13, color: '#666' }}>
+                    {item.description}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+
+        <CurrentRoute />
+
+        <p>
+          Every story is wrapped in a TanStack Router provider automatically. Click the links below
+          and check the <strong>Actions</strong> panel to see the <code>onNavigate</code> spy
+          capture each navigation attempt.
+        </p>
+
+        <nav
+          style={{
+            display: 'flex',
+            gap: 8,
+            flexWrap: 'wrap',
+            marginBottom: 24,
+          }}
+        >
+          <Link
+            to="/"
+            className="storybook-button storybook-button--small storybook-button--secondary"
+          >
+            Home
+          </Link>
+          <Link
+            to="/about"
+            className="storybook-button storybook-button--small storybook-button--secondary"
+          >
+            About
+          </Link>
+          <Link
+            to="/settings"
+            search={{ tab: 'profile' }}
+            className="storybook-button storybook-button--small storybook-button--secondary"
+          >
+            Settings
+          </Link>
+        </nav>
+
+        <p>
+          The current route display above reads from <code>useRouterState()</code> — a real TanStack
+          Router hook running inside Storybook's mock router. Use the{' '}
+          <code>tanstack.router.path</code> story parameter to set the initial route.
+        </p>
+
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Each navigation is intercepted and logged as an action.
+          No page actually changes — this lets you test routing behavior in isolation.
+        </div>
+      </section>
+    </article>
+  );
+};
+function CurrentRoute() {
+  const { location } = useRouterState();
+
+  return (
+    <div
+      style={{
+        padding: '12px 16px',
+        background: '#f6f9fc',
+        border: '1px solid #e0e6ef',
+        borderRadius: 8,
+        fontFamily: 'monospace',
+        fontSize: 13,
+        marginBottom: 24,
+        display: 'flex',
+        gap: 12,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <span style={{ fontWeight: 600, color: '#333' }}>Current route:</span>
+      <code style={{ color: '#029cfd' }}>{location.pathname}</code>
+      {location.searchStr && (
+        <>
+          <span style={{ color: '#666' }}>search:</span>
+          <code style={{ color: '#66bf3c' }}>{location.searchStr}</code>
+        </>
+      )}
+    </div>
+  );
+}