hakumi_components 0.1.3.pre

data/app/components/hakumi/calendar/component.rb

@@ -0,0 +1,448 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Calendar
+    class Component < Hakumi::BaseComponent
+      MODES = %i[month year quarter decade].freeze
+      WEEK_DAYS = %i[sunday monday tuesday wednesday thursday friday saturday].freeze
+      LOCALES = {
+        en: {
+          days_short: %w[Su Mo Tu We Th Fr Sa],
+          days_full: %w[Sunday Monday Tuesday Wednesday Thursday Friday Saturday],
+          months_short: %w[Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec],
+          months_full: %w[January February March April May June July August September October November December]
+        },
+        es: {
+          days_short: %w[Do Lu Ma Mi Ju Vi Sá],
+          days_full: %w[Domingo Lunes Martes Miércoles Jueves Viernes Sábado],
+          months_short: %w[Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic],
+          months_full: %w[Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre]
+        }
+      }.freeze
+
+      renders_one :header_content
+
+      def self.extract_controller_locals(params)
+        {
+          value: params[:value],
+          default_value: params[:default_value],
+          mode: params[:mode],
+          fullscreen: params[:fullscreen],
+          show_week: params[:show_week],
+          locale: params[:locale],
+          valid_range: params[:valid_range]
+        }
+      end
+
+      EVENT_TYPES = %i[success warning error default].freeze
+
+      def initialize(
+        value: nil,
+        default_value: nil,
+        mode: :month,
+        fullscreen: true,
+        show_week: false,
+        locale: :en,
+        valid_range: nil,
+        year_range: nil,
+        events: {},
+        date_cell_render: nil,
+        month_cell_render: nil,
+        header_render: nil,
+        disabled_date: nil,
+        static: nil,
+        **html_options
+      )
+        @value = parse_date(value)
+        @default_value = parse_date(default_value)
+        @mode = mode&.to_sym || :month
+        @fullscreen = fullscreen.nil? ? true : fullscreen
+        @show_week = show_week || false
+        @locale = locale&.to_sym || :en
+        @valid_range = normalize_valid_range(valid_range)
+        @year_range = year_range
+        @events = normalize_events(events)
+        @date_cell_render = date_cell_render
+        @month_cell_render = month_cell_render
+        @header_render = header_render
+        @disabled_date = disabled_date
+        @static = static.nil? ? has_custom_cell_render? : static
+        @html_options = html_options
+
+        validate_props!
+      end
+
+      def has_custom_cell_render?
+        @date_cell_render.respond_to?(:call) || @month_cell_render.respond_to?(:call)
+      end
+
+      def static?
+        @static
+      end
+
+      def current_date
+        @value || @default_value || Date.today
+      end
+
+      # Value that is actually selected (without Date.today fallback)
+      # Used for determining visual selection, not navigation
+      def selected_value
+        @value || @default_value
+      end
+
+      def current_year
+        current_date.year
+      end
+
+      def current_month
+        current_date.month
+      end
+
+      def calendar_classes
+        class_names(
+          "calendar",
+          {
+            fullscreen: @fullscreen,
+            card: !@fullscreen,
+            "mode-month": month_mode?,
+            "mode-year": year_mode?,
+            "mode-quarter": quarter_mode?,
+            "mode-decade": decade_mode?,
+            "show-week": @show_week
+          },
+          @html_options[:class]
+        )
+      end
+
+      def wrapper_attributes
+        base = {
+          class: calendar_classes,
+          data: data_attributes
+        }
+        merge_attributes(base, @html_options.except(:class))
+      end
+
+      def data_attributes
+        attrs = {
+          controller: "hakumi--calendar",
+          "hakumi--calendar-mode-value": @mode,
+          "hakumi--calendar-year-value": current_year,
+          "hakumi--calendar-month-value": current_month,
+          "hakumi--calendar-fullscreen-value": @fullscreen,
+          "hakumi--calendar-locale-value": @locale,
+          "hakumi--calendar-static-value": @static
+        }
+        attrs["hakumi--calendar-events-value"] = events_to_json if @events.present?
+        attrs
+      end
+
+      def events_to_json
+        @events.transform_keys { |date| date.to_s }.transform_values do |events|
+          events.map do |event|
+            {
+              id: event[:id],
+              type: event[:type]&.to_s || "default",
+              content: event[:content],
+              html: render_event_badge(event)
+            }
+          end
+        end.to_json
+      end
+
+      def render_event_badge(event)
+        helpers.render(
+          Hakumi::Badge::Component.new(
+            status: event[:type],
+            text: event[:content]
+          )
+        ).to_s
+      end
+
+      def month_mode?
+        @mode == :month
+      end
+
+      def year_mode?
+        @mode == :year
+      end
+
+      def quarter_mode?
+        @mode == :quarter
+      end
+
+      def decade_mode?
+        @mode == :decade
+      end
+
+      def fullscreen?
+        @fullscreen
+      end
+
+      def show_week?
+        @show_week
+      end
+
+      def show_header?
+        @header_render != false
+      end
+
+      def custom_header?
+        @header_render.respond_to?(:call)
+      end
+
+      # Show year select in month, year, and quarter modes (to change year)
+      def show_year_select?
+        month_mode? || year_mode? || quarter_mode?
+      end
+
+      # Show month select only in month mode (to change month)
+      def show_month_select?
+        month_mode?
+      end
+
+      # Show mode switch only for standalone calendar (not in date pickers)
+      def show_mode_switch?
+        fullscreen? && !static?
+      end
+
+      def render_custom_header
+        return unless custom_header?
+
+        @header_render.call(
+          value: current_date,
+          type: @mode,
+          on_change: nil,
+          on_type_change: nil
+        )
+      end
+
+      def weekday_names
+        locale_data[:days_short]
+      end
+
+      def month_names
+        locale_data[:months_full]
+      end
+
+      def month_names_short
+        locale_data[:months_short]
+      end
+
+      def locale_data
+        LOCALES[@locale] || LOCALES[:en]
+      end
+
+      def weeks_in_month
+        @weeks_in_month ||= build_weeks_for_month(current_year, current_month)
+      end
+
+      def months_in_year
+        (1..12).map do |month|
+          {
+            month: month,
+            name: month_names[month - 1],
+            short_name: month_names_short[month - 1],
+            current: month == current_month && current_year == Date.today.year,
+            selected: selected_value && month == selected_value.month && current_year == selected_value.year
+          }
+        end
+      end
+
+      def quarters_in_year
+        today = Date.today
+        current_quarter = ((current_month - 1) / 3) + 1
+        selected_quarter = selected_value ? ((selected_value.month - 1) / 3) + 1 : nil
+
+        (1..4).map do |quarter|
+          {
+            quarter: quarter,
+            label: "Q#{quarter}",
+            current: quarter == current_quarter && current_year == today.year,
+            selected: selected_value && quarter == selected_quarter && current_year == selected_value.year
+          }
+        end
+      end
+
+      def years_in_decade
+        # Show 12 years: current decade (10 years) + 1 year before + 1 year after
+        decade_start = (current_year / 10) * 10
+        start_year = decade_start - 1
+        end_year = decade_start + 10
+        today = Date.today
+
+        (start_year..end_year).map do |year|
+          {
+            year: year,
+            current: year == today.year,
+            selected: selected_value && year == selected_value.year,
+            in_decade: year >= decade_start && year < decade_start + 10
+          }
+        end
+      end
+
+      def decade_range_label
+        decade_start = (current_year / 10) * 10
+        "#{decade_start}-#{decade_start + 9}"
+      end
+
+      def years_range
+        return @year_range.to_a if @year_range.is_a?(Range)
+        return @year_range if @year_range.is_a?(Array)
+
+        base_year = current_year
+        ((base_year - 10)..(base_year + 10)).to_a
+      end
+
+      def date_disabled?(date)
+        return false unless @disabled_date.respond_to?(:call)
+
+        @disabled_date.call(date)
+      end
+
+      def date_in_valid_range?(date)
+        return true unless @valid_range
+
+        start_date, end_date = @valid_range
+        (start_date.nil? || date >= start_date) && (end_date.nil? || date <= end_date)
+      end
+
+      def render_date_cell(date)
+        return @date_cell_render.call(date) if @date_cell_render.respond_to?(:call)
+
+        events_for_date(date)
+      end
+
+      def events_for_date(date)
+        items = @events[date]
+        return nil if items.blank?
+
+        safe_join(items.map do |item|
+          content_tag(:div, class: "hakumi-calendar-event hakumi-calendar-event-#{item[:type] || :default}") do
+            render Hakumi::Badge::Component.new(
+              status: item[:type] || :default,
+              text: item[:content]
+            )
+          end
+        end)
+      end
+
+      def has_events?
+        @events.present? && @events.any?
+      end
+
+      def render_month_cell(month)
+        return @month_cell_render.call(month) if @month_cell_render.respond_to?(:call)
+
+        nil
+      end
+
+      def cell_classes(date)
+        classes = [ "hakumi-calendar-cell" ]
+        classes << "hakumi-calendar-cell-in-view" if date.month == current_month
+        classes << "hakumi-calendar-cell-today" if date == Date.today
+        classes << "hakumi-calendar-cell-selected" if selected_value && date == selected_value
+        classes << "hakumi-calendar-cell-disabled" if date_disabled?(date) || !date_in_valid_range?(date)
+        classes << "hakumi-calendar-cell-weekend" if date.saturday? || date.sunday?
+        classes.join(" ")
+      end
+
+      def month_cell_classes(month_info)
+        classes = [ "hakumi-calendar-cell", "hakumi-calendar-cell-month" ]
+        classes << "hakumi-calendar-cell-selected" if month_info[:selected]
+        classes << "hakumi-calendar-cell-current" if month_info[:current]
+        classes.join(" ")
+      end
+
+      def quarter_cell_classes(quarter_info)
+        classes = [ "hakumi-calendar-cell", "hakumi-calendar-cell-quarter" ]
+        classes << "hakumi-calendar-cell-selected" if quarter_info[:selected]
+        classes << "hakumi-calendar-cell-current" if quarter_info[:current]
+        classes.join(" ")
+      end
+
+      def year_cell_classes(year_info)
+        classes = [ "hakumi-calendar-cell", "hakumi-calendar-cell-year" ]
+        classes << "hakumi-calendar-cell-selected" if year_info[:selected]
+        classes << "hakumi-calendar-cell-current" if year_info[:current]
+        classes << "hakumi-calendar-cell-disabled" unless year_info[:in_decade]
+        classes.join(" ")
+      end
+
+      def week_number(date)
+        date.cweek
+      end
+
+      private
+
+      def validate_props!
+        validate_inclusion!(:mode, MODES)
+        validate_inclusion!(:locale, LOCALES.keys)
+      end
+
+      def parse_date(value)
+        return nil if value.nil?
+        return value if value.is_a?(Date)
+        return value.to_date if value.respond_to?(:to_date)
+
+        Date.parse(value.to_s)
+      rescue ArgumentError, TypeError
+        nil
+      end
+
+      def normalize_valid_range(range)
+        return nil unless range.is_a?(Array) && range.size == 2
+
+        [ parse_date(range[0]), parse_date(range[1]) ]
+      end
+
+      def normalize_events(events)
+        return {} unless events.is_a?(Hash)
+
+        events.transform_keys { |k| parse_date(k) }.compact
+      end
+
+      def build_weeks_for_month(year, month)
+        first_day = Date.new(year, month, 1)
+        last_day = Date.new(year, month, -1)
+
+        start_date = first_day - first_day.wday
+        end_date = last_day + (6 - last_day.wday)
+
+        selected_week_number = selected_value&.cweek
+        selected_week_year = selected_value&.cwyear  # Use ISO week year, not calendar year
+
+        weeks = []
+        current = start_date
+
+        while current <= end_date
+          # Calculate Monday of this week (for ISO week number)
+          # current is Sunday (wday=0), so Monday is current + 1
+          monday = current.wday == 0 ? current + 1 : current - current.wday + 1
+          week_number = monday.cweek
+          week_year = monday.cwyear  # Use ISO week year, not calendar year
+
+          week = (0..6).map do |day_offset|
+            date = current + day_offset
+            {
+              date: date,
+              day: date.day,
+              in_month: date.month == month,
+              today: date == Date.today,
+              selected: selected_value && date == selected_value,
+              disabled: date_disabled?(date) || !date_in_valid_range?(date),
+              weekend: date.saturday? || date.sunday?
+            }
+          end
+          weeks << {
+            week_number: week_number,
+            week_selected: @show_week && selected_week_number == week_number && selected_week_year == week_year,
+            days: week
+          }
+          current += 7
+        end
+
+        weeks
+      end
+    end
+  end
+end

