loco_motion-rails 0.0.6

data/app/components/daisy/data_display/collapse_component.html.haml

@@ -0,0 +1,13 @@
+= part(:component) do
+  - if @checkbox
+    %input{ type: "checkbox" }
+
+  - if has_title?
+    - if title?
+      = title
+    - elsif @simple_title.present?
+      = part(:title) do
+        = @simple_title
+
+  = part(:wrapper) do
+    = content

data/app/components/daisy/data_display/collapse_component.rb

@@ -0,0 +1,37 @@
+class Daisy::DataDisplay::CollapseComponent < LocoMotion.configuration.base_component_class
+  define_parts :title, :wrapper
+
+  renders_one :title
+
+  attr_reader :simple_title, :checkbox
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @simple_title = config_option(:title)
+    @checkbox = config_option(:checkbox, true)
+  end
+
+  def before_render
+    setup_component
+    setup_title
+    setup_wrapper
+  end
+
+  def setup_component
+    add_css(:component, "collapse")
+    add_html(:component, { tabindex: 0 }) unless @checkbox
+  end
+
+  def setup_title
+    add_css(:title, "collapse-title")
+  end
+
+  def setup_wrapper
+    add_css(:wrapper, "collapse-content")
+  end
+
+  def has_title?
+    title? || @simple_title.present?
+  end
+end

data/app/components/daisy/data_display/countdown_component.html.haml

@@ -0,0 +1,24 @@
+= part(:component) do
+  - if dparts[:days]
+    = part(:days) do
+      %span{style: "--value: #{dparts[:days]}"}
+
+      = days_separator
+
+  - if dparts[:hours]
+    = part(:hours) do
+      %span{style: "--value: #{dparts[:hours]}"}
+
+      = hours_separator
+
+  - if dparts[:minutes]
+    = part(:minutes) do
+      %span{style: "--value: #{dparts[:minutes]}"}
+
+      = minutes_separator
+
+  - if dparts[:seconds]
+    = part(:seconds) do
+      %span{style: "--value: #{dparts[:seconds]}"}
+
+      = seconds_separator

data/app/components/daisy/data_display/countdown_component.rb

@@ -0,0 +1,70 @@
+class Daisy::DataDisplay::CountdownComponent < LocoMotion.configuration.base_component_class
+
+  define_parts :days, :hours, :minutes, :seconds
+  define_modifiers :words, :letters
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @duration = config_option(:duration, args[0])
+    @separator = config_option(:separator, ":")
+    @parts_css = config_option(:parts_css)
+    @parts_html = config_option(:parts_html)
+  end
+
+  def before_render
+    add_stimulus_controller(:component, "countdown")
+
+    add_css(:component, "flex")
+    add_css(:component, "[:where(&)]:gap-x-2") if modifiers.include?(:words)
+
+    %i(days hours minutes seconds).each do |part|
+      default_html = {
+        data: {
+          # Note: We can't use nested hashes here because the Rails content_tag
+          # helper is stupid and won't traverse them.
+          "countdown-target": part
+        }
+      }
+
+      add_css(part, "countdown")
+      add_css(part, "[:where(&)]:gap-x-1") if modifiers.include?(:words)
+      add_css(part, @parts_css) if @parts_css
+
+      add_html(part, default_html)
+      add_html(part, @parts_html) if @parts_html
+    end
+  end
+
+  def dparts
+    @duration&.parts || {}
+  end
+
+  def days_separator
+    return unless dparts[:days] && dparts[:hours]
+    return "days" if modifiers.include?(:words)
+    return "d" if modifiers.include?(:letters)
+    return @separator
+  end
+
+  def hours_separator
+    return unless dparts[:hours] && dparts[:minutes]
+    return "hours" if modifiers.include?(:words)
+    return "h" if modifiers.include?(:letters)
+    return @separator
+  end
+
+  def minutes_separator
+    return unless dparts[:minutes] && dparts[:seconds]
+    return "minutes" if modifiers.include?(:words)
+    return "m" if modifiers.include?(:letters)
+    return @separator
+  end
+
+  def seconds_separator
+    return unless dparts[:seconds]
+    return "seconds" if modifiers.include?(:words)
+    return "s" if modifiers.include?(:letters)
+    return nil # No default separator for seconds
+  end
+end

