shadcn_phlexcomponents 0.1.9 → 0.1.11

data/lib/shadcn_phlexcomponents/components/accordion.rb

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Accordion < Base
+    def initialize(value: nil, multiple: false, **attributes)
+      @multiple = multiple
+      @value = value.is_a?(Array) ? value : [value]
+      @aria_id = "accordion-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def item(**attributes, &)
+      AccordionItem(**attributes, &)
+    end
+
+    def trigger(**attributes, &)
+      AccordionTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      AccordionContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          multiple: @multiple.to_s,
+          controller: "accordion",
+          accordion_open_items_value: @value.compact.to_json,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AccordionItem < Base
+    class_variants(base: "border-b last:border-b-0")
+
+    def initialize(value:, **attributes)
+      @value = value
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          value: @value,
+          accordion_target: "item",
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AccordionTrigger < Base
+    class_variants(
+      base: <<~HEREDOC,
+        focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between
+        gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline
+        focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180
+      HEREDOC
+    )
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        type: "button",
+        id: "#{@aria_id}-trigger",
+        aria: {
+          controls: "#{@aria_id}-content",
+          expanded: "false",
+        },
+        data: {
+          state: "closed",
+          action: <<~HEREDOC,
+            click->accordion#toggle
+            keydown.up->accordion#focusTrigger:prevent
+            keydown.down->accordion#focusTrigger:prevent
+          HEREDOC
+        },
+      }
+    end
+
+    def view_template(&)
+      h3(class: "flex") do
+        button(**@attributes) do
+          yield
+
+          icon("chevron-down", class: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200")
+        end
+      end
+    end
+  end
+
+  class AccordionContent < Base
+    class_variants(base: "pt-0 pb-4")
+
+    def initialize(aria_id: :nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(
+        class: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+        id: "#{@aria_id}-content",
+        role: "region",
+        aria: {
+          labelledby: "#{@aria_id}-trigger",
+        },
+        data: {
+          state: "closed",
+          shadcn_phlexcomponents: "accordion-content-container",
+        },
+      ) do
+        div(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/alert.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Alert < Base
+    class_variants(
+      base: <<~HEREDOC,
+        relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]
+        grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5
+        [&>svg]:text-current
+      HEREDOC
+      variants: {
+        variant: {
+          default: "bg-card text-card-foreground",
+          destructive: "text-destructive bg-card [&>svg]:text-current *:data-[shadcn-phlexcomponents=alert-description]:text-destructive/90",
+        },
+      },
+      defaults: {
+        variant: :default,
+      },
+    )
+
+    def initialize(variant: :default, **attributes)
+      @class_variants = { variant: variant }
+      super(**attributes)
+    end
+
+    def title(**attributes, &)
+      AlertTitle(**attributes, &)
+    end
+
+    def description(**attributes, &)
+      AlertDescription(**attributes, &)
+    end
+
+    def default_attributes
+      { role: "alert" }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AlertTitle < Base
+    class_variants(base: "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AlertDescription < Base
+    class_variants(base: "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/alert_dialog.rb

@@ -0,0 +1,276 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertDialog < Base
+    class_variants(base: "inline-block max-w-fit")
+
+    def initialize(open: false, **attributes)
+      @open = open
+      @aria_id = "alert-dialog-#{SecureRandom.hex(5)}"
+      super(**attributes)
+    end
+
+    def trigger(**attributes, &)
+      AlertDialogTrigger(aria_id: @aria_id, **attributes, &)
+    end
+
+    def content(**attributes, &)
+      AlertDialogContent(aria_id: @aria_id, **attributes, &)
+    end
+
+    def header(**attributes, &)
+      AlertDialogHeader(**attributes, &)
+    end
+
+    def title(**attributes, &)
+      AlertDialogTitle(aria_id: @aria_id, **attributes, &)
+    end
+
+    def description(**attributes, &)
+      AlertDialogDescription(aria_id: @aria_id, **attributes, &)
+    end
+
+    def footer(**attributes, &)
+      AlertDialogFooter(**attributes, &)
+    end
+
+    def cancel(**attributes, &)
+      AlertDialogCancel(**attributes, &)
+    end
+
+    def action(**attributes, &)
+      AlertDialogAction(**attributes, &)
+    end
+
+    def action_to(name = nil, options = nil, html_options = nil, &)
+      AlertDialogActionTo(name, options, html_options, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "dialog",
+          dialog_is_open_value: @open.to_s,
+        },
+      }
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AlertDialogTrigger < 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->dialog#open",
+          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(&)
+        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
+  end
+
+  class AlertDialogContent < Base
+    class_variants(
+      base: <<~HEREDOC,
+        bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)]
+        translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg
+        pointer-events-auto
+      HEREDOC
+    )
+
+    def initialize(aria_id: nil, **attributes)
+      @aria_id = aria_id
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        id: "#{@aria_id}-content",
+        tabindex: -1,
+        role: "alertdialog",
+        aria: {
+          describedby: "#{@aria_id}-description",
+          labelledby: "#{@aria_id}-title",
+        },
+        data: {
+          state: "closed",
+          dialog_target: "content",
+        },
+      }
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+      div(class: "#{@class} hidden", **@attributes, &)
+    end
+  end
+
+  class AlertDialogHeader < Base
+    class_variants(base: "flex flex-col gap-2 text-center sm:text-left")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AlertDialogTitle < Base
+    class_variants(base: "text-lg font-semibold")
+
+    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
+
+  class AlertDialogDescription < Base
+    class_variants(base: "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
+
+  class AlertDialogFooter < Base
+    class_variants(base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end")
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+
+  class AlertDialogCancel < Base
+    def initialize(variant: :outline, size: :default, **attributes)
+      @variant = variant
+      @size = size
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          action: "click->dialog#close",
+        },
+      }
+    end
+
+    def view_template(&)
+      Button(variant: @variant, size: @size, **@attributes, &)
+    end
+  end
+
+  class AlertDialogAction < Base
+    def initialize(variant: :default, size: :default, as_child: false, **attributes)
+      @variant = variant
+      @size = size
+      @as_child = as_child
+      super(**attributes)
+    end
+
+    def default_attributes
+      {
+        data: {
+          action: "click->dialog#close",
+        },
+      }
+    end
+
+    def class_variants(**args)
+      Button.new.class_variants(variant: @variant, size: @size, class: args[:class])
+    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
+        button(**@attributes, &)
+      end
+    end
+  end
+
+  class AlertDialogActionTo < AlertDialogAction
+    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 ||= {}
+      @variant = @html_options.delete(:variant) || :default
+      @size = @html_options.delete(:size) || :default
+      merge_default_attributes({})
+      @html_options = mix(@attributes, @html_options)
+
+      if block_given?
+        button_to(@options, @html_options, &)
+      else
+        button_to(@name, @options, @html_options)
+      end
+    end
+  end
+end

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

