From e04965eb35be7600b56c5c3f1dca4e91897fe2b5 Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Tue, 30 Jun 2026 20:41:51 +0000
Subject: [PATCH] fix(storybook): Fix router wiring for component list stories

---
 src/stories/ComponentList.stories.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/stories/ComponentList.stories.tsx b/src/stories/ComponentList.stories.tsx
index e4cee57c..4aa39828 100644
--- a/src/stories/ComponentList.stories.tsx
+++ b/src/stories/ComponentList.stories.tsx
@@ -7,6 +7,10 @@ import {Provider} from "../client/components/Provider";
 import { generateClientApiJson, generateSourceApiJson, generateSourcePlayerJson } from "../core/tests/utils/apiFixtures.js";
 import { generateArray } from "../core/DataUtils.js";
 import { faker } from "@faker-js/faker";
+import { MsSseEvent } from "../core/Api.js";
+import { SSEProvider } from "@flamefrontend/sse-runtime-react";
+import { sseProviderOptions } from "../client/AppNext.js";
+import { withRouter, reactRouterParameters } from 'storybook-addon-remix-react-router';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = preview.meta({
@@ -15,6 +19,15 @@ const meta = preview.meta({
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'padded',
+    reactRouter: reactRouterParameters({
+      location: {
+        path: '/'
+      },
+      routing: {
+        path: '/',
+        useStoryElement: true
+      }
+    }),
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
@@ -32,7 +45,8 @@ const meta = preview.meta({
      return (<MSComponentList {...args} />) 
     },
 decorators: [
-    (Story) => (<Provider><Container maxWidth="4xl"><Story/></Container></Provider>),
+    withRouter,
+    (Story) => (<Provider><Container maxWidth="4xl"><SSEProvider<MsSseEvent> options={sseProviderOptions}><Story/></SSEProvider></Container></Provider>),
   ]
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
 });
-- 
2.51.2