maquina-components 0.2.0 → 0.3.1

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

@@ -0,0 +1,121 @@
+<%# locals: (selected: nil, selected_end: nil, month: nil, year: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, cell_size: nil, input_name: nil, input_name_end: nil, css_classes: "", **html_options) %>
+<%
+  # Parse selected dates
+  selected_date = case selected
+                  when String then Date.parse(selected) rescue nil
+                  when Date, Time, DateTime then selected.to_date
+                  else nil
+                  end
+
+  selected_end_date = case selected_end
+                      when String then Date.parse(selected_end) rescue nil
+                      when Date, Time, DateTime then selected_end.to_date
+                      else nil
+                      end
+
+  # Parse min/max dates
+  min_date_parsed = case min_date
+                    when String then Date.parse(min_date) rescue nil
+                    when Date, Time, DateTime then min_date.to_date
+                    else nil
+                    end
+
+  max_date_parsed = case max_date
+                    when String then Date.parse(max_date) rescue nil
+                    when Date, Time, DateTime then max_date.to_date
+                    else nil
+                    end
+
+  # Determine display month/year
+  display_date = selected_date || Date.current
+  display_month = month || display_date.month
+  display_year = year || display_date.year
+
+  # Build the calendar data
+  first_of_month = Date.new(display_year, display_month, 1)
+  last_of_month = first_of_month.end_of_month
+
+  # Calculate start of calendar grid
+  week_start = week_starts_on == :monday ? 1 : 0
+  days_before = (first_of_month.wday - week_start) % 7
+  calendar_start = first_of_month - days_before.days
+
+  # Calculate end of calendar grid (6 weeks max)
+  total_days = days_before + last_of_month.day
+  weeks_needed = (total_days / 7.0).ceil
+  weeks_needed = [weeks_needed, 6].min
+  calendar_end = calendar_start + (weeks_needed * 7 - 1).days
+
+  # Build weeks array
+  weeks = (calendar_start..calendar_end).each_slice(7).to_a
+
+  # Weekday names
+  weekday_names = week_starts_on == :monday ?
+    %w[Mo Tu We Th Fr Sa Su] :
+    %w[Su Mo Tu We Th Fr Sa]
+
+  merged_data = (html_options.delete(:data) || {}).merge(
+    controller: "calendar",
+    component: "calendar",
+    "calendar-mode-value": mode,
+    "calendar-month-value": display_month,
+    "calendar-year-value": display_year,
+    "calendar-selected-value": selected_date&.iso8601,
+    "calendar-selected-end-value": selected_end_date&.iso8601,
+    "calendar-min-date-value": min_date_parsed&.iso8601,
+    "calendar-max-date-value": max_date_parsed&.iso8601,
+    "calendar-week-starts-on-value": week_starts_on
+  )
+
+  style_attr = cell_size ? "--cell-size: #{cell_size};" : nil
+%>
+
+<%= content_tag :div,
+      class: css_classes.presence,
+      data: merged_data,
+      style: style_attr,
+      **html_options do %>
+
+  <%# Hidden inputs for form integration %>
+  <% if input_name %>
+    <input type="hidden"
+           name="<%= input_name %>"
+           value="<%= selected_date&.iso8601 %>"
+           data-calendar-target="input">
+  <% end %>
+  <% if input_name_end && mode == :range %>
+    <input type="hidden"
+           name="<%= input_name_end %>"
+           value="<%= selected_end_date&.iso8601 %>"
+           data-calendar-target="inputEnd">
+  <% end %>
+
+  <%# Header with navigation %>
+  <%= render "components/calendar/header",
+        month: display_month,
+        year: display_year,
+        month_name: I18n.l(first_of_month, format: "%B %Y") %>
+
+  <%# Weekday headers %>
+  <div data-calendar-part="weekdays">
+    <% weekday_names.each do |day_name| %>
+      <div data-calendar-part="weekday"><%= day_name %></div>
+    <% end %>
+  </div>
+
+  <%# Calendar grid %>
+  <div data-calendar-part="grid" role="grid" aria-label="Calendar">
+    <% weeks.each do |week_days| %>
+      <%= render "components/calendar/week",
+            days: week_days,
+            display_month: display_month,
+            selected_date: selected_date,
+            selected_end_date: selected_end_date,
+            mode: mode,
+            min_date: min_date_parsed,
+            max_date: max_date_parsed,
+            disabled_dates: disabled_dates,
+            show_outside_days: show_outside_days %>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,13 @@
+<%# locals: (id: nil, name: nil, value: nil, placeholder: "Select...", css_classes: "", **html_options) %>
+<% combobox_id = id || "combobox-#{SecureRandom.hex(4)}" %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :combobox,
+    controller: "combobox",
+    combobox_value_value: value,
+    combobox_name_value: name,
+    combobox_placeholder_value: placeholder
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%= yield combobox_id %>
+<% end %>

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

