loco_motion-rails 0.0.6 → 0.0.7

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

@@ -0,0 +1,29 @@
+class Daisy::Feedback::RadialProgressComponent < LocoMotion::BaseComponent
+
+  def initialize(*args, **kws, &block)
+    super
+
+    @value = config_option(:value)
+    @size = config_option(:size)
+    @thickness = config_option(:thickness)
+  end
+
+  def before_render
+    add_css(:component, "radial-progress")
+
+    styles = []
+
+    styles << "--value: #{@value}" if @value != nil
+    styles << "--size: #{@size}" if @size != nil
+    styles << "--thickness: #{@thickness}" if @thickness != nil
+
+    add_html(:component, { role: "progressbar" })
+    add_html(:component, { style: styles.join(";") }) if styles.present?
+  end
+
+  def call
+    part(:component) { content }
+  end
+
+end
+

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

@@ -0,0 +1,9 @@
+class Daisy::Feedback::SkeletonComponent < LocoMotion::BaseComponent
+  def before_render
+    add_css(:component, "skeleton")
+  end
+
+  def call
+    part(:component) { content }
+  end
+end

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

@@ -0,0 +1,9 @@
+class Daisy::Feedback::ToastComponent < LocoMotion::BaseComponent
+  def before_render
+    add_css(:component, "toast")
+  end
+
+  def call
+    part(:component) { content }
+  end
+end

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

@@ -0,0 +1,41 @@
+#
+# A component that displays a tooltip when the user hovers over it.
+#
+# @loco_example Basic Usage
+#   = daisy_tooltip "This is a tooltip" do
+#     %span Hover over me
+#
+class Daisy::Feedback::TooltipComponent < LocoMotion::BaseComponent
+
+  #
+  # Create a new instance of the Tooltip.
+  #
+  # @param args [Array] If provided, the first argument is considered the `tip`.
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws tip [String] The text to display in the tooltip. Can be passed
+  #   as the first positional argument, or as a keyword argument.
+  #
+  def initialize(*args, **kws, &block)
+    super
+
+    # Accept a `tip` keyword argument, or the first positional argument
+    @tip = config_option(:tip, args[0])
+  end
+
+  #
+  # Sets up the components CSS and HTML attributes.
+  #
+  def before_render
+    add_css(:component, "tooltip")
+    add_html(:component, { data: { tip: @tip } }) if @tip
+  end
+
+  #
+  # Renders the component and it's content (inline).
+  #
+  def call
+    part(:component) { content }
+  end
+
+end

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

@@ -0,0 +1,11 @@
+class Daisy::Layout::ArtboardComponent < LocoMotion::BaseComponent
+
+  def before_render
+    add_css(:component, "artboard")
+  end
+
+  def call
+    part(:component) { content }
+  end
+
+end

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

@@ -0,0 +1,32 @@
+#
+# The divider component is a simple horizontal or vertical line that separates
+# content. It can be colored and have a label.
+#
+# @loco_example Basic Usage
+#   = daisy_divider
+#
+# @loco_example With Text
+#   = daisy_divider do
+#     Hello Dividers!
+#
+# @loco_example Horizontal Accented With Text
+#   = daisy_divider(css: "divider-horizontal divider-accent") do
+#     Accent Divider
+#
+class Daisy::Layout::DividerComponent < LocoMotion::BaseComponent
+
+  #
+  # Add the `divider` CSS class to the component.
+  #
+  def before_render
+    add_css(:component, "divider")
+  end
+
+  #
+  # Render the component and it's content.
+  #
+  def call
+    part(:component) { content }
+  end
+
+end

data/app/components/daisy/layout/drawer_component.html.haml

@@ -0,0 +1,9 @@
+= part(:component) do
+  = part(:input)
+
+  = part(:content_wrapper) do
+    = content
+
+  - if sidebar?
+    - sidebar.set_loco_parent(component_ref)
+    = sidebar

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

