loco_motion-rails 0.0.7 → 0.4.0

data/app/components/daisy/mockup/code_component.rb

@@ -0,0 +1,144 @@
+#
+# The CodeComponent creates stylized code blocks for displaying code snippets,
+# terminal output, or any text that benefits from monospace formatting.
+# Common use cases include:
+# - Displaying code examples.
+# - Showing terminal commands and output.
+# - Highlighting important configuration settings.
+# - Creating interactive tutorials.
+#
+# The component supports line prefixes (e.g., for line numbers or command
+# prompts), syntax highlighting via CSS classes, and multi-line code blocks.
+#
+# @slot lines+ [Daisy::Mockup::CodeLineComponent] Individual lines of code,
+#   each with optional prefix and styling.
+#
+# @loco_example Basic Command with Prefix
+#   = daisy_code(prefix: "$") do
+#     yarn add @profoundry-us/loco_motion
+#
+# @loco_example Multi-line Terminal Output
+#   = daisy_code do |code|
+#     - code.with_line(prefix: "$") do
+#       npm install
+#     - code.with_line(prefix: ">", css: "text-warning") do
+#       Installing packages...
+#     - code.with_line(prefix: ">", css: "text-success") do
+#       Done in 2.45s
+#
+# @loco_example Code Block with Highlighting
+#   = daisy_code do |code|
+#     - code.with_line(prefix: "1") do
+#       def hello_world
+#     - code.with_line(prefix: "2", css: "bg-warning") do
+#       puts "Hello, world!"
+#     - code.with_line(prefix: "3") do
+#       end
+#
+# @loco_example Plain Code Block
+#   = daisy_code do
+#     :plain
+#       class Example
+#         def initialize
+#           @value = 42
+#         end
+#       end
+#
+class Daisy::Mockup::CodeComponent < LocoMotion::BaseComponent
+
+  #
+  # A component for rendering individual lines within a code block.
+  #
+  # @part code The code content for this line.
+  #
+  class Daisy::Mockup::CodeLineComponent < LocoMotion::BaseComponent
+    define_parts :code
+
+    #
+    # Creates a new code line.
+    #
+    # @option kws prefix [String] Optional prefix for the line (e.g., "$",
+    #   ">", or line numbers).
+    # @option kws css [String] Additional CSS classes for styling the line.
+    #
+    def initialize(**kws)
+      super(**kws)
+
+      @prefix = config_option(:prefix)
+    end
+
+    #
+    # Sets up the component's HTML tags and attributes.
+    #
+    def before_render
+      set_tag_name(:component, :pre)
+      set_tag_name(:code, :code)
+
+      add_html(:component, { "data-prefix": @prefix }) if @prefix
+    end
+
+    #
+    # Renders the line with its code content.
+    #
+    def call
+      part(:component) do
+        part(:code) do
+          content
+        end
+      end
+    end
+  end
+
+  define_parts :pre, :code
+  renders_many :lines, Daisy::Mockup::CodeLineComponent
+
+  #
+  # Creates a new code block component.
+  #
+  # @option kws prefix [String] Optional prefix for all lines (if not using
+  #   individual line prefixes).
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Size: `w-full`, `max-w-3xl`
+  #   - Background: `bg-base-300`, `bg-neutral`
+  #   - Text: `text-sm`, `text-base-content`
+  #
+  def initialize(**kws)
+    super(**kws)
+
+    @prefix = config_option(:prefix)
+  end
+
+  #
+  # Sets up the component's CSS classes and HTML attributes.
+  #
+  def before_render
+    add_css(:component, "mockup-code")
+
+    set_tag_name(:pre, :pre)
+    set_tag_name(:code, :code)
+
+    add_html(:pre, { "data-prefix": @prefix }) if @prefix
+
+    # If the prefix is blank, add some left margin and hide the :before
+    # pseudo-element used for the prefix
+    add_css(:pre, "before:!hidden ml-6") if @prefix.blank?
+  end
+
+  #
+  # Renders the code block with its lines or direct content.
+  #
+  def call
+    part(:component) do
+      if lines.any?
+        lines.each { |line| concat(line) }
+      else
+        part(:pre) do
+          part(:code) do
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/daisy/mockup/device_component.rb

