loco_motion-rails 0.0.6

data/app/components/daisy/actions/button_component.html.haml

@@ -0,0 +1,7 @@
+= part(:component) do
+  - if content?
+    = content
+  - else
+    = heroicon_tag(@left_icon, **left_icon_html) if @left_icon
+    = @simple_title if @simple_title
+    = heroicon_tag(@right_icon, **right_icon_html) if @right_icon

data/app/components/daisy/actions/button_component.rb

@@ -0,0 +1,52 @@
+# Here are the Button docs!
+class Daisy::Actions::ButtonComponent < LocoMotion.configuration.base_component_class
+  set_component_name :btn
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @href = config_option(:href)
+    @target = config_option(:target)
+
+    @icon = config_option(:icon)
+    @icon_css = config_option(:icon_css, "[:where(&)]:size-5")
+    @icon_html = config_option(:icon_html, {})
+
+    @left_icon = config_option(:left_icon, @icon)
+    @left_icon_css = config_option(:left_icon_css, @icon_css)
+    @left_icon_html = config_option(:left_icon_html, @icon_html)
+
+    @right_icon = config_option(:right_icon)
+    @right_icon_css = config_option(:right_icon_css, @icon_css)
+    @right_icon_html = config_option(:right_icon_html, @icon_html)
+
+    @simple_title = config_option(:title, @left_icon || @right_icon ? nil : "Submit")
+  end
+
+  def before_render
+    setup_component
+  end
+
+  private
+
+  def setup_component
+    if @href
+      set_tag_name(:component, :a)
+      add_html(:component, { href: @href, target: @target })
+    else
+      set_tag_name(:component, :button)
+    end
+
+    add_css(:component, "btn")
+
+    add_css(:component, "items-center gap-2") if @icon
+  end
+
+  def left_icon_html
+    { class: @left_icon_css }.merge(@left_icon_html)
+  end
+
+  def right_icon_html
+    { class: @right_icon_css }.merge(@right_icon_html)
+  end
+end

data/app/components/daisy/actions/dropdown_component.html.haml

@@ -0,0 +1,13 @@
+= part(:component) do
+  - if title?
+    = title
+  - else
+    = part(:title) do
+      = @simple_title
+
+  - if items.any?
+    = part(:menu) do
+      - items.each do |item|
+        = item
+  - else
+    = content

data/app/components/daisy/actions/dropdown_component.rb

@@ -0,0 +1,48 @@
+# Here are the Button docs!
+class Daisy::Actions::DropdownComponent < LocoMotion.configuration.base_component_class
+
+  TitleComponent = LocoMotion::BasicComponent.build do
+    def before_render
+      add_html(:component, { role: "button", tabindex: 0 })
+    end
+  end
+
+  ItemComponent = LocoMotion::BasicComponent.build do
+    def before_render
+      set_tag_name(:component, :li)
+    end
+  end
+
+  define_parts :title, :menu
+
+  renders_one :title, TitleComponent
+  renders_many :items, ItemComponent
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @simple_title = config_option(:title, "Submit")
+  end
+
+  def before_render
+    setup_component
+    setup_title
+    setup_menu
+  end
+
+  def setup_component
+    add_css(:component, "dropdown")
+  end
+
+  def setup_title
+    set_tag_name(:title, :div)
+    add_css(:title, "btn")
+    add_html(:title, { role: "button", tabindex: 0 })
+  end
+
+  def setup_menu
+    set_tag_name(:menu, :ul)
+    add_css(:menu, "dropdown-content menu bg-base-100 rounded-box shadow w-52 p-2 z-[1]")
+    add_html(:menu, { role: "menu", tabindex: 0 })
+  end
+end

data/app/components/daisy/actions/modal_component.html.haml

