shadcn_phlexcomponents 0.1.0

data/lib/components/dropdown_menu_trigger.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class DropdownMenuTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+
+        vanish(&)
+        element_attributes = nokogiri_attributes_to_hash(element)
+        styles = TAILWIND_MERGER.merge("#{@attributes[:class]} #{element_attributes[:class]}")
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = styles
+
+        if element.name == "button"
+          merged_attributes.delete(:role)
+        end
+
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-trigger",
+        role: "button",
+        aria: {
+          haspopup: "menu",
+          expanded: false,
+          controls: "#{@aria_id}-content"
+        },
+        data: {
+          state: "closed",
+          as_child: @as_child.to_s,
+          action: <<~HEREDOC,
+          click->shadcn-phlexcomponents--dropdown-menu#toggle
+          keydown.space->shadcn-phlexcomponents--dropdown-menu#toggle
+          keydown.enter->shadcn-phlexcomponents--dropdown-menu#toggle
+          keydown.down->shadcn-phlexcomponents--dropdown-menu#toggle:prevent
+          HEREDOC
+          "shadcn-phlexcomponents--dropdown-menu-target": "trigger"
+        }
+      }
+    end
+  end
+end

data/lib/components/hover_card.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class HoverCard < Base
+    STYLES = "inline-block".freeze
+
+    def initialize(side: :bottom, **attributes)
+      @side = side
+      super(**attributes)
+    end
+
+    def content(**attributes, &)
+      HoverCardContent(**attributes, &)
+    end 
+
+    def trigger(**attributes, &)
+      HoverCardTrigger(side: @side, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--hover-card",
+          side: @side
+        }
+      }  
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/hover_card_content.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class HoverCardContent < Base
+    STYLES = <<~HEREDOC.freeze
+      z-50 rounded-md border w-64 bg-popover p-4 text-popover-foreground shadow-md outline-none 
+      data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+      data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95
+      data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
+      data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 
+    HEREDOC
+  
+    def initialize(side: :bottom, **attributes)
+      @side = side
+      super(**attributes)
+    end
+
+
+    def view_template(&)
+      div(class: 'hidden fixed top-0 left-0 w-max z-50', data: { "shadcn-phlexcomponents--hover-card-target": "contentWrapper" }) do
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        tabindex: -1,
+        data: {
+          side: @side,
+          "shadcn-phlexcomponents--hover-card-target": "content",
+          action: "mouseover->shadcn-phlexcomponents--hover-card#clearCloseTimer mouseout->shadcn-phlexcomponents--hover-card#closeWithDelay"
+        }
+      }
+    end
+  end
+end

data/lib/components/hover_card_trigger.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class HoverCardTrigger < Base
+    def initialize(as_child: false, **attributes)
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+
+        vanish(&)
+        element_attributes = nokogiri_attributes_to_hash(element)
+        styles = TAILWIND_MERGER.merge("#{@attributes[:class]} #{element_attributes[:class]}")
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = styles
+
+        if element.name == "button"
+          merged_attributes.delete(:role)
+        end
+        
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: @id,
+        role: "button",
+        data: {
+          state: "closed",
+          as_child: @as_child.to_s,
+          action: <<~HEREDOC,
+            click->shadcn-phlexcomponents--hover-card#toggle
+            mouseover->shadcn-phlexcomponents--hover-card#openWithDelay
+            mouseout->shadcn-phlexcomponents--hover-card#closeWithDelay
+          HEREDOC
+          "shadcn-phlexcomponents--hover-card-target": "trigger"
+        }
+      }
+    end
+  end
+end

data/lib/components/input.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Input < Base
+    STYLES = <<~HEREDOC
+      flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1
+      text-base shadow-sm transition-colors file:border-0 file:bg-transparent
+      file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+      disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
+    HEREDOC
+
+    def initialize(type: :text, name: nil, id: nil, **attributes)
+      @type = type
+      @name = name
+      @id = id || @name
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        type: @type,
+        name: @name,
+        id: @id,
+      }
+    end
+
+    def view_template(&)
+      input(**@attributes, &)
+    end
+  end
+end

data/lib/components/label.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class Label < Base
+    STYLES = <<~HEREDOC
+      text-sm font-medium leading-none peer-disabled:cursor-not-allowed
+      peer-disabled:opacity-70 block
+    HEREDOC
+
+    def view_template(&)
+      label(**@attributes, &)
+    end
+  end
+end

