maquina-components 0.1.2 → 0.2.0

data/app/helpers/{components → maquina_components}/icons_helper.rb

@@ -1,9 +1,9 @@
-module Components
+module MaquinaComponents
   module IconsHelper
     def icon_for(name, options = {})
       return nil unless name
 
-      svg = icon_svg_for(name.to_sym)
+      svg = icon_svg_for(name.to_sym) || main_icon_svg_for(name.to_sym)
       return nil unless svg
 
       css_classes = options[:class]
@@ -16,7 +16,8 @@ module Components
       svg.html_safe
     end
 
-    private
+    def main_icon_svg_for(name)
+    end
 
     def icon_svg_for(name)
       case name
@@ -118,6 +119,42 @@ module Components
             <line x1="12" x2="12.01" y1="16" y2="16"/>
           </svg>
         SVG
+      when :logout
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+            <polyline points="16 17 21 12 16 7"></polyline>
+            <line x1="21" x2="9" y1="12" y2="12"></line>
+          </svg>
+        SVG
+      when :chevron_up_down
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="m7 15 5 5 5-5"></path>
+            <path d="m7 9 5-5 5 5"></path>
+          </svg>
+        SVG
+      when :chevron_right
+        <<~SVG
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <path d="m9 18 6-6-6-6"/>
+          </svg>
+        SVG
+      when :left_panel
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
+            <rect width="18" height="18" x="3" y="3" rx="2"></rect>
+            <path d="M9 3v18"></path>
+          </svg>
+        SVG
+      when :ellipsis
+        <<~SVG.freeze
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="1"/>
+            <circle cx="19" cy="12" r="1"/>
+            <circle cx="5" cy="12" r="1"/>
+          </svg>
+        SVG
       end
     end
   end

data/app/helpers/maquina_components/pagination_helper.rb

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+
+module MaquinaComponents
+  # Pagination Helper
+  #
+  # Provides convenient methods for creating pagination components with Pagy integration.
+  #
+  # @example Using the helper with Pagy
+  #   <%%= pagination_nav(@pagy, :users_path) %>
+  #
+  # @example With additional params
+  #   <%%= pagination_nav(@pagy, :search_users_path, params: { q: params[:q] }) %>
+  #
+  # @example With Turbo options
+  #   <%%= pagination_nav(@pagy, :users_path, turbo: { action: :replace, frame: "users" }) %>
+  #
+  # @example Using partials directly
+  #   <%%= render "components/pagination" do %>
+  #     <%%= render "components/pagination/content" do %>
+  #       <%%= render "components/pagination/item" do %>
+  #         <%%= render "components/pagination/previous", href: prev_path %>
+  #       <%% end %>
+  #       ...
+  #     <%% end %>
+  #   <%% end %>
+  #
+  module PaginationHelper
+    # Renders a complete pagination navigation from a Pagy object
+    #
+    # @param pagy [Pagy] The Pagy pagination object
+    # @param route_helper [Symbol] Route helper method name (e.g., :users_path)
+    # @param params [Hash] Additional params to pass to route helper
+    # @param turbo [Hash] Turbo-specific data attributes
+    # @param show_labels [Boolean] Whether to show Previous/Next text labels
+    # @param css_classes [String] Additional CSS classes for the nav
+    # @return [String] Rendered HTML
+    def pagination_nav(pagy, route_helper, params: {}, turbo: {action: :replace}, show_labels: true, css_classes: "", **html_options)
+      return if pagy.pages <= 1
+
+      render "components/pagination", css_classes: css_classes, **html_options do
+        render "components/pagination/content" do
+          safe_join([
+            pagination_previous_item(pagy, route_helper, params, turbo, show_labels),
+            pagination_page_items(pagy, route_helper, params, turbo),
+            pagination_next_item(pagy, route_helper, params, turbo, show_labels)
+          ])
+        end
+      end
+    end
+
+    # Simpler pagination with just Previous/Next (no page numbers)
+    #
+    # @param pagy [Pagy] The Pagy pagination object
+    # @param route_helper [Symbol] Route helper method name
+    # @param params [Hash] Additional params to pass to route helper
+    # @param turbo [Hash] Turbo-specific data attributes
+    # @return [String] Rendered HTML
+    def pagination_simple(pagy, route_helper, params: {}, turbo: {action: :replace}, css_classes: "", **html_options)
+      return if pagy.pages <= 1
+
+      render "components/pagination", css_classes: css_classes, **html_options do
+        render "components/pagination/content" do
+          safe_join([
+            pagination_previous_item(pagy, route_helper, params, turbo, true),
+            pagination_next_item(pagy, route_helper, params, turbo, true)
+          ])
+        end
+      end
+    end
+
+    # Build paginated path with page param
+    #
+    # @param route_helper [Symbol] Route helper method name
+    # @param pagy [Pagy] The Pagy pagination object
+    # @param page [Integer] Page number
+    # @param extra_params [Hash] Additional params
+    # @return [String] URL path
+    def paginated_path(route_helper, pagy, page, extra_params = {})
+      page_param = pagy.vars[:page_param] || Pagy::DEFAULT[:page_param]
+      query_params = request.query_parameters.except(page_param.to_s).merge(extra_params)
+      query_params[page_param] = page
+
+      send(route_helper, query_params)
+    end
+
+    private
+
+    def pagination_previous_item(pagy, route_helper, params, turbo, show_label)
+      render "components/pagination/item" do
+        if pagy.prev
+          render "components/pagination/previous",
+            href: paginated_path(route_helper, pagy, pagy.prev, params),
+            show_label: show_label,
+            data: turbo_data(turbo)
+        else
+          render "components/pagination/previous",
+            disabled: true,
+            show_label: show_label
+        end
+      end
+    end
+
+    def pagination_next_item(pagy, route_helper, params, turbo, show_label)
+      render "components/pagination/item" do
+        if pagy.next
+          render "components/pagination/next",
+            href: paginated_path(route_helper, pagy, pagy.next, params),
+            show_label: show_label,
+            data: turbo_data(turbo)
+        else
+          render "components/pagination/next",
+            disabled: true,
+            show_label: show_label
+        end
+      end
+    end
+
+    def pagination_page_items(pagy, route_helper, params, turbo)
+      pagy.series.map do |item|
+        render "components/pagination/item" do
+          case item
+          when Integer
+            render "components/pagination/link",
+              href: paginated_path(route_helper, pagy, item, params),
+              active: item == pagy.page,
+              data: turbo_data(turbo) do
+              item.to_s
+            end
+          when String
+            # Current page (string representation)
+            render "components/pagination/link",
+              href: paginated_path(route_helper, pagy, item.to_i, params),
+              active: true,
+              data: turbo_data(turbo) do
+              item
+            end
+          when :gap
+            render "components/pagination/ellipsis"
+          end
+        end
+      end
+    end
+
+    def turbo_data(turbo)
+      return {} if turbo.blank?
+
+      data = {}
+      data[:turbo_action] = turbo[:action] if turbo[:action]
+      data[:turbo_frame] = turbo[:frame] if turbo[:frame]
+      data
+    end
+  end
+end

