shadcn-rails 0.1.0

data/app/components/shadcn/aspect_ratio_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Aspect Ratio component for maintaining content proportions
+  # Matches shadcn/ui AspectRatio component
+  #
+  # @example 16:9 video ratio
+  #   <%= render Shadcn::AspectRatioComponent.new(ratio: 16.0/9.0) do %>
+  #     <img src="image.jpg" class="h-full w-full object-cover" />
+  #   <% end %>
+  #
+  # @example Square ratio
+  #   <%= render Shadcn::AspectRatioComponent.new(ratio: 1) do %>
+  #     <img src="square.jpg" />
+  #   <% end %>
+  #
+  class AspectRatioComponent < BaseComponent
+    # @param ratio [Float] Aspect ratio (width/height, e.g. 16.0/9.0 for widescreen)
+    def initialize(ratio: 1, **options)
+      super(**options)
+      @ratio = ratio.to_f
+    end
+
+    def call
+      content_tag(:div, wrapper_attributes) do
+        content_tag(:div, content, inner_attributes)
+      end
+    end
+
+    private
+
+    def wrapper_attributes
+      attrs = {
+        class: cn("relative w-full", class_name),
+        style: "padding-bottom: #{(1.0 / @ratio) * 100}%;"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+
+    def inner_attributes
+      {
+        class: "absolute inset-0",
+        style: "position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
+      }
+    end
+  end
+end

data/app/components/shadcn/avatar_component.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Avatar component for user profile images
+  # Matches shadcn/ui Avatar component
+  #
+  # @example Basic avatar with image
+  #   <%= render Shadcn::AvatarComponent.new(src: user.avatar_url, alt: user.name) %>
+  #
+  # @example With fallback
+  #   <%= render Shadcn::AvatarComponent.new(src: user.avatar_url, alt: user.name, fallback: user.initials) %>
+  #
+  # @example Different sizes
+  #   <%= render Shadcn::AvatarComponent.new(src: url, alt: name, size: :sm) %>
+  #   <%= render Shadcn::AvatarComponent.new(src: url, alt: name, size: :lg) %>
+  #
+  # @example With slot-based fallback
+  #   <%= render Shadcn::AvatarComponent.new(size: :sm) do |avatar| %>
+  #     <% avatar.with_fallback { "JD" } %>
+  #   <% end %>
+  #
+  class AvatarComponent < BaseComponent
+    renders_one :fallback, ->(class: nil, **options, &block) {
+      AvatarFallbackComponent.new(class: binding.local_variable_get(:class), **options, &block)
+    }
+    SIZES = {
+      sm: "h-8 w-8 text-xs",
+      default: "h-10 w-10 text-sm",
+      lg: "h-12 w-12 text-base",
+      xl: "h-16 w-16 text-lg"
+    }.freeze
+
+    BASE_CLASSES = "relative flex shrink-0 overflow-hidden rounded-full"
+    IMAGE_CLASSES = "aspect-square h-full w-full"
+    FALLBACK_CLASSES = "flex h-full w-full items-center justify-center rounded-full bg-muted"
+
+    # @param src [String, nil] Image URL
+    # @param alt [String] Alt text for the image
+    # @param fallback [String, nil] Fallback text when image fails to load
+    # @param size [Symbol] Avatar size (:sm, :default, :lg, :xl)
+    def initialize(src: nil, alt: "", fallback: nil, size: :default, **options)
+      super(**options)
+      @src = src
+      @alt = alt
+      @fallback = fallback || generate_fallback(alt)
+      @size = size.to_sym
+    end
+
+    def call
+      content_tag(:span, avatar_content, avatar_attributes)
+    end
+
+    private
+
+    def avatar_content
+      if @src.present?
+        image_with_fallback
+      elsif fallback?
+        fallback
+      else
+        fallback_element
+      end
+    end
+
+    def image_with_fallback
+      # Use Stimulus controller to handle image loading errors
+      content_tag(:span, class: "contents", data: stimulus_data(controller: "shadcn--avatar")) do
+        safe_join([
+          tag(:img,
+            src: @src,
+            alt: @alt,
+            class: IMAGE_CLASSES,
+            data: { "shadcn--avatar-target": "image", action: "error->shadcn--avatar#handleError" }
+          ),
+          content_tag(:span, @fallback, class: "#{FALLBACK_CLASSES} hidden", data: { "shadcn--avatar-target": "fallback" })
+        ])
+      end
+    end
+
+    def fallback_element
+      content_tag(:span, @fallback, class: FALLBACK_CLASSES)
+    end
+
+    def avatar_classes
+      cn(BASE_CLASSES, SIZES[@size], class_name)
+    end
+
+    def avatar_attributes
+      attrs = { class: avatar_classes }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+
+    def generate_fallback(alt)
+      return "" if alt.blank?
+
+      # Generate initials from name
+      words = alt.split
+      if words.length >= 2
+        "#{words.first[0]}#{words.last[0]}".upcase
+      else
+        alt[0..1].upcase
+      end
+    end
+  end
+end

data/app/components/shadcn/avatar_fallback_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Avatar Fallback component for initials or placeholder
+  class AvatarFallbackComponent < BaseComponent
+    FALLBACK_CLASSES = "flex h-full w-full items-center justify-center rounded-full bg-muted"
+
+    def initialize(class: nil, **options, &block)
+      super(**options, &block)
+      @custom_class = binding.local_variable_get(:class)
+    end
+
+    def call
+      content_tag(:span, content, class: cn(FALLBACK_CLASSES, @custom_class))
+    end
+  end
+end

data/app/components/shadcn/badge_component.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Badge component for labels and status indicators
+  # Matches shadcn/ui Badge component
+  #
+  # @example Basic badge
+  #   <%= render Shadcn::BadgeComponent.new { "New" } %>
+  #
+  # @example Variant badges
+  #   <%= render Shadcn::BadgeComponent.new(variant: :secondary) { "Draft" } %>
+  #   <%= render Shadcn::BadgeComponent.new(variant: :destructive) { "Error" } %>
+  #   <%= render Shadcn::BadgeComponent.new(variant: :outline) { "v1.0.0" } %>
+  #
+  class BadgeComponent < BaseComponent
+    # Available badge variants
+    VARIANTS = {
+      default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+      outline: "text-foreground"
+    }.freeze
+
+    BASE_CLASSES = "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+
+    # @param variant [Symbol] Badge style variant (:default, :secondary, :destructive, :outline)
+    def initialize(variant: :default, **options)
+      super(**options)
+      @variant = variant.to_sym
+    end
+
+    def call
+      content_tag(:span, content, badge_attributes)
+    end
+
+    private
+
+    def badge_classes
+      cn(BASE_CLASSES, VARIANTS[@variant], class_name)
+    end
+
+    def badge_attributes
+      attrs = { class: badge_classes }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/base_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Base class for all shadcn ViewComponents
+  # Provides common functionality like class merging and data attribute handling
+  class BaseComponent < ViewComponent::Base
+    # Include class name helper for cn() method
+    include Shadcn::Rails::Helpers::ClassNameHelper
+
+    # Common attributes shared by all components
+    attr_reader :class_name, :data, :html_options
+
+    # @param class_name [String, nil] Additional CSS classes
+    # @param data [Hash] Data attributes (will be prefixed with data-)
+    # @param html_options [Hash] Additional HTML attributes
+    def initialize(class_name: nil, data: {}, **html_options, &block)
+      @class_name = class_name
+      @data = data
+      @html_options = html_options
+      @constructor_block = block
+    end
+
+    # Override content to support blocks passed to new()
+    # This allows both syntaxes:
+    #   render Component.new { "text" }  # block to new()
+    #   render Component.new do %>text<% end  # block to render()
+    # Note: Only calls blocks with arity 0 (no arguments).
+    # Blocks expecting arguments (like slot blocks) are handled by ViewComponent.
+    def content
+      return super if super.present?
+      return @constructor_block.call if @constructor_block && @constructor_block.arity == 0
+
+      nil
+    end
+
+    private
+
+    # Merge default classes with user-provided classes
+    # @param default_classes [String] Default component classes
+    # @return [String] Merged class string
+    def merge_classes(default_classes)
+      cn(default_classes, class_name)
+    end
+
+    # Build data attributes hash
+    # Converts Ruby-style keys to HTML data attributes
+    # @param additional_data [Hash] Additional data attributes to merge
+    # @return [Hash] Merged data attributes
+    def build_data(additional_data = {})
+      merged = data.merge(additional_data)
+      merged.transform_keys { |key| "data-#{key.to_s.dasherize}" }
+    end
+
+    # Build the complete HTML attributes hash
+    # @param default_classes [String] Default component classes
+    # @param additional_data [Hash] Additional data attributes
+    # @return [Hash] Complete HTML attributes
+    def build_html_attributes(default_classes, additional_data = {})
+      attrs = html_options.dup
+      attrs[:class] = merge_classes(default_classes)
+      attrs.merge!(build_data(additional_data))
+      attrs
+    end
+
+    # Helper to build Stimulus controller data attributes
+    # @param controller [String] Stimulus controller name
+    # @param values [Hash] Controller values
+    # @param actions [Hash] Controller actions
+    # @return [Hash] Stimulus data attributes
+    def stimulus_data(controller:, values: {}, actions: {}, targets: {})
+      data = { controller: controller }
+
+      values.each do |key, value|
+        data[:"#{controller}-#{key}-value"] = value
+      end
+
+      actions.each do |event, action|
+        data[:action] = [data[:action], "#{event}->#{controller}##{action}"].compact.join(" ")
+      end
+
+      targets.each do |name, _|
+        data[:"#{controller}-target"] = name
+      end
+
+      data
+    end
+
+    # Access configuration
+    def config
+      Shadcn::Rails.configuration
+    end
+
+    # Add prefix to Tailwind classes if configured
+    def prefix_classes(classes)
+      return classes if config.tailwind_prefix.blank?
+
+      classes.split.map { |c| "#{config.tailwind_prefix}#{c}" }.join(" ")
+    end
+  end
+end

data/app/components/shadcn/breadcrumb_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Breadcrumb component for navigation hierarchy
+  # Matches shadcn/ui Breadcrumb component
+  #
+  # @example Basic usage
+  #   <%= render Shadcn::BreadcrumbComponent.new do |breadcrumb| %>
+  #     <% breadcrumb.with_item(href: "/") { "Home" } %>
+  #     <% breadcrumb.with_item(href: "/products") { "Products" } %>
+  #     <% breadcrumb.with_item(current: true) { "Widget" } %>
+  #   <% end %>
+  #
+  class BreadcrumbComponent < BaseComponent
+    renders_many :items, ->(href: nil, current: false, **options, &block) do
+      BreadcrumbItemComponent.new(
+        href: href,
+        current: current,
+        **options,
+        &block
+      )
+    end
+
+    def call
+      content_tag(:nav, breadcrumb_attributes) do
+        content_tag(:ol, class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5") do
+          safe_join(items_with_separators)
+        end
+      end
+    end
+
+    private
+
+    def breadcrumb_attributes
+      attrs = {
+        "aria-label": "Breadcrumb",
+        class: merge_classes("")
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+
+    def items_with_separators
+      items.each_with_index.flat_map do |item, index|
+        result = [content_tag(:li, class: "inline-flex items-center gap-1.5") { item.to_s }]
+        result << separator unless index == items.length - 1
+        result
+      end
+    end
+
+    def separator
+      content_tag(:li, role: "presentation", "aria-hidden": "true", class: "text-muted-foreground") do
+        content_tag(:svg,
+          content_tag(:path, nil, d: "m9 18 6-6-6-6"),
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          class: "h-3.5 w-3.5"
+        )
+      end
+    end
+  end
+end

data/app/components/shadcn/breadcrumb_item_component.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Individual breadcrumb item
+  class BreadcrumbItemComponent < BaseComponent
+    LINK_CLASSES = "transition-colors hover:text-foreground"
+    PAGE_CLASSES = "font-normal text-foreground"
+
+    def initialize(href: nil, current: false, class_name: nil, **options)
+      super(class_name: class_name, **options)
+      @href = href
+      @current = current
+      @class_name = class_name
+    end
+
+    def call
+      if @current
+        content_tag(:span, item_attributes) do
+          content
+        end
+      else
+        content_tag(:a, link_attributes) do
+          content
+        end
+      end
+    end
+
+    private
+
+    def item_attributes
+      attrs = {
+        role: "link",
+        class: cn(PAGE_CLASSES, @class_name),
+        "aria-current": "page",
+        "aria-disabled": "true"
+      }
+      attrs.merge!(html_options.except(:href))
+      attrs.compact
+    end
+
+    def link_attributes
+      attrs = {
+        href: @href,
+        class: cn(LINK_CLASSES, @class_name)
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/button_component.rb

@@ -0,0 +1,141 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Button component with multiple variants and sizes
+  # Matches shadcn/ui Button component
+  #
+  # @example Basic button
+  #   <%= render Shadcn::ButtonComponent.new do %>
+  #     Click me
+  #   <% end %>
+  #
+  # @example Variant and size
+  #   <%= render Shadcn::ButtonComponent.new(variant: :destructive, size: :lg) do %>
+  #     Delete
+  #   <% end %>
+  #
+  # @example As link
+  #   <%= render Shadcn::ButtonComponent.new(href: "/path", variant: :link) do %>
+  #     Go somewhere
+  #   <% end %>
+  #
+  # @example Icon button
+  #   <%= render Shadcn::ButtonComponent.new(size: :icon, aria: { label: "Settings" }) do %>
+  #     <%= icon "settings" %>
+  #   <% end %>
+  #
+  class ButtonComponent < BaseComponent
+    # Available button variants
+    VARIANTS = {
+      default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+      destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+      outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+      secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline"
+    }.freeze
+
+    # Available button sizes
+    SIZES = {
+      default: "h-9 px-4 py-2",
+      sm: "h-8 rounded-md px-3 text-xs",
+      lg: "h-10 rounded-md px-8",
+      icon: "h-9 w-9",
+      icon_sm: "h-8 w-8",
+      icon_lg: "h-10 w-10"
+    }.freeze
+
+    # Base classes applied to all buttons
+    BASE_CLASSES = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+
+    # @param variant [Symbol] Button style variant (:default, :destructive, :outline, :secondary, :ghost, :link)
+    # @param size [Symbol] Button size (:default, :sm, :lg, :icon, :icon_sm, :icon_lg)
+    # @param href [String, nil] If provided, renders as an anchor tag
+    # @param type [String] Button type attribute (button, submit, reset)
+    # @param disabled [Boolean] Whether button is disabled
+    # @param loading [Boolean] Whether button shows loading state
+    # @param class_name [String, nil] Additional CSS classes
+    # @param data [Hash] Data attributes
+    # @param html_options [Hash] Additional HTML attributes
+    def initialize(
+      variant: :default,
+      size: :default,
+      href: nil,
+      type: "button",
+      disabled: false,
+      loading: false,
+      **options
+    )
+      super(**options)
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @href = href
+      @type = type
+      @disabled = disabled
+      @loading = loading
+    end
+
+    def call
+      if @href
+        link_tag
+      else
+        button_tag
+      end
+    end
+
+    private
+
+    def button_tag
+      content_tag(:button, button_content, button_attributes)
+    end
+
+    def link_tag
+      content_tag(:a, button_content, link_attributes)
+    end
+
+    def button_content
+      if @loading
+        safe_join([loading_spinner, content])
+      else
+        content
+      end
+    end
+
+    def loading_spinner
+      content_tag(:span, "", class: "animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full", "aria-hidden": true)
+    end
+
+    def button_classes
+      cn(
+        BASE_CLASSES,
+        VARIANTS[@variant],
+        SIZES[@size],
+        class_name
+      )
+    end
+
+    def button_attributes
+      attrs = html_options.merge(
+        type: @type,
+        class: button_classes,
+        disabled: @disabled || @loading || nil,
+        "aria-disabled": (@disabled || @loading) ? "true" : nil,
+        "aria-busy": @loading ? "true" : nil
+      )
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+
+    def link_attributes
+      attrs = html_options.merge(
+        href: @href,
+        class: button_classes,
+        role: "button",
+        "aria-disabled": @disabled ? "true" : nil,
+        tabindex: @disabled ? "-1" : nil
+      )
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/button_group_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Button Group component for grouping related buttons
+  # Matches shadcn/ui Button Group pattern
+  #
+  # @example Basic button group
+  #   <%= render Shadcn::ButtonGroupComponent.new do |group| %>
+  #     <% group.with_button(variant: :outline) { "Left" } %>
+  #     <% group.with_button(variant: :outline) { "Center" } %>
+  #     <% group.with_button(variant: :outline) { "Right" } %>
+  #   <% end %>
+  #
+  # @example With different variants
+  #   <%= render Shadcn::ButtonGroupComponent.new do |group| %>
+  #     <% group.with_button { "Save" } %>
+  #     <% group.with_button(variant: :outline) { "Cancel" } %>
+  #   <% end %>
+  #
+  # @example Vertical orientation
+  #   <%= render Shadcn::ButtonGroupComponent.new(orientation: :vertical) do |group| %>
+  #     <% group.with_button(variant: :outline) { "Top" } %>
+  #     <% group.with_button(variant: :outline) { "Middle" } %>
+  #     <% group.with_button(variant: :outline) { "Bottom" } %>
+  #   <% end %>
+  #
+  class ButtonGroupComponent < BaseComponent
+    ORIENTATIONS = {
+      horizontal: "flex-row",
+      vertical: "flex-col"
+    }.freeze
+
+    BASE_CLASSES = "inline-flex"
+
+    # Button slot - renders Button components with adjusted border radius
+    renders_many :buttons, lambda { |**options, &block|
+      # Buttons in a group need special border radius handling
+      options[:class_name] = cn(
+        "rounded-none first:rounded-l-md last:rounded-r-md",
+        "-ml-px first:ml-0", # Collapse borders
+        options[:class_name]
+      )
+      Shadcn::ButtonComponent.new(**options, &block)
+    }
+
+    # @param orientation [Symbol] Layout orientation (:horizontal, :vertical)
+    def initialize(orientation: :horizontal, **options)
+      super(**options)
+      @orientation = orientation.to_sym
+    end
+
+    def call
+      tag.div(class: group_classes, role: "group", **html_options.merge(build_data)) do
+        safe_join(buttons)
+      end
+    end
+
+    private
+
+    def group_classes
+      cn(
+        BASE_CLASSES,
+        ORIENTATIONS[@orientation],
+        @orientation == :vertical ? "first:[&>*]:rounded-t-md last:[&>*]:rounded-b-md [&>*]:rounded-none [&>*]:-mt-px [&>*]:first:mt-0" : "",
+        class_name
+      )
+    end
+  end
+end