shadcn_phlexcomponents 0.1.0

data/lib/components/alert_dialog_trigger.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  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->shadcn-phlexcomponents--alert-dialog#open",
+          "shadcn-phlexcomponents--alert-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/alert_title.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AlertTitle < Base
+    STYLES = "mb-1 font-medium leading-none tracking-tight"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/aspect_ratio.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AspectRatio < Base
+    STYLES = "absolute inset-0"
+
+    def initialize(ratio: "1/1", **attributes)
+      ratio_arr = ratio.split("/").map(&:to_f)
+      @ratio = ratio_arr[0] / ratio_arr[1]
+      super(**attributes)
+    end
+
+    def view_template(&)
+      div(style: { position: "relative", width: "100%", "padding-bottom": "#{100 / @ratio}%" }) do
+        div(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/components/avatar.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Avatar < Base
+    STYLES = "relative flex h-10 w-10 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: "shadcn-phlexcomponents--avatar",
+        },
+      }
+    end
+
+    def view_template(&)
+      span(**@attributes, &)
+    end
+  end
+end

data/lib/components/avatar_fallback.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class AvatarFallback < Base
+    STYLES = "flex h-full w-full items-center justify-center rounded-full bg-muted"
+
+    def default_attributes
+      {
+        data: {
+          "shadcn-phlexcomponents--avatar-target": "fallback",
+        },
+      }
+    end
+
+    def view_template(&)
+      @class = @attributes.delete(:class)
+
+      span(class: "#{@class} hidden", **@attributes, &)
+    end
+  end
+end

data/lib/components/avatar_image.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+
+  class AvatarImage < Base
+    STYLES = "aspect-square h-full w-full"
+
+    def default_attributes
+      {
+        data: {
+          "shadcn-phlexcomponents--avatar-target": "image",
+        },
+      }
+    end
+
+    def view_template(&)
+      img(**@attributes, &)
+    end
+  end
+end

data/lib/components/badge.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Badge < Base
+    STYLES = <<~HEREDOC
+      inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold
+      transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+    HEREDOC
+
+    VARIANTS = {
+      primary: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+      outline: "text-foreground",
+    }.freeze
+
+    class << self
+      def default_styles(variant)
+        "#{STYLES} #{VARIANTS[variant]}"
+      end
+    end
+
+    def initialize(variant: :primary, **attributes)
+      @variant = variant
+      super(**attributes)
+    end
+
+    def default_styles
+      self.class.default_styles(@variant)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/base.rb

@@ -0,0 +1,108 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Base < Phlex::HTML
+    # Include any helpers you want to be available across all components
+    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
+
+    SANITIZER_ALLOWED_ATTRIBUTES = (Rails::HTML::SafeListSanitizer.allowed_attributes.to_a +
+      [
+        "viewBox",
+        "preserveaspectratio",
+        "cx",
+        "cy",
+        "d",
+        "fill",
+        "height",
+        "points",
+        "r",
+        "stroke",
+        "width",
+        "x",
+        "y",
+        "stroke-linejoin",
+        "stroke-width",
+        "stroke-linecap",
+        "aria-hidden",
+        "class"
+      ]).freeze
+
+    def initialize(**attributes)
+      @attributes = mix(default_attributes, attributes)
+      @attributes[:class] = TAILWIND_MERGER.merge("#{default_styles} #{@attributes[:class]}")
+    end
+
+    if Rails.env.development?
+      def before_template
+        comment { "Before #{self.class.name}" }
+        super
+      end
+    end
+
+    def default_attributes
+      {}
+    end
+
+    def default_styles
+      self.class::STYLES
+    end
+
+    def nokogiri_attributes_to_hash(element)
+      hash = {}
+
+      element.attributes.each do |key, attr|
+        hash[key] = attr.value
+      end
+
+      hash.transform_keys(&:to_sym)
+    end
+
+    def sanitize_as_child(html)
+      sanitize(
+        html,
+        tags: SANITIZER_ALLOWED_TAGS,
+        attributes: SANITIZER_ALLOWED_ATTRIBUTES,
+      )
+    end
+
+    def find_as_child(rendered_element)
+      fragment = Nokogiri::HTML.fragment(rendered_element)
+      element = fragment.children.find do |child|
+        if child.is_a?(Nokogiri::XML::Comment)
+          false
+        else
+          (child.is_a?(Nokogiri::XML::Text) && child.text.strip.present?) || !child.is_a?(Nokogiri::XML::Text)
+        end
+      end
+
+      element
+    end
+
+    # https://github.com/heyvito/lucide-rails/blob/master/lib/lucide-rails/rails_helper.rb
+    def icon(named, **options)
+      options = options.with_indifferent_access
+      size = options.delete(:size)
+      options = options.merge width: size, height: size if size
+
+      svg(**LucideRails.default_options.merge(**options)) { LucideRails::IconProvider.icon(named).html_safe }
+    end
+
+    def convert_collection_hash_to_struct(collection, value_method:, text_method:)
+      structConstructor = Struct.new(value_method, text_method)
+      collection.map do |item|
+        struct = structConstructor.new
+        struct[value_method] = item[value_method]
+        struct[text_method] = item[text_method]
+        struct
+      end
+    end
+  end
+end

