shadcn_phlexcomponents 0.1.5 → 0.1.11

data/lib/{components → shadcn_phlexcomponents/components}/link.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Link < Base
-    STYLES = "font-medium underline underline-offset-4"
+    class_variants(base: "font-medium underline underline-offset-4")
 
     def initialize(name = nil, options = nil, html_options = nil)
       @name = name
@@ -15,9 +15,16 @@ module ShadcnPhlexcomponents
         @html_options = @options
         @options = @name
       end
+
       @html_options ||= {}
-      @html_options = mix(default_attributes, @html_options)
-      @html_options[:class] = TAILWIND_MERGER.merge("#{default_styles} #{@html_options[:class]}")
+      variant = @html_options.delete(:variant)
+      size = @html_options.delete(:size) || :default
+
+      @html_options[:class] = if variant
+        Button.new.class_variants(variant: variant, size: size, class: @html_options[:class])
+      else
+        class_variants(class: @html_options[:class])
+      end
 
       if block_given?
         link_to(@options, @html_options, &)

data/lib/shadcn_phlexcomponents/components/loading_button.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class LoadingButton < Base
+    def initialize(variant: :default, size: :default, type: :submit, **attributes)
+      @variant = variant
+      @size = size
+      @type = type
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        type: @type,
+        data: {
+          controller: "loading-button",
+        },
+      }
+    end
+
+    def view_template(&)
+      Button(variant: @variant, size: @size, **@attributes) do
+        icon("loader-circle", class: "animate-spin hidden group-aria-busy:inline")
+        yield
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/pagination.rb

@@ -0,0 +1,166 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Pagination < Base
+    class_variants(base: "mx-auto flex w-full justify-center")
+
+    def item(**attributes, &)
+      PaginationItem(**attributes, &)
+    end
+
+    def link(name = nil, options = nil, html_options = nil, &)
+      PaginationLink(name, options, html_options, &)
+    end
+
+    def previous(options = nil, html_options = nil)
+      PaginationPrevious(options, html_options)
+    end
+
+    def next(options = nil, html_options = nil)
+      PaginationNext(options, html_options)
+    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
+
+  class PaginationItem < Base
+    def view_template(&)
+      li(**@attributes, &)
+    end
+  end
+
+  class PaginationPrevious < Base
+    class_variants(base: "gap-1 px-2.5 sm:pl-2.5")
+
+    def initialize(options = nil, html_options = nil)
+      @options = options
+      @html_options = html_options
+    end
+
+    def default_attributes
+      {
+        aria: {
+          label: "Go to previous page",
+        },
+      }
+    end
+
+    def view_template
+      @html_options ||= {}
+      @html_options = mix(default_attributes, @html_options)
+      @html_options[:class] = class_variants(clase: @html_options[:class])
+      @html_options[:size] = :default
+
+      PaginationLink(@options, @html_options) do
+        icon("chevron-left")
+        span(class: "hidden sm:block") { "Previous" }
+      end
+    end
+  end
+
+  class PaginationNext < Base
+    class_variants(base: "gap-1 px-2.5 sm:pr-2.5")
+
+    def initialize(options = nil, html_options = nil)
+      @options = options
+      @html_options = html_options
+    end
+
+    def default_attributes
+      {
+        aria: {
+          label: "Go to next page",
+        },
+      }
+    end
+
+    def view_template
+      @html_options ||= {}
+      @html_options = mix(default_attributes, @html_options)
+      @html_options[:class] = class_variants(clase: @html_options[:class])
+      @html_options[:size] = :default
+
+      PaginationLink(@options, @html_options) do
+        span(class: "hidden sm:block") { "Next" }
+        icon("chevron-right")
+      end
+    end
+  end
+
+  class PaginationLink < Base
+    def initialize(name = nil, options = nil, html_options = nil)
+      @name = name
+      @options = options
+      @html_options = html_options
+    end
+
+    def view_template(&)
+      if block_given?
+        @html_options = @options
+        @options = @name
+      end
+
+      @html_options ||= {}
+      @html_options = mix(default_attributes, @html_options)
+
+      active = @html_options.delete(:active)
+      size = @html_options.delete(:size)
+
+      if active
+        @html_options = mix({ aria: { current: "page" } }, @html_options)
+      end
+
+      @html_options[:class] = Button.new.class_variants(
+        variant: active ? :outline : :ghost,
+        size: size || :icon,
+        class: @html_options[:class],
+      )
+
+      if block_given?
+        li do
+          link_to(@options, @html_options, &)
+        end
+      else
+        li do
+          link_to(@name, @options, @html_options)
+        end
+      end
+    end
+  end
+
+  class PaginationEllipsis < Base
+    class_variants(base: "flex size-9 items-center justify-center")
+
+    def default_attributes
+      {
+        aria: {
+          hidden: "true",
+        },
+      }
+    end
+
+    def view_template
+      span(**@attributes) do
+        icon("ellipsis", class: "size-4")
+        span(class: "sr-only") { "More pages" }
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/popover.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Popover < Base
+    class_variants(base: "inline-block max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      @aria_id = "popover-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      PopoverTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      PopoverContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "popover",
+          popover_is_open_value: @open.to_s,
+          side: @side,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  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(&)
+        merged_attributes = merged_as_child_attributes(element, @attributes)
+
+        send(element.name, **merged_attributes) do
+          sanitize_as_child(element.children.to_s)
+        end
+      else
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        role: "button",
+        aria: {
+          haspopup: "dialog",
+          expanded: false,
+          controls: "#{@aria_id}-content",
+        },
+        data: {
+          as_child: @as_child.to_s,
+          action: "click->popover#toggle",
+          popover_target: "trigger",
+        },
+      }
+    end
+  end
+
+  class PopoverContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popper-transform-origin) rounded-md
+        border p-4 shadow-md outline-hidden
+      HEREDOC
+    )
+
+    def initialize(side: :bottom, align: :center, aria_id: nil, **attributes)
+      @side = side
+      @align = align
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        class: "hidden fixed top-0 left-0 w-max z-50",
+        data: { popover_target: "contentContainer" },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "dialog",
+        data: {
+          side: @side,
+          align: @align,
+          popover_target: "content",
+          action: "popover:click:outside->popover#clickOutside",
+        },
+      }
+    end
+  end
+end

