Merge pull request #1481 from nickgros/storybook-routing

packages/synapse-react-client/src/components/ChangePassword/ChangePassword.stories.tsx

@@ -14,6 +14,7 @@ const meta: Meta<typeof ChangePassword> = {
   component: ChangePassword,
   parameters: {
     stack: 'mock',
+    withRouter: true,
   },
   decorators: [
     Story => {

packages/synapse-react-client/src/components/RecentPublicationsGrid/RecentPublicationsGrid.stories.tsx

@@ -1,24 +1,20 @@
 import { Meta, StoryObj } from '@storybook/react'
 import RecentPublicationsGrid from './RecentPublicationsGrid'
-import { BrowserRouter } from 'react-router-dom'
 
 const meta = {
   title: 'Home Page/RecentPublicationsGrid',
   component: RecentPublicationsGrid,
   parameters: {
     chromatic: { viewports: [600, 1200] },
+    withRouter: true,
   },
 } satisfies Meta
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 export const Demo: Story = {
-  render: args => (
-    <BrowserRouter>
-      <RecentPublicationsGrid {...args} />
-    </BrowserRouter>
-  ),
+  render: args => <RecentPublicationsGrid {...args} />,
   args: {
     sql: 'SELECT * FROM syn51407023',
     buttonLink: 'Explore/Publications',

packages/synapse-react-client/src/components/StorybookComponentWrapper.tsx

@@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import dayjs from 'dayjs'
 import { ReactNode, Suspense, useEffect, useMemo, useState } from 'react'
+import { createMemoryRouter, RouterProvider } from 'react-router-dom'
 import SynapseClient, {
   getAccessTokenFromCookie,
   getAuthenticatedOn,
@@ -72,6 +73,7 @@ export function StorybookComponentWrapper(props: {
     }
     parameters: {
       stack?: SynapseStack
+      withRouter?: boolean
     }
   }
 }) {
@@ -119,7 +121,7 @@ export function StorybookComponentWrapper(props: {
     [accessToken, currentStack, storybookContext.args.isAuthenticated],
   )
 
-  return (
+  const wrappedStory = (
     <Suspense fallback={'global suspense loading...'}>
       <QueryClientProvider client={storybookQueryClient}>
         <SynapseContextProvider
@@ -135,6 +137,19 @@ export function StorybookComponentWrapper(props: {
       </QueryClientProvider>
     </Suspense>
   )
+
+  if (!storybookContext.parameters.withRouter) {
+    return wrappedStory
+  }
+
+  const router = createMemoryRouter([
+    {
+      path: '/',
+      element: wrappedStory,
+    },
+  ])
+
+  return <RouterProvider router={router} />
 }
 
 export default StorybookComponentWrapper