Kanban Board

<%= rui_kanban do |board| %>
  <% board.with_column(title: "To Do", id: "todo") do |col| %>
    <% col.with_card(id: "card-1") do %>
      <p class="font-medium">Fix login bug</p>
      <p class="text-xs text-zinc-500">Priority: High</p>
    <% end %>
  <% end %>

  <% board.with_column(title: "In Progress", id: "wip") do |col| %>
    <% col.with_card(id: "card-2") do %>
      <p class="font-medium">Design new dashboard</p>
    <% end %>
  <% end %>

  <% board.with_column(title: "Done", id: "done") do |col| %>
    <% col.with_card(id: "card-3") do %>
      <p class="font-medium">Deploy v2.0</p>
    <% end %>
  <% end %>
<% end %>

<%= rui_kanban(color: :info) do |board| %>
  <% board.with_column(title: "Backlog", id: "backlog") do |col| %>
    <% col.with_card(id: "c1") { "Inherits board color" } %>
  <% end %>
<% end %>

<%= rui_kanban do |board| %>
  <% board.with_column(title: "To Do", id: "todo", color: :zinc) do |col| %>
    <% col.with_card(id: "c1") { "Default" } %>
  <% end %>
  <% board.with_column(title: "In Progress", id: "wip", color: :warning) do |col| %>
    <% col.with_card(id: "c2") { "Warning" } %>
  <% end %>
  <% board.with_column(title: "Done", id: "done", color: :success) do |col| %>
    <% col.with_card(id: "c3") { "Success" } %>
  <% end %>
<% end %>

<%= rui_kanban do |board| %>
  <% board.with_column(title: "Tasks", id: "tasks") do |col| %>
    <% col.with_card(id: "c1", color: :danger) do %>
      <p class="font-medium">Critical bug</p>
    <% end %>
    <% col.with_card(id: "c2", color: :warning) do %>
      <p class="font-medium">Performance issue</p>
    <% end %>
    <% col.with_card(id: "c3", color: :success) do %>
      <p class="font-medium">Feature request</p>
    <% end %>
  <% end %>
<% end %>

<%= rui_kanban(size: :sm) do |board| %>
<% end %>

<%= rui_kanban(size: :base) do |board| %>
<% end %>

<%= rui_kanban(size: :lg) do |board| %>
<% end %>

<%= rui_kanban(shape: :rounded) do |board| %>
<% end %>

<%= rui_kanban(shape: :square) do |board| %>
<% end %>

<%= rui_kanban do |board| %>
  <% board.with_column(title: "Backlog", id: "backlog", badge_count: 5) do |col| %>
    <% col.with_card(id: "c1") { "Task" } %>
  <% end %>
<% end %>

<%= rui_kanban do |board| %>
  <% board.with_column(title: "ignored", id: "col") do |col| %>
    <% col.with_header do %>
      <div class="flex items-center gap-2">
        <span class="font-bold">Custom</span>
        <span class="text-xs bg-red-100 text-red-600 px-1 rounded">3</span>
      </div>
    <% end %>
  <% end %>
<% end %>

<%= rui_kanban do |board| %>
  <% board.with_column(title: "Backlog", id: "backlog") do |col| %>
    <% col.with_card(id: "c1") { "Task" } %>
    <% col.with_footer do %>
      <button class="text-sm text-zinc-500 hover:text-zinc-700">+ Add Card</button>
    <% end %>
  <% end %>
<% end %>

<%= rui_kanban do |board| %>
  <% board.with_column(title: "Tasks", id: "tasks") do |col| %>
    <% col.with_card(id: "c1", color: :danger) do %>
      <div class="flex items-center gap-2 mb-2">
        <%= rui_badge(text: "Bug", color: :danger, size: :sm) %>
        <span class="text-xs text-zinc-500">#1234</span>
      </div>
      <p class="font-medium">Login fails on Safari</p>
      <p class="text-sm text-zinc-500 mt-1">Reported 2 hours ago</p>
    <% end %>
  <% end %>
<% end %>

<%= rui_kanban(max_height: "200px") do |board| %>
  <% board.with_column(title: "Scrollable", id: "col") do |col| %>
  <% end %>
<% end %>

<%= rui_kanban do |board| %>
  <% board.with_column(title: "In Progress", id: "wip", max_cards: 3, badge_count: 2) do |col| %>
  <% end %>
<% end %>

<%= rui_kanban(draggable: false) do |board| %>
<% end %>

<%= rui_kanban(move_url: kanban_move_path) do |board| %>
  <% board.with_column(title: "To Do", id: "todo") do |col| %>
    <% col.with_card(id: "card-1") { "Task" } %>
  <% end %>
<% end %>

# app/controllers/kanban_controller.rb
class KanbanController < ApplicationController
  def move
    card = Card.find(params[:card_id])
    card.update!(
      column: params[:column_id],
      position: params[:position]
    )

    # Option 1: Respond with Turbo Stream
    respond_to do |format|
      format.turbo_stream { render turbo_stream: turbo_stream.replace(card) }
      format.json { head :ok }
    end
  end
end

PATCH /kanban/move
Content-Type: application/json

{
  "card_id": "card-1",
  "column_id": "done",
  "position": 0
}

// Listen for card moves without auto-PATCH
document.addEventListener("kanban:move", (event) => {
  const { cardId, fromColumnId, toColumnId, position } = event.detail
  console.log(`Card ${cardId} moved from ${fromColumnId} to ${toColumnId} at position ${position}`)
})