[UI v2] feat: Adds router and react-query storybook decorator (#16469)

ui-v2/src/storybook/utils/index.ts

@@ -0,0 +1,2 @@
+export { routerDecorator } from "./router-decorator";
+export { reactQueryDecorator } from "./react-query-decorator";

ui-v2/src/storybook/utils/react-query-decorator.tsx

@@ -0,0 +1,26 @@
+import { StoryFn } from "@storybook/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+const queryClient = new QueryClient();
+
+/**
+ *
+ * @example
+ * ```ts
+ * import { reactQueryDecorator } from '@/storybook/utils'
+ *
+ * const meta: Meta<typeof MyComponent> = {
+ * 	title: "UI/MyComponent",
+ * 	decorators: [reactQueryDecorator],
+ * 	component: MyComponent,
+ * };
+ *
+ * export default meta;
+ */
+export const reactQueryDecorator = (Story: StoryFn) => (
+	<QueryClientProvider client={queryClient}>
+		<Story />
+		<ReactQueryDevtools />
+	</QueryClientProvider>
+);

ui-v2/src/storybook/utils/router-decorator.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable react-refresh/only-export-components */
+import {
+	RouterProvider,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	useRouterState,
+} from "@tanstack/react-router";
+import { type ReactNode, createContext, useContext } 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() {
+	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
+
+/**
+ *
+ * @example
+ * ```ts
+ * import { routerDecorator } from '@/storybook/utils'
+ *
+ * const meta: Meta<typeof MyComponent> = {
+ * 	title: "UI/MyComponent",
+ * 	decorators: [routerDecorator],
+ * 	component: MyComponent,
+ * };
+ *
+ * export default meta;
+ */
+export function routerDecorator(storyFn: () => ReactNode) {
+	return (
+		<CurrentStoryContext.Provider value={storyFn}>
+			{/** @ts-expect-error Ignoring for now to get decorator working */}
+			<RouterProvider router={storyRouter} />
+		</CurrentStoryContext.Provider>
+	);
+}