loco_motion-rails 0.0.6 → 0.0.8

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

@@ -0,0 +1,68 @@
+#
+# The StackComponent creates a 3D stacking effect by layering elements on top
+# of each other. Common use cases include:
+# - Notification cards or alerts.
+# - Photo galleries with overlap.
+# - Interactive card games.
+# - Animated content transitions.
+#
+# The component automatically positions children in a stack, with each element
+# appearing on top of the previous one. This creates depth and visual interest
+# in your layouts.
+#
+# @loco_example Basic Card Stack
+#   = daisy_stack do
+#     = daisy_card(css: "bg-base-100/80 shadow") do
+#       Top Card
+#     = daisy_card(css: "bg-base-100/80 shadow") do
+#       Middle Card
+#     = daisy_card(css: "bg-base-100/80 shadow") do
+#       Bottom Card
+#
+# @loco_example Animated Stack
+#   = daisy_stack do
+#     = daisy_card(css: "bg-primary cursor-pointer",
+#       html: { onclick: "anime({
+#         targets: this,
+#         translateY: '-100%',
+#         opacity: 0,
+#         complete: (el) => el.remove()
+#       })" }) do
+#       Click to Remove
+#
+# @loco_example Image Stack
+#   = daisy_stack(css: "w-96") do
+#     %img{ src: "image1.jpg" }
+#     %img{ src: "image2.jpg" }
+#     %img{ src: "image3.jpg" }
+#
+class Daisy::Layout::StackComponent < LocoMotion::BaseComponent
+  #
+  # Creates a new Stack component.
+  #
+  # @param kws [Hash] Keyword arguments for customizing the stack.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Size: `w-96`, `h-64`
+  #   - Spacing: `gap-2`, `space-y-4`
+  #   - Position: `relative`, `absolute`
+  #
+  def initialize(**kws)
+    super
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:component, "stack")
+  end
+
+  #
+  # Renders the component and its stacked content.
+  #
+  def call
+    part(:component) { content }
+  end
+end

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

@@ -0,0 +1,78 @@
+#
+# The BrowserComponent creates a realistic browser window mockup, perfect for:
+# - Showcasing web applications.
+# - Creating website previews.
+# - Demonstrating responsive designs.
+# - Building marketing materials.
+#
+# The component includes an optional toolbar for URL input and browser
+# controls, and a content area that can contain any content you wish to
+# display.
+#
+# @slot toolbar [LocoMotion::BasicComponent] An optional toolbar section,
+#   typically containing a URL input field or navigation controls.
+#
+# @loco_example Basic Browser with URL
+#   = daisy_browser(css: "w-full border border-base-300") do |browser|
+#     - browser.with_toolbar do
+#       %input.input.input-bordered{
+#         placeholder: "https://example.com" }
+#
+#     .border-t.border-base-300.p-4
+#       Your website content here
+#
+# @loco_example Styled Browser
+#   = daisy_browser(css: "bg-primary border-2") do |browser|
+#     - browser.with_toolbar do
+#       .flex.gap-2.px-4
+#         = daisy_button(icon: "chevron-left",
+#           css: "btn-circle btn-sm")
+#         = daisy_button(icon: "chevron-right",
+#           css: "btn-circle btn-sm")
+#         %input.input.input-sm.flex-1{
+#           placeholder: "Search..." }
+#
+#     .bg-base-100.p-8.text-center
+#       Professional website mockup
+#
+# @loco_example Content-Only Browser
+#   = daisy_browser(css: "border shadow-lg") do
+#     .p-4
+#       Simple browser frame without toolbar
+#
+class Daisy::Mockup::BrowserComponent < LocoMotion::BaseComponent
+
+  renders_one :toolbar, LocoMotion::BasicComponent.build(css: "mockup-browser-toolbar")
+
+  #
+  # Creates a new Browser component.
+  #
+  # @option kws css [String] Additional CSS classes for styling. Common
+  #   options include:
+  #   - Size: `w-full`, `max-w-4xl`
+  #   - Border: `border`, `border-2`, `border-primary`
+  #   - Background: `bg-base-100`, `bg-primary`
+  #   - Shadow: `shadow`, `shadow-lg`
+  #
+  def initialize(**kws)
+    super(**kws)
+  end
+
+  #
+  # Sets up the component's CSS classes.
+  #
+  def before_render
+    add_css(:component, "mockup-browser")
+  end
+
+  #
+  # Renders the toolbar (if present) and content.
+  #
+  def call
+    part(:component) do
+      concat(toolbar) if toolbar
+      concat(content)
+    end
+  end
+
+end

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 @@
-class Daisy::Navigation::BottomNavComponent < LocoMotion.configuration.base_component_class
+#
+# 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
 
-  class Daisy::Navigation::BottomNavSectionComponent < LocoMotion.configuration.base_component_class
+  #
+  # 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.configuration.base_comp
 
   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 @@
-class Daisy::Navigation::BreadcrumbsComponent < LocoMotion.configuration.base_component_class
+#
+# 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,24 +1,66 @@
 #
-# 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.
 #
-class Daisy::Navigation::LinkComponent < LocoMotion.configuration.base_component_class
+# @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
 
   # 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.
+  #
+  # @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 (e.g., "_blank").
   #
-  # @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.
-  def initialize(*args, **kws, &block)
+  # @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
 
-    @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 +73,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