@@ -0,0 +1,81 @@
+#
+# The DeviceComponent creates realistic device mockups for showcasing mobile
+# and tablet applications. Common use cases include:
+# - Displaying mobile app screenshots.
+# - Creating marketing materials.
+# - Demonstrating responsive designs.
+# - Building portfolio pieces.
+#
+# The component includes an optional camera element and a display area that
+# can contain any content, typically an ArtboardComponent for proper sizing.
+#
+# @part camera The device's camera element, shown at the top by default.
+# @part display The main display area of the device.
+#
+# @loco_example Phone with Camera
+#   = daisy_device(css: "mockup-phone") do
+#     = daisy_artboard(css: "phone-2") do
+#       .flex.flex-col.p-4
+#         .text-2xl.font-bold
+#           My App
+#         = image_tag("screenshot.jpg",
+#           class: "rounded-lg")
+#
+# @loco_example Tablet without Camera
+#   = daisy_device(css: "mockup-phone border-primary",
+#     show_camera: false) do
+#     = daisy_artboard(css: "artboard-horizontal phone-3") do
+#       .bg-base-100.p-4
+#         Tablet Content Here
+#
+# @loco_example Styled Device
+#   = daisy_device(css: "mockup-phone border-4
+#     border-accent shadow-xl") do
+#     = daisy_artboard(css: "phone-1") do
+#       .bg-gradient-to-br.from-primary.to-accent.p-4
+#         Premium App Design
+#
+class Daisy::Mockup::DeviceComponent < LocoMotion::BaseComponent
+
+  define_parts :camera, :display
+
+  #
+  # Creates a new Device component.
+  #
+  # @option kws show_camera [Boolean] Whether to show the camera element
+  #   (default: true).
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Type: `mockup-phone`
+  #   - Border: `border-2`, `border-primary`
+  #   - Shadow: `shadow-lg`, `shadow-xl`
+  #
+  def initialize(**kws)
+    super(**kws)
+
+    @show_camera = config_option(:show_camera, true)
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:camera, "camera")
+    add_css(:display, "display")
+    add_css(:display, "!mt-0") if !@show_camera
+  end
+
+  #
+  # Renders the device with its camera (if enabled) and display content.
+  #
+  def call
+    part(:component) do
+      concat(part(:camera)) if @show_camera
+
+      concat(part(:display) do
+        content
+      end)
+    end
+  end
+
+end

data/app/components/daisy/mockup/frame_component.rb

@@ -0,0 +1,62 @@
+#
+# The FrameComponent creates a simple window-like container for showcasing
+# content. Similar to the BrowserComponent but without the toolbar, it's
+# perfect for:
+# - Displaying application screenshots.
+# - Creating simple window mockups.
+# - Framing content in presentations.
+# - Building marketing materials.
+#
+# The component provides a clean, minimal window frame that can be styled
+# to match your design needs.
+#
+# @loco_example Basic Frame
+#   = daisy_frame(css: "border border-base-300") do
+#     .border-t.border-base-300.p-4
+#       Window content here
+#
+# @loco_example Styled Frame
+#   = daisy_frame(css: "bg-primary border-2") do
+#     .bg-base-100.border-t.p-8.text-center
+#       = image_tag("logo.png",
+#         class: "max-w-xs mx-auto")
+#       %p.mt-4
+#         Professional window mockup
+#
+# @loco_example Image Frame
+#   = daisy_frame(css: "shadow-xl") do
+#     .p-0
+#       = image_tag("screenshot.jpg",
+#         class: "w-full")
+#
+class Daisy::Mockup::FrameComponent < LocoMotion::BaseComponent
+  #
+  # Creates a new Frame component.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Size: `w-full`, `max-w-4xl`
+  #   - Border: `border`, `border-primary`
+  #   - Background: `bg-base-100`, `bg-primary`
+  #   - Shadow: `shadow-lg`, `shadow-xl`
+  #
+  def initialize(**kws)
+    super(**kws)
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:component, "mockup-window")
+  end
+
+  #
+  # Renders the frame with its content.
+  #
+  def call
+    part(:component) do
+      content
+    end
+  end
+end

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

