Merge pull request #138 from lambda-curry/codegen-bot/keyboard-navigation-select-1758083721

Author: jaruesink

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

@@ -37,11 +37,7 @@ const ControlledPhoneInputExample = () => {
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="grid gap-8">
-          <PhoneInput
-            name="usaPhone"
-            label="Phone Number"
-            description="Enter a US phone number"
-          />
+          <PhoneInput name="usaPhone" label="Phone Number" description="Enter a US phone number" />
           <PhoneInput
             name="internationalPhone"
             label="International Phone Number"

apps/docs/src/remix-hook-form/select.test.tsx

@@ -1,80 +1,79 @@
+import type { StoryContext } from '@storybook/react';
 import { expect } from '@storybook/test';
 import { userEvent, within } from '@storybook/testing-library';
-import { StoryContext } from '@storybook/react';
 
 // Test selecting a US state
 export const testUSStateSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Find and click the US state dropdown
   const stateDropdown = canvas.getByLabelText('US State');
   await userEvent.click(stateDropdown);
-  
+
   // Select a state (e.g., California)
   const californiaOption = await canvas.findByText('California');
   await userEvent.click(californiaOption);
-  
+
   // Verify the selection
   expect(stateDropdown).toHaveTextContent('California');
 };
 
 // Test selecting a Canadian province
 export const testCanadaProvinceSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Find and click the Canada province dropdown
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
-  
+
   // Select a province (e.g., Ontario)
   const ontarioOption = await canvas.findByText('Ontario');
   await userEvent.click(ontarioOption);
-  
+
   // Verify the selection
   expect(provinceDropdown).toHaveTextContent('Ontario');
 };
 
 // Test form submission
 export const testFormSubmission = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Select a state
   const stateDropdown = canvas.getByLabelText('US State');
   await userEvent.click(stateDropdown);
   const californiaOption = await canvas.findByText('California');
   await userEvent.click(californiaOption);
-  
+
   // Select a province
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
   const ontarioOption = await canvas.findByText('Ontario');
   await userEvent.click(ontarioOption);
-  
+
   // Select a custom region
   const regionDropdown = canvas.getByLabelText('Custom Region');
   await userEvent.click(regionDropdown);
   const customOption = await canvas.findByText('New York');
   await userEvent.click(customOption);
-  
+
   // Submit the form
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
   await userEvent.click(submitButton);
-  
+
   // Verify the submission (mock response would be shown)
   await expect(canvas.findByText('Selected regions:')).resolves.toBeInTheDocument();
 };
 
 // Test validation errors
 export const testValidationErrors = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Submit the form without selecting anything
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
   await userEvent.click(submitButton);
-  
+
   // Verify error messages
   await expect(canvas.findByText('Please select a state')).resolves.toBeInTheDocument();
   await expect(canvas.findByText('Please select a province')).resolves.toBeInTheDocument();
   await expect(canvas.findByText('Please select a region')).resolves.toBeInTheDocument();
 };
-

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdacurry/forms",
-  "version": "0.19.6",
+  "version": "0.19.7",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/components/src/remix-hook-form/canada-province-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { CANADA_PROVINCES } from '../ui/data/canada-provinces';
+import { Select, type SelectProps } from './select';
 
 export type CanadaProvinceSelectProps = Omit<SelectProps, 'options'>;
 
 export function CanadaProvinceSelect(props: CanadaProvinceSelectProps) {
-  return (
-    <Select
-      {...props}
-      options={CANADA_PROVINCES}
-      placeholder="Select a province"
-    />
-  );
+  return <Select {...props} options={CANADA_PROVINCES} placeholder="Select a province" />;
 }
-

packages/components/src/remix-hook-form/index.ts

@@ -17,4 +17,3 @@ export * from './use-data-table-url-state';
 export * from './select';
 export * from './us-state-select';
 export * from './canada-province-select';
-

packages/components/src/remix-hook-form/phone-input.tsx

@@ -1,5 +1,8 @@
-import * as React from 'react';
-import { PhoneInputField as BasePhoneInputField, type PhoneInputFieldProps as BasePhoneInputFieldProps } from '../ui/phone-input-field';
+import type * as React from 'react';
+import {
+  PhoneInputField as BasePhoneInputField,
+  type PhoneInputFieldProps as BasePhoneInputFieldProps,
+} from '../ui/phone-input-field';
 import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
 import { useRemixFormContext } from 'remix-hook-form';

packages/components/src/remix-hook-form/select.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { useRemixFormContext } from 'remix-hook-form';
-import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 import { FormField, FormItem } from '../ui/form';
-import { Select as UISelect, type SelectProps as UISelectProps, type SelectUIComponents } from '../ui/select';
+import { type SelectUIComponents, Select as UISelect, type SelectProps as UISelectProps } from '../ui/select';
+import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
 export interface SelectProps extends Omit<UISelectProps, 'value' | 'onValueChange'> {
   name: string;
@@ -19,14 +19,7 @@ export interface SelectProps extends Omit<UISelectProps, 'value' | 'onValueChang
   >;
 }
 
-export function Select({
-  name,
-  label,
-  description,
-  className,
-  components,
-  ...props
-}: SelectProps) {
+export function Select({ name, label, description, className, components, ...props }: SelectProps) {
   const { control } = useRemixFormContext();
 
   return (
@@ -50,9 +43,7 @@ export function Select({
               }}
             />
           </FormControl>
-          {description && (
-            <FormDescription Component={components?.FormDescription}>{description}</FormDescription>
-          )}
+          {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
           <FormMessage Component={components?.FormMessage} />
         </FormItem>
       )}

packages/components/src/remix-hook-form/us-state-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { US_STATES } from '../ui/data/us-states';
+import { Select, type SelectProps } from './select';
 
 export type USStateSelectProps = Omit<SelectProps, 'options'>;
 
 export function USStateSelect(props: USStateSelectProps) {
-  return (
-    <Select
-      {...props}
-      options={US_STATES}
-      placeholder="Select a state"
-    />
-  );
+  return <Select {...props} options={US_STATES} placeholder="Select a state" />;
 }
-

packages/components/src/ui/canada-province-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { CANADA_PROVINCES } from './data/canada-provinces';
+import { Select, type SelectProps } from './select';
 
 export type CanadaProvinceSelectProps = Omit<SelectProps, 'options'>;
 
 export function CanadaProvinceSelect(props: CanadaProvinceSelectProps) {
-  return (
-    <Select
-      options={CANADA_PROVINCES}
-      placeholder="Select a province"
-      {...props}
-    />
-  );
+  return <Select options={CANADA_PROVINCES} placeholder="Select a province" {...props} />;
 }
-

packages/components/src/ui/data/canada-provinces.ts

@@ -1,4 +1,4 @@
-import { SelectOption } from '../select';
+import type { SelectOption } from '../select';
 
 export const CANADA_PROVINCES: SelectOption[] = [
   { value: 'AB', label: 'Alberta' },