@@ -0,0 +1,102 @@
+<%# locals: (selected: nil, selected_end: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, placeholder: nil, input_name: nil, input_name_end: nil, id: nil, disabled: false, required: false, css_classes: "", **html_options) %>
+<%
+  # Generate unique ID for popover targeting
+  component_id = id || "date-picker-#{SecureRandom.hex(4)}"
+  popover_id = "#{component_id}-popover"
+
+  # Parse selected dates for display
+  selected_date = case selected
+                  when String then Date.parse(selected) rescue nil
+                  when Date, Time, DateTime then selected.to_date
+                  else nil
+                  end
+
+  selected_end_date = case selected_end
+                      when String then Date.parse(selected_end) rescue nil
+                      when Date, Time, DateTime then selected_end.to_date
+                      else nil
+                      end
+
+  # Format display value
+  display_value = if mode == :range && selected_date && selected_end_date
+                    "#{I18n.l(selected_date, format: :short)} - #{I18n.l(selected_end_date, format: :short)}"
+                  elsif mode == :range && selected_date
+                    "#{I18n.l(selected_date, format: :short)} - ..."
+                  elsif selected_date
+                    I18n.l(selected_date, format: :long)
+                  end
+
+  default_placeholder = mode == :range ? "Select date range" : "Select date"
+
+  merged_data = (html_options.delete(:data) || {}).merge(
+    controller: "date-picker",
+    component: "date-picker",
+    "date-picker-mode-value": mode,
+    "date-picker-selected-value": selected_date&.iso8601,
+    "date-picker-selected-end-value": selected_end_date&.iso8601
+  )
+%>
+
+<div id="<%= component_id %>"
+     class="<%= css_classes.presence %>"
+     data-controller="date-picker"
+     data-component="date-picker"
+     data-date-picker-mode-value="<%= mode %>"
+     data-date-picker-selected-value="<%= selected_date&.iso8601 %>"
+     data-date-picker-selected-end-value="<%= selected_end_date&.iso8601 %>">
+
+  <%# Hidden inputs for form submission %>
+  <% if input_name %>
+    <input type="hidden"
+           name="<%= input_name %>"
+           value="<%= selected_date&.iso8601 %>"
+           data-date-picker-target="input"
+           <%= "required" if required %>>
+  <% end %>
+  <% if input_name_end && mode == :range %>
+    <input type="hidden"
+           name="<%= input_name_end %>"
+           value="<%= selected_end_date&.iso8601 %>"
+           data-date-picker-target="inputEnd">
+  <% end %>
+
+  <%# Trigger button %>
+  <button type="button"
+          popovertarget="<%= popover_id %>"
+          data-date-picker-target="trigger"
+          data-date-picker-part="trigger"
+          <%= "disabled" if disabled %>
+          aria-haspopup="dialog"
+          aria-expanded="false">
+    <%= icon_for :calendar, class: "size-4" %>
+    <span data-date-picker-target="display">
+      <%= display_value || placeholder || default_placeholder %>
+    </span>
+    <% unless display_value %>
+      <span data-date-picker-part="placeholder-indicator"></span>
+    <% end %>
+  </button>
+
+  <%# Popover with Calendar %>
+  <div id="<%= popover_id %>"
+       popover
+       data-date-picker-target="popover"
+       data-date-picker-part="popover"
+       role="dialog"
+       aria-modal="true"
+       aria-label="<%= mode == :range ? 'Date range picker' : 'Date picker' %>">
+    <%= render "components/calendar",
+          selected: selected_date,
+          selected_end: selected_end_date,
+          mode: mode,
+          min_date: min_date,
+          max_date: max_date,
+          disabled_dates: disabled_dates,
+          show_outside_days: show_outside_days,
+          week_starts_on: week_starts_on,
+          data: {
+            "date-picker-target": "calendar",
+            action: "calendar:change->date-picker#handleChange calendar:navigate->date-picker#handleNavigate"
+          } %>
+  </div>
+</div>

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

@@ -0,0 +1,53 @@
+<%# locals: (variant: :default, title: nil, description: nil, icon: nil, duration: 5000, dismissible: true, css_classes: "", **html_options) %>
+<%
+  # Auto-select icon based on variant if not provided
+  default_icons = {
+    default: nil,
+    success: :circle_check,
+    info: :info,
+    warning: :triangle_alert,
+    error: :circle_x
+  }
+  toast_icon = icon || default_icons[variant]
+%>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :toast,
+    controller: "toast",
+    variant: variant,
+    toast_duration_value: duration,
+    toast_dismissible_value: dismissible,
+    state: "entering"
+  ) %>
+
+<%= content_tag :div,
+      role: "alert",
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <% if toast_icon %>
+    <div data-toast-part="icon">
+      <%= icon_for toast_icon, class: "size-5" %>
+    </div>
+  <% end %>
+
+  <div data-toast-part="content">
+    <% if title.present? %>
+      <%= render "components/toast/title", text: title %>
+    <% end %>
+
+    <% if description.present? %>
+      <%= render "components/toast/description", text: description %>
+    <% end %>
+
+    <%= yield if block_given? %>
+  </div>
+
+  <% if dismissible %>
+    <button type="button"
+            data-toast-part="close"
+            data-action="toast#dismiss"
+            aria-label="Dismiss notification">
+      <%= icon_for :x, class: "size-4" %>
+    </button>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,17 @@
+<%# locals: (position: :bottom_right, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :toaster,
+    controller: "toaster",
+    position: position.to_s.dasherize,
+    toaster_target: "container"
+  ) %>
+
+<%= content_tag :div,
+      id: "toaster",
+      role: "region",
+      aria: { label: "Notifications", live: "polite" },
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <%= yield if block_given? %>
+<% end %>

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

@@ -0,0 +1,22 @@
+<%# locals: (month:, year:, month_name:, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge("calendar-part": "header") %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <button type="button"
+          data-action="click->calendar#previousMonth"
+          data-calendar-target="prevButton"
+          aria-label="Previous month">
+    <%= icon_for :chevron_left, class: "size-4" %>
+  </button>
+
+  <div data-calendar-part="caption">
+    <%= month_name %>
+  </div>
+
+  <button type="button"
+          data-action="click->calendar#nextMonth"
+          data-calendar-target="nextButton"
+          aria-label="Next month">
+    <%= icon_for :chevron_right, class: "size-4" %>
+  </button>
+<% end %>

data/app/views/components/calendar/_week.html.erb

@@ -0,0 +1,53 @@
+<%# locals: (days:, display_month:, selected_date: nil, selected_end_date: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge("calendar-part": "week") %>
+
+<%= content_tag :div, role: "row", class: css_classes.presence, data: merged_data, **html_options do %>
+  <% days.each do |day| %>
+    <%
+      is_outside = day.month != display_month
+      is_today = day == Date.current
+      is_selected = selected_date && day == selected_date
+      is_range_end = selected_end_date && day == selected_end_date
+      is_range_middle = selected_date && selected_end_date &&
+                        day > selected_date && day < selected_end_date
+      is_disabled = (min_date && day < min_date) ||
+                    (max_date && day > max_date) ||
+                    disabled_dates.include?(day)
+
+      day_state = if is_selected && mode == :range && selected_end_date
+                    "range-start"
+                  elsif is_range_end
+                    "range-end"
+                  elsif is_range_middle
+                    "range-middle"
+                  elsif is_selected
+                    "selected"
+                  end
+
+      # Skip rendering if outside day and not showing them
+      next if is_outside && !show_outside_days
+
+      day_data = {
+        "calendar-part": "day",
+        "calendar-target": "day",
+        date: day.iso8601,
+        state: day_state.presence,
+        outside: (is_outside ? true : nil),
+        today: (is_today ? true : nil),
+        action: "click->calendar#selectDay keydown->calendar#handleKeydown"
+      }.compact
+    %>
+    <button type="button"
+            data-calendar-part="day"
+            data-calendar-target="day"
+            data-date="<%= day.iso8601 %>"
+            <%= "data-state=\"#{day_state}\"" if day_state %>
+            <%= "data-outside" if is_outside %>
+            <%= "data-today" if is_today %>
+            data-action="click->calendar#selectDay keydown->calendar#handleKeydown"
+            <%= "disabled" if is_disabled %>
+            tabindex="<%= is_today ? '0' : '-1' %>"
+            <%= "aria-selected=\"true\"" if day_state&.include?("selected") || day_state == "range-start" || day_state == "range-end" %>
+            <%= "aria-current=\"date\"" if is_today %>><%= day.day %></button>
+  <% end %>
+<% end %>

