recurrence_ui 0.1.0

data/app/views/recurrence_ui/_monthly_by_day_of_month.html.erb

@@ -0,0 +1,47 @@
+<%# app/views/recurrence_ui/_monthly_by_day_of_month.html.erb %>
+<%# Monthly Recurrence Rule Options (By Day of Month) %>
+<% selected_days_for_monthly = local_assigns.fetch(:selected_days_for_monthly, {}) %>
+
+<div class="space-y-3" data-item="specificFields" data-rule="monthly_by_day_of_month">
+  <%# Interval Input Header %>
+  <div class="flex items-center space-x-2">
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.every", default: "Every") %>
+    </span>
+    
+    <%= number_field_tag nil, rec_ui.initial_interval,
+          value: 1, 
+          min: 1, 
+          class: "rui-input w-16 text-center",
+          data: { 
+            item: "interval", 
+            action: "input->#{identifier}#onCardInputChanged" 
+          } %> 
+    
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.month", count: rec_ui.initial_interval, default: "month(s)") %>
+    </span>
+  </div>
+
+  <%# Month Days Selection Section %>
+  <div data-<%= identifier %>-target="monthlyDays">
+    <label class="rui-label mb-2">
+      <%= t("recurrence_ui.labels.select_dates", default: "Select dates") %>:
+    </label>
+    
+    <div class="grid grid-cols-7 gap-1">
+      <% (1..31).each do |day| %>
+        <% is_selected = selected_days_for_monthly.to_a.include?(day) %> 
+        
+        <button type="button" 
+                class="rui-day-btn"
+                data-day="<%= day %>"
+                data-<%= identifier %>-target="dayButton"
+                data-selected="<%= is_selected %>"
+                data-action="click-><%= identifier %>#toggleDay">
+          <%= day %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/recurrence_ui/_monthly_by_weekday.html.erb

@@ -0,0 +1,55 @@
+<%# app/views/recurrence_ui/_monthly_by_weekday.html.erb %>
+<%# Monthly Recurrence Rule Options (By Weekday / Nth Day) %>
+<% selected_nth_days = local_assigns.fetch(:selected_nth_days, {}) %>
+
+<div class="space-y-3" data-item="specificFields" data-rule="monthly_by_weekday">
+  <%# Interval Input Header %>
+  <div class="flex items-center space-x-2">
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.every", default: "Every") %>
+    </span>
+
+    <%= number_field_tag nil, rec_ui.initial_interval,
+          value: 1,
+          min: 1,  
+          class: "rui-input w-16 text-center",
+          data: { 
+            item: "interval", 
+            action: "input->#{identifier}#onCardInputChanged" 
+          } %> 
+
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.month", count: rec_ui.initial_interval, default: "month(s)") %>
+    </span>
+  </div>
+
+  <%# Grid of Nth Days (1st, 2nd, 3rd, 4th, 5th, Last) %>
+  <div class="space-y-1">
+    <% %w[1 2 3 4 5 -1].each do |val| %>
+      <div class="grid grid-cols-8 gap-1 items-center">
+        <%# Row Label (Ordinal Name) %>
+        <div class="col-span-1 text-[10px] text-right pr-1">
+          <span class="rui-label mb-0 text-[10px] font-bold">
+            <%= t("recurrence_ui.nth_names.#{val}") %>
+          </span>
+        </div>
+        
+        <%# Day Buttons Grid %>
+        <div class="col-span-7 grid grid-cols-7 gap-1">
+          <% days_for_ui.each do |day_idx| %>
+            <% is_selected = selected_nth_days[val.to_s]&.include?(day_idx) %>
+            <button type="button" 
+                    class="rui-day-btn"
+                    data-nth="<%= val %>"
+                    data-day="<%= day_idx %>"
+                    data-<%= identifier %>-target="nthDayBtn"
+                    data-selected="<%= !!is_selected %>" 
+                    data-action="click-><%= identifier %>#toggleDay">
+              <%= t('recurrence_ui.date.abbr_day_names', locale: I18n.locale)[day_idx] %> 
+            </button>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/recurrence_ui/_rdates.html.erb

