recurrence_ui 0.1.0

data/app/components/recurrence_ui/recurrence_picker_component.html.erb

@@ -0,0 +1,234 @@
+<%# app/components/recurrence_ui/recurrence_picker_component.html.erb %>
+<% I18n.with_locale(locale) do %>
+  <div data-controller="<%= identifier %>" 
+       data-<%= identifier %>-time-zone-value="<%= time_zone %>"
+       data-<%= identifier %>-translations-value="<%= t('recurrence_ui', locale: locale).to_json %>"
+       data-<%= identifier %>-locale-value="<%= locale %>"
+       class="rui-container"
+       data-rui-theme="<%= RecurrenceUi.configuration.theme_mode %>">  
+
+    <%# 1. Секция полей времени, окончания и часового пояса %>
+    <div class="space-y-4 pb-4 border-b border-[var(--rui-border-color)]">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        
+        <!-- 1. Дата и время начала (всегда на одной строке, не тянутся) -->
+        <div>
+          <%= form.label :start_at, t('recurrence_ui.labels.start_at'), class: "rui-label block" %>
+          <div class="flex items-center space-x-2 mt-1">
+            <%= form.date_field :form_start_date, 
+      value: initial_start_at&.to_date || Date.current,                  
+      class: "rui-input w-36 shrink-0",
+                  data: { "#{identifier}_target": "startDate", action: "change->#{identifier}#calculateEndDateFromDuration" } %>
+            <%= form.time_field :form_start_time, 
+                  value: initial_start_at&.strftime('%H:%M') || '09:00', 
+                  class: "rui-input w-24 shrink-0",
+                  data: { "#{identifier}_target": "startTime", action: "change->#{identifier}#calculateEndDateFromDuration" } %>
+          </div>  
+        </div>
+
+        <!-- Часовой пояс -->
+        <div>
+          <%= form.label :time_zone, t('recurrence_ui.labels.time_zone'), class: "rui-label block" %>
+          <%= form.time_zone_select :time_zone, 
+                ActiveSupport::TimeZone.all, 
+                { default: record.public_send(time_zone_field).presence || Time.zone.name }, 
+                { class: "rui-input rui-select cursor-pointer w-full mt-1" } %>
+        </div>
+
+      </div>
+    </div>
+
+<!-- Блок выбора: Длительность или Окончание -->
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
+  
+  <!-- Вариант 4.1: Длительность -->
+  <label class="flex items-start space-x-3 p-2 rounded-lg transition-colors cursor-pointer hover:bg-[var(--rui-hover-bg-soft)]">
+  <%= form.radio_button :form_duration_mode, :duration,
+        checked: (initial_form_duration_mode == :duration),
+        class: "mt-1 shrink-0",
+        data: { "#{identifier}_target": "modeDuration", action: "change->#{identifier}#toggleDurationEndMode" } %>
+
+  <div class="flex-1 min-w-0">
+    <span class="rui-label font-medium select-none">
+      <%= t('recurrence_ui.labels.duration') %>
+    </span>
+
+    <div class="flex flex-nowrap items-start gap-3 mt-2"
+         data-<%= identifier %>-target="durationContainer">
+
+      <%# Дни %>
+      <div class="flex flex-col items-center gap-1 shrink-0"
+           onclick="event.stopPropagation()">
+        <span class="rui-duration-unit">
+          <%= t('recurrence_ui.duration.form_days') %>
+        </span>
+
+        <%= form.number_field :form_duration_days,
+              value: initial_form_duration_days,
+              min: 0,
+              class: "rui-input w-16 text-center",
+              data: { "#{identifier}_target": "daysField", action: "change->#{identifier}#calculateEndDateFromDuration" } %>
+      </div>
+
+      <%# Часы %>
+      <div class="flex flex-col items-center gap-1 shrink-0"
+           onclick="event.stopPropagation()">
+        <span class="rui-duration-unit">
+          <%= t('recurrence_ui.duration.form_hours') %>
+        </span>
+
+        <%= form.number_field :form_duration_hours,
+              value: initial_form_duration_hours,
+              min: 0,
+              max: 23,
+              class: "rui-input w-16 text-center",
+              data: { "#{identifier}_target": "hoursField", action: "change->#{identifier}#calculateEndDateFromDuration" } %>
+      </div>
+
+      <%# Минуты %>
+      <div class="flex flex-col items-center gap-1 shrink-0"
+           onclick="event.stopPropagation()">
+        <span class="rui-duration-unit">
+          <%= t('recurrence_ui.duration.form_minutes') %>
+        </span>
+
+        <%= form.number_field :form_duration_minutes,
+              value: initial_form_duration_minutes,
+              min: 0,
+              max: 59,
+              class: "rui-input w-16 text-center",
+              data: { "#{identifier}_target": "minutesField", action: "change->#{identifier}#calculateEndDateFromDuration" } %>
+      </div>
+
+    </div>
+  </div>
+</label>
+
+  <!-- Вариант 4.2: Дата и время окончания -->
+  <label class="flex items-start space-x-3 p-2 rounded-lg transition-colors cursor-pointer hover:bg-[var(--rui-hover-bg-soft)]">
+    <%= form.radio_button :form_duration_mode, :end_at, 
+          checked: (initial_form_duration_mode == :end_at), 
+          class: "mt-1 shrink-0",
+          data: { "#{identifier}_target": "modeEnd", action: "change->#{identifier}#toggleDurationEndMode" } %>
+    
+    <div class="flex-1 min-w-0">
+      <span class="rui-label"><%= t('recurrence_ui.labels.end_at') %></span>  
+      
+      <!-- Поля даты и времени окончания -->
+      <div class="flex items-center space-x-2 mt-1" onclick="event.stopPropagation()">
+        <%= form.date_field :form_end_date, 
+              value: initial_end_at&.to_date || Date.current, 
+              class: "rui-input w-36 shrink-0 disabled:opacity-50 disabled:--rui-input-disabled-bg disabled:cursor-not-allowed",
+              disabled: (initial_form_duration_mode != :end_at),
+              data: { "#{identifier}_target": "endDateField"} %>
+        <%= form.time_field :form_end_time,
+              value: initial_end_at&.strftime('%H:%M') || '09:00', 
+              class: ["rui-input w-24 shrink-0 disabled:opacity-50 disabled:--rui-input-disabled-bg disabled:cursor-not-allowed", ("rui-input-error" if record.errors[:form_end_time].any?)],
+              disabled: (initial_form_duration_mode != :end_at),
+              data: { "#{identifier}_target": "endTimeField" } %>
+      </div>
+    </div>
+  </label>
+
+</div>
+
+    <!-- 4. При показе саммари: только заголовок Повторение и саммари под ним -->
+    <div data-<%= identifier %>-target="displayMode" class="space-y-1">
+      <div class="rui-panel-header">
+        <span class="rui-label">
+          <%= t('recurrence_ui.labels.recurrence') %>
+        </span>
+      </div>
+      <div>
+        <%= render "recurrence_ui/summary_link", form: form, identifier: identifier, rec_ui: self %>
+      </div>
+    </div>
+
+    <!-- 5. Режим редактирования: заголовок Повторение + кнопка кода напротив, все поля под ними -->
+    <div data-<%= identifier %>-target="editMode" class="hidden space-y-3 pt-2">  
+      
+      <!-- Шапка с кнопкой кода справа напротив заголовка Повторение -->
+      <div class="rui-panel-header flex items-center justify-between">
+        <span class="rui-header-title">
+          <%= t('recurrence_ui.labels.recurrence') %>
+        </span>
+        <button type="button" 
+                data-action="click-><%= identifier %>#toggleCodeEditor" 
+                title="<%= t('recurrence_ui.actions.code_mode') %>"
+                class="rui-btn-secondary font-mono text-xs px-2 py-1">
+          &lt;/&gt;
+        </button>
+      </div>
+
+      <%# Visual Rule Editor Section %>
+      <div data-<%= identifier %>-target="visualEditor" class="space-y-3">
+        <div class="space-y-1">
+          <%# Dynamic Rule Cards Container %>
+          <div data-<%= identifier %>-target="rulesContainer" class="space-y-2"></div>
+
+          <%# Add Rule Action Button %>
+          <div class="pt-1">
+            <button type="button" 
+                    data-action="click-><%= identifier %>#addRule" 
+                    class="rui-link-action">
+              <span class="font-bold">+</span> <%= t('recurrence_ui.actions.add_rule', default: 'Add rule') %>
+            </button>
+          </div>
+        </div>
+
+        <%# Exceptions & Additional Dates Grid %>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-3 pt-2 rui-divider">
+          <div data-<%= identifier %>-target="rdatesBlock" class="hidden">
+            <%= render "recurrence_ui/rdates", form: form, identifier: identifier, rec_ui: self, rdates: rules[:rdates] || [] %>
+          </div>
+          <div data-<%= identifier %>-target="exceptionsBlock" class="hidden">
+            <%= render "recurrence_ui/exceptions", form: form, identifier: identifier, rec_ui: self, exdates: rules[:exdates] || [] %>
+          </div>            
+        </div>
+
+        <%# Bottom Action Bar %>
+        <div class="pt-2">
+          <%= render "recurrence_ui/footer_actions", form: form, identifier: identifier, rec_ui: self %>
+        </div>
+      </div>
+
+      <%# Raw JSON / Code Editor Panel %>
+      <div data-<%= identifier %>-target="codeEditor" class="hidden space-y-3">
+        <div>
+          <label class="rui-label">
+            <%= t('recurrence_ui.labels.raw_json', default: 'Raw JSON') %>
+          </label>
+          <textarea data-<%= identifier %>-target="iceCubeField" 
+                    rows="6" 
+                    class="rui-textarea font-mono text-xs w-full"></textarea>
+        </div>
+        <div class="flex items-center justify-end space-x-2">
+          <button type="button" 
+                  data-action="click-><%= identifier %>#toggleCodeEditor" 
+                  class="rui-btn-secondary">
+            <%= t('recurrence_ui.actions.cancel') %>
+          </button>
+          <button type="button" 
+                  data-action="click-><%= identifier %>#applyCodeChanges" 
+                  class="rui-btn-primary">
+            <%= t('recurrence_ui.actions.apply_code') %>
+          </button>
+        </div>
+      </div>
+
+    </div>
+
+    <%# Rule Card Template %>
+    <template data-<%= identifier %>-target="ruleCardTemplate">
+      <%= render "recurrence_ui/rule_card", 
+                 form: form, 
+                 identifier: identifier, 
+                 days_for_ui: days_for_ui, 
+                 rec_ui: self, 
+                 rule_options: rule_options %>
+    </template>
+
+    <%# Hidden Form Field %>
+    <%= form.hidden_field field_name, value: rules_json, data: { "#{identifier}_target": "hiddenField" } %>
+  </div>
+<% end %>

