modus-react-best-practices

Modus React Best Practices for Vite + SWC

🏗️ Component Architecture

✅ Single Configurable Component Pattern

CRITICAL: Create one configurable component instead of multiple specific components.

// ✅ CORRECT: Single configurable component
function ModusButton({
  variant = "primary",
  size = "md",
  disabled = false,
  children,
  ...props
}: ModusButtonProps) {
  const baseClasses =
    "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";

  const variantClasses = {
    primary: "bg-primary text-primary-foreground hover:bg-primary/90",
    secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/90",
    destructive:
      "bg-destructive text-destructive-foreground hover:bg-destructive/90",
    outline:
      "border border-border bg-background hover:bg-muted hover:text-muted-foreground",
    ghost: "hover:bg-muted hover:text-muted-foreground",
    link: "text-primary underline-offset-4 hover:underline",
  };

  const sizeClasses = {
    sm: "h-9 px-3 text-sm",
    md: "h-10 px-4 py-2",
    lg: "h-11 px-8",
    icon: "h-10 w-10",
  };

  return (
    <ModusWcButton
      className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
      disabled={disabled}
      {...props}
    >
      {children}
    </ModusWcButton>
  );
}

// ❌ WRONG: Multiple specific components
function PrimaryButton({ children, ...props }) {
  /* ... */
}
function SecondaryButton({ children, ...props }) {
  /* ... */
}
function DestructiveButton({ children, ...props }) {
  /* ... */
}

✅ Component Composition Pattern

// ✅ CORRECT: Component composition
function Card({ children, className, ...props }: CardProps) {
  return (
    <div
      className={`bg-card text-card-foreground border border-border rounded-lg ${className}`}
      {...props}
    >
      {children}
    </div>
  );
}

function CardHeader({ children, className, ...props }: CardHeaderProps) {
  return (
    <div className={`flex flex-col space-y-1.5 p-6 ${className}`} {...props}>
      {children}
    </div>
  );
}

function CardTitle({ children, className, ...props }: CardTitleProps) {
  return (
    <div
      className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
      {...props}
    >
      {children}
    </div>
  );
}

function CardContent({ children, className, ...props }: CardContentProps) {
  return (
    <div className={`p-6 pt-0 ${className}`} {...props}>
      {children}
    </div>
  );
}

// Usage
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    <div>Card content</div>
  </CardContent>
</Card>;