shadcn_phlexcomponents 0.1.0

data/lib/components/checkbox_group.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class CheckboxGroup < Base
+    STYLES = "space-y-1.5"
+
+    def initialize(name:, value: [], include_hidden: true, **attributes)
+      @name = name
+      @value = value
+      @include_hidden = include_hidden
+      super(**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
+          Checkbox(name: "#{@name}[]", 
+                          id: id,
+                          value: value,
+                          checked: @value.include?(value),
+                          include_hidden: false
+                        )
+          Label(for: id) { text }
+        end
+      end
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        yield
+
+        if @include_hidden
+          input(type: "hidden", name: "#{@name}[]", autocomplete: "off")
+        end
+      end
+    end
+  end
+end

data/lib/components/collapsible.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Collapsible < Base
+
+    def initialize(open: false, aria_id: "collapsible-#{SecureRandom.hex(5)}", **attributes)
+      @open = open
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      CollapsibleTrigger(open: @open, aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      CollapsibleContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--collapsible"
+        }
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/collapsible_content.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class CollapsibleContent < Base
+
+    def initialize(aria_id: :nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        data: {
+          "shadcn-phlexcomponents--collapsible-target": "content"
+        }
+      }
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+      div(class: "#{@class} hidden", **@attributes, &)
+    end
+  end
+end

data/lib/components/collapsible_trigger.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class CollapsibleTrigger < Base
+    def initialize(open: false, as_child: false, aria_id: nil, **attributes)
+      @open = open
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          expanded: @open.to_s,
+          controls: "#{@aria_id}-content"
+        },
+        data: {
+          state: @open ? "open" : 'closed',
+          action: "click->shadcn-phlexcomponents--collapsible#toggle",
+          "shadcn-phlexcomponents--collapsible-target": "trigger"
+        }
+      }
+    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
+  end
+end

data/lib/components/datepicker.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Datepicker < 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
+      file:pt-0.5
+    HEREDOC
+
+    def initialize(name: nil, id: nil, value: nil, format: nil, settings: {}, **attributes)
+      @name = name
+      @id = id || @name
+      @value = value
+      @settings = settings
+      @format = format
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          value: @value&.utc.to_s,
+          format: @format,
+          controller: "shadcn-phlexcomponents--datepicker",
+          settings: @settings.to_json
+        }
+      }
+    end
+
+    def view_template
+      input(type: :text, readonly: true, **@attributes)
+    end
+  end
+end

data/lib/components/dialog.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Dialog < Base
+    STYLES = "inline-block"
+
+    def initialize(aria_id: "dialog-#{SecureRandom.hex(5)}", **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      render(DialogTrigger.new(aria_id: @aria_id, **attributes, &))
+    end
+
+    def content(**attributes, &)
+      render(DialogContent.new(aria_id: @aria_id, **attributes, &))
+    end
+
+    def header(**attributes, &)
+      render(DialogHeader.new(**attributes, &))
+    end
+
+    def title(**attributes, &)
+      render(DialogTitle.new(aria_id: @aria_id, **attributes, &))
+    end
+
+    def description(**attributes, &)
+      render(DialogDescription.new(aria_id: @aria_id, **attributes, &))
+    end
+
+    def footer(**attributes, &)
+      render(DialogFooter.new(**attributes, &))
+    end
+
+    def close(**attributes, &)
+      render(DialogClose.new(**attributes, &))
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--dialog",
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/dialog_close.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DialogClose < Base
+    def initialize(as_child: false, **attributes)
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        data: {
+          action: "click->shadcn-phlexcomponents--dialog#close",
+        },
+      }
+    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
+  end
+end

data/lib/components/dialog_content.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DialogContent < Base
+    STYLES = <<~HEREDOC
+      fixed left-[50%] top-[50%] z-51 grid w-full max-w-lg translate-x-[-50%]
+      translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200
+      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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]
+      data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg
+    HEREDOC
+
+    CLOSE_BUTTON_STYLES = <<~HEREDOC
+      absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background
+      transition-opacity hover:opacity-100 focus:outline-none focus:ring-2
+      focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none
+      cursor-pointer
+    HEREDOC
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        aria: {
+          describedby: "#{@aria_id}-description",
+          labelledby: "#{@aria_id}-title",
+        },
+        data: {
+          "shadcn-phlexcomponents--dialog-target": "content",
+          state: "closed"
+        },
+      }
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+      div(class: "#{@class} hidden", **@attributes) do
+        yield
+
+        button(class: CLOSE_BUTTON_STYLES, data: { action: "click->shadcn-phlexcomponents--dialog#close" }) do
+          icon("x", class: "size-4")
+          span(class: "sr-only") { "close" }
+        end
+      end
+    end
+  end
+end

data/lib/components/dialog_description.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DialogDescription < Base
+    STYLES = "text-sm text-muted-foreground"
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-description",
+      }
+    end
+
+    def view_template(&)
+      p(**@attributes, &)
+    end
+  end
+end

