maquina-components 0.1.2 → 0.2.0

data/app/javascript/controllers/toggle_group_controller.js

@@ -0,0 +1,178 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toggle Group Controller
+ * 
+ * Manages a group of toggle buttons with single or multiple selection.
+ * 
+ * @example Single selection
+ *   <div data-controller="toggle-group" 
+ *        data-toggle-group-type-value="single"
+ *        data-toggle-group-selected-value='["bold"]'>
+ *     <button data-toggle-group-target="item" data-value="bold">Bold</button>
+ *     <button data-toggle-group-target="item" data-value="italic">Italic</button>
+ *   </div>
+ * 
+ * @example Multiple selection
+ *   <div data-controller="toggle-group" 
+ *        data-toggle-group-type-value="multiple"
+ *        data-toggle-group-selected-value='["bold", "italic"]'>
+ *     ...
+ *   </div>
+ */
+export default class extends Controller {
+  static targets = ["item"]
+
+  static values = {
+    type: { type: String, default: "single" },
+    selected: { type: Array, default: [] }
+  }
+
+  connect() {
+    this.syncItemStates()
+  }
+
+  /**
+   * Toggle an item's state
+   * @param {Event} event - Click event from toggle item
+   */
+  toggle(event) {
+    const item = event.currentTarget
+    if (item.disabled) return
+
+    const value = item.dataset.value
+    const isPressed = item.dataset.state === "on"
+
+    if (this.typeValue === "single") {
+      if (isPressed) {
+        this.selectedValue = []
+      } else {
+        this.selectedValue = [value]
+      }
+    } else {
+      if (isPressed) {
+        this.selectedValue = this.selectedValue.filter(v => v !== value)
+      } else {
+        this.selectedValue = [...this.selectedValue, value]
+      }
+    }
+
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Handle keyboard navigation
+   * @param {KeyboardEvent} event
+   */
+  handleKeydown(event) {
+    const item = event.currentTarget
+    const items = this.itemTargets.filter(i => !i.disabled)
+    const currentIndex = items.indexOf(item)
+
+    let nextIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault()
+        nextIndex = (currentIndex + 1) % items.length
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault()
+        nextIndex = (currentIndex - 1 + items.length) % items.length
+        break
+      case "Home":
+        event.preventDefault()
+        nextIndex = 0
+        break
+      case "End":
+        event.preventDefault()
+        nextIndex = items.length - 1
+        break
+      case " ":
+      case "Enter":
+        return
+      default:
+        return
+    }
+
+    items[nextIndex]?.focus()
+  }
+
+  /**
+   * Sync visual states with selectedValue
+   */
+  syncItemStates() {
+    this.itemTargets.forEach(item => {
+      const value = item.dataset.value
+      const isSelected = this.selectedValue.includes(value)
+
+      item.dataset.state = isSelected ? "on" : "off"
+      item.setAttribute("aria-pressed", isSelected)
+    })
+  }
+
+  /**
+   * Dispatch change event
+   */
+  dispatchChange() {
+    const detail = {
+      type: this.typeValue,
+      value: this.typeValue === "single"
+        ? (this.selectedValue[0] || null)
+        : this.selectedValue
+    }
+
+    this.dispatch("change", { detail })
+
+    this.element.dispatchEvent(new CustomEvent("toggle-group:change", {
+      bubbles: true,
+      detail
+    }))
+  }
+
+  /**
+   * Programmatically select a value
+   * @param {string} value - Value to select
+   */
+  select(value) {
+    if (this.typeValue === "single") {
+      this.selectedValue = [value]
+    } else if (!this.selectedValue.includes(value)) {
+      this.selectedValue = [...this.selectedValue, value]
+    }
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Programmatically deselect a value
+   * @param {string} value - Value to deselect
+   */
+  deselect(value) {
+    this.selectedValue = this.selectedValue.filter(v => v !== value)
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Clear all selections
+   */
+  clear() {
+    this.selectedValue = []
+    this.syncItemStates()
+    this.dispatchChange()
+  }
+
+  /**
+   * Get current value(s)
+   * @returns {string|string[]|null}
+   */
+  getValue() {
+    return this.typeValue === "single"
+      ? (this.selectedValue[0] || null)
+      : this.selectedValue
+  }
+}

data/app/views/components/_alert.html.erb

@@ -1,11 +1,12 @@
-<%# locals: (title: nil) %>
-<% if notice || alert %>
-  <div
-    role="alert"
-    class="<%= class_names('relative w-full rounded-lg border px-4 py-3 text-sm mx-auto mb-4 [&>svg]:size-4 [&>svg+div]:translate-y-(-3px) [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7 max-w-lg', '[&>svg]:text-foreground bg-background text-foreground': notice.present?, 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive': alert.present?) %>"
-  >
-    <%= icon_for(notice.present? ? :check : :circle_alert) %>
-    <h5 class="mb-1 font-medium leading-none tracking-tight"><%= title || (notice.present? ? "Éxito" : "Error") %></h5>
-    <div class="text-sm [&_p]:leading-relaxed"><%= notice %></div>
-  </div>
+<%# locals: (variant: :default, icon: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :alert,
+    variant: variant,
+    has_icon: icon.present? || nil
+  ).compact %>
+
+<%= content_tag :div, role: :alert, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= icon_for(icon) if icon.present? %>
+
+  <div><%= yield %></div>
 <% end %>

data/app/views/components/_badge.html.erb

@@ -0,0 +1,10 @@
+<%# locals: (variant: :default, size: :md, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :badge,
+    variant: variant,
+    size: size
+  ) %>
+
+<%= content_tag :span, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/_breadcrumbs.html.erb