data/app/views/components/combobox/_content.html.erb

@@ -0,0 +1,17 @@
+<%# locals: (id:, align: :start, width: :default, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    combobox_part: "content",
+    combobox_target: "content",
+    align: align,
+    width: width
+  ) %>
+
+<%= content_tag :div,
+      id: id,
+      popover: "auto",
+      role: "listbox",
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,9 @@
+<%# locals: (text: "No results found.", css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    combobox_part: "empty",
+    combobox_target: "empty"
+  ) %>
+
+<%= content_tag :div, class: css_classes.presence, data: merged_data, hidden: true, **html_options do %>
+  <%= text %>
+<% end %>

data/app/views/components/combobox/_group.html.erb

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

data/app/views/components/combobox/_input.html.erb

@@ -0,0 +1,18 @@
+<%# locals: (placeholder: "Search...", css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    combobox_part: "input",
+    combobox_target: "input",
+    action: "input->combobox#filter"
+  ) %>
+
+<div data-combobox-part="input-wrapper">
+  <%= icon_for :search, class: "size-4 shrink-0 opacity-50" %>
+  <%= tag.input type: "text",
+                placeholder: placeholder,
+                autocomplete: "off",
+                autocorrect: "off",
+                spellcheck: false,
+                class: css_classes.presence,
+                data: merged_data,
+                **html_options %>
+</div>

data/app/views/components/combobox/_label.html.erb

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

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

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

data/app/views/components/combobox/_option.html.erb

@@ -0,0 +1,24 @@
+<%# locals: (value:, selected: false, disabled: false, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    combobox_part: "option",
+    combobox_target: "option",
+    value: value,
+    selected: selected,
+    action: "click->combobox#select"
+  ) %>
+
+<% aria_attrs = { selected: selected } %>
+<% aria_attrs[:disabled] = true if disabled %>
+
+<%= content_tag :div,
+      role: "option",
+      tabindex: "-1",
+      aria: aria_attrs,
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <span data-combobox-part="check" class="<%= 'invisible' unless selected %>">
+    <%= icon_for :check, class: "size-4" %>
+  </span>
+  <%= yield %>
+<% end %>

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

@@ -0,0 +1,6 @@
+<%# locals: (css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    combobox_part: "separator"
+  ) %>
+
+<%= tag.div role: "separator", class: css_classes.presence, data: merged_data, **html_options %>

data/app/views/components/combobox/_trigger.html.erb

@@ -0,0 +1,22 @@
+<%# locals: (for_id:, placeholder: "Select...", variant: :outline, size: :default, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    component: :button,
+    variant: variant,
+    size: size,
+    combobox_part: "trigger",
+    combobox_target: "trigger",
+    action: "combobox#toggle"
+  ) %>
+
+<%= content_tag :button,
+      type: "button",
+      popovertarget: for_id,
+      popovertargetaction: "toggle",
+      role: "combobox",
+      aria: { expanded: false, haspopup: "listbox", controls: for_id },
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options do %>
+  <span data-combobox-target="label"><%= placeholder %></span>
+  <%= icon_for :chevrons_up_down, class: "size-4 shrink-0 opacity-50" %>
+<% end %>

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

@@ -0,0 +1,14 @@
+<%# locals: (label:, href: nil, method: nil, css_classes: "", **html_options) %>
+<% merged_data = (html_options.delete(:data) || {}).merge(
+    toast_part: "action"
+  ) %>
+
+<% merged_data["turbo-method"] = method if method.present? %>
+
+<% if href.present? %>
+  <%= link_to label, href, class: css_classes.presence, data: merged_data, **html_options %>
+<% else %>
+  <%= content_tag :button, type: "button", class: css_classes.presence, data: merged_data, **html_options do %>
+    <%= label %>
+  <% end %>
+<% end %>

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

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

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

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

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.2.0"
+  VERSION = "0.3.1"
 end