@@ -0,0 +1,50 @@
+<%# app/views/recurrence_ui/_rdates.html.erb %>
+<%# Additional Dates (RDATES) Section %>
+<div class="space-y-1.5">
+  <%# 1. Section Label %>
+  <label class="rui-label flex items-center gap-1">
+   <%= t("recurrence_ui.labels.rdates", locale: locale, default: "Additional Dates") %>
+  </label>
+
+  <%# 2. Container for RDATE Chips %>
+  <div data-<%= identifier %>-target="rdatesContainer" class="flex flex-wrap gap-1">
+    <% rdates.each do |rdate| %>
+      <% date_str = rdate.is_a?(Date) || rdate.is_a?(Time) ? rdate.strftime("%Y-%m-%d") : rdate.to_s %>
+      <span class="rui-chip rui-chip--rdate" data-rdate-value="<%= date_str %>">
+        <button type="button" 
+                data-action="click-><%= identifier %>#removeRdate" 
+                class="rui-chip__remove-btn" 
+                title="<%= t('recurrence_ui.actions.remove', default: 'Delete') %>">✕</button>
+        <span><%= rec_ui._formatDate(date_str) rescue date_str %></span>
+      </span>
+    <% end %>
+  </div>
+
+  <%# 3. Date Input and Add Button %>
+  <div class="flex items-center gap-1.5 pt-1">
+    <input type="date" 
+           data-<%= identifier %>-target="rdateInput" 
+           data-action="input-><%= identifier %>#onDateInputChange"
+           class="rui-input w-full text-xs py-1 px-2">
+    
+    <button type="button" 
+            data-<%= identifier %>-target="addRdateBtn"
+            data-action="click-><%= identifier %>#addRdate" 
+            disabled
+            title="<%= t('recurrence_ui.actions.add_rdate', default: 'Add date') %>"
+            class="rui-btn rui-btn-primary px-2 py-1 text-xs font-bold">
+      +
+    </button>
+  </div>
+</div>
+
+<%# 4. Template for Dynamically Generated RDATE Chips via JS %>
+<template data-<%= identifier %>-target="rdateTemplate">
+  <span class="rui-chip rui-chip--rdate" data-rdate-value="VALUE">
+    <button type="button" 
+            data-action="click-><%= identifier %>#removeRdate" 
+            class="rui-chip__remove-btn" 
+            title="<%= t('recurrence_ui.actions.remove', default: 'Delete') %>">✕</button>
+    <span>LABEL</span>
+  </span>
+</template>

data/app/views/recurrence_ui/_rule_card.html.erb