data/app/components/recurrence_ui/recurrence_picker_component.rb

@@ -0,0 +1,204 @@
+# app/components/recurrence_ui/recurrence_picker_component.rb
+module RecurrenceUi
+  class RecurrencePickerComponent < ViewComponent::Base
+    include ActionView::Helpers::TranslationHelper
+    attr_reader :record, :i18n_prefix, :identifier, :locale, :time_zone, :week_start, :enabled_rule_types
+
+    def initialize(
+      record:,
+      form: nil,
+      i18n_prefix: 'recurrence_ui',
+      locale: nil,
+      time_zone: nil,
+      week_start: nil,
+      enabled_rule_types: nil
+    )
+      @raw_form    = form
+      @record      = record
+      @i18n_prefix = i18n_prefix
+      @identifier  = "recurrence-ui"
+
+      # Resolve enabled_rule_types considering allowed values and order preservation
+      @enabled_rule_types = RecurrenceUi.config.resolved_enabled_rule_types(enabled_rule_types)
+
+      # Resolve environment configuration fallbacks
+      @locale     = RecurrenceUi.config.resolved_locale(locale)
+      @time_zone  = RecurrenceUi.config.resolved_time_zone(time_zone)
+      @week_start = RecurrenceUi.config.resolved_week_start(week_start)
+
+      log_configuration_details if Rails.env.development?
+    end
+    def field_name
+      @field_name ||= if record.class.respond_to?(:recurrence_rules_field)
+        record.class.recurrence_rules_field
+      else
+        RecurrenceUi.config.default_recurring_rules_field
+      end
+    end
+    def form
+      @form ||= @raw_form || ActionView::Helpers::FormBuilder.new(
+        record_name,
+        record,
+        helpers,
+        {}
+      )
+    end
+    # --- Динамические хелперы для вычисления начальных значений длительности ---
+    # Вычисляет количество дней длительности из записи
+    def initial_form_duration_days
+      dur = record.public_send(duration_field).to_i
+      return 0 if dur <= 0
+      (dur / 1.day).to_i
+    end
+
+    # Вычисляет оставшиеся часы длительности
+    def initial_form_duration_hours
+      dur = record.public_send(duration_field).to_i
+      return 1 if dur <= 0 # дефолтное значение, если пусто
+      ((dur % 1.day) / 1.hour).to_i
+    end
+
+    # Вычисляет оставшиеся минуты длительности
+    def initial_form_duration_minutes
+      dur = record.public_send(duration_field).to_i
+      return 0 if dur <= 0
+      ((dur % 1.hour) / 1.minute).to_i
+    end
+
+    # Определяет, какая радиокнопка должна быть выбрана при открытии формы (:duration или :end_at)
+    def initial_form_duration_mode
+      saved_mode = rules[:form_duration_mode]
+      return saved_mode.to_sym if saved_mode.present?
+
+      :duration # дефолт
+    end
+    
+    
+    # --- Динамические хелперы для имён полей из модели ---
+
+    def start_time_field
+      @start_time_field ||= record.class.respond_to?(:recurrence_start_time_field) ? record.class.recurrence_start_time_field : :start_at
+    end
+
+    def end_time_field
+      @end_time_field ||= record.class.respond_to?(:recurrence_end_time_field) ? record.class.recurrence_end_time_field : :end_at
+    end
+    # Возвращает начало события в часовом поясе самого события.
+    def initial_start_at
+      value = record.public_send(start_time_field)
+      return if value.blank?
+
+      value.in_time_zone(event_time_zone)
+    end
+
+    # Возвращает окончание события в часовом поясе самого события.
+    def initial_end_at
+      value = record.public_send(end_time_field)
+      return if value.blank?
+
+      value.in_time_zone(event_time_zone)
+    end
+
+    # Определяет часовой пояс события.
+    def event_time_zone
+      if record.respond_to?(:event_time_zone) && record.event_time_zone.present?
+        record.event_time_zone
+      else
+        zone_name = record.respond_to?(time_zone_field) ? record.public_send(time_zone_field) : nil
+
+        ActiveSupport::TimeZone[zone_name.presence] || 
+          Time.zone || 
+          ActiveSupport::TimeZone[Rails.application.config.time_zone]
+      end
+    end
+    def duration_field
+      @duration_field ||= record.class.respond_to?(:recurrence_duration_field) ? record.class.recurrence_duration_field : :duration
+    end
+    def time_zone_field
+      @time_zone_field ||= record.class.respond_to?(:recurrence_time_zone_field) ? record.class.recurrence_time_zone_field : :time_zone
+    end
+
+    def rules
+      @rules ||= begin
+        raw = record.public_send(field_name)
+        parsed = raw.is_a?(String) ? (JSON.parse(raw) rescue {}) : raw
+        (parsed || {}).with_indifferent_access
+      end
+    end
+
+    def rules_json
+      rules.to_json
+    end
+
+    def current_rule_type
+      raw_type = rules[:rule_type].to_s.demodulize.underscore.gsub('_rule', '')
+      return 'never' if raw_type.blank? || raw_type == 'never'
+
+      if %w[monthly yearly].include?(raw_type)
+        sub_type = validations[:day_of_week].present? ? 'by_weekday' : 'by_day_of_month'
+        "#{raw_type}_#{sub_type}"
+      else
+        raw_type
+      end
+    end
+
+    def validations           = rules[:validations] || {}
+    def initial_interval      = rules[:interval] || 1
+    def selected_weekly_days  = (validations[:day] || []).map(&:to_i)
+    def selected_monthly_days = (validations[:day_of_month] || []).map(&:to_i)
+    def selected_nth_days     = validations[:day_of_week] || {}
+
+    # Uses the pre-resolved @enabled_rule_types directly without re-resolving
+    def rule_options
+      enabled_rule_types.reject { |type| type == 'never' }.map do |type|
+        [I18n.t("#{i18n_prefix}.types.#{type}", locale: locale), type]
+      end
+    end
+
+    def days_for_ui
+      shift = (week_start == 1) ? 1 : 0
+      (0..6).to_a.rotate(shift)
+    end
+
+    def months_for_ui
+      I18n.with_locale(locale) do
+        (1..12).map { |m| [I18n.t("#{i18n_prefix}.date.month_names", default:  I18n.t("recurrence_ui.date.month_names"))[m], m] }
+      end
+    end
+
+    def nth_weeks
+      I18n.with_locale(locale) do
+        [1, 2, 3, 4, 5, -1].map do |n| 
+          label = if n == -1
+            I18n.t("#{i18n_prefix}.last", default: "last")
+          else
+            I18n.t("#{i18n_prefix}.nth_weeks.#{n}", default: "#{n}th")
+          end
+          [n, label]
+        end
+      end
+    end
+
+    def recurrence_summary
+      rule_hash = rules
+      return "" if rule_hash.blank?
+
+      RecurrenceUi::RecurrenceFormatterService.new(
+        rule_hash,
+        locale: locale,
+        time_zone: event_time_zone,
+        week_start: week_start
+      ).to_s
+    end
+
+    private
+
+    def record_name
+      record.respond_to?(:model_name) ? record.model_name.param_key : :record
+    end
+
+    def log_configuration_details
+      Rails.logger.debug("[RecurrenceUi] Locale: #{locale} | TimeZone: #{time_zone} | WeekStart: #{week_start}")
+    end
+  end
+end