data/lib/components/link.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Link < Base
+    STYLES = "font-medium underline underline-offset-4"
+
+    def initialize(name = nil, options = nil, html_options = nil)
+      @name = name
+      @options = options
+      @html_options = html_options
+    end
+
+    def view_template(&)
+      @html_options, @options = @options, @name if block_given?
+      @html_options ||= {}
+      @html_options = mix(default_attributes, @html_options)
+      @html_options[:class] = TAILWIND_MERGER.merge("#{default_styles} #{@html_options[:class]}")
+
+      if block_given?
+        link_to(@options, @html_options, &)
+      else
+        link_to(@name, @options, @html_options)
+      end
+    end
+  end
+end

data/lib/components/loading_button.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class LoadingButton < Button
+    def default_attributes
+      {
+        type: @type,
+        data: {
+          controller: "shadcn-phlexcomponents--loading-button",
+        },
+      }
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        icon("loader-circle", class: "animate-spin hidden group-aria-busy:inline")
+        yield
+      end
+    end
+  end
+end

data/lib/components/pagination.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Pagination < Base
+    STYLES = "mx-auto flex w-full justify-center"
+
+    def link(**attributes, &)
+      PaginationLink(**attributes, &)
+    end
+    
+    def previous(**attributes, &)
+      PaginationPrevious(**attributes, &)
+    end
+
+    def next(**attributes, &)
+      PaginationNext(**attributes, &)
+    end
+    
+    def ellipsis(**attributes, &)
+      PaginationEllipsis(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "navigation",
+        aria: {
+          label: "navigation",
+        }
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        ul(class: "flex flex-row items-center gap-1", &)
+      end
+    end
+  end
+end

data/lib/components/pagination_ellipsis.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class PaginationEllipsis < Base
+    STYLES = "flex h-9 w-9 items-center justify-center"
+
+    def default_attributes
+      {
+        aria: {
+          hidden: "true"
+        }
+      }
+    end
+
+    def view_template
+      li do
+        span(**@attributes) do
+          icon("ellipsis", class: "size-4")
+          span(class: "sr-only") { "More pages" }
+        end
+      end
+    end
+  end
+end

data/lib/components/pagination_link.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class PaginationLink < Base
+    def initialize(href: nil, active: false, **attributes)
+      @href = href  
+      @active = active
+      super(**attributes)
+    end
+
+    def default_styles
+      if @active
+        Button.default_styles(variant: :outline, size: :icon)
+      else
+        Button.default_styles(variant: :ghost, size: :icon)
+      end
+    end
+
+    def default_attributes
+      {
+        href: @href,
+        aria: {
+          current: @active ? "page" : nil
+        }
+      }  
+    end
+
+    def view_template(&)
+      li do
+        a(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/components/pagination_next.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class PaginationNext < Base
+    def initialize(href: nil, **attributes)
+      @href = href  
+      super(**attributes)
+    end
+
+    def default_styles
+      "#{Button.default_styles(variant: :ghost, size: :default)} gap-1 pr-2.5"
+    end
+
+    def default_attributes
+      {
+        href: @href,
+        aria: {
+          label: "Go to next page"
+        }
+      }  
+    end
+
+    def view_template(&)
+      li do
+        a(**@attributes) do
+          span { "Next" }
+          icon("chevron-right", class: "size-4")
+        end
+      end
+    end
+  end
+end

data/lib/components/pagination_previous.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class PaginationPrevious < Base
+    def initialize(href: nil, **attributes)
+      @href = href
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        href: @href,
+        aria: {
+          label: "Go to previous page"
+        }
+      }  
+    end
+
+    def default_styles
+      "#{Button.default_styles(variant: :ghost, size: :default)} gap-1 pl-2.5"
+    end
+
+    def view_template(&)
+      li do
+        a(**@attributes) do
+          icon("chevron-left", class: "size-4")
+          span { "Previous" }
+        end
+      end
+    end
+  end
+end

data/lib/components/popover.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class Popover < Base
+    STYLES = "inline-block".freeze
+
+    def initialize(side: :bottom, aria_id: "popover-#{SecureRandom.hex(5)}", **attributes)
+      @side = side
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def content(**attributes, &)
+      PopoverContent(side: @side, aria_id: @aria_id, **attributes, &)
+    end 
+
+    def trigger(**attributes, &)
+      PopoverTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--popover",
+          side: @side
+        }
+      }  
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/popover_content.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class PopoverContent < Base
+    STYLES = <<~HEREDOC.freeze
+      z-50 rounded-md border w-72 bg-popover p-4 text-popover-foreground shadow-md outline-none 
+      data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 
+      data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 
+      data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2
+      data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 
+    HEREDOC
+  
+    def initialize(side: :bottom, aria_id: nil, **attributes)
+      @side = side
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(class: 'hidden fixed top-0 left-0 w-max z-50', data: { "shadcn-phlexcomponents--popover-target": "contentWrapper" }) do
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        data: {
+          side: @side,
+          "shadcn-phlexcomponents--popover-target": "content"
+        }
+      }
+    end
+  end
+end