@@ -1,11 +1,76 @@
+#
+# Creates a bottom navigation bar, typically used in mobile-friendly applications
+# to provide quick access to important sections.
+#
+# @slot sections+ {Daisy::Navigation::BottomNavSectionComponent} The sections to display in the navigation bar.
+#
+# @example Basic bottom nav with icons
+#   = daisy_bottom_nav do |nav|
+#     - nav.with_section(icon: "home", href: "#")
+#     - nav.with_section(icon: "information-circle", href: "#", active: true)
+#     - nav.with_section(icon: "chart-bar", href: "#")
+#
+# @example Bottom nav with titles
+#   = daisy_bottom_nav do |nav|
+#     - nav.with_section(icon: "home", href: "#", title: "Home")
+#     - nav.with_section(icon: "information-circle", href: "#", title: "Info")
+#     - nav.with_section(icon: "chart-bar", href: "#", title: "Stats")
+#
+# @example Colored bottom nav
+#   = daisy_bottom_nav do |nav|
+#     - nav.with_section(icon: "home", href: "#", css: "text-primary")
+#     - nav.with_section(icon: "information-circle", href: "#", css: "text-secondary")
+#     - nav.with_section(icon: "chart-bar", href: "#", css: "text-accent")
+#
 class Daisy::Navigation::BottomNavComponent < LocoMotion::BaseComponent
 
+  #
+  # A section within a Bottom Navigation component.
+  #
+  # @part icon The icon element for the section.
+  # @part title The title element for the section.
+  #
+  # @example Basic section with icon
+  #   = daisy_bottom_nav do |nav|
+  #     - nav.with_section(icon: "home", href: "#")
+  #
+  # @example Active section with title
+  #   = daisy_bottom_nav do |nav|
+  #     - nav.with_section(icon: "information-circle", href: "#", active: true, title: "Info")
+  #
+  # @example Custom title content
+  #   = daisy_bottom_nav do |nav|
+  #     - nav.with_section(icon: "chart-bar", href: "#") do
+  #       .font-bold.text-xs
+  #         Stats
+  #
   class Daisy::Navigation::BottomNavSectionComponent < LocoMotion::BaseComponent
 
     define_parts :icon, :title
 
-    def initialize(*args, **kws, &block)
-      super
+    # Creates a new bottom navigation section.
+    #
+    # @param kws [Hash] The keyword arguments for the component.
+    #
+    # @option kws icon [String] The name of the icon to display.
+    #
+    # @option kws icon_variant [Symbol] The variant of the icon to use (default: :outline).
+    #
+    # @option kws icon_css [String] Additional CSS classes for the icon.
+    #
+    # @option kws title [String] Optional text to display below the icon.
+    #
+    # @option kws href [String] Optional URL to make the section a link.
+    #
+    # @option kws active [Boolean] Whether this section is currently active (default: false).
+    #
+    # @option kws css [String] Additional CSS classes for styling. Common
+    #   options include:
+    #   - Text color: `text-primary`, `text-secondary`, `text-accent`
+    #   - Custom colors: `text-[#449944]`
+    #
+    def initialize(**kws)
+      super(**kws)
 
       @icon = config_option(:icon)
       @icon_variant = config_option(:icon_variant, :outline)
@@ -42,6 +107,20 @@ class Daisy::Navigation::BottomNavComponent < LocoMotion::BaseComponent
 
   renders_many :sections, Daisy::Navigation::BottomNavSectionComponent
 
+  # Creates a new bottom navigation component.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Position: `relative`, `fixed bottom-0`
+  #   - Width: `w-full`, `max-w-[400px]`
+  #   - Border: `border`, `border-base-200`
+  #
+  def initialize(**kws)
+    super(**kws)
+  end
+
   def before_render
     add_css(:component, "btm-nav")
   end

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

@@ -1,15 +1,52 @@
+#
+# Creates a breadcrumb navigation component to show the user's location within
+# a website or app.
+#
+# @part list_wrapper The unordered list element that wraps the breadcrumb items.
+#
+# @slot items+ {LocoMotion::BasicComponent} The individual breadcrumb items.
+#   Each item is rendered as a list item (`<li>`) element.
+#
+# @example Basic breadcrumbs with text
+#   = daisy_breadcrumbs do |breadcrumbs|
+#     - breadcrumbs.with_item do
+#       = link_to "Home", "#"
+#     - breadcrumbs.with_item do
+#       = link_to "Docs", "#"
+#     - breadcrumbs.with_item do
+#       = link_to "Components", "#"
+#
+# @example Breadcrumbs with icons
+#   = daisy_breadcrumbs do |breadcrumbs|
+#     - breadcrumbs.with_item do
+#       = link_to "#" do
+#         = hero_icon("home", css: "size-4 mr-1")
+#         Home
+#     - breadcrumbs.with_item do
+#       = link_to "#" do
+#         = hero_icon("document", css: "size-4 mr-1")
+#         Docs
+#
 class Daisy::Navigation::BreadcrumbsComponent < LocoMotion::BaseComponent
   define_parts :list_wrapper
 
   renders_many :items, LocoMotion::BasicComponent.build(tag_name: :li)
 