@@ -0,0 +1,110 @@
+#
+# The DrawerComponent shows a sidebar that can be toggled open and closed.
+#
+# @part input [LocoMotion::BaseComponent] The input checkbox that toggles the
+#   sidebar.
+# @part content_wrapper [LocoMotion::BaseComponent] The wrapper for the page
+#   content.
+# @part overlay [LocoMotion::BaseComponent] The overlay that covers the page
+#   when the sidebar is open.
+#
+# @slot sidebar [Daisy::Layout::DrawerSidebarComponent] The sidebar that is
+#   shown when the drawer is toggled open. Renders the overlay inside of itself.
+#
+# @loco_example Basic Usage
+#   = daisy_drawer do |drawer|
+#     - drawer.with_sidebar do
+#       .bg-base-100.p-4.w-40
+#         Hello sidebar!
+#
+#     = daisy_button(tag_name: "label", css: "btn btn-primary", title: "Open Drawer", html: { for: drawer.id })
+#
+class Daisy::Layout::DrawerComponent < LocoMotion::BaseComponent
+  #
+  # The DrawerSidebarComponent is a child of the {DrawerComponent} and renders
+  # the drawer sidebar and the overlay.
+  #
+  class Daisy::Layout::DrawerSidebarComponent < LocoMotion::BaseComponent
+    #
+    # Add the `drawer-side` CSS class to the component.
+    #
+    def before_render
+      add_css(:component, "drawer-side")
+    end
+
+    #
+    # Render the sidebar, the overlay, and the content.
+    #
+    def call
+      part(:component) do
+        # We need to render the parent component's overlay inside of the sidebar
+        concat(loco_parent.part(:overlay))
+        concat(content)
+      end
+    end
+  end
+
+  define_parts :input, :content_wrapper, :overlay
+
+  renders_one :sidebar, Daisy::Layout::DrawerSidebarComponent
+
+  #
+  # The ID of the drawer. Can be passed in as a configuration option, but
+  # defaults to a random UUID.
+  #
+  attr_reader :id
+
+  #
+  # Create a new instance of the DrawerComponent.
+  #
+  # @param kws [Hash] The keyword arguments passed to the component.
+  # @option kws [String] :id The ID of the drawer. Defaults to a random UUID.
+  #
+  def initialize(**kws)
+    super
+
+    @id = config_option(:id, SecureRandom.uuid)
+  end
+
+  #
+  # Sets up the various parts of the component.
+  #
+  def before_render
+    setup_component
+    setup_input
+    setup_content_wrapper
+    setup_overlay
+  end
+
+  #
+  # Adds the `drawer` class to the component itself.
+  #
+  def setup_component
+    add_css(:component, "drawer")
+  end
+
+  #
+  # Sets up the input checkbox that toggles the sidebar.
+  #
+  def setup_input
+    set_tag_name(:input, :input)
+    add_css(:input, "drawer-toggle")
+    add_html(:input, { type: "checkbox", id: @id })
+  end
+
+  #
+  # Adds the `drawer-content` class to the content wrapper.
+  #
+  def setup_content_wrapper
+    add_css(:content_wrapper, "drawer-content")
+  end
+
+  #
+  # Sets up the overlay that covers the page when the sidebar is open.
+  #
+  def setup_overlay
+    set_tag_name(:overlay, :label)
+    add_css(:overlay, "drawer-overlay")
+    add_html(:overlay, { for: @id, "aria-label": "close sidebar" })
+  end
+end

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

@@ -0,0 +1,29 @@
+#
+# The footer component is a simple container for the footer of a page. It can be
+# used to hold copyright information, links to other pages, or any other
+# information that should be displayed at the bottom of a page.
+#
+# @loco_example Basic Usage
+#   = daisy_footer(css: "bg-neutral text-neutral-content") do
+#     %nav
+#       = link_to "Home", root_path
+#
+# @loco_example With Text
+#   = daisy_footer(css: "bg-neutral text-neutral-content p-10 text-center text-sm") do
+#     Copyright © 2024
+#
+class Daisy::Layout::FooterComponent < LocoMotion::BaseComponent
+  #
+  # Add the `footer` CSS class to the component.
+  #
+  def before_render
+    add_css(:component, "footer")
+  end
+
+  #
+  # Render the component and it's content (inline).
+  #
+  def call
+    part(:component) { content }
+  end
+end

data/app/components/daisy/layout/hero_component.html.haml

@@ -0,0 +1,5 @@
+= part(:component) do
+  = overlay if overlay?
+
+  = part(:content_wrapper) do
+    = content

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