@@ -0,0 +1,16 @@
+<%# locals: (css_classes: "", responsive: false, **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :breadcrumbs
+  )
+  
+  if responsive
+    merged_data[:controller] = "breadcrumb"
+  end %>
+
+<nav
+  aria-label="Breadcrumb"
+  class="<%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
+>
+  <%= yield %>
+</nav>

data/app/views/components/_card.html.erb

@@ -1,10 +1,6 @@
-<%# locals: (custom_classes: "") -%>
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(component: :card) %>
 
-<div
-  class="<%= class_names(
-  "rounded-xl border border-border bg-card text-card-foreground shadow",
-  custom_classes
-) %>"
->
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
-</div>
+<% end %>

data/app/views/components/_dropdown.html.erb

@@ -0,0 +1,25 @@
+<div
+  data-menu-button-target="content"
+  class="
+    absolute z-10 overflow-hidden border border-border p-1 text-popover-foreground
+    min-w-56 max-w-56 content-fit shadow-md bottom-full rounded-lg hidden
+    peer-data-[state=closed]/menu-button:animate-out
+    peer-data-[state=closed]/menu-button:fade-out-0
+    peer-data-[state=open]/menu-button:fade-in-0
+    peer-data-[state=closed]/menu-button:zoom-out-95
+    peer-data-[state=open]/menu-button:zoom-in-95
+    peer-data-[side=bottom]/menu-button:slide-in-from-top-2
+    peer-data-[side=left]/menu-button:slide-in-from-right-2
+    peer-data-[side=right]/menu-button:slide-in-from-left-2
+    peer-data-[side=top]/menu-button:slide-in-from-bottom-2
+  "
+  role="menu"
+  aria-orientation="vertical"
+  aria-labelledby="menu-button"
+  tabindex="-1"
+>
+  <%= yield %>
+</div>
+<!--
+<div role="separator" aria-orientation="horizontal" class="separator"></div>
+-->

data/app/views/components/_dropdown_menu.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: "dropdown-menu",
+    controller: "dropdown-menu"
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/_empty.html.erb

@@ -0,0 +1,10 @@
+<%# locals: (variant: :default, size: :default, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :empty,
+    variant: variant,
+    size: size
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/_header.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :header
+  ) %>
+
+<%= content_tag :header, class: css_classes.presence, data: merged_data, **html_options do %>
+  <div data-header-part="inner"><%= yield %></div>
+<% end %>

data/app/views/components/_menu_button.html.erb

