Implement ticket selection with Stimulus controller and improve code documentation

- Add ticket selection functionality to event show page using Stimulus
- Create ticket_selection_controller.js for handling ticket quantity changes
- Update ticket card component and event show view to work with Stimulus
- Add comprehensive comments to all JavaScript files for better maintainability
- Remove dependent: :destroy from event ticket_types association

app/javascript/components/button.jsx

@@ -4,6 +4,7 @@ import { cva } from "class-variance-authority";
 
 import { cn } from "@/lib/utils"
 
+// Define button styles using class-variance-authority for consistent styling
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
@@ -35,6 +36,7 @@ const buttonVariants = cva(
   }
 )
 
+// Button component that can render as a regular button or as a Slot (for composition)
 function Button({
   className,
   variant,
@@ -42,6 +44,7 @@ function Button({
   asChild = false,
   ...props
 }) {
+  // Use Slot component if asChild is true, otherwise render as a regular button
   const Comp = asChild ? Slot : "button"
 
   return (