data/app/components/hakumi/card/component.html.erb

@@ -0,0 +1,65 @@
+<% wrapper_tag = @href.present? ? :a : :div %>
+<% wrapper_attrs = @html_options.except(:class).dup %>
+<% wrapper_attrs[:class] = classes %>
+<% if @href.present? %>
+  <% wrapper_attrs[:href] = @href %>
+  <% wrapper_attrs[:target] = @target if @target %>
+  <% wrapper_attrs[:class] = [wrapper_attrs[:class], "hakumi-card-link-wrapper"].compact.join(" ") %>
+<% end %>
+<%= content_tag(wrapper_tag, **wrapper_attrs) do %>
+  <% if @head_style.present? || @title.present? || @extra.present? %>
+    <div class="<%= head_classes %>" style="<%= @head_style %>">
+      <div class="hakumi-card-head-wrapper">
+        <% if @title.present? %>
+          <div class="hakumi-card-head-title">
+            <%= render_title %>
+          </div>
+        <% end %>
+        <% if @extra.present? %>
+          <div class="hakumi-card-extra">
+            <%= render_extra %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <% if @cover.present? %>
+    <div class="hakumi-card-cover">
+      <%= @cover %>
+    </div>
+  <% end %>
+
+  <div class="<%= body_classes %>" style="<%= @body_style %>">
+    <% if @loading %>
+      <div class="hakumi-card-loading-content">
+        <div class="hakumi-row" style="margin-bottom: 16px;">
+          <div class="hakumi-col hakumi-col-22" style="display: block; flex: 0 0 91.66666667%; max-width: 91.66666667%;">
+            <div class="hakumi-skeleton hakumi-skeleton-active">
+              <div class="hakumi-skeleton-content">
+                <h3 class="hakumi-skeleton-title" style="width: 38%;"></h3>
+                <ul class="hakumi-skeleton-paragraph">
+                  <li style="width: 100%;"></li>
+                  <li style="width: 100%;"></li>
+                  <li style="width: 61%;"></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </div>
+
+  <% if @actions.any? %>
+    <ul class="hakumi-card-actions">
+      <% @actions.each_with_index do |action, index| %>
+        <li style="width: <%= 100.0 / @actions.length %>%">
+          <span><%= action %></span>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/app/components/hakumi/card/component.rb

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Card
+    # Hakumi Card component
+    # A container for displaying content in a box.
+    #
+    # @example Basic usage
+    #   <%= render Hakumi::Card::Component.new(title: "Card Title", extra: "More") do %>
+    #     Card content
+    #   <% end %>
+    #
+    # @example With actions and cover
+    #   <%= render Hakumi::Card::Component.new(
+    #     title: "Card Title",
+    #     cover: image_tag("example.png"),
+    #     actions: [link_to("Edit"), link_to("Delete")]
+    #   ) do %>
+    #     Card content
+    #   <% end %>
+    class Component < Hakumi::BaseComponent
+      def initialize(
+        title: nil,
+        extra: nil,
+        bordered: true,
+        hoverable: false,
+        loading: false,
+        size: :default, # :default, :small
+        type: nil, # :inner, nil
+        actions: [],
+        cover: nil,
+        href: nil,
+        target: nil,
+        **html_options
+      )
+        @title = title
+        @extra = extra
+        @bordered = bordered
+        @hoverable = hoverable
+        @loading = loading
+        @size = size
+        @type = type
+        @actions = actions
+        @cover = cover
+        @href = href
+        @target = target
+        @html_options = html_options
+      end
+
+      private
+
+      def classes
+        class_names(
+          "card",
+          {
+            bordered: @bordered,
+            hoverable: @hoverable,
+            small: @size == :small,
+            "type-inner": @type == :inner,
+            loading: @loading,
+            "contain-grid": false,
+            link: @href.present?
+          },
+          @html_options[:class]
+        )
+      end
+
+      def head_classes
+        "hakumi-card-head"
+      end
+
+      def body_classes
+        "hakumi-card-body"
+      end
+
+      def render_title
+        return @title if @title.is_a?(String)
+        @title
+      end
+
+      def render_extra
+        return @extra if @extra.is_a?(String)
+        @extra
+      end
+    end
+  end
+end

