refactor: rename remix form components to form components

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

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixCheckbox } from '@lambdacurry/forms/remix/remix-checkbox';
+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 { ActionFunctionArgs } from '@remix-run/node';
@@ -67,7 +67,7 @@ const ControlledCheckboxListExample = () => {
           <p className="text-sm text-gray-500">Select your favorite colors:</p>
           <div className="grid gap-4">
             {AVAILABLE_COLORS.map(({ value, label }) => (
-              <RemixCheckbox key={value} className="rounded-md border p-4" name={`colors.${value}`} label={label} />
+              <Checkbox key={value} className="rounded-md border p-4" name={`colors.${value}`} label={label} />
             ))}
           </div>
           <FormMessage error={methods.formState.errors.colors?.root?.message} />
@@ -100,9 +100,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Colors selected successfully', selectedColors };
 };
 
-const meta: Meta<typeof RemixCheckbox> = {
-  title: 'Remix/RemixCheckboxList',
-  component: RemixCheckbox,
+const meta: Meta<typeof Checkbox> = {
+  title: 'RemixHookForm/CheckboxList',
+  component: Checkbox,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -113,7 +113,7 @@ const meta: Meta<typeof RemixCheckbox> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixCheckbox>;
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -162,4 +162,4 @@ export const Tests: Story = {
     await testErrorState(storyContext);
     await testColorSelection(storyContext);
   },
-};
+};

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

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixCheckbox } from '@lambdacurry/forms/remix/remix-checkbox';
+import { Checkbox } from '@lambdacurry/forms/remix-hook-form/checkbox';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
@@ -38,14 +38,14 @@ const ControlledCheckboxExample = () => {
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="grid gap-4">
-          <RemixCheckbox className="rounded-md border p-4" name="terms" label="Accept terms and conditions" />
-          <RemixCheckbox
+          <Checkbox className="rounded-md border p-4" name="terms" label="Accept terms and conditions" />
+          <Checkbox
             className="rounded-md border p-4"
             name="marketing"
             label="Receive marketing emails"
             description="We will send you hourly updates about our products"
           />
-          <RemixCheckbox className="rounded-md border p-4" name="required" label="This is a required checkbox" />
+          <Checkbox className="rounded-md border p-4" name="required" label="This is a required checkbox" />
         </div>
         <Button type="submit" className="mt-4">
           Submit
@@ -66,9 +66,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Form submitted successfully' };
 };
 
-const meta: Meta<typeof RemixCheckbox> = {
-  title: 'Remix/RemixCheckbox',
-  component: RemixCheckbox,
+const meta: Meta<typeof Checkbox> = {
+  title: 'RemixHookForm/Checkbox',
+  component: Checkbox,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -79,7 +79,7 @@ const meta: Meta<typeof RemixCheckbox> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixCheckbox>;
+} satisfies Meta<typeof Checkbox>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -142,9 +142,9 @@ export const Tests: Story = {
       <RemixFormProvider {...methods}>
         <fetcher.Form onSubmit={methods.handleSubmit} method="post" action="/">
           <div className='grid gap-4'>
-            <RemixCheckbox className='rounded-md border p-4' name="terms" label="Accept terms and conditions" />
-            <RemixCheckbox className='rounded-md border p-4' name="marketing" label="Receive marketing emails" description="We will send you hourly updates about our products" />
-            <RemixCheckbox className='rounded-md border p-4' name="required" label="This is a required checkbox" />
+            <Checkbox className='rounded-md border p-4' name="terms" label="Accept terms and conditions" />
+            <Checkbox className='rounded-md border p-4' name="marketing" label="Receive marketing emails" description="We will send you hourly updates about our products" />
+            <Checkbox className='rounded-md border p-4' name="required" label="This is a required checkbox" />
           </div>
           <Button type="submit" className="mt-4">
             Submit
@@ -162,4 +162,4 @@ export const Tests: Story = {
     await testInvalidSubmission(storyContext);
     await testValidSubmission(storyContext);
   },
-};
+};

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

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixDatePicker } from '@lambdacurry/forms/remix/remix-date-picker';
+import { DatePicker } from '@lambdacurry/forms/remix-hook-form/date-picker';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { Form, useFetcher } from '@remix-run/react';
@@ -15,7 +15,7 @@ const formSchema = z.object({
 
 type FormData = z.infer<typeof formSchema>;
 
-const RemixDatePickerExample = () => {
+const DatePickerExample = () => {
   const fetcher = useFetcher<{ message?: string }>();
   const methods = useRemixForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -32,7 +32,7 @@ const RemixDatePickerExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixDatePicker name="eventDate" label="Event Date" description="Choose the date for your event." />
+        <DatePicker name="eventDate" label="Event Date" description="Choose the date for your event." />
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -57,20 +57,20 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixDatePicker> = {
-  title: 'Remix/RemixDatePicker',
-  component: RemixDatePicker,
+const meta: Meta<typeof DatePicker> = {
+  title: 'RemixHookForm/DatePicker',
+  component: DatePicker,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
     withRemixStubDecorator({
       root: {
-        Component: RemixDatePickerExample,
+        Component: DatePickerExample,
         action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
       },
     }),
   ],
-} satisfies Meta<typeof RemixDatePicker>;
+} satisfies Meta<typeof DatePicker>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -119,4 +119,4 @@ export const Tests: Story = {
     await testDateSelection(storyContext);
     await testSubmission(storyContext);
   },
-};
+};

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

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixDropdownMenuSelect } from '@lambdacurry/forms/remix/remix-dropdown-menu-select';
+import { DropdownMenuSelect } from '@lambdacurry/forms/remix-hook-form/dropdown-menu-select';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { DropdownMenuItem } from '@lambdacurry/forms/ui/dropdown-menu';
 import type { ActionFunctionArgs } from '@remix-run/node';
