import type {PartialStoryFn, StoryContext} from '@storybook/types';
import {createMemoryHistory, createRootRoute, createRoute, createRouter, RouterProvider} from '@tanstack/react-router';
export default function withRouter(Story: PartialStoryFn, {parameters}: StoryContext) {
	const {initialEntries = ['/'], initialIndex, routes = ['/']} = parameters?.router || {};
	const rootRoute = createRootRoute();
	const children = routes.map((path) =>
		createRoute({
			path,
			getParentRoute: () => rootRoute,
			component: Story,
		}),
	);
	rootRoute.addChildren(children);
	const router = createRouter({
		history: createMemoryHistory({initialEntries, initialIndex}),
		routeTree: rootRoute,
	});
	return <RouterProvider router={router} />;
}
declare module '@storybook/types' {
	interface Parameters {
		router?: {
			initialEntries?: string[];
			initialIndex?: number;
			routes?: string[];
		};
	}
}

// preview.tsx
import type { Preview } from '@storybook/react';
import { RouterProvider, createMemoryHistory, createRootRoute, createRouter } from '@tanstack/react-router';
const preview: Preview = {
 decorators: [
 (Story) => {
 return <RouterProvider router={createRouter({
 history: createMemoryHistory(),
 routeTree: createRootRoute({
 component: Story
 })
 })} />
 }
 ]
};
export default preview

 const router = createRouter({ routeTree });
 ...
 decorators: [story => <RouterContextProvider router={router}>{story()}</RouterContextProvider>]

Invariant failed: Could not find a nearest match!
Invariant failed: Could not find an active match from "/_dashboard/team/$teamId/players"

import {
 type AnyRoute,
 type FullSearchSchema,
 type RegisteredRouter,
 type RouteById,
 type RouteIds,
 useSearch
} from "@tanstack/react-router"
import { isStorybook } from "../lib/generalConfig"
type StringLiteral<T> = T extends string ? (string extends T ? string : T) : never
type StrictOrFrom<TFrom, TStrict extends boolean = true> = TStrict extends false
 ? {
 from?: never
 strict: TStrict
 }
 : {
 from: StringLiteral<TFrom> | TFrom
 strict?: TStrict
 }
type UseSearchOptions<TFrom, TStrict extends boolean, TSearch, TSelected> = StrictOrFrom<
 TFrom,
 TStrict
> & {
 select?: (search: TSearch) => TSelected
}
type Expand<T> = T extends object
 ? T extends infer O
 ? O extends Function
 ? O
 : { [K in keyof O]: O[K] }
 : never
 : T
/**
 * Enhanced useSearch hook that optionally disables strict mode if running in Storybook.
 */
export function usePtSearch<
 TRouteTree extends AnyRoute = RegisteredRouter["routeTree"],
 TFrom extends RouteIds<TRouteTree> = RouteIds<TRouteTree>,
 TStrict extends boolean = true,
 TSearch = TStrict extends false
 ? FullSearchSchema<TRouteTree>
 : Expand<RouteById<TRouteTree, TFrom>["types"]["fullSearchSchema"]>,
 TSelected = TSearch
>(opts: UseSearchOptions<TFrom, TStrict, TSearch, TSelected>): TSelected {
 // Create a modified options object if in Storybook mode
 // Call the useSearch hook with the appropriate options
 return useSearch(isStorybook ? { strict: false } : opts)
}

export function StoryRouterProvider(
 props: PropsWithChildren<{
 parameters: StoryContext["parameters"];
 }>,
): ReactElement {
 const { children, parameters } = props;
 let storyRoutePath = "/";
 let layoutRouteId;
 // If the route parameter exists, extract any layout segment from the path,
 // if there's any layout segment, a layout route will be created as a parent of the story route
 if (parameters["route"]) {
 const pathSegments = parameters["route"].id.split("/").filter((e) => e);
 const layoutSegments = pathSegments.slice(
 0,
 pathSegments.findLastIndex((s) => s.startsWith("_")) + 1,
 );
 layoutRouteId = layoutSegments.join("/") || undefined;
 storyRoutePath = "/" + pathSegments.slice(layoutSegments.length).join("/");
 }
 const rootRoute = createRootRoute({});
 let layout =
 layoutRouteId &&
 createRoute({
 component: Outlet,
 id: layoutRouteId,
 getParentRoute: () => rootRoute,
 });
 const storyRoute = createRoute({
 component: () => children,
 path: storyRoutePath,
 getParentRoute: () => (layout ? layout : rootRoute),
 });
 layout?.addChildren([storyRoute]);
 rootRoute.addChildren([layout ? layout : storyRoute]);
 const finalPath = parameters["route"]?.params
 ? interpolatePath({
 path: storyRoutePath,
 params: parameters["route"].params,
 }).interpolatedPath
 : storyRoutePath;
 const router = createRouter({
 history: createMemoryHistory({
 initialEntries: [finalPath],
 }),
 routeTree: rootRoute,
 });
 return <RouterProvider router={router} defaultComponent={() => children} />;
}

 parameters: {
 route: {
 id: "_authenticated/users/$userId/profile",
 params: { userId: 1 },
 },
 }

