Update dependencies and refactor storybook decorators for React Router integration

jaruesink · jaruesink · commit fc8df8def7af · 2025-03-21T16:10:30.000-05:00
- Upgraded  from version 18 to 19 in  and .
- Replaced  with  in multiple story files to support React Router.
- Adjusted import paths for components in CSS and story files for consistency.
- Enhanced checkbox and radio group components with additional data attributes for better accessibility.
diff --git a/ai/CustomInputsProject.md b/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: {
diff --git a/apps/docs/src/main.css b/apps/docs/src/main.css
@@ -1,5 +1,5 @@
 @import 'tailwindcss';
-@source "../../../../packages/components";
+@source "../../../packages/components";
 
 :root {
   --background: hsl(0 0% 100%);
diff --git a/apps/docs/src/remix-hook-form/checkbox-custom.stories.tsx b/apps/docs/src/remix-hook-form/checkbox-custom.stories.tsx
@@ -3,14 +3,14 @@ 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 { ActionFunctionArgs } from '@remix-run/node';
-import { useFetcher } from '@remix-run/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import * as React from 'react';
+import type { ActionFunctionArgs } from 'react-router';
+import { useFetcher } from 'react-router';
 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';
 
 const formSchema = z.object({
   terms: z.boolean().refine((val) => val === true, 'You must accept the terms and conditions'),
@@ -237,11 +237,14 @@ type Story = StoryObj<typeof meta>;
 export const CustomCheckboxComponentExamples: Story = {
   name: 'Custom Checkbox Component Examples',
   decorators: [
-    withRemixStubDecorator({
-      root: {
-        Component: AllCustomComponentsExample,
-        action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
-      },
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          Component: AllCustomComponentsExample,
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
     }),
   ],
   parameters: {
@@ -506,4 +509,4 @@ const CustomErrorMessage = React.forwardRef<
       expect(successMessage).toBeInTheDocument();
     }
   },
-};
+};
diff --git a/apps/docs/src/remix-hook-form/radio-group-custom.stories.tsx b/apps/docs/src/remix-hook-form/radio-group-custom.stories.tsx
@@ -5,14 +5,14 @@ import { FormLabel, FormMessage } from '@lambdacurry/forms/ui/form';
 import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
 import { cn } from '@lambdacurry/forms/ui/utils';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import type { ActionFunctionArgs } from '@remix-run/node';
-import { Form, useFetcher } from '@remix-run/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import * as React from 'react';
+import type { ActionFunctionArgs } from 'react-router';
+import { Form, useFetcher } from 'react-router';
 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';
 
 const formSchema = z.object({
   plan: z.enum(['starter', 'pro', 'enterprise'], {
@@ -397,11 +397,13 @@ type Story = StoryObj<typeof meta>;
 export const CustomComponents: Story = {
   render: () => <CustomRadioGroupExample />,
   decorators: [
-    withRemixStubDecorator({
-      root: {
-        Component: CustomRadioGroupExample,
-        action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
-      },
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
     }),
   ],
   parameters: {
diff --git a/apps/docs/src/remix-hook-form/radio-group.stories.tsx b/apps/docs/src/remix-hook-form/radio-group.stories.tsx
@@ -1,13 +1,12 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
 import { Button } from '@lambdacurry/forms/ui/button';
-import { FormMessage } from '@lambdacurry/forms/ui/form';
 import { Label } from '@lambdacurry/forms/ui/label';
 import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
 import type { Meta, StoryObj } from '@storybook/react';
 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 { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
@@ -20,38 +19,22 @@ const AVAILABLE_SIZES = [
 ] as const;
 
 const formSchema = z.object({
-  size: z.string({
+  size: z.enum(['xs', 'sm', 'md', 'lg', 'xl'], {
     required_error: 'Please select a size',
   }),
 });
 
 type FormData = z.infer<typeof formSchema>;
 
 const ControlledRadioGroupExample = () => {
-  const fetcher = useFetcher<{ message: string; selectedSize: string }>();
+  const fetcher = useFetcher<{ message: string; selectedSize: string; errors?: Record<string, { message: string }> }>();
   const methods = useRemixForm<FormData>({
     resolver: zodResolver(formSchema),
-    defaultValues: {
-      size: '',
-    },
     fetcher,
     submitConfig: {
       action: '/',
       method: 'post',
     },
-    submitHandlers: {
-      onValid: (data) => {
-        fetcher.submit(
-          createFormData({
-            selectedSize: data.size,
-          }),
-          {
-            method: 'post',
-            action: '/',
-          },
-        );
-      },
-    },
   });
 
   return (
@@ -66,7 +49,6 @@ const ControlledRadioGroupExample = () => {
               </div>
             ))}
           </RadioGroup>
-          <FormMessage error={methods.formState.errors.size?.message} />
           <Button type="submit" className="mt-4">
             Submit
           </Button>
diff --git a/apps/docs/src/remix-hook-form/switch-custom.stories.tsx b/apps/docs/src/remix-hook-form/switch-custom.stories.tsx
@@ -3,14 +3,14 @@ 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 { ActionFunctionArgs } from '@remix-run/node';
-import { useFetcher } from '@remix-run/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import * as React from 'react';
+import type { ActionFunctionArgs } from 'react-router';
+import { useFetcher } from 'react-router';
 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';
 
 const formSchema = z.object({
   notifications: z.boolean().default(false),
@@ -184,11 +184,13 @@ const meta: Meta<typeof Switch> = {
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
-    withRemixStubDecorator({
-      root: {
-        Component: CustomSwitchExample,
-        action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
-      },
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
     }),
   ],
 } satisfies Meta<typeof Switch>;
diff --git a/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx b/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx
@@ -2,14 +2,14 @@ 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 { ActionFunctionArgs } from '@remix-run/node';
-import { useFetcher } from '@remix-run/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import * as React from 'react';
+import type { ActionFunctionArgs } from 'react-router';
+import { useFetcher } from 'react-router';
 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';
 
 const formSchema = z.object({
   username: z.string().min(3, 'Username must be at least 3 characters'),
@@ -138,11 +138,13 @@ const meta: Meta<typeof TextField> = {
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
-    withRemixStubDecorator({
-      root: {
-        Component: CustomTextFieldExample,
-        action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
-      },
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
     }),
   ],
 } satisfies Meta<typeof TextField>;
diff --git a/apps/docs/src/remix-hook-form/textarea-custom.stories.tsx b/apps/docs/src/remix-hook-form/textarea-custom.stories.tsx
@@ -2,14 +2,14 @@ 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 { ActionFunctionArgs } from '@remix-run/node';
-import { useFetcher } from '@remix-run/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import * as React from 'react';
+import type { ActionFunctionArgs } from 'react-router';
+import { useFetcher } from 'react-router';
 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';
 
 const formSchema = z.object({
   feedback: z.string().min(10, 'Feedback must be at least 10 characters'),
@@ -184,11 +184,13 @@ const meta: Meta<typeof Textarea> = {
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
-    withRemixStubDecorator({
-      root: {
-        Component: CustomTextareaExample,
-        action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
-      },
+    withReactRouterStubDecorator({
+      routes: [
+        {
+          path: '/',
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
     }),
   ],
 } satisfies Meta<typeof Textarea>;
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -73,7 +73,7 @@
   "devDependencies": {
     "@react-router/dev": "^7.0.0",
     "@types/glob": "^8.1.0",
-    "@types/react": "^18.0.0",
+    "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
diff --git a/packages/components/src/ui/checkbox-field.tsx b/packages/components/src/ui/checkbox-field.tsx
@@ -71,9 +71,13 @@ const CheckboxField = ({
               className={isCustomCheckbox ? undefined : defaultCheckboxClassName}
               checked={field.value}
               onCheckedChange={field.onChange}
+              data-slot="checkbox"
               {...props}
             >
-              <IndicatorComponent className={isCustomIndicator ? undefined : defaultIndicatorClassName}>
+              <IndicatorComponent
+                className={isCustomIndicator ? undefined : defaultIndicatorClassName}
+                data-slot="checkbox-indicator"
+              >
                 <Check className={cn('h-4 w-4', checkClassName)} />
               </IndicatorComponent>
             </CheckboxComponent>
diff --git a/packages/components/src/ui/radio-group-field.tsx b/packages/components/src/ui/radio-group-field.tsx
@@ -51,7 +51,6 @@ const RadioGroupField = ({
           {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
           <FormControl Component={components?.FormControl}>
             <RadioGroupComponent
-              ref={field.ref}
               onValueChange={field.onChange}
               defaultValue={field.value}
               className={cn('grid gap-2', radioGroupClassName)}
diff --git a/packages/components/src/ui/radio-group.tsx b/packages/components/src/ui/radio-group.tsx
@@ -44,7 +44,9 @@ const RadioGroupItem = ({ className, indicator, components, ...props }: RadioGro
       data-slot="radio-group-item"
       {...props}
     >
-      <RadioIndicator className="flex items-center justify-center">{indicatorContent}</RadioIndicator>
+      <RadioIndicator className="flex items-center justify-center" data-slot="radio-group-indicator">
+        {indicatorContent}
+      </RadioIndicator>
     </RadioItem>
   );
 };
diff --git a/packages/components/src/ui/textarea.tsx b/packages/components/src/ui/textarea.tsx
@@ -17,6 +17,7 @@ const Textarea = ({ className, CustomTextarea, ...props }: TextareaProps) => {
         className,
       )}
       {...props}
+      data-slot="textarea"
     />
   );
 };
diff --git a/yarn.lock b/yarn.lock
@@ -1791,7 +1791,7 @@ __metadata:
     "@react-router/dev": "npm:^7.0.0"
     "@react-router/node": "npm:^7.0.0"
     "@types/glob": "npm:^8.1.0"
-    "@types/react": "npm:^18.0.0"
+    "@types/react": "npm:^19.0.0"
     "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
     "@typescript-eslint/parser": "npm:^6.21.0"
     "@vitejs/plugin-react": "npm:^4.3.4"
@@ -4174,23 +4174,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.14
-  resolution: "@types/prop-types@npm:15.7.14"
-  checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^18.0.0":
-  version: 18.3.19
-  resolution: "@types/react@npm:18.3.19"
-  dependencies:
-    "@types/prop-types": "npm:*"
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/236bfe0c4748ada1a640f13573eca3e0fc7c9d847b442947adb352b0718d6d285357fd84c33336c8ffb8cbfabc0d58a43a647c7fd79857fecd61fb58ab6f7918
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:^19.0.0":
   version: 19.0.2
   resolution: "@types/react@npm:19.0.2"
