feat: add measurement field to text field stories and enhance TextField component

- Introduced a new measurement field in the ControlledTextFieldExample with validation.
- Updated TextField component to support prefix and suffix props with improved structure.
- Refactored FieldPrefix and FieldSuffix components for better styling and accessibility.
- Consolidated story examples into a single export for clarity and maintainability.

Author: jaruesink

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

@@ -14,6 +14,7 @@ const formSchema = z.object({
   username: z.string().min(3, 'Username must be at least 3 characters'),
   price: z.string().min(1, 'Price is required'),
   email: z.string().email('Invalid email address'),
+  measurement: z.string().min(1, 'Measurement is required'),
 });
 
 type FormData = z.infer<typeof formSchema>;
@@ -30,6 +31,7 @@ const ControlledTextFieldExample = () => {
       username: INITIAL_USERNAME,
       price: '10.00',
       email: 'user@example.com',
+      measurement: '10',
     },
     fetcher,
     submitConfig: {
@@ -43,21 +45,21 @@ const ControlledTextFieldExample = () => {
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="space-y-6">
           <TextField name="username" label="Username" description="Enter a unique username" />
-          
-          <TextField 
-            name="price" 
-            label="Price" 
-            description="Enter the price" 
-            prefix="$" 
-          />
-          
-          <TextField 
-            name="email" 
-            label="Email" 
-            description="Enter your email address" 
-            suffix="@example.com" 
+
+          <TextField name="price" label="Price" description="Enter the price" prefix="$" />
+
+          <TextField name="email" label="Email" description="Enter your email address" suffix="@example.com" />
+
+          <TextField
+            type="number"
+            name="measurement"
+            step={0.1}
+            label="Measurement"
+            description="Enter a measurement"
+            prefix="~"
+            suffix="cm"
           />
-          
+
           <Button type="submit" className="mt-4">
             Submit
           </Button>
@@ -101,20 +103,7 @@ const meta: Meta<typeof TextField> = {
   component: TextField,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
-  decorators: [
-    withRemixStubDecorator({
-      root: {
-        Component: ControlledTextFieldExample,
-      },
-      routes: [
-        {
-          path: '/username',
-          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
-        },
-      ],
-    }),
-  ],
-} satisfies Meta<typeof TextField>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -168,41 +157,25 @@ const testValidSubmission = async ({ canvas }: StoryContext) => {
   expect(successMessage).toBeInTheDocument();
 };
 
-// Stories
-export const Tests: Story = {
+// Single story that contains all variants
+export const Examples: Story = {
   play: async (storyContext) => {
     testDefaultValues(storyContext);
     await testInvalidSubmission(storyContext);
     await testUsernameTaken(storyContext);
     await testValidSubmission(storyContext);
   },
+  decorators: [
+    withRemixStubDecorator({
+      root: {
+        Component: ControlledTextFieldExample,
+      },
+      routes: [
+        {
+          path: '/username',
+          action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
+        },
+      ],
+    }),
+  ],
 };
-
-// Additional stories to showcase prefix and suffix
-export const WithPrefix: Story = {
-  name: 'With Prefix',
-  args: {
-    name: 'price',
-    label: 'Price',
-    prefix: '$',
-  },
-};
-
-export const WithSuffix: Story = {
-  name: 'With Suffix',
-  args: {
-    name: 'email',
-    label: 'Email',
-    suffix: '@example.com',
-  },
-};
-
-export const WithBoth: Story = {
-  name: 'With Prefix and Suffix',
-  args: {
-    name: 'measurement',
-    label: 'Measurement',
-    prefix: '~',
-    suffix: 'cm',
-  },
-};

packages/components/src/ui/text-field.tsx

@@ -1,4 +1,3 @@
-// biome-ignore lint/style/noNamespaceImport: prevents React undefined errors when exporting as a component library
 import * as React from 'react';
 import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 import {
@@ -13,69 +12,94 @@ import {
 import { TextInput } from './text-input';
 import { cn } from './utils';
 
-export const FieldPrefix = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+export const FieldPrefix = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
   return (
-    <span className={cn("whitespace-nowrap shadow-sm font-bold rounded-md text-base flex items-center px-2.5 pr-5 -mr-2.5 bg-gray-50 text-gray-500", className)}>
-      {children}
-    </span>
+    <div
+      className={cn(
+        'flex h-full text-base items-center pl-3 pr-0 text-gray-500 group-focus-within:text-gray-700 transition-colors duration-200 border-y border-l border-input rounded-l-md bg-background',
+        className,
+      )}
+    >
+      <span className="whitespace-nowrap">{children}</span>
+    </div>
   );
 };
 
-export const FieldSuffix = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+export const FieldSuffix = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
   return (
-    <span className={cn("whitespace-nowrap shadow-sm font-bold rounded-md text-base flex items-center px-2.5 pl-5 -ml-2.5 bg-gray-50 text-gray-500", className)}>
-      {children}
-    </span>
+    <div
+      className={cn(
+        'flex h-full text-base items-center pr-3 pl-0 text-gray-500 group-focus-within:text-gray-700 transition-colors duration-200 border-y border-r border-input rounded-r-md bg-background',
+        className,
+      )}
+    >
+      <span className="whitespace-nowrap">{children}</span>
+    </div>
   );
 };
 
-export interface TextFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'> {
-  control?: Control<TFieldValues>;
-  name: TName;
+// Create a specific interface for the input props that includes className explicitly
+type TextInputProps = React.ComponentPropsWithRef<typeof TextInput> & {
+  control?: Control<FieldValues>;
+  name: FieldPath<FieldValues>;
   label?: string;
   description?: string;
   components?: Partial<FieldComponents>;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
-}
+  className?: string;
+};
 
-export const TextField = React.forwardRef<HTMLDivElement, TextFieldProps>(
+export const TextField = React.forwardRef<HTMLDivElement, TextInputProps>(
   ({ control, name, label, description, className, components, prefix, suffix, ...props }, ref) => {
     return (
       <FormField
         control={control}
         name={name}
-        render={({ field, fieldState }) => (
-          <FormItem className={className} ref={ref}>
-            {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
-            <FormControl Component={components?.FormControl}>
-              <div className={cn("flex items-stretch relative", {
-                "field__input--with-prefix": prefix,
-                "field__input--with-suffix": suffix,
-              })}>
-                {prefix && <FieldPrefix>{prefix}</FieldPrefix>}
-                <TextInput 
-                  {...field} 
-                  {...props} 
-                  ref={field.ref} 
-                  className={cn(props.className, {
-                    "z-10": prefix || suffix,
-                    "rounded-l-none": prefix,
-                    "rounded-r-none": suffix,
+        render={({ field, fieldState }) => {
+          return (
+            <FormItem className={className} ref={ref}>
+              {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
+              <FormControl Component={components?.FormControl}>
+                <div
+                  className={cn('flex group transition-all duration-200 rounded-md', {
+                    'field__input--with-prefix': prefix,
+                    'field__input--with-suffix': suffix,
+                    'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background': true,
                   })}
-                />
-                {suffix && <FieldSuffix>{suffix}</FieldSuffix>}
-              </div>
-            </FormControl>
-            {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
-            {fieldState.error && (
-              <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>
-            )}
-          </FormItem>
-        )}
+                >
+                  {prefix && <FieldPrefix>{prefix}</FieldPrefix>}
+                  <TextInput
+                    {...field}
+                    {...props}
+                    ref={field.ref}
+                    className={cn('focus-visible:ring-0 focus-visible:ring-offset-0', {
+                      'rounded-l-none border-l-0': prefix,
+                      'rounded-r-none border-r-0': suffix,
+                    })}
+                  />
+                  {suffix && <FieldSuffix>{suffix}</FieldSuffix>}
+                </div>
+              </FormControl>
+              {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
+              {fieldState.error && (
+                <FormMessage Component={components?.FormMessage}>{fieldState.error.message}</FormMessage>
+              )}
+            </FormItem>
+          );
+        }}
       />
     );
   },