-
-
Save pourdaavar/a46afaec794726844c9611f40f2cf60f to your computer and use it in GitHub Desktop.
Storybook fake Tanstack router
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* eslint-disable react-refresh/only-export-components */ | |
| import { | |
| createMemoryHistory, | |
| createRootRoute, | |
| createRoute, | |
| createRouter, | |
| useRouterState, | |
| type NotFoundRouteProps, | |
| } from "@tanstack/react-router"; | |
| import { createContext, useContext, type ReactNode } from "react"; | |
| //#region Dummy story router | |
| function RenderStory() { | |
| const storyFn = useContext(CurrentStoryContext); | |
| if (!storyFn) { | |
| throw new Error("Storybook root not found"); | |
| } | |
| return storyFn(); | |
| } | |
| export const CurrentStoryContext = createContext<(() => ReactNode) | undefined>(undefined); | |
| function NotFoundComponent(_props: NotFoundRouteProps) { | |
| const state = useRouterState(); | |
| return ( | |
| <div> | |
| <i>Warning:</i> Simulated route not found for path <code>{state.location.href}</code> | |
| </div> | |
| ); | |
| } | |
| const storyPath = "/__story__"; | |
| const storyRoute = createRoute({ | |
| path: storyPath, | |
| getParentRoute: () => rootRoute, | |
| component: RenderStory, | |
| }); | |
| const rootRoute = createRootRoute({ | |
| notFoundComponent: NotFoundComponent, | |
| }); | |
| rootRoute.addChildren([storyRoute]); | |
| export const storyRouter = createRouter({ | |
| history: createMemoryHistory({ initialEntries: [storyPath] }), | |
| routeTree: rootRoute, | |
| }); | |
| //#endregion | |
| export function storyRouterDecorator(storyFn: () => ReactNode) { | |
| return ( | |
| <CurrentStoryContext.Provider value={storyFn}> | |
| <RouterProvider router={storyRouter} /> | |
| </CurrentStoryContext.Provider> | |
| ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment