Docs: Add tanstack documentation

docs/_snippets/tanstack-react-add-framework.md

@@ -0,0 +1,25 @@
+```diff filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+- import type { StorybookConfig } from '@storybook/react-vite';
++ import type { StorybookConfig } from '@storybook/tanstack-react';
+
+const config: StorybookConfig = {
+  // ...
+-  framework: '@storybook/react-vite',
++  framework: '@storybook/tanstack-react',
+};
+
+export default config;
+```
+
+```diff filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+- import { defineMain } from '@storybook/react-vite/node';
++ import { defineMain } from '@storybook/tanstack-react/node';
+
+export default defineMain({
+  // ...
+-  framework: '@storybook/react-vite',
++  framework: '@storybook/tanstack-react',
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->

docs/_snippets/tanstack-react-dynamic-params.md

@@ -0,0 +1,45 @@
+```ts filename="Showcase.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta } from '@storybook/tanstack-react';
+
+import { Route } from './$id';
+
+const meta = {
+  parameters: {
+    tanstack: {
+      router: {
+        route: Route,
+        params: { id: '42' },
+        routeOverrides: {
+          '/showcase/$id': {
+            loader: () => ({ item: mockItem }),
+          },
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Route>;
+
+export default meta;
+```
+
+```ts filename="Showcase.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Route } from './$id';
+
+const meta = preview.meta({
+  parameters: {
+    tanstack: {
+      router: {
+        route: Route,
+        params: { id: '42' },
+        routeOverrides: {
+          '/showcase/$id': {
+            loader: () => ({ item: mockItem }),
+          },
+        },
+      },
+    },
+  },
+});
+```

docs/_snippets/tanstack-react-framework-options.md

@@ -0,0 +1,33 @@
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { StorybookConfig } from '@storybook/tanstack-react';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/tanstack-react',
+    options: {
+      builder: {
+        // Vite builder options
+      },
+    },
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { defineMain } from '@storybook/tanstack-react/node';
+
+export default defineMain({
+  framework: {
+    name: '@storybook/tanstack-react',
+    options: {
+      builder: {
+        // Vite builder options
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->

docs/_snippets/tanstack-react-install.md

@@ -0,0 +1,11 @@
+```shell packageManager="npm"
+npm install --save-dev @storybook/tanstack-react
+```
+
+```shell packageManager="pnpm"
+pnpm add --save-dev @storybook/tanstack-react
+```
+
+```shell packageManager="yarn"
+yarn add --dev @storybook/tanstack-react
+```

docs/_snippets/tanstack-react-mock-db-client.md

@@ -0,0 +1,8 @@
+```ts filename="src/db/__mocks__/client.ts" renderer="react" language="ts"
+import type { drizzle } from 'drizzle-orm/postgres-js';
+import type * as schema from '../schema';
+
+export const db = new Proxy({} as ReturnType<typeof drizzle<typeof schema>>, {
+  get: () => () => Promise.resolve([]),
+});
+```

docs/_snippets/tanstack-react-mock-module-preview.md

@@ -0,0 +1,20 @@
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import { sb } from 'storybook/test';
+
+// Prevents postgres (Node-only) from loading in the browser
+sb.mock(import('../src/db/client.ts'));
+
+export default {};
+```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/tanstack-react';
+import { sb } from 'storybook/test';
+
+// Prevents postgres (Node-only) from loading in the browser
+sb.mock(import('../src/db/client.ts'));
+
+export default definePreview({});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->

docs/_snippets/tanstack-react-mock-server-fn-stories.md

@@ -0,0 +1,65 @@
+```ts filename="ProfileForm.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+import { expect, mocked } from 'storybook/test';
+
+import { updateProfile } from '../lib/updateProfile';
+import { ProfileForm } from './ProfileForm';
+
+const meta = {
+  component: ProfileForm,
+} satisfies Meta<typeof ProfileForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Success: Story = {
+  beforeEach: async () => {
+    mocked(updateProfile).mockResolvedValue({ ok: true, name: 'Ada Lovelace' });
+  },
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByLabelText('Name'), 'Ada Lovelace');
+    await userEvent.click(canvas.getByRole('button', { name: 'Save profile' }));
+
+    await expect(updateProfile).toHaveBeenCalled();
+  },
+};
+
+export const Failure: Story = {
+  beforeEach: async () => {
+    mocked(updateProfile).mockRejectedValue(new Error('Could not save profile'));
+  },
+};
+```
+
+```ts filename="ProfileForm.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import { expect, mocked } from 'storybook/test';
+
+import preview from '../.storybook/preview';
+
+import { updateProfile } from '../lib/updateProfile';
+import { ProfileForm } from './ProfileForm';
+
+const meta = preview.meta({
+  component: ProfileForm,
+});
+
+export const Success = meta.story({
+  beforeEach: async () => {
+    mocked(updateProfile).mockResolvedValue({ ok: true, name: 'Ada Lovelace' });
+  },
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByLabelText('Name'), 'Ada Lovelace');
+    await userEvent.click(canvas.getByRole('button', { name: 'Save profile' }));
+
+    await expect(updateProfile).toHaveBeenCalled();
+  },
+});
+
+export const Failure = meta.story({
+  beforeEach: async () => {
+    mocked(updateProfile).mockRejectedValue(new Error('Could not save profile'));
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->

docs/_snippets/tanstack-react-plain-component-story.md

@@ -0,0 +1,51 @@
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { Page } from './Page';
+
+const meta = {
+  component: Page,
+} satisfies Meta<typeof Page>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    tanstack: {
+      router: {
+        route: {
+          path: '/demo/form/address',
+        },
+        query: { view: 'list' },
+      },
+    },
+  },
+};
+```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Page } from './Page';
+
+const meta = preview.meta({
+  component: Page,
+});
+
+export const Default = meta.story({
+  parameters: {
+    tanstack: {
+      router: {
+        route: {
+          path: '/demo/form/address',
+        },
+        query: { view: 'list' },
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->

docs/_snippets/tanstack-react-preview-migrate.md

@@ -0,0 +1,21 @@
+```diff filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
+- import type { Preview } from '@storybook/react-vite';
++ import type { Preview } from '@storybook/tanstack-react';
+
+const preview: Preview = {
+  //...
+};
+
+export default preview;
+```
+
+```diff filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+- import { definePreview } from '@storybook/react-vite';
++ import { definePreview } from '@storybook/tanstack-react';
+
+export default definePreview({
+  //...
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->

docs/_snippets/tanstack-react-query-and-path.md

@@ -0,0 +1,70 @@
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF 3"
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { Route } from './Page';
+
+const meta = {
+  parameters: {
+    tanstack: {
+      router: {
+        route: Route,
+      },
+    },
+  },
+} satisfies Meta<typeof Route>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithHash: Story = {
+  parameters: {
+    tanstack: {
+      // 👇 Provide the URL fragment (hash) for the route
+      router: { path: '/#section-name' },
+    },
+  },
+};
+
+export const WithSearch: Story = {
+  parameters: {
+    tanstack: {
+      // 👇 Provide the query string for the route
+      router: { query: { tab: 'details', page: '2' } },
+    },
+  },
+};
+```
+
+```ts filename="Page.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Route } from './Page';
+
+const meta = preview.meta({
+  parameters: {
+    tanstack: {
+      router: {
+        route: Route,
+      },
+    },
+  },
+});
+
+export const WithHash = meta.story({
+  parameters: {
+    tanstack: {
+      // 👇 Provide the URL fragment (hash) for the route
+      router: { path: '/#section-name' },
+    },
+  },
+});
+
+export const WithSearch = meta.story({
+  parameters: {
+    tanstack: {
+      // 👇 Provide the query string for the route
+      router: { query: { tab: 'details', page: '2' } },
+    },
+  },
+});
+```