@@ -0,0 +1,44 @@
+<%# locals: (title: "", subtitle: nil, icon: nil, text_icon: nil, icon_classes: "", submenu: false) %>
+
+<ul class="flex w-full min-w-0 flex-col gap-1">
+  <li class="group/menu-item relative" data-controller="menu-button">
+    <button
+      data-state="closed"
+      class="
+        peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2
+        text-left outline-none ring-sidebar-ring transition-[width,height,padding]
+        focus-visible:ring-2 active:bg-sidebar-accent
+        active:text-sidebar-accent-foreground disabled:pointer-events-none
+        disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50
+        data-[state=open]:bg-sidebar-accent
+        data-[state=open]text-sidebar-accent-foreground
+        group-data-[collapsible=icon]:size-8! [&>span:last-child]:truncate
+        [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent
+        hover:text-sidebar-accent-foreground h-12 text-sm
+        group-data-[collapsible=icon]:p-0!
+      ", data-action="menu-button#toggle", data-menu-button-target="button" }
+    >
+        <% if icon.present? %>
+          <%= image_tag icon, alt: "maquina", class: "#{icon_classes}" %>
+        <% elsif text_icon.present? %>
+          <div
+            class="
+              flex aspect-square size-8 items-center justify-center rounded-lg
+              bg-sidebar-primary text-sidebar-primary-foreground
+            "
+          >
+              <span class="<%= icon_classes %>"><%= text_icon %></span>
+          </div>
+        <% end %>
+      <div class="grid flex-1 text-left text-sm leading-tight">
+        <span class="truncate font-semibold"><%= title %></span>
+        <% if subtitle.present? %>
+          <span class="truncate text-xs"><%= subtitle %></span>
+        <% end %>
+      </div>
+      <%= icon_for(:chevron_up_down, class: "ml-auto") if submenu %>
+    </button>
+
+    <%= yield %>
+  </li>
+</ul>

data/app/views/components/_pagination.html.erb

@@ -1,34 +1,13 @@
-<%# locals: (pagy:, route_helper:, param: nil, data: {turbo_action: :replace}) %>
-<nav class="mx-auto flex w-full justify-center mt-4">
-  <ul class="flex flex-row items-center gap-1">
-    <li>
-      <% if pagy.prev.present? %>
-        <%= link_to "Previo",
-        paginated_path(route_helper, pagy, pagy.prev, param),
-        class: "button-ghost",
-        data: data %>
-      <% else %>
-        <button class="button-ghost" disabled>Previo</button>
-      <% end %>
-    </li>
-    <% pagy.series.each do |page| %>
-      <li>
-        <%= link_to page,
-        paginated_path(route_helper, pagy, page, param),
-        class: class_names("button-ghost", "button-outline": page.is_a?(String)),
-        data: data %>
-      </li>
-    <% end %>
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :pagination
+  ) %>
 
-    <li>
-      <% if pagy.next.present? %>
-        <%= link_to "Siguiente",
-        paginated_path(route_helper, pagy, pagy.next, param),
-        class: "button-ghost",
-        data: data %>
-      <% else %>
-        <button class="button-ghost" disabled>Siguiente</button>
-      <% end %>
-    </li>
-  </ul>
-</nav>
+<%= content_tag :nav,
+      role: "navigation",
+      "aria-label": html_options.delete(:"aria-label") || "Pagination",
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/_separator.html.erb

@@ -0,0 +1,11 @@
+<%# locals: (orientation: :horizontal) -%>
+
+<div
+  data-orientation="<%= orientation %>"
+  role="none"
+  class="
+    bg-border shrink-0 data-[orientation=horizontal]:h-px
+    data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px mx-2
+    data-[orientation=vertical]:h-4
+  "
+></div>

data/app/views/components/_sidebar.html.erb

@@ -1,29 +1,39 @@
+<%# locals: (id: nil, state: :collapsed, collapsible: :offcanvas, variant: :inset, side: :left, css_classes: "", **html_options) %>
+<% random_id = id || "sidebar-#{SecureRandom.hex(6)}"
+  
+  merged_data = (html_options.delete(:data) || {}).merge(
+    sidebar_part: :root,
+    sidebar_target: "sidebar",
+    state: state,
+    variant: variant,
+    collapsible: collapsible,
+    side: side
+  ) %>
+
 <aside
-  class="group peer hidden md:block text-sidebar-foreground"
-  data-controller="sidebars"
-  data-state="expanded"
-  data-collapsible=""
-  id="sidebar"
+  id="<%= random_id %>"
+  class="group peer sidebar-loading <%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
 >
-  <!-- Mobile overlay -->
+  <%# Sidebar gap (creates space for sidebar on desktop) %>
+  <div id="<%= random_id %>-gap" data-sidebar-part="gap"></div>
+
+  <%# Mobile backdrop overlay %>
   <div
-    class="
-      inset-0 bg-black/80 lg:hidden transition-opacity duration-300 hidden
-    "
-    data-sidebar-target="overlay"
-    data-action="click->sidebar#toggleMobile"
-  >
-  </div>
-  <!-- Sidebar container -->
+    id="<%= random_id %>-overlay"
+    data-sidebar-part="backdrop"
+    data-sidebar-target="backdrop"
+    data-action="click->sidebar#backdropClick"
+  ></div>
+
+  <%# Sidebar container (fixed positioned) %>
   <div
-    class="
-      duration-200 fixed inset-y-0 z-10 h-svh w-(--sidebar-width)
-      transition-[left,right,width] ease-linear md:flex left-0 border-r
-      border-sidebar-border group-data-[collapsible=icon]:w-[--sidebar-width-icon]
-    "
+    id="<%= random_id %>-container"
+    data-sidebar-part="container"
     data-sidebar-target="container"
   >
-    <div class=" flex h-full w-full flex-col bg-sidebar">
+    <%# Inner sidebar content wrapper %>
+    <div id="<%= random_id %>-inner" data-sidebar-part="inner">
       <%= yield %>
     </div>
   </div>

data/app/views/components/_simple_table.html.erb