data/app/components/hakumi/card/grid/component.html.erb

@@ -0,0 +1,3 @@
+<div class="<%= classes %>" <%= tag.attributes(@html_options.except(:class)) %>>
+  <%= content %>
+</div>

data/app/components/hakumi/card/grid/component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Card
+    module Grid
+      # Hakumi Card Grid component
+      # A grid-style item within a Card
+      #
+      # @example Basic usage
+      #   <%= render Hakumi::Card::Component.new(title: "Title") do %>
+      #     <%= render Hakumi::Card::Grid::Component.new { "Content 1" } %>
+      #     <%= render Hakumi::Card::Grid::Component.new { "Content 2" } %>
+      #   <% end %>
+      class Component < Hakumi::BaseComponent
+        def initialize(
+          hoverable: true,
+          **html_options
+        )
+          @hoverable = hoverable
+          @html_options = html_options
+        end
+
+        private
+
+        def classes
+          class_names(
+            "card-grid",
+            {
+              hoverable: @hoverable
+            },
+            @html_options[:class]
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/hakumi/card/meta/component.html.erb

@@ -0,0 +1,23 @@
+<div class="<%= classes %>" <%= tag.attributes(@html_options.except(:class)) %>>
+  <% if @avatar.present? %>
+    <div class="hakumi-card-meta-avatar">
+      <%= @avatar %>
+    </div>
+  <% end %>
+
+  <% if @title.present? || @description.present? %>
+    <div class="hakumi-card-meta-detail">
+      <% if @title.present? %>
+        <div class="hakumi-card-meta-title">
+          <%= @title %>
+        </div>
+      <% end %>
+
+      <% if @description.present? %>
+        <div class="hakumi-card-meta-description">
+          <%= @description %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/hakumi/card/meta/component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Hakumi
+  module Card
+    module Meta
+      # Hakumi Card Meta component
+      # A flexible content container for card metadata (title, description, avatar)
+      #
+      # @example Basic usage
+      #   <%= render Hakumi::Card::Meta::Component.new(
+      #     title: "Europe Street beat",
+      #     description: "www.instagram.com"
+      #   ) %>
+      #
+      # @example With avatar
+      #   <%= render Hakumi::Card::Meta::Component.new(
+      #     avatar: image_tag("avatar.png"),
+      #     title: "Card title",
+      #     description: "This is the description"
+      #   ) %>
+      class Component < Hakumi::BaseComponent
+        def initialize(
+          title: nil,
+          description: nil,
+          avatar: nil,
+          **html_options
+        )
+          @title = title
+          @description = description
+          @avatar = avatar
+          @html_options = html_options
+        end
+
+        private
+
+        def classes
+          class_names(
+            "card-meta",
+            {},
+            @html_options[:class]
+          )
+        end
+      end
+    end
+  end
+end