data/lib/components/dialog_footer.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DialogFooter < Base
+    STYLES = "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/dialog_header.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DialogHeader < Base
+    STYLES = "flex flex-col space-y-1.5 text-center sm:text-left"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/dialog_title.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DialogTitle < Base
+    STYLES = "text-lg font-semibold leading-none tracking-tight"
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-title",
+      }
+    end
+
+    def view_template(&)
+      h2(**@attributes, &)
+    end
+  end
+end

data/lib/components/dialog_trigger.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DialogTrigger < Base
+    def initialize(as_child: false, aria_id: nil, **attributes)
+      @as_child = as_child
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: "false",
+          controls: "#{@aria_id}-content",
+        },
+        data: {
+          action: "click->shadcn-phlexcomponents--dialog#open",
+          "shadcn-phlexcomponents--dialog-target": "trigger",
+          as_child: @as_child.to_s
+        },
+      }
+    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
+  end
+end

data/lib/components/dropdown_menu.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DropdownMenu < Base
+    STYLES = "inline-block".freeze
+
+    def initialize(side: :bottom, aria_id: "dropdown-menu-#{SecureRandom.hex(5)}", **attributes)
+      @side = side
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      DropdownMenuTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      DropdownMenuContent(aria_id: @aria_id, side: @side, **attributes, &)
+    end 
+
+    def label(**attributes, &)
+      DropdownMenuLabel(**attributes, &)
+    end
+
+    def item(**attributes, &)
+      DropdownMenuItem(**attributes, &)
+    end
+
+    def item_to(name = nil, options = nil, html_options = nil, &block)
+      DropdownMenuItemTo(name, options, html_options, &block)
+    end
+
+    def separator(**attributes, &)
+      DropdownMenuSeparator(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "shadcn-phlexcomponents--dropdown-menu",
+          side: @side
+        }
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/dropdown_menu_content.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DropdownMenuContent < Base
+    STYLES = <<~HEREDOC.freeze
+      z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1
+      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--dropdown-menu-target": "contentWrapper" }) do
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "menu",
+        aria: {
+          labelledby: "#{@aria_id}-trigger",
+          orientation: "vertical"
+        },
+        data: {
+          state: "closed",
+          side: @side,
+          "shadcn-phlexcomponents--dropdown-menu-target": "content",
+          action: <<~HEREDOC,
+            keydown.up->shadcn-phlexcomponents--dropdown-menu#focusLastItem:prevent
+            keydown.down->shadcn-phlexcomponents--dropdown-menu#focusFirstItem:prevent
+          HEREDOC
+        }
+      }
+    end
+  end
+end

data/lib/components/dropdown_menu_item.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class DropdownMenuItem < Base
+    STYLES = <<~HEREDOC.freeze
+      relative flex cursor-default select-none items-center gap-2 rounded-sm px-2
+      py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground
+      data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0
+    HEREDOC
+
+    def initialize(as_child: false, disabled: false, **attributes)
+      @as_child = as_child
+      @disabled = disabled
+      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
+
+        send(element.name, **merged_attributes) do        
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        role: "menuitem",
+        tabindex: -1,
+        data: {
+          disabled: @disabled,
+          action: <<~HEREDOC,
+            click->shadcn-phlexcomponents--dropdown-menu#selectItem
+            keydown.up->shadcn-phlexcomponents--dropdown-menu#focusPrevItem:stop
+            keydown.down->shadcn-phlexcomponents--dropdown-menu#focusNextItem:stop
+            keydown.enter->shadcn-phlexcomponents--dropdown-menu#selectItem:prevent
+            keydown.space->shadcn-phlexcomponents--dropdown-menu#selectItem:prevent
+            mouseover->shadcn-phlexcomponents--dropdown-menu#focusItem
+            mouseout->shadcn-phlexcomponents--dropdown-menu#focusContent
+          HEREDOC
+          "shadcn-phlexcomponents--dropdown-menu-target": "item"
+        }
+      }
+    end
+  end
+end

data/lib/components/dropdown_menu_item_to.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class DropdownMenuItemTo < DropdownMenuItem
+    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 ||= {}
+      @disabled = @html_options[:disabled]
+      @html_options = mix(default_attributes, @html_options)
+      @html_options[:class] = TAILWIND_MERGER.merge("w-full #{default_styles} #{@html_options[:class]}")
+      
+      if block_given?
+        button_to(@options, @html_options, &)
+      else
+        button_to(@name, @options, @html_options)
+      end
+    end
+  end
+end

data/lib/components/dropdown_menu_label.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class DropdownMenuLabel < Base
+    STYLES = "px-2 py-1.5 text-sm font-semibold".freeze
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/dropdown_menu_separator.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+module ShadcnPhlexcomponents
+
+  class DropdownMenuSeparator < Base
+    STYLES = "-mx-1 my-1 h-px bg-muted".freeze
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+
+    def default_attributes
+      {
+        role: "separator",
+        aria: {
+          orientation: "horizontal"
+        }
+      }
+    end
+  end
+end