From 08a4244f343d75c580ccfef2ce294ac9fbe80539 Mon Sep 17 00:00:00 2001
From: Codegen Bot <codegen@lambdacurry.dev>
Date: Thu, 17 Apr 2025 01:12:20 +0000
Subject: [PATCH] Fix data table storybook story to show mock data

---
 apps/docs/src/lib/storybook/react-router-stub.tsx    |  7 ++++++-
 .../data-table-router-form.stories.tsx               | 12 +++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/lib/storybook/react-router-stub.tsx b/apps/docs/src/lib/storybook/react-router-stub.tsx
index 0c40f214..901b3f02 100644
--- a/apps/docs/src/lib/storybook/react-router-stub.tsx
+++ b/apps/docs/src/lib/storybook/react-router-stub.tsx
@@ -53,8 +53,13 @@ export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorat
 
     // Get the base path (without existing query params from options)
     const basePath = initialPath.split('?')[0];
+    
     // Get the current search string from the actual browser window, if available
-    const currentWindowSearch = typeof window !== 'undefined' ? window.location.search : '';
+    // If not available, use a default search string with parameters needed for the data table
+    const currentWindowSearch = typeof window !== 'undefined' 
+      ? window.location.search 
+      : '?page=0&pageSize=10';
+    
     // Combine them for the initial entry
     const actualInitialPath = `${basePath}${currentWindowSearch}`;
 
diff --git a/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx b/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
index 0f59950f..1277a924 100644
--- a/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
+++ b/apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx
@@ -87,9 +87,13 @@ const columns: ColumnDef<User>[] = [
 // Component to display the data table with router form integration
 function DataTableRouterFormExample() {
   const loaderData = useLoaderData<DataResponse>();
+  
+  // Ensure we have data even if loaderData is undefined
   const data = loaderData?.data ?? [];
   const pageCount = loaderData?.meta.pageCount ?? 0;
 
+  console.log('DataTableRouterFormExample - loaderData:', loaderData);
+
   return (
     <div className="container mx-auto py-10">
       <h1 className="text-2xl font-bold mb-4">Users Table (React Router Form Integration)</h1>
@@ -140,9 +144,13 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
   // Add a small delay to simulate network latency
   await new Promise(resolve => setTimeout(resolve, 300));
   
-  const url = request.url ? new URL(request.url) : new URL('http://localhost');
+  // Ensure we have a valid URL object
+  const url = request?.url ? new URL(request.url) : new URL('http://localhost?page=0&pageSize=10');
   const params = url.searchParams;
 
+  console.log('handleDataFetch - URL:', url.toString());
+  console.log('handleDataFetch - Search Params:', Object.fromEntries(params.entries()));
+
   // Use our custom parsers to parse URL search parameters
   const page = dataTableRouterParsers.page.parse(params.get('page'));
   const pageSize = dataTableRouterParsers.pageSize.parse(params.get('pageSize'));
@@ -151,6 +159,8 @@ const handleDataFetch = async ({ request }: LoaderFunctionArgs) => {
   const search = dataTableRouterParsers.search.parse(params.get('search'));
   const parsedFilters = dataTableRouterParsers.filters.parse(params.get('filters'));
 
+  console.log('handleDataFetch - Parsed Parameters:', { page, pageSize, sortField, sortOrder, search, parsedFilters });
+
   // Apply filters
   let filteredData = [...users];