[LC-118] chore: adding a remix text area story & fix: #7 Custom attribute getting added to inputs unnecessarily

.changeset/heavy-dragons-drop.md

@@ -0,0 +1,6 @@
+---
+"@lambdacurry/forms": minor
+"@lambdacurry/forms-docs": minor
+---
+
+Added remix textarea story and fixes a react error

.github/workflows/release.yml

@@ -38,7 +38,3 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Send a Slack notification if a publish happens
-        if: steps.changesets.outputs.published == 'true'
-        run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"

.vscode/settings.json

@@ -1,3 +1,14 @@
 {
-  "cSpell.words": ["autodocs", "biomejs", "Filenaming", "hookform", "isbot", "lucide", "shadcn", "sonner"]
+  "cSpell.words": ["autodocs", "biomejs", "Filenaming", "hookform", "isbot", "lucide", "shadcn", "sonner"],
+  "editor.defaultFormatter": "biomejs.biome",
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  }
 }

README.md

@@ -1,6 +1,6 @@
 # Welcome!
 
-Checkout our [Storybook Documentation](https://lambda-curry.github.io/forms/?path=/docs/helloworld-start-here--docs) to see the components in action and get started.
+Checkout our [Storybook Documentation](https://lambda-curry.github.io/forms/?path=/docs/0-1-hello-world-start-here--docs) to see the components in action and get started.
 
 
 ## Getting Started
@@ -10,7 +10,7 @@ Step 1: Install the dependencies
 yarn install
 ```
 
-Note: You may need to enable corepack for yarn v4 by running `corepack enable` before intstalling the dependencies.
+Note: You may need to enable corepack for yarn v4 by running `corepack enable` before installing the dependencies.
 
 
 Step 2: Start Storybook

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

@@ -1,13 +1,13 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { RemixTextarea } from '@lambdacurry/forms/remix/remix-textarea';
+import { Button } from '@lambdacurry/forms/ui/button';
 import type { ActionFunctionArgs } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hook-form';
 import { z } from 'zod';
 import { withRemixStubDecorator } from '../lib/storybook/remix-stub';
-import { RemixTextarea } from '@lambdacurry/forms/remix/remix-textarea';
-import { Button } from '@lambdacurry/forms/ui/button';
 
 const formSchema = z.object({
   comment: z.string().min(10, 'Comment must be at least 10 characters'),
@@ -37,9 +37,6 @@ const ControlledTextareaExample = () => {
           Submit
         </Button>
         {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
-        {methods.formState.errors.comment && (
-          <p className="mt-2 text-red-600">{methods.formState.errors.comment.message}</p>
-        )}
       </fetcher.Form>
     </RemixFormProvider>
   );
@@ -54,7 +51,7 @@ const handleFormSubmission = async (request: Request) => {
   } = await getValidatedFormData<FormData>(request, zodResolver(formSchema));
 
   if (errors) {
-    return { errors, defaultValues };
+    return { defaultValues };
   }
 
   if (data.comment.includes(BLOCKED_CONTENT)) {
@@ -108,6 +105,9 @@ const testInvalidSubmission = async ({ canvasElement }: { canvasElement: HTMLEle
   await userEvent.type(textarea, 'short');
   await userEvent.click(submitButton);
 
+  // Wait for any state updates
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
   expect(canvas.getByText((content) => content.includes('Comment must be at least 10 characters'))).toBeInTheDocument();
 };
 
@@ -149,6 +149,9 @@ const testValidSubmission = async ({ canvasElement }: { canvasElement: HTMLEleme
   await userEvent.type(textarea, 'This is a valid comment that is long enough');
   await userEvent.click(submitButton);
 
+  // Wait for any state updates
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
   // Check for success message
   await expect(canvas.getByText('Comment submitted successfully')).toBeInTheDocument();
 };

packages/components/src/remix/remix-checkbox.tsx

@@ -1,20 +1,18 @@
-import { useRemixFormContext } from 'remix-hook-form'
-import { Checkbox, type CheckboxProps } from '../ui/checkbox'
+import { useRemixFormContext } from 'remix-hook-form';
+import { Checkbox, type CheckboxProps } from '../ui/checkbox';
 import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-import type { FieldComponents } from '../ui/form';
 
 export type RemixCheckboxProps = Omit<CheckboxProps, 'control'>;
 
 export function RemixCheckbox(props: RemixCheckboxProps) {
   const { control } = useRemixFormContext();
 
-
-  const components: Partial<FieldComponents> = {
+  const components = {
     FormDescription: RemixFormDescription,
     FormControl: RemixFormControl,
     FormLabel: RemixFormLabel,
     FormMessage: RemixFormMessage,
   };
 
   return <Checkbox control={control} {...props} components={components} />;
-}
+}

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

@@ -1,13 +1,8 @@
-import { type ReactNode, useContext, forwardRef } from 'react';
-import type {
-  KeepStateOptions,
-  FieldValues,
-  UseFormReturn,
-  UseFormRegister,
-} from 'react-hook-form';
+import { type ReactNode, forwardRef, useContext } from 'react';
+import type { BaseSyntheticEvent, ComponentPropsWithoutRef } from 'react';
+import type { FieldValues, KeepStateOptions, UseFormRegister, UseFormReturn } from 'react-hook-form';
 import { useRemixFormContext } from 'remix-hook-form';
-import { FormLabel, FormControl, FormDescription, FormMessage, FormFieldContext, FormItemContext } from '../ui/form';
-import type { BaseSyntheticEvent, ComponentPropsWithoutRef, } from 'react';
+import { FormControl, FormDescription, FormFieldContext, FormItemContext, FormLabel, FormMessage } from '../ui/form';
 
 export interface RemixFormProviderProps<T extends FieldValues>
   extends Omit<UseFormReturn<T>, 'handleSubmit' | 'reset'> {
@@ -40,36 +35,40 @@ export const useRemixFormField = () => {
   };
 };
 
-
 export const RemixFormLabel = forwardRef<HTMLLabelElement, ComponentPropsWithoutRef<typeof FormLabel>>((props, ref) => (
   <FormLabel ref={ref} {...props} />
 ));
 RemixFormLabel.displayName = 'RemixFormLabel';
 
-export const RemixFormControl = forwardRef<HTMLElement, ComponentPropsWithoutRef<typeof FormControl>>((props, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useRemixFormField();
-  return (
-    <FormControl
-      ref={ref}
-      error={!!error}
-      formItemId={formItemId}
-      formDescriptionId={formDescriptionId}
-      formMessageId={formMessageId}
-      {...props}
-    />
-  );
-});
+export const RemixFormControl = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<typeof FormControl>>(
+  (props, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useRemixFormField();
+    return (
+      <FormControl
+        ref={ref}
+        error={!!error}
+        formItemId={formItemId}
+        formDescriptionId={formDescriptionId}
+        formMessageId={formMessageId}
+        {...props}
+      />
+    );
+  },
+);
 RemixFormControl.displayName = 'RemixFormControl';
 
-export const RemixFormDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormDescription>>((props, ref) => {
-  const { formDescriptionId } = useRemixFormField();
-  return <FormDescription ref={ref} formDescriptionId={formDescriptionId} {...props} />;
-});
+export const RemixFormDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormDescription>>(
+  (props, ref) => {
+    const { formDescriptionId } = useRemixFormField();
+    return <FormDescription ref={ref} formDescriptionId={formDescriptionId} {...props} />;
+  },
+);
 RemixFormDescription.displayName = 'RemixFormDescription';
 
-export const RemixFormMessage = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormMessage>>((props, ref) => {
-  const { error, formMessageId } = useRemixFormField();
-  return <FormMessage ref={ref} formMessageId={formMessageId} error={error?.message} {...props} />;
-});
+export const RemixFormMessage = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<typeof FormMessage>>(
+  (props, ref) => {
+    const { error, formMessageId } = useRemixFormField();
+    return <FormMessage ref={ref} formMessageId={formMessageId} error={error?.message} {...props} />;
+  },
+);
 RemixFormMessage.displayName = 'RemixFormMessage';
-

packages/components/src/remix/remix-switch.tsx

@@ -1,8 +1,7 @@
 import type { ComponentPropsWithoutRef } from 'react';
-import { useRemixFormContext } from 'remix-hook-form'
-import { Switch } from '../ui/switch'
+import { useRemixFormContext } from 'remix-hook-form';
+import { Switch } from '../ui/switch';
 import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
-import type { FieldComponents } from '../ui/form';
 
 export interface RemixSwitchProps extends Omit<ComponentPropsWithoutRef<typeof Switch>, 'control'> {
   name: string;
@@ -13,22 +12,14 @@ export interface RemixSwitchProps extends Omit<ComponentPropsWithoutRef<typeof S
 export function RemixSwitch({ name, label, description, ...props }: RemixSwitchProps) {
   const { control } = useRemixFormContext();
 
-  const components: Partial<FieldComponents> = {
+  const components = {
     FormDescription: RemixFormDescription,
     FormControl: RemixFormControl,
     FormLabel: RemixFormLabel,
     FormMessage: RemixFormMessage,
   };
 
   return (
-    <Switch
-      control={control}
-      name={name}
-      label={label}
-      description={description}
-      components={components}
-      {...props}
-    />
+    <Switch control={control} name={name} label={label} description={description} components={components} {...props} />
   );
 }
-

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

@@ -1,14 +1,13 @@
 import { useRemixFormContext } from 'remix-hook-form';
 import { TextField, type TextFieldProps } from '../ui/text-field';
-import type { FieldComponents } from '../ui/form';
 import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
 
 export type RemixTextFieldProps = Omit<TextFieldProps, 'control'>;
 
 export function RemixTextField(props: RemixTextFieldProps) {
   const { control } = useRemixFormContext();
 
-  const components: Partial<FieldComponents> = {
+  const components = {
     FormControl: RemixFormControl,
     FormLabel: RemixFormLabel,
     FormDescription: RemixFormDescription,

packages/components/src/remix/remix-textarea.tsx

@@ -1,23 +1,18 @@
 import { useRemixFormContext } from 'remix-hook-form';
 import { Textarea, type TextareaProps } from '../ui/textarea';
-import { FormField, FormItem } from '../ui/form';
-export interface RemixTextareaProps extends Omit<TextareaProps, 'control'> {
-  label?: string;
-  description?: string;
-}
+import { RemixFormControl, RemixFormDescription, RemixFormLabel, RemixFormMessage } from './remix-form';
+
+export type RemixTextareaProps = Omit<TextareaProps, 'control'>;
 
 export function RemixTextarea(props: RemixTextareaProps) {
   const { control } = useRemixFormContext();
 
-  return (
-    <FormField
-      control={control}
-      name={props.name ?? ''}
-      render={({ field }) => (
-        <FormItem>
-          <Textarea {...field} {...props} />
-        </FormItem>
-      )}
-    />
-  );
+  const components = {
+    FormControl: RemixFormControl,
+    FormLabel: RemixFormLabel,
+    FormDescription: RemixFormDescription,
+    FormMessage: RemixFormMessage,
+  };
+
+  return <Textarea control={control} components={components} {...props} />;
 }

packages/components/src/ui/calendar.tsx

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { DayPicker } from 'react-day-picker';
+import { type CustomComponents, DayPicker } from 'react-day-picker';
 
 import { cn } from '../../lib/utils';
 import { buttonVariants } from './button';
@@ -42,9 +42,9 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" {...props} />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" {...props} />,
+      } as Partial<CustomComponents>}
       {...props}
     />
   );

packages/components/src/ui/checkbox.tsx

@@ -1,4 +1,4 @@
-import { type ComponentPropsWithoutRef, type ReactNode, forwardRef, type ElementRef } from 'react';
+import { type ComponentPropsWithoutRef, type ReactNode, forwardRef, } from 'react';
 // biome-ignore lint/style/noNamespaceImport: from Radix
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
@@ -26,16 +26,16 @@ export interface CheckboxProps<
   components?: Partial<FieldComponents>;
 }
 
-const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
   ({ control, name, className, label, description, components, ...props }, ref) => (
     <FormField
       control={control}
       name={name}
       render={({ field, fieldState }) => (
-        <FormItem className={cn('flex flex-row items-start space-x-3 space-y-0', className)}>
+        <FormItem className={cn('flex flex-row items-start space-x-3 space-y-0', className)} ref={ref}>
           <FormControl Component={components?.FormControl}>
             <CheckboxPrimitive.Root
-              ref={ref}
+              ref={field.ref}
               className="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
               checked={field.value}
               onCheckedChange={field.onChange}

packages/components/src/ui/date-picker.tsx

@@ -30,14 +30,14 @@ export interface DatePickerProps<
   components?: Partial<FieldComponents>;
 }
 
-export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   ({ control, name, label, description, className, labelClassName, buttonClassName, components }, ref) => {
     return (
       <FormField
         control={control}
         name={name}
         render={({ field, fieldState }) => (
-          <FormItem className={className}>
+          <FormItem className={className} ref={ref}>
             {label && (
               <FormLabel Component={components?.FormLabel} className={labelClassName}>
                 {label}
@@ -47,7 +47,7 @@ export const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(
               <Popover>
                 <PopoverTrigger asChild>
                   <Button
-                    ref={ref}
+                    ref={field.ref}
                     variant="outline"
                     className={cn(
                       'w-[280px] justify-start text-left font-normal',