data/lib/components/breadcrumb.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Breadcrumb < Base
+    STYLES = "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
+
+    def item(**attributes, &)
+      BreadcrumbItem(**attributes, &)
+    end
+
+    def link(name = nil, options = nil, html_options = nil, &block)
+      BreadcrumbLink(name, options, html_options, &block)
+    end
+
+    def separator(**attributes, &)
+      BreadcrumbSeparator(**attributes, &)
+    end
+
+    def page(**attributes, &)
+      BreadcrumbPage(**attributes, &)
+    end
+
+    def ellipsis(**attributes)
+      BreadcrumbEllipsis(**attributes)
+    end
+
+    def links(collection)
+      collection.each_with_index do |link, index|
+        if index == collection.size - 1
+          item do
+            page { link[:name] }
+          end
+        else
+          item do
+            link(link[:name], link[:path])
+          end
+        end
+
+        if index < collection.size - 1
+          separator
+        end
+      end
+    end
+
+    def view_template(&)
+      nav(aria: { label: "breadcrumb" }) do
+        ol(**@attributes, &)
+      end
+    end
+  end
+end

data/lib/components/breadcrumb_ellipsis.rb

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

data/lib/components/breadcrumb_item.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class BreadcrumbItem < Base
+    STYLES = "inline-flex items-center gap-1.5"
+
+    def view_template(&)
+      li(**@attributes, &)
+    end
+  end
+end

data/lib/components/breadcrumb_link.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class BreadcrumbLink < Link
+    STYLES = "transition-colors hover:text-foreground"
+  end
+end

data/lib/components/breadcrumb_page.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class BreadcrumbPage < Base
+    STYLES = "font-normal text-foreground"
+
+    def default_attributes
+      {
+        role: "link",
+        aria: {
+          disabled: "true",
+          current: "page",
+        },
+      }
+    end
+
+    def view_template(&)
+      span(**@attributes, &)
+    end
+  end
+end

data/lib/components/breadcrumb_separator.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class BreadcrumbSeparator < Base
+    STYLES = "[&>svg]:w-3.5 [&>svg]:h-3.5"
+
+    def default_attributes
+      {
+        role: "presentation",
+        aria: {
+          hidden: "true",
+        },
+      }
+    end
+
+    def view_template(&)
+      li(**@attributes) do
+        if block_given?
+          yield
+        else
+          icon("chevron-right")
+        end
+      end
+    end
+  end
+end