@@ -18,7 +18,7 @@ const formSchema = z.object({
 type FormData = z.infer<typeof formSchema>;
 
 // Component for the form
-const RemixDropdownMenuSelectExample = () => {
+const DropdownMenuSelectExample = () => {
   const fetcher = useFetcher<{ message?: string }>();
   const methods = useRemixForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -35,7 +35,7 @@ const RemixDropdownMenuSelectExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixDropdownMenuSelect
+        <DropdownMenuSelect
           name="favoriteColor"
           label="Favorite Color"
           description="Choose your favorite color."
@@ -44,7 +44,7 @@ const RemixDropdownMenuSelectExample = () => {
           <DropdownMenuItem onSelect={() => methods.setValue('favoriteColor', 'Red')}>Red</DropdownMenuItem>
           <DropdownMenuItem onSelect={() => methods.setValue('favoriteColor', 'Green')}>Green</DropdownMenuItem>
           <DropdownMenuItem onSelect={() => methods.setValue('favoriteColor', 'Blue')}>Blue</DropdownMenuItem>
-        </RemixDropdownMenuSelect>
+        </DropdownMenuSelect>
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -69,20 +69,20 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixDropdownMenuSelect> = {
-  title: 'Remix/RemixDropdownMenuSelect',
-  component: RemixDropdownMenuSelect,
+const meta: Meta<typeof DropdownMenuSelect> = {
+  title: 'RemixHookForm/DropdownMenuSelect',
+  component: DropdownMenuSelect,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
     withRemixStubDecorator({
       root: {
-        Component: RemixDropdownMenuSelectExample,
+        Component: DropdownMenuSelectExample,
         action: async ({ request }: ActionFunctionArgs) => handleFormSubmission(request),
       },
     }),
   ],
-} satisfies Meta<typeof RemixDropdownMenuSelect>;
+} satisfies Meta<typeof DropdownMenuSelect>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -140,4 +140,4 @@ export const Tests: Story = {
     await testColorSelection(storyContext);
     await testValidSubmission(storyContext);
   },
-};
+};

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

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixOTPInputField } from '@lambdacurry/forms/remix/remix-otp-input';
+import { OTPInput } from '@lambdacurry/forms/remix-hook-form/otp-input';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { Form, useFetcher } from '@remix-run/react';
@@ -33,7 +33,7 @@ const RemixOTPInputExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixOTPInputField
+        <OTPInput
           name="otp"
           label="One-Time Password"
           description="Enter the 6-digit code sent to your phone."
@@ -63,9 +63,9 @@ const handleFormSubmission = async (request: Request) => {
 };
 
 // Storybook configuration
-const meta: Meta<typeof RemixOTPInputField> = {
-  title: 'Remix/RemixOTPInput',
-  component: RemixOTPInputField,
+const meta: Meta<typeof OTPInput> = {
+  title: 'RemixHookForm/OTPInput',
+  component: OTPInput,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -76,7 +76,7 @@ const meta: Meta<typeof RemixOTPInputField> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixOTPInputField>;
+} satisfies Meta<typeof OTPInput>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -105,4 +105,4 @@ export const Tests: Story = {
     await testIncompleteSubmission(storyContext);
     await testSubmission(storyContext);
   },
-};
+};

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

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixRadioGroupField } from '@lambdacurry/forms/remix/remix-radio-group';
+import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
 import { Button } from '@lambdacurry/forms/ui/button';
 import { RadioGroupItem } from '@lambdacurry/forms/ui/radio-group';
 import type { ActionFunctionArgs } from '@remix-run/node';