data/app/components/daisy/data_display/countdown_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["days", "hours", "minutes", "seconds"]
+
+  connect() {
+    this.days = this.getPartValue("days")
+    this.hours = this.getPartValue("hours")
+    this.minutes = this.getPartValue("minutes")
+    this.seconds = this.getPartValue("seconds")
+
+    this.initialSeconds =
+      this.days * 24 * 60 * 60 +
+      this.hours * 60 * 60 +
+      this.minutes * 60 +
+      this.seconds
+
+    this.totalSeconds = this.initialSeconds
+
+    this.startCountdown()
+  }
+
+  getPartValue(part) {
+    let target = null
+
+    switch (part) {
+      case "days":
+        target = this.hasDaysTarget ? this.daysTarget : null
+        break
+      case "hours":
+        target = this.hasHoursTarget ? this.hoursTarget : null
+        break
+      case "minutes":
+        target = this.hasMinutesTarget ? this.minutesTarget : null
+        break
+      case "seconds":
+        target = this.hasSecondsTarget ? this.secondsTarget : null
+        break
+    }
+
+    return target?.querySelector("span")?.style?.getPropertyValue("--value") || 0
+  }
+
+  startCountdown() {
+    this.interval = setInterval(() => {
+      this.totalSeconds--
+
+      if (this.totalSeconds <= 0) {
+        clearInterval(this.interval)
+      }
+
+      this.updateCountdown()
+    }, 1000)
+  }
+
+  updateCountdown() {
+    let days = Math.floor(this.totalSeconds / (60 * 60 * 24))
+    let hours = Math.floor((this.totalSeconds % (60 * 60 * 24)) / (60 * 60))
+    let minutes = Math.floor((this.totalSeconds % (60 * 60)) / 60)
+    let seconds = Math.floor(this.totalSeconds % 60)
+
+    if (this.hasDaysTarget) {
+      this.daysTarget?.querySelector("span")?.style?.setProperty("--value", days)
+    }
+
+    if (this.hasHoursTarget) {
+      this.hoursTarget?.querySelector("span")?.style?.setProperty("--value", hours)
+    }
+
+    if (this.hasMinutesTarget) {
+      this.minutesTarget?.querySelector("span")?.style?.setProperty("--value", minutes)
+    }
+
+    if (this.hasSecondsTarget) {
+      this.secondsTarget?.querySelector("span")?.style?.setProperty("--value", seconds)
+    }
+  }
+}

data/app/components/daisy/data_display/diff_component.html.haml

@@ -0,0 +1,6 @@
+= part(:component) do
+  - items.each.with_index do |item, index|
+    - item.set_index(index + 1)
+    = item
+
+  = part(:resizer)

data/app/components/daisy/data_display/diff_component.rb

@@ -0,0 +1,25 @@
+class Daisy::DataDisplay::DiffComponent < LocoMotion.configuration.base_component_class
+  class ItemComponent < LocoMotion::BasicComponent
+    def set_index(index)
+      @index = index
+    end
+
+    def before_render
+      # Because we're using the same component for many items, we need to
+      # manually specify the item class names to make sure Tailwind picks them
+      # up and includes them in the final CSS.
+      #
+      # diff-item-1 diff-item-2
+      add_css(:component, "diff-item-#{@index}")
+    end
+  end
+
+  define_part :resizer
+
+  renders_many :items, ItemComponent
+
+  def before_render
+    add_css(:component, "diff")
+    add_css(:resizer, "diff-resizer")
+  end
+end

data/app/components/daisy/data_display/kbd_component.html.haml

@@ -0,0 +1,2 @@
+= part(:component) do
+  = content

data/app/components/daisy/data_display/kbd_component.rb

@@ -0,0 +1,21 @@
+# This is the Kbd (Keyboard) component.
+class Daisy::DataDisplay::KbdComponent < LocoMotion.configuration.base_component_class
+  set_component_name :kbd
+
+  # Create a new kbd component.
+  def initialize(*args, **kws, &block)
+    super
+
+    set_tag_name(:component, :span)
+  end
+
+  def before_render
+    setup_component
+  end
+
+  private
+
+  def setup_component
+    add_css(:component, "kbd")
+  end
+end

data/app/components/daisy/data_display/stat_component.html.haml

@@ -0,0 +1,27 @@
+= part(:component) do
+
+  - if figure? || @icon.present? || @src.present?
+    = part(:figure) do
+      - if figure?
+        = figure
+      - if @icon.present?
+        = heroicon_tag(@icon, class: "inline-block h-8 w-8 stroke-current")
+      - if @src.present?
+        = daisy_avatar(src: @src)
+        
+
+  - if title?
+    = title
+  - elsif @simple_title.present?
+    = part(:title) do
+      = @simple_title    
+
+  = part(:value) do
+    = content
+
+  - if description?
+    = description
+  - elsif @simple_description.present?
+    = part(:description) do
+      = @simple_description  
+    

data/app/components/daisy/data_display/stat_component.rb

