Implement Data Table Component with ShadCN and TanStack (LC-187)

.github/workflows/test.yml

@@ -34,17 +34,6 @@ jobs:
       - name: Install Playwright Chromium
         run: npx playwright install chromium
 
-      - name: Build Storybook
-        run: yarn build-storybook
-
-      - name: Start Storybook server
-        run: yarn workspace @lambdacurry/forms-docs storybook --ci --port 6006 &
-        env:
-          NODE_OPTIONS: --max-old-space-size=4096
-
-      - name: Wait for Storybook to be ready
-        run: npx wait-on http://localhost:6006
-
       - name: Run tests
         run: yarn test
 

.vscode/settings.json

@@ -7,6 +7,7 @@
     "hookform",
     "isbot",
     "lucide",
+    "Nuqs",
     "shadcn",
     "sonner"
   ],
@@ -20,5 +21,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.biome": "explicit",
     "source.organizeImports.biome": "explicit"
-  }
+  },
+  "tailwindCSS.classAttributes": ["class", "className", "ngClass", "class:list", "wrapperClassName"]
 }

apps/docs/package.json

@@ -6,7 +6,9 @@
     "build": "storybook build",
     "build-storybook": "storybook build",
     "storybook": "storybook dev -p 6006",
-    "test": "test-storybook"
+    "serve": "http-server ./storybook-static -p 6006 -s",
+    "test": "start-server-and-test serve http://127.0.0.1:6006 'test-storybook --url http://127.0.0.1:6006'",
+    "test:local": "test-storybook"
   },
   "dependencies": {
     "@lambdacurry/forms": "*",
@@ -28,12 +30,15 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.20",
+    "http-server": "^14.1.1",
     "react": "^19.0.0",
     "react-router": "^7.0.0",
     "react-router-dom": "^7.0.0",
+    "start-server-and-test": "^2.0.11",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
     "vite": "^6.2.2",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "wait-on": "^8.0.3"
   }
 }

apps/docs/src/examples/middleware-example.tsx

@@ -0,0 +1,79 @@
+// Example of using the new middleware feature in remix-hook-form v7.0.0
+import { Form } from 'react-router';
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as zod from 'zod';
+import { TextField } from '@lambdacurry/forms/remix-hook-form';
+import { getValidatedFormData } from 'remix-hook-form/middleware';
+import type { ActionFunctionArgs } from 'react-router';
+
+// Define schema and types
+const schema = zod.object({
+  name: zod.string().min(1, "Name is required"),
+  email: zod.string().email("Invalid email format").min(1, "Email is required"),
+});
+
+type FormData = zod.infer<typeof schema>;
+const resolver = zodResolver(schema);
+
+// Action function using the new middleware
+export const action = async ({ context }: ActionFunctionArgs) => {
+  // Use the middleware to extract and validate form data
+  const { errors, data, receivedValues } = await getValidatedFormData<FormData>(
+    context,
+    resolver
+  );
+
+  if (errors) {
+    return { errors, defaultValues: receivedValues };
+  }
+
+  // Process the validated data
+  console.log('Processing data:', data);
+
+  return { success: true, data };
+};
+
+// Component
+export default function MiddlewareExample() {
+  const {
+    handleSubmit,
+    formState: { errors },
+    register,
+  } = useRemixForm<FormData>({
+    mode: "onSubmit",
+    resolver,
+  });
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Remix Hook Form v7 Middleware Example</h1>
+
+      <RemixFormProvider>
+        <Form method="POST" onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <TextField
+              label="Name"
+              {...register("name")}
+              error={errors.name?.message}
+            />
+
+            <TextField
+              label="Email"
+              type="email"
+              {...register("email")}
+              error={errors.email?.message}
+            />
+
+            <button 
+              type="submit"
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            >
+              Submit
+            </button>
+          </div>
+        </Form>
+      </RemixFormProvider>
+    </div>
+  );
+}

apps/docs/src/examples/root-example.tsx

@@ -0,0 +1,23 @@
+// Example of setting up the middleware in root.tsx
+import { unstable_extractFormDataMiddleware } from 'remix-hook-form/middleware';
+import { Outlet } from 'react-router-dom';
+
+// Export the middleware for React Router 7
+export const unstable_middleware = [unstable_extractFormDataMiddleware()];
+
+export default function Root() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Remix Hook Form v7 Example</title>
+      </head>
+      <body>
+        <div className="container mx-auto">
+          <Outlet />
+        </div>
+      </body>
+    </html>
+  );
+}

apps/docs/src/lib/storybook/react-router-stub.tsx

@@ -7,7 +7,8 @@ import {
   type LoaderFunction,
   type MetaFunction,
   type NonIndexRouteObject,
-  createRoutesStub,
+  RouterProvider,
+  createMemoryRouter,
 } from 'react-router-dom';
 
 export type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
@@ -36,21 +37,49 @@ interface StubIndexRouteObject
 
 interface RemixStubOptions {
   routes: StubRouteObject[];
+  initialPath?: string;
 }
 
 export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorator => {
-  const { routes } = options;
-  return (Story) => {
-    // Map routes to include Story component as fallback if no Component provided
+  const { routes, initialPath = '/' } = options;
+  // This outer function runs once when Storybook loads the story meta
+
+  return (Story, context) => {
+    // This inner function runs when the story component actually renders
     const mappedRoutes = routes.map((route) => ({
       ...route,
-      Component: route.Component ?? (() => <Story />),
+      Component: route.Component ?? (() => <Story {...context.args} />),
     }));
 
-    // Use more specific type assertion to fix the incompatibility
-    // @ts-ignore - Types from createRoutesStub are incompatible but the code works at runtime
-    const RemixStub = createRoutesStub(mappedRoutes);
+    // 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
+    // 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}`;
+
+    // Create a memory router, initializing it with the path derived from the window's search params
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    const router = createMemoryRouter(mappedRoutes as any, {
+      initialEntries: [actualInitialPath], // Use the path combined with window.location.search
+    });
 
-    return <RemixStub initialEntries={['/']} />;
+    return <RouterProvider router={router} />;
   };
 };
+
+/**
+ * A decorator that provides URL state management for stories
+ * Use this when you need URL query parameters in your stories
+ */
+export const withURLState = (initialPath = '/'): Decorator => {
+  return withReactRouterStubDecorator({
+    routes: [{ path: '/' }],
+    initialPath,
+  });
+};