@@ -0,0 +1,21 @@
+#
+# The HeroComponent is a layout component that is used to create a hero section.
+#
+# @part content_wrapper The wrapper for the content of the hero.
+#
+# @slot overlay [LocoMotion::BasicComponent] An optional `<div>` positioned to
+#   overlay underneath the hero and allow for styling behind it.
+#
+class Daisy::Layout::HeroComponent < LocoMotion::BaseComponent
+  define_part :content_wrapper
+
+  renders_one :overlay, LocoMotion::BasicComponent.build(css: "hero-overlay")
+
+  #
+  # Adds the necessary CSS classes to the component.
+  #
+  def before_render
+    add_css(:component, "hero")
+    add_css(:content_wrapper, "hero-content")
+  end
+end

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

@@ -0,0 +1,36 @@
+#
+# The IndicatorComponent provides items positioned around it's content with the
+# intention of indicating a callout or something needing attention.
+#
+# @slot item The items to be rendered around the content. Allows multiple.
+#
+# @loco_example Basic Usage
+#   = daisy_indicator do |indicator|
+#     - indicator.with_item do
+#       = daisy_badge(title: "New!", css: "badge-accent")
+#
+#     = daisy_button(title: "Checkout", left_icon: "shopping-cart")
+#
+class Daisy::Layout::IndicatorComponent < LocoMotion::BaseComponent
+  renders_many :items, LocoMotion::BasicComponent.build(css: "indicator-item")
+
+  #
+  # Adds the `indicator` CSS to the component
+  #
+  def before_render
+    add_css(:component, "indicator")
+  end
+
+  #
+  # Renders the component, all of the items, and any user-provided content.
+  #
+  def call
+    part(:component) do
+      items.each do |item|
+        concat(item)
+      end
+
+      concat(content) if content?
+    end
+  end
+end

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

@@ -1,4 +1,4 @@
-class Daisy::Layout::JoinComponent < LocoMotion.configuration.base_component_class
+class Daisy::Layout::JoinComponent < LocoMotion::BaseComponent
   renders_many :items
 
   def before_render

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

@@ -0,0 +1,9 @@
+class Daisy::Layout::StackComponent < LocoMotion::BaseComponent
+  def before_render
+    add_css(:component, "stack")
+  end
+
+  def call
+    part(:component) { content }
+  end
+end

data/app/components/daisy/navigation/bottom_nav_component.rb

@@ -1,6 +1,6 @@
-class Daisy::Navigation::BottomNavComponent < LocoMotion.configuration.base_component_class
+class Daisy::Navigation::BottomNavComponent < LocoMotion::BaseComponent
 
-  class Daisy::Navigation::BottomNavSectionComponent < LocoMotion.configuration.base_component_class
+  class Daisy::Navigation::BottomNavSectionComponent < LocoMotion::BaseComponent
 
     define_parts :icon, :title
 

data/app/components/daisy/navigation/breadcrumbs_component.rb

@@ -1,4 +1,4 @@
-class Daisy::Navigation::BreadcrumbsComponent < LocoMotion.configuration.base_component_class
+class Daisy::Navigation::BreadcrumbsComponent < LocoMotion::BaseComponent
   define_parts :list_wrapper
 
   renders_many :items, LocoMotion::BasicComponent.build(tag_name: :li)

data/app/components/daisy/navigation/link_component.rb

@@ -2,23 +2,40 @@
 # The Daisy::Navigation::LinkComponent is a simple component that renders an
 # anchor tag.
 #
-class Daisy::Navigation::LinkComponent < LocoMotion.configuration.base_component_class
+class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
 
   # Create a new instance of the LinkComponent.
   #
-  # If passed **two** positional arguments, the first is considered the `text`
-  # and the second is considered the `href`. If passed only **one** positional
-  # argument, it is treated as the `href` and we assume the `text` will be
-  # provided in the block. `target` is always a keyword argument.
+  # @param args [Array] Looks for **one** or **two** positional arguments.
+  #   - If passed **two** positional arguments, the first is considered the `title`
+  #   and the second is considered the `href`.
+  #   - If passed only **one** positional argument, it is treated as the `href`
+  #   and we assume the `title` will be provided in the block.
+  #   - If no text is passed in the block, we will use the `href` as the title
+  # @param kws [Hash] The keyword arguments for the component.
   #