@@ -0,0 +1,41 @@
+# This is the stats component.
+class Daisy::DataDisplay::StatComponent < LocoMotion.configuration.base_component_class
+  set_component_name :stat
+
+  define_parts :title, :value, :description, :figure
+
+  renders_one :title
+  renders_one :description
+  renders_one :figure
+
+  attr_reader :simple_title
+  attr_reader :simple_description
+
+  # Create a new stat component.
+  def initialize(*args, **kws, &block)
+    super
+
+    @simple_title = config_option(:title)
+    @simple_description = config_option(:description)
+    @src = config_option(:src)
+    @icon = config_option(:icon)
+  end
+
+  def before_render
+    setup_component
+  end
+
+  private
+
+  def setup_component
+    add_css(:component, "stat")
+    add_css(:title, "stat-title")
+    add_css(:value, "stat-value")
+    add_css(:description, "stat-desc")
+    add_css(:figure, "stat-figure")
+
+    if @src.nil?
+
+    end
+  end
+end

data/app/components/daisy/data_display/table_component.html.haml

@@ -0,0 +1,14 @@
+= part(:component) do
+  -# If we have sections, show them
+  - if sections?
+    - sections.each do |section|
+      = section
+  - else
+    = head if head?
+
+    - if body?
+      = body
+    - else
+      %tbody
+        - rows.each do |row|
+          = row

data/app/components/daisy/data_display/table_component.rb

@@ -0,0 +1,148 @@
+#
+# The Table component is used to render HTML tables with rows, columns, and headers.
+#
+# @!parse class Daisy::DataDisplay::TableComponent < LocoMotion::BaseComponent; end
+class Daisy::DataDisplay::TableComponent < LocoMotion.configuration.base_component_class
+
+  class HeadColumnComponent < LocoMotion::BasicComponent
+    def before_render
+      set_tag_name :component, :th
+    end
+  end
+
+  class HeadComponent < LocoMotion::BasicComponent
+    renders_many :columns, HeadColumnComponent
+
+    def before_render
+      set_tag_name :component, :thead
+    end
+
+    def call
+      part(:component) do
+        content_tag(:tr) do
+          columns.each do |column|
+            concat(column)
+          end
+        end
+      end
+    end
+  end
+
+  class BodyColumnComponent < LocoMotion::BasicComponent
+    def before_render
+      set_tag_name :component, :td
+    end
+  end
+
+  class BodyRowComponent < LocoMotion::BasicComponent
+    renders_many :columns, BodyColumnComponent
+
+    def before_render
+      set_tag_name :component, :tr
+    end
+
+    def call
+      part(:component) do
+        columns.each do |column|
+          concat(column)
+        end
+      end
+    end
+  end
+
+  class BodyComponent < LocoMotion::BasicComponent
+    renders_many :rows, BodyRowComponent
+
+    def before_render
+      set_tag_name :component, :tbody
+    end
+
+    def call
+      part(:component) do
+        content_tag(:tr) do
+          rows.each do |row|
+            concat(row)
+          end
+        end
+      end
+    end
+  end
+
+  class SectionComponent < LocoMotion::BasicComponent
+    renders_one :head, HeadComponent
+    renders_one :body, BodyComponent
+    renders_many :rows, BodyRowComponent
+
+    def before_render
+      set_tag_name :component, :section
+    end
+
+    def call
+      # Sections can't be rendered inside a <table> tag, so we don't render the
+      # typical `part(:component)` here.
+      concat(head) if head?
+
+      if body?
+        concat(body)
+      else
+        content_tag(:tbody) do
+          rows.each do |row|
+            concat(row)
+          end
+        end
+      end
+    end
+  end
+
+  renders_one :head, HeadComponent
+  renders_one :body, BodyComponent
+  renders_many :rows, BodyRowComponent
+  renders_many :sections, SectionComponent
+
+  set_component_name :table
+
+  #
+  # Instantiate a new Table component. This component takes no content, but
+  # requires you to utilize the optional <code>head</code> slot, and one of the
+  # <code>body</code> or <code>rows</code> slots.
+  #
+  # @example
+  #  = daisy_table do |table|
+  #    - table.head do |head|
+  #      - head.with_column do
+  #        Column 1
+  #      - head.with_column do
+  #        Column 2
+  #
+  #    - table.with_row do |row|
+  #      - row.with_column do
+  #        Row 1 - Column 1
+  #      - row.with_column do
+  #        Row 1 - Column 2
+  #    - table.with_row do |row|
+  #      - row.with_column do
+  #        Row 2 - Column 1
+  #      - row.with_column do
+  #        Row 2 - Column 2
+  #
+  # For more complex tables, you can use the <code>section</code> slot which
+  # takes a <code>head</code> and <code>body</code> slot allowing you to build a
+  # table with multiple headers and bodies.
+  #
+  # Please see the demo for more examples of usage.
+  #
+  def initialize(*args, **kws, &block)
+    super
+  end
+
+  def before_render
+    setup_component
+  end
+
+  private
+
+  def setup_component
+    set_tag_name(:component, :table)
+    add_css(:component, "table")
+  end
+end