data/app/helpers/maquina_components/sidebar_helper.rb

@@ -0,0 +1,63 @@
+module MaquinaComponents
+  module SidebarHelper
+    # Get sidebar state from cookie
+    #
+    # Reads the sidebar state cookie and returns a String.
+    # Use this to set the state value in the sidebar
+    # to ensure server-rendered state matches client state.
+    #
+    # @param cookie_name [String] The cookie name (default: "sidebar_state")
+    # @return [String] expanded if sidebar should be open, collapsed otherwise
+    #
+    # @example In layout
+    #   <%= render "components/sidebar",
+    #     state: sidebar_state do %>
+    #     <!-- content -->
+    #   <% end %>
+    #
+    # @example With custom cookie name
+    #   <%= render "components/sidebar",
+    #     state: sidebar_state("custom_sidebar_cookie") do %>
+    #     <!-- content -->
+    #   <% end %>
+    #
+    def sidebar_state(cookie_name = "sidebar_state")
+      # Read cookie value
+      cookie_value = cookies[cookie_name]
+
+      # Default to expanded when no cookie exists
+      return :expanded if cookie_value.nil?
+
+      # Return expanded if cookie says "true", otherwise collapsed
+      (cookie_value == "true") ? :expanded : :collapsed
+    end
+
+    # Check if sidebar is currently open
+    #
+    # @param cookie_name [String] The cookie name (default: "sidebar_state")
+    # @return [Boolean] true if sidebar is open
+    #
+    # @example
+    #   <% if sidebar_open? %>
+    #     <!-- Show sidebar-specific content -->
+    #   <% end %>
+    #
+    def sidebar_open?(cookie_name = "sidebar_state")
+      sidebar_state(cookie_name) == :expanded
+    end
+
+    # Check if sidebar is currently closed
+    #
+    # @param cookie_name [String] The cookie name (default: "sidebar_state")
+    # @return [Boolean] true if sidebar is closed
+    #
+    # @example
+    #   <% if sidebar_closed? %>
+    #     <!-- Show expanded content when sidebar is closed -->
+    #   <% end %>
+    #
+    def sidebar_closed?(cookie_name = "sidebar_state")
+      sidebar_state(cookie_name) == :collapsed
+    end
+  end
+end

