component-patterns

Component Creation Patterns

Reusable templates for generating React components following project standards.

Pattern: Basic Component

interface [ComponentName]Props {
  children?: React.ReactNode;
  className?: string;
}

export function [ComponentName]({ children, className }: [ComponentName]Props) {
  return (
    <div className={cn('[base-classes]', className)}>
      {children}
    </div>
  );
}

Pattern: Component with Variants (CVA)

import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils';

const [componentName]Variants = cva(
  '[base-classes]',
  {
    variants: {
      variant: {
        primary: '[primary-classes]',
        secondary: '[secondary-classes]',
      },
      size: {
        sm: '[sm-classes]',
        md: '[md-classes]',
        lg: '[lg-classes]',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

interface [ComponentName]Props 
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof [componentName]Variants> {}

export function [ComponentName]({ 
  className, 
  variant, 
  size,
  ...props 
}: [ComponentName]Props) {
  return (
    <div
      className={cn([componentName]Variants({ variant, size }), className)}
      {...props}
    />
  );
}

Pattern: Form Component with React Hook Form + Zod

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters'),
});

type FormData = z.infer<typeof schema>;

export function [FormName]({ onSubmit }: { onSubmit: (data: FormData) => Promise<void> }) {
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label htmlFor="email">Email</label>
        <input {...register('email')} id="email" type="email" />
        {errors.email && <p className="text-red-600">{errors.email.message}</p>}
      </div>
      
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
}