Add withRouter parameter to Storybook to optionally configure a rou…

…ter per-story Fix the ChangePassword stories by adding a memory router
nickgros · Jan 3, 2025 · 895200b · 895200b
1 parent e88e7b4
commit 895200b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/apps/SageAccountWeb/index.html b/apps/SageAccountWeb/index.html
@@ -41,7 +41,7 @@
 
         globalThis.global = globalThis
     </script>
-    <!-- <script>
+    <script>
         const devEndpoint = {
           REPO: 'https://repo-dev.dev.sagebase.org',
           PORTAL: 'https://portal-dev.dev.sagebase.org/',
@@ -54,7 +54,7 @@
             OVERRIDE_ENDPOINT_CONFIG: devEndpoint,
             // OVERRIDE_ENDPOINT_CONFIG: stagingEndpoint,
         }
-      </script> -->
+      </script>
     <script type="module" src="./src/index.tsx"></script>
 </head>
 <body id="body">

diff --git a/packages/synapse-react-client/src/components/ChangePassword/ChangePassword.stories.tsx b/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 => {

diff --git a/packages/synapse-react-client/src/components/StorybookComponentWrapper.tsx b/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