data/lib/{components → shadcn_phlexcomponents/components}/progress.rb

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class Progress < Base
-    STYLES = "relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
+    class_variants(base: "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full")
 
     def initialize(value: 0, **attributes)
       @value = value
@@ -18,8 +18,8 @@ module ShadcnPhlexcomponents
           valuenow: @value,
         },
         data: {
-          controller: "shadcn-phlexcomponents--progress",
-          "shadcn-phlexcomponents--progress-progress-value": @value,
+          controller: "progress",
+          progress_percent_value: @value,
         },
       }
     end
@@ -27,9 +27,9 @@ module ShadcnPhlexcomponents
     def view_template
       div(**@attributes) do
         div(
-          class: "h-full w-full flex-1 bg-primary transition-all",
+          class: "bg-primary h-full w-full flex-1 transition-all",
           style: "transform: translateX(-#{100 - @value}%)",
-          data: { "shadcn-phlexcomponents--progress-target": "bar" },
+          data: { progress_target: "indicator" },
         )
       end
     end

data/lib/shadcn_phlexcomponents/components/radio_group.rb

@@ -0,0 +1,155 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class RadioGroup < Base
+    class_variants(base: "grid gap-3 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 label(**attributes)
+      @label_attributes = attributes
+      nil
+    end
+
+    def radio(**attributes)
+      @radio_attributes = attributes
+      nil
+    end
+
+    def item(name: nil, value: nil, checked: false, **attributes)
+      RadioGroupItem(name: name || @name, value: value, checked: checked || @value == value, **attributes)
+    end
+
+    def items(collection, value_method:, text_method:, container_class: nil, disabled_items: nil, id_prefix: nil, &)
+      vanish(&)
+
+      container_class = TAILWIND_MERGER.merge("flex items-center gap-3 #{container_class}")
+
+      if 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 = if id_prefix
+          "#{id_prefix.parameterize.underscore}_#{value}"
+        else
+          "#{@name.parameterize.underscore}_#{value}"
+        end
+
+        div(class: container_class) do
+          RadioGroupItem(
+            name: @name,
+            value: value,
+            checked: @value == value,
+            id: id,
+            disabled: item_disabled?(disabled_items, value),
+            **@radio_attributes,
+          )
+          Label(for: id, **@label_attributes) { text }
+        end
+      end
+
+      nil
+    end
+
+    def default_attributes
+      {
+        role: "radiogroup",
+        dir: @dir,
+        aria: {
+          required: false,
+        },
+        data: {
+          controller: "radio-group",
+          radio_group_selected_value: @value,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes) do
+        if @include_hidden
+          input(type: "hidden", name: @name, autocomplete: "off")
+        end
+
+        yield
+      end
+    end
+  end
+
+  class RadioGroupItem < Base
+    class_variants(
+      base: <<~HEREDOC,
+        border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20
+        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4
+        shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
+        disabled:cursor-not-allowed disabled:opacity-50 relative
+      HEREDOC
+    )
+
+    def initialize(name: nil, value: nil, checked: false, **attributes)
+      @value = value
+      @name = name
+      @checked = checked
+      super(**attributes)
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        span(
+          class: "relative flex items-center justify-center",
+          data: {
+            radio_group_target: "indicator",
+          },
+        ) do
+          icon("circle", class: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2")
+        end
+
+        input(
+          type: "radio",
+          value: @value,
+          class: "-translate-x-full pointer-events-none absolute top-0 left-0 size-4 opacity-0",
+          name: @name,
+          tabindex: -1,
+          checked: @checked,
+          aria: { hidden: "true" },
+          data: {
+            radio_group_target: "input",
+          },
+        )
+      end
+    end
+
+    def default_attributes
+      {
+        type: "button",
+        tabindex: -1,
+        role: "radio",
+        aria: {
+          checked: @checked.to_s,
+        },
+        data: {
+          checked: @checked.to_s,
+          value: @value,
+          radio_group_target: "item",
+          action: <<~HEREDOC,
+            click->radio-group#select
+            keydown.right->radio-group#selectItem:prevent
+            keydown.down->radio-group#selectItem:prevent
+            keydown.up->radio-group#selectItem:prevent
+            keydown.left->radio-group#selectItem:prevent
+            keydown.enter->radio-group#preventDefault
+          HEREDOC
+        },
+      }
+    end
+  end
+end