-  # @param text [String] The text to display in the link.
-  # @param href [String] The URL to visit when the link is clicked.
-  # @param target [String] The target attribute for the anchor tag.
+  # @option kws title [String] The text to display in the link.
+  # @option kws href [String] The URL to visit when the link is clicked.
+  # @option kws target [String] The target attribute for the anchor tag.
   def initialize(*args, **kws, &block)
     super
 
-    @text = config_option(:text, args.size == 2 ? args[0] : nil)
-    @href = config_option(:href, args.size == 2 ? args[1] : args[0])
+    if args.size == 1
+      # If given one arg, assume it's the href and / or the title (if no block is given)
+      @title = args[0]
+      @href = args[0]
+    elsif args.size == 2
+      # If given two args, assume the first is the title and the second is the href
+      @title = args[0]
+      @href = args[1]
+    else
+      # Otherwise, assume they pass everything as keyword arguments
+      @title = config_option(:title)
+      @href = config_option(:href)
+    end
+
+    @target = config_option(:target)
   end
 
   #
@@ -31,4 +48,15 @@ class Daisy::Navigation::LinkComponent < LocoMotion.configuration.base_component
     add_html(:component, { href: @href }) if @href
     add_html(:component, { target: @target }) if @target
   end
+
+  #
+  # Renders the link component.
+  #
+  # Because this is an inline component which might be utlized alongside text,
+  # we utilize the `call` method instead of a template to ensure that no
+  # additional whitespace gets added to the output.
+  #
+  def call
+    part(:component) { content || @title }
+  end
 end

data/app/components/daisy/navigation/menu_component.rb

@@ -1,25 +1,55 @@
-class Daisy::Navigation::MenuComponent < LocoMotion.configuration.base_component_class
+#
+# A component that renders a menu with items.
+#
+# @slot item [Daisy::Navigation::MenuItemComponent] Renders one or more menu
+#   items.
+#
+# @loco_example Basic Usage
+#   = daisy_menu do |menu|
+#     - # Menu Item with a grouping title via keyword argument
+#     - menu.with_item(title: "Group 1") do
+#       = link_to "Item 1 - 1", "#"
+#
+#     - # Menu Item with a grouping title as the first positional argument
+#     - menu.with_item("Group 2") do
+#       = link_to "Item 2 - 1", "#"
+#
+#     - # Menu Item with no grouping title
+#     - menu.with_item do
+#       = link_to "Item 2 - 2", "#"
+#
+class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
 
   #
   # The items for the MenuComponent.
   #
+  # @part title Wrapper for the title of the menu item.
   #
-  class Daisy::Navigation::MenuItemComponent < LocoMotion.configuration.base_component_class
+  class Daisy::Navigation::MenuItemComponent < LocoMotion::BaseComponent
     define_part :title
 
     #
     # Create a new instance of the MenuItemComponent.
     #
-    # @param title [String] (Optional) Shows an additional title above the item.
-    # @param disabled [Boolean] (Optional) Sets the item in a disabled state.
+    # @param args [Array] If provided, the first argument is considered the
+    #   `title`.
+    #
+    # @param kws [Hash] The keyword arguments for the component.
+    #
+    # @option kws title [String] Shows an additional title above the item.
+    # @option kws disabled [Boolean] Sets the item in a disabled state.
     #
     def initialize(*args, **kws, &block)
       super
 
-      @simple_title = config_option(:title)
+      @simple_title = config_option(:title, args[0])
       @disabled = config_option(:disabled)
     end
 
+    #
+    # Adds the relevant Daisy classes and applies the disabled state if
+    # provided (utilizes Tailwind pointer-events-none).
+    #
     def before_render
       set_tag_name(:component, :li)
       add_css(:component, "disabled pointer-events-none") if @disabled
@@ -28,6 +58,9 @@ class Daisy::Navigation::MenuComponent < LocoMotion.configuration.base_component
       add_css(:title, "menu-title")
     end
 
+    #
+    # Renders the menu item component including a title if present.
+    #
     def call
       part(:component) do
         concat(part(:title) { @simple_title }) if @simple_title
@@ -38,10 +71,17 @@ class Daisy::Navigation::MenuComponent < LocoMotion.configuration.base_component
 
   renders_many :items, Daisy::Navigation::MenuItemComponent
 
+  #
+  # Create a new instance of the MenuComponent. Passes any arguments to the
+  # BaseComponent.
+  #
   def initialize(*args, **kws, &block)
     super
   end
 