data/lib/components/popover_trigger.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class PopoverTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      if @as_child
+        content = capture(&)
+        element = find_as_child(content.to_s)
+
+        vanish(&)
+        element_attributes = nokogiri_attributes_to_hash(element)
+        styles = TAILWIND_MERGER.merge("#{@attributes[:class]} #{element_attributes[:class]}")
+        merged_attributes = mix(@attributes, element_attributes)
+        merged_attributes[:class] = styles
+
+        if element.name == "button"
+          merged_attributes.delete(:role)
+        end
+
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: @id,
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: false,
+          controls: "#{@aria_id}-content"
+        },
+        data: {
+          as_child: @as_child.to_s,
+          action: "click->shadcn-phlexcomponents--popover#toggle",
+          "shadcn-phlexcomponents--popover-target": "trigger"
+        }
+      }
+    end
+  end
+end

data/lib/components/progress.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Progress < Base
+    STYLES = "relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
+
+    def initialize(value: 0, **attributes)
+      @value = value
+      super(**attributes)    
+    end
+
+    def default_attributes
+      {
+        role: "progressbar",
+        aria: {
+          valuemax: 100,
+          valuemin: 0,
+          valuenow: @value,
+        },
+        data: {
+          controller: "shadcn-phlexcomponents--progress",
+          "shadcn-phlexcomponents--progress-progress-value": @value
+        }
+      }
+    end
+
+    def view_template
+      div(**@attributes) do
+        div(
+          class: "h-full w-full flex-1 bg-primary transition-all", 
+          style: "transform: translateX(-#{100-@value}%)", 
+          data: { "shadcn-phlexcomponents--progress-target": "bar"}
+        )
+      end
+    end
+  end
+end

data/lib/components/radio_group.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class RadioGroup < Base
+    STYLES = "grid gap-2 outline-none"
+
+    def initialize(name: nil, value: nil, dir: "ltr", include_hidden: true, **attributes)
+      @name = name
+      @value = value
+      @dir = dir
+      @include_hidden = include_hidden
+      super(**attributes)
+    end
+
+    def item(name: nil, value: nil, **attributes)
+      RadioGroupItem(name: name || @name, value: value, checked: @value == value, **attributes)
+    end
+
+    def items(collection, value_method:, text_method:, wrapper_class: nil)
+      wrapper_class = TAILWIND_MERGER.merge("flex items-center space-x-2 #{wrapper_class}")
+
+      if collection.first && collection.first.is_a?(Hash)
+        collection = convert_collection_hash_to_struct(collection, value_method: value_method, text_method: text_method)
+      end
+
+      collection.each do |item|
+        value = item.public_send(value_method)
+        text = item.public_send(text_method)
+        id = "#{@name.parameterize.underscore}_#{value}"
+
+        div(class: wrapper_class) do
+          RadioGroupItem(name: @name, value: value, checked: @value == value, id: id)
+          Label(for: id) { text }
+        end
+      end
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        if @include_hidden
+          input(type: "hidden", name: @name, autocomplete: "off")
+        end
+
+        yield
+      end
+    end
+
+    def default_attributes
+      { 
+        role: "radiogroup",
+        dir: @dir,
+        aria: {
+          required: false,
+        },
+        data: {
+          controller: "shadcn-phlexcomponents--radio-group",
+          "shadcn-phlexcomponents--radio-group-selected-value": @value,
+        }
+      }
+    end
+  end
+end