data/app/helpers/maquina_components/table_helper.rb

@@ -0,0 +1,144 @@
+# frozen_string_literal: true
+
+module MaquinaComponents
+  # Table Component Helper
+  #
+  # Provides a simple helper for rendering basic tables from collections.
+  # For complex tables, use the partials directly for full control.
+  #
+  # @example Basic usage with collection
+  #   <%= simple_table @invoices,
+  #         columns: [
+  #           { key: :number, label: "Invoice" },
+  #           { key: :status, label: "Status" },
+  #           { key: :amount, label: "Amount", align: :right }
+  #         ] %>
+  #
+  # @example With caption and bordered variant
+  #   <%= simple_table @users,
+  #         columns: [
+  #           { key: :name, label: "Name" },
+  #           { key: :email, label: "Email" },
+  #           { key: :role, label: "Role" }
+  #         ],
+  #         caption: "Active users",
+  #         variant: :bordered %>
+  #
+  module TableHelper
+    # Render a simple table from a collection
+    #
+    # @param collection [Array, ActiveRecord::Relation] The collection to render
+    # @param columns [Array<Hash>] Column definitions with :key, :label, and optional :align
+    # @param caption [String, nil] Optional table caption
+    # @param variant [Symbol, nil] Container variant (:bordered)
+    # @param table_variant [Symbol, nil] Table variant (:striped)
+    # @param empty_message [String] Message to show when collection is empty
+    # @param row_id [Symbol, nil] Method to call for row ID (e.g., :id)
+    # @param html_options [Hash] Additional HTML options for the table
+    # @return [String] Rendered HTML
+    def simple_table(collection, columns:, caption: nil, variant: nil, table_variant: nil, empty_message: "No data available", row_id: nil, **html_options)
+      render partial: "components/simple_table", locals: {
+        collection: collection,
+        columns: columns,
+        caption: caption,
+        variant: variant,
+        table_variant: table_variant,
+        empty_message: empty_message,
+        row_id: row_id,
+        html_options: html_options
+      }
+    end
+
+    # Generate data attributes for table elements
+    # Useful when composing tables with other Rails helpers
+    #
+    # @example Using with content_tag
+    #   <%= content_tag :table, **table_data_attrs do %>
+    #     ...
+    #   <% end %>
+    #
+    # @param variant [Symbol, nil] Table variant (:striped)
+    # @return [Hash] Data attributes hash
+    def table_data_attrs(variant: nil)
+      attrs = { data: { component: "table" } }
+      attrs[:data][:variant] = variant.to_s if variant
+      attrs
+    end
+
+    # Generate data attributes for table container
+    #
+    # @param variant [Symbol, nil] Container variant (:bordered)
+    # @return [Hash] Data attributes hash
+    def table_container_data_attrs(variant: nil)
+      attrs = { data: { table_part: "container" } }
+      attrs[:data][:variant] = variant.to_s if variant
+      attrs
+    end
+
+    # Generate data attributes for table row
+    #
+    # @param selected [Boolean] Whether the row is selected
+    # @return [Hash] Data attributes hash
+    def table_row_data_attrs(selected: false)
+      attrs = { data: { table_part: "row" } }
+      attrs[:data][:state] = "selected" if selected
+      attrs
+    end
+
+    # Generate data attributes for table header
+    #
+    # @param sticky [Boolean] Whether the header is sticky
+    # @return [Hash] Data attributes hash
+    def table_header_data_attrs(sticky: false)
+      attrs = { data: { table_part: "header" } }
+      attrs[:data][:sticky] = "true" if sticky
+      attrs
+    end
+
+    # Generate data attributes for table head cell
+    # @return [Hash] Data attributes hash
+    def table_head_data_attrs
+      { data: { table_part: "head" } }
+    end
+
+    # Generate data attributes for table cell
+    #
+    # @param empty [Boolean] Whether this is an empty state cell
+    # @return [Hash] Data attributes hash
+    def table_cell_data_attrs(empty: false)
+      attrs = { data: { table_part: "cell" } }
+      attrs[:data][:empty] = "true" if empty
+      attrs
+    end
+
+    # Generate data attributes for table body
+    # @return [Hash] Data attributes hash
+    def table_body_data_attrs
+      { data: { table_part: "body" } }
+    end
+
+    # Generate data attributes for table footer
+    # @return [Hash] Data attributes hash
+    def table_footer_data_attrs
+      { data: { table_part: "footer" } }
+    end
+
+    # Generate data attributes for table caption
+    # @return [Hash] Data attributes hash
+    def table_caption_data_attrs
+      { data: { table_part: "caption" } }
+    end
+
+    # Convert alignment symbol to CSS class
+    #
+    # @param align [Symbol, nil] Alignment (:left, :center, :right)
+    # @return [String, nil] CSS class name
+    def table_alignment_class(align)
+      case align&.to_sym
+      when :right then "text-right"
+      when :center then "text-center"
+      else nil
+      end
+    end
+  end
+end