export interface RouteData {
 path: string;
 loader?: Record<string, unknown>;
}
interface InitialEntries {
 entry: string;
 params?: Record<string, string>;
}
interface RouterParameters {
 initialEntries?: InitialEntries[];
 routes?: RouteData[];
}
const defaultRoute = [{ path: '/' }];
const defaultInitialEntries = [{ entry: '/', params: undefined }];
export function withTanstackRouter(Story: PartialStoryFn, { parameters }: StoryContext) {
 const { initialEntries = defaultInitialEntries, routes = defaultRoute } = parameters?.router || {};
 const rootRoute = createRootRoute({});
 routes.forEach((route) => {
 const { parentRoute, storyRoute } = createRouteConfig(route, Story, rootRoute);
 if (parentRoute !== rootRoute) rootRoute.addChildren([parentRoute]);
 parentRoute.addChildren([storyRoute]);
 });
 // Process entries with dynamic parameters
 const processedEntries = initialEntries.map(({ entry, params }) => {
 if (params) {
 return interpolatePath({
 path: entry,
 params
 }).interpolatedPath;
 }
 return entry;
 });
 const router = createRouter({
 history: createMemoryHistory({
 initialEntries: processedEntries,
 initialIndex: 0
 }),
 routeTree: rootRoute
 });
 return <RouterProvider router={router}></RouterProvider>;
}
declare module '@storybook/types' {
 interface Parameters {
 router?: RouterParameters;
 }
}
/**
 * Creates route configuration for Storybook stories
 * @param {RouteData} route - Full story path pattern and loader if exists
 * @param {PartialStoryFn} Story - Storybook component
 * @param {RootRoute} rootRoute - Application root route
 * @returns {Object} Contains layout and story routes
 */
export function createRouteConfig(route: RouteData, Story: PartialStoryFn, rootRoute: RootRoute) {
 const { layoutRouteId, storyRoutePath } = parseRoutePath(route.path);
 const parentRoute = layoutRouteId
 ? createRoute({
 id: layoutRouteId,
 component: Outlet,
 getParentRoute: () => rootRoute
 })
 : rootRoute;
 const storyRoute = createRoute({
 component: Story,
 path: `${storyRoutePath}`,
 getParentRoute: () => parentRoute,
 loader: () => route.loader
 });
 return { parentRoute, storyRoute };
}
/**
 * Finds the index of the last layout segment in a route.
 * @param segments - Array of route segments.
 * @returns The index of the last layout found, or -1 if no layouts are present.
 */
const findLastLayoutIndex = (segments: string[]): number => {
 let lastLayoutIndex = -1;
 for (let i = segments.length - 1; i >= 0; i--) {
 if (segments[i].startsWith('_')) {
 lastLayoutIndex = i;
 break;
 }
 }
 return lastLayoutIndex;
};
/**
 * Parses a route and separates layout and story components.
 * @param path - Route to parse.
 * @returns Object with the layout route or undefined, and the story route path.
 * @throws Error if the path is invalid.
 */
export function parseRoutePath(path: string): RouteParseResult {
 if (!path || typeof path !== 'string') {
 throw new Error('Invalid path: must be a non-empty string');
 }
 const hasTrailingSlash = path.endsWith('/');
 const pathSegments = path.split('/').filter(Boolean);
 const layoutMarkerIndex = findLastLayoutIndex(pathSegments);
 const hasLayout = layoutMarkerIndex !== -1;
 const boundaryIndex = layoutMarkerIndex + 1;
 const layoutSegments = hasLayout ? pathSegments.slice(0, boundaryIndex) : [];
 const storySegments = hasLayout ? pathSegments.slice(boundaryIndex) : [...pathSegments];
 const layoutRouteId = layoutSegments.length ? `/${layoutSegments.join('/')}` : undefined;
 let storyRoutePath = storySegments.length ? `/${storySegments.join('/')}` : '/';
 if (hasTrailingSlash && storyRoutePath !== '/') storyRoutePath += '/';
 return {
 layoutRouteId,
 storyRoutePath
 };
}

export const Basic = {
 parameters: {
 router: {
 routes: [{ path: '/dashboard' }],
 initialEntries: [{ entry: '/dashboard' }]
 }
 }
};

export const WithParams = {
 parameters: {
 router: {
 routes: [{ path: '/users/:id' }],
 initialEntries: [
 {
 entry: '/users/:id',
 params: { id: '123' }
 }
 ]
 }
 }
};