data/lib/components/button.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Button < Base
+    STYLES = <<~HEREDOC
+      inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md
+      text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1
+      focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50
+      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer
+    HEREDOC
+
+    VARIANTS = {
+      primary: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+      secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+      destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+      outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+      ghost: "hover:bg-accent hover:text-accent-foreground",
+      link: "text-primary underline-offset-4 hover:underline",
+    }.freeze
+
+    SIZES = {
+      default: "h-9 px-4 py-2",
+      sm: "h-8 rounded-md px-3 text-xs",
+      lg: "h-10 rounded-md px-8",
+      icon: "h-9 w-9",
+    }
+
+    class << self
+      def default_styles(variant:, size:)
+        "#{STYLES} #{VARIANTS[variant]} #{SIZES[size]}"
+      end
+    end
+
+    def initialize(variant: :primary, size: :default, type: :button, **attributes)
+      @type = type
+      @variant = variant
+      @size = size
+      super(**attributes)
+    end
+
+    def default_attributes
+      { type: @type }
+    end
+
+    def default_styles
+      self.class.default_styles(variant: @variant, size: @size)
+    end
+
+    def view_template(&)
+      button(**@attributes, &)
+    end
+  end
+end

data/lib/components/card.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Card < Base
+    STYLES = "rounded-xl border bg-card text-card-foreground shadow"
+
+    def header(**attributes, &)
+      CardHeader(**attributes, &)
+    end
+
+    def title(**attributes, &)
+      CardTitle(**attributes, &)
+    end
+
+    def description(**attributes, &)
+      CardDescription(**attributes, &)
+    end
+
+    def content(**attributes, &)
+      CardContent(**attributes, &)
+    end
+
+    def footer(**attributes, &)
+      CardFooter(**attributes, &)
+    end
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/card_content.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class CardContent < Base
+    STYLES = "p-6 pt-0"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/card_description.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class CardDescription < Base
+    STYLES = "text-sm text-muted-foreground"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/card_footer.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class CardFooter < Base
+    STYLES = "flex items-center p-6 pt-0"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/card_header.rb

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

data/lib/components/card_title.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class CardTitle < Base
+    STYLES = "font-semibold leading-none tracking-tight"
+
+    def view_template(&)
+      div(**@attributes, &)
+    end
+  end
+end

data/lib/components/checkbox.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module ShadcnPhlexcomponents
+  class Checkbox < Base
+    STYLES = <<~HEREDOC.freeze
+      peer size-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none
+      focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50
+      data-[checked=true]:bg-primary data-[checked=true]:text-primary-foreground relative
+      cursor-pointer group/checkbox
+    HEREDOC
+
+    def initialize(name: nil, value: "1", unchecked_value: "0", checked: false, id: nil, include_hidden: true, **attributes)
+      @name = name
+      @value = value
+      @unchecked_value = unchecked_value
+      @checked = checked
+      @id = id || name
+      @include_hidden = include_hidden
+      super(**attributes)
+    end
+
+    def view_template(&)
+      button(**@attributes) do
+        span(class: "absolute inset-0 items-center justify-center text-current 
+                    pointer-events-none hidden group-data-[checked=true]/checkbox:flex") do
+          icon("check", class: "size-4")
+        end
+
+        if @include_hidden
+          input(name: @name, type: "hidden", value: @unchecked_value, autocomplete: "off")
+        end
+
+        input(
+          type: "checkbox", 
+          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: {
+            "shadcn-phlexcomponents--checkbox-target": "input"
+          }
+        )
+      end
+    end
+
+    def default_attributes
+      { 
+        id: @id,
+        type: "button",
+        role: "checkbox",
+        aria: {
+          checked: @checked.to_s,
+        },
+        data: {
+          checked: @checked.to_s,
+          controller: "shadcn-phlexcomponents--checkbox",
+          action: "click->shadcn-phlexcomponents--checkbox#toggle keydown.enter->shadcn-phlexcomponents--checkbox#preventDefault",
+          "shadcn-phlexcomponents--checkbox-checked-value": @checked,
+        }
+      }
+    end
+  end
+end