data/app/helpers/maquina_components/toggle_group_helper.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+module MaquinaComponents
+  # Toggle Group Helper
+  #
+  # Provides convenient methods for creating toggle group components.
+  #
+  # @example Using partials directly
+  #   <%%= render "components/toggle_group", type: :single, variant: :outline do %>
+  #     <%%= render "components/toggle_group/item", value: "bold", aria_label: "Toggle bold" do %>
+  #       <%%= icon_for :bold %>
+  #     <%% end %>
+  #   <%% end %>
+  #
+  # @example Using the helper with builder
+  #   <%%= toggle_group type: :multiple, variant: :outline do |group| %>
+  #     <%% group.item value: "bold", icon: :bold, aria_label: "Toggle bold" %>
+  #     <%% group.item value: "italic", icon: :italic, aria_label: "Toggle italic" %>
+  #   <%% end %>
+  #
+  # @example Simple data-driven helper
+  #   <%%= toggle_group_simple type: :single, items: [
+  #     { value: "left", icon: :align_left, aria_label: "Align left" },
+  #     { value: "center", icon: :align_center, aria_label: "Align center" },
+  #     { value: "right", icon: :align_right, aria_label: "Align right" }
+  #   ] %>
+  #
+  module ToggleGroupHelper
+    # Renders a toggle group with builder pattern
+    #
+    # @param type [Symbol] Selection mode (:single, :multiple)
+    # @param variant [Symbol] Visual style (:default, :outline)
+    # @param size [Symbol] Size variant (:default, :sm, :lg)
+    # @param value [String, Array, nil] Initially selected value(s)
+    # @param disabled [Boolean] Disable all items
+    # @param css_classes [String] Additional CSS classes
+    # @param html_options [Hash] Additional HTML attributes
+    # @yield [ToggleGroupBuilder] Builder for adding items
+    # @return [String] Rendered HTML
+    def toggle_group(type: :single, variant: :default, size: :default, value: nil, disabled: false, css_classes: "", **html_options, &block)
+      builder = ToggleGroupBuilder.new(self, type: type, variant: variant, size: size, value: value, disabled: disabled)
+
+      if block && block.arity == 1
+        capture { yield(builder) }
+      end
+
+      render "components/toggle_group",
+        type: type,
+        variant: variant,
+        size: size,
+        value: value,
+        disabled: disabled,
+        css_classes: css_classes,
+        **html_options do
+        if block && block.arity == 1
+          builder.to_html
+        elsif block
+          capture(&block)
+        end
+      end
+    end
+
+    # Renders a simple data-driven toggle group
+    #
+    # @param type [Symbol] Selection mode (:single, :multiple)
+    # @param items [Array<Hash>] Array of item configurations
+    # @param variant [Symbol] Visual style
+    # @param size [Symbol] Size variant
+    # @param value [String, Array, nil] Initially selected value(s)
+    # @return [String] Rendered HTML
+    def toggle_group_simple(items:, type: :single, variant: :default, size: :default, value: nil, disabled: false, css_classes: "", **html_options)
+      selected_values = normalize_value(value)
+
+      render "components/toggle_group",
+        type: type,
+        variant: variant,
+        size: size,
+        value: value,
+        disabled: disabled,
+        css_classes: css_classes,
+        **html_options do
+        safe_join(items.map do |item|
+          item_value = item[:value].to_s
+          is_pressed = selected_values.include?(item_value)
+
+          render "components/toggle_group/item",
+            value: item_value,
+            pressed: is_pressed,
+            disabled: item[:disabled] || disabled,
+            aria_label: item[:aria_label] do
+            parts = []
+            parts << icon_for(item[:icon]) if item[:icon] && respond_to?(:icon_for)
+            parts << item[:label] if item[:label]
+            safe_join(parts)
+          end
+        end)
+      end
+    end
+
+    # Builder class for toggle group
+    class ToggleGroupBuilder
+      def initialize(view_context, type:, variant:, size:, value:, disabled:)
+        @view = view_context
+        @type = type
+        @variant = variant
+        @size = size
+        @value = value
+        @disabled = disabled
+        @items = []
+        @selected_values = normalize_value(value)
+      end
+
+      # Add an item to the toggle group
+      def item(value:, label: nil, icon: nil, disabled: false, aria_label: nil, **options, &block)
+        is_pressed = @selected_values.include?(value.to_s)
+
+        @items << {
+          value: value,
+          label: label,
+          icon: icon,
+          disabled: disabled || @disabled,
+          aria_label: aria_label,
+          pressed: is_pressed,
+          options: options,
+          block: block
+        }
+      end
+
+      def to_html
+        @view.safe_join(@items.map { |item| render_item(item) })
+      end
+
+      private
+
+      def render_item(item)
+        @view.render "components/toggle_group/item",
+          value: item[:value],
+          pressed: item[:pressed],
+          disabled: item[:disabled],
+          aria_label: item[:aria_label],
+          **item[:options] do
+          if item[:block]
+            @view.capture(&item[:block])
+          else
+            parts = []
+            parts << @view.icon_for(item[:icon]) if item[:icon] && @view.respond_to?(:icon_for)
+            parts << item[:label] if item[:label]
+            @view.safe_join(parts)
+          end
+        end
+      end
+
+      def normalize_value(value)
+        case value
+        when Array then value.map(&:to_s)
+        when nil then []
+        else [value.to_s]
+        end
+      end
+    end
+
+    private
+
+    def normalize_value(value)
+      case value
+      when Array then value.map(&:to_s)
+      when nil then []
+      else [value.to_s]
+      end
+    end
+  end
+end