@@ -0,0 +1,31 @@
+- if activator?
+  = part(:activator) do
+    = activator
+
+= part(:component) do
+  = part(:box) do
+    - if closable?
+      = part(:close_icon_wrapper) do
+        = part(:close_icon) do
+          - if close_icon?
+            = close_icon
+          - else
+            = heroicon_tag "x-mark"
+
+    - if title?
+      = title
+    - elsif @simple_title.present?
+      = part(:title) do
+        = @simple_title
+
+    = content
+
+    = part(:actions) do
+      = part(:start_actions) do
+        - if start_actions?
+          = start_actions
+      = part(:end_actions) do
+        - if end_actions?
+          = end_actions
+  = part(:backdrop) do
+    %button close

data/app/components/daisy/actions/modal_component.rb

@@ -0,0 +1,92 @@
+# This is a Modal component.
+# @!parse class Daisy::Actions::ModalComponent < LocoMotion::BaseComponent; end
+class Daisy::Actions::ModalComponent < LocoMotion.configuration.base_component_class
+  set_component_name :modal
+
+  define_parts :dialog, :box, :actions,
+    :activator, :close_icon_wrapper, :close_icon,
+    :backdrop,
+    :title, :start_actions, :end_actions
+
+  renders_one :activator
+  renders_one :close_icon
+  renders_one :title
+  renders_one :start_actions
+  renders_one :end_actions
+
+  # @return [Boolean] Whether or not this dialog can be closed.
+  attr_reader :closable
+  alias :closable? :closable
+
+  # @return [String] The unique ID for the `<dialog>` element.
+  attr_reader :dialog_id
+
+  # @return [String] Accessor for the `title` string passed via the component
+  #   config.
+  attr_reader :simple_title
+
+  #
+  # Instantiate a new Modal component. All options are expected to be passed as
+  # keyword arguments.
+  #
+  # @overload initialize(dialog_id: nil, closable: true, title: nil)
+  #   @param dialog_id [String] A specific ID you would like the dialog to use.
+  #     Auto-generates a random ID using `SecureRandom.uuid` if not provided.
+  #
+  #   @param closable [Boolean] Whether or not the modal should allow closing.
+  #
+  #   @param title [String] A simple title that you would like the component to
+  #     render above the main content of the modal. Accessible through the
+  #     {simple_title} accessor.
+  #
+  def initialize(*args, **kws, &block)
+    super
+
+    @dialog_id ||= SecureRandom.uuid
+    @closable = config_option(:closable, true)
+    @simple_title = config_option(:title)
+  end
+
+  def before_render
+    setup_component
+    setup_backdrop
+    setup_box
+    setup_close_icon
+    setup_title
+    setup_actions
+  end
+
+  private
+
+  def setup_component
+    set_tag_name(:component, :dialog)
+    add_html(:component, id: dialog_id)
+    add_css(:component, "modal")
+  end
+
+  def setup_backdrop
+    set_tag_name(:backdrop, :form)
+    add_html(:backdrop, { method: "dialog" })
+    add_css(:backdrop, "modal-backdrop")
+  end
+
+  def setup_box
+    add_css(:box, "modal-box relative")
+  end
+
+  def setup_close_icon
+    set_tag_name(:close_icon_wrapper, :form)
+    add_html(:close_icon_wrapper, { method: "dialog" })
+
+    set_tag_name(:close_icon, :button)
+    add_css(:close_icon, "absolute top-2 right-2 p-1 btn btn-circle btn-ghost btn-xs")
+  end
+
+  def setup_title
+    add_css(:title, "mb-2 text-xl font-bold")
+  end
+
+  def setup_actions
+    add_css(:actions, "mt-2 flex flex-row items-center justify-between")
+  end
+end

data/app/components/daisy/actions/swap_component.html.haml

@@ -0,0 +1,17 @@
+= part(:component) do
+  = part(:checkbox)
+
+  - if on?
+    = on
+  - elsif @simple_on
+    = part(:on) do
+      = @simple_on
+
+  - if off?
+    = off
+  - elsif @simple_off
+    = part(:off) do
+      = @simple_off
+
+  - if indeterminate?
+    = indeterminate