export const WithParams = {
 parameters: {
 router: {
 routes: [
 { 
 path: '/_layout/users/:id',
 loader: {
 user: {id: '123', name:'Lorem Ipsum'}
 }
 }
 ],
 initialEntries: [
 {
 entry: '/users/:id',
 params: { id: '123' }
 }
 ]
 }
 }
};

import { Decorator } from '@storybook/react';
import {
createRootRoute,
createRouter,
RouterProvider
} from '@tanstack/react-router';
export const RouterDecorator: Decorator = (Story) => {
const rootRoute = createRootRoute({
component: () => <Story />
});
const routeTree = rootRoute;
const router = createRouter({
routeTree
});
return <RouterProvider router={router} />;
};

import type { Meta, StoryObj } from '@storybook/react-vite';
import { createMemoryHistory, createRouter, RouterProvider } from '@tanstack/react-router';
import { expect, userEvent, within } from 'storybook/test';
import { routeTree } from '../../routeTree.gen';
type Args = {
 initialEntries: string[];
 initialIndex: number;
};
function Routes({ initialEntries, initialIndex }: Args) {
 const router = createRouter({
 history: createMemoryHistory({ initialEntries, initialIndex }),
 routeTree,
 });
 return <RouterProvider router={router} />;
}
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
 title: 'Routes/Enroll',
 component: Routes,
 args: {
 initialIndex: 0,
 },
} satisfies Meta<typeof Routes>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Success: Story = {
 args: {
 initialEntries: ['/enroll'],
 },
 async play({ canvasElement }) {
 const { findByRole, findByText } = within(canvasElement);
 await userEvent.type(await findByRole('textbox', { name: 'Enrollment code' }), '1234{enter}');
 await expect(await findByText('Computer successfully enrolled:')).toBeInTheDocument();
 },
};

//decorator
import type { Decorator } from '@storybook/react'
import {
 createRootRoute,
 createRouter,
 RouterProvider,
 createRoute,
 createHashHistory,
} from '@tanstack/react-router'
export const RouterDecorator: Decorator = (Story) => {
 const Root = createRootRoute({ component: () => <Story /> })
 const HomeRoute = createRoute({
 getParentRoute: () => Root,
 path: '/',
 })
 const routeTree = Root.addChildren([HomeRoute, TestRoute])
 const hashHistory = createHashHistory()
 const router = createRouter({
 routeTree,
 history: hashHistory,
 })
 return <RouterProvider router={router} />
}

import {
 createMemoryHistory,
 createRootRoute,
 createRoute,
 createRouter,
 Outlet,
 RouteIds,
 RouterProvider,
 NavigateOptions,
 RouteById,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
import { router } from '@shared/router'
export type ExtractRouteOptions<TId extends RouteIds<(typeof router)['routeTree']>> = Omit<
 NavigateOptions<typeof router, string, TId>,
 'to' | 'search' | 'params'
> & {
 search?: Partial<RouteById<(typeof router)['routeTree'], TId>['types']['fullSearchSchema']>
} & (RouteById<(typeof router)['routeTree'], TId>['types']['allParams'] extends Record<
 string,
 never
 >
 ? { params?: undefined }
 : { params: RouteById<(typeof router)['routeTree'], TId>['types']['allParams'] })
/**
 * A utility component to wrap children with a mocked router for testing purposes.
 * It allows you to specify the initial route, search parameters, and route parameters.
 *
 * @param children - The child components to be rendered within the router context.
 * @param routeId - The ID of the route to navigate to initially.
 * @param search - Optional search parameters for the route.
 * @param params - Optional route parameters.
 *
 * @returns A RouterProvider component that provides the mocked router context.
 */
export const WithRouter = <
 TRouter extends typeof router,
 const TId extends RouteIds<TRouter['routeTree']>,
>({
 children,
 routeId,
 search,
 params,
}: React.PropsWithChildren<
 {
 routeId: TId
 } & ExtractRouteOptions<TId>
>) => {
 const history = createMemoryHistory()
 const rootRoute = createRootRoute({
 component: () => (
 <>
 <Outlet />
 <TanStackRouterDevtools />
 </>
 ),
 })
 const mockedRouter = createRouter({
 history,
 routeTree: rootRoute.addChildren([
 createRoute({
 getParentRoute: () => rootRoute,
 path: routeId,
 component: () => children,
 }),
 ]),
 })
 mockedRouter.navigate({ to: routeId.replace(/\/$/, ''), search, params } as any)
 return <RouterProvider router={mockedRouter} />
}

import type { Meta, StoryObj } from '@storybook/react'
import { WithRouter } from '@shared/lib/test'
import { YourPageComponent } from './YourPageComponent'
const meta: Meta<typeof YourPageComponent> = {
 component: YourPageComponent,
}
export default meta
type Story = StoryObj<typeof YourPageComponent>
export const Example: Story = {
 render: () => (
 <WithRouter routeId="/your-route/$entityId" params={{ entityId: 'abc' }}>
 <TransformationPlansListingPage />
 </WithRouter>
 ),
}