feat: medusa-forms updates

apps/docs/.storybook/main.ts

@@ -12,8 +12,7 @@ const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath("@storybook/addon-docs")
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

apps/docs/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-vite';
 import '../src/main.css';
 
 const preview: Preview = {

apps/docs/package.json

@@ -15,23 +15,17 @@
     "@hookform/resolvers": "^3.9.1",
     "@lambdacurry/forms": "*",
     "@lambdacurry/medusa-forms": "*",
-    "@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/addon-links": "^9.0.1",
+    "@storybook/react-vite": "^9.0.1",
     "react": "^19.0.0",
     "react-hook-form": "^7.51.0",
-    "react-router": "^7.0.0",
-    "react-router-dom": "^7.0.0",
+    "react-router": "^7.6.1",
     "remix-hook-form": "^7.0.1",
-    "storybook": "^8.6.7"
+    "storybook": "^9.0.1"
   },
   "devDependencies": {
-    "@medusajs/ui-preset": "^2.8.3",
     "@react-router/dev": "^7.0.0",
+    "@storybook/addon-docs": "^9.0.1",
     "@storybook/test-runner": "^0.22.0",
     "@storybook/testing-library": "^0.2.2",
     "@tailwindcss/postcss": "^4.1.8",

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

@@ -1,6 +1,6 @@
+import { Outlet } from 'react-router';
 // 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()];

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

@@ -1,38 +1,25 @@
-import type { Decorator } from '@storybook/react';
+import type { Decorator } from '@storybook/react-vite';
 import type { ComponentType } from 'react';
 import {
   type ActionFunction,
-  type IndexRouteObject,
   type LinksFunction,
   type LoaderFunction,
   type MetaFunction,
-  type NonIndexRouteObject,
-  RouterProvider,
-  createMemoryRouter,
-} from 'react-router-dom';
+  createRoutesStub,
+} from 'react-router';
 
-export type StubRouteObject = StubIndexRouteObject | StubNonIndexRouteObject;
-
-interface StubNonIndexRouteObject
-  extends Omit<NonIndexRouteObject, 'loader' | 'action' | 'element' | 'errorElement' | 'children'> {
+export interface StubRouteObject {
+  path?: string;
+  index?: boolean;
   loader?: LoaderFunction;
   action?: ActionFunction;
-  children?: StubRouteObject[];
   meta?: MetaFunction;
   links?: LinksFunction;
-  // biome-ignore lint/suspicious/noExplicitAny: allow any here
+  // biome-ignore lint/suspicious/noExplicitAny: allow any here for Storybook compatibility
   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>;
+  // biome-ignore lint/suspicious/noExplicitAny: allow any here for Storybook compatibility
+  errorElement?: any;
 }
 
 interface RemixStubOptions {
@@ -42,34 +29,28 @@ interface RemixStubOptions {
 
 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
+    // Map routes to include the Story component if no Component is provided
     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';
-
+    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
-    });
+    // Use React Router's official createRoutesStub
+    const Stub = createRoutesStub(mappedRoutes);
 
-    return <RouterProvider router={router} />;
+    return <Stub initialEntries={[actualInitialPath]} />;
   };
 };
 

apps/docs/src/main.css

@@ -8,7 +8,7 @@
   --foreground: hsl(222.2 47.4% 11.2%);
 
   --muted: hsl(210 40% 96.1%);
-  --muted-foreground: hsl(215, 83%, 57%);
+  --muted-foreground: hsl(215.4 16.3% 46.9%);
 
   --popover: hsl(0 0% 100%);
   --popover-foreground: hsl(222.2 47.4% 11.2%);

apps/docs/src/medusa-forms/ControlledInput.stories.tsx

@@ -1,5 +1,5 @@
 import { ControlledInput } from '@lambdacurry/medusa-forms/controlled/ControlledInput';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FormProvider, useForm } from 'react-hook-form';
 
 const meta = {

apps/docs/src/remix-hook-form/checkbox-custom.stories.tsx

@@ -3,8 +3,8 @@ import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
 import type { FormLabel, FormMessage } from '@lambdacurry/forms/remix-hook-form/form';
 import { Button } from '@lambdacurry/forms/ui/button';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { useFetcher } from 'react-router';

apps/docs/src/remix-hook-form/checkbox-list.stories.tsx

@@ -2,8 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { FormMessage } from '@lambdacurry/forms/ui/form';
-import type { Meta, StoryContext, StoryObj } from '@storybook/react';
-import { expect, userEvent } from '@storybook/test';
+import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent } from 'storybook/test';
 import type {} from '@testing-library/dom';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';

apps/docs/src/remix-hook-form/checkbox.stories.tsx

@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
 import { Button } from '@lambdacurry/forms/ui/button';
-import type { Meta, StoryContext, StoryObj } from '@storybook/react';
-import { expect, userEvent } from '@storybook/test';
+import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent } from 'storybook/test';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';

apps/docs/src/remix-hook-form/data-table-router-form.stories.tsx

@@ -1,7 +1,7 @@
 import { DataTableRouterForm } from '@lambdacurry/forms/remix-hook-form/data-table-router-form';
 import { dataTableRouterParsers } from '@lambdacurry/forms/remix-hook-form/data-table-router-parsers';
 import { DataTableColumnHeader } from '@lambdacurry/forms/ui/data-table/data-table-column-header';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ColumnDef } from '@tanstack/react-table';
 import { type LoaderFunctionArgs, useLoaderData } from 'react-router';
 import { z } from 'zod';