data/app/components/daisy/actions/swap_component.rb

@@ -0,0 +1,56 @@
+class Daisy::Actions::SwapComponent < LocoMotion.configuration.base_component_class
+  class SwapOn < LocoMotion::BasicComponent
+    def before_render
+      add_css(:component, "swap-on")
+    end
+  end
+
+  class SwapOff < LocoMotion::BasicComponent
+    def before_render
+      add_css(:component, "swap-off")
+    end
+  end
+
+  class SwapIndeterminate < LocoMotion::BasicComponent
+    def before_render
+      add_css(:component, "swap-indeterminate")
+    end
+  end
+
+  define_parts :checkbox, :on, :off
+
+  renders_one :on, SwapOn
+  renders_one :off, SwapOff
+  renders_one :indeterminate, SwapIndeterminate
+
+  attr_reader :simple_on, :simple_off
+
+  def initialize(*args, **kwargs, &block)
+    super
+
+    @checked = config_option(:checked, false)
+    @simple_on = config_option(:on)
+    @simple_off = config_option(:off)
+  end
+
+  def before_render
+    setup_component
+    setup_checkbox
+    setup_on_off
+  end
+
+  def setup_component
+    set_tag_name(:component, :label)
+    add_css(:component, "swap")
+  end
+
+  def setup_checkbox
+    set_tag_name(:checkbox, :input)
+    add_html(:checkbox, { type: "checkbox", checked: @checked })
+  end
+
+  def setup_on_off
+    add_css(:on, "swap-on")
+    add_css(:off, "swap-off")
+  end
+end

data/app/components/daisy/actions/theme_controller_component.html.haml

@@ -0,0 +1,5 @@
+= part(:component) do
+  - SOME_THEMES.map do |theme|
+    %label.label.cursor-pointer.gap-4
+      %span.label-text= theme.titleize
+      %input.radio.theme-controller{ name: "theme", type: "radio", value: theme, checked: theme == "light"}

data/app/components/daisy/actions/theme_controller_component.rb

@@ -0,0 +1,8 @@
+# Renders a very basic radio-button theme controller.
+class Daisy::Actions::ThemeControllerComponent < LocoMotion.configuration.base_component_class
+  SOME_THEMES = ["light", "dark", "synthwave", "retro", "cyberpunk", "wireframe"].freeze
+
+  def before_render
+    add_css(:component, "flex flex-col lg:flex-row gap-4 items-center")
+  end
+end

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

@@ -0,0 +1,4 @@
+= part(:component) do
+  - sections.each do |section|
+    - section.set_loco_parent(component_ref)
+    = section

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

@@ -0,0 +1,82 @@
+# The Accordion component shows sections that can be expanded or collapsed.
+class Daisy::DataDisplay::AccordionComponent < LocoMotion.configuration.base_component_class
+
+  # Renders a single section of the accordion.
+  class AccordionSectionComponent < LocoMotion::BasicComponent
+    define_parts :radio_button, :title, :content
+
+    renders_one :title
+
+    # @return [String] Accessor for the `title` string passed via the component
+    #   config.
+    attr_reader :simple_title
+
+    def initialize(*args, **kws, &block)
+      super
+
+      @value        = config_option(:value)
+      @checked      = config_option(:checked, false)
+      @simple_title = config_option(:title)
+      @name         = config_option(:name)
+    end
+
+    def before_render
+      setup_component
+      setup_radio_button
+      setup_title
+      setup_content
+    end
+
+    def setup_component
+      # Reset the name to the config option or the parent name if available
+      @name = config_option(:name, loco_parent&.name)
+
+      add_css(:component, "collapse")
+      add_css(:component, "collapse-arrow") if loco_parent.config.modifiers.include?(:arrow)
+      add_css(:component, "collapse-plus") if loco_parent.config.modifiers.include?(:plus)
+    end
+
+    def setup_radio_button
+      set_tag_name(:radio_button, :input)
+      add_html(:radio_button, { type: "radio", name: @name, value: @value, checked: @checked })
+    end
+
+    def setup_title
+      set_tag_name(:title, :h2)
+      add_css(:title, "collapse-title text-lg font-bold")
+    end
+
+    def setup_content
+      add_css(:content, "collapse-content")
+    end
+
+    def call
+      part(:component) do
+        # Render the radio button which allows opening / closing
+        concat(part(:radio_button))
+
+        # Render the title slot, or simple title if provided
+        if title?
+          concat(title)
+        elsif @simple_title.present?
+          concat(part(:title) { @simple_title })
+        end
+
+        # Render the content
+        concat(part(:content) { content })
+      end
+    end
+  end
+
+  define_modifiers :arrow, :plus
+
+  renders_many :sections, AccordionSectionComponent
+
+  attr_reader :name
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @name = config_option(:name, "accordion-#{SecureRandom.uuid}")
+  end
+end

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

