Wip on homepage.

Add documentation how to optimize code size in production.

app/javascript/components/ui/button.jsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+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",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props} />
+  );
+}
+
+export { Button, buttonVariants }

app/javascript/controllers/index.js

@@ -5,4 +5,7 @@
 import { application } from "./application"
 
 import HelloController from "./hello_controller"
+import ShadcnTestController from "./shadcn_test_controller"
+
 application.register("hello", HelloController)
+application.register("shadcn-test", ShadcnTestController)

app/javascript/controllers/shadcn_test_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+import React from "react"
+import { createRoot } from "react-dom/client"
+import { Button } from "@/components/ui/button"
+
+// Connects to data-controller="shadcn-test"
+export default class extends Controller {
+  static targets = ["container"]
+
+  connect() {
+    console.log("Shadcn Button Test Controller connected")
+    this.renderButton()
+  }
+
+  renderButton() {
+    const container = this.containerTarget
+    const root = createRoot(container)
+    
+    root.render(
+      <div className="flex flex-col items-center gap-4 p-6">
+        <h3 className="text-white text-lg font-semibold">Test Button Shadcn</h3>
+        <Button 
+          variant="default" 
+          size="lg"
+          className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
+          onClick={this.handleClick}
+        >
+          Cliquez ici - PostCSS Test
+        </Button>
+        <p className="text-gray-300 text-sm">Ce bouton utilise shadcn/ui + Tailwind + PostCSS</p>
+      </div>
+    )
+  }
+
+  handleClick = () => {
+    alert("✅ Le bouton shadcn fonctionne avec PostCSS !")
+    console.log("Shadcn button clicked - PostCSS compilation successful")
+  }
+}

app/javascript/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}