apps/docs/src/remix-hook-form/date-picker.stories.tsx

@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DatePicker } from '@lambdacurry/forms/remix-hook-form/date-picker';
 import { Button } from '@lambdacurry/forms/ui/button';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';

apps/docs/src/remix-hook-form/dropdown-menu-select.stories.tsx

@@ -2,8 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { DropdownMenuSelect } from '@lambdacurry/forms/remix-hook-form/dropdown-menu-select';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { DropdownMenuSelectItem } from '@lambdacurry/forms/ui/dropdown-menu-select-field';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, screen, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, screen, userEvent, within } from 'storybook/test';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';

apps/docs/src/remix-hook-form/otp-input.stories.tsx

@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { OTPInput } from '@lambdacurry/forms/remix-hook-form/otp-input';
 import { Button } from '@lambdacurry/forms/ui/button';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';

apps/docs/src/remix-hook-form/radio-group-custom.stories.tsx

@@ -5,8 +5,8 @@ import { Button } from '@lambdacurry/forms/ui/button';
 import { FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
 import { cn } from '@lambdacurry/forms/ui/utils';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { Form, useFetcher } from 'react-router';

apps/docs/src/remix-hook-form/radio-group.stories.tsx

@@ -3,8 +3,8 @@ import { RadioGroup, type RadioOption } from '@lambdacurry/forms/remix-hook-form
 import { RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group-item';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { Label } from '@lambdacurry/forms/ui/label';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import type { ComponentPropsWithoutRef, ComponentType } from 'react';
 import { type ActionFunctionArgs, Form, useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';

apps/docs/src/remix-hook-form/switch-custom.stories.tsx

@@ -3,8 +3,8 @@ import { Switch } from '@lambdacurry/forms/remix-hook-form/switch';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { useFetcher } from 'react-router';

apps/docs/src/remix-hook-form/switch.stories.tsx

@@ -1,8 +1,8 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Switch } from '@lambdacurry/forms/remix-hook-form/switch';
 import { Button } from '@lambdacurry/forms/ui/button';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';

apps/docs/src/remix-hook-form/text-field-custom.stories.tsx

@@ -2,8 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import type * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { useFetcher } from 'react-router';

apps/docs/src/remix-hook-form/text-field.stories.tsx

@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field';
 import { Button } from '@lambdacurry/forms/ui/button';
-import type { Meta, StoryContext, StoryObj } from '@storybook/react';
-import { expect, userEvent } from '@storybook/test';
+import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
+import { expect, userEvent } from 'storybook/test';
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 

apps/docs/src/remix-hook-form/textarea-custom.stories.tsx

@@ -2,8 +2,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Textarea } from '@lambdacurry/forms/remix-hook-form/textarea';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { FormControl, FormItem, FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import * as React from 'react';
 import type { ActionFunctionArgs } from 'react-router';
 import { useFetcher } from 'react-router';

apps/docs/src/remix-hook-form/textarea.stories.tsx

@@ -1,10 +1,10 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Textarea } from '@lambdacurry/forms/remix-hook-form/textarea';
 import { Button } from '@lambdacurry/forms/ui/button';
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { RemixFormProvider, createFormData, getValidatedFormData, useRemixForm } from 'remix-hook-form';
+import { expect, userEvent, within } from 'storybook/test';
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
@@ -43,7 +43,7 @@ const ControlledTextareaExample = () => {
 
   return (
     <RemixFormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit}>
+      <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="space-y-4">
           <Textarea name="message" label="Your message" placeholder="Enter your message here..." rows={5} />
           <Button type="submit" className="mt-4">
@@ -56,7 +56,7 @@ const ControlledTextareaExample = () => {
             </div>
           )}
         </div>
-      </form>
+      </fetcher.Form>
     </RemixFormProvider>
   );
 };

apps/docs/vite.config.mjs

@@ -16,11 +16,6 @@ export default defineConfig({
       '@lambdacurry/medusa-forms/lib': path.resolve(__dirname, '../../packages/medusa-forms/lib'),
     },
   },
-  build: {
-    rollupOptions: {
-      external: ['react-router', 'react-router-dom'],
-    },
-  },
   plugins: [tailwindcss()],
   server: {
     historyApiFallback: true,

package.json

@@ -24,8 +24,7 @@
     "turbo": "^2.3.3"
   },
   "dependencies": {
-    "@changesets/cli": "^2.27.11",
-    "@medusajs/ui-preset": "^2.8.3"
+    "@changesets/cli": "^2.27.11"
   },
   "packageManager": "yarn@4.9.1"
 }

packages/components/package.json

@@ -64,8 +64,7 @@
     "next-themes": "^0.4.4",
     "react-day-picker": "8.10.1",
     "react-hook-form": "^7.53.1",
-    "react-router": "^7.0.0",
-    "react-router-dom": "^7.0.0",
+    "react-router": "^7.6.1",
     "remix-hook-form": "7.0.1",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",

packages/components/src/remix-hook-form/data-table-router-form.tsx

@@ -12,7 +12,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useNavigation } from 'react-router-dom';
+import { useNavigation } from 'react-router';
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';