Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | /**
* Storybook decorators for page-level components that call useGrackle().
*/
import type { Decorator } from "@storybook/react";
import { MemoryRouter, Routes, Route } from "react-router";
import { MockGrackleProvider } from "../mocks/MockGrackleProvider.js";
import { SidebarProvider } from "../context/SidebarContext.js";
/**
* Decorator for stories that test page-level components which call useGrackle().
* Apply via `decorators: [withMockGrackle]` in the story meta.
*/
export const withMockGrackle: Decorator = (Story) => (
<MockGrackleProvider>
<SidebarProvider>
<Story />
</SidebarProvider>
</MockGrackleProvider>
);
/**
* Creates a decorator that wraps the story in MockGrackleProvider + MemoryRouter
* with the given initial route entries and a catch-all Route for useParams().
*
* Use with `parameters: { skipRouter: true }` in the story meta to prevent
* the global preview.tsx from adding a second MemoryRouter.
*
* @example
* ```tsx
* const meta = {
* component: TaskPage,
* decorators: [withMockGrackleRoute(["/tasks/task-001"], "/tasks/:taskId")],
* parameters: { skipRouter: true },
* };
* ```
*/
export function withMockGrackleRoute(initialEntries: string[], routePath: string = "*"): Decorator {
return (Story) => (
<MockGrackleProvider>
<MemoryRouter initialEntries={initialEntries}>
<SidebarProvider>
<Routes>
<Route path={routePath} element={<Story />} />
</Routes>
</SidebarProvider>
</MemoryRouter>
</MockGrackleProvider>
);
}
|