@@ -2,7 +2,7 @@
 
 module ShadcnPhlexcomponents
   class AspectRatio < Base
-    STYLES = "absolute inset-0"
+    class_variants(base: "absolute inset-0")
 
     def initialize(ratio: "1/1", **attributes)
       ratio_arr = ratio.split("/").map(&:to_f)
@@ -11,7 +11,7 @@ module ShadcnPhlexcomponents
     end
 
     def view_template(&)
-      div(style: { position: "relative", width: "100%", "padding-bottom": "#{100 / @ratio}%" }) do
+      div(class: "relative w-full", style: { "padding-bottom": "#{100 / @ratio}%" }) do
         div(**@attributes, &)
       end
     end

data/lib/shadcn_phlexcomponents/components/avatar.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Avatar < Base
+    class_variants(base: "relative flex size-8 shrink-0 overflow-hidden rounded-full")
+
+    def initialize(**attributes)
+      super(**attributes)
+    end
+
+    def image(**attributes, &)
+      AvatarImage(**attributes, &)
+    end
+
+    def fallback(**attributes, &)
+      AvatarFallback(**attributes, &)
+    end
+
+    def default_attributes
+      {
+        data: {
+          controller: "avatar",
+        },
+      }
+    end
+
+    def view_template(&)
+      span(**@attributes, &)
+    end
+  end
+
+  class AvatarImage < Base
+    class_variants(base: "aspect-square size-full")
+
+    def default_attributes
+      {
+        data: {
+          avatar_target: "image",
+        },
+      }
+    end
+
+    def view_template(&)
+      img(**@attributes, &)
+    end
+  end
+
+  class AvatarFallback < Base
+    class_variants(base: "bg-muted flex size-full items-center justify-center rounded-full")
+
+    def default_attributes
+      {
+        data: {
+          avatar_target: "fallback",
+        },
+      }
+    end
+
+    def view_template(&)
+      span(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/badge.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Badge < Base
+    class_variants(
+      base: <<~HEREDOC,
+        inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium
+        w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none
+        focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]
+        aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
+        transition-[color,box-shadow] overflow-hidden
+      HEREDOC
+      variants: {
+        variant: {
+          default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+          secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+          destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        },
+      },
+      defaults: {
+        variant: :default,
+      },
+    )
+
+    def initialize(variant: :default, **attributes)
+      @class_variants = { variant: variant }
+      super(**attributes)
+    end
+
+    def view_template(&)
+      span(**@attributes, &)
+    end
+  end
+end

