Implement DataTableRouterForm and remove Input component (LC-187)

.gitignore

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

.yarnrc.yml

@@ -1 +1,3 @@
-nodeLinker: node-modules
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.7.0.cjs

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

@@ -10,31 +10,30 @@
   },
   "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",
+    "react": "^19.0.0",
+    "react-router": "^7.0.0",
+    "react-router-dom": "^7.0.0",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
-    "vite": "^5.4.11",
+    "vite": "^6.2.2",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

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

@@ -1,8 +1,14 @@
-import type { ActionFunction, LinksFunction, LoaderFunction, MetaFunction } from '@remix-run/node';
-import { createRemixStub } from '@remix-run/testing';
 import type { Decorator } from '@storybook/react';
 import type { ComponentType } from 'react';
-import type { IndexRouteObject, NonIndexRouteObject } from 'react-router-dom';
+import {
+  type ActionFunction,
+  type IndexRouteObject,
+  type LinksFunction,
+  type LoaderFunction,
+  type MetaFunction,
+  type NonIndexRouteObject,
+  createRoutesStub,
+} from 'react-router-dom';
 
 export type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
 
@@ -29,43 +35,22 @@ interface StubIndexRouteObject
 }
 
 interface RemixStubOptions {
-  root?: {
-    // biome-ignore lint/suspicious/noExplicitAny: allow any here
-    Component?: ComponentType<any>;
-    loader?: LoaderFunction;
-    action?: ActionFunction;
-    meta?: MetaFunction;
-    links?: LinksFunction;
-  };
-  routes?: StubRouteObject[];
+  routes: StubRouteObject[];
 }
 
-export const withRemixStubDecorator = (options: RemixStubOptions = {}): Decorator => {
+export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorator => {
+  const { routes } = options;
   return (Story) => {
-    const { root, routes = [] } = options;
-
     // Map routes to include Story component as fallback if no Component provided
     const mappedRoutes = routes.map((route) => ({
       ...route,
-      Component: route.Component ? route.Component : () => <Story />,
+      Component: route.Component ?? (() => <Story />),
     }));
-    const rootRoute: StubRouteObject = {
-      id: 'root',
-      path: '/',
-      ...root,
-      Component: root?.Component ? root.Component : () => <Story />,
-      children:
-        mappedRoutes.length > 0
-          ? mappedRoutes.map((route) => ({
-              action: () => null,
-              ...route,
-            }))
-          : undefined,
-    };
 
-    const RemixStub = createRemixStub([rootRoute]);
+    // 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);
 
-    // You can also provide hydrationData if needed
     return <RemixStub initialEntries={['/']} />;
   };
 };

apps/docs/src/main.css

@@ -1,81 +1,108 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@source "../../../packages/components";
 
 :root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 47.4% 11.2%;
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(222.2 47.4% 11.2%);
 
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
+  --muted: hsl(210 40% 96.1%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
 
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 47.4% 11.2%;
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(222.2 47.4% 11.2%);
 
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
+  --border: hsl(214.3 31.8% 91.4%);
+  --input: hsl(214.3 31.8% 91.4%);
 
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 47.4% 11.2%;
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(222.2 47.4% 11.2%);
 
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
+  --primary: hsl(222.2 47.4% 11.2%);
+  --primary-foreground: hsl(210 40% 98%);
 
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
+  --secondary: hsl(210 40% 96.1%);
+  --secondary-foreground: hsl(222.2 47.4% 11.2%);
 
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
+  --accent: hsl(210 40% 96.1%);
+  --accent-foreground: hsl(222.2 47.4% 11.2%);
 
-  --destructive: 0 100% 50%;
-  --destructive-foreground: 210 40% 98%;
+  --destructive: hsl(0 100% 50%);
+  --destructive-foreground: hsl(210 40% 98%);
 
-  --ring: 215 20.2% 65.1%;
+  --ring: hsl(215 20.2% 65.1%);
 
   --radius: 0.5rem;
 }
 
-@layer base {
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
+.dark {
+  --background: hsl(224 71% 4%);
+  --foreground: hsl(213 31% 91%);
 
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
+  --muted: hsl(223 47% 11%);
+  --muted-foreground: hsl(215.4 16.3% 56.9%);
 
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
+  --accent: hsl(216 34% 17%);
+  --accent-foreground: hsl(210 40% 98%);
 
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
+  --popover: hsl(224 71% 4%);
+  --popover-foreground: hsl(215 20.2% 65.1%);
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+  --border: hsl(216 34% 17%);
+  --input: hsl(216 34% 17%);
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+  --card: hsl(224 71% 4%);
+  --card-foreground: hsl(213 31% 91%);
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+  --primary: hsl(210 40% 98%);
+  --primary-foreground: hsl(222.2 47.4% 1.2%);
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+  --secondary: hsl(222.2 47.4% 11.2%);
+  --secondary-foreground: hsl(210 40% 98%);
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+  --destructive: hsl(0 63% 31%);
+  --destructive-foreground: hsl(210 40% 98%);
 
-    --ring: 216 34% 17%;
+  --ring: hsl(216 34% 17%);
 
-    --radius: 0.5rem;
-  }
+  --radius: 0.5rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-ring: var(--ring);
 }
 
 @layer base {
   * {
-    @apply border-border;
+    @apply border-[var(--color-border)];
   }
   body {
-    @apply bg-background text-foreground;
-    font-feature-settings: 'rlig' 1, 'calt' 1;
+    @apply bg-[var(--color-background)] text-[var(--color-foreground)];
   }
 }