@storybook/tanstack-react 0.0.0 → 10.4.0-alpha.17

package/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).

package/dist/_browser-chunks/chunk-4BE7D4DS.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+};
+
+export {
+  __export
+};

package/dist/_browser-chunks/chunk-4CKCBIXI.js

@@ -0,0 +1,7 @@
+// src/export-mocks/spies.ts
+import { fn } from "storybook/test";
+var onNavigate = fn().mockName("navigate");
+
+export {
+  onNavigate
+};

package/dist/_browser-chunks/chunk-73EPJ7AY.js

@@ -0,0 +1,230 @@
+import {
+  __export
+} from "./chunk-4BE7D4DS.js";
+
+// src/preview.tsx
+var preview_exports = {};
+__export(preview_exports, {
+  applyDecorators: () => applyDecorators,
+  loaders: () => loaders,
+  optimizeDeps: () => optimizeDeps,
+  parameters: () => parameters
+});
+import { applyDecorators as reactApplyDecorators } from "@storybook/react/entry-preview-docs";
+
+// src/routing/decorator.tsx
+import React from "react";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRoute as createRoute2,
+  createRouter,
+  RouterProvider,
+  interpolatePath,
+  defaultStringifySearch
+} from "@tanstack/react-router";
+
+// src/routing/duplicate-tree.ts
+import { createRoute, RootRoute, createRootRouteWithContext } from "@tanstack/react-router";
+var MAX_PARENT_WALK = 50;
+function findRootRoute(route) {
+  let current = route;
+  for (let i = 0; i < MAX_PARENT_WALK && current; i += 1) {
+    if (current instanceof RootRoute)
+      return current;
+    let getParent = current.options?.getParentRoute;
+    current = typeof getParent == "function" ? getParent() : void 0;
+  }
+}
+function getOverrideFor(overrides, routeId) {
+  return overrides ? overrides[routeId] ?? {} : {};
+}
+function initSourceTree(route, counter) {
+  route.init({ originalIndex: counter.i }), counter.i += 1;
+  let children = route.children;
+  if (children?.length)
+    for (let child of children)
+      initSourceTree(child, counter);
+}
+function cloneChild(oldRoute, parent, overrides, byId) {
+  let options = oldRoute.options ?? {}, { id: _id, getParentRoute: _g, ...rest } = options, override = getOverrideFor(overrides, oldRoute.id), cloned = createRoute({
+    ...rest,
+    ...override,
+    getParentRoute: () => parent
+  });
+  byId.set(oldRoute.id, cloned);
+  let children = oldRoute.children;
+  if (children?.length) {
+    let clonedChildren = children.map(
+      (child) => cloneChild(child, cloned, overrides, byId)
+    );
+    cloned.addChildren(clonedChildren);
+  }
+  return cloned;
+}
+function duplicateRouteTree(rootRoute, { overrides } = {}) {
+  initSourceTree(rootRoute, { i: 0 });
+  let byId = /* @__PURE__ */ new Map(), rootOptions = rootRoute.options ?? {}, rootOverride = getOverrideFor(overrides, "__root__"), { id: _rootId, getParentRoute: _rootGetParent, ...restRoot } = rootOptions, newRoot = createRootRouteWithContext()({
+    ...restRoot,
+    ...rootOverride
+  });
+  byId.set("__root__", newRoot);
+  let children = rootRoute.children;
+  if (children?.length) {
+    let clonedChildren = children.map(
+      (child) => cloneChild(child, newRoot, overrides, byId)
+    );
+    newRoot.addChildren(clonedChildren);
+  }
+  return { root: newRoot, byId };
+}
+function resolveStoryLeaf(tree, { path, boundRouteId }) {
+  let { root, byId } = tree;
+  if (path) {
+    let bestMatch, bestMatchLength = -1;
+    for (let route of byId.values()) {
+      let fullPath = route.fullPath;
+      fullPath && fullPath === path && fullPath.length > bestMatchLength && (bestMatch = route, bestMatchLength = fullPath.length);
+    }
+    if (bestMatch)
+      return bestMatch;
+  }
+  if (boundRouteId) {
+    let bound = byId.get(boundRouteId);
+    if (bound)
+      return bound;
+  }
+  let firstChild = root.children?.[0];
+  return firstChild || root;
+}
+
+// src/routing/utils.ts
+import { Route, RootRoute as RootRoute2 } from "@tanstack/react-router";
+function isRoute(value) {
+  return value instanceof Route || value instanceof RootRoute2;
+}
+
+// src/routing/decorator.tsx
+var StoryContext = React.createContext({ Story: () => null }), StoryFromContext = () => {
+  let { Story } = React.useContext(StoryContext);
+  return React.createElement(Story, null);
+}, tanstackRouteDecorator = (Story, context) => React.createElement(TanStackRouterStory, { Story, context });
+function TanStackRouterStory({ Story, context }) {
+  let routerContext = context.parameters.tanstack?.router?.useRouterContext?.({
+    storyContext: context
+  }), router = React.useMemo(
+    () => createStoryRouter({ Story: StoryFromContext, context, routerContext }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [context.id]
+  ), providerContext = React.useMemo(
+    () => ({
+      ...context.parameters.tanstack?.router?.context,
+      ...routerContext
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [context.id, routerContext]
+  );
+  return React.createElement(StoryContext.Provider, { value: { Story } }, React.createElement(RouterProvider, { router, context: providerContext }));
+}
+function createStoryRouter({
+  Story,
+  context,
+  routerContext
+}) {
+  let routerParameters = context.parameters.tanstack?.router ?? {}, { tree, leaf } = resolveTree(Story, context), routeTree = tree.root, inferredPath = routerParameters?.path || leaf.fullPath || routeTree.children?.[0]?.fullPath || "/", resolvedPath = interpolatePath({
+    path: inferredPath,
+    params: routerParameters?.params ?? {}
+  }).interpolatedPath, search = routerParameters?.query ? defaultStringifySearch(routerParameters.query) : "";
+  search && (resolvedPath += search);
+  let history = createMemoryHistory({
+    initialEntries: [resolvedPath]
+  });
+  return history.replace(resolvedPath), createRouter({
+    routeTree,
+    history,
+    defaultNotFoundComponent(props) {
+      return React.createElement("div", null, "Route not found: ", props.routeId);
+    },
+    defaultErrorComponent({ error }) {
+      return React.createElement("div", null, "Story did something wrong : ", String(error));
+    },
+    context: routerContext
+  });
+}
+function injectStoryComponent(leaf, Story, overrides, leafId) {
+  let userOverride = overrides?.[leafId];
+  userOverride && "component" in userOverride && userOverride.component !== void 0 || leaf.update({ component: () => React.createElement(Story, null) });
+}
+function resolveTree(Story, context) {
+  let metaRoute = context.route, routerParameters = context.parameters.tanstack?.router ?? {}, routerParameterRoute = routerParameters.route, routeOverrides = routerParameters.routeOverrides, resolvedRoute = isRoute(routerParameterRoute) ? routerParameterRoute : isRoute(metaRoute) ? metaRoute : void 0, rootRoute = resolvedRoute ? findRootRoute(resolvedRoute) : void 0;
+  if (rootRoute) {
+    let tree = duplicateRouteTree(rootRoute, { overrides: routeOverrides }), leaf = resolveStoryLeaf(tree, {
+      path: routerParameters.path,
+      boundRouteId: resolvedRoute && resolvedRoute !== rootRoute ? resolvedRoute.id : void 0
+    });
+    return injectStoryComponent(leaf, Story, routeOverrides, leaf.id), { tree, leaf };
+  }
+  if (isRoute(routerParameterRoute)) {
+    let syntheticRoot2 = createRootRoute(
+      routeOverrides?.__root__ ?? {}
+    );
+    routerParameterRoute.update({ getParentRoute: () => syntheticRoot2 }), syntheticRoot2.addChildren([routerParameterRoute]);
+    let tree = duplicateRouteTree(syntheticRoot2, { overrides: routeOverrides }), leaf = tree.byId.get(routerParameterRoute.id) ?? tree.root;
+    return injectStoryComponent(leaf, Story, routeOverrides, leaf.id), { tree, leaf };
+  }
+  let plainOptions = routerParameterRoute ?? {}, syntheticRoot = createRootRoute(
+    routeOverrides?.__root__ ?? {}
+  ), syntheticChild = createRoute2({
+    component: () => React.createElement(Story, null),
+    id: "storybook-story",
+    ...plainOptions,
+    getParentRoute: () => syntheticRoot
+  });
+  return syntheticRoot.addChildren([syntheticChild]), injectStoryComponent(syntheticChild, Story, routeOverrides, syntheticChild.id), {
+    tree: { root: syntheticRoot, byId: /* @__PURE__ */ new Map([[syntheticChild.id, syntheticChild]]) },
+    leaf: syntheticChild
+  };
+}
+
+// src/routing/loader.ts
+import { RootRoute as RootRoute3 } from "@tanstack/react-router";
+function getComponentFromRoute(route) {
+  if (route.options?.component)
+    return route.options.component;
+  if (route instanceof RootRoute3)
+    return route.children?.[0]?.options?.component;
+}
+var routeComponentLoader = (context) => {
+  let routerParameters = context.parameters.tanstack?.router ?? {}, parameterRoute = isRoute(routerParameters.route) ? routerParameters.route : void 0;
+  if (parameterRoute) {
+    if (!context.component) {
+      let component = getComponentFromRoute(parameterRoute);
+      component && !context.component && (context.component = component);
+    }
+    context.route || (context.route = parameterRoute);
+  }
+};
+
+// src/preview.tsx
+var loaders = [routeComponentLoader], applyDecorators = (storyFn, allDecorators) => (
+  // reorder decorators so `jsxDecorator` is innermost, and `tanstackRouteDecorator` is just outside it
+  // There is an issue if `tanstackRouteDecorator` is innermost. All stories crashes due to a bug with the jsxDecorator.
+  reactApplyDecorators(storyFn, [
+    tanstackRouteDecorator,
+    ...allDecorators
+  ])
+), parameters = {
+  tanstack: {}
+}, optimizeDeps = [
+  "@tanstack/react-devtools",
+  "@tanstack/react-query-devtools",
+  "@tanstack/react-router-devtools"
+];
+
+export {
+  loaders,
+  applyDecorators,
+  parameters,
+  optimizeDeps,
+  preview_exports
+};

package/dist/export-mocks/react-router.d.ts

@@ -0,0 +1,344 @@
+import * as _tanstack_react_router from '@tanstack/react-router';
+import { useNavigate as useNavigate$1, useRouter as useRouter$1, useBlocker as useBlocker$1, useSearch as useSearch$1, useParams as useParams$1, useLocation as useLocation$1, useRouterState as useRouterState$1, useLoaderData as useLoaderData$1, useLoaderDeps as useLoaderDeps$1, useRouteContext as useRouteContext$1, useCanGoBack as useCanGoBack$1, useLinkProps as useLinkProps$1, Navigate as Navigate$1 } from '@tanstack/react-router';
+export * from '@tanstack/react-router';
+import * as _tanstack_router_core from '@tanstack/router-core';
+import React from 'react';
+
+interface MockResultReturn<T> {
+	type: "return";
+	/**
+	* The value that was returned from the function. If function returned a Promise, then this will be a resolved value.
+	*/
+	value: T;
+}
+interface MockResultIncomplete {
+	type: "incomplete";
+	value: undefined;
+}
+interface MockResultThrow {
+	type: "throw";
+	/**
+	* An error that was thrown during function execution.
+	*/
+	value: any;
+}
+interface MockSettledResultFulfilled<T> {
+	type: "fulfilled";
+	value: T;
+}
+interface MockSettledResultRejected {
+	type: "rejected";
+	value: any;
+}
+type MockResult<T> = MockResultReturn<T> | MockResultThrow | MockResultIncomplete;
+type MockSettledResult<T> = MockSettledResultFulfilled<T> | MockSettledResultRejected;
+interface MockContext<T extends Procedure> {
+	/**
+	* This is an array containing all arguments for each call. One item of the array is the arguments of that call.
+	*
+	* @see https://vitest.dev/api/mock#mock-calls
+	* @example
+	* const fn = vi.fn()
+	*
+	* fn('arg1', 'arg2')
+	* fn('arg3')
+	*
+	* fn.mock.calls === [
+	*   ['arg1', 'arg2'], // first call
+	*   ['arg3'], // second call
+	* ]
+	*/
+	calls: Parameters<T>[];
+	/**
+	* This is an array containing all instances that were instantiated when mock was called with a `new` keyword. Note that this is an actual context (`this`) of the function, not a return value.
+	* @see https://vitest.dev/api/mock#mock-instances
+	*/
+	instances: ReturnType<T>[];
+	/**
+	* An array of `this` values that were used during each call to the mock function.
+	* @see https://vitest.dev/api/mock#mock-contexts
+	*/
+	contexts: ThisParameterType<T>[];
+	/**
+	* The order of mock's execution. This returns an array of numbers which are shared between all defined mocks.
+	*
+	* @see https://vitest.dev/api/mock#mock-invocationcallorder
+	* @example
+	* const fn1 = vi.fn()
+	* const fn2 = vi.fn()
+	*
+	* fn1()
+	* fn2()
+	* fn1()
+	*
+	* fn1.mock.invocationCallOrder === [1, 3]
+	* fn2.mock.invocationCallOrder === [2]
+	*/
+	invocationCallOrder: number[];
+	/**
+	* This is an array containing all values that were `returned` from the function.
+	*
+	* The `value` property contains the returned value or thrown error. If the function returned a `Promise`, then `result` will always be `'return'` even if the promise was rejected.
+	*
+	* @see https://vitest.dev/api/mock#mock-results
+	* @example
+	* const fn = vi.fn()
+	*   .mockReturnValueOnce('result')
+	*   .mockImplementationOnce(() => { throw new Error('thrown error') })
+	*
+	* const result = fn()
+	*
+	* try {
+	*   fn()
+	* }
+	* catch {}
+	*
+	* fn.mock.results === [
+	*   {
+	*     type: 'return',
+	*     value: 'result',
+	*   },
+	*   {
+	*     type: 'throw',
+	*     value: Error,
+	*   },
+	* ]
+	*/
+	results: MockResult<ReturnType<T>>[];
+	/**
+	* An array containing all values that were `resolved` or `rejected` from the function.
+	*
+	* This array will be empty if the function was never resolved or rejected.
+	*
+	* @see https://vitest.dev/api/mock#mock-settledresults
+	* @example
+	* const fn = vi.fn().mockResolvedValueOnce('result')
+	*
+	* const result = fn()
+	*
+	* fn.mock.settledResults === []
+	* fn.mock.results === [
+	*   {
+	*     type: 'return',
+	*     value: Promise<'result'>,
+	*   },
+	* ]
+	*
+	* await result
+	*
+	* fn.mock.settledResults === [
+	*   {
+	*     type: 'fulfilled',
+	*     value: 'result',
+	*   },
+	* ]
+	*/
+	settledResults: MockSettledResult<Awaited<ReturnType<T>>>[];
+	/**
+	* This contains the arguments of the last call. If spy wasn't called, will return `undefined`.
+	* @see https://vitest.dev/api/mock#mock-lastcall
+	*/
+	lastCall: Parameters<T> | undefined;
+}
+type Procedure = (...args: any[]) => any;
+// pick a single function type from function overloads, unions, etc...
+type NormalizedProcedure<T extends Procedure> = (...args: Parameters<T>) => ReturnType<T>;
+/*
+cf. https://typescript-eslint.io/rules/method-signature-style/
+
+Typescript assignability is different between
+{ foo: (f: T) => U } (this is "method-signature-style")
+and
+{ foo(f: T): U }
+
+Jest uses the latter for `MockInstance.mockImplementation` etc... and it allows assignment such as:
+const boolFn: Jest.Mock<() => boolean> = jest.fn<() => true>(() => true)
+*/
+/* eslint-disable ts/method-signature-style */
+interface MockInstance<T extends Procedure = Procedure> extends Disposable {
+	/**
+	* Use it to return the name assigned to the mock with the `.mockName(name)` method. By default, it will return `vi.fn()`.
+	* @see https://vitest.dev/api/mock#getmockname
+	*/
+	getMockName(): string;
+	/**
+	* Sets the internal mock name. This is useful for identifying the mock when an assertion fails.
+	* @see https://vitest.dev/api/mock#mockname
+	*/
+	mockName(name: string): this;
+	/**
+	* Current context of the mock. It stores information about all invocation calls, instances, and results.
+	*/
+	mock: MockContext<T>;
+	/**
+	* Clears all information about every call. After calling it, all properties on `.mock` will return to their initial state. This method does not reset implementations. It is useful for cleaning up mocks between different assertions.
+	*
+	* To automatically call this method before each test, enable the [`clearMocks`](https://vitest.dev/config/#clearmocks) setting in the configuration.
+	* @see https://vitest.dev/api/mock#mockclear
+	*/
+	mockClear(): this;
+	/**
+	* Does what `mockClear` does and resets inner implementation to the original function. This also resets all "once" implementations.
+	*
+	* Note that resetting a mock from `vi.fn()` will set implementation to an empty function that returns `undefined`.
+	* Resetting a mock from `vi.fn(impl)` will set implementation to `impl`. It is useful for completely resetting a mock to its default state.
+	*
+	* To automatically call this method before each test, enable the [`mockReset`](https://vitest.dev/config/#mockreset) setting in the configuration.
+	* @see https://vitest.dev/api/mock#mockreset
+	*/
+	mockReset(): this;
+	/**
+	* Does what `mockReset` does and restores original descriptors of spied-on objects.
+	*
+	* Note that restoring mock from `vi.fn()` will set implementation to an empty function that returns `undefined`. Restoring a `vi.fn(impl)` will restore implementation to `impl`.
+	* @see https://vitest.dev/api/mock#mockrestore
+	*/
+	mockRestore(): void;
+	/**
+	* Returns current permanent mock implementation if there is one.
+	*
+	* If mock was created with `vi.fn`, it will consider passed down method as a mock implementation.
+	*
+	* If mock was created with `vi.spyOn`, it will return `undefined` unless a custom implementation was provided.
+	*/
+	getMockImplementation(): NormalizedProcedure<T> | undefined;
+	/**
+	* Accepts a function to be used as the mock implementation. TypeScript expects the arguments and return type to match those of the original function.
+	* @see https://vitest.dev/api/mock#mockimplementation
+	* @example
+	* const increment = vi.fn().mockImplementation(count => count + 1);
+	* expect(increment(3)).toBe(4);
+	*/
+	mockImplementation(fn: NormalizedProcedure<T>): this;
+	/**
+	* Accepts a function to be used as the mock implementation. TypeScript expects the arguments and return type to match those of the original function. This method can be chained to produce different results for multiple function calls.
+	*
+	* When the mocked function runs out of implementations, it will invoke the default implementation set with `vi.fn(() => defaultValue)` or `.mockImplementation(() => defaultValue)` if they were called.
+	* @see https://vitest.dev/api/mock#mockimplementationonce
+	* @example
+	* const fn = vi.fn(count => count).mockImplementationOnce(count => count + 1);
+	* expect(fn(3)).toBe(4);
+	* expect(fn(3)).toBe(3);
+	*/
+	mockImplementationOnce(fn: NormalizedProcedure<T>): this;
+	/**
+	* Overrides the original mock implementation temporarily while the callback is being executed.
+	*
+	* Note that this method takes precedence over the [`mockImplementationOnce`](https://vitest.dev/api/mock#mockimplementationonce).
+	* @see https://vitest.dev/api/mock#withimplementation
+	* @example
+	* const myMockFn = vi.fn(() => 'original')
+	*
+	* myMockFn.withImplementation(() => 'temp', () => {
+	*   myMockFn() // 'temp'
+	* })
+	*
+	* myMockFn() // 'original'
+	*/
+	withImplementation<T2>(fn: NormalizedProcedure<T>, cb: () => T2): T2 extends Promise<unknown> ? Promise<this> : this;
+	/**
+	* Use this if you need to return the `this` context from the method without invoking the actual implementation.
+	* @see https://vitest.dev/api/mock#mockreturnthis
+	*/
+	mockReturnThis(): this;
+	/**
+	* Accepts a value that will be returned whenever the mock function is called. TypeScript will only accept values that match the return type of the original function.
+	* @see https://vitest.dev/api/mock#mockreturnvalue
+	* @example
+	* const mock = vi.fn()
+	* mock.mockReturnValue(42)
+	* mock() // 42
+	* mock.mockReturnValue(43)
+	* mock() // 43
+	*/
+	mockReturnValue(value: ReturnType<T>): this;
+	/**
+	* Accepts a value that will be returned whenever the mock function is called. TypeScript will only accept values that match the return type of the original function.
+	*
+	* When the mocked function runs out of implementations, it will invoke the default implementation set with `vi.fn(() => defaultValue)` or `.mockImplementation(() => defaultValue)` if they were called.
+	* @example
+	* const myMockFn = vi
+	*   .fn()
+	*   .mockReturnValue('default')
+	*   .mockReturnValueOnce('first call')
+	*   .mockReturnValueOnce('second call')
+	*
+	* // 'first call', 'second call', 'default'
+	* console.log(myMockFn(), myMockFn(), myMockFn())
+	*/
+	mockReturnValueOnce(value: ReturnType<T>): this;
+	/**
+	* Accepts a value that will be resolved when the async function is called. TypeScript will only accept values that match the return type of the original function.
+	* @example
+	* const asyncMock = vi.fn().mockResolvedValue(42)
+	* asyncMock() // Promise<42>
+	*/
+	mockResolvedValue(value: Awaited<ReturnType<T>>): this;
+	/**
+	* Accepts a value that will be resolved during the next function call. TypeScript will only accept values that match the return type of the original function. If chained, each consecutive call will resolve the specified value.
+	* @example
+	* const myMockFn = vi
+	*   .fn()
+	*   .mockResolvedValue('default')
+	*   .mockResolvedValueOnce('first call')
+	*   .mockResolvedValueOnce('second call')
+	*
+	* // Promise<'first call'>, Promise<'second call'>, Promise<'default'>
+	* console.log(myMockFn(), myMockFn(), myMockFn())
+	*/
+	mockResolvedValueOnce(value: Awaited<ReturnType<T>>): this;
+	/**
+	* Accepts an error that will be rejected when async function is called.
+	* @example
+	* const asyncMock = vi.fn().mockRejectedValue(new Error('Async error'))
+	* await asyncMock() // throws Error<'Async error'>
+	*/
+	mockRejectedValue(error: unknown): this;
+	/**
+	* Accepts a value that will be rejected during the next function call. If chained, each consecutive call will reject the specified value.
+	* @example
+	* const asyncMock = vi
+	*   .fn()
+	*   .mockResolvedValueOnce('first call')
+	*   .mockRejectedValueOnce(new Error('Async error'))
+	*
+	* await asyncMock() // first call
+	* await asyncMock() // throws Error<'Async error'>
+	*/
+	mockRejectedValueOnce(error: unknown): this;
+}
+/* eslint-enable ts/method-signature-style */
+interface Mock<T extends Procedure = Procedure> extends MockInstance<T> {
+	new (...args: Parameters<T>): ReturnType<T>;
+	(...args: Parameters<T>): ReturnType<T>;
+}
+
+declare const useNavigate: Mock<typeof useNavigate$1>;
+declare const useRouter: Mock<typeof useRouter$1>;
+declare const useBlocker: Mock<typeof useBlocker$1>;
+declare const useSearch: Mock<typeof useSearch$1>;
+declare const useParams: Mock<typeof useParams$1>;
+declare const useLocation: Mock<typeof useLocation$1>;
+declare const useRouterState: Mock<typeof useRouterState$1>;
+declare const useLoaderData: Mock<typeof useLoaderData$1>;
+declare const useLoaderDeps: Mock<typeof useLoaderDeps$1>;
+declare const useRouteContext: Mock<typeof useRouteContext$1>;
+declare const useCanGoBack: Mock<typeof useCanGoBack$1>;
+declare const useLinkProps: Mock<typeof useLinkProps$1>;
+declare const Outlet: () => null;
+declare const Navigate: typeof Navigate$1;
+declare const Link: ({ to, children, ...props }: {
+    to: string;
+    children?: React.ReactNode;
+    [key: string]: unknown;
+}) => React.DetailedReactHTMLElement<{
+    href: string;
+    onClick: (e: React.MouseEvent) => void;
+}, HTMLElement>;
+/**
+ * Override createFileRoute from tanstack react router
+ * because the org `createFileRoute` doesn't set the path in the Route
+ */
+declare function createFileRoute(path: string): (options: any) => _tanstack_react_router.Route<unknown, _tanstack_router_core.AnyRoute, "/", "/" | `/${any}/`, string, "/" | `/${any}/`, undefined, _tanstack_router_core.ResolveParams<"/">, _tanstack_router_core.AnyContext, _tanstack_router_core.AnyContext, _tanstack_router_core.AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
+
+export { Link, Navigate, Outlet, createFileRoute, useBlocker, useCanGoBack, useLinkProps, useLoaderData, useLoaderDeps, useLocation, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch };

package/dist/export-mocks/react-router.js

@@ -0,0 +1,79 @@
+import {
+  onNavigate
+} from "../_browser-chunks/chunk-4CKCBIXI.js";
+import "../_browser-chunks/chunk-4BE7D4DS.js";
+
+// src/export-mocks/react-router.ts
+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,
+  useSearch as _useSearch,
+  useParams as _useParams,
+  useLocation as _useLocation,
+  useRouterState as _useRouterState,
+  useLoaderData as _useLoaderData,
+  useLoaderDeps as _useLoaderDeps,
+  useRouteContext as _useRouteContext,
+  useCanGoBack as _useCanGoBack,
+  useLinkProps as _useLinkProps
+} from "@tanstack/react-router";
+var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate"), useRouter = fn(_useRouter).mockName("@tanstack/react-router::useRouter"), useBlocker = fn(_useBlocker).mockName("@tanstack/react-router::useBlocker"), useSearch = fn(_useSearch).mockName("@tanstack/react-router::useSearch"), useParams = fn(_useParams).mockName("@tanstack/react-router::useParams"), useLocation = fn(_useLocation).mockName("@tanstack/react-router::useLocation"), useRouterState = fn(_useRouterState).mockName(
+  "@tanstack/react-router::useRouterState"
+), useLoaderData = fn(_useLoaderData).mockName("@tanstack/react-router::useLoaderData"), useLoaderDeps = fn(_useLoaderDeps).mockName("@tanstack/react-router::useLoaderDeps"), useRouteContext = fn(_useRouteContext).mockName(
+  "@tanstack/react-router::useRouteContext"
+), useCanGoBack = fn(_useCanGoBack).mockName("@tanstack/react-router::useCanGoBack"), useLinkProps = fn(_useLinkProps).mockName("@tanstack/react-router::useLinkProps"), Outlet = () => null, Navigate = ({ to, href }) => (useEffect(() => {
+  onNavigate({ to: to || href });
+}, [to, href]), null), Link = ({
+  to,
+  children,
+  ...props
+}) => {
+  let location = useLocation();
+  return React.createElement(
+    "a",
+    {
+      href: to,
+      onClick: (e) => {
+        e.preventDefault(), onNavigate({ to, from: location.href });
+      },
+      ...props
+    },
+    children
+  );
+};
+function createFileRoute(path) {
+  return (options) => createRoute({
+    path,
+    ...options,
+    isRoot: !1
+  }).update({
+    id: path,
+    path,
+    fullPath: path
+    // any because tanstack router does that
+  });
+}
+export {
+  Link,
+  Navigate,
+  Outlet,
+  createFileRoute,
+  useBlocker,
+  useCanGoBack,
+  useLinkProps,
+  useLoaderData,
+  useLoaderDeps,
+  useLocation,
+  useNavigate,
+  useParams,
+  useRouteContext,
+  useRouter,
+  useRouterState,
+  useSearch
+};