@@ -0,0 +1,61 @@
+<%# app/views/recurrence_ui/_rule_card.html.erb %>
+<div data-<%= identifier %>-target="ruleCard" class="group rui-card-container w-full">
+  
+  <%# 1. Rule Header: Card border & Clickable Area %>
+  <div class="rui-card-header" data-action="click-><%= identifier %>#toggleCardAccordion">
+    
+    <%# Full Rule Text Summary %>
+    <span data-item="cardSummary" class="rui-accordion-link">
+      <%= t('recurrence_ui.labels.new_rule', default: 'New rule') %>
+    </span>
+
+    <%# Delete Button (Positioned on the Right) %>
+    <button type="button" 
+            data-action="click-><%= identifier %>#removeRule" 
+            title="<%= t('recurrence_ui.actions.remove', default: 'Delete') %>"
+            class="rui-btn-remove-card">
+      ✕
+    </button>
+
+  </div>
+
+  <%# 2. Rule Accordion Body %>
+  <div data-<%= identifier %>-target="cardBody" class="hidden rui-card-body">
+    
+    <%# Frequency Selector Block %>
+    <div>
+      <label class="rui-label">
+        <%= t('recurrence_ui.labels.frequency', default: 'Частота') %>
+      </label>
+      <select data-item="ruleType" 
+              data-action="change-><%= identifier %>#toggleCardFields" 
+              class="rui-select w-full">
+        <% rule_options.each do |label, value| %>
+          <option value="<%= value %>"><%= label %></option>
+        <% end %>
+      </select>
+    </div>
+
+    <%# Dynamic Specific Rule Fields %>
+    <% rule_options.map(&:last).each do |rule| %>
+      <div data-item="specificFields" data-rule="<%= rule %>" class="hidden">
+        <%= render "recurrence_ui/#{rule}", form: form, identifier: identifier, days_for_ui: days_for_ui, rec_ui: rec_ui %>
+      </div>
+    <% end %>
+
+    <%# Termination Settings Section %>
+    <div data-item="terminationBlock">
+      <%= render "recurrence_ui/termination", form: form, identifier: identifier, rec_ui: rec_ui %>
+    </div>
+
+    <%# Accordion Close Action (Positioned on the Right) %>
+    <div class="pt-1 text-right">
+      <button type="button" 
+              data-action="click-><%= identifier %>#toggleCardAccordion" 
+              class="rui-btn-secondary">
+        <%= t('recurrence_ui.actions.done', default: 'Done') %>
+      </button>
+    </div>
+
+  </div>
+</div>

data/app/views/recurrence_ui/_summary_link.html.erb

@@ -0,0 +1,25 @@
+<%# app/views/recurrence_ui/_summary_link.html.erb %>
+<%# Summary Link (Display Mode) %>
+<div data-<%= identifier %>-target="displayMode" class="group cursor-pointer py-0.5">
+  <div class="flex items-center gap-2">
+    
+    <%# Interactive Summary Text with full dotted/dashed underline %>
+    <div class="flex-1 min-w-0">
+      <span 
+        data-<%= identifier %>-target="summaryText" 
+        data-action="click-><%= identifier %>#editRule"
+        class="rui-summary-link"
+      >
+        <%= t("recurrence_ui.one_time", default: "Does not repeat") %>    
+      </span>
+    </div>
+
+    <%# Pencil Icon - visible on hover %>
+    <div class="rui-summary-icon">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+      </svg>
+    </div>
+
+  </div>
+</div>

data/app/views/recurrence_ui/_termination.html.erb

@@ -0,0 +1,44 @@
+<%# app/views/recurrence_ui/_termination.html.erb %>
+<%# Termination / End Condition Section for Recurrence Rules %>
+<div class="rui-divider pt-3" data-item="termination">
+  <label class="rui-label mb-2">
+    <%= t("recurrence_ui.labels.termination", default: "Ends") %>
+  </label>
+  
+  <div class="flex flex-wrap items-center gap-2">
+    <%# Termination Type Selector %>
+    <%= select_tag :end_type, 
+        options_for_select([
+          [t("recurrence_ui.termination_types.never", default: "Never"), 'never'], 
+          [t("recurrence_ui.termination_types.until", default: "On date"), 'until'], 
+          [t("recurrence_ui.termination_types.count", default: "After number of times"), 'count']
+        ]), 
+        class: "rui-select", 
+        data: { 
+          item: "endType", 
+          "#{identifier}_target": "endType",
+          action: "change->#{identifier}#toggleEndFields change->#{identifier}#onCardInputChanged" 
+        } 
+    %>
+    
+    <%# Specific End Date Input %>
+    <input type="date" 
+           class="rui-input hidden text-xs" 
+           data-item="endDateInput" 
+           data-<%= identifier %>-target="endDate"
+           data-action="change-><%= identifier %>#onCardInputChanged">
+    
+    <%# Count Input Field %>
+    <div data-item="endCount" data-<%= identifier %>-target="endCount" class="hidden flex items-center gap-2">
+      <input type="number" min="1" placeholder="10" 
+             class="rui-input w-20 text-xs" 
+             data-item="endCountInput" 
+             data-<%= identifier %>-target="endCountInput"
+             data-action="input-><%= identifier %>#onCardInputChanged">
+      
+      <span class="rui-inline-label text-xs uppercase font-semibold">
+        <%= t("recurrence_ui.labels.times", default: "times") %>
+      </span>
+    </div>
+  </div>
+</div>

