shadcn-rails 0.1.0

data/app/components/shadcn/sidebar_component.rb

@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Sidebar component for application layouts
+  # Matches shadcn/ui Sidebar component
+  # A composable, themeable sidebar with collapsible state
+  #
+  # @example Basic sidebar
+  #   <%= render Shadcn::SidebarComponent.new do |sidebar| %>
+  #     <% sidebar.with_header do %>
+  #       <div class="flex items-center gap-2 px-4">
+  #         <span class="font-semibold">App Name</span>
+  #       </div>
+  #     <% end %>
+  #     <% sidebar.with_sidebar_content do |sc| %>
+  #       <% sc.with_group do |group| %>
+  #         <% group.with_label { "Platform" } %>
+  #         <% group.with_group_content do |gc| %>
+  #           <% gc.with_menu do |menu| %>
+  #             <% menu.with_item do |item| %>
+  #               <% item.with_button(href: "/dashboard") do %>
+  #                 Dashboard
+  #               <% end %>
+  #             <% end %>
+  #           <% end %>
+  #         <% end %>
+  #       <% end %>
+  #     <% end %>
+  #     <% sidebar.with_footer do %>
+  #       User info here
+  #     <% end %>
+  #   <% end %>
+  #
+  class SidebarComponent < BaseComponent
+    SIDEBAR_WIDTH = "16rem"
+    SIDEBAR_WIDTH_MOBILE = "18rem"
+    SIDEBAR_WIDTH_ICON = "3rem"
+
+    SIDES = {
+      left: "left",
+      right: "right"
+    }.freeze
+
+    VARIANTS = {
+      sidebar: "sidebar",
+      floating: "floating",
+      inset: "inset"
+    }.freeze
+
+    COLLAPSIBLE_MODES = {
+      offcanvas: "offcanvas",
+      icon: "icon",
+      none: "none"
+    }.freeze
+
+    # Slots
+    renders_one :header, lambda { |**options|
+      SidebarHeaderComponent.new(**options)
+    }
+    renders_one :sidebar_content, lambda { |**options|
+      SidebarContentComponent.new(**options)
+    }
+    renders_one :footer, lambda { |**options|
+      SidebarFooterComponent.new(**options)
+    }
+    renders_one :rail, lambda { |**options|
+      SidebarRailComponent.new(**options)
+    }
+
+    # @param side [Symbol] Side to show sidebar (:left, :right)
+    # @param variant [Symbol] Visual style (:sidebar, :floating, :inset)
+    # @param collapsible [Symbol] Collapse mode (:offcanvas, :icon, :none)
+    # @param default_open [Boolean] Whether sidebar starts open
+    def initialize(
+      side: :left,
+      variant: :sidebar,
+      collapsible: :offcanvas,
+      default_open: true,
+      **options
+    )
+      super(**options)
+      @side = side.to_sym
+      @variant = variant.to_sym
+      @collapsible = collapsible.to_sym
+      @default_open = default_open
+    end
+
+    def call
+      content_tag(:aside, sidebar_content, sidebar_attributes)
+    end
+
+    private
+
+    def sidebar_content
+      safe_join([
+        sidebar_inner
+      ].compact)
+    end
+
+    def sidebar_inner
+      content_tag(:div, inner_content, inner_attributes)
+    end
+
+    def inner_content
+      safe_join([header, sidebar_content, footer, rail].compact)
+    end
+
+    def inner_attributes
+      {
+        class: cn(
+          "flex h-full w-full flex-col bg-sidebar",
+          "group-data-[collapsible=icon]:overflow-hidden"
+        ),
+        "data-shadcn--sidebar-target": "inner"
+      }
+    end
+
+    def sidebar_attributes
+      attrs = {
+        class: cn(sidebar_classes, class_name),
+        "data-controller": "shadcn--sidebar",
+        "data-side": @side.to_s,
+        "data-variant": @variant.to_s,
+        "data-collapsible": @collapsible.to_s,
+        "data-state": @default_open ? "expanded" : "collapsed",
+        "data-shadcn--sidebar-open-value": @default_open.to_s,
+        "data-shadcn--sidebar-side-value": @side.to_s,
+        "data-shadcn--sidebar-variant-value": @variant.to_s,
+        "data-shadcn--sidebar-collapsible-value": @collapsible.to_s,
+        "data-action": "keydown.ctrl+b@window->shadcn--sidebar#toggle keydown.meta+b@window->shadcn--sidebar#toggle"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+
+    def sidebar_classes
+      cn(
+        # Base styles
+        "group peer hidden md:block text-sidebar-foreground",
+        # Fixed positioning for sidebar variant
+        @variant == :sidebar && "fixed inset-y-0 z-10 h-svh",
+        # Side-specific positioning
+        @side == :left && "left-0",
+        @side == :right && "right-0",
+        # Width handling
+        "w-[--sidebar-width]",
+        # Transition
+        "transition-[left,right,width] duration-200 ease-linear",
+        # Collapsed state styles
+        "group-data-[collapsible=offcanvas]:w-0",
+        "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+        # Variant-specific styles
+        variant_classes,
+        # Side-specific collapsed offset
+        collapsed_offset_classes
+      )
+    end
+
+    def variant_classes
+      case @variant
+      when :floating
+        "p-2"
+      when :inset
+        "border-r bg-transparent"
+      else
+        "border-r"
+      end
+    end
+
+    def collapsed_offset_classes
+      case @side
+      when :left
+        "group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+      when :right
+        "group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]"
+      end
+    end
+  end
+end

data/app/components/shadcn/sidebar_content_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarContent component - scrollable content area for sidebar
+  class SidebarContentComponent < BaseComponent
+    BASE_CLASSES = "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden"
+
+    renders_many :groups, lambda { |**options|
+      SidebarGroupComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, content_structure, content_attributes)
+    end
+
+    private
+
+    def content_structure
+      groups.any? ? safe_join(groups) : content
+    end
+
+    def content_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "content"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_footer_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarFooter component - sticky footer section for sidebar
+  class SidebarFooterComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col gap-2 p-2"
+
+    def call
+      content_tag(:div, content, footer_attributes)
+    end
+
+    private
+
+    def footer_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "footer"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_group_action_component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarGroupAction component - action button for a sidebar group
+  class SidebarGroupActionComponent < BaseComponent
+    BASE_CLASSES = "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+    COLLAPSED_CLASSES = "group-data-[collapsible=icon]:hidden"
+
+    def call
+      content_tag(:button, content, action_attributes)
+    end
+
+    private
+
+    def action_attributes
+      attrs = {
+        type: "button",
+        class: cn(BASE_CLASSES, COLLAPSED_CLASSES, class_name),
+        "data-sidebar": "group-action"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_group_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarGroup component - groups related sidebar items
+  class SidebarGroupComponent < BaseComponent
+    BASE_CLASSES = "relative flex w-full min-w-0 flex-col p-2"
+
+    renders_one :label, lambda { |**options|
+      SidebarGroupLabelComponent.new(**options)
+    }
+    renders_one :action, lambda { |**options|
+      SidebarGroupActionComponent.new(**options)
+    }
+    renders_one :group_content, lambda { |**options|
+      SidebarGroupContentComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, group_content_structure, group_attributes)
+    end
+
+    private
+
+    def group_content_structure
+      safe_join([label, action, group_content, content].compact)
+    end
+
+    def group_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "group"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_group_content_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarGroupContent component - content container for a sidebar group
+  class SidebarGroupContentComponent < BaseComponent
+    BASE_CLASSES = "w-full text-sm"
+
+    renders_many :menus, lambda { |**options|
+      SidebarMenuComponent.new(**options)
+    }
+
+    def call
+      content_tag(:div, content_structure, content_attributes)
+    end
+
+    private
+
+    def content_structure
+      menus.any? ? safe_join(menus) : content
+    end
+
+    def content_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "group-content"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_group_label_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarGroupLabel component - label for a sidebar group
+  class SidebarGroupLabelComponent < BaseComponent
+    BASE_CLASSES = "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0"
+    COLLAPSED_CLASSES = "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0"
+
+    def call
+      content_tag(:div, content, label_attributes)
+    end
+
+    private
+
+    def label_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, COLLAPSED_CLASSES, class_name),
+        "data-sidebar": "group-label"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_header_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarHeader component - sticky header section for sidebar
+  class SidebarHeaderComponent < BaseComponent
+    BASE_CLASSES = "flex flex-col gap-2 p-2"
+
+    def call
+      content_tag(:div, content, header_attributes)
+    end
+
+    private
+
+    def header_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "header"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_inset_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarInset component - main content area next to sidebar
+  class SidebarInsetComponent < BaseComponent
+    BASE_CLASSES = "relative flex min-h-svh flex-1 flex-col bg-background"
+    PEER_CLASSES = "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow"
+
+    def call
+      content_tag(:main, content, inset_attributes)
+    end
+
+    private
+
+    def inset_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, PEER_CLASSES, class_name),
+        "data-sidebar": "inset"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_action_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuAction component - action button within menu item
+  class SidebarMenuActionComponent < BaseComponent
+    BASE_CLASSES = "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0"
+    COLLAPSED_CLASSES = "group-data-[collapsible=icon]:hidden"
+    SHOW_ON_HOVER_CLASSES = "after:absolute after:-inset-2 after:md:hidden group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0"
+
+    def initialize(show_on_hover: false, **options)
+      super(**options)
+      @show_on_hover = show_on_hover
+    end
+
+    def call
+      content_tag(:button, content, action_attributes)
+    end
+
+    private
+
+    def action_attributes
+      attrs = {
+        type: "button",
+        class: cn(
+          BASE_CLASSES,
+          COLLAPSED_CLASSES,
+          @show_on_hover ? SHOW_ON_HOVER_CLASSES : nil,
+          class_name
+        ),
+        "data-sidebar": "menu-action"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_badge_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuBadge component - badge within menu item
+  class SidebarMenuBadgeComponent < BaseComponent
+    BASE_CLASSES = "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none"
+    COLLAPSED_CLASSES = "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+
+    def call
+      content_tag(:span, content, badge_attributes)
+    end
+
+    private
+
+    def badge_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, COLLAPSED_CLASSES, class_name),
+        "data-sidebar": "menu-badge"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_button_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuButton component - button/link within menu item
+  class SidebarMenuButtonComponent < BaseComponent
+    VARIANTS = {
+      default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+      outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
+    }.freeze
+
+    SIZES = {
+      default: "h-8 text-sm",
+      sm: "h-7 text-xs",
+      lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0"
+    }.freeze
+
+    BASE_CLASSES = "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0"
+
+    def initialize(variant: :default, size: :default, is_active: false, as_child: false, tooltip: nil, href: nil, **options)
+      super(**options)
+      @variant = variant.to_sym
+      @size = size.to_sym
+      @is_active = is_active
+      @as_child = as_child
+      @tooltip = tooltip
+      @href = href
+    end
+
+    def call
+      if @href
+        content_tag(:a, content, button_attributes.merge(href: @href))
+      else
+        content_tag(:button, content, button_attributes.merge(type: "button"))
+      end
+    end
+
+    private
+
+    def button_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name),
+        "data-sidebar": "menu-button",
+        "data-size": @size,
+        "data-active": @is_active
+      }
+      attrs[:"data-tooltip"] = @tooltip if @tooltip
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenu component - menu container for sidebar items
+  class SidebarMenuComponent < BaseComponent
+    BASE_CLASSES = "flex w-full min-w-0 flex-col gap-1"
+
+    renders_many :items, lambda { |**options|
+      SidebarMenuItemComponent.new(**options)
+    }
+
+    def call
+      content_tag(:ul, menu_content, menu_attributes)
+    end
+
+    private
+
+    def menu_content
+      items.any? ? safe_join(items) : content
+    end
+
+    def menu_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "menu"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_item_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuItem component - individual menu item
+  class SidebarMenuItemComponent < BaseComponent
+    BASE_CLASSES = "group/menu-item relative"
+
+    renders_one :button, lambda { |**options|
+      SidebarMenuButtonComponent.new(**options)
+    }
+    renders_one :action, lambda { |**options|
+      SidebarMenuActionComponent.new(**options)
+    }
+    renders_one :badge, lambda { |**options|
+      SidebarMenuBadgeComponent.new(**options)
+    }
+    renders_one :sub, lambda { |**options|
+      SidebarMenuSubComponent.new(**options)
+    }
+
+    def call
+      content_tag(:li, item_content, item_attributes)
+    end
+
+    private
+
+    def item_content
+      safe_join([button, action, badge, sub, content].compact)
+    end
+
+    def item_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "menu-item"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/sidebar_menu_skeleton_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # SidebarMenuSkeleton component - loading skeleton for menu item
+  class SidebarMenuSkeletonComponent < BaseComponent
+    BASE_CLASSES = "rounded-md h-8 flex gap-2 px-2 items-center"
+
+    def initialize(show_icon: false, **options)
+      super(**options)
+      @show_icon = show_icon
+    end
+
+    def call
+      content_tag(:div, skeleton_content, skeleton_attributes)
+    end
+
+    private
+
+    def skeleton_content
+      safe_join([
+        @show_icon ? icon_skeleton : nil,
+        text_skeleton
+      ].compact)
+    end
+
+    def icon_skeleton
+      content_tag(:span, "", class: "size-4 rounded-md bg-sidebar-accent animate-pulse")
+    end
+
+    def text_skeleton
+      # Random width between 60-80%
+      width = rand(60..80)
+      content_tag(:span, "", class: "h-4 flex-1 bg-sidebar-accent animate-pulse rounded-md", style: "max-width: #{width}%")
+    end
+
+    def skeleton_attributes
+      attrs = {
+        class: cn(BASE_CLASSES, class_name),
+        "data-sidebar": "menu-skeleton"
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end