@@ -35,7 +35,7 @@ const RemixRadioGroupExample = () => {
   return (
     <RemixFormProvider {...methods}>
       <Form onSubmit={methods.handleSubmit}>
-        <RemixRadioGroupField
+        <RadioGroup
           name="plan"
           label="Select a plan"
           description="Choose the plan that best fits your needs."
@@ -53,7 +53,7 @@ const RemixRadioGroupExample = () => {
             <RadioGroupItem value="enterprise" id="enterprise" />
             <label htmlFor="enterprise">Enterprise</label>
           </div>
-        </RemixRadioGroupField>
+        </RadioGroup>
         <Button type="submit" className="mt-4">
           Submit
         </Button>
@@ -77,9 +77,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Plan selected successfully' };
 };
 
-const meta: Meta<typeof RemixRadioGroupField> = {
-  title: 'Remix/RemixRadioGroup',
-  component: RemixRadioGroupField,
+const meta: Meta<typeof RadioGroup> = {
+  title: 'RemixHookForm/RadioGroup',
+  component: RadioGroup,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -90,7 +90,7 @@ const meta: Meta<typeof RemixRadioGroupField> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixRadioGroupField>;
+} satisfies Meta<typeof RadioGroup>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -121,4 +121,4 @@ export const Tests: Story = {
     await testRadioGroupSelection(storyContext);
     await testSubmission(storyContext);
   },
-};
+};

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

@@ -1,5 +1,5 @@
 import { zodResolver } from '@hookform/resolvers/zod';
-import { RemixSwitch } from '@lambdacurry/forms/remix/remix-switch';
+import { Switch } from '@lambdacurry/forms/remix-hook-form/switch';
 import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
@@ -36,8 +36,8 @@ const ControlledSwitchExample = () => {
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="grid gap-4">
-          <RemixSwitch name="notifications" label="Enable notifications" />
-          <RemixSwitch name="darkMode" label="Dark mode" description="Toggle dark mode for the application" />
+          <Switch name="notifications" label="Enable notifications" />
+          <Switch name="darkMode" label="Dark mode" description="Toggle dark mode for the application" />
         </div>
         <Button type="submit" className="mt-4">
           Submit
@@ -58,9 +58,9 @@ const handleFormSubmission = async (request: Request) => {
   return { message: 'Settings updated successfully' };
 };
 
-const meta: Meta<typeof RemixSwitch> = {
-  title: 'Remix/RemixSwitch',
-  component: RemixSwitch,
+const meta: Meta<typeof Switch> = {
+  title: 'RemixHookForm/Switch',
+  component: Switch,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],
   decorators: [
@@ -71,7 +71,7 @@ const meta: Meta<typeof RemixSwitch> = {
       },
     }),
   ],
-} satisfies Meta<typeof RemixSwitch>;
+} satisfies Meta<typeof Switch>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -117,4 +117,4 @@ export const Tests: Story = {
     await testToggleSwitches(storyContext);
     await testSubmission(storyContext);
   },
-};
+};