data/app/controllers/recurrence_ui/application_controller.rb

@@ -0,0 +1,32 @@
+# app/controllers/recurrence_ui/application_controller.rb
+module RecurrenceUi
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+
+    around_action :with_recurrence_context
+
+    private
+
+    def with_recurrence_context(&action)
+      # Resolve the locale, time zone, and week start based on the provided params or defaults
+      resolved_locale     = RecurrenceUi.config.resolved_locale(params[:locale])
+      resolved_time_zone  = RecurrenceUi.config.resolved_time_zone(params[:time_zone])
+      
+      raw_week_start      = RecurrenceUi.config.resolved_week_start(params[:week_start])
+      resolved_week_start = (raw_week_start == 1) ? :monday : :sunday
+
+      # Force the environment to the time of HTTP request execution
+      I18n.with_locale(resolved_locale) do
+        Time.use_zone(resolved_time_zone) do
+          old_week_start = Date.beginning_of_week
+          Date.beginning_of_week = resolved_week_start
+          begin
+            action.call
+          ensure
+            Date.beginning_of_week = old_week_start
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/recurrence_ui/application_helper.rb

@@ -0,0 +1,23 @@
+# app/helpers/recurrence_ui/application_helper.rb
+module RecurrenceUi
+  module ApplicationHelper
+    def recurrence_ui_tag(options = {})
+      # Ensure that the locale is set to the current locale if not provided in options
+      # This is important for the translations to work correctly, especially when the locale is changed dynamically in the application.
+      # Priority: local options -> gem config -> defaults
+      locale     = options[:locale] || RecurrenceUi.config.resolved_locale
+      time_zone  = options[:time_zone] || RecurrenceUi.config.resolved_time_zone
+      week_start = options[:week_start] || RecurrenceUi.config.resolved_week_start
+
+      content_tag :div,
+        "",
+        data: {
+          controller: "recurrence-ui",
+          "recurrence-ui-locale-value": locale,
+          "recurrence-ui-time-zone-value": time_zone,
+          "recurrence-ui-week-start-value": week_start,
+          "recurrence-ui-translations-value": I18n.t("recurrence_ui", locale: locale).to_json
+        }
+    end
+  end
+end

data/app/javascript/recurrence_ui/index.js

@@ -0,0 +1,22 @@
+import RecurrenceUiController from "./recurrence_ui_controller"
+
+export function registerRecurrenceUiController(application) {
+  if (application) {
+    application.register("recurrence-ui", RecurrenceUiController)
+  }
+}
+
+// Automatically register the controller if Stimulus is already initialized
+if (typeof window !== "undefined") {
+  if (window.Stimulus) {
+    window.Stimulus.register("recurrence-ui", RecurrenceUiController)
+  } else {
+    document.addEventListener("DOMContentLoaded", () => {
+      if (window.Stimulus) {
+        window.Stimulus.register("recurrence-ui", RecurrenceUiController)
+      }
+    })
+  }
+}
+
+export { RecurrenceUiController }