data/app/views/recurrence_ui/_weekly.html.erb

@@ -0,0 +1,44 @@
+<%# app/views/recurrence_ui/_weekly.html.erb %>
+<%# Weekly Recurrence Rule Options %>
+<% selected_days = local_assigns[:selected_weekly_days] || rec_ui.selected_weekly_days %>
+
+<div class="space-y-3" data-item="specificFields" data-rule="weekly">
+  <%# Interval Input Header %>
+  <div class="flex items-center space-x-2">
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.every_week", default: "Every") %>
+    </span>
+    
+    <%= number_field_tag nil, rec_ui.initial_interval,
+          value: 1, 
+          min: 1, 
+          class: "rui-input w-16 text-center",
+          data: { 
+            item: "interval",
+            action: "input->#{identifier}#onCardInputChanged"
+          } %> 
+          
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.week", count: rec_ui.initial_interval, default: "week(s)") %>
+    </span>
+  </div>
+
+  <%# Days of Week Selection Grid %>
+  <div>
+    <div class="grid grid-cols-7 gap-1">
+      <% days_for_ui.each do |day_idx| %>
+        <%# Abbreviated day name based on current locale %>
+        <% day_name = t('recurrence_ui.date.abbr_day_names', locale: I18n.locale)[day_idx] %>
+        
+        <button type="button" 
+                class="rui-day-btn"
+                data-value="<%= day_idx %>" 
+                data-selected="<%= selected_days.include?(day_idx) %>"
+                data-action="click-><%= identifier %>#toggleDay" 
+                data-<%= identifier %>-target="dayButton">
+          <%= day_name %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/recurrence_ui/_yearly_by_day_of_month.html.erb

@@ -0,0 +1,63 @@
+<%# app/views/recurrence_ui/_yearly_by_day_of_month.html.erb %>
+<%# Yearly Recurrence Rule Options (By Day of Month) %>
+<% selected_days_for_yearly = local_assigns.fetch(:selected_days_for_yearly, {}) %>
+
+<div class="space-y-3" data-item="specificFields" data-rule="yearly_by_day_of_month">
+  <%# Interval Input Header %>
+  <div class="flex items-center space-x-2">
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.every", default: "Every") %>
+    </span>
+
+    <%= number_field_tag nil, rec_ui.initial_interval,
+          value: 1, 
+          min: 1, 
+          class: "rui-input w-16 text-center",
+          data: { 
+            item: "interval", 
+            action: "input->#{identifier}#onCardInputChanged" 
+          } %>
+
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.year", count: rec_ui.initial_interval, default: "year(s)") %>
+    </span>
+  </div>
+
+  <%# Month Selector %>
+  <div data-<%= identifier %>-target="monthSelector" class="flex items-center gap-3">
+    <label class="rui-inline-label whitespace-nowrap">
+      <%= t("recurrence_ui.labels.choose_month", default: "Choose month") %>:
+    </label>
+
+    <select data-<%= identifier %>-target="monthInput" 
+            data-item="month" 
+            data-action="change-><%= identifier %>#onCardInputChanged" 
+            class="rui-select w-full sm:w-auto">
+      <% (1..12).each do |m| %>
+        <% month_name = I18n.t("recurrence_ui.date.standalone_month_names", default: I18n.t("recurrence_ui.date.month_names"))[m] %>
+        <option value="<%= m %>"><%= month_name %></option>
+      <% end %>
+    </select>
+  </div>
+
+  <%# Month Days Selection Section %>
+  <div data-<%= identifier %>-target="monthlyDays">
+    <label class="rui-label mb-2">
+      <%= t("recurrence_ui.labels.select_dates", default: "Select dates") %>:
+    </label>
+    
+    <div class="grid grid-cols-7 gap-1">
+      <% (1..31).each do |day| %>
+        <% is_selected = selected_days_for_yearly.to_a.include?(day) %> 
+        <button type="button" 
+                class="rui-day-btn"
+                data-day="<%= day %>"
+                data-<%= identifier %>-target="dayButton"
+                data-selected="<%= is_selected %>"
+                data-action="click-><%= identifier %>#toggleDay">
+          <%= day %>
+        </button>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/recurrence_ui/_yearly_by_weekday.html.erb