+  #
+  # Sets the tag name to `<ul>` and adds the relevant Daisy classes.
+  #
   def before_render
     set_tag_name(:component, :ul)
     add_css(:component, "menu")

data/app/components/daisy/navigation/navbar_component.rb

@@ -1,4 +1,4 @@
-class Daisy::Navigation::NavbarComponent < LocoMotion.configuration.base_component_class
+class Daisy::Navigation::NavbarComponent < LocoMotion::BaseComponent
   renders_one :start, LocoMotion::BasicComponent.build(css: "navbar-start")
 
   renders_one :center, LocoMotion::BasicComponent.build(css: "navbar-center")

data/app/components/daisy/navigation/steps_component.rb

@@ -1,6 +1,6 @@
-class Daisy::Navigation::StepsComponent < LocoMotion.configuration.base_component_class
+class Daisy::Navigation::StepsComponent < LocoMotion::BaseComponent
 
-  class Daisy::Navigation::StepComponent < LocoMotion.configuration.base_component_class
+  class Daisy::Navigation::StepComponent < LocoMotion::BaseComponent
     attr_reader :simple
     def initialize(*args, **kws, &block)
       super

data/app/components/daisy/navigation/tabs_component.rb

@@ -1,5 +1,5 @@
 # This is the Tabs component.
-class Daisy::Navigation::TabsComponent < LocoMotion.configuration.base_component_class
+class Daisy::Navigation::TabsComponent < LocoMotion::BaseComponent
 
   class TabComponent < LocoMotion::BasicComponent
     define_parts :content_wrapper

data/app/components/hero/icon_component.rb

@@ -1,4 +1,6 @@
-class Hero::IconComponent < LocoMotion.configuration.base_component_class
+class Hero::IconComponent < LocoMotion::BaseComponent
+  prepend LocoMotion::Concerns::TippableComponent
+
   def initialize(*args, **kws, &block)
     super
 
@@ -12,6 +14,13 @@ class Hero::IconComponent < LocoMotion.configuration.base_component_class
     add_css(:component, "[:where(&)]:size-5")
   end
 
+  #
+  # Renders the icon component.
+  #
+  # Because this is an inline component which might be utlized alongside text,
+  # we utilize the `call` method instead of a template to ensure that no
+  # additional whitespace gets added to the output.
+  #
   def call
     heroicon_tag(@icon, **rendered_html(:component))
   end

data/lib/daisy.rb

@@ -1,6 +1,6 @@
-require "daisy/helpers"
-require "heroicons-rails"
-
+#
+# Parent module for all Daisy components.
+#
 module Daisy
   #
   # Holds all Action-type components.
@@ -16,4 +16,14 @@ module Daisy
   # Holds all Navigation-type components.
   #
   module Navigation; end
+
+  #
+  # Holds all Feedback-type components.
+  #
+  module Feedback; end
+
+  #
+  # Holds all Layout-type components.
+  #
+  module Layout; end
 end

data/lib/hero.rb

@@ -0,0 +1,7 @@
+require "heroicons-rails"
+
+#
+# Parent module for all Hero components.
+#
+module Hero
+end

data/lib/loco_motion/basic_component.rb

@@ -3,7 +3,7 @@
 # so that users can pass in all of the same CSS and HTML options that a standard
 # component would have.
 #
-class LocoMotion::BasicComponent < LocoMotion.configuration.base_component_class
+class LocoMotion::BasicComponent < LocoMotion::BaseComponent
 
   def call
     part(:component) do

data/lib/loco_motion/concerns/tippable_component.rb

@@ -0,0 +1,26 @@
+module LocoMotion
+  module Concerns
+    #
+    # Can be included in relevant components to allow a new `tip` attibute that
+    # automatically adds the `tooltip` CSS class and the `data-tip` attribute
+    # to the component.
+    #
+    module TippableComponent
+      #
+      # Calls the parent `before_render`. Then adds the `tooltip` CSS class and
+      # the `data-tip` attribute to the component if the `tip` attribute is
+      # present.
+      #
+      def before_render
+        super
+
+        tip = config_option(:tip)
+
+        if tip
+          add_css(:component, "tooltip")
+          add_html(:component, { data: { tip: tip } })
+        end
+      end
+    end
+  end
+end