@@ -0,0 +1,49 @@
+<%# locals: (collection:, columns:, caption: nil, variant: nil, table_variant: nil, empty_message: "No data available", row_id: nil, html_options: {}) %>
+<%= render "components/table", variant: variant, table_variant: table_variant, **html_options do %>
+  <% if caption.present? %>
+    <%= render "components/table/caption" do %><%= caption %><% end %>
+  <% end %>
+
+  <%= render "components/table/header" do %>
+    <%= render "components/table/row" do %>
+      <% columns.each do |column| %>
+        <%= render "components/table/head", css_classes: table_alignment_class(column[:align]) do %>
+          <%= column[:label] %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render "components/table/body" do %>
+    <% if collection.empty? %>
+      <%= render "components/table/row" do %>
+        <%= render "components/table/cell", colspan: columns.size, data: { empty: "true" } do %>
+          <%= empty_message %>
+        <% end %>
+      <% end %>
+    <% else %>
+      <% collection.each do |item| %>
+        <%
+          row_options = {}
+          row_options[:id] = "row-#{item.public_send(row_id)}" if row_id && item.respond_to?(row_id)
+        %>
+        <%= render "components/table/row", **row_options do %>
+          <% columns.each do |column| %>
+            <%
+              value = if column[:key].is_a?(Proc)
+                column[:key].call(item)
+              elsif item.is_a?(Hash)
+                item[column[:key]] || item[column[:key].to_s]
+              elsif item.respond_to?(column[:key])
+                item.public_send(column[:key])
+              end
+            %>
+            <%= render "components/table/cell", css_classes: table_alignment_class(column[:align]) do %>
+              <%= value %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/components/_table.html.erb

@@ -0,0 +1,21 @@
+<%# locals: (css_classes: "", container: true, variant: nil, table_variant: nil, **html_options) %>
+<%
+  # Table data attributes - merge user data with component defaults
+  table_data = (html_options.delete(:data) || {}).merge(component: :table)
+  table_data[:variant] = table_variant if table_variant
+
+  # Container data attributes
+  container_data = { table_part: :container }
+  container_data[:variant] = variant if variant
+%>
+<% if container %>
+<div data-table-part="container"<%= " data-variant=\"#{variant}\"" if variant %>>
+  <%= content_tag :table, class: css_classes.presence, data: table_data, **html_options do %>
+    <%= yield %>
+  <% end %>
+</div>
+<% else %>
+<%= content_tag :table, class: css_classes.presence, data: table_data, **html_options do %>
+  <%= yield %>
+<% end %>
+<% end %>

data/app/views/components/_toggle_group.html.erb

@@ -0,0 +1,24 @@
+<%# locals: (type: :single, variant: :default, size: :default, value: nil, disabled: false, css_classes: "", **html_options) %>
+<% selected_values = case value
+                    when Array then value.map(&:to_s)
+                    when nil then []
+                    else [value.to_s]
+                    end
+  
+  merged_data = (html_options.delete(:data) || {}).merge(
+    controller: "toggle-group",
+    component: "toggle-group",
+    variant: variant,
+    size: size,
+    "toggle-group-type-value": type,
+    "toggle-group-selected-value": selected_values.to_json
+  ) %>
+
+<%= content_tag :div,
+      role: "group",
+      class: css_classes.presence,
+      data: merged_data,
+      "aria-disabled": (disabled ? "true" : nil),
+      **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/alert/_description.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(alert_part: :description) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/alert/_title.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (text: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(alert_part: :title) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= text || yield %>
+<% end %>

data/app/views/components/breadcrumbs/_ellipsis.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :ellipsis
+  ) %>
+
+<%= content_tag :span, role: "presentation", class: css_classes, data: merged_data, **html_options do %>
+  <%= icon_for(:ellipsis) %>
+  <span class="sr-only">More</span>
+<% end %>

data/app/views/components/breadcrumbs/_item.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :item
+  ) %>
+
+<%= content_tag :li, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_link.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (href:, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :link
+  ) %>
+
+<%= link_to href, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_list.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :list
+  ) %>
+
+<%= content_tag :ol, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_page.html.erb

@@ -0,0 +1,8 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :page
+  ) %>
+
+<%= content_tag :span, role: "link", aria: {current: "page", disabled: true}, class: css_classes, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>

data/app/views/components/breadcrumbs/_separator.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (icon: :chevron_right, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    breadcrumb_part: :separator
+  ) %>
+
+<li
+  role="presentation"
+  aria-hidden="true"
+  class="<%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
+>
+  <% if icon == :custom %>
+    <%= yield %>
+  <% else %>
+    <%= icon_for(icon) %>
+  <% end %>
+</li>

data/app/views/components/card/_action.html.erb

@@ -0,0 +1,6 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(card_part: :action) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield %>
+<% end %>