data/lib/shadcn_phlexcomponents/components/base.rb

@@ -2,13 +2,12 @@
 
 module ShadcnPhlexcomponents
   class Base < Phlex::HTML
-    # Include any helpers you want to be available across all components
+    include ClassVariants::Helper
     include Phlex::Rails::Helpers::Sanitize
     include Phlex::Rails::Helpers::LinkTo
     include Phlex::Rails::Helpers::ButtonTo
 
     TAILWIND_MERGER = ::TailwindMerge::Merger.new.freeze
-    STYLES = ""
 
     SANITIZER_ALLOWED_TAGS = (Rails::HTML::SafeListSanitizer.allowed_tags.to_a +
       ["svg", "path", "polygon", "polyline", "circle", "ellipse", "rect", "line", "use", "defs", "g"]).freeze
@@ -33,11 +32,29 @@ module ShadcnPhlexcomponents
         "stroke-linecap",
         "aria-hidden",
         "class",
+        "x1",
+        "x2",
+        "y1",
+        "y2",
       ]).freeze
 
     def initialize(**attributes)
+      merge_default_attributes(attributes)
+    end
+
+    def merge_default_attributes(attributes)
       @attributes = mix(default_attributes, attributes)
-      @attributes[:class] = TAILWIND_MERGER.merge("#{default_styles} #{@attributes[:class]}")
+      @attributes = mix(@attributes, {
+        data: {
+          shadcn_phlexcomponents: self.class.name.demodulize.underscore.dasherize,
+        },
+      })
+
+      @attributes[:class] = class_variants(class: @attributes[:class], **@class_variants&.compact)
+
+      if @attributes[:class].blank?
+        @attributes.delete(:class)
+      end
     end
 
     if Rails.env.development?
@@ -51,10 +68,6 @@ module ShadcnPhlexcomponents
       {}
     end
 
-    def default_styles
-      self.class::STYLES
-    end
-
     def nokogiri_attributes_to_hash(element)
       hash = {}
 
@@ -86,6 +99,20 @@ module ShadcnPhlexcomponents
       element
     end
 
+    def merged_as_child_attributes(element, component_attributes)
+      element_attributes = nokogiri_attributes_to_hash(element)
+      merged_attributes = mix(component_attributes, element_attributes)
+      merged_attributes[:class] = TAILWIND_MERGER.merge("#{component_attributes[:class]} #{element_attributes[:class]}")
+
+      # some components are divs that have role="button",
+      # we should remove it if the child element is a button
+      if component_attributes[:role].present? && component_attributes[:role].to_sym == :button && element.name == "button"
+        merged_attributes.delete(:role)
+      end
+
+      merged_attributes
+    end
+
     # https://github.com/heyvito/lucide-rails/blob/master/lib/lucide-rails/rails_helper.rb
     def icon(named, **options)
       options = options.with_indifferent_access