@@ -0,0 +1,9 @@
+= part(:component) do
+  = part(:wrapper) do
+    - if @src.present?
+      = part(:img)
+    - elsif @icon.present?
+      = heroicon_tag(@icon, **rendered_html(:icon))
+    - else
+      = part(:placeholder) do
+        = content

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

@@ -0,0 +1,60 @@
+# The Avatar Component displays in image, icon, or placeholder text to represent
+# a user.
+#
+# It utilizes the CSS `where()` pseudo-class to reduce the specificity to 0 to
+# allow for easy overriding while giving you some sane defaults.
+#
+# - Width: <code>w-24</code> (can override with w-10, h-10, etc.)
+# - Corners: `rounded-full`
+#
+# If no image is provided, these additional classes will be added so that any
+# text or icons are visible.
+#
+# - Background: +bg-neutral+
+# - Text Color: `text-neutral-content`
+#
+# ## Examples
+#
+# ```language-haml
+# - # Display an avatar with an image
+# = daisy_avatar src: "https://example.com/avatar.jpg"
+#
+# - # Display an avatar with an icon
+# = daisy_avatar icon: "user", icon_css: "text-yellow-400"
+# ```
+#
+class Daisy::DataDisplay::AvatarComponent < LocoMotion.configuration.base_component_class
+  set_component_name :avatar
+
+  define_parts :wrapper, :img, :icon, :placeholder
+
+  # Create a new avatar component.
+  def initialize(*args, **kws, &block)
+    super
+
+    @src = config_option(:src)
+    @icon = config_option(:icon)
+  end
+
+  def before_render
+    setup_component
+  end
+
+  private
+
+  def setup_component
+    add_css(:component, "avatar")
+
+    # The where pseudo class reduces the specificity of the CSS selector to 0 so
+    # that other Tailwind classes provided by the user will take presedence.
+    add_css(:wrapper, "[:where(&)]:w-24 [:where(&)]:rounded-full")
+
+    if @src.present?
+      set_tag_name(:img, :img)
+      add_html(:img, { src: @src, title: @content })
+    else
+      add_css(:component, "placeholder")
+      add_css(:wrapper, "[:where(&)]:bg-neutral [:where(&)]:text-neutral-content")
+    end
+  end
+end

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

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

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

@@ -0,0 +1,27 @@
+#
+# The Badge component renders as a small, rounded element with various
+# background colors.
+#
+# @!parse class Daisy::DataDisplay::BadgeComponent < LocoMotion::BaseComponent; end
+class Daisy::DataDisplay::BadgeComponent < LocoMotion.configuration.base_component_class
+  set_component_name :badge
+
+  #
+  # Create a new Badge 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, "badge")
+  end
+end

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

@@ -0,0 +1,17 @@
+= part(:component) do
+  - if top_figure?
+    = top_figure
+
+  = part(:body) do
+    - if title?
+      = title
+    - elsif @simple_title
+      %h2.card-title= @simple_title
+
+    = content
+
+    - if actions?
+      = actions
+
+  - if bottom_figure?
+    = bottom_figure

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