data/app/components/daisy/data_display/timeline_component.html.haml

@@ -0,0 +1,7 @@
+= part(:component) do
+  - events.each.with_index do |event, index|
+    - event.set_event_index(index)
+    - event.set_events_length(events.length)
+    = event
+
+  = content

data/app/components/daisy/data_display/timeline_component.rb

@@ -0,0 +1,8 @@
+class Daisy::DataDisplay::TimelineComponent < LocoMotion.configuration.base_component_class
+  renders_many :events, Daisy::DataDisplay::TimelineEventComponent
+
+  def before_render
+    set_tag_name(:component, :ul)
+    add_css(:component, "timeline")
+  end
+end

data/app/components/daisy/data_display/timeline_event_component.html.haml

@@ -0,0 +1,28 @@
+= part(:component) do
+  - if @event_index.present? && @event_index > 0
+    = part(:separator)
+
+  - if start?
+    = start
+  - elsif @simple_start
+    = part(:start) do
+      = @simple_start
+
+  - if middle?
+    = middle
+  - elsif @simple_middle
+    = part(:middle) do
+      = @simple_middle
+  - elsif @simple_middle_icon
+    = part(:middle) do
+      = hero_icon(@simple_middle_icon, **rendered_html(:simple_middle_icon))
+
+  - if end?
+    - # end is a reserved word in Ruby, so we have to use send to call it
+    = self.send(:end)
+  - elsif @simple_end
+    = part(:end) do
+      = @simple_end
+
+  - if @events_length.present? && @event_index.present? && @event_index < @events_length - 1
+    = part(:separator)

data/app/components/daisy/data_display/timeline_event_component.rb

@@ -0,0 +1,47 @@
+class Daisy::DataDisplay::TimelineEventComponent < LocoMotion.configuration.base_component_class
+  renders_one :start, LocoMotion::BasicComponent.build(css: "timeline-start")
+  renders_one :middle, LocoMotion::BasicComponent.build(css: "timeline-middle")
+  renders_one :end, LocoMotion::BasicComponent.build(css: "timeline-end")
+
+  define_parts :start, :middle, :middle_icon, :end, :separator
+
+  #
+  # middle and middle_icon are mutually exclusive, middle takes presedence
+  #
+  def initialize(*args, **kws, &block)
+    super(*args, **kws, &block)
+
+    @event_index = nil
+    @events_length = nil
+
+    @simple_start = config_option(:start)
+    @simple_middle = config_option(:middle)
+    @simple_middle_icon = config_option(:middle_icon)
+    @simple_end = config_option(:end)
+  end
+
+  def before_render
+    set_tag_name(:component, :li)
+
+    setup_parts
+    setup_separator
+  end
+
+  def setup_parts
+    add_css(:start, "timeline-start")
+    add_css(:middle, "timeline-middle")
+    add_css(:end, "timeline-end")
+  end
+
+  def setup_separator
+    set_tag_name(:separator, :hr)
+  end
+
+  def set_event_index(index)
+    @event_index = index
+  end
+
+  def set_events_length(length)
+    @events_length = length
+  end
+end

data/app/components/daisy/feedback/alert_component.html.haml

@@ -0,0 +1,8 @@
+= part(:component) do
+  - # If we have an icon, assume we want to wrap the content
+  - if @icon.present?
+    = hero_icon(@icon, **rendered_html(:icon))
+    = part(:content_wrapper) do
+      = content
+  - else
+    = content

data/app/components/daisy/feedback/alert_component.rb

@@ -0,0 +1,19 @@
+#
+# The AlertComponent displays an important message to users.
+#
+class Daisy::Feedback::AlertComponent < LocoMotion.configuration.base_component_class
+  define_parts :icon, :content_wrapper
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @icon = config_option(:icon)
+  end
+
+  def before_render
+    add_css(:component, "alert")
+    add_html(:component, { role: "alert" })
+
+    add_css(:icon, "[:where(&)]:size-8")
+  end
+end

data/app/components/daisy/layout/join_component.rb

@@ -0,0 +1,15 @@
+class Daisy::Layout::JoinComponent < LocoMotion.configuration.base_component_class
+  renders_many :items
+
+  def before_render
+    add_css(:component, "join")
+  end
+
+  def call
+    part(:component) do
+      items.each do |item|
+        concat(item)
+      end
+    end
+  end
+end