-  def initialize(*args, **kws, &block)
-    super
+  # Create a new instance of the BreadcrumbsComponent.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Text: `text-sm`, `text-base-content`
+  #   - Spacing: `space-x-2`, `gap-4`
+  #
+  def initialize(**kws)
+    super(**kws)
   end
 
   def before_render
     add_css(:component, "breadcrumbs")
-
     set_tag_name(:list_wrapper, :ul)
   end
 end

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

@@ -1,6 +1,20 @@
 #
-# The Daisy::Navigation::LinkComponent is a simple component that renders an
-# anchor tag.
+# Creates a styled link component that can be used for navigation or inline text
+# links. This component is designed to work similarly to Rails' `link_to` helper.
+#
+# @example Link with custom styling
+#   = daisy_link "Components", "#", css: "link-primary text-xl"
+#
+# @example Link with block content
+#   = daisy_link "#", css: "link-hover" do
+#     = hero_icon("home")
+#     Home
+#
+# @example Link with positional arguments
+#   = daisy_link "Documentation", "#"
+#
+# @example Basic link with keyword arguments
+#   = daisy_link(title: "Home", href: "#")
 #
 class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
   prepend LocoMotion::Concerns::TippableComponent
@@ -12,13 +26,24 @@ class Daisy::Navigation::LinkComponent < LocoMotion::BaseComponent
   #   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
+  #   - 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.
   #
-  # @option kws title [String] The text to display in the link.
+  # @option kws title [String] The text to display in the link. Not required if
+  #   providing block content.
+  #
   # @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)
+  #
+  # @option kws target [String] The target attribute for the anchor tag (e.g., "_blank").
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Style: `link-primary`, `link-secondary`, `link-accent`
+  #   - State: `link-hover`
+  #   - Text: `text-sm`, `text-xl`, `text-2xl`
+  #
+  def initialize(*args, **kws)
     super
 
     if args.size == 1

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

@@ -1,34 +1,53 @@
 #
-# A component that renders a menu with items.
+# Creates a menu component for displaying a list of items, optionally with group titles.
 #
-# @slot item [Daisy::Navigation::MenuItemComponent] Renders one or more menu
-#   items.
+# @slot items+ {Daisy::Navigation::MenuItemComponent} The menu items to display.
 #
-# @loco_example Basic Usage
+# @example Basic menu with items
 #   = 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.with_item do
+#       = link_to "Item 1", "#"
+#     - menu.with_item do
+#       = link_to "Item 2", "#"
 #
-#     - # Menu Item with a grouping title as the first positional argument
+# @example Menu with group titles
+#   = daisy_menu do |menu|
+#     - menu.with_item(title: "Group 1") do
+#       = link_to "Item 1-1", "#"
+#       = link_to "Item 1-2", "#"
 #     - menu.with_item("Group 2") do
-#       = link_to "Item 2 - 1", "#"
+#       = link_to "Item 2-1", "#"
+#       = link_to "Item 2-2", "#"
 #
-#     - # Menu Item with no grouping title
+# @example Menu with disabled items
+#   = daisy_menu do |menu|
 #     - menu.with_item do
-#       = link_to "Item 2 - 2", "#"
+#       = link_to "Active Item", "#"
+#     - menu.with_item(disabled: true) do
+#       Disabled Item
 #
 class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
 
   #
-  # The items for the MenuComponent.
+  # A menu item component that can optionally have a title and be disabled.
+  #
+  # @part title The title element for the menu item.
   #
-  # @part title Wrapper for the title of the menu item.
+  # @example Basic menu item
+  #   = menu.with_item do
+  #     = link_to "Item", "#"
+  #
+  # @example Menu item with title
+  #   = menu.with_item(title: "Group") do
+  #     = link_to "Item", "#"
+  #
+  # @example Disabled menu item
+  #   = menu.with_item(disabled: true) do
+  #     = link_to "Item", "#"
   #
   class Daisy::Navigation::MenuItemComponent < LocoMotion::BaseComponent
     define_part :title
 
-    #
     # Create a new instance of the MenuItemComponent.
     #
     # @param args [Array] If provided, the first argument is considered the
@@ -37,10 +56,16 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
     # @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
+    # @option kws css [String] Additional CSS classes for styling. Common
+    #   options include:
+    #   - Text: `text-sm`, `text-base-content`
+    #   - Spacing: `mt-4`, `mb-2`
+    #
+    def initialize(*args, **kws)
+      super(**kws)
 
       @simple_title = config_option(:title, args[0])
       @disabled = config_option(:disabled)
@@ -71,12 +96,19 @@ class Daisy::Navigation::MenuComponent < LocoMotion::BaseComponent
 
   renders_many :items, Daisy::Navigation::MenuItemComponent
 
+  # Create a new instance of the MenuComponent.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
   #
-  # Create a new instance of the MenuComponent. Passes any arguments to the
-  # BaseComponent.
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Size: `w-56`, `max-w-xs`
+  #   - Background: `bg-base-100`, `bg-neutral`
+  #   - Border: `border`, `rounded-box`
+  #   - Shadow: `shadow`, `shadow-lg`
   #
-  def initialize(*args, **kws, &block)
-    super
+  def initialize(**kws)
+    super(**kws)
   end
 
   #

data/app/components/daisy/navigation/navbar_component.html.haml

@@ -1,4 +1,4 @@
 = part(:component) do
   = start if start?
   = center if center?
-  = tail if tail?
+  = end_content if end?

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

@@ -1,12 +1,73 @@
+#
+# Creates a navigation bar component typically used at the top of a page to
+# organize navigation links and branding elements.
+#
+# @slot start {LocoMotion::BasicComponent} The left section of the navbar.
+#   Automatically gets the `navbar-start` CSS class.
+#
+# @slot center {LocoMotion::BasicComponent} The center section of the navbar.
+#   Automatically gets the `navbar-center` CSS class.
+#
+# @slot end {LocoMotion::BasicComponent} The right section of the navbar.
+#   Automatically gets the `navbar-end` CSS class.
+#
+# @example Basic navbar with logo and GitHub link
+#   = daisy_navbar(css: "bg-base-100") do |navbar|
+#     - navbar.with_start do
+#       = image_tag("logo.png", class: "h-8")
+#       %span.font-bold Company Name
+#
+#     - navbar.with_end do
+#       = link_to "GitHub", "https://github.com", target: "_blank"
+#
+# @example Navbar with all sections and dropdown
+#   = daisy_navbar(css: "bg-base-100") do |navbar|
+#     - navbar.with_start do
+#       %span.text-lg.italic Brand
+#
+#     - navbar.with_center do
+#       = hero_icon("code-bracket", css: "size-14")
+#
+#     - navbar.with_end do
+#       = daisy_dropdown do |dropdown|
+#         - dropdown.with_button(title: "Menu")
+#         - dropdown.with_item do
+#           = link_to "Item 1", "#"
+#
 class Daisy::Navigation::NavbarComponent < LocoMotion::BaseComponent
   renders_one :start, LocoMotion::BasicComponent.build(css: "navbar-start")
 
   renders_one :center, LocoMotion::BasicComponent.build(css: "navbar-center")
 
-  # End is a reserved word in Ruby
-  renders_one :tail, LocoMotion::BasicComponent.build(css: "navbar-end")
+  renders_one :end, LocoMotion::BasicComponent.build(css: "navbar-end")
+
+  # Create a new instance of the NavbarComponent.
+  #
+  # @param kws [Hash] The keyword arguments for the component.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Background: `bg-base-100`, `bg-neutral`
+  #   - Border: `border`, `border-base-200`, `rounded-lg`
+  #   - Shadow: `shadow`, `shadow-lg`
+  #   - Min Height: `min-h-8`, `min-h-16`
+  #
+  def initialize(**kws)
+    super(**kws)
+  end
 
   def before_render
     add_css(:component, "navbar")
   end
+
+  private
+
+  # Returns the end section content.
+  #
+  # Since `end` is a reserved word in Ruby, we need to use a different method
+  # name in the template.
+  #
+  def end_content
+    self.end
+  end
 end