@@ -0,0 +1,53 @@
+class Daisy::DataDisplay::CardComponent < LocoMotion.configuration.base_component_class
+
+  Figure = LocoMotion::BasicComponent.build do
+    define_part :image, tag_name: :img, css: "card-image"
+
+    def initialize(*args, **kws, &block)
+      super
+
+      @src = kws[:src]
+    end
+
+    def before_render
+      set_tag_name(:component, :figure)
+      add_html(:image, src: @src) if @src
+    end
+
+    def call
+      part(:component) do
+        if @src
+          part(:image)
+        else
+          content
+        end
+      end
+    end
+  end
+
+  define_parts :body, :title
+
+  renders_one :title, LocoMotion::BasicComponent.build(tag_name: :h2, css: "card-title")
+  renders_one :top_figure, Figure
+  renders_one :bottom_figure, Figure
+  renders_one :actions, LocoMotion::BasicComponent.build(css: "card-actions")
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @simple_title = kws[:title]
+  end
+
+  def before_render
+    setup_component
+    setup_body
+  end
+
+  def setup_component
+    add_css(:component, "card")
+  end
+
+  def setup_body
+    add_css(:body, "card-body")
+  end
+end

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

@@ -0,0 +1,3 @@
+= part(:component) do
+  - items.each do |item|
+    = item

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

@@ -0,0 +1,17 @@
+class Daisy::DataDisplay::CarouselComponent < LocoMotion.configuration.base_component_class
+  class ItemComponent < LocoMotion::BasicComponent
+    def before_render
+      add_css(:component, "carousel-item")
+    end
+  end
+
+  renders_many :items, ItemComponent
+
+  def before_render
+    setup_component
+  end
+
+  def setup_component
+    add_css(:component, "carousel")
+  end
+end

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

@@ -0,0 +1,14 @@
+= part(:component) do
+  - if avatar?
+    = avatar
+
+  - if header?
+    = header
+
+  - bubbles.each do |bubble|
+    = bubble
+
+  = content
+
+  - if footer?
+    = footer

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

@@ -0,0 +1,38 @@
+#
+# The {ChatComponent} renders a bubble-like chat interface with an optional
+# avatar, header, and footer.
+#
+# @slot   avatar Renders an {AvatarComponent}. Common options include:
+# @option avatar [String] src The URL of the image to display.
+# @option avatar [String] icon A heroicon to be displayed instead of an image.
+#
+# @slot header [LocoMotion::BasicComponent] Renders a single header.
+# @slot footer [LocoMotion::BasicComponent] Renders a single footer.
+# @slot bubble [LocoMotion::BasicComponent] Renders one or more bubbles.
+#
+# ## Examples
+#
+# ```language-haml
+# = daisy_chat(css: "border rounded-lg", html: { title: message.short_desc }) do |chat|
+#   - chat.with_bubble do
+#     I can't believe it's not the weekend yet!
+# ```
+#
+class Daisy::DataDisplay::ChatComponent < LocoMotion.configuration.base_component_class
+  renders_one :avatar, Daisy::DataDisplay::AvatarComponent.build(css: "chat-image", icon_css: "size-6 text-base-100", wrapper_css: "w-10 rounded-full")
+  renders_one :header, LocoMotion::BasicComponent.build(css: "chat-header [:where(&)]:text-neutral-500")
+  renders_one :footer, LocoMotion::BasicComponent.build(css: "chat-footer [:where(&)]:text-neutral-500")
+
+  renders_many :bubbles, LocoMotion::BasicComponent.build(css: "chat-bubble")
+
+  #
+  # Sets up the component with various CSS classes and HTML attributes.
+  #
+  #  - `chat` is always added
+  #  - `chat-start` is added if the component does not already have `chat-start` or `chat-end`
+  #
+  def before_render
+    add_css(:component, "chat")
+    add_css(:component, "chat-start") unless rendered_css(:component).match?("chat-(start|end)")
+  end
+end