(BETA) LC-173: Migrate LambdaCurry/forms to ShadCN tailwind V4

.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
 

.gitignore

@@ -179,4 +179,7 @@ dist
 .turbo
 *storybook.log
 
-storybook-static
+storybook-static
+
+# React Router v7
+.react-router/

.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"]
 }

.yarnrc.yml

@@ -1 +1 @@
-nodeLinker: node-modules
+nodeLinker: node-modules

ai/CustomInputsProject.md

@@ -484,7 +484,8 @@ import { expect, userEvent } from '@storybook/test';
 import * as React from 'react';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
-import { withRemixStubDecorator } from '../lib/storybook/remix-stub';
+
+import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
 // Custom checkbox component
 const CustomCheckbox = React.forwardRef<
@@ -597,6 +598,18 @@ const handleFormSubmission = async (request: Request) => {
 // Story definition
 export const CustomComponents: Story = {
   render: () => <CustomCheckboxExample />,
+  decorators: [
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          action: async ({ request }: ActionFunctionArgs) => {
+            return handleFormSubmission(request);
+          },
+        },
+      ],
+    }),
+  ],
   parameters: {
     docs: {
       description: {

apps/docs/.storybook/main.ts

@@ -1,7 +1,5 @@
 import { dirname, join } from 'node:path';
 import type { StorybookConfig } from '@storybook/react-vite';
-import { mergeConfig } from 'vite';
-import viteConfig from '../vite.config';
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -21,7 +19,9 @@ const config: StorybookConfig = {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
-  viteFinal: (config) => {
+  viteFinal: async (config) => {
+    const { mergeConfig } = await import('vite');
+    const viteConfig = await import('../vite.config.mjs');
     return mergeConfig(config, viteConfig);
   },
 };

apps/docs/package.json

@@ -6,35 +6,39 @@
     "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": "*",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "storybook": "^8.4.7"
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-links": "^8.6.7",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-vite": "^8.6.7",
+    "@storybook/test": "^8.6.7",
+    "storybook": "^8.6.7"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.15.1",
-    "@remix-run/testing": "^2.15.1",
-    "@storybook/test-runner": "^0.20.1",
+    "@react-router/dev": "^7.0.0",
+    "@storybook/test-runner": "^0.22.0",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "tailwindcss": "^3.4.17",
+    "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": "^5.4.11",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite": "^6.2.2",
+    "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

@@ -0,0 +1,85 @@
+import type { Decorator } from '@storybook/react';
+import type { ComponentType } from 'react';
+import {
+  type ActionFunction,
+  type IndexRouteObject,
+  type LinksFunction,
+  type LoaderFunction,
+  type MetaFunction,
+  type NonIndexRouteObject,
+  RouterProvider,
+  createMemoryRouter,
+} from 'react-router-dom';
+
+export type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
+
+interface StubNonIndexRouteObject
+  extends Omit<NonIndexRouteObject, 'loader' | 'action' | 'element' | 'errorElement' | 'children'> {
+  loader?: LoaderFunction;
+  action?: ActionFunction;
+  children?: StubRouteObject[];
+  meta?: MetaFunction;
+  links?: LinksFunction;
+  // biome-ignore lint/suspicious/noExplicitAny: allow any here
+  Component?: ComponentType<any>;
+}
+
+interface StubIndexRouteObject
+  extends Omit<IndexRouteObject, 'loader' | 'action' | 'element' | 'errorElement' | 'children'> {
+  loader?: LoaderFunction;
+  action?: ActionFunction;
+  children?: StubRouteObject[];
+  meta?: MetaFunction;
+  links?: LinksFunction;
+  // biome-ignore lint/suspicious/noExplicitAny: allow any here
+  Component?: ComponentType<any>;
+}
+
+interface RemixStubOptions {
+  routes: StubRouteObject[];
+  initialPath?: string;
+}
+
+export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorator => {
+  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 {...context.args} />),
+    }));
+
+    // 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 <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,
+  });
+};