@@ -0,0 +1,72 @@
+<%# app/views/recurrence_ui/_yearly_by_weekday.html.erb %>
+<%# Yearly Recurrence Rule Options (By Weekday / Nth Day) %>
+<% selected_nth_days = local_assigns.fetch(:selected_nth_days, {}) %>
+
+<div class="space-y-3" data-item="specificFields" data-rule="yearly_by_weekday">
+  <%# Interval Input Header %>
+  <div class="flex items-center space-x-2">
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.every", default: "Every") %>
+    </span>
+
+    <%= number_field_tag nil, rec_ui.initial_interval, 
+          value: 1,      
+          min: 1, 
+          class: "rui-input w-16 text-center",
+          data: { 
+            item: "interval", 
+            action: "input->#{identifier}#onCardInputChanged" 
+          } %>
+
+    <span class="rui-inline-label">
+      <%= t("recurrence_ui.labels.year", count: rec_ui.initial_interval, default: "year(s)") %>
+    </span>
+  </div>
+
+  <%# Month Selector %>
+  <div data-<%= identifier %>-target="monthSelector" class="flex items-center gap-3">
+    <label class="rui-inline-label whitespace-nowrap">
+      <%= t("recurrence_ui.labels.choose_month", default: "Choose month") %>:
+    </label>
+
+    <select data-<%= identifier %>-target="monthInput" 
+            data-item="month" 
+            data-action="change-><%= identifier %>#onCardInputChanged" 
+            class="rui-select w-full sm:w-auto">
+      <% (1..12).each do |m| %>
+        <% month_name = I18n.t("recurrence_ui.date.standalone_month_names", default: t("recurrence_ui.date.month_names"))[m] %>
+        <option value="<%= m %>"><%= month_name %></option>
+      <% end %>
+    </select>
+  </div>
+
+  <%# Grid of Nth Days (1st, 2nd, 3rd, 4th, 5th, Last) %>
+  <div class="space-y-1">
+    <% %w[1 2 3 4 5 -1].each do |val| %>
+      <div class="grid grid-cols-8 gap-1 items-center">
+        <%# Row Label (Ordinal Name) %>
+        <div class="col-span-1 text-[10px] text-right pr-1">
+          <span class="rui-label mb-0 text-[10px] font-bold">
+            <%= t("recurrence_ui.nth_names.#{val}") %>
+          </span>
+        </div>
+        
+        <%# Day Buttons Grid %>
+        <div class="col-span-7 grid grid-cols-7 gap-1">
+          <% days_for_ui.each do |day_idx| %>
+            <% is_selected = selected_nth_days[val.to_s]&.include?(day_idx) %>
+            <button type="button" 
+                    class="rui-day-btn"
+                    data-nth="<%= val %>"
+                    data-day="<%= day_idx %>"
+                    data-<%= identifier %>-target="nthDayBtn"
+                    data-selected="<%= !!is_selected %>" 
+                    data-action="click-><%= identifier %>#toggleDay">
+              <%= t('recurrence_ui.date.abbr_day_names', locale: I18n.locale)[day_idx] %> 
+            </button>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>