data/app/javascript/controllers/breadcrumb_controller.js

@@ -0,0 +1,71 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["item", "ellipsis", "ellipsisSeparator"]
+
+  connect() {
+    this.windowResizeHandler = this.handleResize.bind(this)
+    window.addEventListener('resize', this.windowResizeHandler)
+    this.handleResize()
+  }
+
+  disconnect() {
+    window.removeEventListener('resize', this.windowResizeHandler)
+  }
+
+  handleResize() {
+    // Get visible width of container
+    const containerWidth = this.element.clientWidth
+    const items = this.itemTargets
+    const ellipsis = this.hasEllipsisTarget ? this.ellipsisTarget : null
+    const ellipsisSeparator = this.hasEllipsisSeparatorTarget ? this.ellipsisSeparatorTarget : null
+
+    // Always show first and last items
+    if (items.length < 3 || !ellipsis) {
+      return; // Not enough items to collapse or no ellipsis element
+    }
+
+    // Reset visibility
+    if (ellipsis) ellipsis.classList.add('hidden')
+    if (ellipsisSeparator) ellipsisSeparator.classList.add('hidden')
+
+    items.forEach(item => {
+      item.classList.remove('hidden')
+    })
+
+    // Check if we need to collapse items
+    let totalWidth = 0
+    items.forEach(item => {
+      totalWidth += item.offsetWidth
+    })
+
+    if (totalWidth > containerWidth) {
+      // We need to collapse items - show ellipsis
+      if (ellipsis) ellipsis.classList.remove('hidden')
+      if (ellipsisSeparator) ellipsisSeparator.classList.remove('hidden')
+
+      // Start hiding middle items until we fit
+      for (let i = items.length - 2; i > 0; i--) {
+        if (i !== 0 && i !== items.length - 1) {
+          items[i].classList.add('hidden')
+
+          // Recalculate total width
+          totalWidth = 0
+
+          if (ellipsis) totalWidth += ellipsis.offsetWidth
+          if (ellipsisSeparator) totalWidth += ellipsisSeparator.offsetWidth
+
+          items.forEach(item => {
+            if (!item.classList.contains('hidden')) {
+              totalWidth += item.offsetWidth
+            }
+          })
+
+          if (totalWidth <= containerWidth) {
+            break
+          }
+        }
+      }
+    }
+  }
+}